@moderneinc/neo-styled-components 5.0.0 → 5.1.0-next.0868e6

package/dist/SideNav/SideNav.d.ts

@@ -2,18 +2,16 @@ import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 export type NeoSideNavProps = {
     /** Controlled collapsed state. */
     collapsed: boolean;
-    /** Called with the next collapsed value when the toggle is activated. */
+    /** Called with the next collapsed value when the edge-handle is activated. */
     onCollapsedChange: (next: boolean) => void;
     /** Fixed top slot (e.g. product logo). */
     header?: ReactNode;
-    /** Fixed bottom slot (e.g. tenant branding), rendered above the toggle. */
+    /** Fixed bottom slot (e.g. tenant branding). */
     footer?: ReactNode;
     /** Scrolling content slot — the nav items. */
-    children: ReactNode;
-    /** Toggle label shown when expanded. Default "Less". */
-    collapseLabel?: string;
+    children?: ReactNode;
 } & Pick<ComponentPropsWithoutRef<'nav'>, 'className' | 'id' | 'aria-label'>;
-export declare function NeoSideNav({ collapsed, onCollapsedChange, header, footer, children, collapseLabel, ...rest }: NeoSideNavProps): import("react/jsx-runtime").JSX.Element;
+export declare function NeoSideNav({ collapsed, onCollapsedChange, header, footer, children, className, id, 'aria-label': ariaLabel, }: NeoSideNavProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace NeoSideNav {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -2452,18 +2452,16 @@ type NeoSelectFieldChangeEvent<T = unknown> = SelectChangeEvent<T>;
 type NeoSideNavProps = {
     /** Controlled collapsed state. */
     collapsed: boolean;
-    /** Called with the next collapsed value when the toggle is activated. */
+    /** Called with the next collapsed value when the edge-handle is activated. */
     onCollapsedChange: (next: boolean) => void;
     /** Fixed top slot (e.g. product logo). */
     header?: ReactNode;
-    /** Fixed bottom slot (e.g. tenant branding), rendered above the toggle. */
+    /** Fixed bottom slot (e.g. tenant branding). */
     footer?: ReactNode;
     /** Scrolling content slot — the nav items. */
-    children: ReactNode;
-    /** Toggle label shown when expanded. Default "Less". */
-    collapseLabel?: string;
+    children?: ReactNode;
 } & Pick<ComponentPropsWithoutRef<'nav'>, 'className' | 'id' | 'aria-label'>;
-declare function NeoSideNav({ collapsed, onCollapsedChange, header, footer, children, collapseLabel, ...rest }: NeoSideNavProps): react_jsx_runtime.JSX.Element;
+declare function NeoSideNav({ collapsed, onCollapsedChange, header, footer, children, className, id, 'aria-label': ariaLabel, }: NeoSideNavProps): react_jsx_runtime.JSX.Element;
 declare namespace NeoSideNav {
     var displayName: string;
 }

package/dist/index.esm.js

@@ -600,11 +600,11 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$p = [
+const __iconNode$n = [
   ["path", { d: "M12 5v14", key: "s699le" }],
   ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
 ];
-const ArrowDown = createLucideIcon("arrow-down", __iconNode$p);
+const ArrowDown = createLucideIcon("arrow-down", __iconNode$n);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -614,11 +614,11 @@ const ArrowDown = createLucideIcon("arrow-down", __iconNode$p);
  */
 
 
-const __iconNode$o = [
+const __iconNode$m = [
   ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
   ["path", { d: "M12 19V5", key: "x0mq9r" }]
 ];
-const ArrowUp = createLucideIcon("arrow-up", __iconNode$o);
+const ArrowUp = createLucideIcon("arrow-up", __iconNode$m);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -628,7 +628,7 @@ const ArrowUp = createLucideIcon("arrow-up", __iconNode$o);
  */
 
 
-const __iconNode$n = [
+const __iconNode$l = [
   [
     "path",
     {
@@ -639,7 +639,7 @@ const __iconNode$n = [
   ["line", { x1: "12", x2: "12", y1: "16", y2: "12", key: "1y1yb1" }],
   ["line", { x1: "12", x2: "12.01", y1: "8", y2: "8", key: "110wyk" }]
 ];
-const BadgeInfo = createLucideIcon("badge-info", __iconNode$n);
+const BadgeInfo = createLucideIcon("badge-info", __iconNode$l);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -649,7 +649,7 @@ const BadgeInfo = createLucideIcon("badge-info", __iconNode$n);
  */
 
 
-const __iconNode$m = [
+const __iconNode$k = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
@@ -661,7 +661,7 @@ const __iconNode$m = [
   ["path", { d: "M12 18h.01", key: "mhygvu" }],
   ["path", { d: "M16 18h.01", key: "kzsmim" }]
 ];
-const CalendarDays = createLucideIcon("calendar-days", __iconNode$m);
+const CalendarDays = createLucideIcon("calendar-days", __iconNode$k);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -671,8 +671,8 @@ const CalendarDays = createLucideIcon("calendar-days", __iconNode$m);
  */
 
 
-const __iconNode$l = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$l);
+const __iconNode$j = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$j);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -682,8 +682,8 @@ const ChevronDown = createLucideIcon("chevron-down", __iconNode$l);
  */
 
 
-const __iconNode$k = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$k);
+const __iconNode$i = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$i);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -693,8 +693,8 @@ const ChevronLeft = createLucideIcon("chevron-left", __iconNode$k);
  */
 
 
-const __iconNode$j = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$j);
+const __iconNode$h = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$h);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -704,8 +704,8 @@ const ChevronRight = createLucideIcon("chevron-right", __iconNode$j);
  */
 
 
-const __iconNode$i = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode$i);
+const __iconNode$g = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("chevron-up", __iconNode$g);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -715,11 +715,11 @@ const ChevronUp = createLucideIcon("chevron-up", __iconNode$i);
  */
 
 
-const __iconNode$h = [
+const __iconNode$f = [
   ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
   ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
 ];
-const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$h);
+const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$f);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -729,12 +729,12 @@ const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$h);
  */
 
 
