Fixed: Dropdown docs issue fixed.

StaticMania · Dec 2, 2024 · e8e9c78 · e8e9c78
1 parent 6b72cfd
commit e8e9c78
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 55 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1,5 +1,5 @@
 # Ignore artifacts:
 .next/
-
+lib
 # Ignore specific files:
 package-lock.json
diff --git a/app/docs/components/dropdown/variant/DefaultDropdown.tsx b/app/docs/components/dropdown/variant/DefaultDropdown.tsx
@@ -15,7 +15,7 @@ const DefaultDropdown = () => {
         <DropdownAction asChild>
           <Button>Open Dropdown</Button>
         </DropdownAction>
-        <DropdownContent onClick={(e) => e.stopPropagation()}>
+        <DropdownContent>
           <DropdownArrow />
           <DropdownItem>Contacts</DropdownItem>
           <DropdownItem>Phone</DropdownItem>
@@ -34,26 +34,33 @@ const DefaultDropdown = () => {
 
 const DefaultDropdownCode = {
   'DropdownComponent.tsx': `
-import { Button, Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList }  from 'keep-react'
+import {
+  Button,
+  Dropdown,
+  DropdownAction,
+  DropdownArrow,
+  DropdownContent,
+  DropdownDivider,
+  DropdownItem,
+} from 'keep-react'
 
 export const DropdownComponent = () => {
   return (
     <Dropdown>
       <DropdownAction asChild>
-         <Button>Open Dropdown</Button>
+        <Button>Open Dropdown</Button>
       </DropdownAction>
       <DropdownContent>
-        <DropdownList>
-          <DropdownItem>Contacts</DropdownItem>
-          <DropdownItem>Phone</DropdownItem>
-          <DropdownItem>Statistics</DropdownItem>
-          <Divider />
-          <DropdownItem>Rename</DropdownItem>
-          <DropdownItem>Duplicate</DropdownItem>
-          <Divider />
-          <DropdownItem>Account</DropdownItem>
-          <DropdownItem>Logout</DropdownItem>
-        </DropdownList>
+        <DropdownArrow />
+        <DropdownItem>Contacts</DropdownItem>
+        <DropdownItem>Phone</DropdownItem>
+        <DropdownItem>Statistics</DropdownItem>
+        <DropdownDivider />
+        <DropdownItem>Rename</DropdownItem>
+        <DropdownItem>Duplicate</DropdownItem>
+        <DropdownDivider />
+        <DropdownItem>Account</DropdownItem>
+        <DropdownItem>Logout</DropdownItem>
       </DropdownContent>
     </Dropdown>
   )

diff --git a/app/docs/components/dropdown/variant/DropdownWithIcon.tsx b/app/docs/components/dropdown/variant/DropdownWithIcon.tsx
@@ -66,49 +66,63 @@ const DropdownWithIconCode = {
   'DropdownComponent.tsx': `
 'use client'
 import { ChartPieSlice, Copy, Pen, Phone, SignOut, UserCircle, Users } from 'phosphor-react'
-import { Button, Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList} from 'keep-react'
+import {
+  Button,
+  Dropdown,
+  DropdownAction,
+  DropdownArrow,
+  DropdownContent,
+  DropdownDivider,
+  DropdownGroup,
+  DropdownItem,
+} from 'keep-react'
 
 export const DropdownComponent = () => {
   return (
     <Dropdown>
-      <DropdownAction asChild>
-         <Button>Open Dropdown</Button>
-      </DropdownAction>
-      <DropdownContent>
-        <DropdownList>
-          <DropdownItem>
-            <Users size={20} />
-            Contacts
-          </DropdownItem>
-          <DropdownItem>
-            <Phone size={20} />
-            Phone
-          </DropdownItem>
-          <DropdownItem>
-            <ChartPieSlice size={20} />
-            Statistics
-          </DropdownItem>
+        <DropdownAction asChild>
+          <Button>Open Dropdown</Button>
+        </DropdownAction>
+        <DropdownContent>
+          <DropdownArrow />
+          <DropdownGroup>
+            <DropdownItem>
+              <Users size={20} />
+              Contacts
+            </DropdownItem>
+            <DropdownItem>
+              <Phone size={20} />
+              Phone
+            </DropdownItem>
+            <DropdownItem>
+              <ChartPieSlice size={20} />
+              Statistics
+            </DropdownItem>
+          </DropdownGroup>
           <DropdownDivider />
-          <DropdownItem>
-            <Pen size={20} />
-            Rename
-          </DropdownItem>
-          <DropdownItem>
-            <Copy size={20} />
-            Duplicate
-          </DropdownItem>
+          <DropdownGroup>
+            <DropdownItem>
+              <Pen size={20} />
+              Rename
+            </DropdownItem>
+            <DropdownItem>
+              <Copy size={20} />
+              Duplicate
+            </DropdownItem>
+          </DropdownGroup>
           <DropdownDivider />
-          <DropdownItem>
-            <UserCircle size={20} />
-            Account
-          </DropdownItem>
-          <DropdownItem>
-            <SignOut size={20} />
-            Logout
-          </DropdownItem>
-        </DropdownList>
-      </DropdownContent>
-    </Dropdown>
+          <DropdownGroup>
+            <DropdownItem>
+              <UserCircle size={20} />
+              Account
+            </DropdownItem>
+            <DropdownItem>
+              <SignOut size={20} />
+              Logout
+            </DropdownItem>
+          </DropdownGroup>
+        </DropdownContent>
+      </Dropdown>
   )
 }
 `,

diff --git a/app/docs/components/table/variant/ProductTable.tsx b/app/docs/components/table/variant/ProductTable.tsx
@@ -98,7 +98,6 @@ import {
   DropdownAction,
   DropdownContent,
   DropdownItem,
-  DropdownList,
   Table,
   TableBody,
   TableCaption,

diff --git a/app/src/components/Divider/Divider.tsx b/app/src/components/Divider/Divider.tsx
@@ -3,7 +3,7 @@ import { FC, ReactNode } from 'react'
 import { cn } from '../../utils/cn'
 import { DividerColorVariant, DividerSizeVariant, dividerTheme } from './theme'
 
-interface DividerProps {
+export interface DividerProps {
   color?: keyof DividerColorVariant
   size?: keyof DividerSizeVariant
   variant?: 'start' | 'end' | 'center'

diff --git a/tsconfig.lib.json b/tsconfig.lib.json
@@ -2,7 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "jsx": "react-jsx",
-    "module": "CommonJS",
+    "module": "ES2015",
     "outDir": "./lib"
   },
   "exclude": ["app/**/*.stories.tsx"],