@persona/design-system 0.10.10 → 0.10.12

package/dist/{TableControls-BrP_BqnF.mjs → TableControls-BXykbUBf.mjs}

@@ -7,37 +7,40 @@ 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 "./variables/transitions.mjs";
-import { a as Tooltip } from "./Tooltip-YViXzMdm.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-DxHB2g80.mjs";
-import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-BCFO38E0.mjs";
-import { r as InputGroup } from "./Input-RHXujO9u.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-BVn1jh46.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-c8XK2Lr4.mjs";
-import { t as Combobox } from "./Combobox-Gb_j1dg6.mjs";
-import { n as Select, r as SelectHeader, t as Option } from "./Select-DOlw_LPR.mjs";
-import { s as Popover_default } from "./Popover-DordjYNM.mjs";
-import { i as Modal_default } from "./Modal-De5_bPJ_.mjs";
-import { r as DateRangePicker, t as DatePicker } from "./DatePicker-C9redLBr.mjs";
-import { t as ListBox } from "./ListBox-BZp6exb8.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-Ip75l4Th.mjs";
+import { t as Combobox } from "./Combobox-BNjYEAmv.mjs";
+import { n as Select, r as SelectHeader, t as Option } from "./Select-DbWEgH5c.mjs";
+import { s as Popover_default } from "./Popover-CVX-dfYb.mjs";
+import { i as Modal_default } from "./Modal-CiPFqr0L.mjs";
+import { r as DateRangePicker, t as DatePicker } from "./DatePicker-DiilpYQg.mjs";
+import { n as ErrorText } from "./FormControl-BoKGiWdQ.mjs";
+import { t as ListBox } from "./ListBox-4rTgr3IJ.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-Cf1VMvoa.mjs";
-import { t as Toggle } from "./Toggle-D9MzTIZs.mjs";
+import { m as FormField, o as ComboboxField } from "./FormField-yYJFkJ6R.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";
-import { CaretDownIcon as CaretDownIcon$1, CircleInfoIcon as CircleInfoIcon$1, LockedIcon as LockedIcon$1, MoreIcon as MoreIcon$1, PlusIcon as PlusIcon$1, SearchIcon as SearchIcon$1, StarFillIcon, XIcon as XIcon$1 } from "@persona/icons/12px";
+import { CaretDownIcon as CaretDownIcon$1, CircleInfoIcon as CircleInfoIcon$1, LockedIcon as LockedIcon$1, MoreIcon as MoreIcon$1, PlusIcon as PlusIcon$1, SearchIcon as SearchIcon$1, StarIcon as StarIcon$1, XIcon as XIcon$1 } from "@persona/icons/12px";
 import { debounce, isEqual, noop, partition, startCase, union, uniqueId } from "lodash-es";
 import { useId } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
@@ -55,7 +58,7 @@ const FormControlLabel = styled(Label$1).attrs(() => ({
 	weight: "bold"
 }))`
   margin-bottom: ${Spacing[2]};
-  transition: ${"200ms"};
+  transition: ${"200ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
   display: inline-block;
 
   ${({ theme, isDisabled }) => css`
@@ -429,7 +432,7 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 			}
 		} : void 0,
 		"aria-keyshortcuts": onKeyboardMove ? "Alt+Shift+ArrowLeft Alt+Shift+ArrowRight" : void 0,
-		prefixIcon: isStarredDefault ? /* @__PURE__ */ jsx(StarFillIcon, { "aria-hidden": true }) : void 0,
+		prefixIcon: isStarredDefault ? /* @__PURE__ */ jsx(StarIcon$1, { "aria-hidden": true }) : void 0,
 		suffixIcon: showMenu ? /* @__PURE__ */ jsx(MoreIcon, {}) : void 0,
 		"aria-description": isStarredDefault ? strings.defaultView : void 0,
 		"data-starred-default": isStarredDefault || void 0,
