@persona/design-system 0.10.11 → 0.10.13

package/dist/{TableBoxCell-Bo5xYEmR.d.mts → TableBoxCell-C65YFYqj.d.mts}

@@ -1,11 +1,11 @@
-import { o as ComboboxOptionsOrGroups } from "./ComboboxBase-Brgv5nxk.mjs";
-import { a as TableCellProps, i as TableCell } from "./TableCell-uv_jqT5e.mjs";
-import { r as TableBoxRowProps } from "./TableBoxRow-DuWS2iRC.mjs";
+import { o as ComboboxOptionsOrGroups } from "./ComboboxBase-DoKiRjgS.mjs";
+import { a as TableCellProps, i as TableCell } from "./TableCell-CQsF7t4e.mjs";
+import { r as TableBoxRowProps } from "./TableBoxRow-CK-b79uD.mjs";
 import { n as ReorderConfig, t as DragDirection } from "./useTableBoxDragAndDrop-MwbXWWDQ.mjs";
-import { t as RowAction } from "./TableBoxRowActions-zW74DkXt.mjs";
-import * as _$styled_components0 from "styled-components";
+import { t as RowAction } from "./TableBoxRowActions-CRaabjaY.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/TableBox/TableBox.d.ts
@@ -273,4 +273,4 @@ declare const TableBoxCell: ({
 }: TableBoxCellProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableBox as a, PinnedActionsCell as i, TableBoxCellProps as n, TableBoxContext as o, InlineEditConfig as r, TableBoxProps as s, TableBoxCell as t };
-//# sourceMappingURL=TableBoxCell-Bo5xYEmR.d.mts.map
+//# sourceMappingURL=TableBoxCell-C65YFYqj.d.mts.map

package/dist/TableBoxCell.d.mts

@@ -1,2 +1,2 @@
-import { n as TableBoxCellProps, t as TableBoxCell } from "./TableBoxCell-Bo5xYEmR.mjs";
+import { n as TableBoxCellProps, t as TableBoxCell } from "./TableBoxCell-C65YFYqj.mjs";
 export { TableBoxCellProps, TableBoxCell as default };

package/dist/{TableBoxField-CdgjSGLK.d.mts → TableBoxField-CHpClgsE.d.mts}

@@ -1,7 +1,7 @@
-import { l as MenuItemProps } from "./Menu-Ca5ftvo6.mjs";
-import { o as ImplementsFormField } from "./inputFields-BqO2H-Kj.mjs";
-import { r as TableBoxRowProps } from "./TableBoxRow-DuWS2iRC.mjs";
-import { n as TableBoxCellProps, s as TableBoxProps } from "./TableBoxCell-Bo5xYEmR.mjs";
+import { l as MenuItemProps } from "./Menu-keVl-eKm.mjs";
+import { o as ImplementsFormField } from "./inputFields-Dobwb4kT.mjs";
+import { r as TableBoxRowProps } from "./TableBoxRow-CK-b79uD.mjs";
+import { n as TableBoxCellProps, s as TableBoxProps } from "./TableBoxCell-C65YFYqj.mjs";
 import { MouseEvent, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -100,4 +100,4 @@ declare const TableBoxField: {
 };
 //#endregion
 export { TableBoxFieldActionGroup as a, TableBoxFieldActionEntry as i, TableBoxField as n, TableBoxFieldAction as r, TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL as t };
-//# sourceMappingURL=TableBoxField-CdgjSGLK.d.mts.map
+//# sourceMappingURL=TableBoxField-CHpClgsE.d.mts.map

package/dist/TableBoxField.d.mts

@@ -1,2 +1,2 @@
-import { a as TableBoxFieldActionGroup, i as TableBoxFieldActionEntry, n as TableBoxField, r as TableBoxFieldAction, t as TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL } from "./TableBoxField-CdgjSGLK.mjs";
+import { a as TableBoxFieldActionGroup, i as TableBoxFieldActionEntry, n as TableBoxField, r as TableBoxFieldAction, t as TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL } from "./TableBoxField-CHpClgsE.mjs";
 export { TABLE_BOX_FIELD_ADD_BUTTON_ARIA_LABEL, TableBoxFieldAction, TableBoxFieldActionEntry, TableBoxFieldActionGroup, TableBoxField as default };

package/dist/{TableBoxRow-DuWS2iRC.d.mts → TableBoxRow-CK-b79uD.d.mts}

@@ -1,4 +1,4 @@
-import { l as MenuItemProps } from "./Menu-Ca5ftvo6.mjs";
+import { l as MenuItemProps } from "./Menu-keVl-eKm.mjs";
 import { t as TableRow } from "./TableRow-C4eHuRF3.mjs";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -83,4 +83,4 @@ declare const TableBoxRowOverlay: ({
 }) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableBoxRowOverlay as n, TableBoxRowProps as r, TableBoxRow as t };
