@kennycorrea/ui 1.6.1 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 1.7.0 — 2026-10-23
+
+Sidebar groups as an accordion, and select-all for stacked tables.
+
+- **`Sidebar` groups are an accordion.** Opening one group closes any other, in the persistent column and the off-canvas panel. The group open at first is the first with `defaultOpen`, or else the first containing the active item. A `NavItem` outside a `Sidebar` still opens on its own.
+- **Choosing a group from the icon rail expands the sidebar with that group open**, instead of showing its children in a menu beside the rail. This is a behaviour change: the rail no longer has a dropdown.
+- **Groups open and close with a height animation**, and without one under reduced motion. A closed group stays mounted, so its list is `inert` rather than `hidden`.
+- **`DataTable` select-all in the stacked layout.** When rows stack into cards and the header is hidden, a "Select all rows" checkbox appears above them. It shows the same indeterminate state and acts on the current page. Closes the known gap noted in 1.6.1.
+
 ## 1.6.1 — 2026-10-23
 
 Fixes found by running the example app in a real browser at phone and desktop widths, in light and dark. Each has a test in `test/browser-fixes.test.tsx`; the cascade problems are pinned by computing the selectors' specificity.

package/dist/molecules/NavItem/NavItem.d.ts

@@ -21,11 +21,14 @@ export interface NavItemProps {
     /** Whether a group starts open. Default: open when one of its children is active. */
     defaultOpen?: boolean;
 }
+/** The key a group is tracked by in the Sidebar's accordion. */
+export declare function navKey(item: NavItemProps): string;
 /**
  * One entry in a navigation list: a link, a button, or a group of child links.
  *
  * Renders an `<li>`, so put it inside a `<ul>` (Sidebar does). Inside a collapsed Sidebar the
- * label stays in the accessible name and is also shown as a tooltip, and a group opens its
- * children as a menu beside the rail, since there is no room to expand it in place.
+ * label stays in the accessible name and is also shown as a tooltip. Inside a Sidebar groups are
+ * an accordion: opening one closes the others, and choosing one from the icon rail expands the
+ * sidebar with that group open. Outside one, each group opens on its own.
  */
 export declare function NavItem(item: NavItemProps): import("react").JSX.Element;

package/dist/molecules/NavItem/NavItem.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ChevronDownIcon } from '@radix-ui/react-icons';
-import { DropdownMenu as ThemedDropdownMenu } from '@radix-ui/themes';
 import { useId, useState } from 'react';
 import { Tooltip } from '../../atoms/Tooltip/Tooltip.js';
 import { useNavContext } from './context.js';
@@ -35,38 +34,39 @@ function ItemControl({ item, onNavigate }) {
     }
     return (_jsx("button", { type: "button", className: "ui-nav-item", "aria-current": item.active ? 'page' : undefined, onClick: onClick, children: children }));
 }
