@persona/design-system 0.9.0 → 0.10.0

package/dist/{TableControls-BtKBTGYR.mjs → TableControls-DxSFqRwJ.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-DeJa-arS.mjs";
+import { c as usePDSLocale, i as formatDateTime, l as usePDSStrings, u as DEFAULT_COMMON_STRINGS } from "./i18n-BscB9FUy.mjs";
 import { TruncatedText } from "./lib/TruncatedText.mjs";
 import { semanticColor, semanticOnly, semanticTokens } from "./lib/semanticColor.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
@@ -17,20 +17,21 @@ 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 { 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 { n as Button, t as IconButton } from "./IconButton-HWx5Hlmi.mjs";
+import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-SX8E9-Bk.mjs";
+import { r as InputGroup } from "./Input-Dap055xf.mjs";
 import Input_default from "./components/Input/index.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 { 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-CcFJo68g.mjs";
+import { n as Select, r as SelectHeader, t as Option } from "./Select-BJ9ACmRD.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 { i as Modal_default } from "./Modal-kjUptzg1.mjs";
+import { r as DateRangePicker, t as DatePicker } from "./DatePicker-D0cvVbzq.mjs";
+import { t as Toggle } from "./Toggle-BLdemkh_.mjs";
+import { i as selectedPresetFor, n as parseDateFilterValue, r as resolveDateFilterValue, t as formatDateFilterValue } from "./date-filter-D0ys8s0D.mjs";
+import { t as ListBox } from "./ListBox-C80J7DCG.mjs";
+import { m as FormField, o as ComboboxField } from "./FormField-cSG93kuo.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";
@@ -45,8 +46,8 @@ import { DragIcon as DragIcon$1 } from "@persona/icons/24px";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { DndContext, PointerSensor, closestCenter, pointerWithin, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, horizontalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
-import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 import { parseAbsolute, parseDate, toCalendarDate, toZoned } from "@internationalized/date";
+import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 import { v4 } from "uuid";
 //#region components/DataTable/FormControlLabel/FormControlLabel.ts
 const FormControlLabel = styled(Label$1).attrs(() => ({
@@ -403,9 +404,10 @@ const TabOverflowContainer = styled.div`
   position: absolute;
   height: 32px;
 `;
-const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditViews, handleNameChange, onDuplicateView, onRequestDeleteView, onSelectView, onResetCurrentView, onSaveView, onSetDefaultView, onViewHiddenChange, onHideView, onKeyboardMove, isHidden = false, isViewDirty, showTabContextMenu, setShowTabContextMenu, className, ...rest }) => {
+const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditViews, handleNameChange, onDuplicateView, onRequestDeleteView, onSelectView, onResetCurrentView, onSaveView, onRequestSetDefaultView, onRequestUnsetDefaultView, onViewHiddenChange, onHideView, onKeyboardMove, isHidden = false, isViewDirty, showTabContextMenu, setShowTabContextMenu, className, ...rest }) => {
 	const strings = usePDSStrings();
 	const showMenu = selected && (canEditViews || !!onViewHiddenChange);
+	const onRequestDefaultViewChange = view.isDefault ? onRequestUnsetDefaultView : onRequestSetDefaultView;
 	const inputRef = useRef(null);
 	const lastSubmittedNameRef = useRef(null);
 	const submitNameChange = (newName) => {
@@ -491,16 +493,15 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 						onKeyDown: enterProxiesClick,
 						children: strings.saveViewMenuItem
 					}),
-					canEditViews && onSetDefaultView && /* @__PURE__ */ jsx(MenuItem, {
-						id: "table-controls__view__menu-set-default",
+					canEditViews && onRequestDefaultViewChange && /* @__PURE__ */ jsx(MenuItem, {
+						id: `table-controls__view__menu-${view.isDefault ? "unset" : "set"}-default`,
 						prefixIcon: /* @__PURE__ */ jsx(StarIcon, {}),
-						disabled: view.isDefault,
-						onClick: async () => {
-							await onSetDefaultView(view.id);
+						onClick: () => {
 							setShowTabContextMenu(false);
+							onRequestDefaultViewChange(view);
 						},
 						onKeyDown: enterProxiesClick,
-						children: view.isDefault ? strings.alreadyDefaultView : strings.setAsDefaultView
+						children: view.isDefault ? strings.unsetDefaultView : strings.setAsDefaultView
 					}),
 					onViewHiddenChange && /* @__PURE__ */ jsx(MenuItem, {
 						id: "table-controls__view__menu-toggle-hidden",
@@ -670,24 +671,26 @@ const ProductTourStyles = createGlobalStyle`
     }
   }
 `;
-const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewIds, onAddView, onDuplicateView, onDeleteView, onViewNameChange, onReorderViews, onViewHiddenChange, onSaveView, onSetDefaultView, isViewDirty, canEditViews, showFilters, setShowFilters, searchProps, filtersId, propertiesButton, tableActions, isLoading, isFilterPanelLoading, showViews, selectedRows = [], bulkActions, onResetCurrentView, onClearSelection, title, "data-tour-target": dataTourTarget, compact, onError, filterPanel }) => {
+const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewIds, onAddView, onDuplicateView, onDeleteView, onViewNameChange, onReorderViews, onViewHiddenChange, onSaveView, onSetDefaultView, onUnsetDefaultView, isViewDirty, canEditViews, showFilters, setShowFilters, searchProps, filtersId, propertiesButton, tableActions, isLoading, isFilterPanelLoading, showViews, selectedRows = [], bulkActions, onResetCurrentView, onClearSelection, title, "data-tour-target": dataTourTarget, compact, onError, filterPanel }) => {
 	const strings = usePDSStrings();
 	const tabListRef = useRef(null);
 	const tabOverflowRef = useRef(null);
 	const [overflowViews, setOverflowViews] = useState([]);
 	const [showTabContextMenu, setShowTabContextMenu] = useState(false);
-	const [pendingDeleteView, setPendingDeleteView] = useState(null);
-	const previousPendingDeleteViewRef = useRef(null);
-	const [isDeletingView, setIsDeletingView] = useState(false);
+	const [viewAction, setViewAction] = useState(null);
+	const pendingViewAction = viewAction?.isOpen ? viewAction : null;
+	const previousPendingViewRef = useRef(null);
+	const isChangingViewRef = useRef(false);
+	const [isChangingView, setIsChangingView] = useState(false);
 	const [isAddingView, setIsAddingView] = useState(false);
 	const [overflowLeft, setOverflowLeft] = useState(null);
 	const [tabOverflowWidth, setTabOverflowWidth] = useState(null);
 	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({ preventScroll: true });
-		previousPendingDeleteViewRef.current = pendingDeleteView;
-	}, [pendingDeleteView]);
+		const previousPendingView = previousPendingViewRef.current;
+		if (!pendingViewAction && previousPendingView) (document.getElementById(`${OVERFLOW_TAB_ID_PREFIX}${previousPendingView.id}`) ?? document.getElementById(`${TAB_ID_PREFIX}${previousPendingView.id}`))?.focus({ preventScroll: true });
+		previousPendingViewRef.current = pendingViewAction?.view ?? null;
+	}, [pendingViewAction]);
 	const [shownViews, hiddenViews] = useMemo(() => {
 		const hiddenIds = new Set(hiddenViewIds);
 		const allViews = views ?? [];
@@ -826,15 +829,65 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 	const handleNameChange = (view, newName) => {
 		if (canEditViews && view.name !== newName) onViewNameChange?.(view.id, newName);
 	};
-	const onRequestDeleteView = onDeleteView ? (view) => setPendingDeleteView(view) : void 0;
-	const confirmDeleteView = async () => {
-		if (!pendingDeleteView || !onDeleteView) return;
-		setIsDeletingView(true);
+	const onRequestDeleteView = onDeleteView ? (view) => setViewAction({
+		view,
+		action: "delete",
+		isOpen: true
+	}) : void 0;
+	const onRequestSetDefaultView = onSetDefaultView ? (view) => setViewAction({
+		view,
+		action: "set-default",
+		isOpen: true
+	}) : void 0;
+	const onRequestUnsetDefaultView = onUnsetDefaultView ? (view) => setViewAction({
+		view,
+		action: "unset-default",
+		isOpen: true
+	}) : void 0;
+	const getViewActionConfig = (action) => {
+		switch (action) {
+			case "set-default": return {
+				title: strings.setDefaultViewTitle,
+				confirmation: strings.setDefaultViewConfirmation,
+				label: strings.setAsDefaultView,
+				onConfirm: onSetDefaultView
+			};
+			case "unset-default": return {
+				title: strings.unsetDefaultViewTitle,
+				confirmation: strings.unsetDefaultViewConfirmation,
+				label: strings.unsetDefaultView,
+				onConfirm: onUnsetDefaultView
+			};
+			case "delete": return {
+				title: strings.deleteViewTitle,
+				confirmation: strings.deleteViewConfirmation,
+				label: strings.delete,
+				onConfirm: onDeleteView
+			};
+		}
+	};
+	const displayedActionConfig = getViewActionConfig(viewAction?.action ?? "delete");
+	const closeViewAction = () => {
+		setViewAction((previous) => previous && {
+			...previous,
+			isOpen: false
+		});
+	};
+	const confirmViewAction = async () => {
+		if (!pendingViewAction || isChangingViewRef.current) return;
+		const onConfirm = getViewActionConfig(pendingViewAction.action).onConfirm;
+		if (!onConfirm) {
+			closeViewAction();
+			return;
+		}
+		isChangingViewRef.current = true;
+		setIsChangingView(true);
 		try {
-			await onDeleteView(pendingDeleteView.id);
-			setPendingDeleteView(null);
+			await onConfirm(pendingViewAction.view.id);
+			closeViewAction();
 		} catch {} finally {
-			setIsDeletingView(false);
+			isChangingViewRef.current = false;
+			setIsChangingView(false);
 		}
 	};
 	if (compact) return /* @__PURE__ */ jsx(CompactBar, {
@@ -891,7 +944,8 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 		onSelectView,
 		onResetCurrentView,
 		onSaveView,
-		onSetDefaultView,
+		onRequestSetDefaultView,
+		onRequestUnsetDefaultView,
 		onViewHiddenChange,
 		isViewDirty: isViewDirty ?? false,
 		selected: view.id === currentView,
@@ -968,7 +1022,8 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 				onRequestDeleteView,
 				onResetCurrentView,
 				onSaveView,
-				onSetDefaultView,
+				onRequestSetDefaultView,
+				onRequestUnsetDefaultView,
 				onViewHiddenChange,
 				onHideView: hideView,
 				isViewDirty: isViewDirty ?? false,
@@ -1019,94 +1074,438 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 		}),
 		showFilters && filterPanel,
 		/* @__PURE__ */ jsx(Modal_default, {
-			open: pendingDeleteView != null,
+			open: pendingViewAction != null,
 			onOpenChange: (open) => {
-				if (!open && !isDeletingView) setPendingDeleteView(null);
+				if (!open && !isChangingViewRef.current) closeViewAction();
 			},
-			isKeyboardDismissDisabled: isDeletingView,
-			contentProps: isDeletingView ? { showCloseButton: false } : void 0,
-			title: strings.deleteViewTitle,
+			isKeyboardDismissDisabled: isChangingView,
+			contentProps: isChangingView ? { showCloseButton: false } : void 0,
+			title: displayedActionConfig.title,
 			footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
 				variant: "basic",
 				width: "auto",
-				disabled: isDeletingView,
-				onClick: () => setPendingDeleteView(null),
+				disabled: isChangingView,
+				onClick: () => {
+					if (!isChangingViewRef.current) closeViewAction();
+				},
 				children: strings.cancel
 			}), /* @__PURE__ */ jsx(Button, {
-				id: "table-controls__view__delete-confirm",
-				variant: "danger",
+				id: `table-controls__view__${viewAction?.action ?? "delete"}-confirm`,
+				variant: viewAction?.action === "delete" ? "danger" : "primary",
 				width: "auto",
-				isPending: isDeletingView,
-				onClick: confirmDeleteView,
-				children: strings.delete
+				isPending: isChangingView,
+				onClick: confirmViewAction,
+				children: displayedActionConfig.label
 			})] }),
-			children: /* @__PURE__ */ jsx(Paragraph, { children: strings.deleteViewConfirmation(pendingDeleteView?.name ?? "") })
+			children: /* @__PURE__ */ jsx(Paragraph, { children: displayedActionConfig.confirmation(viewAction?.view.name ?? "") })
 		})
 	] });
 };
 //#endregion