-//# sourceMappingURL=TableBoxRow-DuWS2iRC.d.mts.map
+//# sourceMappingURL=TableBoxRow-CK-b79uD.d.mts.map

package/dist/TableBoxRow.d.mts

@@ -1,2 +1,2 @@
-import { n as TableBoxRowOverlay, r as TableBoxRowProps, t as TableBoxRow } from "./TableBoxRow-DuWS2iRC.mjs";
+import { n as TableBoxRowOverlay, r as TableBoxRowProps, t as TableBoxRow } from "./TableBoxRow-CK-b79uD.mjs";
 export { TableBoxRowOverlay, TableBoxRowProps, TableBoxRow as default };

package/dist/{TableBoxRowActions-zW74DkXt.d.mts → TableBoxRowActions-CRaabjaY.d.mts}

@@ -1,4 +1,4 @@
-import { l as MenuItemProps } from "./Menu-Ca5ftvo6.mjs";
+import { l as MenuItemProps } from "./Menu-keVl-eKm.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -54,4 +54,4 @@ declare const RowActions: ({
 }: RowActionsProps) => _$react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { RowActionsContainerWithFadeWidth as i, RowActions as n, RowActionsContainer as r, RowAction as t };
-//# sourceMappingURL=TableBoxRowActions-zW74DkXt.d.mts.map
+//# sourceMappingURL=TableBoxRowActions-CRaabjaY.d.mts.map

package/dist/TableBoxRowActions.d.mts

@@ -1,2 +1,2 @@
-import { i as RowActionsContainerWithFadeWidth, n as RowActions, r as RowActionsContainer, t as RowAction } from "./TableBoxRowActions-zW74DkXt.mjs";
+import { i as RowActionsContainerWithFadeWidth, n as RowActions, r as RowActionsContainer, t as RowAction } from "./TableBoxRowActions-CRaabjaY.mjs";
 export { RowAction, RowActions, RowActionsContainer, RowActionsContainerWithFadeWidth };

package/dist/{TableCell-uv_jqT5e.d.mts → TableCell-CQsF7t4e.d.mts}

@@ -1,6 +1,6 @@
 import { n as TableRowProps } from "./TableRow-C4eHuRF3.mjs";
-import * as _$styled_components0 from "styled-components";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
+import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/Table/TableCell.d.ts
@@ -51,4 +51,4 @@ declare const TableTR: _$styled_components0.StyledComponent<"tr", any, {
 }, "role">;
 //#endregion
 export { TableCellProps as a, TableTD as c, TableCell as i, TableTR as l, StickyTH as n, TableCellTitle as o, TableActionTD as r, TableIconTD as s, StickyTD as t };
-//# sourceMappingURL=TableCell-uv_jqT5e.d.mts.map
+//# sourceMappingURL=TableCell-CQsF7t4e.d.mts.map

package/dist/TableCell.d.mts

@@ -1,2 +1,2 @@
-import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD } from "./TableCell-uv_jqT5e.mjs";
+import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD } from "./TableCell-CQsF7t4e.mjs";
 export { StickyTD, StickyTH, TableActionTD, TableCellProps, TableCellTitle, TableIconTD, TableTD, TableTR, TableCell as default };

package/dist/{TableControls-CX7BvgD2.mjs → TableControls-DM4RddQ_.mjs}

@@ -1,41 +1,42 @@
 import { a as styled, n as createGlobalStyle, r as css } from "./styledComponentsInterop-Cs5CCPRy.mjs";