+/** The key a group is tracked by in the Sidebar's accordion. */
+export function navKey(item) {
+    return item.id ?? item.label;
+}
 /**
  * One entry in a navigation list: a link, a button, or a group of child links.
  *
  * Renders an `<li>`, so put it inside a `<ul>` (Sidebar does). Inside a collapsed Sidebar the
- * label stays in the accessible name and is also shown as a tooltip, and a group opens its
- * children as a menu beside the rail, since there is no room to expand it in place.
+ * label stays in the accessible name and is also shown as a tooltip. Inside a Sidebar groups are
+ * an accordion: opening one closes the others, and choosing one from the icon rail expands the
+ * sidebar with that group open. Outside one, each group opens on its own.
  */
 export function NavItem(item) {
-    const { collapsed, onNavigate } = useNavContext();
+    const { collapsed, onNavigate, openGroup, setOpenGroup, expand } = useNavContext();
     const childActive = item.items?.some((c) => c.active) ?? false;
-    const [open, setOpen] = useState(item.defaultOpen ?? childActive);
+    const [ownOpen, setOwnOpen] = useState(item.defaultOpen ?? childActive);
     const listId = useId();
+    const key = navKey(item);
+    const open = setOpenGroup ? openGroup === key : ownOpen;
+    const setOpen = (next) => {
+        if (setOpenGroup)
+            setOpenGroup(next ? key : null);
+        else
+            setOwnOpen(next);
+    };
     if (!item.items) {
         return (_jsx("li", { children: _jsx(Tooltip, { label: collapsed ? item.label : undefined, children: _jsx(ItemControl, { item: item, onNavigate: onNavigate }) }) }));
     }
     if (collapsed) {
-        return (_jsx("li", { children: _jsxs(ThemedDropdownMenu.Root, { children: [_jsx(ThemedDropdownMenu.Trigger, { children: _jsx("button", { type: "button", className: "ui-nav-item", "aria-current": childActive ? 'page' : undefined, children: _jsx(ItemContent, { item: item }) }) }), _jsxs(ThemedDropdownMenu.Content, { side: "right", align: "start", children: [_jsx(ThemedDropdownMenu.Label, { children: item.label }), item.items.map((child) => (_jsx(ThemedDropdownMenu.Item, { asChild: child.href !== undefined, onSelect: () => {
-                                    if (child.href === undefined) {
-                                        child.onClick?.();
-                                        onNavigate?.();
-                                    }
-                                }, children: child.href !== undefined
-                                    ? (child.render ?? ((p) => _jsx("a", { ...p })))({
-                                        href: child.href,
-                                        'aria-current': child.active ? 'page' : undefined,
-                                        onClick: () => {
-                                            child.onClick?.();
-                                            onNavigate?.();
-                                        },
-                                        children: child.label,
-                                    })
-                                    : child.label }, child.id ?? child.label)))] })] }) }));
+        return (_jsx("li", { children: _jsx(Tooltip, { label: item.label, children: _jsx("button", { type: "button", className: "ui-nav-item", "aria-current": childActive ? 'page' : undefined, "aria-expanded": false, onClick: () => {
+                        setOpen(true);
+                        expand?.();
+                    }, children: _jsx(ItemContent, { item: item }) }) }) }));
     }
-    return (_jsxs("li", { children: [_jsx("button", { type: "button", className: "ui-nav-item", "aria-expanded": open, "aria-controls": listId, onClick: () => setOpen((o) => !o), children: _jsx(ItemContent, { item: item, trailing: _jsx("span", { className: "ui-nav-item__chevron", "aria-hidden": "true", children: _jsx(ChevronDownIcon, {}) }) }) }), _jsx("ul", { id: listId, className: "ui-nav-group__items", hidden: !open, children: item.items.map((child) => (_jsx("li", { children: _jsx(ItemControl, { item: child, onNavigate: onNavigate }) }, child.id ?? child.label))) })] }));
+    return (_jsxs("li", { children: [_jsx("button", { type: "button", className: "ui-nav-item", "aria-expanded": open, "aria-controls": listId, onClick: () => setOpen(!open), children: _jsx(ItemContent, { item: item, trailing: _jsx("span", { className: "ui-nav-item__chevron", "aria-hidden": "true", children: _jsx(ChevronDownIcon, {}) }) }) }), _jsx("div", { className: "ui-nav-group", "data-open": open ? '' : undefined, children: _jsx("ul", { id: listId, className: "ui-nav-group__items", inert: !open, children: item.items.map((child) => (_jsx("li", { children: _jsx(ItemControl, { item: child, onNavigate: onNavigate }) }, child.id ?? child.label))) }) })] }));
 }

package/dist/molecules/NavItem/context.d.ts

@@ -9,6 +9,11 @@ export interface NavContextValue {
     collapsed: boolean;
     /** Called after any item is activated, so an off-canvas panel can close. */
     onNavigate?: () => void;
+    /** The one group that is open, by key. Sidebar keeps it so groups behave as an accordion. */
+    openGroup?: string | null;
+    setOpenGroup?: (key: string | null) => void;
+    /** Leaves the icon rail, so a group chosen there can open in place. */
+    expand?: () => void;
 }
 export declare const NavContext: import("react").Context<NavContextValue>;
 export declare function useNavContext(): NavContextValue;

package/dist/organisms/DataTable/DataTable.js

