@persona/design-system 0.10.11 → 0.10.12

package/dist/lib/useCloseFocus.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCloseFocus.mjs","names":[],"sources":["../../src/lib/useCloseFocus.ts"],"sourcesContent":["import { type Ref, type RefObject, useCallback, useRef } from 'react';\n\ntype OutsideEvent = CustomEvent<{ originalEvent: PointerEvent | FocusEvent }>;\n\nexport interface CloseFocusOptions {\n  /** Runs once, when the close starts. `preventDefault` keeps focus where it is. */\n  onCloseAutoFocus?: (event: Event) => void;\n  /** Runs when the content reopens before its exit ends; Radix doesn't run it again then. */\n  onOpenAutoFocus?: (event: Event) => void;\n  onInteractOutside?: (event: OutsideEvent) => void;\n  onEscapeKeyDown?: (event: KeyboardEvent) => void;\n  /**\n   * Modal content closes at once (it has no exit), so Radix's own focus handling is left alone:\n   * until unmount Radix hides the rest of the page from assistive technology.\n   */\n  modal?: boolean;\n  /** Where focus returns. Falls back to the element whose `aria-controls` names the content. */\n  triggerRef?: RefObject<HTMLElement | null>;\n  /** What takes focus on a reopen mid-exit: the first tabbable element, or the content itself. */\n  reopenFocus?: 'first-tabbable' | 'content';\n}\n\nexport interface CloseFocus {\n  ref: (node: HTMLElement | null) => void;\n  onCloseAutoFocus?: (event: Event) => void;\n  onInteractOutside?: (event: OutsideEvent) => void;\n  onEscapeKeyDown?: (event: KeyboardEvent) => void;\n  'data-modal'?: '';\n}\n\nconst TABBABLE =\n  'button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Returns focus when a Radix popover or menu starts to close, instead of when its exit animation\n * ends and it unmounts, and stops the closing content taking input. Spread the result onto the\n * Radix `Content`, after the consumer's props.\n *\n * At close start it calls `onCloseAutoFocus` and, unless that's prevented or the close came from\n * an interaction outside, focuses the trigger, as Radix would. Radix's own call at unmount is then\n * prevented. Content that unmounts at once (no exit running) is left to Radix.\n */\nexport function useCloseFocus(options: CloseFocusOptions): CloseFocus {\n  const latest = useRef(options);\n  latest.current = options;\n  const state = useRef({\n    open: true,\n    interactedOutside: false,\n    trigger: null as HTMLElement | null,\n    handled: new WeakSet<EventTarget>(),\n    observer: null as MutationObserver | null,\n    node: null as HTMLElement | null,\n  });\n\n  const findTrigger = (node: HTMLElement): HTMLElement | null => {\n    // The `aria-controls` match wins: a raw Root nested in a PDS Popover inherits its triggerRef.\n    const controlled = node.id\n      ? node.ownerDocument.querySelector<HTMLElement>(\n          `[aria-controls=\"${node.id.replace(/[\"\\\\]/g, '\\\\$&')}\"]`,\n        )\n      : null;\n    return controlled ?? latest.current.triggerRef?.current ?? state.current.trigger;\n  };\n\n  const opened = (node: HTMLElement) => {\n    const s = state.current;\n    s.open = true;\n    s.interactedOutside = false;\n    s.trigger = findTrigger(node);\n    if (!s.handled.has(node)) {\n      return;\n    }\n    s.handled.delete(node);\n    node.removeAttribute('inert');\n    const event = new CustomEvent('focusScope.autoFocusOnMount', { cancelable: true });\n    latest.current.onOpenAutoFocus?.(event);\n    if (!event.defaultPrevented) {\n      const target =\n        latest.current.reopenFocus === 'content'\n          ? node\n          : (node.querySelector<HTMLElement>(TABBABLE) ?? node);\n      target.focus({ preventScroll: true });\n    }\n  };\n\n  const closed = (node: HTMLElement) => {\n    const s = state.current;\n    s.open = false;\n    if (!node.isConnected) {\n      return;\n    }\n    s.handled.add(node);\n    const active = node.ownerDocument.activeElement;\n    // A portaled child layer closing in the same commit (a menu item that closes its Popover)\n    // holds focus outside `node`, and its own trigger is about to go inert with `node`.\n    const focusInside =\n      active == null ||\n      active === node.ownerDocument.body ||\n      node.contains(active) ||\n      !!active.closest('[data-radix-popper-content-wrapper] [data-state=\"closed\"]');\n    const interactedOutside = s.interactedOutside;\n    const restore = () => {\n      if (s.open) {\n        return;\n      }\n      const event = new CustomEvent('focusScope.autoFocusOnUnmount', { cancelable: true });\n      latest.current.onCloseAutoFocus?.(event);\n      if (!event.defaultPrevented && focusInside && !interactedOutside) {\n        findTrigger(node)?.focus({ preventScroll: true });\n      }\n    };\n    // Focus moved during a keydown takes that key's keypress, so an Enter that closes from a\n    // field would click the trigger and reopen it. Radix restores after a task for the same reason.\n    if (node.ownerDocument.defaultView?.event?.type === 'keydown') {\n      setTimeout(restore, 0);\n    } else {\n      restore();\n    }\n    node.setAttribute('inert', '');\n  };\n\n  const ref = useCallback((node: HTMLElement | null) => {\n    const s = state.current;\n    // Radix composes its content refs afresh on every render, so React detaches (null) and\n    // reattaches the same node each time; only a new node starts a new open.\n    if (!node || node === s.node) {\n      return;\n    }\n    s.observer?.disconnect();\n    s.observer = null;\n    s.node = node;\n    if (latest.current.modal) {\n      return;\n    }\n    s.open = node.getAttribute('data-state') !== 'closed';\n    s.interactedOutside = false;\n    const active = node.ownerDocument.activeElement;\n    s.trigger = active && active !== node.ownerDocument.body ? (active as HTMLElement) : null;\n    s.trigger = findTrigger(node);\n    s.observer = new MutationObserver(() => {\n      const isOpen = node.getAttribute('data-state') !== 'closed';\n      if (isOpen && !s.open) {\n        opened(node);\n      } else if (!isOpen && s.open) {\n        closed(node);\n      }\n    });\n    s.observer.observe(node, { attributes: true, attributeFilter: ['data-state'] });\n  }, []);\n\n  if (options.modal) {\n    return {\n      ref,\n      onCloseAutoFocus: options.onCloseAutoFocus,\n      onInteractOutside: options.onInteractOutside,\n      onEscapeKeyDown: options.onEscapeKeyDown,\n      'data-modal': '',\n    };\n  }\n\n  return {\n    ref,\n    onCloseAutoFocus: (event) => {\n      if (event.currentTarget && state.current.handled.has(event.currentTarget)) {\n        state.current.handled.delete(event.currentTarget);\n        event.preventDefault();\n        return;\n      }\n      latest.current.onCloseAutoFocus?.(event);\n    },\n    onInteractOutside: (event) => {\n      if (!state.current.open) {\n        event.preventDefault();\n        return;\n      }\n      latest.current.onInteractOutside?.(event);\n      if (!event.defaultPrevented) {\n        state.current.interactedOutside = true;\n      }\n    },\n    onEscapeKeyDown: (event) => {\n      if (!state.current.open) {\n        event.preventDefault();\n        return;\n      }\n      latest.current.onEscapeKeyDown?.(event);\n    },\n  };\n}\n\n/** Sets every ref to the node. Memoize the result, or React re-attaches it on every render. */\nexport function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): (node: T | null) => void {\n  return (node) => {\n    for (const ref of refs) {\n      if (typeof ref === 'function') {\n        ref(node);\n      } else if (ref) {\n        (ref as { current: T | null }).current = node;\n      }\n    }\n  };\n}\n"],"mappings":";;AA8BA,MAAM,WACJ;;;;;;;;;;AAWF,SAAgB,cAAc,SAAwC;CACpE,MAAM,SAAS,OAAO,QAAQ;AAC9B,QAAO,UAAU;CACjB,MAAM,QAAQ,OAAO;EACnB,MAAM;EACN,mBAAmB;EACnB,SAAS;EACT,yBAAS,IAAI,SAAsB;EACnC,UAAU;EACV,MAAM;EACP,CAAC;CAEF,MAAM,eAAe,SAA0C;AAO7D,UALmB,KAAK,KACpB,KAAK,cAAc,cACjB,mBAAmB,KAAK,GAAG,QAAQ,UAAU,OAAO,CAAC,IACtD,GACD,SACiB,OAAO,QAAQ,YAAY,WAAW,MAAM,QAAQ;;CAG3E,MAAM,UAAU,SAAsB;EACpC,MAAM,IAAI,MAAM;AAChB,IAAE,OAAO;AACT,IAAE,oBAAoB;AACtB,IAAE,UAAU,YAAY,KAAK;AAC7B,MAAI,CAAC,EAAE,QAAQ,IAAI,KAAK,CACtB;AAEF,IAAE,QAAQ,OAAO,KAAK;AACtB,OAAK,gBAAgB,QAAQ;EAC7B,MAAM,QAAQ,IAAI,YAAY,+BAA+B,EAAE,YAAY,MAAM,CAAC;AAClF,SAAO,QAAQ,kBAAkB,MAAM;AACvC,MAAI,CAAC,MAAM,iBAKT,EAHE,OAAO,QAAQ,gBAAgB,YAC3B,OACC,KAAK,cAA2B,SAAS,IAAI,MAC7C,MAAM,EAAE,eAAe,MAAM,CAAC;;CAIzC,MAAM,UAAU,SAAsB;EACpC,MAAM,IAAI,MAAM;AAChB,IAAE,OAAO;AACT,MAAI,CAAC,KAAK,YACR;AAEF,IAAE,QAAQ,IAAI,KAAK;EACnB,MAAM,SAAS,KAAK,cAAc;EAGlC,MAAM,cACJ,UAAU,QACV,WAAW,KAAK,cAAc,QAC9B,KAAK,SAAS,OAAO,IACrB,CAAC,CAAC,OAAO,QAAQ,8DAA4D;EAC/E,MAAM,oBAAoB,EAAE;EAC5B,MAAM,gBAAgB;AACpB,OAAI,EAAE,KACJ;GAEF,MAAM,QAAQ,IAAI,YAAY,iCAAiC,EAAE,YAAY,MAAM,CAAC;AACpF,UAAO,QAAQ,mBAAmB,MAAM;AACxC,OAAI,CAAC,MAAM,oBAAoB,eAAe,CAAC,kBAC7C,aAAY,KAAK,EAAE,MAAM,EAAE,eAAe,MAAM,CAAC;;AAKrD,MAAI,KAAK,cAAc,aAAa,OAAO,SAAS,UAClD,YAAW,SAAS,EAAE;MAEtB,UAAS;AAEX,OAAK,aAAa,SAAS,GAAG;;CAGhC,MAAM,MAAM,aAAa,SAA6B;EACpD,MAAM,IAAI,MAAM;AAGhB,MAAI,CAAC,QAAQ,SAAS,EAAE,KACtB;AAEF,IAAE,UAAU,YAAY;AACxB,IAAE,WAAW;AACb,IAAE,OAAO;AACT,MAAI,OAAO,QAAQ,MACjB;AAEF,IAAE,OAAO,KAAK,aAAa,aAAa,KAAK;AAC7C,IAAE,oBAAoB;EACtB,MAAM,SAAS,KAAK,cAAc;AAClC,IAAE,UAAU,UAAU,WAAW,KAAK,cAAc,OAAQ,SAAyB;AACrF,IAAE,UAAU,YAAY,KAAK;AAC7B,IAAE,WAAW,IAAI,uBAAuB;GACtC,MAAM,SAAS,KAAK,aAAa,aAAa,KAAK;AACnD,OAAI,UAAU,CAAC,EAAE,KACf,QAAO,KAAK;YACH,CAAC,UAAU,EAAE,KACtB,QAAO,KAAK;IAEd;AACF,IAAE,SAAS,QAAQ,MAAM;GAAE,YAAY;GAAM,iBAAiB,CAAC,aAAa;GAAE,CAAC;IAC9E,EAAE,CAAC;AAEN,KAAI,QAAQ,MACV,QAAO;EACL;EACA,kBAAkB,QAAQ;EAC1B,mBAAmB,QAAQ;EAC3B,iBAAiB,QAAQ;EACzB,cAAc;EACf;AAGH,QAAO;EACL;EACA,mBAAmB,UAAU;AAC3B,OAAI,MAAM,iBAAiB,MAAM,QAAQ,QAAQ,IAAI,MAAM,cAAc,EAAE;AACzE,UAAM,QAAQ,QAAQ,OAAO,MAAM,cAAc;AACjD,UAAM,gBAAgB;AACtB;;AAEF,UAAO,QAAQ,mBAAmB,MAAM;;EAE1C,oBAAoB,UAAU;AAC5B,OAAI,CAAC,MAAM,QAAQ,MAAM;AACvB,UAAM,gBAAgB;AACtB;;AAEF,UAAO,QAAQ,oBAAoB,MAAM;AACzC,OAAI,CAAC,MAAM,iBACT,OAAM,QAAQ,oBAAoB;;EAGtC,kBAAkB,UAAU;AAC1B,OAAI,CAAC,MAAM,QAAQ,MAAM;AACvB,UAAM,gBAAgB;AACtB;;AAEF,UAAO,QAAQ,kBAAkB,MAAM;;EAE1C;;;AAIH,SAAgB,UAAa,GAAG,MAAwD;AACtF,SAAQ,SAAS;AACf,OAAK,MAAM,OAAO,KAChB,KAAI,OAAO,QAAQ,WACjB,KAAI,KAAK;WACA,IACR,KAA8B,UAAU"}

package/dist/mixins/focus.mjs

@@ -1,6 +1,6 @@
 import { r as css } from "../styledComponentsInterop-Cs5CCPRy.mjs";
-import { isFocusedVisible, isNotDisabled } from "../lib/pseudoClass.mjs";
 import { semanticColor } from "../lib/semanticColor.mjs";
+import { isFocusedVisible, isNotDisabled } from "../lib/pseudoClass.mjs";
 import { Color } from "@persona/design-tokens";
 //#region src/mixins/focus.ts
 const focusColor = (theme) => semanticColor(theme, "BorderFocus", Color.BorderFocus);

package/dist/mixins/hoverable.mjs

@@ -1,8 +1,8 @@
 import { r as css } from "../styledComponentsInterop-Cs5CCPRy.mjs";
+import "../variables/transitions.mjs";
 import { isDisabled, isHovered, isNotDisabled } from "../lib/pseudoClass.mjs";
 import { focusOutlineControlled } from "./focus.mjs";
 import "../variables/effect.mjs";
-import "../variables/transitions.mjs";
 //#region src/mixins/hoverable.ts
 const hoverMixin = css`
   box-shadow:

package/dist/mixins/input.mjs

@@ -1,9 +1,9 @@
 import { r as css } from "../styledComponentsInterop-Cs5CCPRy.mjs";
-import { isDisabled, isHovered, isNotDisabled } from "../lib/pseudoClass.mjs";
 import { semanticColor, semanticTokens } from "../lib/semanticColor.mjs";
-import { focusOutlineControlled } from "./focus.mjs";
 import "../variables/transitions.mjs";
 import { withAlpha } from "../lib/color.mjs";
+import { isDisabled, isHovered, isNotDisabled } from "../lib/pseudoClass.mjs";
+import { focusOutlineControlled } from "./focus.mjs";
 import { printMixins } from "./print/index.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
 //#region src/mixins/input.ts

package/dist/mixins/motion.d.mts

@@ -3,8 +3,12 @@ import * as _$styled_components0 from "styled-components";
 //#region src/mixins/motion.d.ts
 /**
  * The popover row of the motion scale for Radix content: fade and scale from the trigger over
- * `Fast` on Enter, and a 150ms fade under reduced motion. There's no Exit animation: Radix would
- * keep the content mounted until it ends, delaying `onCloseAutoFocus` focus restoration.
+ * `Fast` on Enter, back over `Faster` on Exit, and a 150ms fade under reduced motion. Closing
+ * content takes no pointer input.
+ *
+ * Radix keeps the content mounted until the exit ends and only then returns focus, so pair this
+ * with `useCloseFocus`, which returns it when the close starts. Content marked `data-modal` closes
+ * at once, and so does Radix Select, which unmounts its content on close without an exit.
  *
  * @param originVar the Radix transform-origin custom property, e.g.
  * `--radix-popover-content-transform-origin`

package/dist/mixins/motion.mjs

@@ -1,6 +1,6 @@
 import { i as keyframes, r as css } from "../styledComponentsInterop-Cs5CCPRy.mjs";
+import { fadeIn, fadeOut } from "../variables/keyframes.mjs";
 import { ReducedMotionFade } from "../variables/transitions.mjs";
-import { fadeIn } from "../variables/keyframes.mjs";
 //#region src/mixins/motion.ts
 const popoverEnter = keyframes`
   from {
@@ -8,10 +8,20 @@ const popoverEnter = keyframes`
     transform: scale(0.96);
   }
 `;
+const popoverExit = keyframes`
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+`;
 /**
 * The popover row of the motion scale for Radix content: fade and scale from the trigger over
-* `Fast` on Enter, and a 150ms fade under reduced motion. There's no Exit animation: Radix would
-* keep the content mounted until it ends, delaying `onCloseAutoFocus` focus restoration.
+* `Fast` on Enter, back over `Faster` on Exit, and a 150ms fade under reduced motion. Closing
+* content takes no pointer input.
+*
+* Radix keeps the content mounted until the exit ends and only then returns focus, so pair this
+* with `useCloseFocus`, which returns it when the close starts. Content marked `data-modal` closes
+* at once, and so does Radix Select, which unmounts its content on close without an exit.
 *
 * @param originVar the Radix transform-origin custom property, e.g.
 * `--radix-popover-content-transform-origin`
@@ -20,8 +30,20 @@ const popoverMotion = (originVar) => css`
   transform-origin: var(${originVar});
   animation: ${popoverEnter} ${"200ms"} ${"cubic-bezier(0, 0, 0.2, 1)"} both;
 
+  &[data-state='closed'] {
+    pointer-events: none;
+  }
+
+  &[data-state='closed']:not([data-modal]) {
+    animation: ${popoverExit} ${"150ms"} ${"cubic-bezier(0.4, 0, 1, 1)"} both;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     animation: ${fadeIn} ${ReducedMotionFade.duration} ${ReducedMotionFade.easing} both;
+
+    &[data-state='closed']:not([data-modal]) {
+      animation: ${fadeOut} ${ReducedMotionFade.duration} ${ReducedMotionFade.easing} both;
+    }
   }
 `;
 /**

package/dist/mixins/motion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"motion.mjs","names":[],"sources":["../../src/mixins/motion.ts"],"sourcesContent":["import { css, keyframes } from 'styled-components';\n\nimport { fadeIn } from '#src/variables/keyframes';\nimport {\n  ReducedMotionFade,\n  TransitionDuration,\n  TransitionEasing,\n} from '#src/variables/transitions';\n\nconst popoverEnter = keyframes`\n  from {\n    opacity: 0;\n    transform: scale(0.96);\n  }\n`;\n\n/**\n * The popover row of the motion scale for Radix content: fade and scale from the trigger over\n * `Fast` on Enter, and a 150ms fade under reduced motion. There's no Exit animation: Radix would\n * keep the content mounted until it ends, delaying `onCloseAutoFocus` focus restoration.\n *\n * @param originVar the Radix transform-origin custom property, e.g.\n * `--radix-popover-content-transform-origin`\n */\nexport const popoverMotion = (originVar: string) => css`\n  transform-origin: var(${originVar});\n  animation: ${popoverEnter} ${TransitionDuration.Fast} ${TransitionEasing.Enter} both;\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: ${fadeIn} ${ReducedMotionFade.duration} ${ReducedMotionFade.easing} both;\n  }\n`;\n\n/**\n * The hover-reveal row: `Faster` on Exit while hidden, `Fast` on Enter while shown. CSS runs the\n * transition of the state being entered, so put `revealHidden` on the base rule and `revealShown`\n * on the rule that shows the element.\n */\nexport const revealHidden = css`\n  transition: opacity ${TransitionDuration.Faster} ${TransitionEasing.Exit};\n`;\n\nexport const revealShown = css`\n  transition-duration: ${TransitionDuration.Fast};\n  transition-timing-function: ${TransitionEasing.Enter};\n`;\n\n/** `revealHidden` and `revealShown` for an element whose visibility is a prop. */\nexport const revealTransition = (visible: boolean) =>\n  visible\n    ? `transition: opacity ${TransitionDuration.Fast} ${TransitionEasing.Enter};`\n    : `transition: opacity ${TransitionDuration.Faster} ${TransitionEasing.Exit};`;\n"],"mappings":";;;;AASA,MAAM,eAAe,SAAS;;;;;;;;;;;;;;AAe9B,MAAa,iBAAiB,cAAsB,GAAG;0BAC7B,UAAU;eACrB,aAAa,GAAA,QAA2B,GAAA,6BAA0B;;;iBAGhE,OAAO,GAAG,kBAAkB,SAAS,GAAG,kBAAkB,OAAO;;;;;;;;AASlF,MAAa,eAAe,GAAG;gCACmB,GAAA,6BAAyB;;AAG3E,MAAa,cAAc,GAAG;iCACmB;6DACM;;;AAIvD,MAAa,oBAAoB,YAC/B,UACI,0DACA"}
+{"version":3,"file":"motion.mjs","names":[],"sources":["../../src/mixins/motion.ts"],"sourcesContent":["import { css, keyframes } from 'styled-components';\n\nimport { fadeIn, fadeOut } from '#src/variables/keyframes';\nimport {\n  ReducedMotionFade,\n  TransitionDuration,\n  TransitionEasing,\n} from '#src/variables/transitions';\n\nconst popoverEnter = keyframes`\n  from {\n    opacity: 0;\n    transform: scale(0.96);\n  }\n`;\n\nconst popoverExit = keyframes`\n  to {\n    opacity: 0;\n    transform: scale(0.96);\n  }\n`;\n\n/**\n * The popover row of the motion scale for Radix content: fade and scale from the trigger over\n * `Fast` on Enter, back over `Faster` on Exit, and a 150ms fade under reduced motion. Closing\n * content takes no pointer input.\n *\n * Radix keeps the content mounted until the exit ends and only then returns focus, so pair this\n * with `useCloseFocus`, which returns it when the close starts. Content marked `data-modal` closes\n * at once, and so does Radix Select, which unmounts its content on close without an exit.\n *\n * @param originVar the Radix transform-origin custom property, e.g.\n * `--radix-popover-content-transform-origin`\n */\nexport const popoverMotion = (originVar: string) => css`\n  transform-origin: var(${originVar});\n  animation: ${popoverEnter} ${TransitionDuration.Fast} ${TransitionEasing.Enter} both;\n\n  &[data-state='closed'] {\n    pointer-events: none;\n  }\n\n  &[data-state='closed']:not([data-modal]) {\n    animation: ${popoverExit} ${TransitionDuration.Faster} ${TransitionEasing.Exit} both;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: ${fadeIn} ${ReducedMotionFade.duration} ${ReducedMotionFade.easing} both;\n\n    &[data-state='closed']:not([data-modal]) {\n      animation: ${fadeOut} ${ReducedMotionFade.duration} ${ReducedMotionFade.easing} both;\n    }\n  }\n`;\n\n/**\n * The hover-reveal row: `Faster` on Exit while hidden, `Fast` on Enter while shown. CSS runs the\n * transition of the state being entered, so put `revealHidden` on the base rule and `revealShown`\n * on the rule that shows the element.\n */\nexport const revealHidden = css`\n  transition: opacity ${TransitionDuration.Faster} ${TransitionEasing.Exit};\n`;\n\nexport const revealShown = css`\n  transition-duration: ${TransitionDuration.Fast};\n  transition-timing-function: ${TransitionEasing.Enter};\n`;\n\n/** `revealHidden` and `revealShown` for an element whose visibility is a prop. */\nexport const revealTransition = (visible: boolean) =>\n  visible\n    ? `transition: opacity ${TransitionDuration.Fast} ${TransitionEasing.Enter};`\n    : `transition: opacity ${TransitionDuration.Faster} ${TransitionEasing.Exit};`;\n"],"mappings":";;;;AASA,MAAM,eAAe,SAAS;;;;;;AAO9B,MAAM,cAAc,SAAS;;;;;;;;;;;;;;;;;;AAmB7B,MAAa,iBAAiB,cAAsB,GAAG;0BAC7B,UAAU;eACrB,aAAa,GAAA,QAA2B,GAAA,6BAA0B;;;;;;;iBAOhE,YAAY,GAAA,QAA6B,GAAA,6BAAyB;;;;iBAIlE,OAAO,GAAG,kBAAkB,SAAS,GAAG,kBAAkB,OAAO;;;mBAG/D,QAAQ,GAAG,kBAAkB,SAAS,GAAG,kBAAkB,OAAO;;;;;;;;;AAUrF,MAAa,eAAe,GAAG;gCACmB,GAAA,6BAAyB;;AAG3E,MAAa,cAAc,GAAG;iCACmB;6DACM;;;AAIvD,MAAa,oBAAoB,YAC/B,UACI,0DACA"}

package/dist/patterns/CardGrouping/index.mjs

@@ -1,19 +1,19 @@
 import { a as styled } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor } from "../../lib/semanticColor.mjs";
-import { focusStyle } from "../../mixins/focus.mjs";
-import "../../variables/transitions.mjs";
 import { HeadlessAriaButton } from "../../lib/HeadlessAriaButton.mjs";
 import { n as RouterLink } from "../../router-BxmA940v.mjs";
 import { TruncatedText } from "../../lib/TruncatedText.mjs";
 import { i as Paragraph, n as Heading$1 } from "../../Text-D0vEReED.mjs";
-import { a as Tooltip } from "../../Tooltip-C2VB8I6y.mjs";
+import "../../variables/transitions.mjs";
+import { a as Tooltip } from "../../Tooltip-CVBxc1yf.mjs";
+import { focusStyle } from "../../mixins/focus.mjs";
 import { n as Stack, t as HStack } from "../../Stack-Bzom2BTR.mjs";
-import { n as Button$1, t as IconButton } from "../../IconButton-kSjnfhWt.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-jJSHQaih.mjs";
-import { t as DropdownButton } from "../../DropdownButton-Dp-MZ5tA.mjs";
-import { n as SingleColumnLayout } from "../../PageLayout-DgEGcZgB.mjs";
-import { Color, Spacing } from "@persona/design-tokens";
+import { n as Button$1, t as IconButton } from "../../IconButton-Bj1fry_K.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-Ip75l4Th.mjs";
+import { t as DropdownButton } from "../../DropdownButton-BxZ5hn0X.mjs";
+import { n as SingleColumnLayout } from "../../PageLayout-CPiVnS_r.mjs";
 import { cloneElement } from "react";
+import { Color, Spacing } from "@persona/design-tokens";
 import { Disclosure, DisclosurePanel } from "react-aria-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon, MoreIcon } from "@persona/icons";

package/dist/patterns/IndexTableLayout/index.mjs

@@ -1,7 +1,8 @@
+import { a as styled } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 import { t as Card_default } from "../../Card-DuQHyroh.mjs";
-import { t as DataTable } from "../../DataTable-DiwzhNMt.mjs";
-import { t as PageHeader } from "../../PageHeader-bhQTjuZF.mjs";
-import { a as Section, i as Container } from "../../PageLayout-DgEGcZgB.mjs";
+import { t as DataTable } from "../../DataTable-DdSY9mzT.mjs";
+import { t as PageHeader } from "../../PageHeader-6KvtGED-.mjs";
+import { n as SingleColumnLayout } from "../../PageLayout-CPiVnS_r.mjs";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/patterns/IndexTableLayout/useColumnConfiguration.ts
@@ -46,7 +47,10 @@ const useColumnConfiguration = ({ columnDefinitions, columnConfiguration, onColu
 };
 //#endregion
 //#region src/patterns/IndexTableLayout/IndexTableLayout.tsx
-const IndexTableLayout = ({ title, tableTitle, headerProps, banner, className, controls, columnDefinitions, defaultColumns, columnConfiguration, onColumnConfigurationChange, getColumnDisabled, sortByRelevance, ...dataTableProps }) => {
+const Root = styled.div`
+  width: 100%;
+`;
+const IndexTableLayout = ({ title, tableTitle, headerProps, banner, className, width = "wide", controls, columnDefinitions, defaultColumns, columnConfiguration, onColumnConfigurationChange, getColumnDisabled, sortByRelevance, ...dataTableProps }) => {
 	const { columns, columnConfigurationProps } = useColumnConfiguration({
 		columnDefinitions,
 		defaultColumns,
@@ -60,7 +64,7 @@ const IndexTableLayout = ({ title, tableTitle, headerProps, banner, className, c
 	const forwardedDataTableProps = { ...dataTableProps };
 	delete forwardedDataTableProps.showColumnProperties;
 	delete forwardedDataTableProps.onUpdateColumnProperties;
-	return /* @__PURE__ */ jsxs(Container, {
+	return /* @__PURE__ */ jsxs(Root, {
 		className,
 		children: [/* @__PURE__ */ jsx(PageHeader, {
 			...restHeaderProps,
@@ -68,17 +72,20 @@ const IndexTableLayout = ({ title, tableTitle, headerProps, banner, className, c
 				title: headerTitle ?? title,
 				subtitle: headerSubtitle
 			}
-		}), /* @__PURE__ */ jsx(Section, { children: /* @__PURE__ */ jsx(Card_default, { children: /* @__PURE__ */ jsxs(Card_default.Body, { children: [banner, /* @__PURE__ */ jsx(DataTable, {
-			...forwardedDataTableProps,
-			columns,
-			title: tableTitle,
-			showControls: true,
-			controls: {
-				...controls,
-				columnConfigurationProps
-			},
-			enableRowSelection: hasBulkActions
-		})] }) }) })]
+		}), /* @__PURE__ */ jsx(SingleColumnLayout, {
+			width,
+			main: /* @__PURE__ */ jsx(Card_default, { children: /* @__PURE__ */ jsxs(Card_default.Body, { children: [banner, /* @__PURE__ */ jsx(DataTable, {
+				...forwardedDataTableProps,
+				columns,
+				title: tableTitle,
+				showControls: true,
+				controls: {
+					...controls,
+					columnConfigurationProps
+				},
+				enableRowSelection: hasBulkActions
+			})] }) })
+		})]
 	});
 };
 //#endregion

package/dist/patterns/IndexTableLayout/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Card"],"sources":["../../../src/patterns/IndexTableLayout/useColumnConfiguration.ts","../../../src/patterns/IndexTableLayout/IndexTableLayout.tsx"],"sourcesContent":["import type { RowData } from '@tanstack/react-table';\nimport { useMemo } from 'react';\n\nimport type { TableViewConfigurationProps } from '#src/components/DataTable/TableControls';\nimport type { ColumnConfig } from '#src/components/DataTable/types';\n\ntype AttributeColumn = TableViewConfigurationProps['columnConfiguration'][number];\n\nexport interface ColumnDefinition<TData extends RowData> extends ColumnConfig<TData> {\n  key?: string;\n  label: string;\n  isCustomField?: boolean;\n}\n\nexport type ColumnDefinitions<TData extends RowData> = Record<string, ColumnDefinition<TData>>;\n\nexport interface UseColumnConfigurationOptions<TData extends RowData> {\n  columnDefinitions: ColumnDefinitions<TData>;\n  defaultColumns: string[];\n  columnConfiguration?: AttributeColumn[];\n  onColumnConfigurationChange?: (c: AttributeColumn[]) => void;\n  getColumnDisabled?: (columnId: string, shownColumnIds: string[]) => boolean;\n  sortByRelevance?: boolean;\n}\n\nexport const useColumnConfiguration = <TData extends RowData>({\n  columnDefinitions,\n  columnConfiguration,\n  onColumnConfigurationChange,\n  defaultColumns,\n  getColumnDisabled,\n  sortByRelevance,\n}: UseColumnConfigurationOptions<TData>): {\n  columns: ColumnConfig<TData>[];\n  columnConfigurationProps?: TableViewConfigurationProps;\n} => {\n  const visibleColumnKeys = useMemo(() => {\n    if (!columnConfiguration || columnConfiguration.length === 0) {\n      return defaultColumns;\n    }\n\n    return columnConfiguration.map((column) => column.key);\n  }, [columnConfiguration, defaultColumns]);\n\n  const columns = useMemo(\n    () =>\n      visibleColumnKeys\n        .map((key): ColumnConfig<TData> | null => {\n          const definition = columnDefinitions[key];\n          if (!definition) {\n            return null;\n          }\n\n          const {\n            key: _key,\n            label: _label,\n            isCustomField: _isCustomField,\n            ...columnConfig\n          } = definition;\n          return columnConfig;\n        })\n        .filter((column): column is ColumnConfig<TData> => column != null),\n    [visibleColumnKeys, columnDefinitions],\n  );\n\n  const columnConfigurationProps = useMemo(() => {\n    if (!columnConfiguration || !onColumnConfigurationChange) {\n      return undefined;\n    }\n\n    const attributeOptions = Object.keys(columnDefinitions).map((key) => ({\n      key: String(key),\n      label: columnDefinitions[key].label,\n      isCustomField: columnDefinitions[key].isCustomField,\n    }));\n\n    const currentConfiguration: AttributeColumn[] = visibleColumnKeys\n      .filter((key) => columnDefinitions[key] != null)\n      .map((key) => ({\n        key: String(key),\n        label: columnDefinitions[key].label,\n      }));\n\n    return {\n      columnConfiguration: currentConfiguration,\n      attributeOptions,\n      updateColumnConfiguration: onColumnConfigurationChange,\n      getColumnDisabled,\n      sortByRelevance,\n    };\n  }, [\n    columnConfiguration,\n    onColumnConfigurationChange,\n    columnDefinitions,\n    visibleColumnKeys,\n    getColumnDisabled,\n    sortByRelevance,\n  ]);\n\n  return { columns, columnConfigurationProps };\n};\n","import type { RowData } from '@tanstack/react-table';\nimport type { ReactNode } from 'react';\n\nimport type { BreadcrumbsProps } from '#src/components/Breadcrumbs';\nimport Card from '#src/components/Card';\nimport DataTable, { type DataTableProps } from '#src/components/DataTable';\nimport type {\n  BaseFilterConfig,\n  FilterConfig,\n  TableControlsProps,\n} from '#src/components/DataTable/TableControls';\nimport PageHeader, { type PageHeaderProps } from '#src/components/PageHeader';\nimport { Container, Section } from '#src/patterns/PageLayout';\n\nimport {\n  useColumnConfiguration,\n  type UseColumnConfigurationOptions,\n} from './useColumnConfiguration';\n\nexport type IndexTableLayoutHeaderProps =\n  | (Omit<Extract<PageHeaderProps, { breadcrumbs?: never }>, 'title'> & { title?: ReactNode })\n  | Extract<PageHeaderProps, { breadcrumbs: BreadcrumbsProps }>;\n\nexport interface IndexTableLayoutProps<\n  TData extends RowData,\n  TFilter extends BaseFilterConfig = FilterConfig,\n>\n  extends\n    Omit<\n      DataTableProps<TData, TFilter>,\n      | 'title'\n      | 'showControls'\n      | 'controls'\n      | 'columns'\n      | 'enableRowSelection'\n      | 'showColumnProperties'\n      | 'onUpdateColumnProperties'\n    >,\n    UseColumnConfigurationOptions<TData> {\n  title: string;\n  tableTitle?: string;\n  headerProps?: IndexTableLayoutHeaderProps;\n  banner?: ReactNode;\n  className?: string;\n  /** Host-built table controls: search, filters/filterResolver/filterPanel, saved-view ControlBar props, tableActions… */\n  controls?: Omit<TableControlsProps<TFilter>, 'columnConfigurationProps'>;\n}\n\nexport const IndexTableLayout = <\n  TData extends RowData,\n  TFilter extends BaseFilterConfig = FilterConfig,\n>({\n  title,\n  tableTitle,\n  headerProps,\n  banner,\n  className,\n  controls,\n  columnDefinitions,\n  defaultColumns,\n  columnConfiguration,\n  onColumnConfigurationChange,\n  getColumnDisabled,\n  sortByRelevance,\n  ...dataTableProps\n}: IndexTableLayoutProps<TData, TFilter>) => {\n  const { columns, columnConfigurationProps } = useColumnConfiguration({\n    columnDefinitions,\n    defaultColumns,\n    columnConfiguration,\n    onColumnConfigurationChange,\n    getColumnDisabled,\n    sortByRelevance,\n  });\n\n  const hasBulkActions =\n    (dataTableProps.bulkActions?.length ?? 0) > 0 ||\n    (controls?.bulkActions?.length ?? 0) > 0 ||\n    dataTableProps.getAvailableBulkActions != null;\n\n  const {\n    title: headerTitle,\n    subtitle: headerSubtitle,\n    breadcrumbs,\n    ...restHeaderProps\n  } = headerProps ?? {};\n\n  const forwardedDataTableProps = { ...dataTableProps } as typeof dataTableProps &\n    Pick<DataTableProps<TData, TFilter>, 'showColumnProperties' | 'onUpdateColumnProperties'>;\n  delete forwardedDataTableProps.showColumnProperties;\n  delete forwardedDataTableProps.onUpdateColumnProperties;\n\n  return (\n    <Container className={className}>\n      <PageHeader\n        {...restHeaderProps}\n        {...(breadcrumbs\n          ? { breadcrumbs }\n          : { title: headerTitle ?? title, subtitle: headerSubtitle })}\n      />\n      <Section>\n        <Card>\n          <Card.Body>\n            {banner}\n            <DataTable<TData, TFilter>\n              {...forwardedDataTableProps}\n              columns={columns}\n              title={tableTitle}\n              showControls\n              controls={{ ...controls, columnConfigurationProps }}\n              enableRowSelection={hasBulkActions}\n            />\n          </Card.Body>\n        </Card>\n      </Section>\n    </Container>\n  );\n};\n\nexport default IndexTableLayout;\n"],"mappings":";;;;;;;AAyBA,MAAa,0BAAiD,EAC5D,mBACA,qBACA,6BACA,gBACA,mBACA,sBAIG;CACH,MAAM,oBAAoB,cAAc;AACtC,MAAI,CAAC,uBAAuB,oBAAoB,WAAW,EACzD,QAAO;AAGT,SAAO,oBAAoB,KAAK,WAAW,OAAO,IAAI;IACrD,CAAC,qBAAqB,eAAe,CAAC;AAyDzC,QAAO;EAAE,SAvDO,cAEZ,kBACG,KAAK,QAAoC;GACxC,MAAM,aAAa,kBAAkB;AACrC,OAAI,CAAC,WACH,QAAO;GAGT,MAAM,EACJ,KAAK,MACL,OAAO,QACP,eAAe,gBACf,GAAG,iBACD;AACJ,UAAO;IACP,CACD,QAAQ,WAA0C,UAAU,KAAK,EACtE,CAAC,mBAAmB,kBAAkB,CAqCxB;EAAE,0BAlCe,cAAc;AAC7C,OAAI,CAAC,uBAAuB,CAAC,4BAC3B;GAGF,MAAM,mBAAmB,OAAO,KAAK,kBAAkB,CAAC,KAAK,SAAS;IACpE,KAAK,OAAO,IAAI;IAChB,OAAO,kBAAkB,KAAK;IAC9B,eAAe,kBAAkB,KAAK;IACvC,EAAE;AASH,UAAO;IACL,qBAR8C,kBAC7C,QAAQ,QAAQ,kBAAkB,QAAQ,KAAK,CAC/C,KAAK,SAAS;KACb,KAAK,OAAO,IAAI;KAChB,OAAO,kBAAkB,KAAK;KAC/B,EAGwC;IACzC;IACA,2BAA2B;IAC3B;IACA;IACD;KACA;GACD;GACA;GACA;GACA;GACA;GACA;GACD,CAEyC;EAAE;;;;ACnD9C,MAAa,oBAGX,EACA,OACA,YACA,aACA,QACA,WACA,UACA,mBACA,gBACA,qBACA,6BACA,mBACA,iBACA,GAAG,qBACwC;CAC3C,MAAM,EAAE,SAAS,6BAA6B,uBAAuB;EACnE;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,kBACH,eAAe,aAAa,UAAU,KAAK,MAC3C,UAAU,aAAa,UAAU,KAAK,KACvC,eAAe,2BAA2B;CAE5C,MAAM,EACJ,OAAO,aACP,UAAU,gBACV,aACA,GAAG,oBACD,eAAe,EAAE;CAErB,MAAM,0BAA0B,EAAE,GAAG,gBAAgB;AAErD,QAAO,wBAAwB;AAC/B,QAAO,wBAAwB;AAE/B,QACE,qBAAC,WAAD;EAAsB;YAAtB,CACE,oBAAC,YAAD;GACE,GAAI;GACJ,GAAK,cACD,EAAE,aAAa,GACf;IAAE,OAAO,eAAe;IAAO,UAAU;IAAgB;GAC7D,CAAA,EACF,oBAAC,SAAD,EAAA,UACE,oBAACA,cAAD,EAAA,UACE,qBAACA,aAAK,MAAN,EAAA,UAAA,CACG,QACD,oBAAC,WAAD;GACE,GAAI;GACK;GACT,OAAO;GACP,cAAA;GACA,UAAU;IAAE,GAAG;IAAU;IAA0B;GACnD,oBAAoB;GACpB,CAAA,CACQ,EAAA,CAAA,EACP,CAAA,EACC,CAAA,CACA"}
+{"version":3,"file":"index.mjs","names":["Card"],"sources":["../../../src/patterns/IndexTableLayout/useColumnConfiguration.ts","../../../src/patterns/IndexTableLayout/IndexTableLayout.tsx"],"sourcesContent":["import type { RowData } from '@tanstack/react-table';\nimport { useMemo } from 'react';\n\nimport type { TableViewConfigurationProps } from '#src/components/DataTable/TableControls';\nimport type { ColumnConfig } from '#src/components/DataTable/types';\n\ntype AttributeColumn = TableViewConfigurationProps['columnConfiguration'][number];\n\nexport interface ColumnDefinition<TData extends RowData> extends ColumnConfig<TData> {\n  key?: string;\n  label: string;\n  isCustomField?: boolean;\n}\n\nexport type ColumnDefinitions<TData extends RowData> = Record<string, ColumnDefinition<TData>>;\n\nexport interface UseColumnConfigurationOptions<TData extends RowData> {\n  columnDefinitions: ColumnDefinitions<TData>;\n  defaultColumns: string[];\n  columnConfiguration?: AttributeColumn[];\n  onColumnConfigurationChange?: (c: AttributeColumn[]) => void;\n  getColumnDisabled?: (columnId: string, shownColumnIds: string[]) => boolean;\n  sortByRelevance?: boolean;\n}\n\nexport const useColumnConfiguration = <TData extends RowData>({\n  columnDefinitions,\n  columnConfiguration,\n  onColumnConfigurationChange,\n  defaultColumns,\n  getColumnDisabled,\n  sortByRelevance,\n}: UseColumnConfigurationOptions<TData>): {\n  columns: ColumnConfig<TData>[];\n  columnConfigurationProps?: TableViewConfigurationProps;\n} => {\n  const visibleColumnKeys = useMemo(() => {\n    if (!columnConfiguration || columnConfiguration.length === 0) {\n      return defaultColumns;\n    }\n\n    return columnConfiguration.map((column) => column.key);\n  }, [columnConfiguration, defaultColumns]);\n\n  const columns = useMemo(\n    () =>\n      visibleColumnKeys\n        .map((key): ColumnConfig<TData> | null => {\n          const definition = columnDefinitions[key];\n          if (!definition) {\n            return null;\n          }\n\n          const {\n            key: _key,\n            label: _label,\n            isCustomField: _isCustomField,\n            ...columnConfig\n          } = definition;\n          return columnConfig;\n        })\n        .filter((column): column is ColumnConfig<TData> => column != null),\n    [visibleColumnKeys, columnDefinitions],\n  );\n\n  const columnConfigurationProps = useMemo(() => {\n    if (!columnConfiguration || !onColumnConfigurationChange) {\n      return undefined;\n    }\n\n    const attributeOptions = Object.keys(columnDefinitions).map((key) => ({\n      key: String(key),\n      label: columnDefinitions[key].label,\n      isCustomField: columnDefinitions[key].isCustomField,\n    }));\n\n    const currentConfiguration: AttributeColumn[] = visibleColumnKeys\n      .filter((key) => columnDefinitions[key] != null)\n      .map((key) => ({\n        key: String(key),\n        label: columnDefinitions[key].label,\n      }));\n\n    return {\n      columnConfiguration: currentConfiguration,\n      attributeOptions,\n      updateColumnConfiguration: onColumnConfigurationChange,\n      getColumnDisabled,\n      sortByRelevance,\n    };\n  }, [\n    columnConfiguration,\n    onColumnConfigurationChange,\n    columnDefinitions,\n    visibleColumnKeys,\n    getColumnDisabled,\n    sortByRelevance,\n  ]);\n\n  return { columns, columnConfigurationProps };\n};\n","import type { RowData } from '@tanstack/react-table';\nimport type { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport type { BreadcrumbsProps } from '#src/components/Breadcrumbs';\nimport Card from '#src/components/Card';\nimport DataTable, { type DataTableProps } from '#src/components/DataTable';\nimport type {\n  BaseFilterConfig,\n  FilterConfig,\n  TableControlsProps,\n} from '#src/components/DataTable/TableControls';\nimport PageHeader, { type PageHeaderProps } from '#src/components/PageHeader';\nimport { type PageLayoutWidth, SingleColumnLayout } from '#src/patterns/PageLayout';\n\nimport {\n  useColumnConfiguration,\n  type UseColumnConfigurationOptions,\n} from './useColumnConfiguration';\n\nconst Root = styled.div`\n  width: 100%;\n`;\n\nexport type IndexTableLayoutHeaderProps =\n  | (Omit<Extract<PageHeaderProps, { breadcrumbs?: never }>, 'title'> & { title?: ReactNode })\n  | Extract<PageHeaderProps, { breadcrumbs: BreadcrumbsProps }>;\n\nexport interface IndexTableLayoutProps<\n  TData extends RowData,\n  TFilter extends BaseFilterConfig = FilterConfig,\n>\n  extends\n    Omit<\n      DataTableProps<TData, TFilter>,\n      | 'title'\n      | 'showControls'\n      | 'controls'\n      | 'columns'\n      | 'enableRowSelection'\n      | 'showColumnProperties'\n      | 'onUpdateColumnProperties'\n    >,\n    UseColumnConfigurationOptions<TData> {\n  title: string;\n  tableTitle?: string;\n  headerProps?: IndexTableLayoutHeaderProps;\n  banner?: ReactNode;\n  className?: string;\n  /**\n   * Page grid for the table card. `wide` uses the fluid grid; `standard` uses the centered fixed grid (max 1408px).\n   *\n   * @defaultValue 'wide'\n   */\n  width?: PageLayoutWidth;\n  /** Host-built table controls: search, filters/filterResolver/filterPanel, saved-view ControlBar props, tableActions… */\n  controls?: Omit<TableControlsProps<TFilter>, 'columnConfigurationProps'>;\n}\n\nexport const IndexTableLayout = <\n  TData extends RowData,\n  TFilter extends BaseFilterConfig = FilterConfig,\n>({\n  title,\n  tableTitle,\n  headerProps,\n  banner,\n  className,\n  width = 'wide',\n  controls,\n  columnDefinitions,\n  defaultColumns,\n  columnConfiguration,\n  onColumnConfigurationChange,\n  getColumnDisabled,\n  sortByRelevance,\n  ...dataTableProps\n}: IndexTableLayoutProps<TData, TFilter>) => {\n  const { columns, columnConfigurationProps } = useColumnConfiguration({\n    columnDefinitions,\n    defaultColumns,\n    columnConfiguration,\n    onColumnConfigurationChange,\n    getColumnDisabled,\n    sortByRelevance,\n  });\n\n  const hasBulkActions =\n    (dataTableProps.bulkActions?.length ?? 0) > 0 ||\n    (controls?.bulkActions?.length ?? 0) > 0 ||\n    dataTableProps.getAvailableBulkActions != null;\n\n  const {\n    title: headerTitle,\n    subtitle: headerSubtitle,\n    breadcrumbs,\n    ...restHeaderProps\n  } = headerProps ?? {};\n\n  const forwardedDataTableProps = { ...dataTableProps } as typeof dataTableProps &\n    Pick<DataTableProps<TData, TFilter>, 'showColumnProperties' | 'onUpdateColumnProperties'>;\n  delete forwardedDataTableProps.showColumnProperties;\n  delete forwardedDataTableProps.onUpdateColumnProperties;\n\n  return (\n    <Root className={className}>\n      <PageHeader\n        {...restHeaderProps}\n        {...(breadcrumbs\n          ? { breadcrumbs }\n          : { title: headerTitle ?? title, subtitle: headerSubtitle })}\n      />\n      <SingleColumnLayout\n        width={width}\n        main={\n          <Card>\n            <Card.Body>\n              {banner}\n              <DataTable<TData, TFilter>\n                {...forwardedDataTableProps}\n                columns={columns}\n                title={tableTitle}\n                showControls\n                controls={{ ...controls, columnConfigurationProps }}\n                enableRowSelection={hasBulkActions}\n              />\n            </Card.Body>\n          </Card>\n        }\n      />\n    </Root>\n  );\n};\n\nexport default IndexTableLayout;\n"],"mappings":";;;;;;;;AAyBA,MAAa,0BAAiD,EAC5D,mBACA,qBACA,6BACA,gBACA,mBACA,sBAIG;CACH,MAAM,oBAAoB,cAAc;AACtC,MAAI,CAAC,uBAAuB,oBAAoB,WAAW,EACzD,QAAO;AAGT,SAAO,oBAAoB,KAAK,WAAW,OAAO,IAAI;IACrD,CAAC,qBAAqB,eAAe,CAAC;AAyDzC,QAAO;EAAE,SAvDO,cAEZ,kBACG,KAAK,QAAoC;GACxC,MAAM,aAAa,kBAAkB;AACrC,OAAI,CAAC,WACH,QAAO;GAGT,MAAM,EACJ,KAAK,MACL,OAAO,QACP,eAAe,gBACf,GAAG,iBACD;AACJ,UAAO;IACP,CACD,QAAQ,WAA0C,UAAU,KAAK,EACtE,CAAC,mBAAmB,kBAAkB,CAqCxB;EAAE,0BAlCe,cAAc;AAC7C,OAAI,CAAC,uBAAuB,CAAC,4BAC3B;GAGF,MAAM,mBAAmB,OAAO,KAAK,kBAAkB,CAAC,KAAK,SAAS;IACpE,KAAK,OAAO,IAAI;IAChB,OAAO,kBAAkB,KAAK;IAC9B,eAAe,kBAAkB,KAAK;IACvC,EAAE;AASH,UAAO;IACL,qBAR8C,kBAC7C,QAAQ,QAAQ,kBAAkB,QAAQ,KAAK,CAC/C,KAAK,SAAS;KACb,KAAK,OAAO,IAAI;KAChB,OAAO,kBAAkB,KAAK;KAC/B,EAGwC;IACzC;IACA,2BAA2B;IAC3B;IACA;IACD;KACA;GACD;GACA;GACA;GACA;GACA;GACA;GACD,CAEyC;EAAE;;;;AC/E9C,MAAM,OAAO,OAAO,GAAG;;;AAuCvB,MAAa,oBAGX,EACA,OACA,YACA,aACA,QACA,WACA,QAAQ,QACR,UACA,mBACA,gBACA,qBACA,6BACA,mBACA,iBACA,GAAG,qBACwC;CAC3C,MAAM,EAAE,SAAS,6BAA6B,uBAAuB;EACnE;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,kBACH,eAAe,aAAa,UAAU,KAAK,MAC3C,UAAU,aAAa,UAAU,KAAK,KACvC,eAAe,2BAA2B;CAE5C,MAAM,EACJ,OAAO,aACP,UAAU,gBACV,aACA,GAAG,oBACD,eAAe,EAAE;CAErB,MAAM,0BAA0B,EAAE,GAAG,gBAAgB;AAErD,QAAO,wBAAwB;AAC/B,QAAO,wBAAwB;AAE/B,QACE,qBAAC,MAAD;EAAiB;YAAjB,CACE,oBAAC,YAAD;GACE,GAAI;GACJ,GAAK,cACD,EAAE,aAAa,GACf;IAAE,OAAO,eAAe;IAAO,UAAU;IAAgB;GAC7D,CAAA,EACF,oBAAC,oBAAD;GACS;GACP,MACE,oBAACA,cAAD,EAAA,UACE,qBAACA,aAAK,MAAN,EAAA,UAAA,CACG,QACD,oBAAC,WAAD;IACE,GAAI;IACK;IACT,OAAO;IACP,cAAA;IACA,UAAU;KAAE,GAAG;KAAU;KAA0B;IACnD,oBAAoB;IACpB,CAAA,CACQ,EAAA,CAAA,EACP,CAAA;GAET,CAAA,CACG"}

package/dist/patterns/LayoutLoadingShimmer/index.mjs

@@ -1,9 +1,9 @@
 import { a as styled } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 import { n as Stack, t as HStack } from "../../Stack-Bzom2BTR.mjs";
-import { t as LoadingShimmer } from "../../LoadingShimmer-CpfKTSUs.mjs";
-import { t as Card_default } from "../../CardV2-DCoDfEvr.mjs";
-import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "../../Table-SMJAWqoe.mjs";
-import { n as PageHeaderContainer } from "../../PageHeader-bhQTjuZF.mjs";
+import { t as LoadingShimmer } from "../../LoadingShimmer-BVVdBeN-.mjs";
+import { t as Card_default } from "../../CardV2-DO-8COfu.mjs";
+import { h as Table, m as TableHeaderCell, n as TableBody, p as TableRow, r as TableHead, s as TableCell } from "../../Table-9mNn8Q-d.mjs";
+import { n as PageHeaderContainer } from "../../PageHeader-6KvtGED-.mjs";
 import { Color, Spacing } from "@persona/design-tokens";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/patterns/containers.tsx

package/dist/patterns/LayoutLoadingSpinner/index.mjs

@@ -1,6 +1,6 @@
 import { a as styled } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
-import "../../variables/transitions.mjs";
 import { fadeIn, rotate } from "../../variables/keyframes.mjs";
+import "../../variables/transitions.mjs";
 import { Color } from "@persona/design-tokens";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/patterns/LayoutLoadingSpinner/LayoutLoadingSpinner.tsx

package/dist/patterns/PageLayout/index.d.mts

@@ -1,4 +1,4 @@
-import { n as Container, r as Section, t as Backdrop } from "../../PageLayout-BXM_pyrU.mjs";
+import { n as Container, r as Section, t as Backdrop } from "../../PageLayout-BdVM37bV.mjs";
 import { r as PageLayoutWidth } from "../../PageLayoutFrame-4QGs7x-t.mjs";
 import { n as SingleColumnLayoutProps, t as SingleColumnLayout } from "../../SingleColumnLayout-D2bpX7X1.mjs";
 import { n as SplitColumnLayoutProps, t as SplitColumnLayout } from "../../SplitColumnLayout-CRDSDHHm.mjs";

package/dist/patterns/PageLayout/index.mjs

@@ -1,2 +1,2 @@
-import { a as Section, i as Container, n as SingleColumnLayout, r as Backdrop, t as SplitColumnLayout } from "../../PageLayout-DgEGcZgB.mjs";
+import { a as Section, i as Container, n as SingleColumnLayout, r as Backdrop, t as SplitColumnLayout } from "../../PageLayout-CPiVnS_r.mjs";
 export { Backdrop, Container, Section, SingleColumnLayout, SplitColumnLayout };

package/dist/patterns/WizardModal/index.mjs

@@ -1,11 +1,11 @@
 import { a as styled } from "../../styledComponentsInterop-Cs5CCPRy.mjs";
 import { semanticColor } from "../../lib/semanticColor.mjs";
 import { t as HStack } from "../../Stack-Bzom2BTR.mjs";
-import { n as Button } from "../../IconButton-kSjnfhWt.mjs";
-import { i as Modal_default } from "../../Modal-B6X5AgWj.mjs";
-import { t as ProgressIndicator } from "../../ProgressIndicator-hy1P-RG1.mjs";
-import { Color, Spacing } from "@persona/design-tokens";
+import { n as Button } from "../../IconButton-Bj1fry_K.mjs";
+import { i as Modal_default } from "../../Modal-CiPFqr0L.mjs";
+import { t as ProgressIndicator } from "../../ProgressIndicator-zt3ndT9U.mjs";
 import { useState } from "react";
+import { Color, Spacing } from "@persona/design-tokens";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/patterns/WizardModal/WizardModal.tsx
 const statusFromProceed = (result) => result === "valid" ? "completed" : result;

package/dist/tone.d.mts

@@ -1,6 +1,6 @@
 import { n as SemanticTokens } from "./semantic-BZbvb3LV.mjs";
 import { n as PdsColor } from "./color-Db57Wms_.mjs";
-import { o as StickerProps } from "./Sticker-C7Wv3Obx.mjs";
+import { o as StickerProps } from "./Sticker-CLvRB8V5.mjs";
 import { Color } from "@persona/design-tokens";
 
 //#region src/components/Sticker/tone.d.ts

package/dist/{types-D5txFacG.d.mts → types-Dws2XDz2.d.mts}

@@ -1,5 +1,5 @@
-import { l as MenuItemProps } from "./Menu-Ca5ftvo6.mjs";
-import { o as StickerProps } from "./Sticker-C7Wv3Obx.mjs";
+import { l as MenuItemProps } from "./Menu-DviYNrFd.mjs";
+import { o as StickerProps } from "./Sticker-CLvRB8V5.mjs";
 import { ReactNode } from "react";
 import { Column, DeepKeys, FilterFnOption, Header, RowData, SortingState, Table } from "@tanstack/react-table";
 
@@ -177,4 +177,4 @@ type BulkAction = {
 };
 //#endregion
 export { RowAction as C, RowDataWithTourTarget as D, RowDataWithSubrowsToAlwaysShowIds as E, SortProps as O, RenderValueStickerFormatConfig as S, RowDataWithSubrows as T, DataTableColumns as _, DataTableColumnBaseFormat as a, DatetimeConfig as b, DataTableColumnDatetimeFormat as c, DataTableColumnImageFormat as d, DataTableColumnNumberFormat as f, DataTableColumnURLFormat as g, DataTableColumnStringFormat as h, ColumnConfig as i, StickerMapping as k, DataTableColumnFormat as l, DataTableColumnStickerFormat as m, ClientFilterConfig as n, DataTableColumnCheckboxFormat as o, DataTableColumnPiiFormat as p, ClientFilterType as r, DataTableColumnDateFormat as s, BulkAction as t, DataTableColumnIDFormat as u, DataTableVariables as v, RowDataWithDetails as w, HeadlessFilterConfig as x, DateConfig as y };
-//# sourceMappingURL=types-D5txFacG.d.mts.map
+//# sourceMappingURL=types-Dws2XDz2.d.mts.map

package/dist/{types-C_CncajO.d.mts → types-NO2GRlM-.d.mts}

@@ -1,4 +1,4 @@
-import { n as ComboboxProps } from "./Combobox-aOJDTjzC.mjs";
+import { n as ComboboxProps } from "./Combobox-DbcSss15.mjs";
 import { n as DateRange } from "./DateRangePicker-DlHC2q--.mjs";
 import { ReactNode } from "react";
 import { DateValue } from "@internationalized/date";
@@ -92,4 +92,4 @@ interface FilterTypeDefinition<TFilter extends BaseFilterConfig = FilterConfig>
 type FilterTypeResolver<TFilter extends BaseFilterConfig = FilterConfig> = (config: TFilter) => FilterTypeDefinition<TFilter> | undefined;
 //#endregion
 export { ComboboxFilterConfig as a, FilterRenderOptions as c, InputFilterConfig as d, MultiSelectFilterConfig as f, BaseFilterConfig as i, FilterTypeDefinition as l, AttributeColumn as n, DateRangeFilterConfig as o, SelectFilterConfig as p, BaseActiveFilter as r, FilterConfig as s, ActiveFilter as t, FilterTypeResolver as u };
-//# sourceMappingURL=types-C_CncajO.d.mts.map
+//# sourceMappingURL=types-NO2GRlM-.d.mts.map

package/dist/types5.d.mts

@@ -1,2 +1,2 @@
-import { a as ComboboxFilterConfig, c as FilterRenderOptions, d as InputFilterConfig, f as MultiSelectFilterConfig, i as BaseFilterConfig, l as FilterTypeDefinition, n as AttributeColumn, o as DateRangeFilterConfig, p as SelectFilterConfig, r as BaseActiveFilter, s as FilterConfig, t as ActiveFilter, u as FilterTypeResolver } from "./types-C_CncajO.mjs";
+import { a as ComboboxFilterConfig, c as FilterRenderOptions, d as InputFilterConfig, f as MultiSelectFilterConfig, i as BaseFilterConfig, l as FilterTypeDefinition, n as AttributeColumn, o as DateRangeFilterConfig, p as SelectFilterConfig, r as BaseActiveFilter, s as FilterConfig, t as ActiveFilter, u as FilterTypeResolver } from "./types-NO2GRlM-.mjs";
 export { ActiveFilter, AttributeColumn, BaseActiveFilter, BaseFilterConfig, ComboboxFilterConfig, DateRangeFilterConfig, FilterConfig, FilterRenderOptions, FilterTypeDefinition, FilterTypeResolver, InputFilterConfig, MultiSelectFilterConfig, SelectFilterConfig };

package/dist/{useChain-x9fd9Fyq.d.mts → useChain-B--KAtdN.d.mts}

@@ -1,4 +1,4 @@
-import { r as Sticker } from "./Sticker-C7Wv3Obx.mjs";
+import { r as Sticker } from "./Sticker-CLvRB8V5.mjs";
 import { dt as ObjectSchemaMap, n as JsonSchema, st as FunctionJsonSchema } from "./jsonSchema-C4lfpDrt.mjs";
 import { n as Chain, s as MethodChainNode } from "./methodChainTypes-De6sHGyd.mjs";
 import { t as Option } from "./schemaOptions-DMq37JC5.mjs";
@@ -74,4 +74,4 @@ declare const useChainSchema: ({
 declare const useChain: UseChainHook;
 //#endregion
 export { useChain as n, useChainSchema as r, chainRootsFromSchemaProperties as t };
-//# sourceMappingURL=useChain-x9fd9Fyq.d.mts.map
+//# sourceMappingURL=useChain-B--KAtdN.d.mts.map

package/dist/useChainAtCursor.d.mts

@@ -3,7 +3,7 @@ import { dt as ObjectSchemaMap, n as JsonSchema, st as FunctionJsonSchema } from
 import { n as Chain, s as MethodChainNode } from "./methodChainTypes-De6sHGyd.mjs";
 import { n as PossibleChainSchema, t as ChainRoot } from "./chainTypes-C5mXGz6T.mjs";
 import { u as ValueType } from "./types-02Ij0dgs.mjs";
-import { n as useChain } from "./useChain-x9fd9Fyq.mjs";
+import { n as useChain } from "./useChain-B--KAtdN.mjs";
 
 //#region src/components/SmartTextInput/useChainAtCursor.d.ts
 /**

package/dist/useColumnConfiguration.d.mts

@@ -1,5 +1,5 @@
-import { i as TableViewConfigurationProps } from "./TableViewConfigurationDropdown-CZcLH8uR.mjs";
-import { i as ColumnConfig } from "./types-D5txFacG.mjs";
+import { i as TableViewConfigurationProps } from "./TableViewConfigurationDropdown-DE9HFXYY.mjs";
+import { i as ColumnConfig } from "./types-Dws2XDz2.mjs";
 import { RowData } from "@tanstack/react-table";
 
 //#region src/patterns/IndexTableLayout/useColumnConfiguration.d.ts

package/dist/useComboboxFooterAction.d.mts

@@ -1,4 +1,4 @@
-import { m as FooterAction } from "./ComboboxBase-Brgv5nxk.mjs";
+import { m as FooterAction } from "./ComboboxBase-CrFweFGi.mjs";
 import { KeyboardEvent } from "react";
 
 //#region src/components/Combobox/useComboboxFooterAction.d.ts

package/dist/{useTableColumns-BEKJNrb1.d.mts → useTableColumns-tITjHasE.d.mts}

@@ -1,4 +1,4 @@
-import { C as RowAction, O as SortProps, _ as DataTableColumns, l as DataTableColumnFormat } from "./types-D5txFacG.mjs";
+import { C as RowAction, O as SortProps, _ as DataTableColumns, l as DataTableColumnFormat } from "./types-Dws2XDz2.mjs";
 import { ColumnDef, Row, RowData, Table } from "@tanstack/react-table";
 
 //#region src/components/DataTable/useTableColumns.d.ts
@@ -69,4 +69,4 @@ declare function useTableColumns<TData extends RowData, TFormat extends {
 }[]];
 //#endregion
 export { UseTableColumnsParams as n, useTableColumns as r, RenderFormatFn as t };
-//# sourceMappingURL=useTableColumns-BEKJNrb1.d.mts.map
+//# sourceMappingURL=useTableColumns-tITjHasE.d.mts.map

package/dist/useTableColumns.d.mts

@@ -1,2 +1,2 @@
-import { n as UseTableColumnsParams, r as useTableColumns, t as RenderFormatFn } from "./useTableColumns-BEKJNrb1.mjs";
+import { n as UseTableColumnsParams, r as useTableColumns, t as RenderFormatFn } from "./useTableColumns-tITjHasE.mjs";
 export { RenderFormatFn, UseTableColumnsParams, useTableColumns };

package/dist/useTruncation.d.mts

@@ -1,4 +1,4 @@
-import { i as ComboboxOption } from "./ComboboxBase-Brgv5nxk.mjs";
+import { i as ComboboxOption } from "./ComboboxBase-CrFweFGi.mjs";
 import { MutableRefObject, RefObject } from "react";
 
 //#region src/components/Combobox/useTruncation.d.ts

package/dist/value-labels.d.mts

@@ -0,0 +1,12 @@
+import { d as FilterRuleValue, o as FilterField } from "./types-BJqmRXFV.mjs";
+
+//#region src/components/DataTable/TableControls/FiltersV2/FilterBar/value-labels.d.ts
+type GetValueLabel = (fieldId: string, value: string) => string | undefined;
+/**
+ * Render-only overlay; never mutate/cache labels in the immutable registry. Re-evaluate
+ * on each render so a stable host getter can read newly hydrated external names.
+ */
+declare function optionLabelsForDisplay(field: FilterField | undefined, value: FilterRuleValue, optionLabels: Record<string, string> | undefined, getValueLabel?: GetValueLabel): Record<string, string> | undefined;
+//#endregion
+export { GetValueLabel, optionLabelsForDisplay };
+//# sourceMappingURL=value-labels.d.mts.map

package/llms.txt

@@ -44,7 +44,7 @@ their own subpaths.
 - Saved views: `TableControls` (or `DataTable.controls`) requires `onSetDefaultView` and `onUnsetDefaultView` together, or neither. Editable views offer "Set as default" / "Unset default" based on `view.isDefault`; the design system confirms before calling either callback and warns that both changes affect the entire organization. Consumers own persistence and must remove their own confirmations to avoid double prompts. Compact controls omit saved views. Pass `starredDefaultView` to star the default view: the `isDefault` view is pinned first with a star icon, cannot be dragged, hidden, deleted or unset, and its menu offers only Save, Duplicate and Reset (its name field still renames it); every other view gets the full menu. Rename and Duplicate on it call `onViewNameChange` / `onDuplicateView` with its id; Save calls `onSaveView()` with no id, saving whatever the consumer treats as the current view. A null `currentView` is shown as the starred view, so `onSaveView` and toolbar Save must treat null as the starred view; while an `isDefault` view exists, pass its id as `currentView` rather than null. A lazy default is a consumer-owned placeholder view with `isDefault: true`. While a view is the default the built-in tab is not shown and a `null` `currentView` is displayed as the starred view; with no `isDefault` view the built-in tab is shown starred and read-only.
 - DataTable filters: pass `filtersV2` (`TableControlsFiltersV2Props` / `FilterBarProps`) through `DataTable.controls` or directly to `TableControls` for a first-class FilterBar; defaults visible with size derived from `compact`. Hosts own V2 data filtering and feed `onChange` back to `initialState` for active-filter messaging; hydration needs no remount key. Precedence: `filterPanel` → `filtersV2` → legacy `filters`. Legacy `filters` supports `input`, `select`, `multiselect`, `combobox`, and `daterange` with optional `filterResolver`. With `clientFiltering`, `column.filter` generates legacy-only controls backed by TanStack column-filter state, not V2 filtering.
 - SmartTextInput: when method chains are allowed (`ValueType.MethodChain` or `{{...}}` interpolation), you MUST pass `renderFunctionForm`. PDS does not build the function-parameter form, so without it the dialog opened by placing the cursor in a call like `convert_to(...)` shows only the function name over an empty body. It receives `FunctionFormRenderProps` and must call `onComplete(nodes)` or `onCancel()`. In persona-web, `useDashboardSmartTextInputProps` supplies it (backed by `InputMethodChain/FunctionForm`). See components/SmartTextInput/SmartTextInput.mdx.
-- FilterBar: optional `FilterField.condition`, `pickerGroup`, and `disabledReason` support host-defined individual predicates in pills and native Rules; existing aggregate fields stay unchanged. See components/DataTable/DataTable.mdx. Hosts own feature activation and serialization.
+- FilterBar: optional `getValueLabel(fieldId, value)` supplies synchronous display-only choice/multi-choice names in closed pills, overflow tooltips and Rules summaries, before registry labels/raw values. Re-render when host names arrive; it does not fetch, change values/options or mutate the registry. Optional `FilterField.condition`, `pickerGroup`, and `disabledReason` support host-defined individual predicates; existing aggregate fields stay unchanged. See components/DataTable/DataTable.mdx; hosts own editors, feature activation and serialization.
 
 ## Testing
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@persona/design-system",
-  "version": "0.10.11",
+  "version": "0.10.12",
   "description": "React components for Persona UI",
   "keywords": [
     "tanstack-intent"
@@ -85,8 +85,10 @@
     "./components/SmartTextInput": "./dist/components/SmartTextInput/index.mjs",
     "./components/SmartTextInput/parser/method-chain/parser": "./dist/components/SmartTextInput/parser/method-chain/parser.mjs",
     "./components/SmartTextInput/parser/method-chain/types": "./dist/components/SmartTextInput/parser/method-chain/types.mjs",
+    "./components/SmartTextInput/parser/safe-parse": "./dist/components/SmartTextInput/parser/safe-parse.mjs",
     "./components/SmartTextInput/parser/smart-text/parser": "./dist/components/SmartTextInput/parser/smart-text/parser.mjs",
     "./components/SmartTextInput/parser/smart-text/types": "./dist/components/SmartTextInput/parser/smart-text/types.mjs",
+    "./components/SmartTextInput/parser/tree": "./dist/components/SmartTextInput/parser/tree.mjs",
     "./components/SmartTextInput/PillType": "./dist/components/SmartTextInput/PillType.mjs",
     "./components/Spacer": "./dist/components/Spacer/index.mjs",
     "./components/Spinner": "./dist/components/Spinner/index.mjs",
@@ -143,6 +145,7 @@
     "./lib/TruncatedText": "./dist/lib/TruncatedText.mjs",
     "./lib/TruncatedTextWithTooltip": "./dist/lib/TruncatedTextWithTooltip.mjs",
     "./lib/useChain": "./dist/lib/useChain.mjs",
+    "./lib/useCloseFocus": "./dist/lib/useCloseFocus.mjs",
     "./lib/useControlled": "./dist/lib/useControlled.mjs",
     "./lib/useEmbeddedSurface": "./dist/lib/useEmbeddedSurface.mjs",
     "./lib/useIsOverflow": "./dist/lib/useIsOverflow.mjs",
@@ -245,8 +248,8 @@
     "@faker-js/faker": "^10.5.0",
     "@figma/code-connect": "^1.4.4",
     "@oxlint/plugins": "1.72.0",
-    "@persona/design-tokens": "0.4.25",
-    "@persona/icons": "0.1.14",
+    "@persona/design-tokens": "0.4.26",
+    "@persona/icons": "0.1.15",
     "@storybook/react": "^10.6.2",
     "@storybook/react-vite": "^10.6.2",
     "@tanstack/intent": "^0.3.6",
@@ -371,8 +374,10 @@
       "./components/SmartTextInput": "./dist/components/SmartTextInput/index.mjs",
       "./components/SmartTextInput/parser/method-chain/parser": "./dist/components/SmartTextInput/parser/method-chain/parser.mjs",
       "./components/SmartTextInput/parser/method-chain/types": "./dist/components/SmartTextInput/parser/method-chain/types.mjs",
+      "./components/SmartTextInput/parser/safe-parse": "./dist/components/SmartTextInput/parser/safe-parse.mjs",
       "./components/SmartTextInput/parser/smart-text/parser": "./dist/components/SmartTextInput/parser/smart-text/parser.mjs",
       "./components/SmartTextInput/parser/smart-text/types": "./dist/components/SmartTextInput/parser/smart-text/types.mjs",
+      "./components/SmartTextInput/parser/tree": "./dist/components/SmartTextInput/parser/tree.mjs",
       "./components/SmartTextInput/PillType": "./dist/components/SmartTextInput/PillType.mjs",
       "./components/Spacer": "./dist/components/Spacer/index.mjs",
       "./components/Spinner": "./dist/components/Spinner/index.mjs",
@@ -429,6 +434,7 @@
       "./lib/TruncatedText": "./dist/lib/TruncatedText.mjs",
       "./lib/TruncatedTextWithTooltip": "./dist/lib/TruncatedTextWithTooltip.mjs",
       "./lib/useChain": "./dist/lib/useChain.mjs",
+      "./lib/useCloseFocus": "./dist/lib/useCloseFocus.mjs",
       "./lib/useControlled": "./dist/lib/useControlled.mjs",
       "./lib/useEmbeddedSurface": "./dist/lib/useEmbeddedSurface.mjs",
       "./lib/useIsOverflow": "./dist/lib/useIsOverflow.mjs",

package/skills/ui-authoring/COMPONENTS.md

@@ -26,7 +26,7 @@ exists. If there is no `.mdx`, use the published type declarations
 | `SplitColumnLayout` | An 8:4 main and aside page. Same optional regions as `SingleColumnLayout`. Stacks main then aside below 768px | `@persona/design-system/patterns/PageLayout` |
 | `DataTable` | Data table — browsing tabular data with filtering, bulk actions, search, pagination, and sorting | `@persona/design-system/components/DataTable` |
 | `IndexTableLayout` | Standard page shell for a DataTable index; hosts supply controls and own saved-view persistence | `@persona/design-system/patterns/IndexTableLayout` |
-| `FilterBar` | Structured filters with native Rules; opt-in field `condition`, `pickerGroup`, and `disabledReason` support individual host-defined predicates. Hosts own flags and serialization; see DataTable.mdx | `@persona/design-system/components/DataTable/TableControls` |
+| `FilterBar` | Structured filters with native Rules; opt-in field `condition`, `pickerGroup`, and `disabledReason` support individual host-defined predicates. Optional `getValueLabel(fieldId, value)` supplies display-only choice labels for pills/Rules before registry/raw fallbacks. Hosts re-render when names arrive and own fetching, editors, flags and serialization; see DataTable.mdx | `@persona/design-system/components/DataTable/TableControls` |
 | `DatePicker` | Picking a date or date range from a calendar | `@persona/design-system/components/DatePicker` |
 | `DropdownButton` | Opening a menu of related actions from a button | `@persona/design-system/components/DropdownButton` |
 | `DropdownMenu` | Showing a temporary action list on a custom trigger | `@persona/design-system/components/DropdownMenu` |

package/skills/ui-authoring/PATTERNS.md

@@ -26,14 +26,18 @@ Which pattern to use, and for what. Patterns with a dedicated doc link to
 
 ## Page layouts
 
-Index pages backed by `DataTable` use `IndexTableLayout`, which owns its `Container`, `PageHeader`,
-`Section`, and `Card` shell. Import it from `@persona/design-system/patterns/IndexTableLayout`;
+Index pages backed by `DataTable` use `IndexTableLayout`, which composes `PageHeader`,
+`SingleColumnLayout` (wide by default), and `Card`; don't wrap it in `Container` or `Section`.
+Import it from `@persona/design-system/patterns/IndexTableLayout`;
 never copy it, persona-web's `DashboardDataTable` wrapper (PDS does not ship one), or
 `TableControls`/filter panels into an app. Pass app-specific filters through the `controls` prop
 (`controls={{ filters, filterResolver }}` or `controls={{ filterPanel }}`), and if the pattern lacks
 a slot you need, add it here instead of forking the layout. Other pages render `PageHeader`, then `SingleColumnLayout` or
 `SplitColumnLayout`. Do not wrap those templates in `Container` or `Section`.
 
+For bulk actions on an index page, always set `floatingBulkActions` with `bulkActions` or
+`getAvailableBulkActions`; inline bulk-action buttons in the table controls are legacy.
+
 ```tsx
 import Header from '@persona/design-system/components/PageHeader';
 import { SingleColumnLayout, SplitColumnLayout } from '@persona/design-system/patterns/PageLayout';