@eifi1/ui-kit 0.51.7 → 0.53.0

package/dist/components/picker-sheet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/picker-sheet.tsx"],"sourcesContent":["import { useMemo, useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { X } from \"lucide-react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref, RefObject } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { mergeRefs } from \"./field-parts\";\nimport { CLIPS_ATTRIBUTE } from \"../lib/clipping\";\nimport { DropdownSearchHeader } from \"./dropdown\";\nimport { Button } from \"./button\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\nimport { useVisualViewport } from \"../hooks/use-anchored-panel\";\nimport { DEFAULT_PICKER_SHEET_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * Two of the div's own attributes are omitted because this component already owns\n * the name: `title` here is the sheet's HEADING (and a ReactNode), not the browser's\n * tooltip string, and `onClose` is \"the sheet was dismissed\", not the DOM's\n * `<dialog>` close event. Everything else a caller can pass reaches the sheet.\n */\nexport interface PickerSheetProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\" | \"onClose\"> {\n  open: boolean;\n  onClose: () => void;\n  /** The field's own label — a sheet that fills the screen has to say what it is\n   *  asking for, which the anchored panel got for free by sitting under it. */\n  title?: ReactNode;\n  query: string;\n  onQueryChange: (value: string) => void;\n  searchPlaceholder?: string;\n  /** The search box's accessible name. Default: `searchPlaceholder` — a placeholder is\n   *  gone the moment a character is typed, and is no name to many readers at all. */\n  searchLabel?: string;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  /** Default: `pickerSheet.close` from the {@link UiKitProvider}, else \"Close\". */\n  closeLabel?: string;\n  /**\n   * The list's keyboard, on the search box — where focus is while the sheet is up:\n   * Up/Down/Home/End/Enter (round 0.34 Wave 2, BUG-5). `ComboboxPanel` passes its own;\n   * without it arrows and Enter in the sheet did nothing at all.\n   */\n  onSearchKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;\n  /** The `role=\"listbox\"` the search box filters, for its `aria-controls`. */\n  listboxId?: string;\n  /** The option the arrow keys are on, for the search box's `aria-activedescendant`. */\n  activeId?: string;\n  children: ReactNode;\n  /**\n   * A row pinned under the scrolling list — {@link FullBleedDialog}'s `footer`, on the\n   * picker's sheet (kk run 79 gap 2). Outside the scroller, so it stays put however long\n   * the list; padded for the home indicator, since it is the sheet's bottom edge.\n   */\n  footer?: ReactNode;\n  /**\n   * The kit's one sticky \"Done\" at the foot of the sheet (Marcel, keksdose #412): the\n   * button a multi-select sheet is left by once its rows are ticked. Ticks apply as\n   * they are made, so it closes (`onClose`) rather than saves. After any `footer`.\n   * {@link ComboboxPanel} turns it on for every `multi` list — `MultiSelect` and\n   * `MultiEntityCombobox` — and a single-select sheet, which closes on the tap that\n   * picks, has no use for it. Label: `pickerSheet.done`, else \"Done\" (`doneLabel`).\n   */\n  done?: boolean;\n  /** Default: `pickerSheet.done` from the {@link UiKitProvider}, else \"Done\". */\n  doneLabel?: string;\n  /** The sheet, where the rest of the props go (0.34, API-2, refactor audit 2026-10) —\n   *  merged with the sheet's own ref, which its focus trap holds. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The PHONE presentation of a picker: a full-screen dialog with a search box at\n * the top and the list filling everything below it (Keksdose live #200).\n *\n * *\"Paid as full screen dialog with input. Similar to the account select that\n * already appears as full screen.\"* The account field is a native `<select>`, and\n * a phone browser renders that as a full-screen list — so the app's own pickers,\n * which are anchored dropdown panels, were the odd ones out: a 320px-tall panel\n * squeezed between the field and the keyboard, showing three or four rows of a\n * list that might have two hundred entries.\n *\n * What this fixes beyond size: the panel had to be *placed* (above/below, tracking\n * the visual viewport as the keyboard opened — see `useAnchoredPanel`), and every\n * one of those decisions is a chance to be wrong on a screen this small. A sheet\n * has no placement. It also gives the search input somewhere unambiguous to live,\n * which is the other half of the request: *\"add filler possibility to the account\n * select or even better right to the hoc the account select is derived from\"* —\n * so this lives in the shared picker, not in one form's copy of it.\n *\n * Rows are `min-h-11` (44px): the touch target the rest of the app uses. The list\n * scrolls, the header does not, and the body behind it is scroll-locked so a drag\n * that overshoots the list does not move the page underneath.\n */\nexport function PickerSheet({\n  open,\n  onClose,\n  title,\n  query,\n  onQueryChange,\n  searchPlaceholder,\n  searchLabel,\n  inputRef,\n  closeLabel,\n  onSearchKeyDown,\n  listboxId,\n  activeId,\n  children,\n  footer,\n  done,\n  doneLabel,\n  \"aria-label\": ariaLabel,\n  className,\n  style,\n  ref,\n  ...rest\n}: PickerSheetProps) {\n  // Every picker in the kit opens one of these on a phone, and most of them pass\n  // their own `closeLabel` through as `undefined` — so this lookup is what makes the\n  // one way out of a full-screen sheet speak the app's language without each of\n  // them having to (see the prop's note in `EntityCombobox`).\n  const labels = useKitLabels(\"pickerSheet\", DEFAULT_PICKER_SHEET_LABELS, { close: closeLabel, done: doneLabel });\n  const hasFooter = (footer !== undefined && footer !== null && footer !== false) || Boolean(done);\n  useBodyScrollLock(open);\n  /**\n   * Back closes THE SHEET, not the dialog it was opened from (Keksdose live #309:\n   * *\"Mouse Back does not only close the select but also the whole edit or create\n   * dialog which is cumbersome.\"*).\n   *\n   * The sheet is a full-screen overlay over whatever opened it, and on a phone that\n   * is almost always the row editor — which DOES push a history entry\n   * (`data-table.tsx`). So the sheet was invisible to Back: one press popped the\n   * editor's entry and took the whole dialog with it, discarding an edit in progress\n   * in order to dismiss a list.\n   *\n   * `useOverlayHistory` was built for exactly this nesting — its stack unwinds\n   * last-in-first-out, and the U-12 regression test in its own suite is written\n   * around \"a Modal and a PickerSheet inside it\". The sheet simply never called it.\n   *\n   * Nothing else has to change: the hook is a no-op while `open` is false, and it\n   * pops its own entry when the sheet closes some other way (the X, a row, the\n   * backdrop) so history does not accumulate husks.\n   */\n  useOverlayHistory(open, onClose);\n  // The visible region, while the sheet is up — see the `style` below for why a\n  // full-screen sheet cannot simply be `inset-0` on a phone (live #328).\n  const vv = useVisualViewport(open);\n  // A fallback ref so a caller that does not need the handle still gets the opening\n  // focus, rather than the behaviour depending on whether a prop was passed. What that\n  // focus is FOR is on the trap below.\n  const ownRef = useRef<HTMLInputElement | null>(null);\n  const searchRef = inputRef ?? ownRef;\n\n  const sheetRef = useRef<HTMLDivElement>(null);\n  const setSheet = useMemo(() => mergeRefs(sheetRef, ref), [ref]);\n  /**\n   * The sheet said `aria-modal=\"true\"` and then left focus on the field behind it, so\n   * a screen reader was told to hide the page the user's cursor was still standing in\n   * (the audit's *\"Only Modal manages focus\"*). Through the shared hook rather than\n   * the bare `.focus()` that used to live here: the hook re-reads the tabbable list on\n   * every Tab, which this panel needs more than most — its list is filtered as you\n   * type, so the rows a trap captured at open time are gone by the second keystroke.\n   *\n   * **`initialFocus` is the search box**, not the container, and this is the one place\n   * in the package that overrides `Modal`'s rule. The sheet exists in order to be typed\n   * into (live #212: *\"make the text input filter active on select click\"*), and the\n   * callers cannot do it themselves — `Combobox`'s field runs\n   * `setOpen(true); sheetInputRef.current?.focus()` in a single `onFocus`, so the focus\n   * call happens while this sheet is still unmounted and the ref is null. Only the\n   * sheet knows when its own input exists. Popping the keyboard is the POINT here,\n   * where in a form dialog it is the cost.\n   *\n   * **`restoreFocus` is off**, which is the uncomfortable half. Every caller in this\n   * kit opens the sheet from the field's own `onFocus` handler, so handing focus back\n   * to that field on close re-opens the sheet the user has just dismissed — a row tap\n   * would select a value and immediately put the list back over it. The field that\n   * opened it is the only thing that knows whether re-focusing it means \"open\"; a sheet\n   * that cannot tell must not guess. The cost is that focus lands on `<body>` after a\n   * dismissal, which on the phone this shape is for costs nothing, and on a pointer\n   * device is what happened before this change too.\n   */\n  useFocusTrap(sheetRef, {\n    active: open,\n    restoreFocus: false,\n    initialFocus: () => searchRef.current,\n  });\n\n  // The sheet is almost always the INNERMOST overlay — it opens from a field inside a\n  // `Modal` or a `FullBleedDialog`. It is a layer on the Escape stack (Wave 2, DUP-1),\n  // above the dialog, and takes the key on its own element: one press dismissing this\n  // list and the dialog underneath with it was Keksdose live #309 (*\"Mouse Back does\n  // not only close the select but also the whole edit or create dialog which is\n  // cumbersome\"*), which the Back gesture already learned, on the key a desktop user\n  // reaches for instead.\n  useDismissLayer(open, onClose);\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    takeEscape(e);\n  };\n\n  if (!open || typeof document === \"undefined\") return null;\n  return createPortal(\n    /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the dialog\n       container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for whatever\n       inside it holds focus, and `onMouseDown` only stops propagation (live #328). */\n    <div\n      // Spread FIRST, and every attribute below it deliberately wins: `style`,\n      // `onMouseDown` and `onKeyDown` here are not styling choices, they are live\n      // #328, dev#477 and live #309 respectively, and a caller who passed one by\n      // accident would re-open a bug three apps have already paid for. `style` is\n      // MERGED rather than won outright (see below), which is the one case where a\n      // caller has something to add.\n      {...rest}\n      ref={setSheet}\n      // A kit layer and a bottom layer a docked tour card stays clear of (0.50,\n      // docs/tours-harmonization.md §11.6).\n      data-kit-layer=\"\"\n      data-tour-obstruction=\"\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      // Without it the container cannot take focus, and `useFocusTrap` has nothing to\n      // fall back to when the list is empty and the search box is the only thing in\n      // here — see the hook's \"nothing tabbable\" branch.\n      tabIndex={-1}\n      onKeyDown={handleKeyDown}\n      // The caller's own name wins over the heading: a sheet titled \"Account\" in a\n      // form with two of them needs to say WHICH, and `title` is what the user reads\n      // rather than what a reader announces.\n      aria-label={ariaLabel ?? (typeof title === \"string\" ? title : undefined)}\n      // The sheet is PORTALLED to <body>, so it is not inside the field's own\n      // wrapper — and `useDropdown` closes on any document mousedown landing\n      // outside that wrapper. Tapping a row therefore unmounted the row (open →\n      // false) before its CLICK could fire, so the tap selected nothing at all and\n      // the sheet just vanished (Keksdose dev#477).\n      //\n      // It bit whichever sheet commits on `onClick` — the payee field's, since live\n      // #200, where it hid behind the free-text value the search box was already\n      // setting; and the account field's the moment dev#477 moved it onto the inline\n      // picker. `ComboboxPanel`'s rows happen to commit on `onMouseDown`, so they\n      // beat the document listener and were never affected — which is luck, not a\n      // design, and exactly why the fix belongs to the sheet.\n      //\n      // Stopping the mousedown here rather than teaching every caller about the\n      // portal: the sheet is modal and full-screen, so \"a click in here is not an\n      // outside click\" is a property of the sheet, not of whoever opened it.\n      onMouseDown={(e) => e.stopPropagation()}\n      // ⚠️ `inset-0` was the whole of Keksdose live #328: *\"When the keyboard overlays\n      // the entries I cannot scroll past them … to see also the last entries. Happens\n      // when browsing the account select.\"*\n      //\n      // This sheet FOCUSES ITS OWN SEARCH BOX on open (see above), so the keyboard is\n      // up every single time it is used on a phone. On Android that shrinks the visual\n      // viewport and leaves the LAYOUT viewport alone — `inset-0` is the layout\n      // viewport — so the sheet kept its full height with its bottom third behind the\n      // keyboard. The list below is `flex-1 overflow-y-auto`, so it sized itself to\n      // that hidden height too: it scrolled to ITS end while the last rows were still\n      // under the keys, and no gesture could bring them out. Nothing was clipped and\n      // nothing looked broken, which is why it reads as \"I cannot scroll past them\".\n      //\n      // `visualViewport` is the API that answers rather than hints (the live #292\n      // lesson): it reports the region actually on screen, keyboard and pinch-pan\n      // included, and it fires on the keyboard opening and closing. Pinned to that box,\n      // the sheet ends where the keys begin and the list's own scroll covers the rest.\n      // `useVisualViewport` returns null when there is nothing to correct, and then\n      // this is character-for-character the sheet that was here before.\n      // A caller's `style` is kept and the correction laid OVER it: the three values\n      // below are the whole of live #328, so they are not negotiable, but a z-index\n      // or a transition from outside has nothing to do with them. Without a visual\n      // viewport to correct for this is character-for-character what the caller passed.\n      style={vv ? { ...style, top: vv.top, height: vv.height, bottom: \"auto\" } : style}\n      className={cn(\"fixed inset-0 z-50 flex flex-col bg-surface outline-none\", className)}\n    >\n      <div className=\"flex items-center gap-2 border-b border-subtle px-3 py-2\">\n        <span className=\"min-w-0 flex-1 truncate text-sm font-semibold text-primary\">{title}</span>\n        <button\n          type=\"button\"\n          aria-label={labels.close}\n          onClick={onClose}\n          className=\"rounded p-1.5 text-muted hover:bg-hover\"\n        >\n          <X className=\"size-5\" />\n        </button>\n      </div>\n      <DropdownSearchHeader\n        query={query}\n        onQueryChange={onQueryChange}\n        inputRef={searchRef}\n        placeholder={searchPlaceholder}\n        aria-label={searchLabel ?? searchPlaceholder}\n        // Focus is in this box while the sheet is up, so this is where the list's keys\n        // land and what has to name the list and the row the arrows are on (BUG-5).\n        onKeyDown={onSearchKeyDown}\n        listboxId={listboxId}\n        activeId={activeId}\n      />\n      {/* min-h-0 so the LIST scrolls rather than the dialog growing past the\n          viewport — a flex child defaults to min-height:auto. */}\n      {/* Marked as the scroller it is (`CLIPS_ATTRIBUTE`), so a Tooltip in a row —\n          `Combobox`'s `optionAdornment` — portals out under jsdom as it does in the\n          browser rather than joining the option's name (keksdose E8). */}\n      <div {...{ [CLIPS_ATTRIBUTE]: \"\" }} className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain\">\n        {children}\n      </div>\n      {hasFooter && (\n        <div\n          data-picker-sheet-footer=\"\"\n          className=\"flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-subtle bg-surface px-3 pt-3\"\n          style={{ paddingBottom: \"max(0.75rem, env(safe-area-inset-bottom))\" }}\n        >\n          {footer}\n          {done && (\n            // Full width: the one thing left to do on the sheet, under the thumb.\n            <Button type=\"button\" className=\"flex-1\" onClick={onClose}>\n              {labels.done}\n            </Button>\n          )}\n        </div>\n      )}\n    </div>,\n    document.body,\n  );\n}\n\n/** A row inside a {@link PickerSheet} — the phone-sized version of a dropdown row,\n *  so a list is comfortable to hit with a thumb rather than merely legible. */\nexport const SHEET_ROW_CLASS = cn(\n  \"flex min-h-11 w-full items-center gap-2 px-4 py-2 text-start text-base\",\n  \"text-primary hover:bg-hover\",\n);\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/picker-sheet.tsx"],"sourcesContent":["import { useMemo, useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { X } from \"lucide-react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref, RefObject } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport { mergeRefs } from \"./field-parts\";\nimport { CLIPS_ATTRIBUTE } from \"../lib/clipping\";\nimport { DropdownSearchHeader } from \"./dropdown\";\nimport { Button } from \"./button\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\nimport { useVisualViewport } from \"../hooks/use-anchored-panel\";\nimport { DEFAULT_PICKER_SHEET_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * Two of the div's own attributes are omitted because this component already owns\n * the name: `title` here is the sheet's HEADING (and a ReactNode), not the browser's\n * tooltip string, and `onClose` is \"the sheet was dismissed\", not the DOM's\n * `<dialog>` close event. Everything else a caller can pass reaches the sheet.\n */\nexport interface PickerSheetProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\" | \"onClose\"> {\n  open: boolean;\n  onClose: () => void;\n  /** The field's own label — a sheet that fills the screen has to say what it is\n   *  asking for, which the anchored panel got for free by sitting under it. */\n  title?: ReactNode;\n  query: string;\n  onQueryChange: (value: string) => void;\n  searchPlaceholder?: string;\n  /** The search box's accessible name. Default: `searchPlaceholder` — a placeholder is\n   *  gone the moment a character is typed, and is no name to many readers at all. */\n  searchLabel?: string;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  /** Default: `pickerSheet.close` from the {@link UiKitProvider}, else \"Close\". */\n  closeLabel?: string;\n  /**\n   * The list's keyboard, on the search box — where focus is while the sheet is up:\n   * Up/Down/Home/End/Enter (round 0.34 Wave 2, BUG-5). `ComboboxPanel` passes its own;\n   * without it arrows and Enter in the sheet did nothing at all.\n   */\n  onSearchKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;\n  /** The `role=\"listbox\"` the search box filters, for its `aria-controls`. */\n  listboxId?: string;\n  /** The option the arrow keys are on, for the search box's `aria-activedescendant`. */\n  activeId?: string;\n  children: ReactNode;\n  /**\n   * A row pinned under the scrolling list — {@link FullBleedDialog}'s `footer`, on the\n   * picker's sheet (kk run 79 gap 2). Outside the scroller, so it stays put however long\n   * the list; padded for the home indicator, since it is the sheet's bottom edge.\n   */\n  footer?: ReactNode;\n  /**\n   * The kit's one sticky \"Done\" at the foot of the sheet (Marcel, keksdose #412): the\n   * button a multi-select sheet is left by once its rows are ticked. Ticks apply as\n   * they are made, so it closes (`onClose`) rather than saves. After any `footer`.\n   * {@link ComboboxPanel} turns it on for every `multi` list — `MultiSelect` and\n   * `MultiEntityCombobox` — and a single-select sheet, which closes on the tap that\n   * picks, has no use for it. Label: `pickerSheet.done`, else \"Done\" (`doneLabel`).\n   */\n  done?: boolean;\n  /** Default: `pickerSheet.done` from the {@link UiKitProvider}, else \"Done\". */\n  doneLabel?: string;\n  /** The sheet, where the rest of the props go (0.34, API-2, refactor audit 2026-10) —\n   *  merged with the sheet's own ref, which its focus trap holds. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The PHONE presentation of a picker: a full-screen dialog with a search box at\n * the top and the list filling everything below it (Keksdose live #200).\n *\n * *\"Paid as full screen dialog with input. Similar to the account select that\n * already appears as full screen.\"* The account field is a native `<select>`, and\n * a phone browser renders that as a full-screen list — so the app's own pickers,\n * which are anchored dropdown panels, were the odd ones out: a 320px-tall panel\n * squeezed between the field and the keyboard, showing three or four rows of a\n * list that might have two hundred entries.\n *\n * What this fixes beyond size: the panel had to be *placed* (above/below, tracking\n * the visual viewport as the keyboard opened — see `useAnchoredPanel`), and every\n * one of those decisions is a chance to be wrong on a screen this small. A sheet\n * has no placement. It also gives the search input somewhere unambiguous to live,\n * which is the other half of the request: *\"add filler possibility to the account\n * select or even better right to the hoc the account select is derived from\"* —\n * so this lives in the shared picker, not in one form's copy of it.\n *\n * Rows are `min-h-11` (44px): the touch target the rest of the app uses. The list\n * scrolls, the header does not, and the body behind it is scroll-locked so a drag\n * that overshoots the list does not move the page underneath.\n */\nexport function PickerSheet({\n  open,\n  onClose,\n  title,\n  query,\n  onQueryChange,\n  searchPlaceholder,\n  searchLabel,\n  inputRef,\n  closeLabel,\n  onSearchKeyDown,\n  listboxId,\n  activeId,\n  children,\n  footer,\n  done,\n  doneLabel,\n  \"aria-label\": ariaLabel,\n  className,\n  style,\n  ref,\n  ...rest\n}: PickerSheetProps) {\n  // Every picker in the kit opens one of these on a phone, and most of them pass\n  // their own `closeLabel` through as `undefined` — so this lookup is what makes the\n  // one way out of a full-screen sheet speak the app's language without each of\n  // them having to (see the prop's note in `EntityCombobox`).\n  const labels = useKitLabels(\"pickerSheet\", DEFAULT_PICKER_SHEET_LABELS, { close: closeLabel, done: doneLabel });\n  // `hasContent`, so a `footer` of \"\" draws no empty bar (refactor audit 2026-10-30, DUP-14).\n  const hasFooter = hasContent(footer) || Boolean(done);\n  useBodyScrollLock(open);\n  /**\n   * Back closes THE SHEET, not the dialog it was opened from (Keksdose live #309:\n   * *\"Mouse Back does not only close the select but also the whole edit or create\n   * dialog which is cumbersome.\"*).\n   *\n   * The sheet is a full-screen overlay over whatever opened it, and on a phone that\n   * is almost always the row editor — which DOES push a history entry\n   * (`data-table.tsx`). So the sheet was invisible to Back: one press popped the\n   * editor's entry and took the whole dialog with it, discarding an edit in progress\n   * in order to dismiss a list.\n   *\n   * `useOverlayHistory` was built for exactly this nesting — its stack unwinds\n   * last-in-first-out, and the U-12 regression test in its own suite is written\n   * around \"a Modal and a PickerSheet inside it\". The sheet simply never called it.\n   *\n   * Nothing else has to change: the hook is a no-op while `open` is false, and it\n   * pops its own entry when the sheet closes some other way (the X, a row, the\n   * backdrop) so history does not accumulate husks.\n   */\n  useOverlayHistory(open, onClose);\n  // The visible region, while the sheet is up — see the `style` below for why a\n  // full-screen sheet cannot simply be `inset-0` on a phone (live #328).\n  const vv = useVisualViewport(open);\n  // A fallback ref so a caller that does not need the handle still gets the opening\n  // focus, rather than the behaviour depending on whether a prop was passed. What that\n  // focus is FOR is on the trap below.\n  const ownRef = useRef<HTMLInputElement | null>(null);\n  const searchRef = inputRef ?? ownRef;\n\n  const sheetRef = useRef<HTMLDivElement>(null);\n  const setSheet = useMemo(() => mergeRefs(sheetRef, ref), [ref]);\n  /**\n   * The sheet said `aria-modal=\"true\"` and then left focus on the field behind it, so\n   * a screen reader was told to hide the page the user's cursor was still standing in\n   * (the audit's *\"Only Modal manages focus\"*). Through the shared hook rather than\n   * the bare `.focus()` that used to live here: the hook re-reads the tabbable list on\n   * every Tab, which this panel needs more than most — its list is filtered as you\n   * type, so the rows a trap captured at open time are gone by the second keystroke.\n   *\n   * **`initialFocus` is the search box**, not the container, and this is the one place\n   * in the package that overrides `Modal`'s rule. The sheet exists in order to be typed\n   * into (live #212: *\"make the text input filter active on select click\"*), and the\n   * callers cannot do it themselves — `Combobox`'s field runs\n   * `setOpen(true); sheetInputRef.current?.focus()` in a single `onFocus`, so the focus\n   * call happens while this sheet is still unmounted and the ref is null. Only the\n   * sheet knows when its own input exists. Popping the keyboard is the POINT here,\n   * where in a form dialog it is the cost.\n   *\n   * **`restoreFocus` is off**, which is the uncomfortable half. `Combobox` and\n   * `InlineEntityCombobox` open the sheet from the field's own `onFocus` handler, so\n   * handing focus back to that field on close re-opens the sheet the user has just\n   * dismissed — a row tap would select a value and immediately put the list back over\n   * it. The field that opened it is the only thing that knows whether re-focusing it\n   * means \"open\"; a sheet that cannot tell must not guess. So the caller does it in\n   * `onClose` where it can: `ComboboxPanel`'s triggers open on a click, and its\n   * `onClose` hands focus back to the trigger (0.52, refactor audit 2026-10-30, INP-7) —\n   * a screen-reader user is in exactly this layout, and <body> was where they landed.\n   */\n  useFocusTrap(sheetRef, {\n    active: open,\n    restoreFocus: false,\n    initialFocus: () => searchRef.current,\n  });\n\n  // The sheet is almost always the INNERMOST overlay — it opens from a field inside a\n  // `Modal` or a `FullBleedDialog`. It is a layer on the Escape stack (Wave 2, DUP-1),\n  // above the dialog, and takes the key on its own element: one press dismissing this\n  // list and the dialog underneath with it was Keksdose live #309 (*\"Mouse Back does\n  // not only close the select but also the whole edit or create dialog which is\n  // cumbersome\"*), which the Back gesture already learned, on the key a desktop user\n  // reaches for instead.\n  useDismissLayer(open, onClose);\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    takeEscape(e);\n  };\n\n  if (!open || typeof document === \"undefined\") return null;\n  return createPortal(\n    /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the dialog\n       container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for whatever\n       inside it holds focus, and `onMouseDown` only stops propagation (live #328). */\n    <div\n      // Spread FIRST, and every attribute below it deliberately wins: `style`,\n      // `onMouseDown` and `onKeyDown` here are not styling choices, they are live\n      // #328, dev#477 and live #309 respectively, and a caller who passed one by\n      // accident would re-open a bug three apps have already paid for. `style` is\n      // MERGED rather than won outright (see below), which is the one case where a\n      // caller has something to add.\n      {...rest}\n      ref={setSheet}\n      // A kit layer and a bottom layer a docked tour card stays clear of (0.50,\n      // docs/tours-harmonization.md §11.6).\n      data-kit-layer=\"\"\n      data-tour-obstruction=\"\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      // Without it the container cannot take focus, and `useFocusTrap` has nothing to\n      // fall back to when the list is empty and the search box is the only thing in\n      // here — see the hook's \"nothing tabbable\" branch.\n      tabIndex={-1}\n      onKeyDown={handleKeyDown}\n      // The caller's own name wins over the heading: a sheet titled \"Account\" in a\n      // form with two of them needs to say WHICH, and `title` is what the user reads\n      // rather than what a reader announces.\n      aria-label={ariaLabel ?? (typeof title === \"string\" ? title : undefined)}\n      // The sheet is PORTALLED to <body>, so it is not inside the field's own\n      // wrapper — and `useDropdown` closes on any document mousedown landing\n      // outside that wrapper. Tapping a row therefore unmounted the row (open →\n      // false) before its CLICK could fire, so the tap selected nothing at all and\n      // the sheet just vanished (Keksdose dev#477).\n      //\n      // It bit whichever sheet commits on `onClick` — the payee field's, since live\n      // #200, where it hid behind the free-text value the search box was already\n      // setting; and the account field's the moment dev#477 moved it onto the inline\n      // picker. `ComboboxPanel`'s rows happen to commit on `onMouseDown`, so they\n      // beat the document listener and were never affected — which is luck, not a\n      // design, and exactly why the fix belongs to the sheet.\n      //\n      // Stopping the mousedown here rather than teaching every caller about the\n      // portal: the sheet is modal and full-screen, so \"a click in here is not an\n      // outside click\" is a property of the sheet, not of whoever opened it.\n      onMouseDown={(e) => e.stopPropagation()}\n      // ⚠️ `inset-0` was the whole of Keksdose live #328: *\"When the keyboard overlays\n      // the entries I cannot scroll past them … to see also the last entries. Happens\n      // when browsing the account select.\"*\n      //\n      // This sheet FOCUSES ITS OWN SEARCH BOX on open (see above), so the keyboard is\n      // up every single time it is used on a phone. On Android that shrinks the visual\n      // viewport and leaves the LAYOUT viewport alone — `inset-0` is the layout\n      // viewport — so the sheet kept its full height with its bottom third behind the\n      // keyboard. The list below is `flex-1 overflow-y-auto`, so it sized itself to\n      // that hidden height too: it scrolled to ITS end while the last rows were still\n      // under the keys, and no gesture could bring them out. Nothing was clipped and\n      // nothing looked broken, which is why it reads as \"I cannot scroll past them\".\n      //\n      // `visualViewport` is the API that answers rather than hints (the live #292\n      // lesson): it reports the region actually on screen, keyboard and pinch-pan\n      // included, and it fires on the keyboard opening and closing. Pinned to that box,\n      // the sheet ends where the keys begin and the list's own scroll covers the rest.\n      // `useVisualViewport` returns null when there is nothing to correct, and then\n      // this is character-for-character the sheet that was here before.\n      // A caller's `style` is kept and the correction laid OVER it: the three values\n      // below are the whole of live #328, so they are not negotiable, but a z-index\n      // or a transition from outside has nothing to do with them. Without a visual\n      // viewport to correct for this is character-for-character what the caller passed.\n      style={vv ? { ...style, top: vv.top, height: vv.height, bottom: \"auto\" } : style}\n      className={cn(\"fixed inset-0 z-50 flex flex-col bg-surface outline-none\", className)}\n    >\n      <div className=\"flex items-center gap-2 border-b border-subtle px-3 py-2\">\n        <span className=\"min-w-0 flex-1 truncate text-sm font-semibold text-primary\">{title}</span>\n        <button\n          type=\"button\"\n          aria-label={labels.close}\n          onClick={onClose}\n          className=\"rounded p-1.5 text-muted hover:bg-hover\"\n        >\n          <X className=\"size-5\" />\n        </button>\n      </div>\n      <DropdownSearchHeader\n        query={query}\n        onQueryChange={onQueryChange}\n        inputRef={searchRef}\n        placeholder={searchPlaceholder}\n        aria-label={searchLabel ?? searchPlaceholder}\n        // Focus is in this box while the sheet is up, so this is where the list's keys\n        // land and what has to name the list and the row the arrows are on (BUG-5).\n        onKeyDown={onSearchKeyDown}\n        listboxId={listboxId}\n        activeId={activeId}\n      />\n      {/* min-h-0 so the LIST scrolls rather than the dialog growing past the\n          viewport — a flex child defaults to min-height:auto. */}\n      {/* Marked as the scroller it is (`CLIPS_ATTRIBUTE`), so a Tooltip in a row —\n          `Combobox`'s `optionAdornment` — portals out under jsdom as it does in the\n          browser rather than joining the option's name (keksdose E8). */}\n      <div {...{ [CLIPS_ATTRIBUTE]: \"\" }} className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain\">\n        {children}\n      </div>\n      {hasFooter && (\n        <div\n          data-picker-sheet-footer=\"\"\n          className=\"flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-subtle bg-surface px-3 pt-3\"\n          style={{ paddingBottom: \"max(0.75rem, env(safe-area-inset-bottom))\" }}\n        >\n          {footer}\n          {done && (\n            // Full width: the one thing left to do on the sheet, under the thumb.\n            <Button type=\"button\" className=\"flex-1\" onClick={onClose}>\n              {labels.done}\n            </Button>\n          )}\n        </div>\n      )}\n    </div>,\n    document.body,\n  );\n}\n\n/** A row inside a {@link PickerSheet} — the phone-sized version of a dropdown row,\n *  so a list is comfortable to hit with a thumb rather than merely legible. */\nexport const SHEET_ROW_CLASS = cn(\n  \"flex min-h-11 w-full items-center gap-2 px-4 py-2 text-start text-base\",\n  \"text-primary hover:bg-hover\",\n);\n"],"mappings":"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","names":[]}

