@common-origin/design-system 3.1.0 → 3.3.0

package/dist/components/organisms/SidebarNav/SidebarNav.mjs

@@ -1,23 +1,23 @@
 'use client';
 import { __makeTemplateObject, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useRef } from 'react';
-import styled$module, { css } from 'styled-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import styled$module from 'styled-components';
 const styled = styled$module.default || styled$module;
 import tokens from '../../../lib/cssTokens.mjs';
-import { reducedMotion, forcedColors } from '../../../lib/styleUtils.mjs';
+import { reducedMotion, rowRadius, forcedColors } from '../../../lib/styleUtils.mjs';
 import { IconButton } from '../../atoms/IconButton/IconButton.mjs';
 import { Tooltip } from '../../atoms/Tooltip/Tooltip.mjs';
 import { isKeyboardFocus } from '../../../lib/keyboardFocus.mjs';
 import { SidebarNavContext } from '../../molecules/SidebarNavItem/SidebarNavContext.mjs';
+import { fade, EXPANDED_WIDTH_VAR, NAV_PADDING, SCROLLBAR_VAR } from '../../molecules/SidebarNavItem/sidebarNavMotion.mjs';
 
 var semantic = tokens.semantic,
   component = tokens.component;
 var space = semantic.space,
   motion = semantic.motion,
