@pharos-ds/core 1.0.5 → 1.0.7-canary.8f6397b

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @xds/core
 
+# 1.0.7
+
+#### New Features
+
+- SideNavSection gains collapsible (true, or {defaultIsCollapsed, isCollapsed, onCollapsedChange}), mirroring SideNavItem: the title and subtitle become a native toggle button with a chevron, aria-expanded and aria-controls, endContent stays outside the button, and collapsed items are inert and aria-hidden behind the same grid-rows animation (instant under reduced motion); the section reflects data-collapsed. Ignored with isHeaderHidden or when the SideNav is collapsed to its icon rail; without the prop the DOM is unchanged
+
+#### Contributors
+
+Thanks to everyone who contributed to this release:
+
+- @Caio-Silvestre
+
+---
+
+# 1.0.6
+
+---
+
 # 1.0.5
 
 #### New Features

package/dist/SideNav/SideNavSection.d.ts

@@ -39,6 +39,26 @@ export interface SideNavSectionProps extends BaseProps<HTMLDivElement> {
      * @default false
      */
     isHeaderHidden?: boolean;
+    /**
+     * Lets the user collapse the section's items by clicking its title.
+     * The title area becomes a toggle button (`aria-expanded`) with a chevron;
+     * `endContent` stays outside the button.
+     *
+     * - `true` — collapsible with defaults (starts expanded)
+     * - Object — controlled/configured:
+     *   - `defaultIsCollapsed` — start collapsed (default: false)
+     *   - `isCollapsed` + `onCollapsedChange` — controlled mode
+     *
+     * Ignored when `isHeaderHidden` is set or the SideNav itself is collapsed
+     * to its icon rail (items stay visible so their icons remain reachable).
+     *
+     * @default false
+     */
+    collapsible?: boolean | {
+        defaultIsCollapsed?: boolean;
+        isCollapsed?: boolean;
+        onCollapsedChange?: (isCollapsed: boolean) => void;
+    };
 }
 /**
  * Section grouping for SideNav items.
@@ -54,7 +74,7 @@ export interface SideNavSectionProps extends BaseProps<HTMLDivElement> {
  * </SideNavSection>
  * ```
  */
-export declare function SideNavSection({ ref, title, subtitle, children, endContent, isHeaderHidden, xstyle, className, style, 'data-testid': testId, ...rest }: SideNavSectionProps): React.JSX.Element;
+export declare function SideNavSection({ ref, title, subtitle, children, endContent, isHeaderHidden, collapsible, xstyle, className, style, 'data-testid': testId, ...rest }: SideNavSectionProps): React.JSX.Element;
 export declare namespace SideNavSection {
     var displayName: string;
 }

package/dist/SideNav/SideNavSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavSection.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavSection.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AASnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+D5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAMD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,cAAsB,EACtB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,qBAyDrB;yBArEe,cAAc"}
+{"version":3,"file":"SideNavSection.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavSection.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAYf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsJ5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;;;;;;;;;OAcG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACpD,CAAC;CACP;AAMD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,cAAsB,EACtB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,qBA+IrB;yBA5Je,cAAc"}

package/dist/SideNav/SideNavSection.js

@@ -17,12 +17,13 @@
  * - /apps/storybook/stories/SideNav.stories.tsx
  * - /packages/cli/templates/blocks/components/SideNav/ (showcase blocks)
  */
