@portnet/ui 6.0.1 → 6.0.3

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

@@ -1 +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":[]}
+{"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","HEADER_ICON_BUTTON_SX","color","minWidth","tactileMin","minHeight","isEditableTarget","target","HTMLElement","tag","tagName","isContentEditable","innerCornerSx","anchor","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","borderBottomRightRadius","Drawer","open","onClose","width","title","subtitle","ariaLabel","status","actions","onPrev","onNext","hasPrev","hasNext","children","labels","L","hasItemNavigation","undefined","titleId","useId","paperRef","useRef","useEffect","handler","e","key","preventDefault","window","addEventListener","removeEventListener","slotProps","useMemo","paper","ref","sx","maxWidth","backgroundColor","boxShadow","role","disableAutoFocus","disableEnforceFocus","disableRestoreFocus","justifyContent","marginBottom","size","onClick","disabled","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\n/**\r\n * Cible tactile des boutons d'icône de l'en-tête (R-7.4 / WCAG 2.5.5).\r\n *\r\n * Le docblock de `tokens/density` énonce la règle sans ambiguïté : « Icon-only\r\n * buttons MUST set min-width/min-height to `tactileMin` », parce que la hauteur\r\n * VISUELLE d'un bouton peut descendre sous 44 px dans les paliers de densité\r\n * serrés sans que la zone d'appui le puisse. Les trois boutons de cet en-tête\r\n * — précédent, suivant, fermer — étaient des `IconButton size=\"small\"` sans\r\n * plancher : environ 34 px, soit dix de moins que le minimum que ce même socle\r\n * impose à ses hôtes.\r\n *\r\n * L'écart est resté invisible tant que la navigation entre items était peu\r\n * câblée : un tiroir de filtres ne rend que le bouton de fermeture. Un module\r\n * qui équipe ses aperçus de `onPrev`/`onNext` en expose trois par tiroir.\r\n *\r\n * `min*` et non `width`/`height` : la zone d'appui grandit, le dessin de\r\n * l'icône ne change pas — c'est exactement la distinction que fait la note de\r\n * `tokens/density`.\r\n */\r\nconst HEADER_ICON_BUTTON_SX = Object.freeze({\r\n  color: \"var(--fg-muted)\",\r\n  minWidth: layout.tactileMin,\r\n  minHeight: layout.tactileMin,\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={HEADER_ICON_BUTTON_SX}\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={HEADER_ICON_BUTTON_SX}\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={HEADER_ICON_BUTTON_SX}\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":[]}

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

@@ -1,16 +1,3 @@
-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); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 import * as React from "react";
 import { mergeLabels } from "../utils/mergeLabels";
 import Box from "@mui/material/Box";
@@ -94,11 +81,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 
 function defaultFormatBytes(n) {
   if (!Number.isFinite(n)) return "—";
-  if (n < 1024) return "".concat(n, " o");
-  if (n < 1024 * 1024) return "".concat(Math.round(n / 1024), " Ko");
-  return "".concat((n / 1024 / 1024).toFixed(1), " Mo");
+  if (n < 1024) return `${n} o`;
+  if (n < 1024 * 1024) return `${Math.round(n / 1024)} Ko`;
+  return `${(n / 1024 / 1024).toFixed(1)} Mo`;
 }
