@persona/design-system 0.8.2 → 0.9.1

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

@@ -1,36 +1,36 @@
 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 { TruncatedText } from "./lib/TruncatedText.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 { 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-CeRarJIa.mjs";
+import { TruncatedText } from "./lib/TruncatedText.mjs";
 import { t as Card_default } from "./Card-BXNxWX5C.mjs";
 import { t as Spacer_default } from "./Spacer-J_HuhxX2.mjs";
 import { i as Paragraph, r as Label$1 } from "./Text-CSwFifQF.mjs";
-import "./variables/transitions.mjs";
-import { a as Tooltip } from "./Tooltip-B-0VRuKT.mjs";
-import { transparent, withAlpha } from "./lib/color.mjs";
+import { a as Tooltip } from "./Tooltip-DogEteGl.mjs";
 import { letPointerDownReachDocument } from "./lib/letPointerDownReachDocument.mjs";
-import { isActive, isDisabled, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { moveItemByIndex } from "./lib/reorderItems.mjs";
 import { useScrollOverflow } from "./lib/useScrollOverflow.mjs";
 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 { n as Button, t as IconButton } from "./IconButton-D4awF770.mjs";
+import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-w_gxXSwA.mjs";
+import { r as InputGroup } from "./Input-DD4jzJhK.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 { c as MenuList, s as MenuItem } from "./Menu-DlN0A5Nb.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-CPE8Q56k.mjs";
+import { t as Combobox } from "./Combobox-CsXnJKvB.mjs";
+import { s as Popover_default } from "./Popover-DewrGOJB.mjs";
+import { i as Modal_default } from "./Modal-Cs5cZpEr.mjs";
+import { t as Toggle } from "./Toggle-C9cZnajR.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 { t as ListBox } from "./ListBox-BhWLad_L.mjs";
+import { m as FormField, o as ComboboxField } from "./FormField-DjysBTKn.mjs";
+import { r as DatePicker, t as DateRangePicker } from "./DatePicker-DQHVCGnP.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,
@@ -1506,6 +1528,55 @@ const OPERATORS_BY_TYPE = {
 	signals: ["is"],
 	date_range: ["is"]
 };
+/**
+* Numeric comparison operators. Together with `is` (is equal to) they give
+* `integer` and `float` fields greater-than / less-than / equal-to filtering.
+* Inclusive bounds are deliberately not offered: "at least 5" is
+* `gt 5` OR `is 5`, built with the Rules editor.
+*
+* They are opt-in rather than part of the default numeric vocabulary above:
+* a host whose backend serializes them lists them in the field's
+* `allowedOperators` (e.g. `['is', ...NUMERIC_COMPARISON_OPERATORS]`).
+* Adding them to the default vocabulary would surface operators in every
+* existing numeric field whose host can't serialize them.
+*/
+const NUMERIC_COMPARISON_OPERATORS = ["gt", "lt"];
+const NUMERIC_COMPARISON_OPERATOR_SET = new Set(NUMERIC_COMPARISON_OPERATORS);
+const NUMERIC_FIELD_TYPES = new Set(["integer", "float"]);
+function isNumericComparisonOperator(operator) {
+	return NUMERIC_COMPARISON_OPERATOR_SET.has(operator);
+}
+/**
+* Whether a comparison value is complete for a numeric field: a finite
+* number, and a safe integer when the field is an `integer`. Strings are
+* rejected — the numeric value controls always emit numbers, so a string
+* here is a corrupted or hand-crafted rule the backend can't compare.
+*/
+function isCompleteNumericComparisonValue(value, fieldType) {
+	if (typeof value !== "number" || !Number.isFinite(value)) return false;
+	return fieldType === "integer" ? Number.isSafeInteger(value) : true;
+}
+/**
+* Carry `value` into a numeric comparison. Equality rules on numeric fields
+* tolerate strings (v1 URLs hydrate `'5'`), but a comparison is only complete
+* with a number, so a numeric string is converted — truncated on `integer`
+* fields, matching what `IntegerValueControl` emits — and anything else
+* becomes an empty draft rather than a committed rule validation rejects.
+*/
+function numericComparisonValue(value, fieldType) {
+	const parsed = typeof value === "number" ? value : typeof value === "string" && value.trim() !== "" ? Number(value) : NaN;
+	if (!Number.isFinite(parsed)) return "";
+	const normalized = fieldType === "integer" ? Math.trunc(parsed) : parsed;
+	return isCompleteNumericComparisonValue(normalized, fieldType) ? normalized : "";
+}
+/**
+* Whether `(fieldType, operator)` is a built-in numeric comparison — the
+* case validators and labels specialize. Comparisons on non-numeric types
+* (only reachable through `condition`) are not.
+*/
+function isNumericComparison(operator, fieldType) {
+	return fieldType != null && NUMERIC_FIELD_TYPES.has(fieldType) && isNumericComparisonOperator(operator);
+}
 /** Operators that have no value control (the operator itself is the predicate). */
 const VALUELESS_OPERATORS = new Set(["is_empty", "is_not_empty"]);
 /**
@@ -1532,6 +1603,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 +1613,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 +1677,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",
@@ -1607,16 +1701,33 @@ const OPERATOR_LABEL_KEYS = {
 * Only present for `(fieldType, operator)` pairs that diverge from the
 * generic label; everything else falls through to `OPERATOR_LABEL_KEYS`.
 */
-const OPERATOR_LABEL_KEYS_BY_TYPE = { multi_choices: {
-	is: "operatorIsAnyOf",
-	is_not: "operatorIsNoneOf"
-} };
+/**
+* Numeric fields read as a sentence ("Members is equal to 5", "Members is greater
+* than 5") rather than the generic "is" / bare `>` labels. `is_not` keeps the
+* generic "is not".
+*/
+const NUMERIC_LABEL_KEYS = {
+	is: "operatorIsEqualTo",
+	gt: "operatorIsGreaterThan",
+	lt: "operatorIsLessThan"
+};
+const OPERATOR_LABEL_KEYS_BY_TYPE = {
+	multi_choices: {
+		is: "operatorIsAnyOf",
+		is_not: "operatorIsNoneOf"
+	},
+	integer: NUMERIC_LABEL_KEYS,
+	float: NUMERIC_LABEL_KEYS
+};
 /**
 * 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 +1761,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,8 +1781,10 @@ 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 (isNumericComparison(nextOperator, field.type)) return numericComparisonValue(value, field.type);
 	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)) {
 		const dateTime = DateTime.fromISO(value, { setZone: true });
@@ -1748,6 +1870,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 +1956,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 +2020,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 +2067,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 +2077,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 +2100,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 +2115,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 +2367,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 +2388,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 +2410,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 +2468,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 +2525,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 +2568,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
 				}) })] })]
@@ -2824,10 +2995,11 @@ function numericDisplayValue(value) {
 /**
 * Float-typed value control for the Filter UI v2 popover.
 *
-* Used for `float` fields with operators `is` / `is_not`. The popover
+* Used for `float` fields with operators `is` / `is_not`, and with the
+* opt-in comparisons `gt` / `lt` when the field's
+* `allowedOperators` lists them — all carry a single number. The popover
 * renders nothing when the operator is valueless (`is_empty` /
-* `is_not_empty`). Range operators are not part of the current numeric
-* field vocabulary.
+* `is_not_empty`). Range operators are not part of the numeric vocabulary.
 *
 * The control accepts decimal input and emits a `number` via `onChange`.
 * We keep local display state as a string so partial input like `"3."` is
@@ -2844,7 +3016,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 +3044,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 +3057,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;
 		},
@@ -2897,10 +3073,11 @@ const FloatValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
 /**
 * Integer-typed value control for the Filter UI v2 popover.
 *
-* Used for `integer` fields with operators `is` / `is_not`. The popover
+* Used for `integer` fields with operators `is` / `is_not`, and with the
+* opt-in comparisons `gt` / `lt` when the field's
+* `allowedOperators` lists them — all carry a single number. The popover
 * renders nothing when the operator is valueless (`is_empty` /
-* `is_not_empty`). Range operators are not part of the current numeric
-* field vocabulary.
+* `is_not_empty`). Range operators are not part of the numeric vocabulary.
 *
 * The control accepts any numeric input but always emits an integer via
 * `onChange`. We truncate (rather than round) so that typing `3` -> `3.` -> `3.7`
@@ -2916,7 +3093,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 +3121,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 +3134,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 +3177,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 +3199,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 +3263,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 +3289,7 @@ const FilterPickerMenu = ({ registry, onPickField, triggerLabel, compact = false
 		$isOpen: false,
 		children: /* @__PURE__ */ jsx(Combobox, {
 			options,
+			optionDisabledReason,
 			value: null,
 			onChange: handleChange,
 			size: resolvedSize,
@@ -3347,9 +3549,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 +3560,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 +3584,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 +3722,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 +3735,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 +3749,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 +3785,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 +3939,10 @@ function isEmptyState(state) {
 const OPERATOR_SET = new Set([
 	"is",
 	"is_not",
+	"gt",
+	"gte",
+	"lt",
+	"lte",
 	"contains",
 	"does_not_contain",
 	"is_empty",
@@ -3758,7 +3981,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 +4057,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 +4087,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,11 +4109,14 @@ 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);
+	if (isNumericComparison(rule.operator, field.type)) return isCompleteNumericComparisonValue(rule.value, field.type);
 	if (registry.get(rule.fieldId)?.type === "boolean") return typeof rule.value === "boolean";
 	if (registry.get(rule.fieldId)?.type === "date") return typeof rule.value === "string" && rule.value.length > 0;
 	if (registry.get(rule.fieldId)?.type === "multi_choices") {
@@ -3907,10 +4140,13 @@ 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;
 	if (isRangeOperator(rule.operator)) return isCompleteDateRange(value);
+	if (field != null && isNumericComparison(rule.operator, field.type)) return isCompleteNumericComparisonValue(value, field.type);
 	switch (registry.get(rule.fieldId)?.type) {
 		case "boolean": return typeof value === "boolean";
 		case "date": return typeof value === "string" && value.length > 0;
@@ -4010,20 +4246,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 +4270,7 @@ function useFilterStateV2(options) {
 					heldIds
 				};
 			});
-		}, []),
+		}, [registry]),
 		removeTopLevelRule: useCallback((id) => {
 			setInternal((prev) => {
 				const topLevelRules = prev.all.topLevelRules.filter((r) => r.id !== id);
@@ -4053,7 +4291,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 +4486,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 +4495,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 +4651,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 +4660,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 +4826,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;
 	}
@@ -4752,6 +4998,6 @@ function decodeBase64(input) {
 	return decodeURIComponent(escape(atob(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 };
+export { dateRuleIntent as A, getOperatorsForField as C, isRangeOperator as D, isNumericComparisonOperator as E, TableViewConfigurationDropdown as F, TableControls as I, ControlBar as L, TableControlsProvider as M, useTableControls as N, isValuelessOperator as O, TableViewConfiguration as P, DataTableCompactBar as R, getDefaultOperatorForType as S, isCompleteDateRange as T, FILTER_SIZE_TOKENS as _, encodeFilterStateToUrlParam as a, NUMERIC_COMPARISON_OPERATORS as b, FilterBar_default as c, isFilterStateV2 as d, pruneToRegistry as f, resolveValueControl as g, PillShell as h, decodeFilterStateFromUrl as i, TableControlsContext as j, reconcileValueForOperator 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, getOperatorsForType as w, emptyValueForRule as x, resolveDateRangeRuleValue as y };
 
-//# sourceMappingURL=TableControls-B5UGCoO-.mjs.map
+//# sourceMappingURL=TableControls-C1MF2JvY.mjs.map