-//#region components/DataTable/TableControls/TableControls.tsx
-const TableControls = ({ filterPanel, searchProps, defaultShowFilters, showFilters: controlledShowFilters, setShowFilters: controlledSetShowFilters, className, tableActions, propertiesButton, isLoading, isFilterPanelLoading, showViews, canEditViews, onSelectView, views, hiddenViewIds, currentView, onAddView, onViewNameChange, onReorderViews, onViewHiddenChange, onDuplicateView, onDeleteView, onSaveView, onSetDefaultView, isViewDirty, selectedRows, bulkActions, onClearSelection, title, presetViews, compact, columnConfigurationProps, showFiltersAlways = false, onError, "data-tour-target": dataTourTarget }) => {
-	const filtersId = useId();
-	const [internalShowFilters, internalSetShowFilters] = useState(defaultShowFilters ?? false);
-	const showFilters = controlledShowFilters != null ? controlledShowFilters : internalShowFilters;
-	const setShowFilters = controlledSetShowFilters != null ? controlledSetShowFilters : internalSetShowFilters;
-	const enhancedPropertiesButton = useMemo(() => {
-		if (!columnConfigurationProps && !propertiesButton) return;
-		const elements = [];
-		if (propertiesButton) elements.push(propertiesButton);
-		if (columnConfigurationProps) elements.push(/* @__PURE__ */ jsx(TableViewConfigurationDropdown, {
-			disabled: false,
-			...columnConfigurationProps
-		}, "column-config"));
-		if (elements.length === 1) return elements[0];
-		return /* @__PURE__ */ jsx(StyledEnhancedPropertiesButton, { children: elements });
-	}, [columnConfigurationProps, propertiesButton]);
-	return /* @__PURE__ */ jsx(Container, {
-		className,
-		children: /* @__PURE__ */ jsx(ControlBar, {
-			showViews: compact ? false : showViews,
-			views: compact ? void 0 : views,
-			hiddenViewIds: compact ? void 0 : hiddenViewIds,
-			onSelectView: compact ? void 0 : onSelectView,
-			currentView: compact ? void 0 : currentView,
-			onAddView: compact ? void 0 : onAddView,
-			onDeleteView: compact ? void 0 : onDeleteView,
-			onDuplicateView: compact ? void 0 : onDuplicateView,
-			onViewNameChange: compact ? void 0 : onViewNameChange,
-			onReorderViews: compact ? void 0 : onReorderViews,
-			onViewHiddenChange: compact ? void 0 : onViewHiddenChange,
-			onSaveView: compact ? void 0 : onSaveView,
-			onSetDefaultView: compact ? void 0 : onSetDefaultView,
-			isViewDirty,
-			canEditViews: compact ? false : canEditViews,
-			showFilters: showFilters && (showFiltersAlways || !isFilterPanelLoading),
-			setShowFilters: (filterPanel != null || isFilterPanelLoading) && !showFiltersAlways ? setShowFilters : void 0,
-			filtersId,
-			searchProps,
-			propertiesButton: enhancedPropertiesButton,
-			tableActions,
-			isLoading,
-			isFilterPanelLoading,
-			selectedRows,
-			bulkActions,
-			onClearSelection,
-			title,
-			"data-tour-target": dataTourTarget,
-			presetViews: compact ? void 0 : presetViews,
+//#region components/DataTable/TableControls/TableControlsContext.ts
+const TableControlsContext = createContext({
+	filters: [],
+	activeFilters: [],
+	setActiveFilters: () => {}
+});
+function useTableControls() {
+	return useContext(TableControlsContext);
+}
+function TableControlsProvider({ children, ...value }) {
+	return createElement(TableControlsContext.Provider, { value }, children);
+}
+//#endregion
+//#region components/DataTable/TableControls/filters.tsx
+const SegmentedControl = styled.div`
+  display: grid;
+  grid-template-columns: min-content minmax(auto, max-content);
+
+  > *:first-child:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  > *:last-child:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-left: -1px;
+  }
+
+  /* Segments overlap by a pixel, so lift the focused one to keep its outline on top. */
+  > *:focus-visible,
+  > *:has(:focus-visible) {
+    position: relative;
+    z-index: 1;
+  }
+`;
+const AddFilterButton = styled(Button)`
+  opacity: 0;
+  color: ${({ theme }) => theme.color.text.secondary};
+
+  @media (hover: none) {
+    opacity: 1;
+  }
+
+  &:focus-visible {
+    opacity: 1;
+  }
+`;
+const FiltersContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${Spacing[2]};
+  width: 100%;
+
+  &:hover {
+    ${AddFilterButton} {
+      opacity: 1;
+    }
+  }
+`;
+const FilterCombobox = styled.div`
+  min-width: ${({ $compact }) => $compact ? "150px" : "200px"};
+  max-width: ${({ $compact, $multiple }) => $compact && !$multiple ? "150px" : "250px"};
+
+  ${({ $isFilterSelectSibling }) => $isFilterSelectSibling && css`
+      input[role='combobox'] {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    `}
+`;
+const InputFilter = ({ config, compact, onActiveChange }) => {
+	const [value, setValue] = useState(config.value);
+	const onChangeRef = useRef(config.onChange);
+	onChangeRef.current = config.onChange;
+	const onActiveChangeRef = useRef(onActiveChange);
+	onActiveChangeRef.current = onActiveChange;
+	const debouncedOnChange = useMemo(() => debounce((nextValue) => {
+		onActiveChangeRef.current(nextValue.length > 0);
+		onChangeRef.current(nextValue);
+	}, 300), []);
+	useEffect(() => setValue(config.value), [config.value]);
+	useEffect(() => () => debouncedOnChange.cancel(), [debouncedOnChange]);
+	return /* @__PURE__ */ jsx(Input_default, {
+		"aria-label": config.name,
+		placeholder: config.placeholder,
+		size: compact ? "sm" : void 0,
+		value,
+		onChange: ({ target: { value: nextValue } }) => {
+			setValue(nextValue);
+			debouncedOnChange(nextValue);
+		}
+	});
+};
+const SelectFilter = ({ config, compact, onActiveChange }) => {
+	const strings = usePDSStrings();
+	return /* @__PURE__ */ jsx(Select, {
+		"aria-label": config.name,
+		placeholder: config.placeholder ?? strings.selectFilterOption,
+		value: config.value,
+		width: "auto",
+		minWidth: 150,
+		size: compact ? "sm" : void 0,
+		onValueChange: (value) => {
+			onActiveChange(Boolean(value));
+			config.onChange(value);
+		},
+		portal: true,
+		children: config.options.map((option) => /* @__PURE__ */ jsx(Option, {
+			value: option.value,
+			children: option.label ?? option.value
+		}, option.value))
+	});
+};
+const builtInDefinitions = {
+	input: {
+		render: ({ config, compact, onActiveChange }) => {
+			if (config.type !== "input") return null;
+			return /* @__PURE__ */ jsx(InputFilter, {
+				config,
+				compact,
+				onActiveChange
+			}, config.id);
+		},
+		isActive: (config) => config.type === "input" && Boolean(config.value),
+		clear: (config) => {
+			if (config.type === "input") if (config.onDelete) config.onDelete();
+			else config.onChange("");
+		}
+	},
+	select: {
+		render: ({ config, compact, onActiveChange }) => {
+			if (config.type !== "select") return null;
+			return /* @__PURE__ */ jsx(SelectFilter, {
+				config,
+				compact,
+				onActiveChange
+			});
+		},
+		isActive: (config) => config.type === "select" && Boolean(config.value),
+		clear: (config) => config.type === "select" && config.onChange("")
+	},
+	multiselect: {
+		render: ({ config, compact, isFilterSelectSibling, onActiveChange }) => {
+			if (config.type !== "multiselect") return null;
+			return /* @__PURE__ */ jsx(FilterCombobox, {
+				$compact: compact,
+				$isFilterSelectSibling: isFilterSelectSibling,
+				$multiple: true,
+				children: /* @__PURE__ */ jsx(Combobox, {
+					"aria-label": config.name,
+					multiple: true,
+					options: config.options.map((option) => ({
+						...option,
+						label: option.label ?? option.value
+					})),
+					values: config.value,
+					onValuesChange: (values) => {
+						onActiveChange(values.length > 0);
+						config.onChange(values);
+					},
+					placeholder: config.placeholder,
+					size: compact ? "sm" : void 0,
+					truncate: true
+				})
+			});
+		},
+		isActive: (config) => config.type === "multiselect" && config.value.length > 0,
+		clear: (config) => config.type === "multiselect" && config.onChange([])
+	},
+	combobox: {
+		render: ({ config, compact, isFilterSelectSibling, onActiveChange }) => {
+			if (config.type !== "combobox") return null;
+			return /* @__PURE__ */ jsx(ComboboxFilter, {
+				config,
+				compact,
+				isFilterSelectSibling,
+				onActiveChange
+			});
+		},
+		isActive: (config) => config.type === "combobox" && (config.multiple ? Boolean(config.values?.length) : Boolean(config.value)),
+		clear: (config) => {
+			if (config.type === "combobox") if (config.multiple) config.onValuesChange?.([]);
+			else config.onChange?.(null);
+		}
+	},
+	daterange: {
+		render: ({ config, compact, onActiveChange }) => {
+			if (config.type !== "daterange") return null;
+			return /* @__PURE__ */ jsx(DateRangePicker, {
+				"aria-label": config.name,
+				dateRange: config.value,
+				label: null,
+				onChange: (range) => {
+					onActiveChange(range != null);
+					config.onChange(range);
+				},
+				showClear: false,
+				size: compact ? "sm" : void 0
+			});
+		},
+		isActive: (config) => config.type === "daterange" && Boolean(config.value?.startDate || config.value?.endDate),
+		clear: (config) => config.type === "daterange" && config.onChange(null)
+	}
+};
+const ComboboxFilter = ({ config, compact, isFilterSelectSibling, onActiveChange }) => {
+	if (config.multiple) {
+		const { id: _id, name: _name, type: _type, enabled: _enabled, disabledReason: _disabledReason, required: _required, onFilterSelect: _onFilterSelect, defaultVisible: _defaultVisible, group: _group, htmlId: _htmlId, ...comboboxProps } = config;
+		return /* @__PURE__ */ jsx(FilterCombobox, {
+			$compact: compact,
+			$isFilterSelectSibling: isFilterSelectSibling,
+			$multiple: true,
+			children: /* @__PURE__ */ jsx(Combobox, {
+				...comboboxProps,
+				"aria-label": config.name,
+				size: compact ? "sm" : void 0,
+				onValuesChange: (values) => {
+					onActiveChange(values.length > 0);
+					config.onValuesChange?.(values);
+				}
+			})
+		});
+	}
+	const { id: _id, name: _name, type: _type, enabled: _enabled, disabledReason: _disabledReason, required: _required, onFilterSelect: _onFilterSelect, defaultVisible: _defaultVisible, group: _group, htmlId: _htmlId, ...comboboxProps } = config;
+	return /* @__PURE__ */ jsx(FilterCombobox, {
+		$compact: compact,
+		$isFilterSelectSibling: isFilterSelectSibling,
+		$multiple: false,
+		children: /* @__PURE__ */ jsx(Combobox, {
+			...comboboxProps,
+			"aria-label": config.name,
+			size: compact ? "sm" : void 0,
+			onChange: (value) => {
+				onActiveChange(Boolean(value));
+				config.onChange?.(value);
+			}
+		})
+	});
+};
+function resolveFilterTypeDefinition(config, filterResolver) {
+	return filterResolver?.(config) ?? builtInDefinitions[config.type];
+}
+function isFilterActive(config, filterResolver) {
+	return config.required === true || resolveFilterTypeDefinition(config, filterResolver)?.isActive(config) === true;
+}
+const getHighestId = (activeFilters) => activeFilters.reduce((highestId, filter) => Math.max(highestId, filter.id), 0);
+const getActiveFilters = (filters, activeFilters = [], includeDefaultVisible = false, filterResolver) => {
+	let currentId = getHighestId(activeFilters);
+	const activeByConfigId = new Map(activeFilters.flatMap((filter) => filter.config ? [[filter.config.id, filter]] : []));
+	return filters.filter((filter) => isFilterActive(filter, filterResolver) || includeDefaultVisible && filter.defaultVisible).map((filter) => {
+		return {
+			id: activeByConfigId.get(filter.id)?.id ?? ++currentId,
+			config: filter,
+			isConfiguring: false
+		};
+	}).sort((first, second) => first.id - second.id);
+};
+const createUnsetFilter = (activeFilters) => ({
+	id: getHighestId(activeFilters) + 1,
+	isConfiguring: true
+});
+const synchronizeActiveFilters = (filters, activeFilters, filterResolver) => {
+	if (filters.length === 0) return activeFilters.length === 0 ? activeFilters : [];
+	const refreshed = activeFilters.flatMap((active) => {
+		if (!active.config) return [active];
+		const config = filters.find((filter) => filter.id === active.config?.id);
+		if (config) return [{
+			...active,
+			config
+		}];
+		return active.isConfiguring ? [active] : [];
+	});
+	const activeFromConfig = getActiveFilters(filters, refreshed, false, filterResolver);
+	const activeConfigIds = new Set(activeFromConfig.flatMap((active) => active.config ? [active.config.id] : []));
+	const retainedDefaultVisible = refreshed.filter((active) => active.config?.defaultVisible && !activeConfigIds.has(active.config.id));
+	const configuring = refreshed.filter((active) => active.isConfiguring && (!active.config || !activeConfigIds.has(active.config.id)));
+	const next = [
+		...activeFromConfig,
+		...retainedDefaultVisible,
+		...configuring
+	].sort((first, second) => first.id - second.id);
+	return next.length === 0 ? [createUnsetFilter(activeFilters)] : next;
+};
+const Filter = ({ config, compact, hideFilterSelection, filterResolver }) => {
+	const { activeFilters, setActiveFilters } = useTableControls();
+	const strings = usePDSStrings();
+	const definition = config ? resolveFilterTypeDefinition(config, filterResolver) : void 0;
+	const onActiveChange = (active) => {
+		setActiveFilters(activeFilters.map((filter) => filter.config?.id === config?.id ? {
+			...filter,
+			isConfiguring: !active
+		} : filter));
+	};
+	const content = config && definition?.render({
+		config,
+		compact,
+		isFilterSelectSibling: !hideFilterSelection,
+		onActiveChange
+	});
+	if (hideFilterSelection) return /* @__PURE__ */ jsx(Fragment$1, { children: content });
+	return /* @__PURE__ */ jsxs(SegmentedControl, {
+		id: config?.htmlId,
+		role: "group",
+		"aria-label": config?.name ? strings.filterGroupLabel(config.name) : strings.filter,
+		children: [/* @__PURE__ */ jsx(FilterSelection, {
+			value: config?.id,
+			disabled: config?.required,
 			compact,
-			onError,
-			filterPanel
+			filterResolver
+		}), content]
+	});
+};
+const FilterSelection = ({ value, disabled, compact, filterResolver }) => {
+	const strings = usePDSStrings();
+	const { filters, activeFilters, setActiveFilters } = useTableControls();
+	const options = useMemo(() => filters.filter((filter) => filter.id === value || !activeFilters.some((active) => active.config?.id === filter.id)).filter((filter) => !filter.group || filter.id === value || !activeFilters.some((active) => active.config?.group === filter.group && active.config?.id !== value)), [
+		activeFilters,
+		filters,
+		value
+	]);
+	const replaceFilter = (nextId) => {
+		const next = filters.find((filter) => filter.id === nextId);
+		const previous = filters.find((filter) => filter.id === value);
+		if (!next) return;
+		if (!value) {
+			setActiveFilters(activeFilters.map((active) => active.config ? active : {
+				...active,
+				config: next
+			}));
+			next.onFilterSelect?.();
+			return;
+		}
+		if (previous) resolveFilterTypeDefinition(previous, filterResolver)?.clear(previous);
+		setActiveFilters(activeFilters.map((active) => active.config?.id === value ? {
+			...active,
+			config: next,
+			isConfiguring: true
+		} : active));
+		next.onFilterSelect?.();
+	};
+	const removeFilter = () => {
+		const current = filters.find((filter) => filter.id === value);
+		if (current) resolveFilterTypeDefinition(current, filterResolver)?.clear(current);
+		setActiveFilters(activeFilters.filter((active) => active.config?.id !== value));
+	};
+	return /* @__PURE__ */ jsx(Select, {
+		"aria-label": strings.filterType,
+		width: "auto",
+		minWidth: 120,
+		placeholder: strings.selectFilterType,
+		value,
+		size: compact ? "sm" : void 0,
+		disabled,
+		onValueChange: replaceFilter,
+		portal: true,
+		header: /* @__PURE__ */ jsx(SelectHeader, {
+			title: strings.filterType,
+			menuTriggerLabel: strings.filterActions,
+			menuItems: /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
+				onClick: removeFilter,
+				children: strings.deleteFilter
+			})
+		}),
+		children: options.map((filter) => {
+			const isDisabled = Boolean(filter.disabledReason) && filter.id !== value;
+			const option = /* @__PURE__ */ jsx(Option, {
+				value: filter.id,
+				disabled: isDisabled,
+				style: isDisabled ? { pointerEvents: "auto" } : void 0,
+				children: filter.name
+			}, filter.id);
+			return isDisabled ? /* @__PURE__ */ jsx(Tooltip, {
+				trigger: option,
+				side: "top",
+				children: filter.disabledReason
+			}, filter.id) : option;
 		})
 	});
 };
-const Container = styled(Stack)`
-  margin-bottom: ${Spacing[2]};
-`;
-const StyledEnhancedPropertiesButton = styled.div`
-  display: flex;
-  gap: ${Spacing[1]};
-`;
+const Filters = ({ compact, filterResolver, ...props }) => {
+	const strings = usePDSStrings();
+	const { filters, activeFilters, setActiveFilters } = useTableControls();
+	const hasNewFilter = activeFilters.some((filter) => !filter.config);
+	const hideFilterSelection = Boolean(compact && filters.length > 0 && filters.every((filter) => filter.required));
+	return /* @__PURE__ */ jsxs(FiltersContainer, {
+		...props,
+		children: [activeFilters.map((filter) => /* @__PURE__ */ jsx(Filter, {
+			config: filter.config,
+			compact,
+			hideFilterSelection,
+			filterResolver
+		}, filter.id)), /* @__PURE__ */ jsx(AddFilterButton, {
+			id: "table-controls__add-filter-button",
+			type: "button",
+			variant: "text",
+			width: "icon",
+			size: compact ? "sm" : "md",
+			"aria-label": strings.addFilter,
+			disabled: hasNewFilter || activeFilters.length >= filters.length,
+			onClick: () => setActiveFilters([...activeFilters, createUnsetFilter(activeFilters)]),
+			children: /* @__PURE__ */ jsx(CirclePlusIcon, {})
+		})]
+	});
+};
 //#endregion
 //#region components/DataTable/dnd/StyledIconDrag.tsx
 const StyledIconDrag = styled(DragIcon$1)`
@@ -1431,18 +1830,111 @@ const AttributeDnd = ({ column, index, isDisabled = false, isToggled, shouldDisa
 	] }, `${column.key}-${index}`);
 };
 //#endregion
-//#region components/DataTable/TableControls/TableControlsContext.ts
-const TableControlsContext = createContext({
-	filters: [],
-	activeFilters: [],
-	setActiveFilters: () => {}
-});
-function useTableControls() {
-	return useContext(TableControlsContext);
-}
-function TableControlsProvider({ children, ...value }) {
-	return createElement(TableControlsContext.Provider, { value }, children);
-}
+//#region components/DataTable/TableControls/TableControls.tsx
+const EMPTY_FILTERS = [];
+const resolveFilterArea = (filterPanel, configuredFilterPanel) => filterPanel ?? configuredFilterPanel;
+const hasNewFilterId = (currentIds, previousIds) => {
+	const previous = new Set(previousIds.split("\0").filter(Boolean));
+	return currentIds.split("\0").some((id) => id !== "" && !previous.has(id));
+};
+const TableControls = ({ filters = EMPTY_FILTERS, filterResolver, filterPanel, searchProps, defaultShowFilters, showFilters: controlledShowFilters, setShowFilters: controlledSetShowFilters, className, tableActions, propertiesButton, isLoading, isFilterPanelLoading, showViews, canEditViews, onSelectView, views, hiddenViewIds, currentView, onAddView, onViewNameChange, onReorderViews, onViewHiddenChange, onDuplicateView, onDeleteView, onSaveView, onSetDefaultView, onUnsetDefaultView, isViewDirty, selectedRows, bulkActions, onClearSelection, title, presetViews, compact, columnConfigurationProps, showFiltersAlways = false, onError, "data-tour-target": dataTourTarget }) => {
+	const filtersId = useId();
+	const enabledFilters = useMemo(() => filters.filter((filter) => filter.enabled !== false), [filters]);
+	const [activeFilters, setActiveFilters] = useState(() => getActiveFilters(enabledFilters, [], true, filterResolver));
+	const resolvedFilterPanel = resolveFilterArea(filterPanel, enabledFilters.length > 0 ? /* @__PURE__ */ jsx(TableControlsProvider, {
+		filters: enabledFilters,
+		activeFilters,
+		setActiveFilters,
+		children: /* @__PURE__ */ jsx(Filters, {
+			id: filtersId,
+			compact,
+			filterResolver
+		})
+	}) : void 0);
+	const [internalShowFilters, internalSetShowFilters] = useState(defaultShowFilters ?? (filterPanel == null && activeFilters.length > 0));
+	useEffect(() => {
+		setActiveFilters((current) => synchronizeActiveFilters(enabledFilters, current, filterResolver));
+	}, [enabledFilters, filterResolver]);
+	const activeFilterIds = enabledFilters.filter((filter) => isFilterActive(filter, filterResolver)).map((filter) => filter.id).sort().join("\0");
+	const configuredFilterIds = activeFilters.flatMap((filter) => filter.config ? [filter.config.id] : []).sort().join("\0");
+	const previousActiveFilterIds = useRef(activeFilterIds);
+	const previousConfiguredFilterIds = useRef(configuredFilterIds);
+	useEffect(() => {
+		const becameActive = hasNewFilterId(activeFilterIds, previousActiveFilterIds.current);
+		const newlyConfigured = hasNewFilterId(configuredFilterIds, previousConfiguredFilterIds.current);
+		previousActiveFilterIds.current = activeFilterIds;
+		previousConfiguredFilterIds.current = configuredFilterIds;
+		if (defaultShowFilters == null && filterPanel == null && (becameActive || newlyConfigured)) internalSetShowFilters(true);
+	}, [
+		activeFilterIds,
+		configuredFilterIds,
+		defaultShowFilters,
+		filterPanel
+	]);
+	const showFilters = controlledShowFilters != null ? controlledShowFilters : internalShowFilters;
+	const setShowFilters = controlledSetShowFilters != null ? controlledSetShowFilters : internalSetShowFilters;
+	const enhancedPropertiesButton = useMemo(() => {
+		if (!columnConfigurationProps && !propertiesButton) return;
+		const elements = [];
+		if (propertiesButton) elements.push(propertiesButton);
+		if (columnConfigurationProps) elements.push(/* @__PURE__ */ jsx(TableViewConfigurationDropdown, {
+			disabled: false,
+			...columnConfigurationProps
+		}, "column-config"));
+		if (elements.length === 1) return elements[0];
+		return /* @__PURE__ */ jsx(StyledEnhancedPropertiesButton, { children: elements });
+	}, [columnConfigurationProps, propertiesButton]);
+	return /* @__PURE__ */ jsx(Container, {
+		className,
+		children: /* @__PURE__ */ jsx(ControlBar, {
+			showViews: compact ? false : showViews,
+			views: compact ? void 0 : views,
+			hiddenViewIds: compact ? void 0 : hiddenViewIds,
+			onSelectView: compact ? void 0 : onSelectView,
+			currentView: compact ? void 0 : currentView,
+			onAddView: compact ? void 0 : onAddView,
+			onDeleteView: compact ? void 0 : onDeleteView,
+			onDuplicateView: compact ? void 0 : onDuplicateView,
+			onViewNameChange: compact ? void 0 : onViewNameChange,
+			onReorderViews: compact ? void 0 : onReorderViews,
+			onViewHiddenChange: compact ? void 0 : onViewHiddenChange,
+			onSaveView: compact ? void 0 : onSaveView,
+			...!compact && onSetDefaultView ? {
+				onSetDefaultView,
+				onUnsetDefaultView
+			} : {
+				onSetDefaultView: void 0,
+				onUnsetDefaultView: void 0
+			},
+			isViewDirty,
+			canEditViews: compact ? false : canEditViews,
+			showFilters: showFilters && (showFiltersAlways || !isFilterPanelLoading),
+			setShowFilters: (resolvedFilterPanel != null || isFilterPanelLoading) && !showFiltersAlways ? setShowFilters : void 0,
+			filtersId,
+			searchProps,
+			propertiesButton: enhancedPropertiesButton,
+			tableActions,
+			isLoading,
+			isFilterPanelLoading,
+			selectedRows,
+			bulkActions,
+			onClearSelection,
+			title,
+			"data-tour-target": dataTourTarget,
+			presetViews: compact ? void 0 : presetViews,
+			compact,
+			onError,
+			filterPanel: resolvedFilterPanel
+		})
+	});
+};
+const Container = styled(Stack)`
+  margin-bottom: ${Spacing[2]};
+`;
+const StyledEnhancedPropertiesButton = styled.div`
+  display: flex;
+  gap: ${Spacing[1]};
+`;
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/date-rule-intent.ts
 function dateRuleIntent(change, writesEnabled) {
@@ -1528,6 +2020,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"]);
 /**
@@ -1652,10 +2193,24 @@ 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.
@@ -1721,6 +2276,7 @@ function reconcileValueForOperator(field, nextOperator, previousOperator, value)
 	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 });
@@ -2931,10 +3487,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
@@ -3008,10 +3565,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`
@@ -4050,6 +4608,7 @@ function isRuleAllowed(rule, registry, options = { allowDraftValues: false }) {
 	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") {
@@ -4079,6 +4638,7 @@ function hasCompleteValue(rule, registry) {
 	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;
@@ -4930,6 +5490,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, useTableControls as B, getOperatorsForField as C, isRangeOperator as D, isNumericComparisonOperator as E, getActiveFilters as F, DataTableCompactBar as H, isFilterActive as I, resolveFilterTypeDefinition as L, TableViewConfiguration as M, TableViewConfigurationDropdown as N, isValuelessOperator as O, FiltersContainer as P, TableControlsContext as R, getDefaultOperatorForType as S, isCompleteDateRange as T, ControlBar as V, 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, TableControls 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, TableControlsProvider as z };
 
-//# sourceMappingURL=TableControls-BtKBTGYR.mjs.map
+//# sourceMappingURL=TableControls-DxSFqRwJ.mjs.map