-  radius = semantic.radius,
-  border = semantic.border,
-  color = semantic.color;
+  color = semantic.color,
+  size = semantic.size;
 var widths = component.sidebarNav.width;
 var Nav = /*#__PURE__*/styled.nav.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -25,39 +25,67 @@ var Nav = /*#__PURE__*/styled.nav.withConfig({
   },
   displayName: "SidebarNav__Nav",
   componentId: "sc-1as46tp-0"
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  box-sizing: border-box;\n  /* Its width is set; in a flex app shell it mustn't shrink to make room */\n  flex-shrink: 0;\n  width: ", ";\n  height: 100%;\n  padding: ", ";\n  overflow: hidden;\n  /* Quiet chrome (P1): the page's own background, with a thin edge */\n  border-right: ", ";\n  transition: width ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  box-sizing: border-box;\n  /* Its width is set; in a flex app shell it mustn't shrink to make room */\n  flex-shrink: 0;\n  width: ", ";\n  height: 100%;\n  padding: ", ";\n  overflow: hidden;\n  /* Quiet chrome (P1): the page's own background, with a thin edge */\n  border-right: ", ";\n  transition: width ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n"])), space[200], function (_a) {
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  box-sizing: border-box;\n  /* Its width is set; in a flex app shell it mustn't shrink to make room */\n  flex-shrink: 0;\n  width: ", ";\n  height: 100%;\n  padding: ", ";\n  overflow: hidden;\n  /* Quiet chrome (P1): the page's own background, with no edge of its own (issue 348). The width\n     moves with everything inside it, decelerating (0037) */\n  transition: width ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  box-sizing: border-box;\n  /* Its width is set; in a flex app shell it mustn't shrink to make room */\n  flex-shrink: 0;\n  width: ", ";\n  height: 100%;\n  padding: ", ";\n  overflow: hidden;\n  /* Quiet chrome (P1): the page's own background, with no edge of its own (issue 348). The width\n     moves with everything inside it, decelerating (0037) */\n  transition: width ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n"
+// The header holds two toggles in fixed places that cross-fade (issue 348): collapse beside the
+// header content, and expand in the content's place, where the rail shows it. Nothing moves.
+])), space[200], function (_a) {
   var $width = _a.$width;
   return $width;
-}, space[200], border["default"], motion.duration.moderate, motion.easing.standard, reducedMotion);
+}, space[200], motion.duration.moderate, motion.easing.decelerate, reducedMotion);
+// The header holds two toggles in fixed places that cross-fade (issue 348): collapse beside the
+// header content, and expand in the content's place, where the rail shows it. Nothing moves.
 var Header = /*#__PURE__*/styled.div.withConfig({
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return !prop.startsWith('$');
-  },
   displayName: "SidebarNav__Header",
   componentId: "sc-1as46tp-1"
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n\n  ", "\n"])), space[100], function (_a) {
-  var $collapsed = _a.$collapsed;
-  return $collapsed && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      flex-direction: column;\n    "], ["\n      flex-direction: column;\n    "])));
-});
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-height: ", ";\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-height: ", ";\n"])), space[100], size.control.sm);
 var HeaderContent = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
   displayName: "SidebarNav__HeaderContent",
   componentId: "sc-1as46tp-2"
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n"], ["\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n"])));
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  ", "\n\n  /* Keeps its expanded width, so the nav's edge clips it rather than it reflowing mid-move */\n  & > div {\n    width: calc(var(", ") - 2 * ", " - ", " - ", ");\n  }\n"], ["\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  ", "\n\n  /* Keeps its expanded width, so the nav's edge clips it rather than it reflowing mid-move */\n  & > div {\n    width: calc(var(", ") - 2 * ", " - ", " - ", ");\n  }\n"])), function (_a) {
+  var $hidden = _a.$hidden;
+  return fade($hidden);
+}, EXPANDED_WIDTH_VAR, NAV_PADDING, size.control.sm, space[100]);
+var CollapseSlot = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SidebarNav__CollapseSlot",
+  componentId: "sc-1as46tp-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-shrink: 0;\n  margin-left: auto;\n  ", "\n"], ["\n  display: inline-flex;\n  flex-shrink: 0;\n  margin-left: auto;\n  ", "\n"
+// Centred in the rail, where the header content starts
+])), function (_a) {
+  var $hidden = _a.$hidden;
+  return fade($hidden);
+});
+// Centred in the rail, where the header content starts
+var ExpandSlot = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SidebarNav__ExpandSlot",
+  componentId: "sc-1as46tp-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: calc((", " - 2 * ", " - ", ") / 2);\n  display: flex;\n  align-items: center;\n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: calc((", " - 2 * ", " - ", ") / 2);\n  display: flex;\n  align-items: center;\n  ", "\n"])), component.sidebarNav.width.rail, NAV_PADDING, size.control.sm, function (_a) {
+  var $hidden = _a.$hidden;
+  return fade($hidden);
+});
 var Body = /*#__PURE__*/styled.div.withConfig({
   displayName: "SidebarNav__Body",
-  componentId: "sc-1as46tp-3"
-})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex: 1;\n  min-height: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  flex: 1;\n  min-height: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n"
+  componentId: "sc-1as46tp-5"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex: 1;\n  min-height: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  flex: 1;\n  min-height: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n"
 // The rows and the highlight share this box, so the highlight scrolls with the rows
 ])));
 // The rows and the highlight share this box, so the highlight scrolls with the rows
 var Content = /*#__PURE__*/styled.div.withConfig({
   displayName: "SidebarNav__Content",
-  componentId: "sc-1as46tp-4"
-})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  isolation: isolate;\n  display: flex;\n  flex-direction: column;\n\n  & [data-sidebar-row] {\n    position: relative;\n    z-index: 1;\n  }\n"], ["\n  position: relative;\n  isolation: isolate;\n  display: flex;\n  flex-direction: column;\n\n  & [data-sidebar-row] {\n    position: relative;\n    z-index: 1;\n  }\n"])));
+  componentId: "sc-1as46tp-6"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  isolation: isolate;\n  display: flex;\n  flex-direction: column;\n\n  & [data-sidebar-row] {\n    position: relative;\n    z-index: 1;\n  }\n"], ["\n  position: relative;\n  isolation: isolate;\n  display: flex;\n  flex-direction: column;\n\n  & [data-sidebar-row] {\n    position: relative;\n    z-index: 1;\n  }\n"])));
 var List = /*#__PURE__*/styled.ul.withConfig({
   displayName: "SidebarNav__List",
-  componentId: "sc-1as46tp-5"
-})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"], ["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"])));
+  componentId: "sc-1as46tp-7"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"], ["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"])));
 // One highlight glides to the hovered or keyboard-focused row (0053): the row hover colour,
 // moving over duration.fast. It jumps under reduced motion and hides in forced colours, where
 // rows outline themselves instead.
