@persona/design-system 0.8.2 → 0.9.0

package/dist/{TableControls-B5UGCoO-.mjs → TableControls-BtKBTGYR.mjs}

@@ -1,5 +1,5 @@
 import { a as styled, n as createGlobalStyle, r as css } from "./styledComponentsInterop-NxwFjeA4.mjs";
-import { c as usePDSLocale, i as formatDateTime, l as usePDSStrings, u as DEFAULT_COMMON_STRINGS } from "./i18n-UiE7OC4k.mjs";
+import { c as usePDSLocale, i as formatDateTime, l as usePDSStrings, u as DEFAULT_COMMON_STRINGS } from "./i18n-DeJa-arS.mjs";
 import { TruncatedText } from "./lib/TruncatedText.mjs";
 import { semanticColor, semanticOnly, semanticTokens } from "./lib/semanticColor.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
@@ -17,20 +17,20 @@ import { Z_INDICES } from "./lib/zindex.mjs";
 import { focusOutline, focusWithinOutline } from "./mixins/focus.mjs";
 import { semanticScrollbar } from "./mixins/scrollbar.mjs";
 import { n as Stack, t as HStack } from "./Stack-BkC7FCdF.mjs";
-import { n as Button, t as IconButton } from "./IconButton-H5vDZOdo.mjs";
-import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-DBOPWUUa.mjs";
-import { r as InputGroup } from "./Input-CY14-YeD.mjs";
+import { i as selectedPresetFor, n as parseDateFilterValue, r as resolveDateFilterValue, t as formatDateFilterValue } from "./date-filter-B8PKh5vg.mjs";
+import { n as Button, t as IconButton } from "./IconButton-Cqxfmrea.mjs";
+import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-CmYqreN0.mjs";
+import { r as InputGroup } from "./Input-Cg2HxteL.mjs";
 import Input_default from "./components/Input/index.mjs";