package/dist/components/pie-chart-labels.d.ts

@@ -8,6 +8,13 @@ export interface PieChartLabels {
      * German, "42%" in English) — the function only arranges them.
      */
     slice: (label: string, value: string, percent: string) => string;
+    /**
+     * One slice's accessible name under `redact` (0.52): the label and the share, with no
+     * amount. `redact` blurs every figure on screen but not the ring, and the ring's names
+     * are attributes on untagged elements, which a session replay or a redaction keyed on
+     * `[data-private]` reads as they are. `percent` as for {@link PieChartLabels.slice}.
+     */
+    sliceShare: (label: string, percent: string) => string;
     /** The caption over the donut's centre figure. */
     total: string;
     /** What a chart with nothing to draw says, when the caller passes no `empty`. */

package/dist/components/pie-chart-labels.js

@@ -2,6 +2,7 @@
 const DEFAULT_PIE_CHART_LABELS = {
   slices: "Chart slices",
   slice: (label, value, percent) => `${label}: ${value} (${percent})`,
+  sliceShare: (label, percent) => `${label}: ${percent}`,
   total: "Total",
   empty: "No data",
   legend: "Categories"

package/dist/components/pie-chart-labels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/pie-chart-labels.ts"],"sourcesContent":["// All user-facing strings for `PieChart`, as the `pieChart` namespace of\n// `<UiKitProvider labels>`, and per chart the `labels` prop over that.\n//\n// A module of its own, with no recharts in it, for the reason `series-chart-labels`\n// is one: the label registry (src/i18n) imports the defaults, and must not pull the\n// chart library in behind them.\n\nexport interface PieChartLabels {\n  /** Accessible name of the group of keyboard stops laid over the slices — one tab\n   *  stop, arrow keys between them. */\n  slices: string;\n  /**\n   * One slice's accessible name. `value` arrives through `formatValue`, `percent` as\n   * the slice's share of what is drawn, already formatted in the locale (\"42 %\" in\n   * German, \"42%\" in English) — the function only arranges them.\n   */\n  slice: (label: string, value: string, percent: string) => string;\n  /** The caption over the donut's centre figure. */\n  total: string;\n  /** What a chart with nothing to draw says, when the caller passes no `empty`. */\n  empty: string;\n  /** Accessible name of the chart's legend (a group of switches, one per slice). */\n  legend: string;\n}\n\nexport const DEFAULT_PIE_CHART_LABELS: PieChartLabels = {\n  slices: \"Chart slices\",\n  slice: (label, value, percent) => `${label}: ${value} (${percent})`,\n  total: \"Total\",\n  empty: \"No data\",\n  legend: \"Categories\",\n};\n"],"mappings":";AAyBO,MAAM,2BAA2C;AAAA,EACtD,QAAQ;AAAA,EACR,OAAO,CAAC,OAAO,OAAO,YAAY,GAAG,KAAK,KAAK,KAAK,KAAK,OAAO;AAAA,EAChE,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AACV;","names":[]}
+{"version":3,"sources":["../../src/components/pie-chart-labels.ts"],"sourcesContent":["// All user-facing strings for `PieChart`, as the `pieChart` namespace of\n// `<UiKitProvider labels>`, and per chart the `labels` prop over that.\n//\n// A module of its own, with no recharts in it, for the reason `series-chart-labels`\n// is one: the label registry (src/i18n) imports the defaults, and must not pull the\n// chart library in behind them.\n\nexport interface PieChartLabels {\n  /** Accessible name of the group of keyboard stops laid over the slices — one tab\n   *  stop, arrow keys between them. */\n  slices: string;\n  /**\n   * One slice's accessible name. `value` arrives through `formatValue`, `percent` as\n   * the slice's share of what is drawn, already formatted in the locale (\"42 %\" in\n   * German, \"42%\" in English) — the function only arranges them.\n   */\n  slice: (label: string, value: string, percent: string) => string;\n  /**\n   * One slice's accessible name under `redact` (0.52): the label and the share, with no\n   * amount. `redact` blurs every figure on screen but not the ring, and the ring's names\n   * are attributes on untagged elements, which a session replay or a redaction keyed on\n   * `[data-private]` reads as they are. `percent` as for {@link PieChartLabels.slice}.\n   */\n  sliceShare: (label: string, percent: string) => string;\n  /** The caption over the donut's centre figure. */\n  total: string;\n  /** What a chart with nothing to draw says, when the caller passes no `empty`. */\n  empty: string;\n  /** Accessible name of the chart's legend (a group of switches, one per slice). */\n  legend: string;\n}\n\nexport const DEFAULT_PIE_CHART_LABELS: PieChartLabels = {\n  slices: \"Chart slices\",\n  slice: (label, value, percent) => `${label}: ${value} (${percent})`,\n  sliceShare: (label, percent) => `${label}: ${percent}`,\n  total: \"Total\",\n  empty: \"No data\",\n  legend: \"Categories\",\n};\n"],"mappings":";AAgCO,MAAM,2BAA2C;AAAA,EACtD,QAAQ;AAAA,EACR,OAAO,CAAC,OAAO,OAAO,YAAY,GAAG,KAAK,KAAK,KAAK,KAAK,OAAO;AAAA,EAChE,YAAY,CAAC,OAAO,YAAY,GAAG,KAAK,KAAK,OAAO;AAAA,EACpD,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AACV;","names":[]}

package/dist/components/pie-chart.d.ts

@@ -72,7 +72,8 @@ export interface PieChartProps extends Omit<ComponentPropsWithRef<"div">, "child
      * Tag every figure ON SCREEN `data-private` — the tooltip bubble, the centre and
      * `"value"` slice labels — so the host's demo-mode rule blurs it. A percentage alone
      * reveals no amount, so `"percent"` labels stay readable, and the slices themselves
-     * are not tagged: a blurred ring is no picture at all.
+     * are not tagged: a blurred ring is no picture at all. So a slice's NAME says no
+     * amount either (0.52): "Occupied: 60%" (`labels.sliceShare`), not `labels.slice`.
      */
     redact?: boolean;
     /** What to show with nothing to draw. Default: `labels.empty`. */
@@ -90,8 +91,9 @@ export interface PieChartProps extends Omit<ComponentPropsWithRef<"div">, "child
  * clockwise from twelve o'clock, the order of the legend — with ←/→ following the
  * reading direction in RTL; Home/End go to the first and last. Each slice is named
  * "Label: value (xx%)" (`labels.slice`), because a colour and an angle are nothing a
- * screen reader can say, and focusing one reads it out in the donut's centre. With
- * `onSliceClick`, Enter and Space activate it as a click does.
+ * screen reader can say — under `redact` "Label: xx%" (`labels.sliceShare`) — and
+ * focusing one reads it out in the donut's centre. With `onSliceClick`, Enter and Space
+ * activate it as a click does.
  *
  * The legend switches slices off (`legend="toggle"`); the percentages are always of
  * what is drawn. The plot is not mirrored in RTL (see `ChartContainer`); the legend

package/dist/components/pie-chart.js

@@ -3,7 +3,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Pie, PieChart as RechartsPieChart, Sector } from "recharts";
 import { cn } from "../lib/cn.js";