@@ -66,61 +94,109 @@ var Highlight = /*#__PURE__*/styled.div.withConfig({
     return !prop.startsWith('$');
   },
   displayName: "SidebarNav__Highlight",
-  componentId: "sc-1as46tp-6"
-})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 0;\n  border-radius: ", ";\n  background-color: ", ";\n  pointer-events: none;\n  opacity: ", ";\n  transition: ", ";\n\n  ", " {\n    transition: opacity ", " ", ";\n  }\n\n  ", " {\n    display: none;\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 0;\n  border-radius: ", ";\n  background-color: ", ";\n  pointer-events: none;\n  opacity: ", ";\n  transition: ", ";\n\n  ", " {\n    transition: opacity ", " ", ";\n  }\n\n  ", " {\n    display: none;\n  }\n"])), radius.sm, color.fill.muted, function (_a) {
+  componentId: "sc-1as46tp-8"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 0;\n  border-radius: ", ";\n  background-color: ", ";\n  pointer-events: none;\n  opacity: ", ";\n  transition: ", ";\n\n  ", " {\n    transition: opacity ", " ", ";\n  }\n\n  ", " {\n    display: none;\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 0;\n  border-radius: ", ";\n  background-color: ", ";\n  pointer-events: none;\n  opacity: ", ";\n  transition: ", ";\n\n  ", " {\n    transition: opacity ", " ", ";\n  }\n\n  ", " {\n    display: none;\n  }\n"
+// The footer fades out in the rail, keeping its expanded width so it doesn't reflow mid-move
+])), rowRadius, color.fill.muted, function (_a) {
   var $visible = _a.$visible;
   return $visible ? 1 : 0;
 }, function (_a) {
   var $instant = _a.$instant;
   return $instant ? "opacity ".concat(motion.duration.fast, " ").concat(motion.easing.decelerate) : "transform ".concat(motion.duration.fast, " ").concat(motion.easing.decelerate, ",\n    height ").concat(motion.duration.fast, " ").concat(motion.easing.decelerate, ",\n    width ").concat(motion.duration.fast, " ").concat(motion.easing.decelerate, ",\n    opacity ").concat(motion.duration.fast, " ").concat(motion.easing.decelerate);
 }, reducedMotion, motion.duration.fast, motion.easing.decelerate, forcedColors);
+// The footer fades out in the rail, keeping its expanded width so it doesn't reflow mid-move
 var Footer = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
   displayName: "SidebarNav__Footer",