-import { isActive, isDisabled, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { semanticColor, semanticOnly, semanticTokens } from "./lib/semanticColor.mjs";
-import { focusOutline, focusWithinOutline } from "./mixins/focus.mjs";
-import "./variables/transitions.mjs";
-import { transparent, withAlpha } from "./lib/color.mjs";
-import { popoverMotion } from "./mixins/motion.mjs";
-import { semanticScrollbar } from "./mixins/scrollbar.mjs";
-import { paragraphMixins } from "./mixins/text.mjs";
 import { c as usePDSLocale, i as formatDateTime, l as usePDSStrings, u as DEFAULT_COMMON_STRINGS } from "./i18n-DaOKaFc2.mjs";
 import { TruncatedText } from "./lib/TruncatedText.mjs";
+import { paragraphMixins } from "./mixins/text.mjs";
 import { t as Card_default } from "./Card-DuQHyroh.mjs";
 import { t as Spacer_default } from "./Spacer-C4d9Aho6.mjs";
 import { i as Paragraph, r as Label$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 { transparent, withAlpha } from "./lib/color.mjs";
 import { letPointerDownReachDocument } from "./lib/letPointerDownReachDocument.mjs";
+import { isActive, isDisabled, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { moveItemByIndex } from "./lib/reorderItems.mjs";
+import { mergeRefs as mergeRefs$1, useCloseFocus } from "./lib/useCloseFocus.mjs";
 import { useScrollOverflow } from "./lib/useScrollOverflow.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
+import { focusOutline, focusWithinOutline } from "./mixins/focus.mjs";
+import { popoverMotion } from "./mixins/motion.mjs";
+import { semanticScrollbar } from "./mixins/scrollbar.mjs";
 import { n as Stack, t as HStack } from "./Stack-Bzom2BTR.mjs";
-import { n as Button, t as IconButton } from "./IconButton-kSjnfhWt.mjs";
-import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-DwHgbIQ6.mjs";
-import { r as InputGroup } from "./Input-TRmTBEav.mjs";
+import { n as Button, t as IconButton } from "./IconButton-Bj1fry_K.mjs";
+import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-d4sdknti.mjs";
+import { r as InputGroup } from "./Input-DcbzPaax.mjs";
 import Input_default from "./components/Input/index.mjs";
-import { c as MenuList, s as MenuItem } from "./Menu-BvMzSH2I.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-jJSHQaih.mjs";
-import { t as Combobox } from "./Combobox-BkK_tosd.mjs";
-import { r as DatePicker, t as DateRangePicker } from "./DatePicker-BK7ioKBm.mjs";
-import { s as Popover_default } from "./Popover-DuFjaSoq.mjs";
-import { n as ErrorText } from "./FormControl--pbTH3bY.mjs";
-import { n as Select, r as SelectHeader, t as Option } from "./Select-RdTT2KoH.mjs";
-import { i as Modal_default } from "./Modal-B6X5AgWj.mjs";
-import { t as ListBox } from "./ListBox-DahM1PgU.mjs";
+import { c as MenuList, s as MenuItem } from "./Menu-BVn1jh46.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-Ip75l4Th.mjs";
+import { t as Combobox } from "./Combobox-DmFQ5cAy.mjs";
+import { n as Select, r as SelectHeader, t as Option } from "./Select-DbWEgH5c.mjs";
+import { s as Popover_default } from "./Popover-DP9DXReH.mjs";
+import { i as Modal_default } from "./Modal-SnCo7ecm.mjs";
+import { r as DateRangePicker, t as DatePicker } from "./DatePicker-CHVYVKB-.mjs";
+import { n as ErrorText } from "./FormControl-BoKGiWdQ.mjs";
+import { t as ListBox } from "./ListBox-BRgjgUSp.mjs";
 import { i as selectedPresetFor, n as parseDateFilterValue, r as resolveDateFilterValue, t as formatDateFilterValue } from "./date-filter-Bj4XkwkT.mjs";
-import { m as FormField, o as ComboboxField } from "./FormField-DMxjftFw.mjs";
-import { t as Toggle } from "./Toggle-DjmkjJlw.mjs";
-import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
+import { m as FormField, o as ComboboxField } from "./FormField-BfVrDOY0.mjs";
+import { t as Toggle } from "./Toggle-CzHoIR-n.mjs";
 import { Fragment, createContext, createElement, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { DateTime, Settings } from "luxon";
 import { CaretDownIcon, CheckIcon, CircleInfoIcon, CirclePlusIcon, CopyIcon, EyeIcon, EyeOffIcon, FilterIcon, MoreIcon, PlusIcon, RotateCcwIcon, SaveIcon, SearchIcon, SettingsIcon, StarIcon, TrashIcon, XIcon } from "@persona/icons";
@@ -45,12 +46,26 @@ import { useId } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import Fuse from "fuse.js";
 import { DragIcon as DragIcon$1 } from "@persona/icons/24px";
-import { parseAbsolute, parseDate, toCalendarDate, toZoned } from "@internationalized/date";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { DndContext, PointerSensor, closestCenter, pointerWithin, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, horizontalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
+import { parseAbsolute, parseDate, toCalendarDate, toZoned } from "@internationalized/date";
 import { v4 } from "uuid";
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
+//#region src/components/DataTable/withDisabledReason.tsx
+const DisabledReasonTrigger = styled.span`
+  display: inline-flex;
+`;
+/**
+* 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.
+*/
+const withDisabledReason = (control, { key, disabled, disabledReason }) => disabled && disabledReason ? /* @__PURE__ */ jsx(Tooltip, {
+	trigger: /* @__PURE__ */ jsx(DisabledReasonTrigger, { children: control }),
+	zIndex: Z_INDICES.floatingBar + Z_INDICES.tooltip,
+	children: disabledReason
+}, key) : control;
+//#endregion
 //#region src/components/DataTable/FormControlLabel/FormControlLabel.ts
 const FormControlLabel = styled(Label$1).attrs(() => ({
 	size: "md",
@@ -976,7 +991,12 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, starredDefa
 		const clearSelection = () => {
 			onClearSelection?.();
 		};
-		if ("icon" in action && "aria-label" in action) return /* @__PURE__ */ jsx(IconButton, {
+		const disabledReasonProps = {
+			key,
+			disabled: action.disabled,
+			disabledReason: action.disabledReason
+		};
+		if ("icon" in action && "aria-label" in action) return withDisabledReason(/* @__PURE__ */ jsx(IconButton, {
 			size: "sm",
 			"aria-label": action["aria-label"],
 			onClick: async () => {
@@ -984,9 +1004,9 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, starredDefa
 			},
 			disabled: isDisabled,
 			children: action.icon
-		}, key);
+		}, key), disabledReasonProps);
 		const displayLabel = "label" in action && selectedCount > 0 ? `${action.label} (${selectedCount})` : "label" in action ? action.label : "";
-		return /* @__PURE__ */ jsx(Button, {
+		return withDisabledReason(/* @__PURE__ */ jsx(Button, {
 			id: `table-controls__view-tab-bulk-action-${index}`,
 			variant: "basic",
 			size: "sm",
@@ -996,7 +1016,7 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, starredDefa
 			},
 			disabled: isDisabled,
 			children: displayLabel
-		}, key);
+		}, key), disabledReasonProps);
 	});
 	const showViewsBar = title || showViews || canEditViews && onSaveView || tableActions || bulkActions;
 	const getTabActionProps = (view) => {
@@ -1577,6 +1597,20 @@ const Filters = ({ compact, filterResolver, ...props }) => {
 	});
 };
 //#endregion
+//#region src/components/DataTable/TableControls/FiltersV2/FilterBar/value-labels.ts
+/**
+* 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.
+*/
+function optionLabelsForDisplay(field, value, optionLabels, getValueLabel) {
+	if (!getValueLabel || !field || field.type !== "choices" && field.type !== "multi_choices") return optionLabels;
+	const values = Array.isArray(value) ? value : [value];
+	return {
+		...optionLabels,
+		...Object.fromEntries(values.filter((entry) => typeof entry === "string").map((entry) => [entry, getValueLabel(field.id, entry) ?? optionLabels?.[entry] ?? entry]))
+	};
+}
+//#endregion
 //#region src/components/DataTable/TableControls/FiltersV2/operators.ts
 /**
 * Operator vocabulary per field type. The UI uses this to populate the
@@ -2207,7 +2241,7 @@ function RuleEditorFields({ registry, dateTimesEnabled, field, groupIndex, ruleI
 }
 //#endregion
 //#region src/components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/AdvancedFilterRuleRow.tsx
-function AdvancedFilterRuleRow({ registry, dateTimesEnabled, groupIndex, ruleIndex, rule, size, isOpen, onClose, onDelete, onFieldChange, onOperatorChange, onValueChange, renderValueControl }) {
+function AdvancedFilterRuleRow({ registry, getValueLabel, dateTimesEnabled, groupIndex, ruleIndex, rule, size, isOpen, onClose, onDelete, onFieldChange, onOperatorChange, onValueChange, renderValueControl }) {
 	const strings = usePDSStrings();
 	const locale = usePDSLocale();
 	const field = registry.get(rule.fieldId);
@@ -2215,7 +2249,7 @@ function AdvancedFilterRuleRow({ registry, dateTimesEnabled, groupIndex, ruleInd
 	const operatorConfigurable = field ? fieldHasMultipleOperators(field) : true;
 	const condition = ruleIndex === 0 ? strings.conditionIf : strings.conditionAnd;
 	const rowId = `${groupIndex}-${ruleIndex}`;
-	const valueDisplay = isValuelessOperator(rule.operator, field) ? void 0 : valueDisplayString(rule.value, registry.optionLabelsFor(rule.fieldId), carriesDateRange(rule.operator, field?.type) ? rule.relativeDate : void 0, field?.type, {
+	const valueDisplay = isValuelessOperator(rule.operator, field) ? void 0 : valueDisplayString(rule.value, optionLabelsForDisplay(field, rule.value, registry.optionLabelsFor(rule.fieldId), getValueLabel), carriesDateRange(rule.operator, field?.type) ? rule.relativeDate : void 0, field?.type, {
 		locale,
 		strings
 	});
@@ -2469,7 +2503,7 @@ function groupsForRender(compound) {
 * inline; clicking a row reveals the field/operator/value editor inside the
 * row's dropdown popover.
 */
-const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, open, onOpenChange, renderValueControl, size, dateTimesEnabled = false }) => {
+const AdvancedFilterRulesPopover = ({ registry, getValueLabel, compound, onChange, trigger, open, onOpenChange, renderValueControl, size, dateTimesEnabled = false }) => {
 	const strings = usePDSStrings();
 	const resolvedSize = useFilterBarSize(size);
 	const subtleIconSize = resolvedSize === "sm" ? "xs" : "sm";
@@ -2483,6 +2517,9 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 		onOpenChange?.(next);
 	}, [isControlled, onOpenChange]);
 	const baseId = useMemo(() => uniqueId("advanced-filter-rules__"), []);
+	const triggerRef = useRef(null);
+	const { ref: closeFocusRef, ...closeFocus } = useCloseFocus({ triggerRef });
+	const contentRef = useMemo(() => mergeRefs$1(popoverContentRef, closeFocusRef), [popoverContentRef, closeFocusRef]);
 	const fields = useMemo(() => registry.all().filter((field) => field.disabledReason == null), [registry]);
 	const handleAddOrGroup = useCallback(() => {
 		const firstField = fields[0];
@@ -2569,6 +2606,7 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 		onOpenChange: handleOpenChange,
 		children: [/* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
 			asChild: true,
+			ref: triggerRef,
 			children: trigger
 		}), /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverContent, {
 			align: "start",
@@ -2578,7 +2616,8 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 			"aria-label": strings.advancedFilterRules,
 			id: baseId,
 			onPointerDownCapture: letPointerDownReachDocument,
-			ref: popoverContentRef,
+			...closeFocus,
+			ref: contentRef,
 			tabIndex: -1,
 			onKeyDown: (event) => {
 				if (event.key !== "Enter") return;
@@ -2662,6 +2701,7 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 								const rowId = `${groupIndex}-${ruleIndex}`;
 								return /* @__PURE__ */ jsx(AdvancedFilterRuleRow, {
 									registry,
+									getValueLabel,
 									dateTimesEnabled,
 									groupIndex,
 									ruleIndex,
@@ -4660,7 +4700,7 @@ function useStableFieldIds(fieldIds) {
 	if (previous == null || fieldIds == null || previous.length !== fieldIds.length || fieldIds.some((id, index) => previous[index] !== id)) stable.current = fieldIds;
 	return stable.current;
 }
-function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = true, relativeDatesEnabled = false, dateTimesEnabled = false, singleUseFields = false, size = "md", valueControlResolver }) {
+function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = true, relativeDatesEnabled = false, dateTimesEnabled = false, singleUseFields = false, size = "md", valueControlResolver, getValueLabel }) {
 	const strings = usePDSStrings();
 	const filterState = useFilterStateV2({
 		registry,
@@ -4773,6 +4813,7 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 			"aria-label": strings.filterBar,
 			children: [filterState.advancedRulesEnabled ? /* @__PURE__ */ jsx(AdvancedFilterRulesPopover, {
 				registry,
+				getValueLabel,
 				dateTimesEnabled,
 				compound: filterState.state.compound,
 				open: rulesPopoverOpen,
@@ -4808,7 +4849,7 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 					children: filterState.state.topLevelRules.map((rule) => {
 						const field = registry.get(rule.fieldId);
 						if (!field) return null;
-						const optionLabels = registry.optionLabelsFor(field.id);
+						const optionLabels = optionLabelsForDisplay(field, rule.value, registry.optionLabelsFor(field.id), getValueLabel);
 						const isOpen = editingRuleId === rule.id;
 						return /* @__PURE__ */ jsx(FilterPopover, {
 							field,
@@ -5649,6 +5690,6 @@ function decodeBase64(input) {
 	return decodeURIComponent(escape(atob(input)));
 }
 //#endregion
-export { isCompleteDateRange as A, TableControlsProvider as B, useFilterBarSize as C, getDefaultOperatorForType as D, getConditionValueError as E, FiltersContainer as F, ControlBar as H, getActiveFilters as I, isFilterActive as L, isRangeOperator as M, isValuelessOperator as N, getOperatorsForField as O, reconcileValueForOperator as P, resolveFilterTypeDefinition as R, FILTER_SIZE_TOKENS as S, emptyValueForRule as T, DataTableCompactBar as U, useTableControls as V, EMPTY_FILTER_STATE as _, encodeFilterStateToUrlParam as a, resolveValueControl as b, FilterBar_default as c, TableViewConfiguration as d, TableViewConfigurationDropdown as f, pruneToRegistry as g, isFilterStateV2 as h, decodeFilterStateFromUrl as i, isNumericComparisonOperator as j, getOperatorsForType as k, resolveDateRangeRuleValue as l, hasCompleteValue as m, applyFilterStateToSearchParams as n, FieldRegistry as o, useFilterStateV2 as p, decodeFilterStateFromString as r, buildFieldRegistry as s, FILTER_STATE_URL_PARAM as t, TableControls as u, isEmptyState as v, NUMERIC_COMPARISON_OPERATORS as w, dateRuleIntent as x, PillShell as y, TableControlsContext as z };
+export { isCompleteDateRange as A, TableControlsProvider as B, useFilterBarSize as C, getDefaultOperatorForType as D, getConditionValueError as E, FiltersContainer as F, ControlBar as H, getActiveFilters as I, isFilterActive as L, isRangeOperator as M, isValuelessOperator as N, getOperatorsForField as O, reconcileValueForOperator as P, resolveFilterTypeDefinition as R, FILTER_SIZE_TOKENS as S, emptyValueForRule as T, DataTableCompactBar as U, useTableControls as V, withDisabledReason as W, EMPTY_FILTER_STATE as _, encodeFilterStateToUrlParam as a, resolveValueControl as b, FilterBar_default as c, TableViewConfiguration as d, TableViewConfigurationDropdown as f, pruneToRegistry as g, isFilterStateV2 as h, decodeFilterStateFromUrl as i, isNumericComparisonOperator as j, getOperatorsForType as k, resolveDateRangeRuleValue as l, hasCompleteValue as m, applyFilterStateToSearchParams as n, FieldRegistry as o, useFilterStateV2 as p, decodeFilterStateFromString as r, buildFieldRegistry as s, FILTER_STATE_URL_PARAM as t, TableControls as u, isEmptyState as v, NUMERIC_COMPARISON_OPERATORS as w, dateRuleIntent as x, PillShell as y, TableControlsContext as z };
 
-//# sourceMappingURL=TableControls-CX7BvgD2.mjs.map
+//# sourceMappingURL=TableControls-DM4RddQ_.mjs.map