From 97fc2e4a0b39628b40e8194f5c10c28930575d41 Mon Sep 17 00:00:00 2001
From: Khuda Dad Nomani <khudadad414@gmail.com>
Date: Mon, 3 Jun 2024 21:40:43 +0100
Subject: [PATCH] refactor it's user

---
 .../src/styles/tailwind.output.css            | 36 ++++++++++++++-----
 packages/ui/components/Toolbar.tsx            | 33 +++++++++++------
 packages/ui/package.json                      |  1 +
 3 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/apps/design-system/src/styles/tailwind.output.css b/apps/design-system/src/styles/tailwind.output.css
index 15b242d52..0a66c7bef 100644
--- a/apps/design-system/src/styles/tailwind.output.css
+++ b/apps/design-system/src/styles/tailwind.output.css
@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -32,9 +32,11 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5;
   /* 1 */
   -webkit-text-size-adjust: 100%;
@@ -48,6 +50,8 @@ html {
   /* 5 */
   font-variation-settings: normal;
   /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
 }
 
 /*
@@ -119,8 +123,10 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -129,8 +135,12 @@ samp,
 pre {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   /* 1 */
-  font-size: 1em;
+  font-feature-settings: normal;
   /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
 }
 
 /*
@@ -199,6 +209,8 @@ textarea {
   /* 1 */
   line-height: inherit;
   /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
   color: inherit;
   /* 1 */
   margin: 0;
@@ -222,9 +234,9 @@ select {
 */
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -473,6 +485,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 ::backdrop {
@@ -523,6 +539,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 .m-3 {
diff --git a/packages/ui/components/Toolbar.tsx b/packages/ui/components/Toolbar.tsx
index 3b41ab134..3c20f6237 100644
--- a/packages/ui/components/Toolbar.tsx
+++ b/packages/ui/components/Toolbar.tsx
@@ -1,7 +1,7 @@
 import Tooltip from './Tooltip'
 import * as RadixToolbar from '@radix-ui/react-toolbar'
 import { FunctionComponent } from 'react'
-import { DropdownMenu, DropdownMenuItem } from './DropdownMenu'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from './DropdownMenu'
 
 interface ToolbarToggleItem {
   type: 'toggle'
@@ -31,10 +31,21 @@ interface ToolbarSeparatorItem {
   type: 'separator'
 }
 
+interface DropdownMenuRegularItem {
+  type?: 'regular'
+  title: string
+  onSelect: () => void
+}
+
+interface DropdownMenuSeparatorItem {
+  type: 'separator'
+}
+
+type DropdownMenuItemInterface = DropdownMenuRegularItem | DropdownMenuSeparatorItem
 interface ToolbarDropdownMenuItem {
   type: 'dropdownMenu',
   icon: FunctionComponent<any>
-  items: DropdownMenuItem[]
+  items: DropdownMenuItemInterface[]
 }
 
 type ToolbarItem = ToolbarToggleItem | ToolbarToggleGroupSingleItem | ToolbarToggleGroupMultipleItem | ToolbarSeparatorItem | ToolbarDropdownMenuItem
@@ -117,17 +128,19 @@ const ToolbarItem: FunctionComponent<ToolbarItemProps> = ({ item }) => {
     )
   } else if (type === 'dropdownMenu') {
     return (
-      <DropdownMenu
-        trigger={
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
           <button className="flex text-sm focus:outline-none border-box py-2 my-3.5 text-gray-500 hover:text-white focus:text-white rounded">
             <item.icon className="w-6 h-6"/>
           </button>
-        }
-        items={item.items}
-        side="bottom"
-        align="end"
-      />
-      
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          {item.items.map((menuItem) => (
+            menuItem.type === 'separator' ? <DropdownMenuSeparator key={menuItem.type} /> :
+            <DropdownMenuItem key={menuItem.title} onSelect={menuItem.onSelect}>{menuItem.title}</DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
     )
   } 
   throw new Error(`Unsupported type of Toolbar item: ${type}`)
diff --git a/packages/ui/package.json b/packages/ui/package.json
index ac3a5c139..f6b53e03d 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -39,6 +39,7 @@
     "eslint-config-custom": "workspace:*",
     "postcss": "^8.4.31",
     "tailwind-config": "workspace:*",
+    "@asyncapi/studio-utils": "workspace:*",
     "tsconfig": "workspace:*",
     "tsup": "^8.0.2",
     "typescript": "^4.9.4"