-  componentId: "sc-1as46tp-7"
-})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex-shrink: 0;\n"], ["\n  flex-shrink: 0;\n"
+  componentId: "sc-1as46tp-9"
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  flex-shrink: 0;\n  overflow: hidden;\n  ", "\n\n  & > div {\n    width: calc(var(", ") - 2 * ", ");\n  }\n"], ["\n  flex-shrink: 0;\n  overflow: hidden;\n  ", "\n\n  & > div {\n    width: calc(var(", ") - 2 * ", ");\n  }\n"
 /**
  * A product's sidebar navigation (#331): a header, a scrolling body of items and sections, and a
  * footer, that collapses to an icon rail. Row heights follow density (0051); the width is a prop.
  * On small screens, place it in a Sheet with `collapsible={false}`.
- */])));
+ */])), function (_a) {
+  var $hidden = _a.$hidden;
+  return fade($hidden);
+}, EXPANDED_WIDTH_VAR, NAV_PADDING);
 /**
  * A product's sidebar navigation (#331): a header, a scrolling body of items and sections, and a
  * footer, that collapses to an icon rail. Row heights follow density (0051); the width is a prop.
  * On small screens, place it in a Sheet with `collapsible={false}`.
  */
 var SidebarNav = function SidebarNav(_a) {
+  var _b;
   var label = _a.label,
     children = _a.children,
     header = _a.header,
     footer = _a.footer,
-    _b = _a.width,
-    width = _b === void 0 ? 'default' : _b,
+    _c = _a.width,
+    width = _c === void 0 ? 'default' : _c,
     collapsedProp = _a.collapsed,
-    _c = _a.defaultCollapsed,
-    defaultCollapsed = _c === void 0 ? false : _c,
+    _d = _a.defaultCollapsed,
+    defaultCollapsed = _d === void 0 ? false : _d,
     onCollapsedChange = _a.onCollapsedChange,
-    _d = _a.collapsible,
-    collapsible = _d === void 0 ? true : _d,
+    _e = _a.collapsible,
+    collapsible = _e === void 0 ? true : _e,
     linkComponent = _a.linkComponent,
     dataTestId = _a["data-testid"];
-  var _e = useState(defaultCollapsed),
-    uncontrolledCollapsed = _e[0],
-    setUncontrolledCollapsed = _e[1];
+  var _f = useState(defaultCollapsed),
+    uncontrolledCollapsed = _f[0],
+    setUncontrolledCollapsed = _f[1];
   var isControlled = collapsedProp !== undefined;
   var collapsed = collapsible && (isControlled ? collapsedProp : uncontrolledCollapsed);
   var contentRef = useRef(null);
-  var _f = useState({
+  var navRef = useRef(null);
+  var bodyRef = useRef(null);
+  // A classic scrollbar narrows every row, so rows need its width. Measured while expanded (the rail
+  // only clips what rows hold) and written straight to a CSS variable, so it re-renders nothing.
+  useEffect(function () {
+    var nav = navRef.current;
+    var body = bodyRef.current;
+    if (!nav || !body || collapsed) return;
+    var measure = function measure() {
+      return nav.style.setProperty(SCROLLBAR_VAR, "".concat(body.offsetWidth - body.clientWidth, "px"));
+    };
+    measure();
+    if (typeof ResizeObserver === 'undefined') return;
+    var observer = new ResizeObserver(measure);
+    observer.observe(body);
+    if (contentRef.current) observer.observe(contentRef.current);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [collapsed]);
+  var _g = useState({
       box: null,
       visible: false,
       instant: true
     }),
-    highlight = _f[0],
-    setHighlight = _f[1];
+    highlight = _g[0],
+    setHighlight = _g[1];
+  // Focus follows the toggle: the one pressed fades away, so focus moves to the one now shown
+  var collapseSlot = useRef(null);
+  var expandSlot = useRef(null);
+  // Which state a toggle asked for, and when: focus moves only if that state arrives promptly, so a
+  // controlled parent that declined the change can't have focus jump on some later change
+  var focusToggle = useRef(null);
   var toggle = function toggle() {
     var next = !collapsed;
+    focusToggle.current = {
+      to: next,
+      at: Date.now()
+    };
     if (!isControlled) setUncontrolledCollapsed(next);
     onCollapsedChange === null || onCollapsedChange === void 0 ? void 0 : onCollapsedChange(next);
   };
+  useEffect(function () {
+    var _a;
+    var request = focusToggle.current;
+    focusToggle.current = null;
+    if (!request || request.to !== collapsed || Date.now() - request.at > 1000) return;
+    var slot = collapsed ? expandSlot.current : collapseSlot.current;
+    (_a = slot === null || slot === void 0 ? void 0 : slot.querySelector('button')) === null || _a === void 0 ? void 0 : _a.focus();
+  }, [collapsed]);
   var hide = function hide() {
     return setHighlight(function (state) {
       return __assign(__assign({}, state), {
@@ -130,9 +206,9 @@ var SidebarNav = function SidebarNav(_a) {
   };
   // Collapsing or expanding moves every row, so the highlight's box is stale: hide it until the
   // pointer or focus finds a row again (adjusted during render, React's pattern for a prop change)
-  var _g = useState(collapsed),
-    layout = _g[0],
-    setLayout = _g[1];
+  var _h = useState(collapsed),
+    layout = _h[0],
+    setLayout = _h[1];
   if (layout !== collapsed) {
     setLayout(collapsed);
     setHighlight(function (state) {
@@ -169,32 +245,64 @@ var SidebarNav = function SidebarNav(_a) {
     glide: true,
     inNav: true
   };
-  var toggleLabel = collapsed ? 'Expand sidebar' : 'Collapse sidebar';
-  var toggleButton = collapsible && jsx(Tooltip, {
-    text: toggleLabel,
-    side: collapsed ? 'right' : 'bottom',
-    children: jsx(IconButton, {
-      variant: "naked",
-      size: "small",
-      iconName: "sidebar",
-      "aria-label": toggleLabel,
-      "aria-expanded": !collapsed,
-      onClick: toggle
-    })
+  // The header content keeps its expanded layout: it fades out in the rail rather than turning into
+  // a rail version of itself mid-move
+  var headerContext = __assign(__assign({}, context), {
+    collapsed: false
   });
   return jsx(SidebarNavContext.Provider, {
     value: context,
     children: jsxs(Nav, {
+      ref: navRef,
       "aria-label": label,
       "$width": collapsed ? widths.rail : widths[width],
       "data-collapsed": collapsed || undefined,
       "data-testid": dataTestId,
-      children: [(header || toggleButton) && jsxs(Header, {
-        "$collapsed": collapsed,
+      style: (_b = {}, _b[EXPANDED_WIDTH_VAR] = widths[width], _b),
+      children: [(header || collapsible) && jsxs(Header, {
         children: [header && jsx(HeaderContent, {
-          children: header
-        }), toggleButton]
+          "$hidden": collapsed,
+          children: jsx("div", {
+            children: jsx(SidebarNavContext.Provider, {
+              value: headerContext,
+              children: header
+            })
+          })
+        }), collapsible && jsxs(Fragment, {
+          children: [jsx(CollapseSlot, {
+            ref: collapseSlot,
+            "$hidden": collapsed,
+            children: jsx(Tooltip, {
+              text: "Collapse sidebar",
+              side: "bottom",
+              children: jsx(IconButton, {
+                variant: "naked",
+                size: "small",
+                iconName: "sidebar",
+                "aria-label": "Collapse sidebar",
+                "aria-expanded": true,
+                onClick: toggle
+              })
+            })
+          }), jsx(ExpandSlot, {
+            ref: expandSlot,
+            "$hidden": !collapsed,
+            children: jsx(Tooltip, {
+              text: "Expand sidebar",
+              side: "right",
+              children: jsx(IconButton, {
+                variant: "naked",
+                size: "small",
+                iconName: "sidebar",
+                "aria-label": "Expand sidebar",
+                "aria-expanded": false,
+                onClick: toggle
+              })
+            })
+          })]
+        })]
       }), jsx(Body, {
+        ref: bodyRef,
         children: jsxs(Content, {
           ref: contentRef,
           onPointerOver: function onPointerOver(event) {
@@ -222,14 +330,17 @@ var SidebarNav = function SidebarNav(_a) {
             children: children
           })]
         })
-      }), footer && !collapsed && jsx(Footer, {
-        children: footer
+      }), footer && jsx(Footer, {
+        "$hidden": collapsed,
+        children: jsx("div", {
+          children: footer
+        })
       })]
     })
   });
 };
 SidebarNav.displayName = 'SidebarNav';
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
 
 export { SidebarNav };
 //# sourceMappingURL=SidebarNav.mjs.map