-const __iconNode$g = [
+const __iconNode$e = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$g);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$e);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -744,11 +744,11 @@ const CircleAlert = createLucideIcon("circle-alert", __iconNode$g);
  */
 
 
-const __iconNode$f = [
+const __iconNode$d = [
   ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
   ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$f);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$d);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -758,12 +758,12 @@ const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$f);
  */
 
 
-const __iconNode$e = [
+const __iconNode$c = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
   ["path", { d: "M12 17h.01", key: "p32p05" }]
 ];
-const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$e);
+const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$c);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -773,12 +773,12 @@ const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$e
  */
 
 
-const __iconNode$d = [
+const __iconNode$b = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }],
   ["path", { d: "M15 3v18", key: "14nvp0" }]
 ];
-const Columns3 = createLucideIcon("columns-3", __iconNode$d);
+const Columns3 = createLucideIcon("columns-3", __iconNode$b);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -788,38 +788,12 @@ const Columns3 = createLucideIcon("columns-3", __iconNode$d);
  */
 
 
-const __iconNode$c = [
+const __iconNode$a = [
   ["path", { d: "M2 5h20", key: "1fs1ex" }],
   ["path", { d: "M6 12h12", key: "8npq4p" }],
   ["path", { d: "M9 19h6", key: "456am0" }]
 ];
-const ListFilter = createLucideIcon("list-filter", __iconNode$c);
-
-/**
- * @license lucide-react v1.16.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$b = [["path", { d: "M5 12h14", key: "1ays0h" }]];
-const Minus = createLucideIcon("minus", __iconNode$b);
-
-/**
- * @license lucide-react v1.16.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$a = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
-  ["path", { d: "M9 3v18", key: "fh3hqa" }],
-  ["path", { d: "m16 15-3-3 3-3", key: "14y99z" }]
-];
-const PanelLeftClose = createLucideIcon("panel-left-close", __iconNode$a);
+const ListFilter = createLucideIcon("list-filter", __iconNode$a);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -829,12 +803,8 @@ const PanelLeftClose = createLucideIcon("panel-left-close", __iconNode$a);
  */
 
 
-const __iconNode$9 = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
-  ["path", { d: "M9 3v18", key: "fh3hqa" }],
-  ["path", { d: "m14 9 3 3-3 3", key: "8010ee" }]
-];
-const PanelLeftOpen = createLucideIcon("panel-left-open", __iconNode$9);
+const __iconNode$9 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
+const Minus = createLucideIcon("minus", __iconNode$9);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -2781,15 +2751,18 @@ function NeoDataGrid({ autoHeight = false, toolbar, slots, sx, density = 'standa
         ...getDataGridHeaderStyles(),
         ...getDataGridRowStyles(),
         border: `1px solid ${semanticColors.border.secondary}`,
-        // Style row selection checkboxes to match header (16px, proper spacing).
-        // Target `& svg` (not `.MuiSvgIcon-root`) so the rule also matches the
-        // lucide `<svg>` icons NeoCheckbox renders, mirroring the header rule.
+        // Target `& svg` (not `.MuiSvgIcon-root`) to match the lucide icons
+        // NeoCheckbox renders, mirroring the header rule below.
+        // flexShrink: 0 stops the icon collapsing to 0 width when the checkbox
+        // column is narrower than the 32px box (16px icon + 16px padding) —
+        // without it the checkbox becomes invisible but stays clickable.
         [`& .${gridClasses.cellCheckbox}`]: {
             [`& .${checkboxClasses.root}`]: {
                 padding: `${spacing.spacing_1}px`,
                 '& svg': {
                     width: 16,
                     height: 16,
+                    flexShrink: 0,
                 },
             },
         },
@@ -6417,7 +6390,7 @@ const NeoSelectField = ({ size = 'medium', destructive = false, label, required
 NeoSelectField.displayName = 'NeoSelectField';
 
 const EXPANDED_WIDTH = 98;
-const COLLAPSED_WIDTH = 56;
+const COLLAPSED_WIDTH = 68;
 // The fade overlay must end on the same color as the rail to blend cleanly.
 const RAIL_BACKGROUND = colors.grey[100];
 /**
@@ -6427,8 +6400,28 @@ const RAIL_BACKGROUND = colors.grey[100];
  * scrolling content area. Controlled via `collapsed` + `onCollapsedChange`;
  * broadcasts collapsed state to descendant `NeoNavigationItem`s through context.
  *
+ * A chevron handle on the rail's trailing edge (beside the tenant-logo row)
+ * toggles the controlled state. Consumers that want the rail to auto-collapse
+ * on viewport changes compute `collapsed` themselves (e.g. via `useMediaQuery`)
+ * and pass it in — see the `AutoCollapseOnResize` Storybook story for the
+ * pattern.
+ *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4065-3425
  */
+// Unclipped positioning context so the edge handle can straddle the rail's
+// trailing edge (Root itself clips its overflow during the width transition).
+const Frame = styled('div', {
+    shouldForwardProp: prop => prop !== 'collapsed',
+})(({ collapsed, theme }) => ({
+    position: 'relative',
+    display: 'flex',
+    height: '100%',
+    width: collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH,
+    minWidth: collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH,
+    transition: theme.transitions.create(['width', 'min-width'], {
+        duration: theme.transitions.duration.shorter,
+    }),
+}));
 const Root = styled('nav', {
     shouldForwardProp: prop => prop !== 'collapsed',
 })(({ collapsed, theme }) => ({
@@ -6454,6 +6447,10 @@ const Scroll = styled('div')({
     minHeight: 0,
     overflowY: 'auto',
     overflowX: 'hidden',
+    // Reserve the scrollbar gutter symmetrically on both edges at all times, so
+    // the centered nav items stay aligned with the header/footer icons and don't
+    // jump when the scrollbar shows or hides.
+    scrollbarGutter: 'stable both-edges',
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
@@ -6461,7 +6458,7 @@ const Scroll = styled('div')({
     paddingInline: spacing.spacing_1,
     '&::-webkit-scrollbar': { width: spacing.spacing_1_2 },
     '&::-webkit-scrollbar-thumb': {
-        backgroundColor: semanticColors.border.primary,
+        backgroundColor: semanticColors.border.secondary,
         borderRadius: borderRadius.xXS,
     },
 });
@@ -6485,29 +6482,34 @@ const Fade = styled('div')({
     pointerEvents: 'none',
     background: `linear-gradient(to bottom, transparent, ${RAIL_BACKGROUND})`,
 });
-const Toggle = styled(ButtonBase)(({ theme }) => ({
+// A small rectangular tab that straddles the rail's trailing edge, pinned down
+// beside the tenant-logo row (not floating at the rail's vertical center) so
+// it reads as attached to the panel.
+const Handle = styled(ButtonBase)(({ theme }) => ({
+    position: 'absolute',
+    right: 0,
+    bottom: spacing.spacing_1,
+    transform: 'translateX(50%)',
+    zIndex: 1,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    flexDirection: 'column',
-    gap: spacing.spacing_1_2,
-    width: '100%',
-    paddingBlock: spacing.spacing_1,
+    width: spacing.spacing_1_1_2,
+    height: spacing.spacing_5,
     borderRadius: borderRadius.s,
+    backgroundColor: RAIL_BACKGROUND,
     border: `1px solid ${semanticColors.border.secondary}`,
     color: semanticColors.typography.bodySecondary,
-    fontFamily: typography.fontFamily.body,
-    fontSize: theme.typography.pxToRem(11),
-    lineHeight: 1,
+    transition: theme.transitions.create(['color', 'border-color']),
     '&:hover': {
         color: semanticColors.typography.body,
         borderColor: semanticColors.border.primary,
     },
 }));
-function NeoSideNav({ collapsed, onCollapsedChange, header, footer, children, collapseLabel = 'Less', ...rest }) {
-    const ToggleIcon = collapsed ? PanelLeftOpen : PanelLeftClose;
+function NeoSideNav({ collapsed, onCollapsedChange, header, footer, children, className, id, 'aria-label': ariaLabel, }) {
     const contextValue = useMemo(() => ({ collapsed }), [collapsed]);
-    return (jsx(NeoSideNavContext.Provider, { value: contextValue, children: jsxs(Root, { collapsed: collapsed, ...rest, children: [header && jsx(Header, { children: header }), jsx(Scroll, { children: children }), jsxs(FooterRegion, { children: [jsx(Fade, {}), footer, jsxs(Toggle, { "data-testid": "neo-side-nav-toggle", "aria-label": collapsed ? 'Expand navigation' : 'Collapse navigation', disableRipple: true, onClick: () => onCollapsedChange(!collapsed), children: [jsx(ToggleIcon, { size: 18 }), !collapsed && jsx("span", { children: collapseLabel })] })] })] }) }));
+    const HandleIcon = collapsed ? ChevronRight : ChevronLeft;
+    return (jsx(NeoSideNavContext.Provider, { value: contextValue, children: jsxs(Frame, { collapsed: collapsed, children: [jsxs(Root, { collapsed: collapsed, "aria-label": ariaLabel, className: className, id: id, children: [header && jsx(Header, { children: header }), jsx(Scroll, { children: children }), jsxs(FooterRegion, { children: [jsx(Fade, {}), footer] })] }), jsx(Handle, { "data-testid": "neo-side-nav-handle", "aria-label": collapsed ? 'Expand navigation' : 'Collapse navigation', disableRipple: true, onClick: () => onCollapsedChange(!collapsed), children: jsx(HandleIcon, { size: 14 }) })] }) }));
 }
 NeoSideNav.displayName = 'NeoSideNav';