menu section should share the props

irsyadadl · Nov 22, 2024 · 3de07ee · 3de07ee
1 parent 26dd06c
commit 3de07ee
Show file tree

Hide file tree

Showing 12 changed files with 102 additions and 13 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -14,8 +14,8 @@
     "@typescript-eslint/consistent-type-definitions": "off",
     "@next/next/no-img-element": "off",
     "@typescript-eslint/prefer-nullish-coalescing": "off",
-    "@typescript-eslint/consistent-type-imports": "warn",
-    "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/consistent-type-imports": "error",
+    "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/require-await": "off",
     "react/react-in-jsx-scope": "off",
     "react/no-children-prop": "off",

diff --git a/bun.lockb b/bun.lockb
diff --git a/components/docs/collections/menu/menu-respect-screen-demo.tsx b/components/docs/collections/menu/menu-respect-screen-demo.tsx
@@ -2,12 +2,12 @@
 
 import React from "react"
 
-import { buttonStyles, Menu } from "ui"
+import { Button, Menu } from "ui"
 
 export default function MenuRespectScreenDemo() {
   return (
     <Menu respectScreen={false}>
-      <Menu.Trigger className={buttonStyles({ appearance: "outline" })}>Open</Menu.Trigger>
+      <Button appearance="outline">Open</Button>
       <Menu.Content placement="bottom" className="min-w-48">
         <Menu.Item>Dashboard</Menu.Item>
         <Menu.Item>Reports</Menu.Item>

diff --git a/components/docs/collections/menu/menu-section-demo.tsx b/components/docs/collections/menu/menu-section-demo.tsx
@@ -6,7 +6,7 @@ export default function MenuSectionDemo() {
   return (
     <Menu>
       <Menu.Trigger>Open</Menu.Trigger>
-      <Menu.Content className="min-w-64" items={cities} placement="bottom">
+      <Menu.Content className="sm:min-w-64" items={cities} placement="bottom">
         {(city) => (
           <Menu.Section title={city.name} items={city.landmarks}>
             {(landmark) => <Menu.Item textValue={landmark.name}>{landmark.name}</Menu.Item>}

diff --git a/components/docs/collections/menu/menu-section-level-selection.tsx b/components/docs/collections/menu/menu-section-level-selection.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import React from "react"
+
+import {
+  IconAlignmentCenter,
+  IconAlignmentLeft,
+  IconAlignmentRight,
+  IconBold,
+  IconClipboard,
+  IconCut,
+  IconDuplicate,
+  IconItalic,
+  IconUnderline
+} from "justd-icons"
+import type { Selection } from "react-aria-components"
+import { Menu } from "ui"
+
+export default function MenuSectionLevelSelection() {
+  const [style, setStyle] = React.useState<Selection>(new Set(["bold"]))
+  const [align, setAlign] = React.useState<Selection>(new Set(["left"]))
+  return (
+    <Menu>
+      <Menu.Trigger>Open</Menu.Trigger>
+      <Menu.Content placement="bottom" className="sm:min-w-52">
+        <Menu.Section title="Actions">
+          <Menu.Item textValue="Cut">
+            <IconCut />
+            Cut
+          </Menu.Item>
+          <Menu.Item textValue="Copy">
+            <IconDuplicate />
+            Copy
+          </Menu.Item>
+          <Menu.Item textValue="Paste">
+            <IconClipboard />
+            Paste
+          </Menu.Item>
+        </Menu.Section>
+        <Menu.Section
+          selectionMode="multiple"
+          selectedKeys={style}
+          onSelectionChange={setStyle}
+          title="Text style"
+        >
+          <Menu.Checkbox id="bold" textValue="Bold">
+            <IconBold />
+            Bold
+          </Menu.Checkbox>
+          <Menu.Checkbox id="italic" textValue="Italic">
+            <IconItalic />
+            Italic
+          </Menu.Checkbox>
+          <Menu.Checkbox id="underline" textValue="Underline">
+            <IconUnderline />
+            Underline
+          </Menu.Checkbox>
+        </Menu.Section>
+        <Menu.Section
+          selectionMode="single"
+          selectedKeys={align}
+          onSelectionChange={setAlign}
+          title="Text alignment"
+        >
+          <Menu.Radio id="left" textValue="Left">
+            <IconAlignmentLeft />
+            Left
+          </Menu.Radio>
+          <Menu.Radio id="center" textValue="Cente">
+            <IconAlignmentCenter />
+            Center
+          </Menu.Radio>
+          <Menu.Radio id="right" textValue="Right">
+            <IconAlignmentRight />
+            Right
+          </Menu.Radio>
+        </Menu.Section>
+      </Menu.Content>
+    </Menu>
+  )
+}
diff --git a/components/docs/collections/menu/menu-sub-demo.tsx b/components/docs/collections/menu/menu-sub-demo.tsx
@@ -2,12 +2,12 @@
 
 import React from "react"
 
-import { buttonStyles, Menu } from "ui"
+import { Button, Menu } from "ui"
 
 export default function MenuSubDemo() {
   return (
     <Menu>
-      <Menu.Trigger className={buttonStyles({ appearance: "outline" })}>Open</Menu.Trigger>
+      <Button appearance="outline">Open</Button>
       <Menu.Content placement="bottom" className="sm:min-w-48">
         <Menu.Item>Dashboard</Menu.Item>
         <Menu.Item>Reports</Menu.Item>

diff --git a/components/docs/generated/previews.ts b/components/docs/generated/previews.ts
@@ -1334,6 +1334,9 @@ export const previews: Record<string, any> = {
   "collections/menu/multiple-menu-demo": {
     component: React.lazy(() => import("@/components/docs/collections/menu/multiple-menu-demo")),
   },
+  "collections/menu/menu-section-level-selection": {
+    component: React.lazy(() => import("@/components/docs/collections/menu/menu-section-level-selection")),
+  },
   "collections/menu/menu-respect-screen-demo": {
     component: React.lazy(() => import("@/components/docs/collections/menu/menu-respect-screen-demo")),
   },

diff --git a/components/ui/menu.tsx b/components/ui/menu.tsx
@@ -122,13 +122,13 @@ const Item = ({ className, isDanger = false, children, ...props }: MenuItemProps
   const textValue = props.textValue || (typeof children === "string" ? children : undefined)
   return (
     <MenuItem
-      textValue={textValue}
       className={cr(className, (className, renderProps) =>
         dropdownItemStyles({
           ...renderProps,
           className
         })
       )}
+      textValue={textValue}
       data-danger={isDanger ? "true" : undefined}
       {...props}
     >
@@ -203,7 +203,7 @@ interface SectionProps<T> extends MenuSectionProps<T> {
 
 const Section = <T extends object>({ className, ...props }: SectionProps<T>) => {
   return (
-    <MenuSection className={section({ className })}>
+    <MenuSection className={section({ className })} {...props}>
       {"title" in props && <Header className={header()}>{props.title}</Header>}
       <Collection items={props.items}>{props.children}</Collection>
     </MenuSection>

diff --git a/package.json b/package.json
@@ -31,9 +31,9 @@
     "next": "^15.0.3",
     "next-themes": "^0.2.1",
     "ntcjs": "^1.1.3",
-    "react": "19.0.0-rc-02c0e824-20241028",
+    "react": "^19.0.0-rc-fb9a90fa48-20240614",
     "react-aria-components": "^1.5.0",
-    "react-dom": "19.0.0-rc-02c0e824-20241028",
+    "react-dom": "^19.0.0-rc-fb9a90fa48-20240614",
     "react-intersection-observer": "^9.13.1",
     "recharts": "^2.13.3",
     "rehype-pretty-code": "^0.13.2",
@@ -93,6 +93,6 @@
   "overrides": {
     "@types/react": "npm:types-react@19.0.0-rc.1",
     "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
-    "react-is": "^19.0.0-rc-02c0e824-20241028"
+    "react-is": "19.0.0-rc.1"
   }
 }
diff --git a/resources/content/docs/components/collections/menu.mdx b/resources/content/docs/components/collections/menu.mdx
@@ -60,6 +60,10 @@ Present a single list of options.
 Organize menu items into grouped sections.
 <How toUse="collections/menu/menu-section-demo" />
 
+## Section-Level Selection
+Organize menu items into grouped sections with level selection.
+<How toUse="collections/menu/menu-section-level-selection" />
+
 ## Arrow
 Incorporate an arrow into the menu using the `showArrow` prop on `Menu.Content`.
 <How toUse="collections/menu/menu-with-arrow-demo" />

diff --git a/resources/content/docs/getting-started/react-19.mdx b/resources/content/docs/getting-started/react-19.mdx
@@ -10,7 +10,7 @@ The [Chart](/docs/components/surfaces/chart) component uses [Recharts](https://r
 
 ```
 "overrides": {
-  "react-is": "^19.0.0-rc-02c0e824-20241028"
+  "react-is": "19.0.0-rc.1"
 }
 ```
 

diff --git a/resources/content/docs/prologue/release-notes.mdx b/resources/content/docs/prologue/release-notes.mdx
@@ -14,6 +14,7 @@ This all changes are made on the 2024 release.
 ## November 22
 - Minor adjustments across all components to align with the latest version of `react-aria-components`.
 - New Component [ToggleGroup](/docs/components/buttons/toggle-group)
+- Fix issue on menu [Menu](/docs/components/collections/menu)
 
 ## November 17
 - A few adjustment to [Navbar](/navbar)
-Original file line number
+Diff line change
@@ Expand Up @@
     ```
     "overrides": {
-      "react-is": "^19.0.0-rc-02c0e824-20241028"
+      "react-is": "19.0.0-rc.1"
     }
     ```
@@ Expand Down @@