-var DEFAULT_REASONS = Object.freeze({
+const DEFAULT_REASONS = Object.freeze({
   "max-size": "trop volumineux",
   "type": "type non autorisé",
   "max-files": "limite atteinte"
@@ -112,70 +99,48 @@ var DEFAULT_REASONS = Object.freeze({
  *                             2 type non autorisé."
  */
 function defaultBuildRejectMessage(rejected, reasons) {
-  var total = rejected.length;
+  const total = rejected.length;
   if (total === 0) return "";
-  var noun = total > 1 ? "fichiers refusés" : "fichier refusé";
-  var head = "".concat(total, " ").concat(noun);
-  var tally = {};
-  var _iterator = _createForOfIteratorHelper(rejected),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var r = _step.value;
-      var label = reasons[r.reason];
-      if (!label) continue;
-      tally[label] = (tally[label] || 0) + 1;
-    }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
+  const noun = total > 1 ? "fichiers refusés" : "fichier refusé";
+  const head = `${total} ${noun}`;
+  const tally = {};
+  for (const r of rejected) {
+    const label = reasons[r.reason];
+    if (!label) continue;
+    tally[label] = (tally[label] || 0) + 1;
   }
-  var buckets = Object.entries(tally);
-  if (buckets.length === 0) return "".concat(head, ".");
+  const buckets = Object.entries(tally);
+  if (buckets.length === 0) return `${head}.`;
   if (buckets.length === 1) {
-    var only = buckets[0];
-    return only ? "".concat(head, " : ").concat(only[0], ".") : "".concat(head, ".");
+    const only = buckets[0];
+    return only ? `${head} : ${only[0]}.` : `${head}.`;
   }
-  var parts = buckets.map(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      label = _ref2[0],
-      n = _ref2[1];
-    return "".concat(n, " ").concat(label);
-  });
-  return "".concat(head, " : ").concat(parts.join(", "), ".");
+  const parts = buckets.map(([label, n]) => `${n} ${label}`);
+  return `${head} : ${parts.join(", ")}.`;
 }
-var DEFAULT_LABELS = Object.freeze({
+const DEFAULT_LABELS = Object.freeze({
   label: "Glissez vos fichiers ici ou cliquez pour parcourir",
   ariaLabel: "Zone de dépôt de fichiers",
   formatBytes: defaultFormatBytes,
   reasons: DEFAULT_REASONS,
   buildRejectMessage: defaultBuildRejectMessage,
-  addedSingle: function addedSingle(name) {
-    return "Fichier ajout\xE9 : ".concat(name);
-  },
-  addedMultiple: function addedMultiple(n) {
-    return "".concat(n, " fichiers ajout\xE9s");
-  },
-  removeItem: function removeItem(name) {
-    return "Retirer ".concat(name);
-  }
+  addedSingle: name => `Fichier ajouté : ${name}`,
+  addedMultiple: n => `${n} fichiers ajoutés`,
+  removeItem: name => `Retirer ${name}`
 });
 
 // ─── Helpers ──────────────────────────────────────────────────────────
 
 function matchesAccept(file, accept) {
   if (!accept) return true;
-  var tokens = accept.split(",").map(function (t) {
-    return t.trim();
-  }).filter(Boolean);
+  const tokens = accept.split(",").map(t => t.trim()).filter(Boolean);
   if (tokens.length === 0) return true;
-  return tokens.some(function (t) {
+  return tokens.some(t => {
     if (t.startsWith(".")) {
       return file.name.toLowerCase().endsWith(t.toLowerCase());
     }
     if (t.endsWith("/*")) {
-      var prefix = t.slice(0, -1); // "image/"
+      const prefix = t.slice(0, -1); // "image/"
       return file.type.startsWith(prefix);
     }
     return file.type === t;
@@ -184,32 +149,34 @@ function matchesAccept(file, accept) {
 
 // ─── Component ────────────────────────────────────────────────────────
 
-function Dropzone(_ref3) {
-  var accept = _ref3.accept,
-    maxSize = _ref3.maxSize,
-    maxFiles = _ref3.maxFiles,
-    _ref3$multiple = _ref3.multiple,
-    multiple = _ref3$multiple === void 0 ? false : _ref3$multiple,
-    _ref3$disabled = _ref3.disabled,
-    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
-    _ref3$value = _ref3.value,
-    value = _ref3$value === void 0 ? [] : _ref3$value,
-    onAdd = _ref3.onAdd,
-    onRemove = _ref3.onRemove,
-    onReject = _ref3.onReject,
-    label = _ref3.label,
-    ariaLabelProp = _ref3["aria-label"],
-    hint = _ref3.hint,
-    labels = _ref3.labels,
-    sx = _ref3.sx,
-    id = _ref3.id,
-    _ref3$error = _ref3.error,
-    error = _ref3$error === void 0 ? false : _ref3$error,
-    ariaInvalidProp = _ref3["aria-invalid"],
-    ariaDescribedByProp = _ref3["aria-describedby"];
-  var L = React.useMemo(function () {
+function Dropzone({
+  accept,
+  maxSize,
+  maxFiles,
+  multiple = false,
+  disabled = false,
+  value = [],
+  onAdd,
+  onRemove,
+  onReject,
+  // Legacy prop names: kept for back-compat. When the consumer passes
+  // either, it wins over labels.* with the same role.
+  label,
+  "aria-label": ariaLabelProp,
+  hint,
+  labels,
+  sx,
+  // Injected by Field (R-I.1 / R-I.3). Forwarded to the drop <button>
+  // below — see the "INSIDE A <Field>" note in the module docstring.
+  id,
+  error = false,
+  "aria-invalid": ariaInvalidProp,
+  "aria-describedby": ariaDescribedByProp
+}) {
+  const L = React.useMemo(() => {
     if (!labels) return DEFAULT_LABELS;
-    return mergeLabels(DEFAULT_LABELS, _objectSpread(_objectSpread({}, labels), {}, {
+    return mergeLabels(DEFAULT_LABELS, {
+      ...labels,
       /*
        * `reasons` is a NESTED dictionary and needs its own merge, at its own
        * level. Merging only at the top would replace the whole sub-object, so a
@@ -218,25 +185,22 @@ function Dropzone(_ref3) {
        * guarding its VALUES, which is the same hazard one level down.
        */
       reasons: mergeLabels(DEFAULT_REASONS, labels.reasons)
-    }));
+    });
   }, [labels]);
-  var dropLabel = label != null ? label : L.label;
-  var ariaLabel = ariaLabelProp != null ? ariaLabelProp : L.ariaLabel;
-  var inputRef = React.useRef(null);
-  var liveRef = React.useRef(null);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    dragOver = _React$useState2[0],
-    setDragOver = _React$useState2[1];
+  const dropLabel = label != null ? label : L.label;
+  const ariaLabel = ariaLabelProp != null ? ariaLabelProp : L.ariaLabel;
+  const inputRef = React.useRef(null);
+  const liveRef = React.useRef(null);
+  const [dragOver, setDragOver] = React.useState(false);
   // Stable, per-instance, collision-safe id for the hint association.
-  var hintId = React.useId();
+  const hintId = React.useId();
 
   /*
    * R-I.3 — invalid when Field said so via `error`, or when a host set the
    * attribute directly. Either alone is sufficient; Field passes both, other
    * callers may pass one.
    */
-  var isInvalid = error || ariaInvalidProp === true || ariaInvalidProp === "true";
+  const isInvalid = error || ariaInvalidProp === true || ariaInvalidProp === "true";
 
   /*
    * MERGED, not replaced. Field's value points at its hint and/or its error
@@ -244,105 +208,94 @@ function Dropzone(_ref3) {
    * button. Dropping either would lose a real description — which is what
    * happened while this prop was not accepted at all.
    */
-  var describedBy = [ariaDescribedByProp, hint ? hintId : null].filter(Boolean).join(" ") || undefined;
-  var announce = function announce(msg) {
+  const describedBy = [ariaDescribedByProp, hint ? hintId : null].filter(Boolean).join(" ") || undefined;
+  const announce = msg => {
     if (liveRef.current) {
       // Setting via DOM (not state) avoids re-renders that would re-trigger
       // SR announcements for unrelated UI updates.
       liveRef.current.textContent = msg;
     }
   };
-  var validate = React.useCallback(function (incoming) {
-    var accepted = [];
-    var rejected = [];
-    var remainingSlots = maxFiles != null ? Math.max(0, maxFiles - value.length) : Infinity;
-    var _iterator2 = _createForOfIteratorHelper(incoming),
-      _step2;
-    try {
-      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-        var file = _step2.value;
-        if (accepted.length >= remainingSlots) {
-          rejected.push({
-            file: file,
-            reason: "max-files"
-          });
-          continue;
-        }
-        if (maxSize != null && file.size > maxSize) {
-          rejected.push({
-            file: file,
-            reason: "max-size"
-          });
-          continue;
-        }
-        if (!matchesAccept(file, accept)) {
-          rejected.push({
-            file: file,
-            reason: "type"
-          });
-          continue;
-        }
-        accepted.push(file);
-        if (!multiple) break; // single mode: only first valid
+  const validate = React.useCallback(incoming => {
+    const accepted = [];
+    const rejected = [];
+    const remainingSlots = maxFiles != null ? Math.max(0, maxFiles - value.length) : Infinity;
+    for (const file of incoming) {
+      if (accepted.length >= remainingSlots) {
+        rejected.push({
+          file,
+          reason: "max-files"
+        });
+        continue;
+      }
+      if (maxSize != null && file.size > maxSize) {
+        rejected.push({
+          file,
+          reason: "max-size"
+        });
+        continue;
+      }
+      if (!matchesAccept(file, accept)) {
+        rejected.push({
+          file,
+          reason: "type"
+        });
+        continue;
       }
-    } catch (err) {
-      _iterator2.e(err);
-    } finally {
-      _iterator2.f();
+      accepted.push(file);
+      if (!multiple) break; // single mode: only first valid
     }
     return {
-      accepted: accepted,
-      rejected: rejected
+      accepted,
+      rejected
     };
   }, [accept, maxSize, maxFiles, multiple, value.length]);
-  var handleFiles = function handleFiles(fileList) {
+  const handleFiles = fileList => {
     if (disabled) return;
-    var files = Array.from(fileList || []);
+    const files = Array.from(fileList || []);
     if (files.length === 0) return;
-    var _validate = validate(files),
-      accepted = _validate.accepted,
-      rejected = _validate.rejected;
+    const {
+      accepted,
+      rejected
+    } = validate(files);
     if (accepted.length > 0) {
-      onAdd === null || onAdd === void 0 ? void 0 : onAdd(accepted);
-      var _accepted = _slicedToArray(accepted, 1),
-        first = _accepted[0];
+      onAdd?.(accepted);
+      const [first] = accepted;
       announce(accepted.length === 1 && first ? L.addedSingle(first.name) : L.addedMultiple(accepted.length));
     }
     if (rejected.length > 0) {
-      onReject === null || onReject === void 0 ? void 0 : onReject(rejected);
+      onReject?.(rejected);
       announce(L.buildRejectMessage(rejected, L.reasons));
     }
   };
-  var onInputChange = function onInputChange(e) {
+  const onInputChange = e => {
     handleFiles(e.target.files);
     // reset so the same file can be re-added after removal
     e.target.value = "";
   };
-  var openPicker = function openPicker() {
-    var _inputRef$current;
+  const openPicker = () => {
     if (disabled) return;
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
+    inputRef.current?.click();
   };
-  var onDragOver = function onDragOver(e) {
+  const onDragOver = e => {
     if (disabled) return;
     e.preventDefault();
     e.stopPropagation();
     if (!dragOver) setDragOver(true);
   };
-  var onDragLeave = function onDragLeave(e) {
+  const onDragLeave = e => {
     e.preventDefault();
     e.stopPropagation();
     // Only clear when leaving the wrapper itself, not crossing a child.
     if (e.currentTarget.contains(e.relatedTarget)) return;
     setDragOver(false);
   };
-  var onDrop = function onDrop(e) {
-    var _e$dataTransfer;
+  const onDrop = e => {
     e.preventDefault();
     e.stopPropagation();
     setDragOver(false);
     if (disabled) return;
-    handleFiles((_e$dataTransfer = e.dataTransfer) === null || _e$dataTransfer === void 0 ? void 0 : _e$dataTransfer.files);
+    handleFiles(e.dataTransfer?.files);
   };
 
   /*
@@ -352,22 +305,23 @@ function Dropzone(_ref3) {
    * user needs to know the drop will land, and the invalid state is about to
    * be resolved by that very drop.
    */
-  var borderColor = dragOver ? "var(--accent)" : isInvalid ? "var(--danger)" : "var(--border-strong)";
+  const borderColor = dragOver ? "var(--accent)" : isInvalid ? "var(--danger)" : "var(--border-strong)";
   return /*#__PURE__*/_jsxs(Box, {
-    sx: _objectSpread({
-      width: "100%"
-    }, sx),
-    children: [/*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread(_objectSpread({
+    sx: {
+      width: "100%",
+      ...sx
+    },
+    children: [/*#__PURE__*/_jsxs(Box, {
       component: "button",
-      type: "button"
-    }, id !== undefined ? {
-      id: id
-    } : {}), {}, {
+      type: "button",
+      ...(id !== undefined ? {
+        id
+      } : {}),
       disabled: disabled,
-      "aria-label": ariaLabel
-    }, isInvalid ? {
-      "aria-invalid": true
-    } : {}), {}, {
+      "aria-label": ariaLabel,
+      ...(isInvalid ? {
+        "aria-invalid": true
+      } : {}),
       "aria-describedby": describedBy,
       onClick: openPicker,
       onDragOver: onDragOver,
@@ -388,7 +342,7 @@ function Dropzone(_ref3) {
         gap: 1,
         padding: "var(--s-5) var(--s-4)",
         background: dragOver ? "var(--accent-soft)" : "var(--bg-subtle)",
-        border: "2px dashed ".concat(borderColor),
+        border: `2px dashed ${borderColor}`,
         borderRadius: "var(--r-lg)",
         cursor: disabled ? "not-allowed" : "pointer",
         opacity: disabled ? 0.55 : 1,
@@ -448,7 +402,7 @@ function Dropzone(_ref3) {
           border: 0
         }
       })]
-    })), /*#__PURE__*/_jsx(Box, {
+    }), /*#__PURE__*/_jsx(Box, {
       ref: liveRef,
       role: "status",
       "aria-live": "polite",
@@ -468,11 +422,10 @@ function Dropzone(_ref3) {
         flexDirection: "column",
         gap: "var(--s-1)"
       },
-      children: value.map(function (f, i) {
-        var _ref4, _f$id, _f$size;
-        var id = (_ref4 = (_f$id = f.id) !== null && _f$id !== void 0 ? _f$id : f.name) !== null && _ref4 !== void 0 ? _ref4 : i;
-        var status = f.status || (f.error ? "error" : f.progress === 100 ? "done" : f.progress != null ? "uploading" : "ready");
-        var color = status === "error" ? "var(--danger)" : status === "done" ? "var(--success)" : "var(--fg-muted)";
+      children: value.map((f, i) => {
+        const id = f.id ?? f.name ?? i;
+        const status = f.status || (f.error ? "error" : f.progress === 100 ? "done" : f.progress != null ? "uploading" : "ready");
+        const color = status === "error" ? "var(--danger)" : status === "done" ? "var(--success)" : "var(--fg-muted)";
         return /*#__PURE__*/_jsxs(Box, {
           component: "li",
           role: "listitem",
@@ -488,7 +441,7 @@ function Dropzone(_ref3) {
           children: [/*#__PURE__*/_jsx(Box, {
             "aria-hidden": "true",
             sx: {
-              color: color,
+              color,
               display: "inline-flex"
             },
             children: /*#__PURE__*/_jsx(InsertDriveFileIcon, {
@@ -515,11 +468,11 @@ function Dropzone(_ref3) {
                 color: status === "error" ? "var(--danger)" : "var(--fg-subtle)",
                 fontVariantNumeric: "tabular-nums"
               },
-              children: status === "error" && f.error ? f.error : "".concat(L.formatBytes((_f$size = f.size) !== null && _f$size !== void 0 ? _f$size : NaN)).concat(f.progress != null ? " \xB7 ".concat(Math.round(f.progress), "%") : "")
+              children: status === "error" && f.error ? f.error : `${L.formatBytes(f.size ?? NaN)}${f.progress != null ? ` · ${Math.round(f.progress)}%` : ""}`
             })]
           }), onRemove && /*#__PURE__*/_jsx(IconButton, {
             size: "small",
-            onClick: function onClick(e) {
+            onClick: e => {
               e.stopPropagation();
               onRemove(id);
             },