@@ -23,6 +23,7 @@ const INTERACTIVE = 'a, button, input, select, textarea, [role="checkbox"], [rol
 export function DataTable({ columns, rows, getRowId, caption, showCaption = false, getRowLabel, sort = null, onSortChange, selection, onSelectionChange, rowActions, onRowAction, onRowClick, state = 'ready', empty, error, loadingRows = 5, pagination, density = 'comfortable', stackBelow = 'md', stickyFirstColumn = false, maxHeight, className, }) {
     const strings = useUiStrings();
     const captionId = useId();
+    const selectAllId = useId();
     const selectable = !!selection && !!onSelectionChange;
     const hasActions = !!rowActions;
     const span = columns.length + (selectable ? 1 : 0) + (hasActions ? 1 : 0);
@@ -113,7 +114,7 @@ export function DataTable({ columns, rows, getRowId, caption, showCaption = fals
     const regionStyle = maxHeight
         ? { maxBlockSize: maxHeight }
         : undefined;
-    return (_jsxs("div", { className: ['ui-table', className].filter(Boolean).join(' '), "data-density": density, "data-stack": stackBelow || undefined, "data-sticky-first": stickyFirstColumn ? '' : undefined, children: [effective === 'loading' ? (_jsx("span", { role: "status", className: "ui-sr-only", children: strings.loading })) : null, _jsx("section", { className: "ui-table__region", "aria-labelledby": captionId, 
+    return (_jsxs("div", { className: ['ui-table', className].filter(Boolean).join(' '), "data-density": density, "data-stack": stackBelow || undefined, "data-sticky-first": stickyFirstColumn ? '' : undefined, children: [effective === 'loading' ? (_jsx("span", { role: "status", className: "ui-sr-only", children: strings.loading })) : null, selectable && effective === 'ready' ? (_jsxs("label", { className: "ui-table__selectall", htmlFor: selectAllId, children: [_jsx(Checkbox, { id: selectAllId, checked: allChecked, onCheckedChange: toggleAll }), strings.selectAll] })) : null, _jsx("section", { className: "ui-table__region", "aria-labelledby": captionId, 
                 // biome-ignore lint/a11y/noNoninteractiveTabindex: a scrolling region must be reachable by keyboard to be scrolled.
                 tabIndex: 0, style: regionStyle, children: _jsxs("table", { className: "ui-table__table", role: "table", "aria-busy": effective === 'loading' || undefined, children: [_jsx("caption", { id: captionId, className: showCaption ? 'ui-table__caption' : 'ui-sr-only', children: caption }), header, _jsx("tbody", { role: "rowgroup", children: body })] }) }), pagination && effective !== 'loading' ? _jsx(Pagination, { ...pagination }) : null] }));
 }

package/dist/organisms/Sidebar/Sidebar.js

@@ -8,7 +8,7 @@ import { minWidth } from '../../hooks/breakpoints.js';
 import { useControllableState } from '../../hooks/useControllableState.js';
 import { useMediaQuery } from '../../hooks/useMediaQuery.js';
 import { NavContext } from '../../molecules/NavItem/context.js';
-import { NavItem } from '../../molecules/NavItem/NavItem.js';
+import { NavItem, navKey } from '../../molecules/NavItem/NavItem.js';
 import { useUiStrings } from '../../strings.js';
 import { useThemePortalTarget } from '../../utils/themePortal.js';
 import { useShell } from '../AppShell/context.js';
@@ -38,6 +38,13 @@ export function Sidebar({ header, collapsedHeader, sections, footer, collapsed:
     });
     const { anchorRef, target, resolved } = useThemePortalTarget(container);
     const navId = useId();
+    const [openGroup, setOpenGroup] = useState(() => {
+        for (const item of sections.flatMap((section) => section.items)) {
+            if (item.items && (item.defaultOpen ?? item.items.some((c) => c.active)))
+                return navKey(item);
+        }
+        return null;
+    });
     const wide = shell ? shell.wide : ownWide;
     const panelOpen = shell ? shell.navOpen : (open ?? ownOpen);
     const setPanelOpen = (next) => {
@@ -51,9 +58,14 @@ export function Sidebar({ header, collapsedHeader, sections, footer, collapsed:
     if (wide) {
         const toggleLabel = collapsed ? strings.expandSidebar : strings.collapseSidebar;
         const railHeader = collapsed ? (collapsedHeader ?? header) : header;
-        return (_jsxs("div", { className: "ui-sidebar", "data-collapsed": collapsed ? '' : undefined, children: [railHeader ? _jsx("div", { className: "ui-sidebar__header", children: railHeader }) : null, _jsx(NavContext.Provider, { value: { collapsed }, children: _jsx(Sections, { sections: sections, label: label, id: navId }) }), footer || collapsible ? (_jsxs("div", { className: "ui-sidebar__footer", children: [footer, collapsible ? (_jsx(Tooltip, { label: collapsed ? toggleLabel : undefined, children: _jsxs("button", { type: "button", className: "ui-nav-item", "aria-expanded": !collapsed, "aria-controls": navId, onClick: () => setCollapsed(!collapsed), children: [_jsx("span", { className: "ui-nav-item__icon", "aria-hidden": "true", children: collapsed ? _jsx(DoubleArrowRightIcon, {}) : _jsx(DoubleArrowLeftIcon, {}) }), _jsx("span", { className: "ui-nav-item__label", children: toggleLabel })] }) })) : null] })) : null] }));
+        return (_jsxs("div", { className: "ui-sidebar", "data-collapsed": collapsed ? '' : undefined, children: [railHeader ? _jsx("div", { className: "ui-sidebar__header", children: railHeader }) : null, _jsx(NavContext.Provider, { value: { collapsed, openGroup, setOpenGroup, expand: () => setCollapsed(false) }, children: _jsx(Sections, { sections: sections, label: label, id: navId }) }), footer || collapsible ? (_jsxs("div", { className: "ui-sidebar__footer", children: [footer, collapsible ? (_jsx(Tooltip, { label: collapsed ? toggleLabel : undefined, children: _jsxs("button", { type: "button", className: "ui-nav-item", "aria-expanded": !collapsed, "aria-controls": navId, onClick: () => setCollapsed(!collapsed), children: [_jsx("span", { className: "ui-nav-item__icon", "aria-hidden": "true", children: collapsed ? _jsx(DoubleArrowRightIcon, {}) : _jsx(DoubleArrowLeftIcon, {}) }), _jsx("span", { className: "ui-nav-item__label", children: toggleLabel })] }) })) : null] })) : null] }));
     }
-    const panel = (_jsxs(_Fragment, { children: [_jsx(RadixDialog.Overlay, { className: "ui-sidebar-overlay" }), _jsxs(RadixDialog.Content, { className: "ui-sidebar-panel", "aria-describedby": undefined, children: [_jsx(RadixDialog.Title, { className: "ui-sr-only", children: label }), _jsxs("div", { className: "ui-sidebar__header", children: [_jsx("div", { className: "min-w-0 flex-1", children: header }), _jsxs(RadixDialog.Close, { className: "ui-nav-item ui-sidebar__close", children: [_jsx("span", { className: "ui-nav-item__icon", "aria-hidden": "true", children: _jsx(Cross1Icon, {}) }), _jsx("span", { className: "ui-sr-only", children: strings.closeNavigation })] })] }), _jsx(NavContext.Provider, { value: { collapsed: false, onNavigate: () => setPanelOpen(false) }, children: _jsx(Sections, { sections: sections, label: label, id: navId }) }), footer ? _jsx("div", { className: "ui-sidebar__footer", children: footer }) : null] })] }));
+    const panel = (_jsxs(_Fragment, { children: [_jsx(RadixDialog.Overlay, { className: "ui-sidebar-overlay" }), _jsxs(RadixDialog.Content, { className: "ui-sidebar-panel", "aria-describedby": undefined, children: [_jsx(RadixDialog.Title, { className: "ui-sr-only", children: label }), _jsxs("div", { className: "ui-sidebar__header", children: [_jsx("div", { className: "min-w-0 flex-1", children: header }), _jsxs(RadixDialog.Close, { className: "ui-nav-item ui-sidebar__close", children: [_jsx("span", { className: "ui-nav-item__icon", "aria-hidden": "true", children: _jsx(Cross1Icon, {}) }), _jsx("span", { className: "ui-sr-only", children: strings.closeNavigation })] })] }), _jsx(NavContext.Provider, { value: {
+                            collapsed: false,
+                            onNavigate: () => setPanelOpen(false),
+                            openGroup,
+                            setOpenGroup,
+                        }, children: _jsx(Sections, { sections: sections, label: label, id: navId }) }), footer ? _jsx("div", { className: "ui-sidebar__footer", children: footer }) : null] })] }));
     const anchor = _jsx("span", { ref: anchorRef, hidden: true });
     if (!resolved)
         return anchor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kennycorrea/ui",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "A React + TypeScript component library built on Radix Themes: atoms, a Tailwind token bridge and theming.",
   "private": false,
   "type": "module",

package/tokens.css

@@ -1022,8 +1022,10 @@
 .ui-nav-item__badge[data-dot] { min-inline-size: 8px; block-size: 8px; padding: 0; }
 .ui-nav-item__chevron { flex: none; display: inline-flex; transition: transform 150ms ease-out; }
 .ui-nav-item[aria-expanded="true"] .ui-nav-item__chevron { transform: rotate(180deg); }
-.ui-nav-group__items { margin: 2px 0 0; padding: 0 0 0 32px; list-style: none; display: flex; flex-direction: column; gap: 2px; }
-@media (prefers-reduced-motion: reduce) { .ui-nav-item__chevron { transition: none; } }
+.ui-nav-group { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 200ms ease-out, visibility 200ms; }
+.ui-nav-group[data-open] { grid-template-rows: 1fr; visibility: visible; }
+.ui-nav-group__items { min-block-size: 0; overflow: hidden; margin: 0; padding: 2px 0 0 32px; list-style: none; display: flex; flex-direction: column; gap: 2px; }
+@media (prefers-reduced-motion: reduce) { .ui-nav-item__chevron, .ui-nav-group { transition: none; } }
 
 .ui-topbar { position: sticky; inset-block-start: 0; z-index: 20; display: grid; box-sizing: border-box;
   grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lead title actions" "search search search";
@@ -1187,6 +1189,7 @@
 .ui-table__sort:focus-visible, .ui-table__rowbutton:focus-visible { outline: 2px solid var(--focus-8); outline-offset: 2px; border-radius: var(--radius-1); }
 .ui-table__rowbutton { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
 @media (hover: hover) { .ui-table__rowbutton:hover { text-decoration: underline; } }
+.ui-table__selectall { display: none; align-items: center; gap: 8px; padding-inline: 12px; font-size: 14px; font-weight: 500; cursor: pointer; }
 .ui-table__empty { padding: 0; }
 .ui-table__table .ui-table__empty { block-size: auto; }
 .ui-table__empty > * { flex: 1; }
@@ -1197,6 +1200,7 @@
 @container (width < 480px) {
   .ui-table[data-stack="sm"] :is(.ui-table__table, tbody, tr, th, td) { display: block; }
   .ui-table[data-stack="sm"] thead { display: none; }
+  .ui-table[data-stack="sm"] .ui-table__selectall { display: flex; }
   .ui-table[data-stack="sm"] .ui-table__region { border: 0; background: none; overflow: visible; }
   .ui-table[data-stack="sm"] tbody tr { position: relative; margin-block-end: 12px; padding: 8px 12px; border: 1px solid var(--color-hairline); border-radius: var(--radius-4); background: var(--color-panel-solid); }
   .ui-table[data-stack="sm"] .ui-table__table tbody :is(th, td) { display: flex; justify-content: space-between; gap: 12px; block-size: auto; min-block-size: 32px; align-items: center; padding: 4px 0; border: 0; text-align: end; }
@@ -1208,6 +1212,7 @@
 @container (width < 640px) {
   .ui-table[data-stack="md"] :is(.ui-table__table, tbody, tr, th, td) { display: block; }
   .ui-table[data-stack="md"] thead { display: none; }
+  .ui-table[data-stack="md"] .ui-table__selectall { display: flex; }
   .ui-table[data-stack="md"] .ui-table__region { border: 0; background: none; overflow: visible; }
   .ui-table[data-stack="md"] tbody tr { position: relative; margin-block-end: 12px; padding: 8px 12px; border: 1px solid var(--color-hairline); border-radius: var(--radius-4); background: var(--color-panel-solid); }
   .ui-table[data-stack="md"] .ui-table__table tbody :is(th, td) { display: flex; justify-content: space-between; gap: 12px; block-size: auto; min-block-size: 32px; align-items: center; padding: 4px 0; border: 0; text-align: end; }
@@ -1219,6 +1224,7 @@
 @container (width < 800px) {
   .ui-table[data-stack="lg"] :is(.ui-table__table, tbody, tr, th, td) { display: block; }
   .ui-table[data-stack="lg"] thead { display: none; }
+  .ui-table[data-stack="lg"] .ui-table__selectall { display: flex; }
   .ui-table[data-stack="lg"] .ui-table__region { border: 0; background: none; overflow: visible; }
   .ui-table[data-stack="lg"] tbody tr { position: relative; margin-block-end: 12px; padding: 8px 12px; border: 1px solid var(--color-hairline); border-radius: var(--radius-4); background: var(--color-panel-solid); }
   .ui-table[data-stack="lg"] .ui-table__table tbody :is(th, td) { display: flex; justify-content: space-between; gap: 12px; block-size: auto; min-block-size: 32px; align-items: center; padding: 4px 0; border: 0; text-align: end; }