@portnet/ui 6.0.0 → 6.0.2

package/dist/esm/v2/components/Drawer.js

@@ -0,0 +1,333 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import * as React from "react";
+import MuiDrawer from "@mui/material/Drawer";
+import IconButton from "@mui/material/IconButton";
+import CloseIcon from "@mui/icons-material/Close";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { layout, zIndex } from "../tokens";
+import useFocusTrap from "../hooks/useFocusTrap";
+import { mergeLabels } from "../utils/mergeLabels";
+
+/**
+ * Drawer - Portnet UI v2
+ *
+ * Charter §03 · Component "Drawer". Detail panel without leaving the list.
+ *
+ *   R-DG.9 - Action de ligne = drawer/popup (pas full-page sauf édition).
+ *   R-M.1  - Esc ferme.
+ *   R-F.2  - Focus trap, restoration au déclencheur. Backed by the v2
+ *            useFocusTrap hook (Batch 3) - honours [autofocus] and
+ *            [data-autofocus] markers, coordinates with nested traps
+ *            via a module-level trapStack, and filters
+ *            disabled/hidden/inert subtrees.
+ *   R-K.2  - J/K/Arrow nav must NOT fire when an editable element has focus.
+ *   R-Ar.5 - aria-labelledby points at the rendered <h2> title so the
+ *            drawer is properly named to AT regardless of whether the
+ *            title is a string or a JSX node (audit Batch 5 / B5-1). When
+ *            no title is provided, pass `ariaLabel` to name the drawer.
+ *   J / K  ou ↑ / ↓ → navigation entre items voisins.
+ *
+ * ── ITEM NAVIGATION IS OPT-IN (D-A10.2) ──────────────────────────────
+ *
+ * The prev/next cluster and its "J / K" hint render ONLY when `onPrev` or
+ * `onNext` is supplied. This component serves two distinct jobs: item
+ * preview, which navigates, and the charter's collapsible filter panel,
+ * which does not. Rendering the cluster unconditionally gave every filter
+ * drawer two permanently disabled buttons and a keyboard hint for a
+ * shortcut with no effect — Guidance / Nielsen #8. A control that can
+ * never become enabled is not a disabled control, it is noise.
+ *
+ * Preview callers pass both handlers and see no change.
+ *
+ * Stacking:
+ *   The drawer's portal layer uses the v2 `zIndex.drawer` token (80),
+ *   so it sits above sticky page chrome (sticky/topbar/overflow/
+ *   popover, all <= 60) and BELOW `modal` (100), `snackbar` (150),
+ *   `toast` (200) and `tooltip` (250). Sitting below the modal layer
+ *   is deliberate and load-bearing: MUI popups opened from INSIDE the
+ *   drawer (Combobox/Autocomplete listboxes and the X date-picker
+ *   calendars, which render at theme.zIndex.modal) and any nested
+ *   ConfirmDialog/Modal must stack ABOVE the drawer, not behind it.
+ *   (A previous build hardcoded 1300 here — a leftover from MUI's
+ *   default 1100..1500 scale before the v2 remap to 0..250 — which
+ *   buried those popups at 100 behind the drawer and made them look
+ *   unresponsive.)
+ *
+ * Multi-drawer assumption:
+ *   The J/K listener is attached to `window`; multiple simultaneously-
+ *   open drawers would all receive the keypress and call their own
+ *   onPrev/onNext. Product convention is ONE drawer at a time.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_LABELS = Object.freeze({
+  prev: "Précédent",
+  next: "Suivant",
+  close: "Fermer (Échap)"
+});
+var DRAWER_ROOT_SX = Object.freeze({
+  // v2 z-index token (zIndex.js). drawer:80 sits above sticky page
+  // chrome (<=60) and BELOW modal:100, so MUI popups opened from
+  // inside the drawer (Combobox/Autocomplete listboxes, X date-picker
+  // calendars — all rendered at theme.zIndex.modal) stack ABOVE it.
+  // The previous hardcoded 1300 predated the v2 remap of MUI's
+  // 1100..1500 scale down to 0..250 and left those popups (at 100)
+  // buried behind the drawer (at 1300) — clicking them "did nothing".
+  zIndex: zIndex.drawer
+});
+var HEADER_STICKY_SX = Object.freeze({
+  padding: "var(--s-4) var(--s-5)",
+  borderBottom: "1px solid var(--border)",
+  position: "sticky",
+  top: 0,
+  background: "var(--surface)",
+  // Drawer header sits ABOVE the drawer body content. The drawer
+  // already establishes its own stacking context via the root
+  // z-index, so this only competes within the drawer locally.
+  zIndex: 1
+});
+
+/*
+ * Right-hand cluster (caller actions + close).
+ *
+ * marginInlineStart:"auto" pins it to the inline end REGARDLESS of whether
+ * the navigation cluster is rendered. The row is space-between, so without
+ * this the close button would slide to flex-start on a filter drawer, which
+ * is where the nav cluster used to sit. Logical property so it holds in RTL
+ * — the header already uses marginInlineStart for the J/K hint.
+ */
+var HEADER_ACTIONS_SX = Object.freeze({
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--s-1)",
+  marginInlineStart: "auto"
+});
+function isEditableTarget(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  var tag = target.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  if (target.isContentEditable) return true;
+  return false;
+}
+function innerCornerSx(anchor) {
+  if (anchor === "right") {
+    return {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0
+    };
+  }
+  if (anchor === "left") {
+    return {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
+    };
+  }
+  return {};
+}
+function Drawer(_ref) {
+  var open = _ref.open,
+    onClose = _ref.onClose,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? layout.drawer : _ref$width,
+    title = _ref.title,
+    subtitle = _ref.subtitle,
+    ariaLabel = _ref.ariaLabel,
+    status = _ref.status,
+    actions = _ref.actions,
+    onPrev = _ref.onPrev,
+    onNext = _ref.onNext,
+    _ref$hasPrev = _ref.hasPrev,
+    hasPrev = _ref$hasPrev === void 0 ? false : _ref$hasPrev,
+    _ref$hasNext = _ref.hasNext,
+    hasNext = _ref$hasNext === void 0 ? false : _ref$hasNext,
+    children = _ref.children,
+    _ref$anchor = _ref.anchor,
+    anchor = _ref$anchor === void 0 ? "right" : _ref$anchor,
+    labels = _ref.labels;
+  var L = mergeLabels(DEFAULT_LABELS, labels);
+
+  /*
+   * D-A10.2 — does this drawer navigate between items at all?
+   *
+   * Presence of a HANDLER, not of hasPrev/hasNext. A preview drawer sitting
+   * on a single-row result set has both flags false and must still show the
+   * cluster disabled, because navigation is part of what that drawer is. A
+   * filter panel supplies no handler and has no such affordance to disable.
+   */
+  var hasItemNavigation = onPrev !== undefined || onNext !== undefined;
+
+  // R-Ar.5 - stable, per-instance, collision-safe id for aria-labelledby.
+  // Points at the <h2> Typography that already renders {title}. Resolves
+  // through the DOM regardless of whether `title` is a string or JSX —
+  // aria-labelledby reads the rendered text content. Replaces the previous
+  // `aria-label={typeof title === "string" ? title : undefined}` which
+  // left JSX-titled drawers unlabelled (B5-1).
+  var titleId = React.useId();
+  var paperRef = React.useRef(null);
+  useFocusTrap(paperRef, !!open);
+
+  /*
+   * Escape must close EVERY drawer, so this effect binds whether or not item
+   * navigation is wired. The J/K branches are already gated on
+   * hasNext/hasPrev, which a filter panel leaves false, so they are inert
+   * there rather than needing their own guard.
+   */
+  React.useEffect(function () {
+    if (!open) return undefined;
+    var handler = function handler(e) {
+      if (e.key === "Escape") {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+        return;
+      }
+      if (isEditableTarget(e.target)) return;
+      if ((e.key === "j" || e.key === "ArrowDown") && hasNext) {
+        e.preventDefault();
+        onNext === null || onNext === void 0 ? void 0 : onNext();
+      } else if ((e.key === "k" || e.key === "ArrowUp") && hasPrev) {
+        e.preventDefault();
+        onPrev === null || onPrev === void 0 ? void 0 : onPrev();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return function () {
+      return window.removeEventListener("keydown", handler);
+    };
+  }, [open, onClose, onNext, onPrev, hasNext, hasPrev]);
+
+  // MUI v9: paper slot forwarded through slotProps.paper. Wired with a
+  // useMemo so the ref + sx bag keeps reference stability across renders
+  // where `width` and `anchor` don't change.
+  var slotProps = React.useMemo(function () {
+    return {
+      paper: {
+        ref: paperRef,
+        sx: _objectSpread(_objectSpread({
+          width: width,
+          maxWidth: "100vw"
+        }, innerCornerSx(anchor)), {}, {
+          backgroundColor: "var(--surface)",
+          boxShadow: "var(--shadow-lg)"
+        })
+      }
+    };
+  }, [width, anchor]);
+  return /*#__PURE__*/_jsxs(MuiDrawer, {
+    anchor: anchor,
+    open: !!open,
+    onClose: onClose,
+    role: "dialog",
+    "aria-modal": "true"
+    // Name = the <h2> title text (via titleId). Falls back to ariaLabel
+    // when the drawer is rendered without a title.
+    ,
+    "aria-labelledby": title != null ? titleId : undefined,
+    "aria-label": title == null ? ariaLabel : undefined,
+    disableAutoFocus: true,
+    disableEnforceFocus: true,
+    disableRestoreFocus: true
+    // Root sx anchors the whole drawer (including its portal-level
+    // container) at the v2 zIndex.drawer token — see DRAWER_ROOT_SX.
+    ,
+    sx: DRAWER_ROOT_SX,
+    slotProps: slotProps,
+    children: [/*#__PURE__*/_jsxs(Box, {
+      sx: HEADER_STICKY_SX,
+      children: [/*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: "var(--s-2)"
+        },
+        children: [hasItemNavigation && /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: "var(--s-1)"
+          },
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            size: "small",
+            onClick: onPrev,
+            disabled: !hasPrev,
+            "aria-label": L.prev,
+            sx: {
+              color: "var(--fg-muted)"
+            },
+            children: /*#__PURE__*/_jsx(KeyboardArrowUpIcon, {
+              fontSize: "small"
+            })
+          }), /*#__PURE__*/_jsx(IconButton, {
+            size: "small",
+            onClick: onNext,
+            disabled: !hasNext,
+            "aria-label": L.next,
+            sx: {
+              color: "var(--fg-muted)"
+            },
+            children: /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {
+              fontSize: "small"
+            })
+          }), /*#__PURE__*/_jsx(Typography, {
+            sx: {
+              fontSize: "var(--text-xs)",
+              color: "var(--fg-subtle)",
+              marginInlineStart: "var(--s-1)"
+            },
+            children: "J / K"
+          })]
+        }), /*#__PURE__*/_jsxs(Box, {
+          sx: HEADER_ACTIONS_SX,
+          children: [actions, /*#__PURE__*/_jsx(IconButton, {
+            size: "small",
+            onClick: onClose,
+            "aria-label": L.close,
+            sx: {
+              color: "var(--fg-muted)"
+            },
+            children: /*#__PURE__*/_jsx(CloseIcon, {
+              fontSize: "small"
+            })
+          })]
+        })]
+      }), status && /*#__PURE__*/_jsx(Box, {
+        sx: {
+          marginBottom: "var(--s-2)"
+        },
+        children: status
+      }), /*#__PURE__*/_jsx(Typography, {
+        id: titleId,
+        component: "h2",
+        sx: {
+          fontSize: "var(--text-h3)",
+          fontWeight: "var(--fw-bold)",
+          color: "var(--fg)",
+          lineHeight: "var(--lh-snug)"
+        },
+        children: title
+      }), subtitle && /*#__PURE__*/_jsx(Typography, {
+        sx: {
+          fontSize: "var(--text-sm)",
+          color: "var(--fg-muted)",
+          marginTop: "var(--s-1)"
+        },
+        children: subtitle
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        padding: "var(--s-4) var(--s-5)",
+        overflowY: "auto",
+        flex: 1
+      },
+      children: children
+    })]
+  });
+}
+export default Drawer;
+//# sourceMappingURL=Drawer.js.map

