@ceed/ads 1.35.1 → 1.36.0

package/dist/components/navigation/MenuButton.md

@@ -252,11 +252,15 @@ function ToolbarActions({ selectedItems, onAction }) {
 - **Use descriptive button text.** The button label should clearly indicate what kind of options the menu contains. Avoid vague labels like "More" or "Options" -- prefer specific labels like "Export Options" or "User Actions".
 
   ```tsx
-  {/* ✅ Good: Clear purpose */}
-  <MenuButton buttonText="Export Options" items={exportItems} />
-
-  {/* ❌ Avoid: Vague label */}
-  <MenuButton buttonText="More" items={items} />
+  {
+    /* ✅ Good: Clear purpose */
+  }
+  <MenuButton buttonText="Export Options" items={exportItems} />;
+
+  {
+    /* ❌ Avoid: Vague label */
+  }
+  <MenuButton buttonText="More" items={items} />;
   ```
 
 - **Keep the items list short and focused.** Aim for 3-7 items that are logically related. If you need more items or mixed content, switch to the Dropdown + Menu composition pattern.
@@ -272,14 +276,18 @@ function ToolbarActions({ selectedItems, onAction }) {
 - **Do not use MenuButton for form value selection.** MenuButton triggers actions -- it is not a Select replacement. For form inputs where the user picks a value, use the Select component.
 
   ```tsx
-  {/* ❌ Bad: Form selection */}
-  <MenuButton buttonText={selectedValue} items={options} />
-
-  {/* ✅ Good: Use Select for forms */}
+  {
+    /* ❌ Bad: Form selection */
+  }
+  <MenuButton buttonText={selectedValue} items={options} />;
+
+  {
+    /* ✅ Good: Use Select for forms */
+  }
   <Select value={selectedValue} onChange={handleChange}>
     <Option value="a">Option A</Option>
     <Option value="b">Option B</Option>
-  </Select>
+  </Select>;
   ```
 
 - **Use `placement` to prevent overflow.** When the trigger is near the right edge of the viewport, use `placement="bottom-end"` so the menu does not extend beyond the screen.

package/dist/components/navigation/NavigationGroup.md

@@ -19,14 +19,16 @@ import { NavigationGroup, NavigationItem } from '@ceed/ads';
 
 function Sidebar() {
   return (
-    <NavigationGroup
-      title="User Management"
-      startDecorator={<PeopleIcon />}
-      defaultExpanded={true}
-    >
-      <NavigationItem id="users" level={1}>All Users</NavigationItem>
-      <NavigationItem id="roles" level={1}>Roles</NavigationItem>
-      <NavigationItem id="permissions" level={1}>Permissions</NavigationItem>
+    <NavigationGroup title="User Management" startDecorator={<PeopleIcon />} defaultExpanded={true}>
+      <NavigationItem id="users" level={1}>
+        All Users
+      </NavigationItem>
+      <NavigationItem id="roles" level={1}>
+        Roles
+      </NavigationItem>
+      <NavigationItem id="permissions" level={1}>
+        Permissions
+      </NavigationItem>
     </NavigationGroup>
   );
 }
@@ -96,11 +98,7 @@ Icons work at any nesting level.
 function AdminNavigation() {
   return (
     <>
-      <NavigationGroup
-        title="User Management"
-        startDecorator={<PeopleIcon />}
-        defaultExpanded={true}
-      >
+      <NavigationGroup title="User Management" startDecorator={<PeopleIcon />} defaultExpanded={true}>
         <NavigationItem id="users" level={1}>
           All Users
         </NavigationItem>
@@ -112,10 +110,7 @@ function AdminNavigation() {
         </NavigationItem>
       </NavigationGroup>
 
-      <NavigationGroup
-        title="Content"
-        startDecorator={<ArticleIcon />}
-      >
+      <NavigationGroup title="Content" startDecorator={<ArticleIcon />}>
         <NavigationItem id="posts" level={1}>
           Posts
         </NavigationItem>
@@ -127,10 +122,7 @@ function AdminNavigation() {
         </NavigationItem>
       </NavigationGroup>
 
-      <NavigationGroup
-        title="Settings"
-        startDecorator={<SettingsIcon />}
-      >
+      <NavigationGroup title="Settings" startDecorator={<SettingsIcon />}>
         <NavigationItem id="general" level={1}>
           General
         </NavigationItem>
@@ -151,20 +143,12 @@ function AdminNavigation() {
 ```tsx
 function NestedNavigation() {
   return (
-    <NavigationGroup
-      title="E-commerce"
-      startDecorator={<ShoppingCartIcon />}
-      defaultExpanded={true}
-    >
+    <NavigationGroup title="E-commerce" startDecorator={<ShoppingCartIcon />} defaultExpanded={true}>
       <NavigationItem id="dashboard" level={1}>
         Dashboard
       </NavigationItem>
 
-      <NavigationGroup
-        title="Products"
-        level={1}
-        defaultExpanded={true}
-      >
+      <NavigationGroup title="Products" level={1} defaultExpanded={true}>
         <NavigationItem id="all-products" level={2}>
           All Products
         </NavigationItem>
@@ -176,10 +160,7 @@ function NestedNavigation() {
         </NavigationItem>
       </NavigationGroup>
 
-      <NavigationGroup
-        title="Orders"
-        level={1}
-      >
+      <NavigationGroup title="Orders" level={1}>
         <NavigationItem id="all-orders" level={2}>
           All Orders
         </NavigationItem>
@@ -243,11 +224,7 @@ function DocsSidebar({ sections, currentPath }) {
 NavigationGroup extends Joy UI's Accordion, so you can use additional Accordion props:
 
 ```tsx
-<NavigationGroup
-  title="Settings"
-  expanded={isExpanded}
-  onChange={(event, expanded) => setIsExpanded(expanded)}
->
+<NavigationGroup title="Settings" expanded={isExpanded} onChange={(event, expanded) => setIsExpanded(expanded)}>
   {/* Content */}
 </NavigationGroup>
 ```
@@ -362,11 +339,7 @@ function LazyNavigationGroup({ title, loadContent }) {
   };
 
   return (
-    <NavigationGroup
-      title={title}
-      expanded={expanded}
-      onChange={handleChange}
-    >
+    <NavigationGroup title={title} expanded={expanded} onChange={handleChange}>
       {content || <Skeleton />}
     </NavigationGroup>
   );
@@ -382,11 +355,7 @@ function SidebarNavigation() {
   const [expandedGroups, setExpandedGroups] = useState(['products']);
 
   const handleGroupChange = (groupId) => (event, isExpanded) => {
-    setExpandedGroups((prev) =>
-      isExpanded
-        ? [...prev, groupId]
-        : prev.filter((id) => id !== groupId)
-    );
+    setExpandedGroups((prev) => (isExpanded ? [...prev, groupId] : prev.filter((id) => id !== groupId)));
   };
 
   return (

package/dist/components/navigation/NavigationItem.md

@@ -244,9 +244,7 @@ NavigationItem includes built-in accessibility features:
 
 ```tsx
 // Selected state is announced
-<NavigationItem selected={true}>
-  Dashboard {/* Announced as "Dashboard, current page" */}
-</NavigationItem>
+<NavigationItem selected={true}>Dashboard {/* Announced as "Dashboard, current page" */}</NavigationItem>
 ```
 
 ## Best Practices
@@ -305,7 +303,9 @@ const handleClick = useCallback((id) => {
 }, []);
 
 // Pass stable handler to all items
-<NavigationItem id="item1" onClick={handleClick}>Item 1</NavigationItem>
+<NavigationItem id="item1" onClick={handleClick}>
+  Item 1
+</NavigationItem>;
 ```
 
 ### Avoid Inline Objects
@@ -314,11 +314,11 @@ Don't create new decorator elements on each render:
 
 ```tsx
 // ❌ Bad: New element created each render
-<NavigationItem startDecorator={<HomeIcon />}>Home</NavigationItem>
+<NavigationItem startDecorator={<HomeIcon />}>Home</NavigationItem>;
 
 // ✅ Good: Memoized or static
 const homeIcon = <HomeIcon />;
-<NavigationItem startDecorator={homeIcon}>Home</NavigationItem>
+<NavigationItem startDecorator={homeIcon}>Home</NavigationItem>;
 ```
 
 NavigationItem provides a foundational building block for sidebar navigation. Use it within Navigator for automatic item management, or combine it with NavigationGroup for custom hierarchical navigation structures.

package/dist/components/navigation/Navigator.md

@@ -157,12 +157,7 @@ function FileBrowser({ folders, onFolderSelect }) {
     });
   };
 
-  return (
-    <Navigator
-      items={buildNavigatorItems(folders)}
-      onSelect={onFolderSelect}
-    />
-  );
+  return <Navigator items={buildNavigatorItems(folders)} onSelect={onFolderSelect} />;
 }
 ```
 
@@ -221,11 +216,11 @@ Navigator uses a composition pattern with NavigationItem and NavigationGroup:
 
 ```tsx
 interface NavigatorItem {
-  id: string;                        // Unique identifier
-  type: 'item';                      // Indicates a navigation item
-  title: string | React.ReactNode;   // Display text or element
-  startDecorator?: React.ReactNode;  // Icon before title
-  selected?: boolean;                // Selection state
+  id: string; // Unique identifier
+  type: 'item'; // Indicates a navigation item
+  title: string | React.ReactNode; // Display text or element
+  startDecorator?: React.ReactNode; // Icon before title
+  selected?: boolean; // Selection state
 }
 ```
 
@@ -233,11 +228,11 @@ interface NavigatorItem {
 
 ```tsx
 interface NavigatorGroup {
-  type: 'group';                     // Indicates a group
-  title: string | React.ReactNode;   // Group title
-  startDecorator?: React.ReactNode;  // Icon before title
-  expanded?: boolean;                // Default expanded state
-  content: React.ReactNode;          // Content when expanded (usually nested Navigator)
+  type: 'group'; // Indicates a group
+  title: string | React.ReactNode; // Group title
+  startDecorator?: React.ReactNode; // Icon before title
+  expanded?: boolean; // Default expanded state
+  content: React.ReactNode; // Content when expanded (usually nested Navigator)
 }
 ```
 
@@ -310,7 +305,7 @@ const items = [
 // ❌ Bad: Inconsistent icons
 const items = [
   { id: 'home', type: 'item', title: 'Home', startDecorator: <HomeIcon /> },
-  { id: 'settings', type: 'item', title: 'Settings' },  // Missing icon
+  { id: 'settings', type: 'item', title: 'Settings' }, // Missing icon
 ];
 ```
 
@@ -354,17 +349,20 @@ function Sidebar() {
 When items are computed, memoize them to prevent unnecessary re-renders:
 
 ```tsx
-const items = useMemo(() => [
-  {
-    id: 'home',
-    type: 'item',
-    title: 'Home',
-    selected: currentPath === '/home',
-  },
-  // ... more items
-], [currentPath]);
-
-<Navigator items={items} onSelect={handleSelect} />
+const items = useMemo(
+  () => [
+    {
+      id: 'home',
+      type: 'item',
+      title: 'Home',
+      selected: currentPath === '/home',
+    },
+    // ... more items
+  ],
+  [currentPath],
+);
+
+<Navigator items={items} onSelect={handleSelect} />;
 ```
 
 ### Lazy Load Content

package/dist/components/navigation/Pagination.md

@@ -8,15 +8,15 @@ Pagination ships in two variants -- **standard** (clickable page numbers) and **
 
 ```tsx
 <Stack spacing={4}>
-  <Stack spacing={1}>
-    <div>Standard</div>
-    <Pagination {...args} variant="standard" />
-  </Stack>
-  <Stack spacing={1}>
-    <div>Compact</div>
-    <Pagination {...args} variant="compact" />
+    <Stack spacing={1}>
+      <div>Standard</div>
+      <Pagination {...args} variant="standard" />
+    </Stack>
+    <Stack spacing={1}>
+      <div>Compact</div>
+      <Pagination {...args} variant="compact" />
+    </Stack>
   </Stack>
-</Stack>
 ```
 
 | Field                        | Description | Default |
@@ -36,11 +36,7 @@ function DataList() {
   return (
     <>
       <ItemList items={items} page={page} pageSize={pageSize} />
-      <Pagination
-        rowCount={totalItems}
-        paginationModel={{ page, pageSize }}
-        onPageChange={setPage}
-      />
+      <Pagination rowCount={totalItems} paginationModel={{ page, pageSize }} onPageChange={setPage} />
     </>
   );
 }
@@ -52,19 +48,19 @@ Pagination is available in three sizes -- `sm`, `md`, and `lg` -- for both the s
 
 ```tsx
 <Stack spacing={4}>
-  <Stack spacing={2}>
-    <div>Standard</div>
-    <Pagination {...args} variant="standard" size="sm" />
-    <Pagination {...args} variant="standard" size="md" />
-    <Pagination {...args} variant="standard" size="lg" />
-  </Stack>
-  <Stack spacing={2}>
-    <div>Compact</div>
-    <Pagination {...args} variant="compact" size="sm" />
-    <Pagination {...args} variant="compact" size="md" />
-    <Pagination {...args} variant="compact" size="lg" />
+    <Stack spacing={2}>
+      <div>Standard</div>
+      <Pagination {...args} variant="standard" size="sm" />
+      <Pagination {...args} variant="standard" size="md" />
+      <Pagination {...args} variant="standard" size="lg" />
+    </Stack>
+    <Stack spacing={2}>
+      <div>Compact</div>
+      <Pagination {...args} variant="compact" size="sm" />
+      <Pagination {...args} variant="compact" size="md" />
+      <Pagination {...args} variant="compact" size="lg" />
+    </Stack>
   </Stack>
-</Stack>
 ```
 
 ## Pagination Page Positions
@@ -73,37 +69,61 @@ The component correctly handles the visual presentation when the user is at the
 
 ```tsx
 <Stack spacing={4}>
-  <Stack spacing={2}>
-    <div>Standard</div>
-    <Pagination {...args} variant="standard" defaultPaginationModel={{
-      page: 1,
-      pageSize: 1
-    }} />
-    <Pagination {...args} variant="standard" defaultPaginationModel={{
-      page: 10,
-      pageSize: 1
-    }} />
-    <Pagination {...args} variant="standard" defaultPaginationModel={{
-      page: 20,
-      pageSize: 1
-    }} />
-  </Stack>
-  <Stack spacing={2}>
-    <div>Compact</div>
-    <Pagination {...args} variant="compact" defaultPaginationModel={{
-      page: 1,
-      pageSize: 1
-    }} />
-    <Pagination {...args} variant="compact" defaultPaginationModel={{
-      page: 10,
-      pageSize: 1
-    }} />
-    <Pagination {...args} variant="compact" defaultPaginationModel={{
-      page: 20,
-      pageSize: 1
-    }} />
+    <Stack spacing={2}>
+      <div>Standard</div>
+      <Pagination
+        {...args}
+        variant="standard"
+        defaultPaginationModel={{
+          page: 1,
+          pageSize: 1
+        }}
+      />
+      <Pagination
+        {...args}
+        variant="standard"
+        defaultPaginationModel={{
+          page: 10,
+          pageSize: 1
+        }}
+      />
+      <Pagination
+        {...args}
+        variant="standard"
+        defaultPaginationModel={{
+          page: 20,
+          pageSize: 1
+        }}
+      />
+    </Stack>
+    <Stack spacing={2}>
+      <div>Compact</div>
+      <Pagination
+        {...args}
+        variant="compact"
+        defaultPaginationModel={{
+          page: 1,
+          pageSize: 1
+        }}
+      />
+      <Pagination
+        {...args}
+        variant="compact"
+        defaultPaginationModel={{
+          page: 10,
+          pageSize: 1
+        }}
+      />
+      <Pagination
+        {...args}
+        variant="compact"
+        defaultPaginationModel={{
+          page: 20,
+          pageSize: 1
+        }}
+      />
+    </Stack>
   </Stack>
-</Stack>
 ```
 
 ## Uncontrolled Pagination
@@ -128,12 +148,12 @@ Pagination automatically adjusts when the total number of items changes. If the
 
 ```tsx
 <Stack gap={2}>
-  <Pagination {...args} rowCount={rowCount} />
-  <Stack direction="row" gap={2}>
-    <Button onClick={() => setRowCount(rowCount - 1)}>Decrease Row count</Button>
-    <Button onClick={() => setRowCount(rowCount + 1)}>Increase Row count</Button>
+    <Pagination {...args} rowCount={rowCount} />
+    <Stack direction="row" gap={2}>
+      <Button onClick={() => setRowCount(rowCount - 1)}>Decrease Row count</Button>
+      <Button onClick={() => setRowCount(rowCount + 1)}>Increase Row count</Button>
+    </Stack>
   </Stack>
-</Stack>
 ```
 
 ## Pagination for Data Table
@@ -149,14 +169,9 @@ function DataTable({ columns }) {
       <Table columns={columns} data={data} loading={isLoading} />
       <Stack direction="row" justifyContent="space-between" alignItems="center" mt={2}>
         <Typography level="body-sm">
-          Showing {(page - 1) * pageSize + 1}--{Math.min(page * pageSize, totalCount)} of{' '}
-          {totalCount}
+          Showing {(page - 1) * pageSize + 1}--{Math.min(page * pageSize, totalCount)} of {totalCount}
         </Typography>
-        <Pagination
-          rowCount={totalCount}
-          paginationModel={{ page, pageSize }}
-          onPageChange={setPage}
-        />
+        <Pagination rowCount={totalCount} paginationModel={{ page, pageSize }} onPageChange={setPage} />
       </Stack>
     </Box>
   );
@@ -176,7 +191,9 @@ function SearchResults({ query }) {
 
   return (
     <Stack spacing={2}>
-      <Typography level="body-sm">{totalCount} results for "{query}"</Typography>
+      <Typography level="body-sm">
+        {totalCount} results for "{query}"
+      </Typography>
       <ResultList results={results} />
       <Pagination
         rowCount={totalCount}
@@ -200,13 +217,7 @@ function URLPaginatedList() {
     setSearchParams({ page: String(newPage) });
   };
 
-  return (
-    <Pagination
-      rowCount={totalCount}
-      paginationModel={{ page, pageSize: 25 }}
-      onPageChange={handlePageChange}
-    />
-  );
+  return <Pagination rowCount={totalCount} paginationModel={{ page, pageSize: 25 }} onPageChange={handlePageChange} />;
 }
 ```
 

package/dist/components/navigation/ProfileMenu.md

@@ -174,35 +174,53 @@ ProfileMenu supports `md` (default) and `sm` size variants for use in different
 
 ```tsx
 <Stack direction="row" gap="150px">
-  <ProfileMenu {...args} size="md" profile={{
-    name: 'John Gordon',
-    chip: 'PDT',
-    caption: 'j.gordon@haulla.com'
-  }} menuItems={[{
-    label: 'Menu Item1',
-    onClick: fn()
-  }, {
-    label: 'Menu Item2',
-    onClick: fn()
-  }, {
-    label: 'Menu Item3',
-    onClick: fn()
-  }]} />
-  <ProfileMenu {...args} size="sm" profile={{
-    name: 'John Gordon',
-    chip: 'PDT',
-    caption: 'j.gordon@haulla.com'
-  }} menuItems={[{
-    label: 'Menu Item1',
-    onClick: fn()
-  }, {
-    label: 'Menu Item2',
-    onClick: fn()
-  }, {
-    label: 'Menu Item3',
-    onClick: fn()
-  }]} />
-</Stack>
+    <ProfileMenu
+      {...args}
+      size="md"
+      profile={{
+        name: "John Gordon",
+        chip: "PDT",
+        caption: "j.gordon@haulla.com"
+      }}
+      menuItems={[
+        {
+          label: "Menu Item1",
+          onClick: fn()
+        },
+        {
+          label: "Menu Item2",
+          onClick: fn()
+        },
+        {
+          label: "Menu Item3",
+          onClick: fn()
+        }
+      ]}
+    />
+    <ProfileMenu
+      {...args}
+      size="sm"
+      profile={{
+        name: "John Gordon",
+        chip: "PDT",
+        caption: "j.gordon@haulla.com"
+      }}
+      menuItems={[
+        {
+          label: "Menu Item1",
+          onClick: fn()
+        },
+        {
+          label: "Menu Item2",
+          onClick: fn()
+        },
+        {
+          label: "Menu Item3",
+          onClick: fn()
+        }
+      ]}
+    />
+  </Stack>
 ```
 
 ## Avatar
@@ -241,17 +259,23 @@ ProfileMenu automatically generates initials from various name formats, includin
 
 ```tsx
 <>
-  <ProfileMenu {...args} profile={{
-    name: '홍길동',
-    chip: 'PDT',
-    caption: 'j.gordon@haulla.com'
-  }} />
-  <ProfileMenu {...args} profile={{
-    name: '제갈공명',
-    chip: 'PDT',
-    caption: 'j.gordon@haulla.com'
-  }} />
-</>
+    <ProfileMenu
+      {...args}
+      profile={{
+        name: "홍길동",
+        chip: "PDT",
+        caption: "j.gordon@haulla.com"
+      }}
+    />
+    <ProfileMenu
+      {...args}
+      profile={{
+        name: "제갈공명",
+        chip: "PDT",
+        caption: "j.gordon@haulla.com"
+      }}
+    />
+  </>
 ```
 
 ## Controlled vs Uncontrolled
@@ -404,9 +428,7 @@ function OrgProfileMenu({ user, organization }) {
 
 ```tsx
 // ✅ Good: Clear user context
-<ProfileMenu
-  profile={{ name: 'Jane Smith', caption: 'jane@company.com', chip: 'Admin' }}
-/>
+<ProfileMenu profile={{ name: 'Jane Smith', caption: 'jane@company.com', chip: 'Admin' }} />
 ```
 
 3. **Keep menu items concise**: Limit the number of menu items to 5-7 maximum. Move less common actions to a dedicated settings page.