-import React, { useId } from 'react';
+import React, { useCallback, useId, useMemo, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
-import { colorVars, spacingVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
+import { colorVars, spacingVars, fontWeightVars, typeScaleVars, durationVars, easeVars, radiusVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { useSideNavCollapse } from "./SideNavCollapseContext.js";
+import { getIcon } from "../Icon/globalIconRegistry.js";
 import { themeProps } from "../utils/themeProps.js";
 // =============================================================================
 // Styles
@@ -66,6 +67,7 @@ export function SideNavSection({
   children,
   endContent,
   isHeaderHidden = false,
+  collapsible,
   xstyle,
   className,
   style,
@@ -77,31 +79,79 @@ export function SideNavSection({
   } = useSideNavCollapse();
   const id = useId();
   const titleId = `${id}-title`;
-  const headerContent = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs("span", {
+  const itemsId = `${id}-items`;
+
+  // Section collapse state (mirrors SideNavItem's `collapsible`)
+  const collapsibleConfig = useMemo(() => typeof collapsible === 'object' ? collapsible : {}, [collapsible]);
+  const controlledCollapsed = collapsibleConfig.isCollapsed;
+  const isControlled = controlledCollapsed !== undefined;
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(collapsibleConfig.defaultIsCollapsed ?? false);
+  const isSectionCollapsed = isControlled ? controlledCollapsed : uncontrolledCollapsed;
+  const toggleSectionCollapse = useCallback(() => {
+    const next = !isSectionCollapsed;
+    if (!isControlled) {
+      setUncontrolledCollapsed(next);
+    }
+    collapsibleConfig.onCollapsedChange?.(next);
+  }, [isSectionCollapsed, isControlled, collapsibleConfig]);
+  const shouldHideHeader = isHeaderHidden || isCollapsed;
+  // Collapse only applies while the header is visible: a hidden header has
+  // no toggle, and the icon rail must keep every item reachable.
+  const isSectionCollapsible = collapsible != null && collapsible !== false && !shouldHideHeader;
+  const isItemsCollapsed = isSectionCollapsible && isSectionCollapsed;
+  const titleContent = /*#__PURE__*/_jsxs("span", {
+    ...{
+      className: "x78zum5 xdt5ytf x98rzlu xeuugli"
+    },
+    children: [/*#__PURE__*/_jsx("span", {
+      id: titleId,
       ...{
-        className: "x78zum5 xdt5ytf x98rzlu xeuugli"
+        className: "x141an7d x2mo6ok x1ltkj2j xv1l7n4 xb3r6kr xlyipyv xuxw1ft"
       },
-      children: [/*#__PURE__*/_jsx("span", {
-        id: titleId,
-        ...{
-          className: "x141an7d x2mo6ok x1ltkj2j xv1l7n4 xb3r6kr xlyipyv xuxw1ft"
-        },
-        children: title
-      }), subtitle && /*#__PURE__*/_jsx("span", {
-        ...{
-          className: "x141an7d x1ltkj2j xv1l7n4 xb3r6kr xlyipyv xuxw1ft"
-        },
-        children: subtitle
-      })]
-    }), endContent && /*#__PURE__*/_jsx("span", {
+      children: title
+    }), subtitle && /*#__PURE__*/_jsx("span", {
       ...{
-        className: "x2lah0s x78zum5 x6s0dn4"
+        className: "x141an7d x1ltkj2j xv1l7n4 xb3r6kr xlyipyv xuxw1ft"
       },
-      children: endContent
+      children: subtitle
     })]
   });
-  const shouldHideHeader = isHeaderHidden || isCollapsed;
+  const endContentElement = endContent && /*#__PURE__*/_jsx("span", {
+    ...{
+      0: {
+        className: "x2lah0s x78zum5 x6s0dn4"
+      },
+      1: {
+        className: "x2lah0s x78zum5 x6s0dn4 x1djylfy"
+      }
+    }[!!isSectionCollapsible << 0],
+    children: endContent
+  });
+  const headerContent = isSectionCollapsible ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("button", {
+      type: "button",
+      onClick: toggleSectionCollapse,
+      "aria-expanded": !isSectionCollapsed,
+      "aria-controls": itemsId,
+      ...{
+        className: "x78zum5 x6s0dn4 x1txdalj x98rzlu xeuugli xh8yej3 xf314gf xu0wf1k x1ghz6dp xc342km xng3xce xh6dtrn xjbqb8w x1heor9g xjb2p0i x1qlqyl8 x1pd3egz x15bjb6t x1yc453h x1ypdohk x87ps6o xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x1bqaal"
+      },
+      children: [titleContent, /*#__PURE__*/_jsx("span", {
+        "aria-hidden": true,
+        ...{
+          0: {
+            className: "x3nfvp2 x6s0dn4 xl56j7k x1mtvzj0 xvpftlf xv1l7n4 x11xpdln xuedmi6 x12w9bfk xlr8y92 x2lah0s"
+          },
+          1: {
+            className: "x3nfvp2 x6s0dn4 xl56j7k x1mtvzj0 xvpftlf xv1l7n4 x11xpdln xuedmi6 x12w9bfk xlr8y92 x2lah0s x19jd1h0"
+          }
+        }[!!!isSectionCollapsed << 0],
+        children: getIcon('chevronDown')
+      })]
+    }), endContentElement]
+  }) : /*#__PURE__*/_jsxs(_Fragment, {
+    children: [titleContent, endContentElement]
+  });
   const visuallyHiddenStyle = shouldHideHeader ? {
     position: 'absolute',
     width: 1,
@@ -115,19 +165,49 @@ export function SideNavSection({
   } : {};
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
-    ...mergeProps(themeProps('side-nav-section'), stylex.props(styles.root, xstyle), className, style),
+    ...mergeProps(themeProps('side-nav-section', isSectionCollapsible ? {
+      collapsed: isSectionCollapsed ? 'collapsed' : null
+    } : undefined), stylex.props(styles.root, xstyle), className, style),
     ...rest,
     role: "group",
     "aria-labelledby": titleId,
     "data-testid": testId,
     children: [/*#__PURE__*/_jsx("div", {
       ...mergeProps({
-        className: "x78zum5 x6s0dn4 x1txdalj xf314gf xu0wf1k xt0e3qv x87ps6o"
-      }, {
+        0: {
+          className: "x78zum5 x6s0dn4 x1txdalj xf314gf xu0wf1k xt0e3qv x87ps6o"
+        },
+        1: {
+          className: "x78zum5 x6s0dn4 x1txdalj xt0e3qv x87ps6o xnjsko4 xt970qd"
+        }
+      }[!!isSectionCollapsible << 0], {
         style: shouldHideHeader ? visuallyHiddenStyle : undefined
       }),
       children: headerContent
-    }), /*#__PURE__*/_jsx("div", {
+    }), isSectionCollapsible ? /*#__PURE__*/_jsx("div", {
+      id: itemsId,
+      "aria-hidden": isItemsCollapsed || undefined,
+      inert: isItemsCollapsed ? true : undefined,
+      ...{
+        0: {
+          className: "xrvj5dj x1tu4anv x1qn9uv2 x80gvsz x12w9bfk xlr8y92"
+        },
+        1: {
+          className: "xrvj5dj x1qn9uv2 x80gvsz x12w9bfk xlr8y92 xihq33y"
+        }
+      }[!!isItemsCollapsed << 0],
+      children: /*#__PURE__*/_jsx("div", {
+        ...{
+          className: "xb3r6kr x2lwn1j"
+        },
+        children: /*#__PURE__*/_jsx("div", {
+          ...{
+            className: "x78zum5 xdt5ytf x1lsbc85"
+          },
+          children: children
+        })
+      })
+    }) : /*#__PURE__*/_jsx("div", {
       ...{
         className: "x78zum5 xdt5ytf x1lsbc85"
       },

package/dist/pharos.css

@@ -1094,6 +1094,7 @@
   .xof6bs:is(th:hover *):not(#\#):not(#\#):not(#\#){opacity:1}
   .xofkqq2:popover-open:not(#\#):not(#\#):not(#\#){opacity:1}
   .xzunyri:focus-visible:not(#\#):not(#\#):not(#\#){outline-color:var(--color-accent)}
+  .x1bqaal:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:-2px}
   .x1506sbz.x1506sbz:where(.xy9u6lz:has(:focus-visible) *):not(#\#):not(#\#):not(#\#){outline-offset:2px}
   .x1ipu19n.x1ipu19n:where(.xjy6dfm:has(:focus-visible) *):not(#\#):not(#\#):not(#\#){outline-offset:2px}
   .x7s97pk:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:2px}