@common-origin/design-system 3.0.0 → 3.2.0

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

@@ -0,0 +1,346 @@
+'use client';
+import { __makeTemplateObject, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+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, 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,
+  color = semantic.color,
+  size = semantic.size;
+var widths = component.sidebarNav.width;
+var Nav = /*#__PURE__*/styled.nav.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  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 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], 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({
+  displayName: "SidebarNav__Header",
+  componentId: "sc-1as46tp-1"
+})(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_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-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-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-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.
+var Highlight = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SidebarNav__Highlight",
+  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-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,
+    _c = _a.width,
+    width = _c === void 0 ? 'default' : _c,
+    collapsedProp = _a.collapsed,
+    _d = _a.defaultCollapsed,
+    defaultCollapsed = _d === void 0 ? false : _d,
+    onCollapsedChange = _a.onCollapsedChange,
+    _e = _a.collapsible,
+    collapsible = _e === void 0 ? true : _e,
+    linkComponent = _a.linkComponent,
+    dataTestId = _a["data-testid"];
+  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 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 = _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), {
+        visible: false
+      });
+    });
+  };
+  // 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 _h = useState(collapsed),
+    layout = _h[0],
+    setLayout = _h[1];
+  if (layout !== collapsed) {
+    setLayout(collapsed);
+    setHighlight(function (state) {
+      return __assign(__assign({}, state), {
+        visible: false,
+        instant: true
+      });
+    });
+  }
+  // Move the highlight to a row, or step aside for the current page's row, which has its own fill
+  var highlightRow = function highlightRow(target) {
+    var content = contentRef.current;
+    var row = target instanceof Element ? target.closest('[data-sidebar-row]') : null;
+    if (!content || !row || !content.contains(row) || row.getAttribute('aria-current') === 'page') return hide();
+    var outer = content.getBoundingClientRect();
+    var box = row.getBoundingClientRect();
+    setHighlight(function (state) {
+      return {
+        box: {
+          top: box.top - outer.top,
+          left: box.left - outer.left,
+          width: box.width,
+          height: box.height
+        },
+        visible: true,
+        // Appearing, it starts at the row rather than sliding from where it last was
+        instant: !state.visible
+      };
+    });
+  };
+  var context = {
+    collapsed: collapsed,
+    linkComponent: linkComponent,
+    glide: true,
+    inNav: true
+  };
+  // 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,
+      style: (_b = {}, _b[EXPANDED_WIDTH_VAR] = widths[width], _b),
+      children: [(header || collapsible) && jsxs(Header, {
+        children: [header && jsx(HeaderContent, {
+          "$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) {
+            return event.pointerType !== 'touch' && highlightRow(event.target);
+          },
+          onPointerLeave: hide,
+          onFocus: function onFocus(event) {
+            return isKeyboardFocus(event.target) && highlightRow(event.target);
+          },
+          onBlur: function onBlur(event) {
+            var _a;
+            if (!((_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget))) hide();
+          },
+          children: [jsx(Highlight, {
+            "aria-hidden": "true",
+            "data-sidebar-highlight": "",
+            "$visible": highlight.visible,
+            "$instant": highlight.instant,
+            style: highlight.box ? {
+              transform: "translate(".concat(highlight.box.left, "px, ").concat(highlight.box.top, "px)"),
+              width: highlight.box.width,
+              height: highlight.box.height
+            } : undefined
+          }), jsx(List, {
+            children: children
+          })]
+        })
+      }), 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, templateObject_10;
+
+export { SidebarNav };
+//# sourceMappingURL=SidebarNav.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNav.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/organisms/SidebarNav/index.d.mts

@@ -0,0 +1,2 @@
+export { SidebarNav } from './SidebarNav.mjs';
+export type { SidebarNavProps, SidebarNavWidth } from './SidebarNav.mjs';

package/dist/components/organisms/SidebarNav/index.d.ts

@@ -0,0 +1,2 @@
+export { SidebarNav } from './SidebarNav';
+export type { SidebarNavProps, SidebarNavWidth } from './SidebarNav';

package/dist/components/organisms/index.d.mts

@@ -0,0 +1 @@
+export * from './SidebarNav/index.mjs';

package/dist/components/organisms/index.d.ts

@@ -0,0 +1 @@
+export * from './SidebarNav';