fix bug on drawer

irsyadadl · Sep 8, 2024 · 8afc129 · 8afc129
1 parent a62286b
commit 8afc129
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 16 deletions.
diff --git a/app/(app)/colors/(colors)/copy-json-color-shades.tsx b/app/(app)/colors/(colors)/copy-json-color-shades.tsx
@@ -40,6 +40,12 @@ export function CopyJsonColorShades({
     const formattedColorName = colorName.includes("-")
       ? `'${getColorName(colorScales[4].color)}'`
       : colorName
+    const codeString = colorScales
+      .map(
+        ({ shade, color }: any) =>
+          `'${shade}': '${parseColor(color).toString(selectedFormat as ColorFormat)}'`
+      )
+      .join(",\n  ")
     return `${formattedColorName}: {\n  ${codeString}\n}`
   }
 

diff --git a/bun.lockb b/bun.lockb
diff --git a/components/ui/drawer.tsx b/components/ui/drawer.tsx
@@ -50,11 +50,25 @@ const useDrawerContext = () => {
   return context
 }
 
-const ModalPrimitive = motion(Modal)
-const ModalOverlayPrimitive = motion(ModalOverlay)
+const ModalWrapper = React.forwardRef<HTMLDivElement, React.ComponentProps<typeof Modal>>(
+  (props, ref) => <Modal ref={ref} {...props} />
+)
+ModalWrapper.displayName = "ModalWrapper"
+
+const ModalOverlayWrapper = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof ModalOverlay>
+>((props, ref) => <ModalOverlay ref={ref} {...props} />)
+ModalOverlayWrapper.displayName = "ModalOverlayWrapper"
+
+const ModalPrimitive = motion(ModalWrapper)
+const ModalOverlayPrimitive = motion(ModalOverlayWrapper)
 
 interface DrawerOverlayPrimitiveProps
-  extends Omit<React.ComponentProps<typeof ModalOverlayPrimitive>, "isOpen" | "onOpenChange"> {
+  extends Omit<
+    React.ComponentProps<typeof ModalOverlayPrimitive>,
+    "isOpen" | "onOpenChange" | "style"
+  > {
   "aria-label"?: DialogProps["aria-label"]
   "aria-labelledby"?: DialogProps["aria-labelledby"]
   role?: DialogProps["role"]
@@ -220,7 +234,7 @@ const Drawer = ({
   )
 }
 
-const DrawerContent = ({ children, ...props }: React.ComponentProps<typeof DrawerPrimitive>) => {
+const Content = ({ children, ...props }: React.ComponentProps<typeof DrawerPrimitive>) => {
   return (
     <DrawerPrimitive>
       <DrawerContentPrimitive {...props}>
@@ -263,7 +277,7 @@ const DrawerFooter = ({
 
 Drawer.Body = DrawerBody
 Drawer.Close = Dialog.Close
-Drawer.Content = DrawerContent
+Drawer.Content = Content
 Drawer.Description = Dialog.Description
 Drawer.Footer = DrawerFooter
 Drawer.Header = DrawerHeader

diff --git a/package.json b/package.json
@@ -22,25 +22,25 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "color-namer": "^1.4.0",
-    "embla-carousel-autoplay": "^8.2.0",
-    "embla-carousel-react": "^8.2.0",
-    "framer-motion": "^11.3.31",
+    "embla-carousel-autoplay": "^8.2.1",
+    "embla-carousel-react": "^8.2.1",
+    "framer-motion": "^11.5.4",
     "input-otp": "^1.2.4",
-    "justd-icons": "^1.4.44",
-    "next": "^14.2.7",
+    "justd-icons": "^1.4.45",
+    "next": "^14.2.8",
     "next-themes": "^0.2.1",
     "next-view-transitions": "^0.2.0",
     "node-fetch": "^3.3.2",
     "ntcjs": "^1.1.3",
     "react": "^18.3.1",
     "react-aria-components": "^1.3.3",
     "react-dom": "^18.3.1",
-    "react-intersection-observer": "^9.13.0",
+    "react-intersection-observer": "^9.13.1",
     "react-use-measure": "^2.1.1",
     "rehype-pretty-code": "^0.13.2",
     "rehype-stringify": "^10.0.0",
     "sharp": "^0.33.5",
-    "shiki": "^1.16.1",
+    "shiki": "^1.16.2",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.5.2",
     "tailwind-variants": "^0.2.1",
@@ -51,24 +51,24 @@
     "usemods": "^1.7.1"
   },
   "devDependencies": {
-    "@shikijs/rehype": "^1.16.1",
+    "@shikijs/rehype": "^1.16.2",
     "@tailwindcss/typography": "^0.5.15",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/chroma-js": "^2.4.4",
     "@types/color-namer": "^1.3.3",
     "@types/culori": "^2.1.1",
-    "@types/node": "^20.16.3",
+    "@types/node": "^20.16.5",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@types/title": "^3.4.3",
     "autoprefixer": "^10.4.20",
     "encoding": "^0.1.13",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.2.7",
+    "eslint-config-next": "^14.2.8",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "husky": "^9.1.5",
-    "postcss": "^8.4.44",
+    "postcss": "^8.4.45",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "rehype-autolink-headings": "^7.1.0",