package/dist/esm/v2/components/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","names":["React","MuiDrawer","IconButton","CloseIcon","KeyboardArrowUpIcon","KeyboardArrowDownIcon","Box","Typography","layout","zIndex","useFocusTrap","mergeLabels","jsx","_jsx","jsxs","_jsxs","DEFAULT_LABELS","Object","freeze","prev","next","close","DRAWER_ROOT_SX","drawer","HEADER_STICKY_SX","padding","borderBottom","position","top","background","HEADER_ACTIONS_SX","display","alignItems","gap","marginInlineStart","isEditableTarget","target","HTMLElement","tag","tagName","isContentEditable","innerCornerSx","anchor","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","borderBottomRightRadius","Drawer","_ref","open","onClose","_ref$width","width","title","subtitle","ariaLabel","status","actions","onPrev","onNext","_ref$hasPrev","hasPrev","_ref$hasNext","hasNext","children","_ref$anchor","labels","L","hasItemNavigation","undefined","titleId","useId","paperRef","useRef","useEffect","handler","e","key","preventDefault","window","addEventListener","removeEventListener","slotProps","useMemo","paper","ref","sx","_objectSpread","maxWidth","backgroundColor","boxShadow","role","disableAutoFocus","disableEnforceFocus","disableRestoreFocus","justifyContent","marginBottom","size","onClick","disabled","color","fontSize","id","component","fontWeight","lineHeight","marginTop","overflowY","flex"],"sources":["../../../../src/lib/v2/components/Drawer.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport MuiDrawer from \"@mui/material/Drawer\";\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport CloseIcon from \"@mui/icons-material/Close\";\r\nimport KeyboardArrowUpIcon from \"@mui/icons-material/KeyboardArrowUp\";\r\nimport KeyboardArrowDownIcon from \"@mui/icons-material/KeyboardArrowDown\";\r\nimport Box from \"@mui/material/Box\";\r\nimport Typography from \"@mui/material/Typography\";\r\nimport type { SxProps, Theme } from \"@mui/material/styles\";\r\nimport { layout, zIndex } from \"../tokens\";\r\nimport useFocusTrap from \"../hooks/useFocusTrap\";\r\nimport { mergeLabels } from \"../utils/mergeLabels\";\r\n\r\n/**\r\n * Drawer - Portnet UI v2\r\n *\r\n * Charter §03 · Component \"Drawer\". Detail panel without leaving the list.\r\n *\r\n *   R-DG.9 - Action de ligne = drawer/popup (pas full-page sauf édition).\r\n *   R-M.1  - Esc ferme.\r\n *   R-F.2  - Focus trap, restoration au déclencheur. Backed by the v2\r\n *            useFocusTrap hook (Batch 3) - honours [autofocus] and\r\n *            [data-autofocus] markers, coordinates with nested traps\r\n *            via a module-level trapStack, and filters\r\n *            disabled/hidden/inert subtrees.\r\n *   R-K.2  - J/K/Arrow nav must NOT fire when an editable element has focus.\r\n *   R-Ar.5 - aria-labelledby points at the rendered <h2> title so the\r\n *            drawer is properly named to AT regardless of whether the\r\n *            title is a string or a JSX node (audit Batch 5 / B5-1). When\r\n *            no title is provided, pass `ariaLabel` to name the drawer.\r\n *   J / K  ou ↑ / ↓ → navigation entre items voisins.\r\n *\r\n * ── ITEM NAVIGATION IS OPT-IN (D-A10.2) ──────────────────────────────\r\n *\r\n * The prev/next cluster and its \"J / K\" hint render ONLY when `onPrev` or\r\n * `onNext` is supplied. This component serves two distinct jobs: item\r\n * preview, which navigates, and the charter's collapsible filter panel,\r\n * which does not. Rendering the cluster unconditionally gave every filter\r\n * drawer two permanently disabled buttons and a keyboard hint for a\r\n * shortcut with no effect — Guidance / Nielsen #8. A control that can\r\n * never become enabled is not a disabled control, it is noise.\r\n *\r\n * Preview callers pass both handlers and see no change.\r\n *\r\n * Stacking:\r\n *   The drawer's portal layer uses the v2 `zIndex.drawer` token (80),\r\n *   so it sits above sticky page chrome (sticky/topbar/overflow/\r\n *   popover, all <= 60) and BELOW `modal` (100), `snackbar` (150),\r\n *   `toast` (200) and `tooltip` (250). Sitting below the modal layer\r\n *   is deliberate and load-bearing: MUI popups opened from INSIDE the\r\n *   drawer (Combobox/Autocomplete listboxes and the X date-picker\r\n *   calendars, which render at theme.zIndex.modal) and any nested\r\n *   ConfirmDialog/Modal must stack ABOVE the drawer, not behind it.\r\n *   (A previous build hardcoded 1300 here — a leftover from MUI's\r\n *   default 1100..1500 scale before the v2 remap to 0..250 — which\r\n *   buried those popups at 100 behind the drawer and made them look\r\n *   unresponsive.)\r\n *\r\n * Multi-drawer assumption:\r\n *   The J/K listener is attached to `window`; multiple simultaneously-\r\n *   open drawers would all receive the keypress and call their own\r\n *   onPrev/onNext. Product convention is ONE drawer at a time.\r\n */\r\n\r\nconst DEFAULT_LABELS = Object.freeze({\r\n  prev:  \"Précédent\",\r\n  next:  \"Suivant\",\r\n  close: \"Fermer (Échap)\",\r\n});\r\n\r\nconst DRAWER_ROOT_SX = Object.freeze({\r\n  // v2 z-index token (zIndex.js). drawer:80 sits above sticky page\r\n  // chrome (<=60) and BELOW modal:100, so MUI popups opened from\r\n  // inside the drawer (Combobox/Autocomplete listboxes, X date-picker\r\n  // calendars — all rendered at theme.zIndex.modal) stack ABOVE it.\r\n  // The previous hardcoded 1300 predated the v2 remap of MUI's\r\n  // 1100..1500 scale down to 0..250 and left those popups (at 100)\r\n  // buried behind the drawer (at 1300) — clicking them \"did nothing\".\r\n  zIndex: zIndex.drawer,\r\n});\r\n\r\nconst HEADER_STICKY_SX = Object.freeze({\r\n  padding: \"var(--s-4) var(--s-5)\",\r\n  borderBottom: \"1px solid var(--border)\",\r\n  position: \"sticky\",\r\n  top: 0,\r\n  background: \"var(--surface)\",\r\n  // Drawer header sits ABOVE the drawer body content. The drawer\r\n  // already establishes its own stacking context via the root\r\n  // z-index, so this only competes within the drawer locally.\r\n  zIndex: 1,\r\n} satisfies SxProps<Theme>);\r\n\r\n/*\r\n * Right-hand cluster (caller actions + close).\r\n *\r\n * marginInlineStart:\"auto\" pins it to the inline end REGARDLESS of whether\r\n * the navigation cluster is rendered. The row is space-between, so without\r\n * this the close button would slide to flex-start on a filter drawer, which\r\n * is where the nav cluster used to sit. Logical property so it holds in RTL\r\n * — the header already uses marginInlineStart for the J/K hint.\r\n */\r\nconst HEADER_ACTIONS_SX = Object.freeze({\r\n  display: \"flex\",\r\n  alignItems: \"center\",\r\n  gap: \"var(--s-1)\",\r\n  marginInlineStart: \"auto\",\r\n} satisfies SxProps<Theme>);\r\n\r\nfunction isEditableTarget(target: EventTarget | null): boolean {\r\n  if (!(target instanceof HTMLElement)) return false;\r\n  const tag = target.tagName;\r\n  if (tag === \"INPUT\" || tag === \"TEXTAREA\" || tag === \"SELECT\") return true;\r\n  if (target.isContentEditable) return true;\r\n  return false;\r\n}\r\n\r\nfunction innerCornerSx(anchor: DrawerAnchor) {\r\n  if (anchor === \"right\") {\r\n    return { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 };\r\n  }\r\n  if (anchor === \"left\") {\r\n    return { borderTopRightRadius: 0, borderBottomRightRadius: 0 };\r\n  }\r\n  return {};\r\n}\r\n\r\nexport type DrawerAnchor = \"left\" | \"right\" | \"top\" | \"bottom\";\r\n\r\nexport interface DrawerLabels {\r\n  prev?: string | undefined;\r\n  next?: string | undefined;\r\n  close?: string | undefined;\r\n}\r\n\r\nexport interface DrawerProps {\r\n  open?: boolean | undefined;\r\n  onClose?: (() => void) | undefined;\r\n  width?: number | string | undefined;\r\n  title?: React.ReactNode | undefined;\r\n  subtitle?: React.ReactNode | undefined;\r\n  /** Accessible name for the drawer when no `title` is rendered (R-Ar.5). */\r\n  ariaLabel?: string | undefined;\r\n  status?: React.ReactNode | undefined;\r\n  actions?: React.ReactNode | undefined;\r\n  /**\r\n   * Step to the previous item. Supplying either this or `onNext` is what\r\n   * renders the navigation cluster at all — see the opt-in note in the\r\n   * module docstring. Omit both on a filter panel.\r\n   */\r\n  onPrev?: (() => void) | undefined;\r\n  /** Step to the next item. See `onPrev`. */\r\n  onNext?: (() => void) | undefined;\r\n  hasPrev?: boolean | undefined;\r\n  hasNext?: boolean | undefined;\r\n  children?: React.ReactNode | undefined;\r\n  anchor?: DrawerAnchor | undefined;\r\n  labels?: DrawerLabels | undefined;\r\n}\r\n\r\nfunction Drawer({\r\n  open,\r\n  onClose,\r\n  width = layout.drawer,\r\n  title,\r\n  subtitle,\r\n  ariaLabel,\r\n  status,\r\n  actions,\r\n  onPrev,\r\n  onNext,\r\n  hasPrev = false,\r\n  hasNext = false,\r\n  children,\r\n  anchor = \"right\",\r\n  labels,\r\n}: DrawerProps) {\r\n  const L = mergeLabels(DEFAULT_LABELS, labels);\r\n\r\n  /*\r\n   * D-A10.2 — does this drawer navigate between items at all?\r\n   *\r\n   * Presence of a HANDLER, not of hasPrev/hasNext. A preview drawer sitting\r\n   * on a single-row result set has both flags false and must still show the\r\n   * cluster disabled, because navigation is part of what that drawer is. A\r\n   * filter panel supplies no handler and has no such affordance to disable.\r\n   */\r\n  const hasItemNavigation = onPrev !== undefined || onNext !== undefined;\r\n\r\n  // R-Ar.5 - stable, per-instance, collision-safe id for aria-labelledby.\r\n  // Points at the <h2> Typography that already renders {title}. Resolves\r\n  // through the DOM regardless of whether `title` is a string or JSX —\r\n  // aria-labelledby reads the rendered text content. Replaces the previous\r\n  // `aria-label={typeof title === \"string\" ? title : undefined}` which\r\n  // left JSX-titled drawers unlabelled (B5-1).\r\n  const titleId = React.useId();\r\n\r\n  const paperRef = React.useRef<HTMLDivElement>(null);\r\n  useFocusTrap(paperRef, !!open);\r\n\r\n  /*\r\n   * Escape must close EVERY drawer, so this effect binds whether or not item\r\n   * navigation is wired. The J/K branches are already gated on\r\n   * hasNext/hasPrev, which a filter panel leaves false, so they are inert\r\n   * there rather than needing their own guard.\r\n   */\r\n  React.useEffect(() => {\r\n    if (!open) return undefined;\r\n    const handler = (e: KeyboardEvent) => {\r\n      if (e.key === \"Escape\") { onClose?.(); return; }\r\n      if (isEditableTarget(e.target)) return;\r\n      if ((e.key === \"j\" || e.key === \"ArrowDown\") && hasNext) {\r\n        e.preventDefault(); onNext?.();\r\n      } else if ((e.key === \"k\" || e.key === \"ArrowUp\") && hasPrev) {\r\n        e.preventDefault(); onPrev?.();\r\n      }\r\n    };\r\n    window.addEventListener(\"keydown\", handler);\r\n    return () => window.removeEventListener(\"keydown\", handler);\r\n  }, [open, onClose, onNext, onPrev, hasNext, hasPrev]);\r\n\r\n  // MUI v9: paper slot forwarded through slotProps.paper. Wired with a\r\n  // useMemo so the ref + sx bag keeps reference stability across renders\r\n  // where `width` and `anchor` don't change.\r\n  const slotProps = React.useMemo(\r\n    () => ({\r\n      paper: {\r\n        ref: paperRef,\r\n        sx: {\r\n          width,\r\n          maxWidth: \"100vw\",\r\n          ...innerCornerSx(anchor),\r\n          backgroundColor: \"var(--surface)\",\r\n          boxShadow: \"var(--shadow-lg)\",\r\n        },\r\n      },\r\n    }),\r\n    [width, anchor]\r\n  );\r\n\r\n  return (\r\n    <MuiDrawer\r\n      anchor={anchor}\r\n      open={!!open}\r\n      onClose={onClose}\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      // Name = the <h2> title text (via titleId). Falls back to ariaLabel\r\n      // when the drawer is rendered without a title.\r\n      aria-labelledby={title != null ? titleId : undefined}\r\n      aria-label={title == null ? ariaLabel : undefined}\r\n      disableAutoFocus\r\n      disableEnforceFocus\r\n      disableRestoreFocus\r\n      // Root sx anchors the whole drawer (including its portal-level\r\n      // container) at the v2 zIndex.drawer token — see DRAWER_ROOT_SX.\r\n      sx={DRAWER_ROOT_SX}\r\n      slotProps={slotProps}\r\n    >\r\n      <Box sx={HEADER_STICKY_SX}>\r\n        <Box sx={{ display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\", marginBottom: \"var(--s-2)\" }}>\r\n          {/*\r\n            Navigation cluster — opt-in (D-A10.2). Rendered only when the\r\n            caller wired onPrev or onNext, so a filter panel does not carry\r\n            two permanently disabled buttons and a J/K hint for a shortcut\r\n            that cannot fire.\r\n          */}\r\n          {hasItemNavigation && (\r\n            <Box sx={{ display: \"flex\", alignItems: \"center\", gap: \"var(--s-1)\" }}>\r\n              <IconButton\r\n                size=\"small\"\r\n                onClick={onPrev}\r\n                disabled={!hasPrev}\r\n                aria-label={L.prev}\r\n                sx={{ color: \"var(--fg-muted)\" }}\r\n              >\r\n                <KeyboardArrowUpIcon fontSize=\"small\" />\r\n              </IconButton>\r\n              <IconButton\r\n                size=\"small\"\r\n                onClick={onNext}\r\n                disabled={!hasNext}\r\n                aria-label={L.next}\r\n                sx={{ color: \"var(--fg-muted)\" }}\r\n              >\r\n                <KeyboardArrowDownIcon fontSize=\"small\" />\r\n              </IconButton>\r\n              <Typography\r\n                sx={{\r\n                  fontSize: \"var(--text-xs)\",\r\n                  color: \"var(--fg-subtle)\",\r\n                  marginInlineStart: \"var(--s-1)\",\r\n                }}\r\n              >\r\n                J / K\r\n              </Typography>\r\n            </Box>\r\n          )}\r\n          {/* marginInlineStart:auto keeps close pinned to the inline end\r\n              whether or not the cluster above rendered — see\r\n              HEADER_ACTIONS_SX. */}\r\n          <Box sx={HEADER_ACTIONS_SX}>\r\n            {actions}\r\n            <IconButton\r\n              size=\"small\"\r\n              onClick={onClose}\r\n              aria-label={L.close}\r\n              sx={{ color: \"var(--fg-muted)\" }}\r\n            >\r\n              <CloseIcon fontSize=\"small\" />\r\n            </IconButton>\r\n          </Box>\r\n        </Box>\r\n        {status && <Box sx={{ marginBottom: \"var(--s-2)\" }}>{status}</Box>}\r\n        <Typography\r\n          id={titleId}\r\n          component=\"h2\"\r\n          sx={{ fontSize: \"var(--text-h3)\", fontWeight: \"var(--fw-bold)\", color: \"var(--fg)\", lineHeight: \"var(--lh-snug)\" }}\r\n        >\r\n          {title}\r\n        </Typography>\r\n        {subtitle && (\r\n          <Typography sx={{ fontSize: \"var(--text-sm)\", color: \"var(--fg-muted)\", marginTop: \"var(--s-1)\" }}>\r\n            {subtitle}\r\n          </Typography>\r\n        )}\r\n      </Box>\r\n\r\n      <Box sx={{ padding: \"var(--s-4) var(--s-5)\", overflowY: \"auto\", flex: 1 }}>\r\n        {children}\r\n      </Box>\r\n    </MuiDrawer>\r\n  );\r\n}\r\n\r\nexport default Drawer;\r\n"],"mappings":"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","ignoreList":[]}