@persona/design-system 0.10.11 → 0.10.13

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-DZ0B2Zm9.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-SnCo7ecm.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-C_CncajO.d.mts → types-BTaKBrxG.d.mts}

@@ -1,4 +1,4 @@
-import { n as ComboboxProps } from "./Combobox-aOJDTjzC.mjs";
+import { n as ComboboxProps } from "./Combobox-DgYwerwd.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-BTaKBrxG.d.mts.map

package/dist/{types-D5txFacG.d.mts → types-CUnL8JJj.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-keVl-eKm.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";
 
@@ -153,7 +153,8 @@ type RowDataWithTourTarget<T extends RowData> = T & {
 type BulkAction = {
   label: string;
   icon?: ReactNode;
-  disabled?: boolean;
+  disabled?: boolean; /** Tooltip explaining why the action is disabled; shown only while `disabled` is set. */
+  disabledReason?: string;
   onClick: (selectedRows: string[], clearSelection: () => void) => void | Promise<void>;
   popover?: {
     options: {
@@ -165,7 +166,8 @@ type BulkAction = {
 } | {
   'aria-label': string;
   icon: ReactNode;
-  disabled?: boolean;
+  disabled?: boolean; /** Tooltip explaining why the action is disabled; shown only while `disabled` is set. */
+  disabledReason?: string;
   onClick: (selectedRows: string[], clearSelection: () => void) => void | Promise<void>;
   popover?: {
     options: {
@@ -177,4 +179,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-CUnL8JJj.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-BTaKBrxG.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-1nT8wneI.mjs";
+import { i as ColumnConfig } from "./types-CUnL8JJj.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-DoKiRjgS.mjs";
 import { KeyboardEvent } from "react";
 
 //#region src/components/Combobox/useComboboxFooterAction.d.ts

package/dist/{useTableColumns-BEKJNrb1.d.mts → useTableColumns-BuxN7Usm.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-CUnL8JJj.mjs";
 import { ColumnDef, Row, RowData, Table } from "@tanstack/react-table";
 
 //#region src/components/DataTable/useTableColumns.d.ts
@@ -29,6 +29,18 @@ interface UseTableColumnsParams<TData extends RowData, TFormat extends {
   enableSubRowSelection?: boolean;
   rowActions?: RowAction[] | ((row: TData) => RowAction[]);
   getRowId?: (row: TData) => string;
+  /** Names each row's selection checkbox; the row id when omitted. */
+  getRowLabel?: (row: TData) => string;
+  /**
+   * Show the select-all header's dash only when a row in the table is selected, ignoring selected
+   * ids for rows not in `data` (controlled selection across pages).
+   */
+  scopeSelectAllToRows?: boolean;
+  /**
+   * Keep the select column's header and cell renderers stable across column rebuilds (for example
+   * on every `data` change), so checkboxes aren't remounted and a click during a refresh isn't lost.
+   */
+  stableSelectCells?: boolean;
   expandedRows: Set<string>;
   toggleRowExpansion: (rowId: string) => void;
   canRowExpand: (rowData: TData) => boolean;
@@ -54,6 +66,9 @@ declare function useTableColumns<TData extends RowData, TFormat extends {
   enableSubRowSelection,
   rowActions,
   getRowId,
+  getRowLabel,
+  scopeSelectAllToRows,
+  stableSelectCells,
   expandedRows,
   toggleRowExpansion,
   canRowExpand,
@@ -69,4 +84,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-BuxN7Usm.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-BuxN7Usm.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-DoKiRjgS.mjs";
 import { MutableRefObject, RefObject } from "react";
 
 //#region src/components/Combobox/useTruncation.d.ts

package/dist/utils4.d.mts

@@ -103,7 +103,7 @@ declare const getConfirmLinkCursorPos: (tree: ASTNode, valueType: ValueType, cur
  *
  * TODO: Add more sophistication here (e.g. fuzzy matching, etc.)
  */
-declare const isQueryMatch: (query: string, chain: {
+declare const isQueryMatch: (rawQuery: string, chain: {
   property: string;
 }) => boolean;
 //#endregion

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/dist/withDisabledReason.d.mts

@@ -0,0 +1,19 @@
+import { ReactElement } from "react";
+
+//#region src/components/DataTable/withDisabledReason.d.ts
+/**
+ * Wraps a disabled bulk-action control in a tooltip that explains why it's disabled. Returns the
+ * control unchanged unless it is disabled and has a reason.
+ */
+declare const withDisabledReason: (control: ReactElement, {
+  key,
+  disabled,
+  disabledReason
+}: {
+  key: string;
+  disabled?: boolean;
+  disabledReason?: string;
+}) => ReactElement;
+//#endregion
+export { withDisabledReason };
+//# sourceMappingURL=withDisabledReason.d.mts.map

package/llms.txt

@@ -16,7 +16,7 @@ For exact prop types, prefer the published type declarations (`dist/**/*.d.mts`,
 - [ui-authoring](skills/ui-authoring/SKILL.md): design tokens, PDS implementation guidelines, table guidelines (DataTable vs TableBox vs TableLayout), routing/link adapters (react-router, TanStack, custom), localization (PDSProvider strings/locale), loading states, testing, Storybook
 - [Product UI standard](skills/ui-authoring/STANDARD.md): the rules every screen meets (11 px minimum for copy and 8 px for labels inside charts and diagrams, WCAG AA contrast, reduced motion, status not by colour alone), the screen brief, the `pds/*` oxlint rules that check it (`@persona/design-system/lint`), and the `new-screen` skill for building one screen
 - [Tokens](skills/ui-authoring/TOKENS.md): semantic color tokens (Fg / Surface / Border / Action / Input / Feedback / Status / Opacity) with recipes and a dark-mode checklist; Spacing / Typography catalog, radius, elevation, charts
-- [Patterns](skills/ui-authoring/PATTERNS.md): forms, layout, index tables, versioned resource headers, indicators, feedback, empty states, charts, panels
+- [Patterns](skills/ui-authoring/PATTERNS.md): forms, layout, index tables, versioned resource headers, indicators, feedback, empty states, panels
 - [Components](skills/ui-authoring/COMPONENTS.md): which PDS component to use (and its import path); APIs live in that component's `.mdx` when one exists, otherwise in `dist/components/<Name>/index.d.mts`
 - [design-system-component-authoring](skills/design-system-component-authoring/SKILL.md): authoring a new PDS component in this repo — clarifying scope, component conventions, prop interface patterns
 
@@ -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
 
@@ -64,5 +64,6 @@ without registration both widen to `string`.
 
 `lib/colorMode` follows the dashboard's light/dark mode: `<PDSProvider colorMode={readDocumentColorMode()}>`
 installs the semantic palette and publishes it as `--pds-*` CSS variables (`FgPrimary` ->
-`var(--pds-fg-primary)`); `<ColorModeScope mode='dark'>` renders a subtree in the other mode. Plain
-CSS in portaled overlays reads the `:root` variables. See `tokens/README.md` ("Colour mode in apps").
+`var(--pds-fg-primary)`); `<ColorModeScope mode='dark'>` renders a subtree in the other mode (pass `theme` to scope a
+custom base theme); `useColorMode()` returns the mode in effect. Plain CSS in portaled overlays
+reads the `:root` variables. See `tokens/README.md` ("Colour mode in apps").