-import { c as MenuList, s as MenuItem } from "./Menu-Dw6Rcpk6.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-CedsmO5h.mjs";
-import { t as Combobox } from "./Combobox-MCaDc7h6.mjs";
-import { s as Popover_default } from "./Popover-532iYFek.mjs";
-import { i as Modal_default } from "./Modal-dpBu2MKp.mjs";
-import { t as Toggle } from "./Toggle-CZF6iBql.mjs";
-import { i as selectedPresetFor, n as parseDateFilterValue, r as resolveDateFilterValue, t as formatDateFilterValue } from "./date-filter-CWgCXz85.mjs";
-import { t as ListBox } from "./ListBox-2aYWNlO_.mjs";
-import { m as FormField, o as ComboboxField } from "./FormField-CB0yCMro.mjs";
-import { r as DatePicker, t as DateRangePicker } from "./DatePicker-CKk6Hnj2.mjs";
+import { c as MenuList, s as MenuItem } from "./Menu-CwKmfxKI.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-C2BHv8Lc.mjs";
+import { t as Combobox } from "./Combobox-BkpRqaxB.mjs";
+import { s as Popover_default } from "./Popover-BcII7usF.mjs";
+import { i as Modal_default } from "./Modal-BBIJVhv2.mjs";
+import { t as Toggle } from "./Toggle-BEOoATjS.mjs";
+import { t as ListBox } from "./ListBox-CjNokYs6.mjs";
+import { m as FormField, o as ComboboxField } from "./FormField-C3nUzhGT.mjs";
+import { r as DatePicker, t as DateRangePicker } from "./DatePicker-CjuR6ORz.mjs";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
 import { Fragment, createContext, createElement, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -39,10 +39,11 @@ import { CaretDownIcon, CheckIcon, CircleInfoIcon, CirclePlusIcon, CopyIcon, Eye
 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, 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";
 import Fuse from "fuse.js";
 import { DragIcon as DragIcon$1 } from "@persona/icons/24px";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { DndContext, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { DndContext, PointerSensor, closestCenter, pointerWithin, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, horizontalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 import { parseAbsolute, parseDate, toCalendarDate, toZoned } from "@internationalized/date";
@@ -332,6 +333,7 @@ const ViewNameInput = styled(Input_default)`
 const AddViewButton = styled(IconButton)`
   color: ${({ theme }) => semanticColor(theme, "FgSecondary", theme.color.text.secondary)};
 `;
+const MIN_TAB_WIDTH_FOR_HIDE_BUTTON = 32;
 const HideViewButton = styled(IconButton)`
   position: absolute;
   top: 50%;
@@ -527,15 +529,28 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 	});
 	return tab;
 };
-const SavedViewTabSlot = ({ slotRef, slotStyle, ...props }) => {
+const SavedViewTabSlot = ({ slotRef, slotStyle, slotListeners, ...props }) => {
 	const { view, selected, onViewHiddenChange, onHideView } = props;
 	const strings = usePDSStrings();
+	const [slotElement, setSlotElement] = useState(null);
+	const mergedSlotRef = useMemo(() => mergeRefs(slotRef, setSlotElement), [slotRef]);
+	const [isTooNarrowForHideButton, setIsTooNarrowForHideButton] = useState(false);
+	useLayoutEffect(() => {
+		const tab = slotElement?.querySelector("[role=\"tab\"]");
+		if (!tab) return;
+		const measure = () => setIsTooNarrowForHideButton(tab.offsetWidth > 0 && tab.offsetWidth < MIN_TAB_WIDTH_FOR_HIDE_BUTTON);
+		measure();
+		const resizeObserver = new ResizeObserver(measure);
+		resizeObserver.observe(tab);
+		return () => resizeObserver.disconnect();
+	}, [slotElement, selected]);
 	return /* @__PURE__ */ jsxs(TabSlot, {
-		ref: slotRef,
+		ref: mergedSlotRef,
 		"data-tab-view": true,
 		"data-tab-slot": true,
 		style: slotStyle,
-		children: [/* @__PURE__ */ jsx(SavedViewTab, { ...props }), !selected && onViewHiddenChange && /* @__PURE__ */ jsx(HideViewButton, {
+		...slotListeners,
+		children: [/* @__PURE__ */ jsx(SavedViewTab, { ...props }), !selected && onViewHiddenChange && !isTooNarrowForHideButton && /* @__PURE__ */ jsx(HideViewButton, {
 			id: `table-controls__view-tab-hide_${view.id}`,
 			"aria-label": strings.hideViewNamed(view.name),
 			title: strings.hideViewTitle,
@@ -546,9 +561,12 @@ const SavedViewTabSlot = ({ slotRef, slotStyle, ...props }) => {
 };
 const SortableSavedViewTab = (props) => {
 	const { setNodeRef, listeners, transform, transition, isDragging } = useSortable({ id: props.view.id });
+	const slotListeners = useMemo(() => listeners && Object.fromEntries(Object.entries(listeners).map(([eventName, handler]) => [eventName, (event) => {
+		if (event.currentTarget.contains(event.target)) handler(event);
+	}])), [listeners]);
 	return /* @__PURE__ */ jsx(SavedViewTabSlot, {
 		...props,
-		...listeners,
+		slotListeners,
 		slotRef: setNodeRef,
 		slotStyle: {
 			transform: transform ? `translate3d(${transform.x}px, 0, 0)` : void 0,
@@ -667,7 +685,7 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 	const [isAddViewOverflowing, setIsAddViewOverflowing] = useState(false);
 	useEffect(() => {
 		const previousPendingDeleteView = previousPendingDeleteViewRef.current;
-		if (!pendingDeleteView && previousPendingDeleteView) (document.getElementById(`${OVERFLOW_TAB_ID_PREFIX}${previousPendingDeleteView.id}`) ?? document.getElementById(`${TAB_ID_PREFIX}${previousPendingDeleteView.id}`))?.focus();
+		if (!pendingDeleteView && previousPendingDeleteView) (document.getElementById(`${OVERFLOW_TAB_ID_PREFIX}${previousPendingDeleteView.id}`) ?? document.getElementById(`${TAB_ID_PREFIX}${previousPendingDeleteView.id}`))?.focus({ preventScroll: true });
 		previousPendingDeleteViewRef.current = pendingDeleteView;
 	}, [pendingDeleteView]);
 	const [shownViews, hiddenViews] = useMemo(() => {
@@ -734,15 +752,17 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 			bottom: tabListRect.bottom
 		} : null;
 	};
-	const closestVisibleTabCenter = useCallback((args) => {
+	const visibleTabCollision = useCallback((args) => {
 		const bounds = dragBoundsRef.current;
-		return closestCenter({
+		const visibleArgs = {
 			...args,
 			droppableContainers: args.droppableContainers.filter((container) => {
 				const rect = args.droppableRects.get(container.id);
 				return bounds == null || rect != null && rect.bottom <= bounds.bottom + 1;
 			})
-		});
+		};
+		const pointerCollisions = pointerWithin(visibleArgs);
+		return pointerCollisions.length > 0 ? pointerCollisions : closestCenter(visibleArgs);
 	}, []);
 	const restrictToVisibleSavedTabs = useCallback(({ transform, draggingNodeRect }) => {
 		const bounds = dragBoundsRef.current;
@@ -774,12 +794,14 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 		if (over) moveView(String(active.id), indexOfView(String(over.id)));
 	};
 	const hideView = (viewId) => {
-		const index = shownViews.findIndex((view) => view.id === viewId);
+		const overflowIds = new Set(overflowViews.map((view) => view.id));
+		const visibleViews = shownViews.filter((view) => !overflowIds.has(view.id));
+		const index = visibleViews.findIndex((view) => view.id === viewId);
 		const isCurrent = viewId === currentView;
-		const focusTarget = isCurrent ? void 0 : shownViews[index + 1] ?? shownViews[index - 1];
+		const focusTarget = isCurrent || index === -1 ? void 0 : visibleViews[index + 1] ?? visibleViews[index - 1];
 		onViewHiddenChange?.(viewId, true);
 		if (isCurrent) onSelectView?.(null);
-		document.getElementById(`${TAB_ID_PREFIX}${focusTarget ? focusTarget.id : "default"}`)?.focus();
+		document.getElementById(`${TAB_ID_PREFIX}${focusTarget ? focusTarget.id : "default"}`)?.focus({ preventScroll: true });
 	};
 	const moveViewWithKeyboard = (viewId, direction) => {
 		const neighbor = shownViews[shownViews.findIndex((view) => view.id === viewId) + direction];
@@ -960,7 +982,7 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 		/* @__PURE__ */ jsx(ProductTourStyles, {}),
 		showViewsBar && (onReorderViews ? /* @__PURE__ */ jsx(DndContext, {
 			sensors,
-			collisionDetection: closestVisibleTabCenter,
+			collisionDetection: visibleTabCollision,
 			modifiers: [restrictToVisibleSavedTabs],
 			onDragStart: handleDragStart,
 			onDragEnd: handleDragEnd,
@@ -1532,6 +1554,7 @@ function getOperatorsForType(type) {
 * field can never surface an operator the host application can't serialize.
 */
 function getOperatorsForField(field) {
+	if (field.condition != null) return field.condition.operators.map(({ operator }) => operator);
 	const { allowedOperators } = field;
 	if (allowedOperators == null || allowedOperators.length === 0) return getOperatorsForType(field.type);
 	return allowedOperators;
@@ -1541,8 +1564,26 @@ function getDefaultOperatorForType(type) {
 	if (list.length === 0) throw new Error(`No operators defined for field type "${type}"`);
 	return list[0];
 }
-function isValuelessOperator(operator) {
-	return VALUELESS_OPERATORS.has(operator);
+function getConditionOperator(field, operator) {
+	return field?.condition?.operators.find((config) => config.operator === operator);
+}
+function isValuelessOperator(operator, field) {
+	const config = getConditionOperator(field, operator);
+	return config != null ? config.valueType === "none" : VALUELESS_OPERATORS.has(operator);
+}
+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;
+	switch (config.valueType) {
+		case "none": return value === null;
+		case "boolean": return typeof value === "boolean";
+		case "number": return typeof value === "number" && Number.isFinite(value);
+		case "integer": return typeof value === "number" && Number.isSafeInteger(value);
+		case "string": return typeof value === "string" && value.length > 0;
+		case "string_array": return Array.isArray(value) && value.length > 0 && value.every((entry) => typeof entry === "string");
+	}
 }
 /**
 * Whether a rule's value is a date range: a range operator, or a field that is
@@ -1587,6 +1628,10 @@ function fieldHasMultipleOperators(field) {
 * translatable `CommonStrings` table (English defaults: "is", "is not", "contains", ...).
 */
 const OPERATOR_LABEL_KEYS = {
+	gt: "operatorGreaterThan",
+	gte: "operatorGreaterThanOrEqual",
+	lt: "operatorLessThan",
+	lte: "operatorLessThanOrEqual",
 	is: "operatorIs",
 	is_not: "operatorIsNot",
 	contains: "operatorContains",
@@ -1615,8 +1660,11 @@ const OPERATOR_LABEL_KEYS_BY_TYPE = { multi_choices: {
 * The label for `operator`, specialized for `fieldType` where the generic label is ambiguous.
 * Pass `strings` from `usePDSStrings()` to translate it; English when omitted.
 */
-function getOperatorLabel(operator, fieldType, strings = DEFAULT_COMMON_STRINGS) {
-	return strings[fieldType && OPERATOR_LABEL_KEYS_BY_TYPE[fieldType]?.[operator] || OPERATOR_LABEL_KEYS[operator]];
+function getOperatorLabel(operator, fieldType, strings = DEFAULT_COMMON_STRINGS, field) {
+	const config = getConditionOperator(field, operator);
+	if (config != null) return config.label;
+	const key = fieldType && OPERATOR_LABEL_KEYS_BY_TYPE[fieldType]?.[operator] || OPERATOR_LABEL_KEYS[operator];
+	return key != null ? strings[key] : operator;
 }
 /**
 * Empty-but-present value seeded when a rule switches from a valueless operator
@@ -1650,7 +1698,16 @@ function emptyDateRange() {
 * `between`.
 */
 function emptyValueForRule(field, operator) {
-	if (isValuelessOperator(operator)) return null;
+	if (isValuelessOperator(operator, field)) return null;
+	const config = getConditionOperator(field, operator);
+	if (config != null) {
+		if (config.defaultValue != null) return config.defaultValue;
+		switch (config.valueType) {
+			case "string_array": return [];
+			case "boolean": return true;
+			default: return "";
+		}
+	}
 	if (isRangeOperator(operator) || field.type === "date_range") return emptyDateRange();
 	return emptyValueForFieldType(field.type);
 }
@@ -1661,7 +1718,8 @@ function emptyValueForRule(field, operator) {
 * the range control can't read it and the wire format would reject it.
 */
 function reconcileValueForOperator(field, nextOperator, previousOperator, value) {
-	if (isValuelessOperator(nextOperator)) return null;
+	if (isValuelessOperator(nextOperator, field)) return null;
+	if (field.condition != null) return getConditionOperator(field, nextOperator)?.valueType === getConditionOperator(field, previousOperator)?.valueType ? value ?? emptyValueForRule(field, nextOperator) : emptyValueForRule(field, nextOperator);
 	if (isRangeOperator(nextOperator) !== isRangeOperator(previousOperator)) return emptyValueForRule(field, nextOperator);
 	if (field.type === "date" && nextOperator === "is" && typeof value === "string" && TIME_COMPONENT$1.test(value)) return DateTime.fromISO(value).setZone(Settings.defaultZone).toISODate();
 	if (field.type === "date" && (previousOperator === "before" || previousOperator === "after") && (nextOperator === "before" || nextOperator === "after") && previousOperator !== nextOperator && typeof value === "string" && TIME_COMPONENT$1.test(value)) {
@@ -1748,6 +1806,7 @@ function valueDisplayString(value, optionLabels, relativeDate, fieldType, { loca
 	}
 }
 function draftValueFor(field, operator) {
+	if (field.condition != null) return emptyValueForRule(field, operator);
 	if (isValuelessOperator(operator)) return null;
 	if (field.type === "boolean") return true;
 	if (isRangeOperator(operator)) return emptyValueForRule(field, operator);
@@ -1833,29 +1892,50 @@ function nodeToOptions(node) {
 * `fieldsLabel` names the custom-field submenu; pass `usePDSStrings().fields` to translate it.
 */
 function buildFieldPickerOptions(registry, visibleCustomFieldParents, excludeFieldIds, fieldsLabel = FIELDS_SUBMENU_LABEL) {
-	const systemFields = registry.systemFieldsList();
+	const systemFields = registry.all().filter((field) => field.source === "system" || field.pickerGroup != null);
 	const customGroups = registry.customFieldGroups();
 	const excluded = excludeFieldIds == null ? null : new Set(excludeFieldIds);
-	const tree = systemFields.filter((field) => excluded == null || !excluded.has(field.id)).map((field) => ({
-		label: field.label,
-		value: field.id
-	}));
+	const tree = [];
+	const pickerGroups = /* @__PURE__ */ new Map();
+	for (const field of systemFields) {
+		if (excluded?.has(field.id)) continue;
+		const option = {
+			label: field.label,
+			value: field.id
+		};
+		if (field.pickerGroup == null) {
+			tree.push(option);
+			continue;
+		}
+		const options = pickerGroups.get(field.pickerGroup) ?? [];
+		options.push(option);
+		pickerGroups.set(field.pickerGroup, options);
+	}
+	for (const [label, options] of pickerGroups) tree.push({
+		label,
+		nested: true,
+		options
+	});
 	const allowedParents = visibleCustomFieldParents == null ? null : new Set(visibleCustomFieldParents);
 	const customRoot = newNode();
 	for (const group of customGroups) {
 		if (allowedParents != null && !allowedParents.has(group.parent)) continue;
 		const description = group.parent !== "" ? group.parent : void 0;
 		for (const field of group.fields) {
-			if (excluded != null && excluded.has(field.id)) continue;
+			if (field.pickerGroup != null || excluded?.has(field.id)) continue;
 			insertField(customRoot, field, description);
 		}
 	}
 	const customOptions = nodeToOptions(customRoot);
-	if (customOptions.length > 0) tree.push({
-		label: fieldsLabel,
-		nested: true,
-		options: customOptions
-	});
+	if (customOptions.length > 0) {
+		const existingGroup = pickerGroups.get(fieldsLabel);
+		if (existingGroup != null) existingGroup.push(...customOptions);
+		else tree.push({
+			label: fieldsLabel,
+			nested: true,
+			options: customOptions
+		});
+	}
 	return tree;
 }
 //#endregion
@@ -1876,17 +1956,45 @@ function RuleEditorFields({ registry, dateTimesEnabled, field, groupIndex, ruleI
 	const strings = usePDSStrings();
 	const minutePrecisionValue = field != null && isMinutePrecisionDate(field, rule.operator, dateTimesEnabled);
 	const fieldOptions = useMemo(() => buildFieldPickerOptions(registry, void 0, void 0, strings.fields), [registry, strings.fields]);
+	const optionDisabledReason = useCallback((option) => registry.get(option.value)?.disabledReason, [registry]);
+	const operatorOptions = useMemo(() => operators.map((operator) => ({
+		label: getOperatorLabel(operator, field?.type, strings, field),
+		value: operator
+	})), [
+		operators,
+		field,
+		strings
+	]);
+	const handleFieldChange = useCallback((next) => {
+		if (next != null && registry.get(next)?.disabledReason == null) onFieldChange(groupIndex, ruleIndex, next);
+	}, [
+		registry,
+		onFieldChange,
+		groupIndex,
+		ruleIndex
+	]);
+	const handleOperatorChange = useCallback((next) => {
+		if (next != null) onOperatorChange(groupIndex, ruleIndex, next);
+	}, [
+		onOperatorChange,
+		groupIndex,
+		ruleIndex
+	]);
+	const handleValueChange = useCallback((next, relativeDate) => onValueChange(groupIndex, ruleIndex, next, relativeDate), [
+		onValueChange,
+		groupIndex,
+		ruleIndex
+	]);
 	return /* @__PURE__ */ jsxs(StatementFields, { children: [
 		/* @__PURE__ */ jsx(ComboboxField, {
-			label: strings.value,
+			label: strings.field,
 			labelProps: { size },
 			"aria-label": strings.fieldForRule(ruleIndex + 1, groupIndex + 1),
 			size,
 			options: fieldOptions,
+			optionDisabledReason,
 			value: rule.fieldId,
-			onChange: (next) => {
-				if (typeof next === "string") onFieldChange(groupIndex, ruleIndex, next);
-			},
+			onChange: handleFieldChange,
 			placeholder: strings.selectField,
 			portal: false
 		}),
@@ -1895,14 +2003,9 @@ function RuleEditorFields({ registry, dateTimesEnabled, field, groupIndex, ruleI
 			labelProps: { size },
 			"aria-label": strings.operatorForRule(ruleIndex + 1, groupIndex + 1),
 			size,
-			options: operators.map((op) => ({
-				label: getOperatorLabel(op, field?.type, strings),
-				value: op
-			})),
+			options: operatorOptions,
 			value: rule.operator,
-			onChange: (next) => {
-				if (typeof next === "string") onOperatorChange(groupIndex, ruleIndex, next);
-			},
+			onChange: handleOperatorChange,
 			portal: false
 		}) : /* @__PURE__ */ jsx(FormField, {
 			label: strings.operator,
@@ -1910,16 +2013,16 @@ function RuleEditorFields({ registry, dateTimesEnabled, field, groupIndex, ruleI
 			children: /* @__PURE__ */ jsx(Input_default, {
 				size,
 				"aria-label": strings.operatorForRule(ruleIndex + 1, groupIndex + 1),
-				value: getOperatorLabel(rule.operator, field?.type, strings),
+				value: getOperatorLabel(rule.operator, field?.type, strings, field),
 				disabled: true,
 				readOnly: true
 			})
 		}),
-		field && !isValuelessOperator(rule.operator) ? /* @__PURE__ */ jsx(FormField, {
+		field && !isValuelessOperator(rule.operator, field) ? /* @__PURE__ */ jsx(FormField, {
 			label: strings.value,
 			labelProps: { size },
 			configField: minutePrecisionValue ? false : void 0,
-			children: /* @__PURE__ */ jsx(Fragment$1, { children: renderValueControl(field, rule.operator, rule.value, (next, relativeDate) => onValueChange(groupIndex, ruleIndex, next, relativeDate), rule.relativeDate) })
+			children: /* @__PURE__ */ jsx(Fragment$1, { children: renderValueControl(field, rule.operator, rule.value, handleValueChange, rule.relativeDate) })
 		}) : null
 	] });
 }
@@ -1933,14 +2036,14 @@ 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) ? 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, registry.optionLabelsFor(rule.fieldId), carriesDateRange(rule.operator, field?.type) ? rule.relativeDate : void 0, field?.type, {
 		locale,
 		strings
 	});
 	const textValue = [
 		condition,
 		field?.label ?? rule.fieldId,
-		getOperatorLabel(rule.operator, field?.type, strings),
+		getOperatorLabel(rule.operator, field?.type, strings, field),
 		valueDisplay
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(ListBox.LogicRow, {
@@ -1948,7 +2051,7 @@ function AdvancedFilterRuleRow({ registry, dateTimesEnabled, groupIndex, ruleInd
 		condition,
 		hideCondition: true,
 		attributeName: field?.label ?? rule.fieldId,
-		operator: getOperatorLabel(rule.operator, field?.type, strings),
+		operator: getOperatorLabel(rule.operator, field?.type, strings, field),
 		matchLevelName: valueDisplay,
 		textValue,
 		size,
@@ -2200,11 +2303,11 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 		onOpenChange?.(next);
 	}, [isControlled, onOpenChange]);
 	const baseId = useMemo(() => uniqueId("advanced-filter-rules__"), []);
-	const fields = registry.all();
+	const fields = useMemo(() => registry.all().filter((field) => field.disabledReason == null), [registry]);
 	const handleAddOrGroup = useCallback(() => {
 		const firstField = fields[0];
 		if (!firstField) return;
-		const operator = registry.reconcileOperator(firstField.id, "is");
+		const operator = firstField.condition != null ? registry.defaultOperatorFor(firstField.id) : registry.reconcileOperator(firstField.id, "is");
 		const groupIndex = compound.groups.length;
 		onChange(addRuleToGroup(compound, groupIndex, {
 			fieldId: firstField.id,
@@ -2221,7 +2324,7 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 	const handleAddRuleToGroup = useCallback((groupIndex) => {
 		const firstField = fields[0];
 		if (!firstField) return;
-		const operator = registry.reconcileOperator(firstField.id, "is");
+		const operator = firstField.condition != null ? registry.defaultOperatorFor(firstField.id) : registry.reconcileOperator(firstField.id, "is");
 		const newRowId = `${groupIndex}-${compound.groups[groupIndex]?.rules.length ?? 0}`;
 		onChange(addRuleToGroup(compound, groupIndex, {
 			fieldId: firstField.id,
@@ -2243,7 +2346,7 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 	}, [compound, applyCompoundChange]);
 	const handleFieldChange = useCallback((groupIndex, ruleIndex, nextFieldId) => {
 		const field = registry.get(nextFieldId);
-		if (!field) return;
+		if (!field || field.disabledReason != null) return;
 		const prev = compound.groups[groupIndex]?.rules[ruleIndex];
 		if (!prev) return;
 		const operator = registry.reconcileOperator(field.id, prev.operator);
@@ -2301,9 +2404,11 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 				if (event.key !== "Enter") return;
 				if (selectedRowKey != null) {
 					event.preventDefault();
-					closeSelectedRow();
 					requestAnimationFrame(() => {
-						popoverContentRef.current?.focus();
+						closeSelectedRow();
+						requestAnimationFrame(() => {
+							popoverContentRef.current?.focus();
+						});
 					});
 					return;
 				}
@@ -2356,6 +2461,7 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 							})
 						}), /* @__PURE__ */ jsx(IconButton, {
 							size: subtleIconSize,
+							disabled: fields.length === 0,
 							onClick: () => handleAddRuleToGroup(groupIndex),
 							"aria-label": strings.addRuleToFilterGroup(groupIndex + 1),
 							"data-test": `advanced-filter-rules__add-rule-${groupIndex}`,
@@ -2398,6 +2504,7 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 					width: "auto",
 					prefixIcon: /* @__PURE__ */ jsx(PlusIcon, {}),
 					onClick: handleAddOrGroup,
+					disabled: fields.length === 0,
 					"data-test": "advanced-filter-rules__add-or-group",
 					children: strings.orGroup
 				}) })] })]
@@ -2844,7 +2951,7 @@ function numericDisplayValue(value) {
 * rule actually carries when focus leaves.
 *
 * `onChange` is debounced (300ms) to avoid committing on every keystroke;
-* the debounce flushes on blur and on unmount so no pending value is lost.
+* the debounce flushes on blur or Enter and cancels on unmount.
 */
 const FloatValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
 	const strings = usePDSStrings();
@@ -2872,6 +2979,9 @@ const FloatValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
 		if (!Number.isFinite(parsed)) return;
 		debouncedOnChange(parsed);
 	}, [debouncedOnChange]);
+	const handleKeyDown = useCallback((event) => {
+		if (event.key === "Enter" && !event.defaultPrevented && !event.nativeEvent.isComposing) debouncedOnChange.flush();
+	}, [debouncedOnChange]);
 	if (isValuelessOperator(operator)) return null;
 	return /* @__PURE__ */ jsx(Input_default, {
 		type: "number",
@@ -2882,6 +2992,7 @@ const FloatValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
 		"aria-label": ariaLabel ?? strings.fieldValue(field.label),
 		value: localValue,
 		onChange: (e) => handleChange(e.target.value),
+		onKeyDown: handleKeyDown,
 		onFocus: () => {
 			isFocusedRef.current = true;
 		},
@@ -2916,7 +3027,7 @@ const FloatValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
 * the user's next keystroke.
 *
 * `onChange` is debounced (300ms) to avoid committing on every keystroke;
-* the debounce flushes on blur and on unmount so no pending value is lost.
+* the debounce flushes on blur or Enter and cancels on unmount.
 */
 const IntegerValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
 	const strings = usePDSStrings();
@@ -2944,6 +3055,9 @@ const IntegerValueControl = ({ field, operator, value, onChange, ariaLabel }) =>
 		if (!Number.isFinite(parsed)) return;
 		debouncedOnChange(Math.trunc(parsed));
 	}, [debouncedOnChange]);
+	const handleKeyDown = useCallback((event) => {
+		if (event.key === "Enter" && !event.defaultPrevented && !event.nativeEvent.isComposing) debouncedOnChange.flush();
+	}, [debouncedOnChange]);
 	if (isValuelessOperator(operator)) return null;
 	return /* @__PURE__ */ jsx(Input_default, {
 		type: "number",
@@ -2954,6 +3068,7 @@ const IntegerValueControl = ({ field, operator, value, onChange, ariaLabel }) =>
 		"aria-label": ariaLabel ?? strings.fieldValue(field.label),
 		value: localValue,
 		onChange: (e) => handleChange(e.target.value),
+		onKeyDown: handleKeyDown,
 		onFocus: () => {
 			isFocusedRef.current = true;
 		},
@@ -2996,7 +3111,7 @@ function StringValueControl({ field, operator, value, onChange, ariaLabel, input
 			debouncedOnChange.flush();
 		},
 		onKeyDown: (event) => {
-			if (event.key === "Enter") debouncedOnChange.flush();
+			if (event.key === "Enter" && !event.defaultPrevented && !event.nativeEvent.isComposing) debouncedOnChange.flush();
 		}
 	});
 }
@@ -3018,8 +3133,27 @@ const RESOLVERS = {
 	array: (opts) => /* @__PURE__ */ jsx(ArrayValueControl, { ...opts })
 };
 function resolveValueControl(opts, hostResolver) {
+	if (opts.field.condition != null && isValuelessOperator(opts.operator, opts.field)) return null;
 	const hostControl = hostResolver?.(opts);
 	if (hostControl != null) return hostControl;
+	const config = getConditionOperator(opts.field, opts.operator);
+	if (config != null) {
+		if (config.valueType === "string_array") return opts.field.options != null ? /* @__PURE__ */ jsx(ChoicesValueControl, {
+			multiple: true,
+			...opts,
+			operator: "is"
+		}) : null;
+		const type = config.valueType === "number" ? "float" : config.valueType;
+		if (type === "none") return null;
+		return RESOLVERS[type]?.({
+			...opts,
+			operator: "is",
+			field: {
+				...opts.field,
+				type
+			}
+		}) ?? null;
+	}
 	const renderer = RESOLVERS[opts.field.type];
 	if (!renderer) return null;
 	return renderer(opts);
@@ -3063,10 +3197,11 @@ const FilterPickerMenu = ({ registry, onPickField, triggerLabel, compact = false
 		unfilteredOptions,
 		strings.fields
 	]);
+	const optionDisabledReason = useCallback((option) => registry.get(option.value)?.disabledReason, [registry]);
 	const handleChange = useCallback((value) => {
 		if (value == null) return;
 		const field = registry.get(value);
-		if (!field) return;
+		if (!field || field.disabledReason != null) return;
 		onPickField(field);
 	}, [registry, onPickField]);
 	if (options.length === 0 && unfilteredOptions.length > 0) return null;
@@ -3088,6 +3223,7 @@ const FilterPickerMenu = ({ registry, onPickField, triggerLabel, compact = false
 		$isOpen: false,
 		children: /* @__PURE__ */ jsx(Combobox, {
 			options,
+			optionDisabledReason,
 			value: null,
 			onChange: handleChange,
 			size: resolvedSize,
@@ -3347,9 +3483,10 @@ function normalizeValueToDisplay(value, optionLabels, relativeDate, fieldType, s
 */
 function buildAccessibleName(field, rule, displayedValues, strings = DEFAULT_COMMON_STRINGS) {
 	if (rule == null) return field.label;
-	if (!isValuelessOperator(rule.operator) && displayedValues.length === 0) return field.label;
-	const operatorLabel = getOperatorLabel(rule.operator, field.type, strings);
-	if (isValuelessOperator(rule.operator)) return `${field.label} ${operatorLabel}`;
+	if (field.condition != null && !hasCompleteConditionValue(rule, field)) return field.label;
+	if (!isValuelessOperator(rule.operator, field) && displayedValues.length === 0) return field.label;
+	const operatorLabel = getOperatorLabel(rule.operator, field.type, strings, field);
+	if (isValuelessOperator(rule.operator, field)) return `${field.label} ${operatorLabel}`;
 	return `${field.label} ${operatorLabel} ${displayedValues.join(", ")}`;
 }
 const FilterPill = forwardRef(function FilterPill({ field, rule, onClick, onDismiss, variant = "default", optionLabels, size, ...rest }, ref) {
@@ -3357,16 +3494,16 @@ const FilterPill = forwardRef(function FilterPill({ field, rule, onClick, onDism
 	const resolvedSize = useFilterBarSize(size);
 	const strings = usePDSStrings();
 	const locale = usePDSLocale();
-	const displayedValues = useMemo(() => rule && !isValuelessOperator(rule.operator) ? normalizeValueToDisplay(rule.value, optionLabels, carriesDateRange(rule.operator, field?.type) ? rule.relativeDate : void 0, field?.type, strings, locale) : [], [
+	const displayedValues = useMemo(() => rule && !isValuelessOperator(rule.operator, field) ? normalizeValueToDisplay(rule.value, optionLabels, carriesDateRange(rule.operator, field?.type) ? rule.relativeDate : void 0, field?.type, strings, locale) : [], [
 		rule,
 		optionLabels,
-		field?.type,
+		field,
 		strings,
 		locale
 	]);
 	const accessibleName = buildAccessibleName(field, rule, displayedValues, strings);
 	const hasRule = rule != null;
-	const isComplete = hasRule && (isValuelessOperator(rule.operator) || displayedValues.length > 0);
+	const isComplete = hasRule && (field.condition != null ? hasCompleteConditionValue(rule, field) : isValuelessOperator(rule.operator, field) || displayedValues.length > 0);
 	const firstValue = displayedValues[0];
 	const overflowValues = displayedValues.slice(1);
 	const overflowTooltipId = `${reactId}-overflow`;
@@ -3381,8 +3518,8 @@ const FilterPill = forwardRef(function FilterPill({ field, rule, onClick, onDism
 		...rest,
 		children: [
 			/* @__PURE__ */ jsx(FieldLabel, { children: /* @__PURE__ */ jsx(TruncatedText, { children: field.label }) }),
-			isComplete && hasRule && /* @__PURE__ */ jsx(OperatorLabel, { children: getOperatorLabel(rule.operator, field.type, strings) }),
-			isComplete && hasRule && !isValuelessOperator(rule.operator) && firstValue != null && /* @__PURE__ */ jsxs(ValueChipGroup, { children: [/* @__PURE__ */ jsx(ValueChip, {
+			isComplete && hasRule && /* @__PURE__ */ jsx(OperatorLabel, { children: getOperatorLabel(rule.operator, field.type, strings, field) }),
+			isComplete && hasRule && !isValuelessOperator(rule.operator, field) && firstValue != null && /* @__PURE__ */ jsxs(ValueChipGroup, { children: [/* @__PURE__ */ jsx(ValueChip, {
 				$variant: variant,
 				$size: resolvedSize,
 				children: /* @__PURE__ */ jsx(TruncatedText, { children: firstValue })
@@ -3519,10 +3656,10 @@ const Footer = styled(HStack).attrs({
 * back through `onChangeOperator` and forwards open/close transitions
 * through Radix's controlled props.
 */
-const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, onClose, trigger, open, onOpenChange, size, wide = false }) => {
+const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, onClose, onApply, trigger, open, onOpenChange, size, wide = false }) => {
 	const strings = usePDSStrings();
 	const resolvedSize = useFilterBarSize(size);
-	const valueless = isValuelessOperator(operator);
+	const valueless = isValuelessOperator(operator, field);
 	const CaretIcon = resolvedSize === "sm" ? CaretDownIcon$1 : CaretDownIcon;
 	const InfoIcon = resolvedSize === "sm" ? CircleInfoIcon$1 : CircleInfoIcon;
 	const showOperatorSelector = fieldHasMultipleOperators(field);
@@ -3532,6 +3669,7 @@ const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, on
 		if (!next) onClose();
 	}, [onOpenChange, onClose]);
 	const valueSlotRef = useRef(null);
+	const applyButtonRef = useRef(null);
 	useEffect(() => {
 		if (open !== true || valueless) return;
 		const handle = requestAnimationFrame(() => {
@@ -3545,16 +3683,19 @@ const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, on
 		field.id,
 		valueless
 	]);
-	const handleKeyDown = (event) => {
-		if (event.key !== "Enter") return;
+	const handleKeyDown = useCallback((event) => {
+		if (event.key !== "Enter" || event.defaultPrevented || event.nativeEvent.isComposing) return;
 		const target = event.target;
 		if (!target || target.tagName !== "INPUT") return;
 		const input = target;
-		if (input.type === "checkbox" || input.type === "radio") return;
-		if (input.getAttribute("role") === "combobox") return;
+		if (input.type === "checkbox" || input.type === "radio" || input.getAttribute("role") === "combobox") return;
 		event.preventDefault();
+		if (applyButtonRef.current != null) {
+			applyButtonRef.current.click();
+			return;
+		}
 		handleOpenChange(false);
-	};
+	}, [handleOpenChange]);
 	return /* @__PURE__ */ jsxs(Popover_default, {
 		open,
 		onOpenChange: handleOpenChange,
@@ -3578,31 +3719,43 @@ const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, on
 				children: [/* @__PURE__ */ jsxs(Main, {
 					$valueless: valueless,
 					"data-test": "filter-popover__main",
-					children: [/* @__PURE__ */ jsxs(HeaderRow, {
-						$size: resolvedSize,
-						children: [/* @__PURE__ */ jsx(FieldTypeLabel, {
+					children: [
+						/* @__PURE__ */ jsxs(HeaderRow, {
 							$size: resolvedSize,
-							children: /* @__PURE__ */ jsx(TruncatedText, { children: field.label })
-						}), showOperatorSelector ? /* @__PURE__ */ jsx(OperatorMenu, {
-							trigger: /* @__PURE__ */ jsxs(InlineOperatorTrigger, {
-								type: "button",
-								"aria-label": strings.operator,
+							children: [/* @__PURE__ */ jsx(FieldTypeLabel, {
 								$size: resolvedSize,
-								children: [getOperatorLabel(operator, field.type, strings), /* @__PURE__ */ jsx(CaretIcon, { "aria-hidden": "true" })]
-							}),
-							align: "start",
-							portal: true,
-							zIndex: Z_INDICES.layeredDropdown,
-							children: operatorOptions.map((op) => /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
+								children: /* @__PURE__ */ jsx(TruncatedText, { children: field.label })
+							}), showOperatorSelector ? /* @__PURE__ */ jsx(OperatorMenu, {
+								trigger: /* @__PURE__ */ jsxs(InlineOperatorTrigger, {
+									type: "button",
+									"aria-label": strings.operator,
+									$size: resolvedSize,
+									children: [getOperatorLabel(operator, field.type, strings, field), /* @__PURE__ */ jsx(CaretIcon, { "aria-hidden": "true" })]
+								}),
+								align: "start",
+								portal: true,
+								zIndex: Z_INDICES.layeredDropdown,
+								children: operatorOptions.map((op) => /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
+									size: resolvedSize,
+									onClick: () => onChangeOperator(op),
+									children: getOperatorLabel(op, field.type, strings, field)
+								}, op))
+							}) : /* @__PURE__ */ jsx("span", { children: getOperatorLabel(operator, field.type, strings, field) })]
+						}),
+						!valueless ? /* @__PURE__ */ jsx(ValueSlot, {
+							ref: valueSlotRef,
+							children: valueControlSlot
+						}) : null,
+						onApply != null && /* @__PURE__ */ jsx(PopoverPrimitive.Close, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx(Button, {
+								ref: applyButtonRef,
 								size: resolvedSize,
-								onClick: () => onChangeOperator(op),
-								children: getOperatorLabel(op, field.type, strings)
-							}, op))
-						}) : /* @__PURE__ */ jsx("span", { children: getOperatorLabel(operator, field.type, strings) })]
-					}), !valueless ? /* @__PURE__ */ jsx(ValueSlot, {
-						ref: valueSlotRef,
-						children: valueControlSlot
-					}) : null]
+								onClick: onApply,
+								children: strings.applyFilter
+							})
+						})
+					]
 				}), field.source === "custom" && field.parentRecordType != null && /* @__PURE__ */ jsxs(Footer, { children: [/* @__PURE__ */ jsx(InfoIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsxs(TruncatedText, { children: [
 					field.label,
 					" is a field on ",
@@ -3720,6 +3873,10 @@ function isEmptyState(state) {
 const OPERATOR_SET = new Set([
 	"is",
 	"is_not",
+	"gt",
+	"gte",
+	"lt",
+	"lte",
 	"contains",
 	"does_not_contain",
 	"is_empty",
@@ -3758,7 +3915,7 @@ function isFilterRule(value) {
 	if (typeof value !== "object" || value == null) return false;
 	const v = value;
 	if (typeof v.fieldId !== "string" || v.fieldId.length === 0) return false;
-	if (typeof v.operator !== "string" || !OPERATOR_SET.has(v.operator)) return false;
+	if (typeof v.operator !== "string" || !OPERATOR_SET.has(v.operator) && !/^custom:.+/.test(v.operator)) return false;
 	if (!isFilterRuleValue(v.value)) return false;
 	return true;
 }
@@ -3834,7 +3991,7 @@ function pruneToRegistry(state, registry) {
 */
 function coerceBooleanRule(rule, registry) {
 	const field = registry.get(rule.fieldId);
-	if (!field || field.type !== "boolean") return rule;
+	if (!field || field.condition != null || field.type !== "boolean") return rule;
 	if (rule.operator === "is_true") return {
 		...rule,
 		operator: "is",
@@ -3864,9 +4021,16 @@ function coerceBooleanRules(state, registry) {
 	};
 }
 function isDraftRuleValue(rule, registry) {
-	if (isValuelessOperator(rule.operator)) return false;
 	const field = registry.get(rule.fieldId);
 	if (!field) return false;
+	const config = getConditionOperator(field, rule.operator);
+	if (config != null) switch (config.valueType) {
+		case "none":
+		case "boolean": return false;
+		case "string_array": return Array.isArray(rule.value) && rule.value.length === 0;
+		default: return rule.value === "" || rule.value == null;
+	}
+	if (isValuelessOperator(rule.operator)) return false;
 	if (isRangeOperator(rule.operator)) return !isCompleteDateRange(rule.value);
 	switch (field.type) {
 		case "multi_choices":
@@ -3879,8 +4043,10 @@ function isDraftRuleValue(rule, registry) {
 	}
 }
 function isRuleAllowed(rule, registry, options = { allowDraftValues: false }) {
-	if (!registry.has(rule.fieldId)) return false;
+	const field = registry.get(rule.fieldId);
+	if (field == null) return false;
 	if (!registry.operatorsFor(rule.fieldId).includes(rule.operator)) return false;
+	if (field.condition != null) return hasCompleteConditionValue(rule, field) || options.allowDraftValues && isDraftRuleValue(rule, registry);
 	if (isValuelessOperator(rule.operator)) return rule.value == null;
 	if (options.allowDraftValues && isDraftRuleValue(rule, registry)) return true;
 	if (isRangeOperator(rule.operator)) return isCompleteDateRange(rule.value);
@@ -3907,6 +4073,8 @@ function isRuleAllowed(rule, registry, options = { allowDraftValues: false }) {
 * does not gate operator vocabulary or registry membership.
 */
 function hasCompleteValue(rule, registry) {
+	const field = registry.get(rule.fieldId);
+	if (field?.condition != null) return hasCompleteConditionValue(rule, field);
 	if (isValuelessOperator(rule.operator)) return rule.value == null;
 	const { value } = rule;
 	if (value == null) return false;
@@ -4010,20 +4178,22 @@ function useFilterStateV2(options) {
 					...prev.all,
 					topLevelRules: [...prev.all.topLevelRules, added]
 				},
-				heldIds: isHeldRule(added) ? withId(prev.heldIds, id) : prev.heldIds
+				heldIds: registry.get(rule.fieldId)?.condition != null || isHeldRule(added, registry) ? withId(prev.heldIds, id) : prev.heldIds
 			}));
 			return id;
-		}, []),
-		updateTopLevelRule: useCallback((id, rule) => {
+		}, [registry]),
+		updateTopLevelRule: useCallback((id, update) => {
 			setInternal((prev) => {
 				const idx = prev.all.topLevelRules.findIndex((r) => r.id === id);
-				if (idx < 0) return prev;
+				const currentRule = prev.all.topLevelRules[idx];
+				if (currentRule == null) return prev;
+				const rule = typeof update === "function" ? update(currentRule) : update;
 				const topLevelRules = [...prev.all.topLevelRules];
 				topLevelRules[idx] = {
 					...rule,
 					id
 				};
-				const heldIds = isHeldRule(rule) ? withId(prev.heldIds, id) : withoutId(prev.heldIds, id);
+				const heldIds = isHeldRule(rule, registry) ? withId(prev.heldIds, id) : withoutId(prev.heldIds, id);
 				return {
 					all: {
 						...prev.all,
@@ -4032,7 +4202,7 @@ function useFilterStateV2(options) {
 					heldIds
 				};
 			});
-		}, []),
+		}, [registry]),
 		removeTopLevelRule: useCallback((id) => {
 			setInternal((prev) => {
 				const topLevelRules = prev.all.topLevelRules.filter((r) => r.id !== id);
@@ -4053,7 +4223,8 @@ function useFilterStateV2(options) {
 * `''` and `[]` are values a user can choose, and a filter cleared to one is
 * still a filter.
 */
-function isHeldRule(rule) {
+function isHeldRule(rule, registry) {
+	if (registry.get(rule.fieldId)?.condition != null) return !hasCompleteValue(rule, registry);
 	return !isValuelessOperator(rule.operator) && rule.value == null;
 }
 function heldRulesOf(state) {
@@ -4247,6 +4418,7 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 		onChangeRef.current = onChange;
 	}, [onChange]);
 	const { committedState } = filterState;
+	const committedRuleIds = useMemo(() => new Set(committedState.topLevelRules.map((rule) => rule.id)), [committedState.topLevelRules]);
 	const lastReportedState = useRef(committedState);
 	useEffect(() => {
 		if (isEqual(lastReportedState.current, committedState)) return;
@@ -4255,13 +4427,15 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 	}, [committedState]);
 	const pendingEditRuleIdRef = useRef(null);
 	const openedViaScrollIntoViewRef = useRef(false);
-	const handlePickField = (field) => {
-		pendingEditRuleIdRef.current = filterState.addTopLevelRule({
+	const { addTopLevelRule } = filterState;
+	const handlePickField = useCallback((field) => {
+		const operator = registry.defaultOperatorFor(field.id);
+		pendingEditRuleIdRef.current = addTopLevelRule({
 			fieldId: field.id,
-			operator: registry.defaultOperatorFor(field.id),
-			value: null
+			operator,
+			value: field.condition != null ? emptyValueForRule(field, operator) : null
 		});
-	};
+	}, [addTopLevelRule, registry]);
 	const hasPills = filterState.state.topLevelRules.length > 0;
 	const excludeFieldIds = useStableFieldIds(singleUseFields ? filterState.state.topLevelRules.map((rule) => rule.fieldId) : void 0);
 	const pillsScrollRef = useRef(null);
@@ -4409,6 +4583,7 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 								dateTimesEnabled
 							}, valueControlResolver),
 							onClose: () => setEditingRuleId(null),
+							onApply: field.condition != null && !committedRuleIds.has(rule.id) && hasCompleteValue(rule, registry) ? () => filterState.updateTopLevelRule(rule.id, (currentRule) => currentRule) : void 0,
 							open: isOpen,
 							onOpenChange: (open) => setEditingRuleId(open ? rule.id : null),
 							trigger: /* @__PURE__ */ jsx(FilterPill, {
@@ -4417,7 +4592,7 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 									else pillNodesRef.current.delete(rule.id);
 								},
 								field,
-								rule,
+								rule: field.condition != null && !committedRuleIds.has(rule.id) ? null : rule,
 								variant: isOpen ? "active" : "default",
 								optionLabels,
 								onDismiss: () => filterState.removeTopLevelRule(rule.id)
@@ -4583,7 +4758,10 @@ var FieldRegistry = class {
 	}
 	/** Default operator for a registered field. Used when creating a new pill. */
 	defaultOperatorFor(fieldId) {
-		const [defaultOperator] = getOperatorsForField(this.getOrThrow(fieldId));
+		const field = this.getOrThrow(fieldId);
+		const operators = getOperatorsForField(field);
+		const defaultOperator = field.condition?.defaultOperator ?? operators[0];
+		if (defaultOperator != null && !operators.includes(defaultOperator)) throw new Error(`FieldRegistry: default operator is not available for field "${fieldId}"`);
 		if (defaultOperator == null) throw new Error(`FieldRegistry: no operators available for field "${fieldId}"`);
 		return defaultOperator;
 	}
@@ -4754,4 +4932,4 @@ function decodeBase64(input) {
 //#endregion
 export { TableControlsProvider as A, getOperatorsForType as C, reconcileValueForOperator as D, isValuelessOperator as E, ControlBar as F, DataTableCompactBar as I, TableViewConfiguration as M, TableViewConfigurationDropdown as N, dateRuleIntent as O, TableControls as P, getOperatorsForField as S, isRangeOperator as T, FILTER_SIZE_TOKENS as _, encodeFilterStateToUrlParam as a, emptyValueForRule as b, FilterBar_default as c, isFilterStateV2 as d, pruneToRegistry as f, resolveValueControl as g, PillShell as h, decodeFilterStateFromUrl as i, useTableControls as j, TableControlsContext as k, useFilterStateV2 as l, isEmptyState as m, applyFilterStateToSearchParams as n, FieldRegistry as o, EMPTY_FILTER_STATE as p, decodeFilterStateFromString as r, buildFieldRegistry as s, FILTER_STATE_URL_PARAM as t, hasCompleteValue as u, useFilterBarSize as v, isCompleteDateRange as w, getDefaultOperatorForType as x, resolveDateRangeRuleValue as y };
 
-//# sourceMappingURL=TableControls-B5UGCoO-.mjs.map
+//# sourceMappingURL=TableControls-BtKBTGYR.mjs.map