@@ -589,7 +592,7 @@ const LockedViewTab = ({ id, selected, onClick, icon = "locked", children, ...pr
 		id,
 		selected,
 		onClick: selected ? void 0 : onClick,
-		prefixIcon: icon === "starred" ? /* @__PURE__ */ jsx(StarFillIcon, { "aria-hidden": true }) : void 0,
+		prefixIcon: icon === "starred" ? /* @__PURE__ */ jsx(StarIcon$1, { "aria-hidden": true }) : void 0,
 		suffixIcon: icon === "locked" ? /* @__PURE__ */ jsx(LockedIcon$1, {}) : void 0,
 		"data-starred-default": icon === "starred" || void 0,
 		"aria-description": icon === "starred" ? strings.defaultView : void 0,
@@ -1575,6 +1578,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
@@ -1737,11 +1754,26 @@ function isValuelessOperator(operator, field) {
 	const config = getConditionOperator(field, operator);
 	return config != null ? config.valueType === "none" : VALUELESS_OPERATORS.has(operator);
 }
+function isEmptyRuleValue(value) {
+	return value == null || value === "" || Array.isArray(value) && value.length === 0;
+}
+/**
+* The error message a condition operator's `validate` returns for `value`, or
+* `undefined` when the value is accepted, empty, or the operator has no
+* validator. Value controls show it below the input; a rule with a message
+* is incomplete (see `hasCompleteConditionValue`).
+*/
+function getConditionValueError(field, operator, value) {
+	const validate = getConditionOperator(field, operator)?.validate;
+	if (validate == null || isEmptyRuleValue(value)) return;
+	return validate(value) || void 0;
+}
 function hasCompleteConditionValue(rule, field) {
 	const config = getConditionOperator(field, rule.operator);
 	if (config == null) return false;
 	const { value } = rule;
 	if (config.isComplete != null && !config.isComplete(value)) return false;
+	if (getConditionValueError(field, rule.operator, value) != null) return false;
 	switch (config.valueType) {
 		case "none": return value === null;
 		case "boolean": return typeof value === "boolean";
@@ -2190,7 +2222,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);
@@ -2198,7 +2230,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
 	});
@@ -2342,6 +2374,7 @@ const FILTER_SIZE_TOKENS = {
 //#endregion
 //#region src/components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/AdvancedFilterRulesPopover.tsx
 const PopoverContent = styled(PopoverPrimitive.Content)`
+  ${popoverMotion("--radix-popover-content-transform-origin")}
   z-index: ${Z_INDICES.modalDropdown};
 `;
 const PopoverCard$1 = styled(Card_default)`
@@ -2451,7 +2484,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";
@@ -2465,6 +2498,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];
@@ -2551,6 +2587,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",
@@ -2560,7 +2597,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;
@@ -2644,6 +2682,7 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 								const rowId = `${groupIndex}-${ruleIndex}`;
 								return /* @__PURE__ */ jsx(AdvancedFilterRuleRow, {
 									registry,
+									getValueLabel,
 									dateTimesEnabled,
 									groupIndex,
 									ruleIndex,
@@ -3083,6 +3122,41 @@ const DateValueControl = ({ field, operator, value, onChange, ariaLabel, dateTim
 	});
 };
 //#endregion
+//#region src/components/DataTable/TableControls/FiltersV2/value-controls/useValueControlError.tsx
+const ErrorTextSlot = styled.div`
+  margin-top: ${Spacing[1]};
+`;
+/**
+* Error state for a text-like value control (`Input`). Returns the props that
+* put the input in its error state (red border, `aria-invalid`, linked to the
+* message) and the message element to render after the input, styled like
+* `FormField`'s `errorText`.
+*
+* With no `errorMessage` both are empty, so the control renders exactly as it
+* did without validation. The message is a sibling rather than a wrapper, so
+* the input keeps its place in the tree (and its focus) when the message
+* appears or clears while the user types.
+*/
+function useValueControlError(errorMessage) {
+	const errorId = useMemo(() => uniqueId("pds_filter_value_error__"), []);
+	if (!errorMessage) return {
+		inputProps: {},
+		errorText: null
+	};
+	return {
+		inputProps: {
+			hasError: true,
+			"aria-describedby": errorId,
+			"aria-errormessage": errorId
+		},
+		errorText: /* @__PURE__ */ jsx(ErrorTextSlot, { children: /* @__PURE__ */ jsx(ErrorText, {
+			id: errorId,
+			role: "alert",
+			children: errorMessage
+		}) })
+	};
+}
+//#endregion
 //#region src/components/DataTable/TableControls/FiltersV2/value-controls/utils.ts
 /**
 * Coerce a `FilterRuleValue` into a string suitable for an `<input>`'s
@@ -3130,7 +3204,7 @@ function numericDisplayValue(value) {
 * `onChange` is debounced (300ms) to avoid committing on every keystroke;
 * the debounce flushes on blur or Enter and cancels on unmount.
 */
-const FloatValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
+const FloatValueControl = ({ field, operator, value, onChange, ariaLabel, errorMessage }) => {
 	const strings = usePDSStrings();
 	const size = useFilterBarSize();
 	const [localValue, setLocalValue] = useState(() => numericDisplayValue(value));
@@ -3159,8 +3233,10 @@ const FloatValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
 	const handleKeyDown = useCallback((event) => {
 		if (event.key === "Enter" && !event.defaultPrevented && !event.nativeEvent.isComposing) debouncedOnChange.flush();
 	}, [debouncedOnChange]);
+	const { inputProps: errorInputProps, errorText } = useValueControlError(errorMessage);
 	if (isValuelessOperator(operator)) return null;
-	return /* @__PURE__ */ jsx(Input_default, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Input_default, {
+		...errorInputProps,
 		type: "number",
 		size,
 		step: "any",
@@ -3178,7 +3254,7 @@ const FloatValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
 			debouncedOnChange.flush();
 			setLocalValue(numericDisplayValue(value));
 		}
-	});
+	}), errorText] });
 };
 //#endregion
 //#region src/components/DataTable/TableControls/FiltersV2/value-controls/IntegerValueControl/IntegerValueControl.tsx
@@ -3207,7 +3283,7 @@ const FloatValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
 * `onChange` is debounced (300ms) to avoid committing on every keystroke;
 * the debounce flushes on blur or Enter and cancels on unmount.
 */
-const IntegerValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
+const IntegerValueControl = ({ field, operator, value, onChange, ariaLabel, errorMessage }) => {
 	const strings = usePDSStrings();
 	const size = useFilterBarSize();
 	const [localValue, setLocalValue] = useState(() => numericDisplayValue(value));
@@ -3236,8 +3312,10 @@ const IntegerValueControl = ({ field, operator, value, onChange, ariaLabel }) =>
 	const handleKeyDown = useCallback((event) => {
 		if (event.key === "Enter" && !event.defaultPrevented && !event.nativeEvent.isComposing) debouncedOnChange.flush();
 	}, [debouncedOnChange]);
+	const { inputProps: errorInputProps, errorText } = useValueControlError(errorMessage);
 	if (isValuelessOperator(operator)) return null;
-	return /* @__PURE__ */ jsx(Input_default, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Input_default, {
+		...errorInputProps,
 		type: "number",
 		size,
 		step: 1,
@@ -3255,12 +3333,12 @@ const IntegerValueControl = ({ field, operator, value, onChange, ariaLabel }) =>
 			debouncedOnChange.flush();
 			setLocalValue(numericDisplayValue(value));
 		}
-	});
+	}), errorText] });
 };
 //#endregion
 //#region src/components/DataTable/TableControls/FiltersV2/value-controls/StringValueControl/StringValueControl.tsx
 const DEBOUNCE_MS = 300;
-function StringValueControl({ field, operator, value, onChange, ariaLabel, inputType, placeholder, id }) {
+function StringValueControl({ field, operator, value, onChange, ariaLabel, errorMessage, inputType, placeholder, id }) {
 	const generatedId = useMemo(() => uniqueId("filter_v2_string_"), []);
 	const inputId = id ?? generatedId;
 	const resolvedInputType = inputType ?? (field.type === "email" ? "email" : "text");
@@ -3273,8 +3351,10 @@ function StringValueControl({ field, operator, value, onChange, ariaLabel, input
 	useEffect(() => {
 		setLocalValue(typeof value === "string" ? value : "");
 	}, [value]);
+	const { inputProps: errorInputProps, errorText } = useValueControlError(errorMessage);
 	if (isValuelessOperator(operator)) return null;
-	return /* @__PURE__ */ jsx(Input_default, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Input_default, {
+		...errorInputProps,
 		id: inputId,
 		type: resolvedInputType,
 		size,
@@ -3291,7 +3371,7 @@ function StringValueControl({ field, operator, value, onChange, ariaLabel, input
 		onKeyDown: (event) => {
 			if (event.key === "Enter" && !event.defaultPrevented && !event.nativeEvent.isComposing) debouncedOnChange.flush();
 		}
-	});
+	}), errorText] });
 }
 //#endregion
 //#region src/components/DataTable/TableControls/FiltersV2/FilterBar/value-control-resolver.tsx
@@ -3310,8 +3390,13 @@ const RESOLVERS = {
 	float: (opts) => /* @__PURE__ */ jsx(FloatValueControl, { ...opts }),
 	array: (opts) => /* @__PURE__ */ jsx(ArrayValueControl, { ...opts })
 };
-function resolveValueControl(opts, hostResolver) {
-	if (opts.field.condition != null && isValuelessOperator(opts.operator, opts.field)) return null;
+function resolveValueControl(options, hostResolver) {
+	if (options.field.condition != null && isValuelessOperator(options.operator, options.field)) return null;
+	const errorMessage = options.errorMessage ?? getConditionValueError(options.field, options.operator, options.value);
+	const opts = errorMessage == null ? options : {
+		...options,
+		errorMessage
+	};
 	const hostControl = hostResolver?.(opts);
 	if (hostControl != null) return hostControl;
 	const config = getConditionOperator(opts.field, opts.operator);
@@ -3424,7 +3509,7 @@ const PillRoot = styled.span`
   max-width: 100%;
   cursor: pointer;
   user-select: none;
-  transition: background-color ${"150ms"} ease-out;
+  transition: background-color ${"200ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
 
   /* Keyboard focus lands on the inner body button, so the visible focus
      ring is drawn on the whole pill via :focus-within. */
@@ -4557,8 +4642,8 @@ const PillsScrollTrack = styled.div`
   -webkit-mask-image: ${({ $showLeftFade, $showRightFade }) => buildEdgeMaskImage($showLeftFade, $showRightFade)};
   mask-image: ${({ $showLeftFade, $showRightFade }) => buildEdgeMaskImage($showLeftFade, $showRightFade)};
   transition:
-    -webkit-mask-image ${"200ms"} ease-out,
-    mask-image ${"200ms"} ease-out;
+    -webkit-mask-image ${"200ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"},
+    mask-image ${"200ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
 
   & > * {
     flex: 0 0 auto;
@@ -4596,7 +4681,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,
@@ -4709,6 +4794,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,
@@ -4744,7 +4830,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,
@@ -4870,7 +4956,7 @@ const StyledIconDrag = styled(DragIcon$1)`
             opacity: 0.4;
           `}
 
-  transition: opacity 0.2s ease-in-out;
+  transition: opacity ${"200ms"} ${"cubic-bezier(0.4, 0, 0.2, 1)"};
 
   path {
     stroke: ${({ theme }) => semanticColor(theme, "FgPrimary", Color.CoreSlate1000)};
@@ -5585,6 +5671,6 @@ function decodeBase64(input) {
 	return decodeURIComponent(escape(atob(input)));
 }
 //#endregion
-export { isNumericComparisonOperator as A, useTableControls as B, useFilterBarSize as C, getOperatorsForField as D, getDefaultOperatorForType as E, getActiveFilters as F, DataTableCompactBar as H, isFilterActive as I, resolveFilterTypeDefinition as L, isValuelessOperator as M, reconcileValueForOperator as N, getOperatorsForType as O, FiltersContainer as P, TableControlsContext as R, FILTER_SIZE_TOKENS as S, emptyValueForRule as T, ControlBar 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, isRangeOperator as j, isCompleteDateRange 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, TableControlsProvider 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, 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-BrP_BqnF.mjs.map
+//# sourceMappingURL=TableControls-BXykbUBf.mjs.map