-import { horizontalStep } from "../lib/direction.js";
+import { dirOf, rovingTarget } from "../lib/direction.js";
+import { shareFormat } from "../lib/share-format.js";
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
 import { paletteFor } from "../theme/chart-palette.js";
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from "./chart.js";
@@ -44,21 +45,11 @@ function PieChart({
   const { scale } = useTextSize();
   const box = chartHeightProps(height);
   const numberFormat = useMemo(() => new Intl.NumberFormat(locale), [locale]);
-  const percentFormats = useMemo(
-    () => ({
-      whole: new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 0 }),
-      fine: new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 1 })
-    }),
-    [locale]
-  );
   const formatValue = useCallback(
     (v) => formatValueProp ? formatValueProp(v) : formatWithMinus(numberFormat, v),
     [formatValueProp, numberFormat]
   );
-  const formatShare = useCallback(
-    (share) => (share < 0.1 ? percentFormats.fine : percentFormats.whole).format(share),
-    [percentFormats]
-  );
+  const formatShare = useMemo(() => shareFormat(locale), [locale]);
   const [ownHidden, setOwnHidden] = useState(() => /* @__PURE__ */ new Set());
   const hidden = hiddenProp ?? ownHidden;
   const toggle = (key) => {
@@ -109,16 +100,10 @@ function PieChart({
       const d = drawn[index];
       if (!d) return /* @__PURE__ */ jsx(Sector, { ...sector }, key ?? void 0);
       const onKeyDown = (event) => {
-        const step = horizontalStep(event.key, event.currentTarget);
-        let target;
-        if (step) target = index + step;
-        else if (event.key === "ArrowDown") target = index + 1;
-        else if (event.key === "ArrowUp") target = index - 1;
-        else if (event.key === "Home") target = 0;
-        else if (event.key === "End") target = drawn.length - 1;
+        const target = rovingTarget(event.key, dirOf(event.currentTarget), index, drawn.length, true);
         if (target !== void 0) {
           event.preventDefault();
-          refs.current[(target % drawn.length + drawn.length) % drawn.length]?.focus();
+          refs.current[target]?.focus();
         } else if (clickable && (event.key === "Enter" || event.key === " ")) {
           event.preventDefault();
           clickRef.current?.(d.slice.key, d.slice);
@@ -132,7 +117,7 @@ function PieChart({
           },
           role: clickable ? "button" : "img",
           tabIndex: index === 0 ? 0 : -1,
-          "aria-label": labels.slice(d.slice.label, formatValue(d.value), formatShare(d.share)),
+          "aria-label": redact ? labels.sliceShare(d.slice.label, formatShare(d.share)) : labels.slice(d.slice.label, formatValue(d.value), formatShare(d.share)),
           "data-slice": d.slice.key,
           onKeyDown,
           onFocus: () => {
@@ -145,7 +130,7 @@ function PieChart({
         }
       );
     },
-    [drawn, labels, formatValue, formatShare, clickable]
+    [drawn, labels, formatValue, formatShare, clickable, redact]
   );
   const label = useCallback(
     (props) => {

package/dist/components/pie-chart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/pie-chart.tsx"],"sourcesContent":["// A part-to-whole chart: a donut (or a full pie), one slice per category, its ANGLE\n// the category's share of what is drawn. Lifted out of kastlan, where the dashboard's\n// occupancy card and the reports' maintenance card each drew a recharts `<Pie>` by\n// hand inside the kit's `ChartContainer` — with a legend that could not switch\n// anything, slices a keyboard could not reach, and colours from a local hex list.\n//\n// It uses the kit's own chart shell (`ChartContainer`, `ChartTooltipContent`) and\n// ramp (`paletteFor`), so it re-skins with the palette like every other chart, and the\n// kit's own legends (`ToggleLegend`, `StaticLegend`).\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentProps, ComponentPropsWithRef, KeyboardEvent, ReactNode } from \"react\";\nimport { Pie, PieChart as RechartsPieChart, Sector } from \"recharts\";\nimport type { PieLabelRenderProps, PieSectorShapeProps } from \"recharts\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { paletteFor } from \"../theme/chart-palette\";\nimport { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from \"./chart\";\nimport { DEFAULT_PIE_CHART_LABELS, type PieChartLabels } from \"./pie-chart-labels\";\nimport { StaticLegend, ToggleLegend, toggleHidden, type LegendEntry } from \"./toggle-legend\";\nimport { useTextSize } from \"../theme/text-size\";\nimport { chartHeightProps, type ChartHeight } from \"./chart-height\";\nimport { formatWithMinus } from \"../lib/minus\";\n\n/** One slice. */\nexport interface PieChartSlice {\n  /** Stable key, handed back by {@link PieChartProps.onSliceClick} and used by the\n   *  legend's hidden set. Labels can collide; keys must not. */\n  key: string;\n  /** What the slice is called — in the legend, the tooltip and its accessible name. */\n  label: string;\n  /**\n   * The slice's size. A value that is not a positive finite number — `null` for a\n   * figure that is missing, a zero, a negative — is NOT drawn and not in the legend:\n   * an angle cannot be negative, and a zero-degree slice is one a pointer and a\n   * keyboard would both stop on to find nothing.\n   */\n  value: number | null | undefined;\n  /** Overrides the by-index palette colour (`paletteFor(i)`, `i` the slice's index in\n   *  `data` AS GIVEN) — a status that has a colour of its own. Any CSS colour. */\n  color?: string;\n}\n\n/**\n * Everything a `<div>` takes reaches the chart's root, so a test id or a `data-tour`\n * anchor can find it. `children` is the chart's own.\n */\nexport interface PieChartProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  data: readonly PieChartSlice[];\n  /** `\"donut\"` (default) leaves a hole with the total in it; `\"pie\"` is the full disc. */\n  variant?: \"donut\" | \"pie\";\n  /**\n   * Height of the plot (the legend is under it): a CSS length (`\"20rem\"`,\n   * `\"min(20rem, 50dvh)\"`), a Tailwind class, or px. Default `\"18.75rem\"` — 300 px at\n   * Normal, growing with the text size so the slice labels keep their room (0.32,\n   * docs/text-size-harmonization.md §10.10). A number does not follow the text size.\n   */\n  height?: ChartHeight;\n  /** How a value is written in the tooltip, the slice's name, a `\"value\"` slice label\n   *  and the donut's total. Default: `Intl.NumberFormat` in `locale`. */\n  formatValue?: (value: number) => string;\n  /**\n   * What is written beside each slice: its share (`\"percent\"`, the default), its\n   * value, or nothing. Only on slices of at least {@link minLabelShare} — a label on a\n   * sliver sits on its neighbour's. The figure is in the tooltip and the slice's name\n   * either way.\n   */\n  sliceLabels?: \"percent\" | \"value\" | \"none\";\n  /** The smallest share (0–1) that gets a slice label. Default 0.04. */\n  minLabelShare?: number;\n  /** Draw the donut's centre: {@link centerLabel} over {@link centerValue}. Default\n   *  `true`; ignored for `variant=\"pie\"`, which has no centre to draw in. */\n  center?: boolean;\n  /** The caption in the donut's centre. Default: `labels.total`. */\n  centerLabel?: ReactNode;\n  /** The figure in the donut's centre. Default: the drawn total through `formatValue`. */\n  centerValue?: ReactNode;\n  /**\n   * The legend under the chart. `\"toggle\"` (default): each entry is a switch that\n   * takes its slice off the chart, and the percentages are then of what is left —\n   * the shares always read \"of this picture\". `\"static\"`: a key with nothing to press.\n   */\n  legend?: \"toggle\" | \"static\" | \"none\";\n  /** The slices switched off, for a caller that owns the set (a URL, a saved view).\n   *  Left out, the chart keeps its own. */\n  hiddenSlices?: ReadonlySet<string>;\n  /** Called with the new hidden set whenever the legend switches a slice. */\n  onHiddenSlicesChange?: (hidden: ReadonlySet<string>) => void;\n  /** A slice was activated — by click, or Enter/Space on a focused slice. Makes each\n   *  slice a `role=\"button\"`. */\n  onSliceClick?: (key: string, slice: PieChartSlice) => void;\n  /**\n   * Tag every figure ON SCREEN `data-private` — the tooltip bubble, the centre and\n   * `\"value\"` slice labels — so the host's demo-mode rule blurs it. A percentage alone\n   * reveals no amount, so `\"percent\"` labels stay readable, and the slices themselves\n   * are not tagged: a blurred ring is no picture at all.\n   */\n  redact?: boolean;\n  /** What to show with nothing to draw. Default: `labels.empty`. */\n  empty?: ReactNode;\n  /** BCP 47 tag for the numbers and percentages. Default: the provider's. */\n  locale?: string;\n  labels?: LabelOverride<PieChartLabels>;\n}\n\n/** A slice as drawn: only the ones with a positive value, in `data` order. */\ninterface DrawnSlice {\n  slice: PieChartSlice;\n  value: number;\n  color: string;\n  /** Of what is drawn, 0–1. */\n  share: number;\n}\n\n// Slices carry their own `fill`, and `ChartTooltipContent` falls back to it for the\n// swatch, so no series config is needed — and none is wanted, because a config key is a\n// CSS identifier and a slice key is the caller's data (see `ChartStyle`).\nconst PIE_CONFIG: ChartConfig = {};\n\nconst RADIAN = Math.PI / 180;\n\n/** The shared tooltip with the bubble tagged `data-private` — see the treemap's\n *  `RedactedTooltipContent` for why it has to BE the element recharts clones. */\nfunction RedactedTooltipContent(props: ComponentProps<typeof ChartTooltipContent>) {\n  return (\n    <div data-private>\n      <ChartTooltipContent {...props} />\n    </div>\n  );\n}\n\n/**\n * Part-to-whole chart: a donut (or `variant=\"pie\"`), one slice per\n * {@link PieChartSlice}, coloured from the chart ramp by index.\n *\n * **Every slice is reachable from the keyboard.** The slices are ONE tab stop (a roving\n * tabindex, as in the kit's grids): ←/→ and ↑/↓ step to the next and previous slice —\n * clockwise from twelve o'clock, the order of the legend — with ←/→ following the\n * reading direction in RTL; Home/End go to the first and last. Each slice is named\n * \"Label: value (xx%)\" (`labels.slice`), because a colour and an angle are nothing a\n * screen reader can say, and focusing one reads it out in the donut's centre. With\n * `onSliceClick`, Enter and Space activate it as a click does.\n *\n * The legend switches slices off (`legend=\"toggle\"`); the percentages are always of\n * what is drawn. The plot is not mirrored in RTL (see `ChartContainer`); the legend\n * and the centre follow the page.\n *\n * With nothing to draw it says so (`empty`) rather than drawing an empty box.\n *\n * Needs `recharts`, like everything behind `@eifi1/ui-kit/chart`.\n */\nexport function PieChart({\n  data,\n  variant = \"donut\",\n  height = \"18.75rem\",\n  formatValue: formatValueProp,\n  sliceLabels = \"percent\",\n  minLabelShare = 0.04,\n  center = true,\n  centerLabel,\n  centerValue,\n  legend = \"toggle\",\n  hiddenSlices: hiddenProp,\n  onHiddenSlicesChange,\n  onSliceClick,\n  redact = false,\n  empty,\n  locale: localeProp,\n  labels: labelsProp,\n  className,\n  style,\n  ...rest\n}: PieChartProps) {\n  const labels = useKitLabels(\"pieChart\", DEFAULT_PIE_CHART_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  // The slice labels are SVG text in px: they follow the text size by this (§10.10).\n  const { scale } = useTextSize();\n  const box = chartHeightProps(height);\n  const numberFormat = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const percentFormats = useMemo(\n    () => ({\n      whole: new Intl.NumberFormat(locale, { style: \"percent\", maximumFractionDigits: 0 }),\n      fine: new Intl.NumberFormat(locale, { style: \"percent\", maximumFractionDigits: 1 }),\n    }),\n    [locale],\n  );\n  // Memoised, like everything the sectors are drawn from: they must not be rebuilt on\n  // this component's own re-renders (see `pie` below).\n  const formatValue = useCallback(\n    (v: number) => (formatValueProp ? formatValueProp(v) : formatWithMinus(numberFormat, v)),\n    [formatValueProp, numberFormat],\n  );\n  // One decimal under 10 %, where rounding to whole percents starts to lie — a slice\n  // of 0.4 % labelled \"0%\" says it is not there.\n  const formatShare = useCallback(\n    (share: number) => (share < 0.1 ? percentFormats.fine : percentFormats.whole).format(share),\n    [percentFormats],\n  );\n\n  const [ownHidden, setOwnHidden] = useState<ReadonlySet<string>>(() => new Set());\n  const hidden = hiddenProp ?? ownHidden;\n  const toggle = (key: string) => {\n    const next = toggleHidden(hidden, key);\n    if (hiddenProp === undefined) setOwnHidden(next);\n    onHiddenSlicesChange?.(next);\n  };\n\n  // Coloured by index into `data` AS GIVEN, before anything is dropped, so a slice\n  // keeps its colour when a neighbour is switched off or has no value.\n  const { drawable, drawn, total, pieData } = useMemo(() => {\n    const drawable = data\n      .map((slice, i) => ({ slice, value: slice.value, color: slice.color ?? paletteFor(i) }))\n      .filter(\n        (d): d is { slice: PieChartSlice; value: number; color: string } =>\n          typeof d.value === \"number\" && Number.isFinite(d.value) && d.value > 0,\n      );\n    const shown = drawable.filter((d) => !hidden.has(d.slice.key));\n    const total = shown.reduce((acc, d) => acc + d.value, 0);\n    const drawn: DrawnSlice[] = shown.map((d) => ({ ...d, share: total > 0 ? d.value / total : 0 }));\n    const pieData = drawn.map((d) => ({\n      key: d.slice.key,\n      label: d.slice.label,\n      value: d.value,\n      fill: d.color,\n    }));\n    return { drawable, drawn, total, pieData };\n  }, [data, hidden]);\n\n  // The roving tab stop, and the slice that has focus (which the centre reads out).\n  const [stop, setStop] = useState(0);\n  const [focused, setFocused] = useState<number | undefined>(undefined);\n  const current = Math.min(stop, Math.max(0, drawn.length - 1));\n  const refs = useRef<(SVGGElement | null)[]>([]);\n  const focusedSlice = focused !== undefined ? drawn[focused] : undefined;\n\n  // Read through a ref: the sectors are drawn once per `data`, and a caller's inline\n  // `onSliceClick` is a new function every render.\n  const clickRef = useRef(onSliceClick);\n  useLayoutEffect(() => {\n    clickRef.current = onSliceClick;\n  });\n  const clickable = onSliceClick !== undefined;\n\n  /**\n   * One sector, wrapped in its keyboard stop. recharts renders it inside a layer of its\n   * own that carries the pointer's hover and click, so those are untouched.\n   *\n   * Focus does NOT drive the recharts tooltip (`defaultIndex`), as it does in\n   * `SeriesChart`: an active pie sector is re-parented into an extra layer, which\n   * remounts this element and drops the focus it just took. The donut's centre is the\n   * keyboard's read-out instead.\n   */\n  const shape = useCallback(\n    (props: PieSectorShapeProps) => {\n      const {\n        index,\n        isActive: _isActive,\n        tabIndex: _tabIndex,\n        animationElapsedTime: _elapsed,\n        isAnimating: _animating,\n        isEntrance: _entrance,\n        // recharts hands the shape its own React `key` among the props. Spread into\n        // JSX, a `key` inside a props object is a warning on every render (React 19),\n        // so it is lifted out here and passed on its own.\n        key,\n        ...sector\n      } = props as PieSectorShapeProps & {\n        animationElapsedTime?: number;\n        isAnimating?: boolean;\n        isEntrance?: boolean;\n        key?: string | number | null;\n      };\n      const d = drawn[index];\n      if (!d) return <Sector key={key ?? undefined} {...sector} />;\n      const onKeyDown = (event: KeyboardEvent<SVGGElement>) => {\n        const step = horizontalStep(event.key, event.currentTarget);\n        let target: number | undefined;\n        if (step) target = index + step;\n        else if (event.key === \"ArrowDown\") target = index + 1;\n        else if (event.key === \"ArrowUp\") target = index - 1;\n        else if (event.key === \"Home\") target = 0;\n        else if (event.key === \"End\") target = drawn.length - 1;\n        if (target !== undefined) {\n          event.preventDefault();\n          // Round the circle: past the last slice is the first, as the eye goes.\n          refs.current[((target % drawn.length) + drawn.length) % drawn.length]?.focus();\n        } else if (clickable && (event.key === \"Enter\" || event.key === \" \")) {\n          event.preventDefault();\n          clickRef.current?.(d.slice.key, d.slice);\n        }\n      };\n      return (\n        <g\n          ref={(node) => {\n            refs.current[index] = node;\n          }}\n          role={clickable ? \"button\" : \"img\"}\n          // The first slice until the effect below moves the stop.\n          tabIndex={index === 0 ? 0 : -1}\n          aria-label={labels.slice(d.slice.label, formatValue(d.value), formatShare(d.share))}\n          data-slice={d.slice.key}\n          onKeyDown={onKeyDown}\n          onFocus={() => {\n            setStop(index);\n            setFocused(index);\n          }}\n          onBlur={() => setFocused(undefined)}\n          // CSS beats a presentation attribute, so this recolours the sector's own\n          // stroke for as long as it has keyboard focus.\n          className=\"outline-none [&:focus-visible>path]:stroke-primary\"\n        >\n          <Sector key={key ?? undefined} {...sector} />\n        </g>\n      );\n    },\n    [drawn, labels, formatValue, formatShare, clickable],\n  );\n\n  const label = useCallback(\n    (props: PieLabelRenderProps) => {\n      const d = drawn[props.index ?? -1];\n      const cx = Number(props.cx);\n      const cy = Number(props.cy);\n      const radius = Number(props.outerRadius);\n      const mid = Number(props.midAngle);\n      if (!d || d.share < minLabelShare || ![cx, cy, radius, mid].every(Number.isFinite)) return null;\n      const r = radius + 10 * scale;\n      const x = cx + r * Math.cos(-mid * RADIAN);\n      const y = cy + r * Math.sin(-mid * RADIAN);\n      const isValue = sliceLabels === \"value\";\n      return (\n        <text\n          x={x}\n          y={y}\n          textAnchor={x >= cx ? \"start\" : \"end\"}\n          dominantBaseline=\"central\"\n          fontSize={11 * scale}\n          fill=\"var(--text-secondary)\"\n          data-private={redact && isValue ? \"\" : undefined}\n          style={{ pointerEvents: \"none\" }}\n        >\n          {isValue ? formatValue(d.value) : formatShare(d.share)}\n        </text>\n      );\n    },\n    [drawn, minLabelShare, sliceLabels, redact, formatValue, formatShare, scale],\n  );\n\n  const withLabels = sliceLabels !== \"none\";\n  // Room outside the ring for the labels, or the ring fills the box.\n  const outer = withLabels ? 72 : 88;\n  const inner = variant === \"donut\" ? Math.round(outer * 0.6) : 0;\n\n  /**\n   * The `<Pie>`, as ONE element for as long as what it draws is unchanged. recharts\n   * keys its sectors by an animation id that is renewed whenever the Pie's props object\n   * is — i.e. on every render of the Pie — so re-rendering it remounts every sector,\n   * the one with focus included, which dropped the focus to <body> on the very state\n   * update that focusing a slice makes. An unchanged element is one React does not\n   * re-render, so the sectors stay put, and the roving tab stop is moved on them in\n   * place (the effect below).\n   */\n  const pie = useMemo(\n    () => (\n      <Pie\n        data={pieData}\n        dataKey=\"value\"\n        nameKey=\"label\"\n        cx=\"50%\"\n        cy=\"50%\"\n        outerRadius={`${outer}%`}\n        innerRadius={`${inner}%`}\n        startAngle={90}\n        endAngle={-270}\n        // The card showing through between the slices, as the treemap's gutter.\n        stroke=\"var(--bg-surface)\"\n        strokeWidth={2}\n        rootTabIndex={-1}\n        isAnimationActive={false}\n        shape={shape}\n        label={withLabels ? label : false}\n        labelLine={false}\n        onClick={\n          clickable\n            ? (_entry: unknown, index: number) => {\n                const d = drawn[index];\n                if (d) clickRef.current?.(d.slice.key, d.slice);\n              }\n            : undefined\n        }\n      />\n    ),\n    [pieData, drawn, shape, label, withLabels, outer, inner, clickable],\n  );\n\n  // The roving tab stop, moved on the sectors in place (they are not re-rendered).\n  useEffect(() => {\n    refs.current.forEach((el, i) => el?.setAttribute(\"tabindex\", i === current ? \"0\" : \"-1\"));\n  });\n\n  const legendEntries: LegendEntry[] = drawable.map((d) => ({\n    key: d.slice.key,\n    label: d.slice.label,\n    color: d.color,\n  }));\n\n  const emptyBox = (\n    <div className={cn(\"flex items-center justify-center text-sm text-muted\", box.className)} style={box.style}>\n      {empty ?? labels.empty}\n    </div>\n  );\n\n  // Nothing drawable at all: no chart, and no legend of switches for nothing.\n  if (drawable.length === 0) {\n    return (\n      <div {...rest} className={cn(\"w-full\", className)} style={style}>\n        {emptyBox}\n      </div>\n    );\n  }\n\n  const Content = redact ? RedactedTooltipContent : ChartTooltipContent;\n\n  return (\n    <div {...rest} className={cn(\"w-full\", className)} style={style}>\n      {drawn.length === 0 ? (\n        // Every slice switched off: the legend below is how they come back.\n        emptyBox\n      ) : (\n        <div role=\"group\" aria-label={labels.slices} className={cn(\"relative\", box.className)} style={box.style}>\n          <ChartContainer\n            config={PIE_CONFIG}\n            className={cn(\"h-full\", clickable && \"[&_.recharts-pie-sector]:cursor-pointer\")}\n          >\n            <RechartsPieChart accessibilityLayer={false}>\n              <ChartTooltip\n                content={\n                  <Content\n                    hideLabel\n                    valueFormatter={(v) => `${formatValue(v)} (${formatShare(total > 0 ? v / total : 0)})`}\n                  />\n                }\n              />\n              {pie}\n            </RechartsPieChart>\n          </ChartContainer>\n          {variant === \"donut\" && center && (\n            <div\n              data-private={redact ? \"\" : undefined}\n              // While a slice has keyboard focus the centre reads it out — the\n              // keyboard's tooltip. Hidden from assistive technology then: the slice's\n              // own name has just said the same.\n              aria-hidden={focusedSlice ? true : undefined}\n              className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center\"\n            >\n              {/* The label wraps from Large up, inside the hole's 40 % (text size\n                  §10.17, round 0.34 T1: the sweep read \"Spent in Sept…\"). */}\n              <span className=\"max-w-[40%] truncate-until-large text-xs text-muted\">\n                {focusedSlice ? focusedSlice.slice.label : (centerLabel ?? labels.total)}\n              </span>\n              <span className=\"max-w-[40%] truncate text-lg font-semibold tabular-nums text-primary\">\n                {focusedSlice ? formatValue(focusedSlice.value) : (centerValue ?? formatValue(total))}\n              </span>\n              {focusedSlice && (\n                <span className=\"text-xs tabular-nums text-muted\">{formatShare(focusedSlice.share)}</span>\n              )}\n            </div>\n          )}\n        </div>\n      )}\n      {legend === \"toggle\" && (\n        <ToggleLegend\n          entries={legendEntries}\n          hidden={hidden}\n          onToggle={toggle}\n          showSingle\n          className=\"justify-center\"\n          labels={{ legend: labels.legend }}\n        />\n      )}\n      {legend === \"static\" && (\n        <StaticLegend entries={legendEntries} className=\"justify-center\" aria-label={labels.legend} />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["drawable","total","drawn","pieData"]}
+{"version":3,"sources":["../../src/components/pie-chart.tsx"],"sourcesContent":["// A part-to-whole chart: a donut (or a full pie), one slice per category, its ANGLE\n// the category's share of what is drawn. Lifted out of kastlan, where the dashboard's\n// occupancy card and the reports' maintenance card each drew a recharts `<Pie>` by\n// hand inside the kit's `ChartContainer` — with a legend that could not switch\n// anything, slices a keyboard could not reach, and colours from a local hex list.\n//\n// It uses the kit's own chart shell (`ChartContainer`, `ChartTooltipContent`) and\n// ramp (`paletteFor`), so it re-skins with the palette like every other chart, and the\n// kit's own legends (`ToggleLegend`, `StaticLegend`).\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentProps, ComponentPropsWithRef, KeyboardEvent, ReactNode } from \"react\";\nimport { Pie, PieChart as RechartsPieChart, Sector } from \"recharts\";\nimport type { PieLabelRenderProps, PieSectorShapeProps } from \"recharts\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf, rovingTarget } from \"../lib/direction\";\nimport { shareFormat } from \"../lib/share-format\";\nimport { useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { paletteFor } from \"../theme/chart-palette\";\nimport { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from \"./chart\";\nimport { DEFAULT_PIE_CHART_LABELS, type PieChartLabels } from \"./pie-chart-labels\";\nimport { StaticLegend, ToggleLegend, toggleHidden, type LegendEntry } from \"./toggle-legend\";\nimport { useTextSize } from \"../theme/text-size\";\nimport { chartHeightProps, type ChartHeight } from \"./chart-height\";\nimport { formatWithMinus } from \"../lib/minus\";\n\n/** One slice. */\nexport interface PieChartSlice {\n  /** Stable key, handed back by {@link PieChartProps.onSliceClick} and used by the\n   *  legend's hidden set. Labels can collide; keys must not. */\n  key: string;\n  /** What the slice is called — in the legend, the tooltip and its accessible name. */\n  label: string;\n  /**\n   * The slice's size. A value that is not a positive finite number — `null` for a\n   * figure that is missing, a zero, a negative — is NOT drawn and not in the legend:\n   * an angle cannot be negative, and a zero-degree slice is one a pointer and a\n   * keyboard would both stop on to find nothing.\n   */\n  value: number | null | undefined;\n  /** Overrides the by-index palette colour (`paletteFor(i)`, `i` the slice's index in\n   *  `data` AS GIVEN) — a status that has a colour of its own. Any CSS colour. */\n  color?: string;\n}\n\n/**\n * Everything a `<div>` takes reaches the chart's root, so a test id or a `data-tour`\n * anchor can find it. `children` is the chart's own.\n */\nexport interface PieChartProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  data: readonly PieChartSlice[];\n  /** `\"donut\"` (default) leaves a hole with the total in it; `\"pie\"` is the full disc. */\n  variant?: \"donut\" | \"pie\";\n  /**\n   * Height of the plot (the legend is under it): a CSS length (`\"20rem\"`,\n   * `\"min(20rem, 50dvh)\"`), a Tailwind class, or px. Default `\"18.75rem\"` — 300 px at\n   * Normal, growing with the text size so the slice labels keep their room (0.32,\n   * docs/text-size-harmonization.md §10.10). A number does not follow the text size.\n   */\n  height?: ChartHeight;\n  /** How a value is written in the tooltip, the slice's name, a `\"value\"` slice label\n   *  and the donut's total. Default: `Intl.NumberFormat` in `locale`. */\n  formatValue?: (value: number) => string;\n  /**\n   * What is written beside each slice: its share (`\"percent\"`, the default), its\n   * value, or nothing. Only on slices of at least {@link minLabelShare} — a label on a\n   * sliver sits on its neighbour's. The figure is in the tooltip and the slice's name\n   * either way.\n   */\n  sliceLabels?: \"percent\" | \"value\" | \"none\";\n  /** The smallest share (0–1) that gets a slice label. Default 0.04. */\n  minLabelShare?: number;\n  /** Draw the donut's centre: {@link centerLabel} over {@link centerValue}. Default\n   *  `true`; ignored for `variant=\"pie\"`, which has no centre to draw in. */\n  center?: boolean;\n  /** The caption in the donut's centre. Default: `labels.total`. */\n  centerLabel?: ReactNode;\n  /** The figure in the donut's centre. Default: the drawn total through `formatValue`. */\n  centerValue?: ReactNode;\n  /**\n   * The legend under the chart. `\"toggle\"` (default): each entry is a switch that\n   * takes its slice off the chart, and the percentages are then of what is left —\n   * the shares always read \"of this picture\". `\"static\"`: a key with nothing to press.\n   */\n  legend?: \"toggle\" | \"static\" | \"none\";\n  /** The slices switched off, for a caller that owns the set (a URL, a saved view).\n   *  Left out, the chart keeps its own. */\n  hiddenSlices?: ReadonlySet<string>;\n  /** Called with the new hidden set whenever the legend switches a slice. */\n  onHiddenSlicesChange?: (hidden: ReadonlySet<string>) => void;\n  /** A slice was activated — by click, or Enter/Space on a focused slice. Makes each\n   *  slice a `role=\"button\"`. */\n  onSliceClick?: (key: string, slice: PieChartSlice) => void;\n  /**\n   * Tag every figure ON SCREEN `data-private` — the tooltip bubble, the centre and\n   * `\"value\"` slice labels — so the host's demo-mode rule blurs it. A percentage alone\n   * reveals no amount, so `\"percent\"` labels stay readable, and the slices themselves\n   * are not tagged: a blurred ring is no picture at all. So a slice's NAME says no\n   * amount either (0.52): \"Occupied: 60%\" (`labels.sliceShare`), not `labels.slice`.\n   */\n  redact?: boolean;\n  /** What to show with nothing to draw. Default: `labels.empty`. */\n  empty?: ReactNode;\n  /** BCP 47 tag for the numbers and percentages. Default: the provider's. */\n  locale?: string;\n  labels?: LabelOverride<PieChartLabels>;\n}\n\n/** A slice as drawn: only the ones with a positive value, in `data` order. */\ninterface DrawnSlice {\n  slice: PieChartSlice;\n  value: number;\n  color: string;\n  /** Of what is drawn, 0–1. */\n  share: number;\n}\n\n// Slices carry their own `fill`, and `ChartTooltipContent` falls back to it for the\n// swatch, so no series config is needed — and none is wanted, because a config key is a\n// CSS identifier and a slice key is the caller's data (see `ChartStyle`).\nconst PIE_CONFIG: ChartConfig = {};\n\nconst RADIAN = Math.PI / 180;\n\n/** The shared tooltip with the bubble tagged `data-private` — see the treemap's\n *  `RedactedTooltipContent` for why it has to BE the element recharts clones. */\nfunction RedactedTooltipContent(props: ComponentProps<typeof ChartTooltipContent>) {\n  return (\n    <div data-private>\n      <ChartTooltipContent {...props} />\n    </div>\n  );\n}\n\n/**\n * Part-to-whole chart: a donut (or `variant=\"pie\"`), one slice per\n * {@link PieChartSlice}, coloured from the chart ramp by index.\n *\n * **Every slice is reachable from the keyboard.** The slices are ONE tab stop (a roving\n * tabindex, as in the kit's grids): ←/→ and ↑/↓ step to the next and previous slice —\n * clockwise from twelve o'clock, the order of the legend — with ←/→ following the\n * reading direction in RTL; Home/End go to the first and last. Each slice is named\n * \"Label: value (xx%)\" (`labels.slice`), because a colour and an angle are nothing a\n * screen reader can say — under `redact` \"Label: xx%\" (`labels.sliceShare`) — and\n * focusing one reads it out in the donut's centre. With `onSliceClick`, Enter and Space\n * activate it as a click does.\n *\n * The legend switches slices off (`legend=\"toggle\"`); the percentages are always of\n * what is drawn. The plot is not mirrored in RTL (see `ChartContainer`); the legend\n * and the centre follow the page.\n *\n * With nothing to draw it says so (`empty`) rather than drawing an empty box.\n *\n * Needs `recharts`, like everything behind `@eifi1/ui-kit/chart`.\n */\nexport function PieChart({\n  data,\n  variant = \"donut\",\n  height = \"18.75rem\",\n  formatValue: formatValueProp,\n  sliceLabels = \"percent\",\n  minLabelShare = 0.04,\n  center = true,\n  centerLabel,\n  centerValue,\n  legend = \"toggle\",\n  hiddenSlices: hiddenProp,\n  onHiddenSlicesChange,\n  onSliceClick,\n  redact = false,\n  empty,\n  locale: localeProp,\n  labels: labelsProp,\n  className,\n  style,\n  ...rest\n}: PieChartProps) {\n  const labels = useKitLabels(\"pieChart\", DEFAULT_PIE_CHART_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  // The slice labels are SVG text in px: they follow the text size by this (§10.10).\n  const { scale } = useTextSize();\n  const box = chartHeightProps(height);\n  const numberFormat = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  // Memoised, like everything the sectors are drawn from: they must not be rebuilt on\n  // this component's own re-renders (see `pie` below).\n  const formatValue = useCallback(\n    (v: number) => (formatValueProp ? formatValueProp(v) : formatWithMinus(numberFormat, v)),\n    [formatValueProp, numberFormat],\n  );\n  // One decimal under 10 %, the rule Treemap says its shares by too (lib/share-format).\n  const formatShare = useMemo(() => shareFormat(locale), [locale]);\n\n  const [ownHidden, setOwnHidden] = useState<ReadonlySet<string>>(() => new Set());\n  const hidden = hiddenProp ?? ownHidden;\n  const toggle = (key: string) => {\n    const next = toggleHidden(hidden, key);\n    if (hiddenProp === undefined) setOwnHidden(next);\n    onHiddenSlicesChange?.(next);\n  };\n\n  // Coloured by index into `data` AS GIVEN, before anything is dropped, so a slice\n  // keeps its colour when a neighbour is switched off or has no value.\n  const { drawable, drawn, total, pieData } = useMemo(() => {\n    const drawable = data\n      .map((slice, i) => ({ slice, value: slice.value, color: slice.color ?? paletteFor(i) }))\n      .filter(\n        (d): d is { slice: PieChartSlice; value: number; color: string } =>\n          typeof d.value === \"number\" && Number.isFinite(d.value) && d.value > 0,\n      );\n    const shown = drawable.filter((d) => !hidden.has(d.slice.key));\n    const total = shown.reduce((acc, d) => acc + d.value, 0);\n    const drawn: DrawnSlice[] = shown.map((d) => ({ ...d, share: total > 0 ? d.value / total : 0 }));\n    const pieData = drawn.map((d) => ({\n      key: d.slice.key,\n      label: d.slice.label,\n      value: d.value,\n      fill: d.color,\n    }));\n    return { drawable, drawn, total, pieData };\n  }, [data, hidden]);\n\n  // The roving tab stop, and the slice that has focus (which the centre reads out).\n  const [stop, setStop] = useState(0);\n  const [focused, setFocused] = useState<number | undefined>(undefined);\n  const current = Math.min(stop, Math.max(0, drawn.length - 1));\n  const refs = useRef<(SVGGElement | null)[]>([]);\n  const focusedSlice = focused !== undefined ? drawn[focused] : undefined;\n\n  // Read through a ref: the sectors are drawn once per `data`, and a caller's inline\n  // `onSliceClick` is a new function every render.\n  const clickRef = useRef(onSliceClick);\n  useLayoutEffect(() => {\n    clickRef.current = onSliceClick;\n  });\n  const clickable = onSliceClick !== undefined;\n\n  /**\n   * One sector, wrapped in its keyboard stop. recharts renders it inside a layer of its\n   * own that carries the pointer's hover and click, so those are untouched.\n   *\n   * Focus does NOT drive the recharts tooltip (`defaultIndex`), as it does in\n   * `SeriesChart`: an active pie sector is re-parented into an extra layer, which\n   * remounts this element and drops the focus it just took. The donut's centre is the\n   * keyboard's read-out instead.\n   */\n  const shape = useCallback(\n    (props: PieSectorShapeProps) => {\n      const {\n        index,\n        isActive: _isActive,\n        tabIndex: _tabIndex,\n        animationElapsedTime: _elapsed,\n        isAnimating: _animating,\n        isEntrance: _entrance,\n        // recharts hands the shape its own React `key` among the props. Spread into\n        // JSX, a `key` inside a props object is a warning on every render (React 19),\n        // so it is lifted out here and passed on its own.\n        key,\n        ...sector\n      } = props as PieSectorShapeProps & {\n        animationElapsedTime?: number;\n        isAnimating?: boolean;\n        isEntrance?: boolean;\n        key?: string | number | null;\n      };\n      const d = drawn[index];\n      if (!d) return <Sector key={key ?? undefined} {...sector} />;\n      const onKeyDown = (event: KeyboardEvent<SVGGElement>) => {\n        // Round the circle: past the last slice is the first, as the eye goes.\n        const target = rovingTarget(event.key, dirOf(event.currentTarget), index, drawn.length, true);\n        if (target !== undefined) {\n          event.preventDefault();\n          refs.current[target]?.focus();\n        } else if (clickable && (event.key === \"Enter\" || event.key === \" \")) {\n          event.preventDefault();\n          clickRef.current?.(d.slice.key, d.slice);\n        }\n      };\n      return (\n        <g\n          ref={(node) => {\n            refs.current[index] = node;\n          }}\n          role={clickable ? \"button\" : \"img\"}\n          // The first slice until the effect below moves the stop.\n          tabIndex={index === 0 ? 0 : -1}\n          // Under `redact` with no amount: the ring is left untagged so it stays a picture,\n          // and its names are attributes a session replay or a redaction keyed on\n          // `[data-private]` reads as they are — \"Occupied: €6.00 (60%)\" told the amount the\n          // blurred centre and tooltip hid (0.52 code review; Marcel's decision).\n          aria-label={\n            redact\n              ? labels.sliceShare(d.slice.label, formatShare(d.share))\n              : labels.slice(d.slice.label, formatValue(d.value), formatShare(d.share))\n          }\n          data-slice={d.slice.key}\n          onKeyDown={onKeyDown}\n          onFocus={() => {\n            setStop(index);\n            setFocused(index);\n          }}\n          onBlur={() => setFocused(undefined)}\n          // CSS beats a presentation attribute, so this recolours the sector's own\n          // stroke for as long as it has keyboard focus.\n          className=\"outline-none [&:focus-visible>path]:stroke-primary\"\n        >\n          <Sector key={key ?? undefined} {...sector} />\n        </g>\n      );\n    },\n    [drawn, labels, formatValue, formatShare, clickable, redact],\n  );\n\n  const label = useCallback(\n    (props: PieLabelRenderProps) => {\n      const d = drawn[props.index ?? -1];\n      const cx = Number(props.cx);\n      const cy = Number(props.cy);\n      const radius = Number(props.outerRadius);\n      const mid = Number(props.midAngle);\n      if (!d || d.share < minLabelShare || ![cx, cy, radius, mid].every(Number.isFinite)) return null;\n      const r = radius + 10 * scale;\n      const x = cx + r * Math.cos(-mid * RADIAN);\n      const y = cy + r * Math.sin(-mid * RADIAN);\n      const isValue = sliceLabels === \"value\";\n      return (\n        <text\n          x={x}\n          y={y}\n          textAnchor={x >= cx ? \"start\" : \"end\"}\n          dominantBaseline=\"central\"\n          fontSize={11 * scale}\n          fill=\"var(--text-secondary)\"\n          data-private={redact && isValue ? \"\" : undefined}\n          style={{ pointerEvents: \"none\" }}\n        >\n          {isValue ? formatValue(d.value) : formatShare(d.share)}\n        </text>\n      );\n    },\n    [drawn, minLabelShare, sliceLabels, redact, formatValue, formatShare, scale],\n  );\n\n  const withLabels = sliceLabels !== \"none\";\n  // Room outside the ring for the labels, or the ring fills the box.\n  const outer = withLabels ? 72 : 88;\n  const inner = variant === \"donut\" ? Math.round(outer * 0.6) : 0;\n\n  /**\n   * The `<Pie>`, as ONE element for as long as what it draws is unchanged. recharts\n   * keys its sectors by an animation id that is renewed whenever the Pie's props object\n   * is — i.e. on every render of the Pie — so re-rendering it remounts every sector,\n   * the one with focus included, which dropped the focus to <body> on the very state\n   * update that focusing a slice makes. An unchanged element is one React does not\n   * re-render, so the sectors stay put, and the roving tab stop is moved on them in\n   * place (the effect below).\n   */\n  const pie = useMemo(\n    () => (\n      <Pie\n        data={pieData}\n        dataKey=\"value\"\n        nameKey=\"label\"\n        cx=\"50%\"\n        cy=\"50%\"\n        outerRadius={`${outer}%`}\n        innerRadius={`${inner}%`}\n        startAngle={90}\n        endAngle={-270}\n        // The card showing through between the slices, as the treemap's gutter.\n        stroke=\"var(--bg-surface)\"\n        strokeWidth={2}\n        rootTabIndex={-1}\n        isAnimationActive={false}\n        shape={shape}\n        label={withLabels ? label : false}\n        labelLine={false}\n        onClick={\n          clickable\n            ? (_entry: unknown, index: number) => {\n                const d = drawn[index];\n                if (d) clickRef.current?.(d.slice.key, d.slice);\n              }\n            : undefined\n        }\n      />\n    ),\n    [pieData, drawn, shape, label, withLabels, outer, inner, clickable],\n  );\n\n  // The roving tab stop, moved on the sectors in place (they are not re-rendered).\n  useEffect(() => {\n    refs.current.forEach((el, i) => el?.setAttribute(\"tabindex\", i === current ? \"0\" : \"-1\"));\n  });\n\n  const legendEntries: LegendEntry[] = drawable.map((d) => ({\n    key: d.slice.key,\n    label: d.slice.label,\n    color: d.color,\n  }));\n\n  const emptyBox = (\n    <div className={cn(\"flex items-center justify-center text-sm text-muted\", box.className)} style={box.style}>\n      {empty ?? labels.empty}\n    </div>\n  );\n\n  // Nothing drawable at all: no chart, and no legend of switches for nothing.\n  if (drawable.length === 0) {\n    return (\n      <div {...rest} className={cn(\"w-full\", className)} style={style}>\n        {emptyBox}\n      </div>\n    );\n  }\n\n  const Content = redact ? RedactedTooltipContent : ChartTooltipContent;\n\n  return (\n    <div {...rest} className={cn(\"w-full\", className)} style={style}>\n      {drawn.length === 0 ? (\n        // Every slice switched off: the legend below is how they come back.\n        emptyBox\n      ) : (\n        <div role=\"group\" aria-label={labels.slices} className={cn(\"relative\", box.className)} style={box.style}>\n          <ChartContainer\n            config={PIE_CONFIG}\n            className={cn(\"h-full\", clickable && \"[&_.recharts-pie-sector]:cursor-pointer\")}\n          >\n            <RechartsPieChart accessibilityLayer={false}>\n              <ChartTooltip\n                content={\n                  <Content\n                    hideLabel\n                    valueFormatter={(v) => `${formatValue(v)} (${formatShare(total > 0 ? v / total : 0)})`}\n                  />\n                }\n              />\n              {pie}\n            </RechartsPieChart>\n          </ChartContainer>\n          {variant === \"donut\" && center && (\n            <div\n              data-private={redact ? \"\" : undefined}\n              // While a slice has keyboard focus the centre reads it out — the\n              // keyboard's tooltip. Hidden from assistive technology then: the slice's\n              // own name has just said the same.\n              aria-hidden={focusedSlice ? true : undefined}\n              className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center\"\n            >\n              {/* The label wraps from Large up, inside the hole's 40 % (text size\n                  §10.17, round 0.34 T1: the sweep read \"Spent in Sept…\"). */}\n              <span className=\"max-w-[40%] truncate-until-large text-xs text-muted\">\n                {focusedSlice ? focusedSlice.slice.label : (centerLabel ?? labels.total)}\n              </span>\n              <span className=\"max-w-[40%] truncate text-lg font-semibold tabular-nums text-primary\">\n                {focusedSlice ? formatValue(focusedSlice.value) : (centerValue ?? formatValue(total))}\n              </span>\n              {focusedSlice && (\n                <span className=\"text-xs tabular-nums text-muted\">{formatShare(focusedSlice.share)}</span>\n              )}\n            </div>\n          )}\n        </div>\n      )}\n      {legend === \"toggle\" && (\n        <ToggleLegend\n          entries={legendEntries}\n          hidden={hidden}\n          onToggle={toggle}\n          showSingle\n          className=\"justify-center\"\n          labels={{ legend: labels.legend }}\n        />\n      )}\n      {legend === \"static\" && (\n        <StaticLegend entries={legendEntries} className=\"justify-center\" aria-label={labels.legend} />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["drawable","total","drawn","pieData"]}

package/dist/components/popover.d.ts

@@ -26,6 +26,9 @@ export interface PopoverProps extends Omit<ComponentPropsWithoutRef<"div">, "chi
         toggle: () => void;
         ref: RefObject<HTMLButtonElement | null>;
     }) => ReactNode;
+    /** The panel's content. `close` shuts the panel and, when focus is in it, puts focus
+     *  on the trigger before returning — so a dialog the same handler opens gives it back
+     *  there (0.52). */
     children: (close: () => void) => ReactNode;
     /**
      * The panel's width: `"18rem"` (the default) grows with the text size — the panel

package/dist/components/popover.js

@@ -32,6 +32,11 @@ function Popover({
   const [open, setOpen] = useState(false);
   const [dir, setDir] = useState("ltr");
   const close = () => setOpen(false);
+  const closeFromPanel = () => {
+    const focusInside = panelRef.current?.contains(document.activeElement) ?? false;
+    setOpen(false);
+    if (focusInside) triggerRef.current?.focus();
+  };
   const toggle = () => {
     setDir(dirOf(triggerRef.current));
     setOpen((v) => !v);
@@ -106,7 +111,8 @@ function Popover({
             "z-50 overflow-y-auto rounded-md border border-subtle bg-surface p-3 shadow-lg outline-none",
             className
           ),
-          children: children(close)
+          // eslint-disable-next-line react-hooks/refs -- handed to the items' handlers: it reads the trigger and the focus when an item is chosen, never while rendering
+          children: children(closeFromPanel)
         }
       ),
       document.body

package/dist/components/popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { anchoredInline, useAnchoredPanel, viewportSize } from \"../hooks/use-anchored-panel\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { lengthPx, useRemPx, type RemLength } from \"../hooks/use-breakpoint\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf } from \"../lib/direction\";\nimport type { Direction } from \"../lib/direction\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_POPOVER_LABELS } from \"./popover-labels\";\n// From ../lib/refs, not field-parts (round 0.36): field-parts renders a HelpPopover for a\n// field's `help`, so importing from there would close a cycle, as it did for Tooltip.\nimport { mergeRefs } from \"../lib/refs\";\n\n/** The panel's accessible name. A `role=\"dialog\"` with no name announces as \"dialog\"\n *  and nothing else, which is worse than the unlabelled div it replaced — so it is a\n *  prop with an English default, like every other string this package renders. Callers\n *  should pass the control's own name (\"Filter\", \"Choose a date\"); the default is only\n *  there so an unmigrated call site is still named. */\nexport interface PopoverLabels {\n  panel: string;\n}\n\n// Defined in ./popover-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_POPOVER_LABELS };\n\n/**\n * Exported, and extending the `<div>` attributes, so a consumer wrapping this — which is\n * what `DateField` and `FilterPopover` in this very package do — can hand anything\n * through to the PANEL: a `data-tour` anchor for the kit's own guided tour, a test id,\n * an `aria-describedby`, or an `aria-label` naming this particular popover.\n *\n * `children` is omitted from those attributes rather than inherited: here it is a render\n * prop taking the panel's `close`, not a `ReactNode`, so the two cannot be reconciled.\n */\nexport interface PopoverProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  trigger: (state: { open: boolean; toggle: () => void; ref: RefObject<HTMLButtonElement | null> }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  /**\n   * The panel's width: `\"18rem\"` (the default) grows with the text size — the panel\n   * holds text, and a 288 px calendar at 150 % cut its own month off (0.32,\n   * docs/text-size-harmonization.md §3.2). A plain number is px, fixed, as before.\n   * Either way the panel is never wider than the viewport less 8 px a side: 18rem is\n   * 432 px at Extra large, more than a 360 px phone has.\n   */\n  width?: number | RemLength;\n  labels?: LabelOverride<PopoverLabels>;\n  /** Id for the panel, so a trigger wearing `role=\"combobox\"` can `aria-controls` it.\n   *  Required by ARIA on that role, and the panel is rendered here rather than by the\n   *  caller, so the id has to come in from outside. */\n  panelId?: string;\n  /** Extra classes for the PANEL. The trigger is the caller's own element. */\n  className?: string;\n  /** The PANEL, while it is open — where the rest of the props go (0.34, API-2, refactor\n   *  audit 2026-10). Merged with the panel's own ref (focus trap, outside click), so\n   *  neither loses it. The trigger is the caller's own element, ref and all. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** 288 px at Normal, in rem so it follows the text size (§3.2). */\nconst POPOVER_WIDTH: RemLength = \"18rem\";\n\n/** The gap the panel keeps from either edge of the viewport, in px. */\nconst EDGE = 8;\n\n/**\n * Portal-rendered popover anchored under its trigger button. The panel is fixed\n * to the viewport (so table/overflow ancestors can't clip it) and re-aligns on\n * scroll/resize; it closes on outside-click and Escape.\n *\n * ## Trapped, not merely focused — and why, because it is the closer call\n *\n * The audit's finding was that this panel *\"portals out of the tab order with no role\n * and no focus move\"*: Tab from the trigger went straight past the panel into the page\n * behind it, so the calendar, the calculator keypad and every column filter in the kit\n * were mouse-only. Two shapes fix that, and a popover is not automatically a dialog, so\n * this was chosen rather than inherited:\n *\n *  - **The light one** — move focus in on open, hand it back on close, and let Tab walk\n *    OUT of the panel into whatever follows the trigger. That is the right shape for a\n *    non-modal popover sitting inline in the document.\n *  - **The trap** — Tab cycles inside the panel; Escape and a click outside are the\n *    ways out. What is here.\n *\n * The deciding fact is the portal. This panel is rendered to the END of `<body>`, not\n * beside its trigger, so \"let Tab walk out\" does not mean \"carry on from the trigger\" —\n * it means land at the end of the document, several hundred controls from where the\n * user was. Tabbing out of it would be a worse place to arrive than the one the finding\n * complains about, and fixing that properly needs a sentinel-and-return dance that\n * nothing in this package has. The trap gets the user back to the trigger every time,\n * because `useFocusTrap` restores focus on close.\n *\n * And the panels this kit actually opens are self-contained: pick a date, tap out a\n * sum, narrow a column. Each of them commits and closes, and each already has two\n * documented ways out wired above — Escape and an outside press — so containment costs\n * a keyboard user nothing they had.\n *\n * **It stays non-modal in every other respect**, deliberately: no backdrop, no body\n * scroll lock, and no `aria-modal`, so the page behind is still readable by a screen\n * reader, still scrollable, and still clickable — clicking it is what dismisses this.\n * Only Tab is contained. A popover that took the page away as well would be a\n * {@link Modal}, and there is one of those.\n */\nexport function Popover({\n  trigger,\n  children,\n  width = POPOVER_WIDTH,\n  labels,\n  panelId,\n  className,\n  style,\n  \"aria-label\": ariaLabel,\n  onKeyDown: onKeyDownProp,\n  ref,\n  ...rest\n}: PopoverProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const setPanel = useMemo(() => mergeRefs(panelRef, ref), [ref]);\n  const [open, setOpen] = useState(false);\n  // The trigger's reading direction, read when it is pressed. The panel is portalled to\n  // <body>, out of any `dir=\"rtl\"` subtree the trigger sits in, so without carrying it\n  // across a right-to-left calendar or filter rendered left-to-right.\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  const close = () => setOpen(false);\n  const toggle = () => {\n    setDir(dirOf(triggerRef.current));\n    setOpen((v) => !v);\n  };\n  // prop > `<UiKitProvider labels={{ popover }}>` > English. The provider's\n  // `popover.panel` is only the last-resort name for a panel no caller named.\n  const text = useKitLabels(\"popover\", DEFAULT_POPOVER_LABELS, labels);\n\n  // Align the panel's END edge to the trigger's — right in LTR, left in RTL; it was\n  // always `rect.right`, so an RTL panel hung off the wrong side — and clamp it\n  // horizontally; the\n  // hook owns the vertical half — below by default, flipped above (and height-capped)\n  // when that is where the room is, e.g. once a mobile keyboard has eaten the bottom\n  // of the screen (feedback #135). It re-measures on scroll/resize.\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  // In px for the arithmetic below, at the text size in force; capped at the glass — the\n  // root's client width, not `innerWidth`, which on a phone is the layout viewport grown\n  // by whatever overflows (live #381, Wave 2 DUP-7).\n  const remPx = useRemPx();\n  const glass = rect ? viewportSize().width : 0;\n  const panelWidth = rect ? Math.min(lengthPx(width, remPx), Math.max(0, glass - 2 * EDGE)) : 0;\n  const pos = rect\n    ? {\n        // Flipped above, the panel hangs from its bottom edge, so one shorter than its\n        // cap still meets the trigger (keksdose K1); the edge not in use is cleared.\n        top: placement.above ? undefined : placement.top,\n        bottom: placement.above ? placement.bottom : undefined,\n        left: anchoredInline(rect, panelWidth, { dir, align: \"end\", edge: EDGE, viewportWidth: glass }).left,\n      }\n    : null;\n\n  // A press in a list opened from inside — a CurrencySelect's, a combobox's, another\n  // popover's — reaches the panel through the React tree and is inside (dev#623).\n  const markInside = useOutsideClick([triggerRef, panelRef], close, open);\n  // A layer on the Escape stack while open (Wave 2, DUP-1): a list opened inside closes\n  // first, and the dialog this popover sits in only after it — the calculator on an\n  // amount field in a Modal is exactly that.\n  const layer = useDismissLayer(open, close);\n\n  useFocusTrap(panelRef, {\n    active: open && pos !== null,\n    // The panel keeps a focus one of its own children has already taken. `FilterPopover`\n    // autofocuses its text box on mount — that is what the press on \"Filter\" was FOR,\n    // and it is a prop there precisely so the popover keeps it — and a trap that\n    // unconditionally focused the container would take it straight back off again,\n    // one effect later and invisibly.\n    initialFocus: () => {\n      const panel = panelRef.current;\n      const active = document.activeElement;\n      return panel?.contains(active) ? (active as HTMLElement) : panel;\n    },\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    // A caller's own handler first (0.32.2: RowActions stops Enter / Space at the panel);\n    // it used to be dropped, overwritten by this one. A `preventDefault()` on Escape\n    // there keeps the popover open — the owner's claim, as on the dialogs. And as there,\n    // the handler sees Escape only while this popover is the layer on top: a tooltip or a\n    // menu open over it takes that press first (round 0.35 R2, the dialogs' rule).\n    runOwnKeyDown(e, onKeyDownProp, layer);\n    // Focus is in here, the normal case: the key is handed to the top layer and STOPPED,\n    // so it does not travel on up the React tree to a dialog around the popover.\n    takeEscape(e);\n  };\n\n  return (\n    <>\n      {trigger({ open, toggle, ref: triggerRef })}\n      {open &&\n        pos &&\n        createPortal(\n          /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the\n             dialog container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for\n             whatever inside it holds focus. */\n          <div\n            // `...rest` first: the role, the id the trigger's `aria-controls` points at,\n            // the `tabIndex` the trap needs and the measured position are what make this\n            // a popover, and a caller reaching for a `data-tour` anchor must not be able\n            // to remove one of them by accident.\n            {...rest}\n            ref={setPanel}\n            // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6).\n            data-kit-layer=\"\"\n            role=\"dialog\"\n            id={panelId}\n            // The caller's own `aria-label` wins over {@link PopoverLabels.panel}, which\n            // is the package's English fallback for an unnamed panel. Both name the same\n            // element; the DOM spelling is the one being standardised on, so where both\n            // are present it is the one that survives.\n            aria-label={ariaLabel ?? text.panel}\n            dir={rest.dir ?? dir}\n            // Without it the panel cannot take focus at all, and the trap above would\n            // silently do nothing on a panel whose children are not yet tabbable.\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            onPointerDownCapture={(e) => {\n              rest.onPointerDownCapture?.(e);\n              markInside(e);\n            }}\n            style={{\n              // Merged over the caller's, never replaced by it: these are measured\n              // against the trigger every scroll and resize, and a panel that dropped\n              // them would paint at the top-left of the viewport.\n              ...style,\n              position: \"fixed\",\n              top: pos.top,\n              bottom: pos.bottom,\n              left: pos.left,\n              width: panelWidth,\n              maxHeight: placement.maxHeight,\n            }}\n            className={cn(\n              \"z-50 overflow-y-auto rounded-md border border-subtle bg-surface p-3 shadow-lg outline-none\",\n              className,\n            )}\n          >\n            {children(close)}\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { anchoredInline, useAnchoredPanel, viewportSize } from \"../hooks/use-anchored-panel\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { lengthPx, useRemPx, type RemLength } from \"../hooks/use-breakpoint\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf } from \"../lib/direction\";\nimport type { Direction } from \"../lib/direction\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_POPOVER_LABELS } from \"./popover-labels\";\n// From ../lib/refs, not field-parts (round 0.36): field-parts renders a HelpPopover for a\n// field's `help`, so importing from there would close a cycle, as it did for Tooltip.\nimport { mergeRefs } from \"../lib/refs\";\n\n/** The panel's accessible name. A `role=\"dialog\"` with no name announces as \"dialog\"\n *  and nothing else, which is worse than the unlabelled div it replaced — so it is a\n *  prop with an English default, like every other string this package renders. Callers\n *  should pass the control's own name (\"Filter\", \"Choose a date\"); the default is only\n *  there so an unmigrated call site is still named. */\nexport interface PopoverLabels {\n  panel: string;\n}\n\n// Defined in ./popover-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_POPOVER_LABELS };\n\n/**\n * Exported, and extending the `<div>` attributes, so a consumer wrapping this — which is\n * what `DateField` and `FilterPopover` in this very package do — can hand anything\n * through to the PANEL: a `data-tour` anchor for the kit's own guided tour, a test id,\n * an `aria-describedby`, or an `aria-label` naming this particular popover.\n *\n * `children` is omitted from those attributes rather than inherited: here it is a render\n * prop taking the panel's `close`, not a `ReactNode`, so the two cannot be reconciled.\n */\nexport interface PopoverProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  trigger: (state: { open: boolean; toggle: () => void; ref: RefObject<HTMLButtonElement | null> }) => ReactNode;\n  /** The panel's content. `close` shuts the panel and, when focus is in it, puts focus\n   *  on the trigger before returning — so a dialog the same handler opens gives it back\n   *  there (0.52). */\n  children: (close: () => void) => ReactNode;\n  /**\n   * The panel's width: `\"18rem\"` (the default) grows with the text size — the panel\n   * holds text, and a 288 px calendar at 150 % cut its own month off (0.32,\n   * docs/text-size-harmonization.md §3.2). A plain number is px, fixed, as before.\n   * Either way the panel is never wider than the viewport less 8 px a side: 18rem is\n   * 432 px at Extra large, more than a 360 px phone has.\n   */\n  width?: number | RemLength;\n  labels?: LabelOverride<PopoverLabels>;\n  /** Id for the panel, so a trigger wearing `role=\"combobox\"` can `aria-controls` it.\n   *  Required by ARIA on that role, and the panel is rendered here rather than by the\n   *  caller, so the id has to come in from outside. */\n  panelId?: string;\n  /** Extra classes for the PANEL. The trigger is the caller's own element. */\n  className?: string;\n  /** The PANEL, while it is open — where the rest of the props go (0.34, API-2, refactor\n   *  audit 2026-10). Merged with the panel's own ref (focus trap, outside click), so\n   *  neither loses it. The trigger is the caller's own element, ref and all. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** 288 px at Normal, in rem so it follows the text size (§3.2). */\nconst POPOVER_WIDTH: RemLength = \"18rem\";\n\n/** The gap the panel keeps from either edge of the viewport, in px. */\nconst EDGE = 8;\n\n/**\n * Portal-rendered popover anchored under its trigger button. The panel is fixed\n * to the viewport (so table/overflow ancestors can't clip it) and re-aligns on\n * scroll/resize; it closes on outside-click and Escape.\n *\n * ## Trapped, not merely focused — and why, because it is the closer call\n *\n * The audit's finding was that this panel *\"portals out of the tab order with no role\n * and no focus move\"*: Tab from the trigger went straight past the panel into the page\n * behind it, so the calendar, the calculator keypad and every column filter in the kit\n * were mouse-only. Two shapes fix that, and a popover is not automatically a dialog, so\n * this was chosen rather than inherited:\n *\n *  - **The light one** — move focus in on open, hand it back on close, and let Tab walk\n *    OUT of the panel into whatever follows the trigger. That is the right shape for a\n *    non-modal popover sitting inline in the document.\n *  - **The trap** — Tab cycles inside the panel; Escape and a click outside are the\n *    ways out. What is here.\n *\n * The deciding fact is the portal. This panel is rendered to the END of `<body>`, not\n * beside its trigger, so \"let Tab walk out\" does not mean \"carry on from the trigger\" —\n * it means land at the end of the document, several hundred controls from where the\n * user was. Tabbing out of it would be a worse place to arrive than the one the finding\n * complains about, and fixing that properly needs a sentinel-and-return dance that\n * nothing in this package has. The trap gets the user back to the trigger every time,\n * because `useFocusTrap` restores focus on close.\n *\n * And the panels this kit actually opens are self-contained: pick a date, tap out a\n * sum, narrow a column. Each of them commits and closes, and each already has two\n * documented ways out wired above — Escape and an outside press — so containment costs\n * a keyboard user nothing they had.\n *\n * **It stays non-modal in every other respect**, deliberately: no backdrop, no body\n * scroll lock, and no `aria-modal`, so the page behind is still readable by a screen\n * reader, still scrollable, and still clickable — clicking it is what dismisses this.\n * Only Tab is contained. A popover that took the page away as well would be a\n * {@link Modal}, and there is one of those.\n */\nexport function Popover({\n  trigger,\n  children,\n  width = POPOVER_WIDTH,\n  labels,\n  panelId,\n  className,\n  style,\n  \"aria-label\": ariaLabel,\n  onKeyDown: onKeyDownProp,\n  ref,\n  ...rest\n}: PopoverProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const setPanel = useMemo(() => mergeRefs(panelRef, ref), [ref]);\n  const [open, setOpen] = useState(false);\n  // The trigger's reading direction, read when it is pressed. The panel is portalled to\n  // <body>, out of any `dir=\"rtl\"` subtree the trigger sits in, so without carrying it\n  // across a right-to-left calendar or filter rendered left-to-right.\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  const close = () => setOpen(false);\n  // The `close` the children get also hands focus to the trigger, AT ONCE, when it is\n  // inside the panel. The trap restores it too, but only after the commit — and a dialog\n  // opened in the same handler records its own restore target during that commit's\n  // render: the menu item that is about to go. RowActions' \"Delete\" asks first, and the\n  // answered confirm dropped focus on <body>, mid-table (refactor audit 2026-10-30,\n  // INP-2). Escape and an outside press keep the plain close: nothing opens after them.\n  const closeFromPanel = () => {\n    const focusInside = panelRef.current?.contains(document.activeElement) ?? false;\n    setOpen(false);\n    if (focusInside) triggerRef.current?.focus();\n  };\n  const toggle = () => {\n    setDir(dirOf(triggerRef.current));\n    setOpen((v) => !v);\n  };\n  // prop > `<UiKitProvider labels={{ popover }}>` > English. The provider's\n  // `popover.panel` is only the last-resort name for a panel no caller named.\n  const text = useKitLabels(\"popover\", DEFAULT_POPOVER_LABELS, labels);\n\n  // Align the panel's END edge to the trigger's — right in LTR, left in RTL; it was\n  // always `rect.right`, so an RTL panel hung off the wrong side — and clamp it\n  // horizontally; the\n  // hook owns the vertical half — below by default, flipped above (and height-capped)\n  // when that is where the room is, e.g. once a mobile keyboard has eaten the bottom\n  // of the screen (feedback #135). It re-measures on scroll/resize.\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  // In px for the arithmetic below, at the text size in force; capped at the glass — the\n  // root's client width, not `innerWidth`, which on a phone is the layout viewport grown\n  // by whatever overflows (live #381, Wave 2 DUP-7).\n  const remPx = useRemPx();\n  const glass = rect ? viewportSize().width : 0;\n  const panelWidth = rect ? Math.min(lengthPx(width, remPx), Math.max(0, glass - 2 * EDGE)) : 0;\n  const pos = rect\n    ? {\n        // Flipped above, the panel hangs from its bottom edge, so one shorter than its\n        // cap still meets the trigger (keksdose K1); the edge not in use is cleared.\n        top: placement.above ? undefined : placement.top,\n        bottom: placement.above ? placement.bottom : undefined,\n        left: anchoredInline(rect, panelWidth, { dir, align: \"end\", edge: EDGE, viewportWidth: glass }).left,\n      }\n    : null;\n\n  // A press in a list opened from inside — a CurrencySelect's, a combobox's, another\n  // popover's — reaches the panel through the React tree and is inside (dev#623).\n  const markInside = useOutsideClick([triggerRef, panelRef], close, open);\n  // A layer on the Escape stack while open (Wave 2, DUP-1): a list opened inside closes\n  // first, and the dialog this popover sits in only after it — the calculator on an\n  // amount field in a Modal is exactly that.\n  const layer = useDismissLayer(open, close);\n\n  useFocusTrap(panelRef, {\n    active: open && pos !== null,\n    // The panel keeps a focus one of its own children has already taken. `FilterPopover`\n    // autofocuses its text box on mount — that is what the press on \"Filter\" was FOR,\n    // and it is a prop there precisely so the popover keeps it — and a trap that\n    // unconditionally focused the container would take it straight back off again,\n    // one effect later and invisibly.\n    initialFocus: () => {\n      const panel = panelRef.current;\n      const active = document.activeElement;\n      return panel?.contains(active) ? (active as HTMLElement) : panel;\n    },\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    // A caller's own handler first (0.32.2: RowActions stops Enter / Space at the panel);\n    // it used to be dropped, overwritten by this one. A `preventDefault()` on Escape\n    // there keeps the popover open — the owner's claim, as on the dialogs. And as there,\n    // the handler sees Escape only while this popover is the layer on top: a tooltip or a\n    // menu open over it takes that press first (round 0.35 R2, the dialogs' rule).\n    runOwnKeyDown(e, onKeyDownProp, layer);\n    // Focus is in here, the normal case: the key is handed to the top layer and STOPPED,\n    // so it does not travel on up the React tree to a dialog around the popover.\n    takeEscape(e);\n  };\n\n  return (\n    <>\n      {trigger({ open, toggle, ref: triggerRef })}\n      {open &&\n        pos &&\n        createPortal(\n          /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the\n             dialog container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for\n             whatever inside it holds focus. */\n          <div\n            // `...rest` first: the role, the id the trigger's `aria-controls` points at,\n            // the `tabIndex` the trap needs and the measured position are what make this\n            // a popover, and a caller reaching for a `data-tour` anchor must not be able\n            // to remove one of them by accident.\n            {...rest}\n            ref={setPanel}\n            // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6).\n            data-kit-layer=\"\"\n            role=\"dialog\"\n            id={panelId}\n            // The caller's own `aria-label` wins over {@link PopoverLabels.panel}, which\n            // is the package's English fallback for an unnamed panel. Both name the same\n            // element; the DOM spelling is the one being standardised on, so where both\n            // are present it is the one that survives.\n            aria-label={ariaLabel ?? text.panel}\n            dir={rest.dir ?? dir}\n            // Without it the panel cannot take focus at all, and the trap above would\n            // silently do nothing on a panel whose children are not yet tabbable.\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            onPointerDownCapture={(e) => {\n              rest.onPointerDownCapture?.(e);\n              markInside(e);\n            }}\n            style={{\n              // Merged over the caller's, never replaced by it: these are measured\n              // against the trigger every scroll and resize, and a panel that dropped\n              // them would paint at the top-left of the viewport.\n              ...style,\n              position: \"fixed\",\n              top: pos.top,\n              bottom: pos.bottom,\n              left: pos.left,\n              width: panelWidth,\n              maxHeight: placement.maxHeight,\n            }}\n            className={cn(\n              \"z-50 overflow-y-auto rounded-md border border-subtle bg-surface p-3 shadow-lg outline-none\",\n              className,\n            )}\n          >\n            {\n              // eslint-disable-next-line react-hooks/refs -- handed to the items' handlers: it reads the trigger and the focus when an item is chosen, never while rendering\n              children(closeFromPanel)\n            }\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/row-actions.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isValidElement, useContext } from "react";
 import { MoreHorizontal } from "lucide-react";
 import { cn } from "../lib/cn.js";
+import { hasContent } from "../lib/presence.js";
 import { useLargeText } from "../hooks/use-large-text.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { Popover } from "./popover.js";
@@ -180,7 +181,7 @@ function stopActivationKeys(e) {
 }
 function useActionHref(action) {
   const reason = useCommitReason(action.commit, action.disabledReason);
-  const refused = reason !== void 0 && reason !== null && reason !== false && reason !== "";
+  const refused = hasContent(reason);
   return action.href !== void 0 && !action.pending && !refused ? action.href : void 0;
 }
 function MenuAction({