@persona/design-system 0.8.1 → 0.9.0

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

@@ -1,45 +1,50 @@
 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 { TruncatedText } from "./lib/TruncatedText.mjs";
 import { semanticColor, semanticOnly, semanticTokens } from "./lib/semanticColor.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
-import { t as Card_default } from "./Card-Dz6jqJuJ.mjs";
-import { t as Spacer_default } from "./Spacer-BFOuo0sZ.mjs";
-import { i as Paragraph, r as Label$1 } from "./Text-BdluS7Fy.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-C0FuZS1C.mjs";
+import { a as Tooltip } from "./Tooltip-B-0VRuKT.mjs";
 import { transparent, withAlpha } from "./lib/color.mjs";
 import { letPointerDownReachDocument } from "./lib/letPointerDownReachDocument.mjs";
 import { isActive, isDisabled, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
+import { moveItemByIndex } from "./lib/reorderItems.mjs";
 import { 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-CEPzs4Pb.mjs";
-import { n as Button, t as IconButton } from "./IconButton-BHFCjvzs.mjs";
-import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-BSl5v5aa.mjs";
-import { r as InputGroup } from "./Input-BQN97Hzm.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 Input_default from "./components/Input/index.mjs";
-import { c as MenuList, s as MenuItem } from "./Menu-DjW2b3Wk.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-j8NWbAvM.mjs";
-import { t as Combobox } from "./Combobox-CCDoNF9Y.mjs";
-import { s as Popover_default } from "./Popover-CbYaWrAy.mjs";
-import { i as Modal_default } from "./Modal-DHLPK65-.mjs";
-import { t as Toggle } from "./Toggle-CntyMUPJ.mjs";
-import { i as selectedPresetFor, n as parseDateFilterValue, r as resolveDateFilterValue, t as formatDateFilterValue } from "./date-filter-D6IfCkwp.mjs";
-import { t as ListBox } from "./ListBox-DOqN9DNl.mjs";
-import { m as FormField, o as ComboboxField } from "./FormField-DbcqNcx2.mjs";
-import { r as DatePicker, t as DateRangePicker } from "./DatePicker-LPIJrc0n.mjs";
+import { c as MenuList, s as MenuItem } from "./Menu-CwKmfxKI.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-C2BHv8Lc.mjs";
+import { t as Combobox } from "./Combobox-BkpRqaxB.mjs";
+import { s as Popover_default } from "./Popover-BcII7usF.mjs";
+import { i as Modal_default } from "./Modal-BBIJVhv2.mjs";
+import { t as Toggle } from "./Toggle-BEOoATjS.mjs";
+import { t as ListBox } from "./ListBox-CjNokYs6.mjs";
+import { m as FormField, o as ComboboxField } from "./FormField-C3nUzhGT.mjs";
+import { r as DatePicker, t as DateRangePicker } from "./DatePicker-CjuR6ORz.mjs";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
 import { Fragment, createContext, createElement, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { CaretDownIcon, CheckIcon, CircleInfoIcon, CirclePlusIcon, CopyIcon, FilterIcon, MoreIcon, PlusIcon, RotateCcwIcon, SaveIcon, SearchIcon, SettingsIcon, StarIcon, TrashIcon, XIcon } from "@persona/icons";
+import { DateTime, Settings } from "luxon";
+import { CaretDownIcon, CheckIcon, CircleInfoIcon, CirclePlusIcon, CopyIcon, EyeIcon, EyeOffIcon, FilterIcon, MoreIcon, PlusIcon, RotateCcwIcon, SaveIcon, SearchIcon, SettingsIcon, StarIcon, TrashIcon, XIcon } from "@persona/icons";
 import { CaretDownIcon as CaretDownIcon$1, CircleInfoIcon as CircleInfoIcon$1, LockedIcon as LockedIcon$1, MoreIcon as MoreIcon$1, PlusIcon as PlusIcon$1, SearchIcon as SearchIcon$1, 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 { DateTime, Settings } from "luxon";
 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 { v4 } from "uuid";
@@ -96,21 +101,33 @@ const StyledInput = styled(Input_default)`
 `;
 const SearchInput = ({ className, title = "Search", handleInput, handleOnFocus = noop, onBlur = noop, id, value, placeholder, dataTest, autoFocus, useClearIcon = false, disabled = false, disabledTooltip, anchorTooltipToCursor = false, size = "md", leftIcon = size === "sm" ? /* @__PURE__ */ jsx(SearchIcon$1, {}) : /* @__PURE__ */ jsx(SearchIcon, {}), flattenDisplay = false, maxLength }) => {
 	const [innerValue, setInnerValue] = useState(value);
+	const pendingEmissionsRef = useRef([]);
+	const emit = useCallback((next) => {
+		pendingEmissionsRef.current.push(next);
+		handleInput(next);
+	}, [handleInput]);
 	const handleChange = useCallback(({ target }) => {
 		setInnerValue(target.value);
-		handleInput(target.value);
-	}, [handleInput, setInnerValue]);
+		emit(target.value);
+	}, [emit, setInnerValue]);
 	useEffect(() => {
+		const pending = pendingEmissionsRef.current;
+		const pendingIndex = pending.lastIndexOf(value);
+		if (pendingIndex >= 0 && pendingIndex < pending.length - 1) {
+			pending.splice(0, pendingIndex + 1);
+			return;
+		}
+		pending.length = 0;
 		setInnerValue(value);
 	}, [value]);
 	const inputRef = useRef(null);
 	const handleClear = useCallback(() => {
 		setInnerValue("");
-		handleInput("");
+		emit("");
 		handleOnFocus();
 		inputRef.current?.focus();
 	}, [
-		handleInput,
+		emit,
 		handleOnFocus,
 		inputRef,
 		setInnerValue
@@ -217,6 +234,7 @@ const CompactSearchInput = styled(SearchInput)`
 * @see ControlBar.spec.tsx
 */
 const CompactBar = ({ title, searchProps, showFilters, setShowFilters, filtersId, isLoading, isFilterPanelLoading, propertiesButton, tableActions, "data-tour-target": dataTourTarget, filterPanel }) => {
+	const strings = usePDSStrings();
 	const autoExpandSearch = !title;
 	const [showSearch, setShowSearch] = useState(autoExpandSearch);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(DataTableCompactBar, {
@@ -253,7 +271,7 @@ const CompactBar = ({ title, searchProps, showFilters, setShowFilters, filtersId
 						variant: "text",
 						width: "icon",
 						size: "sm",
-						"aria-label": "Show search bar",
+						"aria-label": strings.showSearchBar,
 						onClick: () => setShowSearch(true),
 						children: /* @__PURE__ */ jsx(SearchIcon, {})
 					})),
@@ -261,7 +279,7 @@ const CompactBar = ({ title, searchProps, showFilters, setShowFilters, filtersId
 						id: "table-controls__view-tab-filters",
 						variant: "text",
 						onClick: () => setShowFilters?.(!showFilters),
-						"aria-label": showFilters ? "Hide filters" : "Show filters",
+						"aria-label": showFilters ? strings.hideFilters : strings.showFilters,
 						"aria-expanded": showFilters,
 						"aria-controls": filtersId,
 						disabled: isLoading || isFilterPanelLoading,
@@ -299,7 +317,9 @@ const rectContainsRect = (parent, child) => {
 //#region components/DataTable/TableControls/ControlBar.tsx
 const TAB_ID_PREFIX = "table-controls__view-tab_";
 const OVERFLOW_TAB_ID_PREFIX = "table-controls__view-tab-overflow_";
+const ADD_VIEW_BUTTON_ID = "table-controls__view-tab-new";
 const OVERFLOW_WIDTH_SHRINK_THRESHOLD = 16;
+const OVERFLOW_GAP = 8;
 function enterProxiesClick(e) {
 	if (e.key === "Enter") e.target.dispatchEvent(new Event("click", { bubbles: true }));
 }
@@ -313,6 +333,40 @@ 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%;
+  right: 0;
+  transform: translateY(-50%);
+  opacity: 0;
+  color: ${({ theme }) => semanticColor(theme, "FgSecondary", theme.color.text.secondary)};
+  background-color: ${({ theme }) => semanticColor(theme, "SurfacePrimary", theme.color.white)};
+  box-shadow: -${Spacing[2]} 0 ${Spacing[2]}
+    ${({ theme }) => semanticColor(theme, "SurfacePrimary", theme.color.white)};
+
+  /* The icon's own "XIcon" title would otherwise replace the button's "Hide view" tooltip. */
+  svg {
+    pointer-events: none;
+  }
+
+  /* Without hover, a tap on the tab's edge must not land on the invisible button. */
+  @media (hover: none) {
+    pointer-events: none;
+  }
+`;
+const TabSlot = styled.div`
+  position: relative;
+  display: inline-flex;
+
+  &:hover,
+  &:has(:focus-visible) {
+    ${HideViewButton} {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+`;
 const LockedTab = styled(Tab)`
   svg {
     height: 12px;
@@ -349,7 +403,9 @@ const TabOverflowContainer = styled.div`
   position: absolute;
   height: 32px;
 `;
-const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditViews, handleNameChange, onDuplicateView, onRequestDeleteView, onSelectView, onResetCurrentView, onSaveView, onSetDefaultView, isViewDirty, showTabContextMenu, setShowTabContextMenu, className, ...rest }) => {
+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 strings = usePDSStrings();
+	const showMenu = selected && (canEditViews || !!onViewHiddenChange);
 	const inputRef = useRef(null);
 	const lastSubmittedNameRef = useRef(null);
 	const submitNameChange = (newName) => {
@@ -363,12 +419,20 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 		"aria-selected": selected,
 		role: "tab",
 		onClick: !selected ? () => onSelectView?.(view.id) : void 0,
-		suffixIcon: selected && canEditViews ? /* @__PURE__ */ jsx(MoreIcon, {}) : void 0,
+		onKeyDown: onKeyboardMove ? (e) => {
+			if (e.altKey && e.shiftKey && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+				e.preventDefault();
+				e.stopPropagation();
+				onKeyboardMove(view.id, e.key === "ArrowLeft" ? -1 : 1);
+			}
+		} : void 0,
+		"aria-keyshortcuts": onKeyboardMove ? "Alt+Shift+ArrowLeft Alt+Shift+ArrowRight" : void 0,
+		suffixIcon: showMenu ? /* @__PURE__ */ jsx(MoreIcon, {}) : void 0,
 		className,
 		...rest,
 		children: view.name
 	});
-	if (canEditViews && selected) return /* @__PURE__ */ jsx(Popover_default, {
+	if (showMenu) return /* @__PURE__ */ jsx(Popover_default, {
 		trigger: tab,
 		open: showTabContextMenu,
 		onOpenChange: (open) => {
@@ -382,7 +446,7 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 		},
 		children: /* @__PURE__ */ jsxs(Stack, {
 			spacing: Spacing[3],
-			children: [/* @__PURE__ */ jsx(ViewNameInput, {
+			children: [canEditViews && /* @__PURE__ */ jsx(ViewNameInput, {
 				defaultValue: view.name,
 				onBlur: (e) => submitNameChange(e.currentTarget.value),
 				onKeyDown: (e) => {
@@ -393,7 +457,7 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 			}), /* @__PURE__ */ jsxs(MenuList, {
 				padding: Spacing[0],
 				children: [
-					onDuplicateView && /* @__PURE__ */ jsx(MenuItem, {
+					canEditViews && onDuplicateView && /* @__PURE__ */ jsx(MenuItem, {
 						id: "table-controls__view__menu-duplicate",
 						prefixIcon: /* @__PURE__ */ jsx(CopyIcon, {}),
 						onClick: async () => {
@@ -407,14 +471,14 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 							}
 						},
 						onKeyDown: enterProxiesClick,
-						children: "Duplicate"
+						children: strings.duplicateView
 					}),
 					canEditViews && onResetCurrentView && /* @__PURE__ */ jsx(MenuItem, {
 						id: "table-controls__view__menu-reset",
 						prefixIcon: /* @__PURE__ */ jsx(RotateCcwIcon, {}),
 						onClick: onResetCurrentView,
 						onKeyDown: enterProxiesClick,
-						children: "Reset"
+						children: strings.resetView
 					}),
 					canEditViews && onSaveView && /* @__PURE__ */ jsx(MenuItem, {
 						id: "table-controls__view__menu-save",
@@ -425,9 +489,9 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 							setShowTabContextMenu(false);
 						},
 						onKeyDown: enterProxiesClick,
-						children: "Save"
+						children: strings.saveViewMenuItem
 					}),
-					onSetDefaultView && /* @__PURE__ */ jsx(MenuItem, {
+					canEditViews && onSetDefaultView && /* @__PURE__ */ jsx(MenuItem, {
 						id: "table-controls__view__menu-set-default",
 						prefixIcon: /* @__PURE__ */ jsx(StarIcon, {}),
 						disabled: view.isDefault,
@@ -436,9 +500,20 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 							setShowTabContextMenu(false);
 						},
 						onKeyDown: enterProxiesClick,
-						children: view.isDefault ? "Already the default" : "Set as default"
+						children: view.isDefault ? strings.alreadyDefaultView : strings.setAsDefaultView
 					}),
-					onRequestDeleteView && /* @__PURE__ */ jsx(MenuItem, {
+					onViewHiddenChange && /* @__PURE__ */ jsx(MenuItem, {
+						id: "table-controls__view__menu-toggle-hidden",
+						prefixIcon: isHidden ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyeOffIcon, {}),
+						onClick: () => {
+							setShowTabContextMenu(false);
+							if (isHidden) onViewHiddenChange(view.id, false);
+							else onHideView?.(view.id);
+						},
+						onKeyDown: enterProxiesClick,
+						children: isHidden ? strings.showView : strings.hideView
+					}),
+					canEditViews && onRequestDeleteView && /* @__PURE__ */ jsx(MenuItem, {
 						id: "table-controls__view__menu-delete",
 						prefixIcon: /* @__PURE__ */ jsx(TrashIcon, {}),
 						onClick: () => {
@@ -446,7 +521,7 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 							onRequestDeleteView(view);
 						},
 						onKeyDown: enterProxiesClick,
-						children: "Delete"
+						children: strings.delete
 					})
 				]
 			})]
@@ -454,6 +529,52 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 	});
 	return tab;
 };
+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: mergedSlotRef,
+		"data-tab-view": true,
+		"data-tab-slot": true,
+		style: slotStyle,
+		...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,
+			onClick: () => onHideView?.(view.id),
+			children: /* @__PURE__ */ jsx(XIcon, {})
+		})]
+	});
+};
+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,
+		slotListeners,
+		slotRef: setNodeRef,
+		slotStyle: {
+			transform: transform ? `translate3d(${transform.x}px, 0, 0)` : void 0,
+			transition,
+			zIndex: isDragging ? 1 : void 0
+		}
+	});
+};
 /**
 * A tab that is locked and does not support editing or actions.
 */
@@ -470,37 +591,46 @@ const LockedViewTab = ({ id, selected, onClick, children, ...props }) => {
 const OverflowSavedViewTab = styled(SavedViewTab)`
   margin-left: ${Spacing[2]};
 `;
-const TabOverflow = forwardRef(function TabOverflow({ hiddenViews, currentView: currentViewId, handleAddView, onSelectView, canEditViews, lastVisibleViewElement, ...rest }, ref) {
+const TabOverflow = forwardRef(function TabOverflow({ overflowViews, hiddenViews, currentView: currentViewId, handleAddView, onOpenView, onViewHiddenChange, canEditViews, left, ...rest }, ref) {
+	const strings = usePDSStrings();
 	const [filter, setFilter] = useState("");
 	const [openPopover, setOpenPopover] = useState(false);
-	const currentView = useMemo(() => {
-		return hiddenViews.find((view) => view.id === currentViewId);
-	}, [currentViewId, hiddenViews]);
-	const filteredViews = useMemo(() => hiddenViews.filter((view) => view.name.toLowerCase().includes(filter.toLowerCase()) && view.id !== currentView?.id), [
-		hiddenViews,
+	const menuViews = useMemo(() => [...overflowViews, ...hiddenViews], [overflowViews, hiddenViews]);
+	const currentView = useMemo(() => menuViews.find((view) => view.id === currentViewId), [currentViewId, menuViews]);
+	const filteredViews = useMemo(() => menuViews.filter((view) => view.name.toLowerCase().includes(filter.toLowerCase()) && view.id !== currentView?.id), [
+		menuViews,
 		filter,
 		currentView
 	]);
+	const moreCount = menuViews.length - (currentView ? 1 : 0);
+	const renderMenuItem = (view) => /* @__PURE__ */ jsx(MenuItem, {
+		id: `${OVERFLOW_TAB_ID_PREFIX}${view.id}`,
+		onClick: () => {
+			onOpenView(view.id);
+			setOpenPopover(false);
+		},
+		onKeyDown: enterProxiesClick,
+		children: view.name
+	}, view.id);
 	return /* @__PURE__ */ jsxs(TabOverflowContainer, {
 		ref,
-		style: useMemo(() => {
-			if (!lastVisibleViewElement) return;
-			return { left: lastVisibleViewElement.offsetLeft + lastVisibleViewElement.offsetWidth + 8 };
-		}, [lastVisibleViewElement]),
+		style: left != null ? { left } : void 0,
 		children: [
 			currentView && /* @__PURE__ */ jsx(OverflowSavedViewTab, {
 				view: currentView,
 				canEditViews,
 				selected: true,
 				tabIdPrefix: OVERFLOW_TAB_ID_PREFIX,
+				onViewHiddenChange,
+				isHidden: hiddenViews.some((view) => view.id === currentView.id),
 				...rest
 			}),
-			hiddenViews.length === 1 && currentView && hiddenViews[0].id !== currentView.id ? null : /* @__PURE__ */ jsxs(Popover_default, {
-				trigger: /* @__PURE__ */ jsxs(Button, {
+			moreCount > 0 && /* @__PURE__ */ jsxs(Popover_default, {
+				trigger: /* @__PURE__ */ jsx(Button, {
 					variant: "basic",
 					size: "sm",
 					width: "auto",
-					children: [currentView ? hiddenViews.length - 1 : hiddenViews.length, " more…"]
+					children: strings.moreViews(moreCount)
 				}),
 				contentProps: {
 					align: "start",
@@ -514,27 +644,17 @@ const TabOverflow = forwardRef(function TabOverflow({ hiddenViews, currentView:
 				children: [/* @__PURE__ */ jsx(Input_default, {
 					value: filter,
 					onChange: (e) => setFilter(e.target.value),
-					placeholder: "Search for a view..."
+					placeholder: strings.searchViews
 				}), /* @__PURE__ */ jsx(OverflowMenuList, {
 					padding: Spacing[0],
-					children: filteredViews.map((view) => {
-						return /* @__PURE__ */ jsx(MenuItem, {
-							id: `${OVERFLOW_TAB_ID_PREFIX}${view.id}`,
-							onClick: () => {
-								onSelectView?.(view.id);
-								setOpenPopover(false);
-							},
-							onKeyDown: enterProxiesClick,
-							children: view.name
-						}, view.id);
-					})
+					children: filteredViews.map(renderMenuItem)
 				})]
 			}),
 			canEditViews && handleAddView && /* @__PURE__ */ jsx(AddViewButton, {
 				id: `${OVERFLOW_TAB_ID_PREFIX}overflow-new`,
 				onClick: handleAddView,
 				size: "md",
-				"aria-label": "Add new view",
+				"aria-label": strings.addNewView,
 				children: /* @__PURE__ */ jsx(CirclePlusIcon, {})
 			})
 		]
@@ -550,48 +670,60 @@ const ProductTourStyles = createGlobalStyle`
     }
   }
 `;
-const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView, onDuplicateView, onDeleteView, onViewNameChange, 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, 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 [hiddenViews, setHiddenViews] = useState([]);
+	const [overflowViews, setOverflowViews] = useState([]);
 	const [showTabContextMenu, setShowTabContextMenu] = useState(false);
 	const [pendingDeleteView, setPendingDeleteView] = useState(null);
 	const previousPendingDeleteViewRef = useRef(null);
 	const [isDeletingView, setIsDeletingView] = useState(false);
 	const [isAddingView, setIsAddingView] = useState(false);
-	const [lastVisibleViewElement, setLastVisibleViewElement] = useState(null);
+	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();
+		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(() => {
+		const hiddenIds = new Set(hiddenViewIds);
+		const allViews = views ?? [];
+		return [allViews.filter((view) => !hiddenIds.has(view.id)), allViews.filter((view) => hiddenIds.has(view.id))];
+	}, [views, hiddenViewIds]);
 	const onResize = useCallback(() => {
 		if (!tabListRef.current) return;
 		const containerRect = tabListRef.current.getBoundingClientRect();
 		const tabListContainer = tabListRef.current;
-		const tabElements = Array.from(tabListContainer.querySelectorAll("[data-tab-view]"));
-		if (tabElements.length === 0 || rectContainsRect(containerRect, tabElements[tabElements.length - 1].getBoundingClientRect())) {
-			setHiddenViews([]);
-			return;
-		}
-		const firstHiddenIndex = tabElements.findIndex((el) => !rectContainsRect(containerRect, el.getBoundingClientRect()));
-		if (firstHiddenIndex === -1) setLastVisibleViewElement(null);
-		else {
-			const lastVisibleViewElement = tabElements[firstHiddenIndex - 1];
-			if (lastVisibleViewElement) setLastVisibleViewElement(lastVisibleViewElement);
-		}
-		setHiddenViews((firstHiddenIndex === -1 ? [] : views?.slice(firstHiddenIndex)) || []);
+		const firstOverflowIndex = Array.from(tabListContainer.querySelectorAll("[data-tab-view]")).findIndex((el) => !rectContainsRect(containerRect, el.getBoundingClientRect()));
+		const nextOverflowViews = firstOverflowIndex === -1 ? [] : shownViews.slice(firstOverflowIndex);
+		setOverflowViews((prev) => prev.length === nextOverflowViews.length && prev.every((view, index) => view === nextOverflowViews[index]) ? prev : nextOverflowViews);
+		const firstRowElements = Array.from(tabListContainer.children).filter((el) => el instanceof HTMLElement && el !== tabOverflowRef.current && rectContainsRect(containerRect, el.getBoundingClientRect()));
+		const anchor = firstRowElements[firstRowElements.length - 1];
+		setOverflowLeft(anchor ? anchor.offsetLeft + anchor.offsetWidth + OVERFLOW_GAP : null);
+		const addViewButton = tabListContainer.querySelector(`#${ADD_VIEW_BUTTON_ID}`);
+		setIsAddViewOverflowing(addViewButton instanceof HTMLElement && !firstRowElements.includes(addViewButton));
 		const tabOverflowWidth = tabOverflowRef.current?.getBoundingClientRect().width;
 		if (tabOverflowWidth) setTabOverflowWidth((prev) => prev != null && prev > tabOverflowWidth && prev - tabOverflowWidth < OVERFLOW_WIDTH_SHRINK_THRESHOLD ? prev : tabOverflowWidth);
-	}, [setHiddenViews, views]);
+	}, [shownViews]);
 	useLayoutEffect(() => {
-		if (!showViews || !tabListRef.current) return;
+		const tabList = tabListRef.current;
+		if (!showViews || !tabList) return;
 		const resizeObserver = new ResizeObserver(() => {
 			onResize();
 		});
-		resizeObserver.observe(tabListRef.current);
+		const observeTabList = () => {
+			resizeObserver.disconnect();
+			resizeObserver.observe(tabList);
+			Array.from(tabList.children).forEach((child) => resizeObserver.observe(child));
+		};
+		const mutationObserver = new MutationObserver(observeTabList);
+		observeTabList();
+		mutationObserver.observe(tabList, { childList: true });
 		return () => {
+			mutationObserver.disconnect();
 			resizeObserver.disconnect();
 		};
 	}, [onResize, showViews]);
@@ -600,12 +732,82 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 	}, [
 		onResize,
 		showViews,
-		views
+		shownViews
 	]);
-	const currentViewHidden = useMemo(() => {
-		if (currentView) return !!hiddenViews.find((view) => view.id === currentView);
-		return false;
-	}, [currentView, hiddenViews]);
+	const isCurrentViewInOverflow = useMemo(() => !!currentView && [...overflowViews, ...hiddenViews].some((view) => view.id === currentView), [
+		currentView,
+		overflowViews,
+		hiddenViews
+	]);
+	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+	const dragBoundsRef = useRef(null);
+	const handleDragStart = () => {
+		const tabList = tabListRef.current;
+		if (!tabList) return;
+		const tabListRect = tabList.getBoundingClientRect();
+		const visibleSlotRects = Array.from(tabList.querySelectorAll("[data-tab-view]")).map((slot) => slot.getBoundingClientRect()).filter((rect) => rectContainsRect(tabListRect, rect));
+		dragBoundsRef.current = visibleSlotRects.length > 0 ? {
+			left: visibleSlotRects[0].left,
+			right: visibleSlotRects[visibleSlotRects.length - 1].right,
+			bottom: tabListRect.bottom
+		} : null;
+	};
+	const visibleTabCollision = useCallback((args) => {
+		const bounds = dragBoundsRef.current;
+		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;
+		if (!bounds || !draggingNodeRect) return {
+			...transform,
+			y: 0
+		};
+		const minX = bounds.left - draggingNodeRect.left;
+		const maxX = bounds.right - draggingNodeRect.right;
+		return {
+			...transform,
+			x: Math.min(Math.max(transform.x, minX), maxX),
+			y: 0
+		};
+	}, []);
+	const moveView = (viewId, toIndex) => {
+		if (!views || !onReorderViews) return;
+		const viewIds = views.map((view) => view.id);
+		const reordered = moveItemByIndex(viewIds, viewIds.indexOf(viewId), toIndex);
+		if (reordered !== viewIds) onReorderViews(reordered);
+	};
+	const indexOfView = (viewId) => views?.findIndex((view) => view.id === viewId) ?? -1;
+	const openViewFromMenu = (viewId) => {
+		if (hiddenViews.some((view) => view.id === viewId)) onViewHiddenChange?.(viewId, false);
+		moveView(viewId, 0);
+		onSelectView?.(viewId);
+	};
+	const handleDragEnd = ({ active, over }) => {
+		if (over) moveView(String(active.id), indexOfView(String(over.id)));
+	};
+	const hideView = (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 || 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({ preventScroll: true });
+	};
+	const moveViewWithKeyboard = (viewId, direction) => {
+		const neighbor = shownViews[shownViews.findIndex((view) => view.id === viewId) + direction];
+		if (!neighbor) return;
+		moveView(viewId, indexOfView(neighbor.id));
+	};
 	const handleAddView = async () => {
 		try {
 			setIsAddingView(true);
@@ -677,97 +879,115 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 			children: displayLabel
 		}, key);
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsx(ProductTourStyles, {}),
-		(title || showViews || canEditViews && onSaveView || tableActions || bulkActions) && /* @__PURE__ */ jsx(ViewsBar, {
-			ref: tabListRef,
-			title,
-			maxTabChars: 25,
-			$isAddingView: isAddingView,
-			"data-tour-target": dataTourTarget,
-			actions: /* @__PURE__ */ jsxs(HStack, {
-				spacing: Spacing[3],
-				align: "center",
-				style: tabOverflowWidth ? { paddingLeft: `${tabOverflowWidth + 16}px` } : void 0,
-				children: [
-					canEditViews && onSaveView && /* @__PURE__ */ jsx(Button, {
-						id: "table-controls__view-tab-save",
-						onClick: onSaveView,
-						"aria-label": "Save current view",
-						disabled: !isViewDirty || isLoading,
-						size: "sm",
-						variant: "basic",
-						width: "auto",
-						"data-tour-target": "saved-views-save-button",
-						children: "Save view"
-					}),
-					bulkActionButtons,
-					tableActions
-				]
-			}),
-			children: showViews && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				/* @__PURE__ */ jsx(LockedViewTab, {
-					id: `${TAB_ID_PREFIX}default`,
-					selected: !currentView,
-					onClick: () => onSelectView?.(null),
-					"data-tour-target": "saved-views-default-view",
-					children: "Default view"
-				}),
-				presetViews?.map((view) => {
-					const selected = view.id === currentView;
-					return /* @__PURE__ */ jsx(LockedViewTab, {
-						id: `${TAB_ID_PREFIX}preset-${view.id}`,
-						selected,
-						onClick: () => onSelectView?.(view.id),
-						children: view.name
-					}, view.id);
-				}),
-				views?.map((view) => {
-					return /* @__PURE__ */ jsx(SavedViewTab, {
-						view,
-						canEditViews: canEditViews ?? false,
-						handleNameChange,
-						onDuplicateView,
-						onRequestDeleteView,
-						onSelectView,
-						onResetCurrentView,
-						onSaveView,
-						onSetDefaultView,
-						isViewDirty: isViewDirty ?? false,
-						selected: view.id === currentView,
-						showTabContextMenu: showTabContextMenu && !currentViewHidden,
-						setShowTabContextMenu,
-						"data-tab-view": true
-					}, view.id);
-				}),
-				canEditViews && onAddView && /* @__PURE__ */ jsx(AddViewButton, {
-					id: "table-controls__view-tab-new",
-					size: "md",
-					onClick: handleAddView,
-					"aria-label": "Add new view",
-					"data-tour-target": "saved-views-add-button",
-					children: /* @__PURE__ */ jsx(CirclePlusIcon, {})
+	const showViewsBar = title || showViews || canEditViews && onSaveView || tableActions || bulkActions;
+	const getSavedViewTabProps = (view) => ({
+		view,
+		onKeyboardMove: onReorderViews ? moveViewWithKeyboard : void 0,
+		onHideView: hideView,
+		canEditViews: canEditViews ?? false,
+		handleNameChange,
+		onDuplicateView,
+		onRequestDeleteView,
+		onSelectView,
+		onResetCurrentView,
+		onSaveView,
+		onSetDefaultView,
+		onViewHiddenChange,
+		isViewDirty: isViewDirty ?? false,
+		selected: view.id === currentView,
+		showTabContextMenu: showTabContextMenu && !isCurrentViewInOverflow,
+		setShowTabContextMenu
+	});
+	const viewsBar = /* @__PURE__ */ jsx(ViewsBar, {
+		ref: tabListRef,
+		title,
+		maxTabChars: 25,
+		$isAddingView: isAddingView,
+		"data-tour-target": dataTourTarget,
+		actions: /* @__PURE__ */ jsxs(HStack, {
+			spacing: Spacing[3],
+			align: "center",
+			style: tabOverflowWidth ? { paddingLeft: `${tabOverflowWidth + 16}px` } : void 0,
+			children: [
+				canEditViews && onSaveView && /* @__PURE__ */ jsx(Button, {
+					id: "table-controls__view-tab-save",
+					onClick: onSaveView,
+					"aria-label": strings.saveCurrentView,
+					disabled: !isViewDirty || isLoading,
+					size: "sm",
+					variant: "basic",
+					width: "auto",
+					"data-tour-target": "saved-views-save-button",
+					children: strings.saveView
 				}),
-				hiddenViews.length > 0 && /* @__PURE__ */ jsx(TabOverflow, {
-					ref: tabOverflowRef,
-					hiddenViews,
-					currentView,
-					onSelectView,
-					canEditViews: canEditViews ?? false,
-					handleAddView: onAddView ? handleAddView : null,
-					handleNameChange,
-					onDuplicateView,
-					onRequestDeleteView,
-					onResetCurrentView,
-					onSaveView,
-					onSetDefaultView,
-					isViewDirty: isViewDirty ?? false,
-					showTabContextMenu: showTabContextMenu && currentViewHidden,
-					setShowTabContextMenu,
-					lastVisibleViewElement
-				})
-			] })
+				bulkActionButtons,
+				tableActions
+			]
 		}),
+		children: showViews && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(LockedViewTab, {
+				id: `${TAB_ID_PREFIX}default`,
+				selected: !currentView,
+				onClick: () => onSelectView?.(null),
+				"data-tour-target": "saved-views-default-view",
+				children: strings.defaultView
+			}),
+			presetViews?.map((view) => {
+				const selected = view.id === currentView;
+				return /* @__PURE__ */ jsx(LockedViewTab, {
+					id: `${TAB_ID_PREFIX}preset-${view.id}`,
+					selected,
+					onClick: () => onSelectView?.(view.id),
+					children: view.name
+				}, view.id);
+			}),
+			onReorderViews ? /* @__PURE__ */ jsx(SortableContext, {
+				items: shownViews.map((view) => view.id),
+				strategy: horizontalListSortingStrategy,
+				children: shownViews.map((view) => /* @__PURE__ */ jsx(SortableSavedViewTab, { ...getSavedViewTabProps(view) }, view.id))
+			}) : shownViews.map((view) => /* @__PURE__ */ jsx(SavedViewTabSlot, { ...getSavedViewTabProps(view) }, view.id)),
+			canEditViews && onAddView && /* @__PURE__ */ jsx(AddViewButton, {
+				id: ADD_VIEW_BUTTON_ID,
+				size: "md",
+				onClick: handleAddView,
+				"aria-label": strings.addNewView,
+				"data-tour-target": "saved-views-add-button",
+				children: /* @__PURE__ */ jsx(CirclePlusIcon, {})
+			}),
+			(overflowViews.length > 0 || hiddenViews.length > 0) && /* @__PURE__ */ jsx(TabOverflow, {
+				ref: tabOverflowRef,
+				overflowViews,
+				hiddenViews,
+				currentView,
+				onSelectView,
+				onOpenView: openViewFromMenu,
+				canEditViews: canEditViews ?? false,
+				handleAddView: onAddView && isAddViewOverflowing ? handleAddView : null,
+				handleNameChange,
+				onDuplicateView,
+				onRequestDeleteView,
+				onResetCurrentView,
+				onSaveView,
+				onSetDefaultView,
+				onViewHiddenChange,
+				onHideView: hideView,
+				isViewDirty: isViewDirty ?? false,
+				showTabContextMenu: showTabContextMenu && isCurrentViewInOverflow,
+				setShowTabContextMenu,
+				left: overflowLeft
+			})
+		] })
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(ProductTourStyles, {}),
+		showViewsBar && (onReorderViews ? /* @__PURE__ */ jsx(DndContext, {
+			sensors,
+			collisionDetection: visibleTabCollision,
+			modifiers: [restrictToVisibleSavedTabs],
+			onDragStart: handleDragStart,
+			onDragEnd: handleDragEnd,
+			children: viewsBar
+		}) : viewsBar),
 		/* @__PURE__ */ jsxs(HStack, {
 			align: "center",
 			spacing: Spacing[2],
@@ -783,7 +1003,7 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 					id: "table-controls__view-tab-filters",
 					variant: "basic",
 					onClick: () => setShowFilters?.(!showFilters),
-					"aria-label": showFilters ? "Hide filters" : "Show filters",
+					"aria-label": showFilters ? strings.hideFilters : strings.showFilters,
 					"aria-expanded": showFilters,
 					"aria-controls": filtersId,
 					disabled: isLoading || isFilterPanelLoading,
@@ -805,32 +1025,28 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 			},
 			isKeyboardDismissDisabled: isDeletingView,
 			contentProps: isDeletingView ? { showCloseButton: false } : void 0,
-			title: "Delete view?",
+			title: strings.deleteViewTitle,
 			footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
 				variant: "basic",
 				width: "auto",
 				disabled: isDeletingView,
 				onClick: () => setPendingDeleteView(null),
-				children: "Cancel"
+				children: strings.cancel
 			}), /* @__PURE__ */ jsx(Button, {
 				id: "table-controls__view__delete-confirm",
 				variant: "danger",
 				width: "auto",
 				isPending: isDeletingView,
 				onClick: confirmDeleteView,
-				children: "Delete"
+				children: strings.delete
 			})] }),
-			children: /* @__PURE__ */ jsxs(Paragraph, { children: [
-				"This will permanently delete “",
-				pendingDeleteView?.name,
-				"”. This action cannot be undone."
-			] })
+			children: /* @__PURE__ */ jsx(Paragraph, { children: strings.deleteViewConfirmation(pendingDeleteView?.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, currentView, onAddView, onViewNameChange, onDuplicateView, onDeleteView, onSaveView, onSetDefaultView, isViewDirty, selectedRows, bulkActions, onClearSelection, title, presetViews, compact, columnConfigurationProps, showFiltersAlways = false, onError, "data-tour-target": dataTourTarget }) => {
+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;
@@ -851,12 +1067,15 @@ const TableControls = ({ filterPanel, searchProps, defaultShowFilters, showFilte
 		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,
@@ -992,6 +1211,7 @@ const PopoverCard$1 = styled(Card_default)`
   padding: ${Spacing[4]};
 `;
 const TriggerIconButton = forwardRef(function TriggerIconButton({ disabled, ...elemProps }, ref) {
+	const strings = usePDSStrings();
 	return /* @__PURE__ */ jsx(Button, {
 		disabled,
 		width: "icon",
@@ -1000,21 +1220,22 @@ const TriggerIconButton = forwardRef(function TriggerIconButton({ disabled, ...e
 		...elemProps,
 		ref,
 		"data-tour-target": "table-properties-button",
-		"aria-label": "Table Properties",
+		"aria-label": strings.tableProperties,
 		children: /* @__PURE__ */ jsx(SettingsIcon, {})
 	});
 });
 const TooltipButtonWrapper = styled("div")`
   display: inline-block;
 `;
-const TableViewConfigurationDropdown = ({ disabled = false, disabledTooltipMessage = "Your role does not have permission to configure the view.", size = "md", variant = "basic", ...props }) => {
+const TableViewConfigurationDropdown = ({ disabled = false, disabledTooltipMessage, size = "md", variant = "basic", ...props }) => {
+	const strings = usePDSStrings();
 	return disabled ? /* @__PURE__ */ jsx(Tooltip, {
 		trigger: /* @__PURE__ */ jsx(TooltipButtonWrapper, { children: /* @__PURE__ */ jsx(TriggerIconButton, {
 			disabled: true,
 			size,
 			variant
 		}) }),
-		children: disabledTooltipMessage
+		children: disabledTooltipMessage ?? strings.configureViewPermissionDenied
 	}) : /* @__PURE__ */ jsxs(Popover_default, { children: [/* @__PURE__ */ jsx(Popover_default.Trigger, {
 		asChild: true,
 		children: /* @__PURE__ */ jsx(TriggerIconButton, {
@@ -1034,6 +1255,7 @@ const TableViewConfigurationDropdown = ({ disabled = false, disabledTooltipMessa
 	})] });
 };
 const TableViewConfiguration = ({ columnConfiguration, attributeOptions, updateColumnConfiguration, getColumnDisabled, sortByRelevance = false }) => {
+	const strings = usePDSStrings();
 	const [searchTerm, setSearchTerm] = useState("");
 	const fuse = useMemo(() => {
 		return new Fuse(attributeOptions, sortByRelevance ? {
@@ -1130,7 +1352,7 @@ const TableViewConfiguration = ({ columnConfiguration, attributeOptions, updateC
 		/* @__PURE__ */ jsx(Label$1, {
 			size: "lg",
 			weight: "bold",
-			children: "Configure columns"
+			children: strings.configureColumns
 		}),
 		/* @__PURE__ */ jsx(Spacer_default, { height: 2 }),
 		/* @__PURE__ */ jsx(SearchContainer, { children: /* @__PURE__ */ jsx(StyledSearchInput, {
@@ -1138,12 +1360,12 @@ const TableViewConfiguration = ({ columnConfiguration, attributeOptions, updateC
 			value: searchTerm,
 			handleInput: setSearchTerm,
 			size: "md",
-			placeholder: "Search by item...",
+			placeholder: strings.searchColumns,
 			dataTest: "checklist-item-panel-item-table__search"
 		}) }),
 		/* @__PURE__ */ jsx(Spacer_default, { height: 2 }),
 		shownDndItemProps.length > 0 || hiddenDndItemProps.length > 0 ? /* @__PURE__ */ jsxs(DndSection, { children: [
-			shownDndItemProps.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Paragraph, { children: "Shown attributes" }), /* @__PURE__ */ jsx(DragDropContext, {
+			shownDndItemProps.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Paragraph, { children: strings.shownColumns }), /* @__PURE__ */ jsx(DragDropContext, {
 				onDragEnd: handleDragEnd,
 				children: /* @__PURE__ */ jsx(Droppable, {
 					droppableId: SHOWN_DROPPABLE_ID,
@@ -1179,8 +1401,8 @@ const TableViewConfiguration = ({ columnConfiguration, attributeOptions, updateC
 				})
 			})] }),
 			/* @__PURE__ */ jsx(Spacer_default, { height: 2 }),
-			hiddenDndItemProps.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Paragraph, { children: "Hidden attributes" }), hiddenDndItemProps.map((props) => /* @__PURE__ */ jsx(AttributeDnd, { ...props }, props.column.key))] })
-		] }) : /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Paragraph, { children: "No matching attributes" }) })
+			hiddenDndItemProps.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Paragraph, { children: strings.hiddenColumns }), hiddenDndItemProps.map((props) => /* @__PURE__ */ jsx(AttributeDnd, { ...props }, props.column.key))] })
+		] }) : /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Paragraph, { children: strings.noMatchingColumns }) })
 	] });
 };
 const OverflowText = styled("div")`
@@ -1189,6 +1411,7 @@ const OverflowText = styled("div")`
   display: flex;
 `;
 const AttributeDnd = ({ column, index, isDisabled = false, isToggled, shouldDisableDrag, handleToggle }) => {
+	const strings = usePDSStrings();
 	return /* @__PURE__ */ jsxs(DndItemWrapper, { children: [
 		/* @__PURE__ */ jsx(StyledIconDrag, {
 			$active: true,
@@ -1203,7 +1426,7 @@ const AttributeDnd = ({ column, index, isDisabled = false, isToggled, shouldDisa
 			value: isToggled,
 			disabled: isDisabled,
 			onChange: handleToggle,
-			"aria-label": isToggled ? `Hide ${column.label}` : `Show ${column.label}`
+			"aria-label": isToggled ? strings.hideColumn(column.label) : strings.showColumn(column.label)
 		}) })
 	] }, `${column.key}-${index}`);
 };
@@ -1331,6 +1554,7 @@ function getOperatorsForType(type) {
 * field can never surface an operator the host application can't serialize.
 */
 function getOperatorsForField(field) {
+	if (field.condition != null) return field.condition.operators.map(({ operator }) => operator);
 	const { allowedOperators } = field;
 	if (allowedOperators == null || allowedOperators.length === 0) return getOperatorsForType(field.type);
 	return allowedOperators;
@@ -1340,8 +1564,26 @@ function getDefaultOperatorForType(type) {
 	if (list.length === 0) throw new Error(`No operators defined for field type "${type}"`);
 	return list[0];
 }
-function isValuelessOperator(operator) {
-	return VALUELESS_OPERATORS.has(operator);
+function getConditionOperator(field, operator) {
+	return field?.condition?.operators.find((config) => config.operator === operator);
+}
+function isValuelessOperator(operator, field) {
+	const config = getConditionOperator(field, operator);
+	return config != null ? config.valueType === "none" : VALUELESS_OPERATORS.has(operator);
+}
+function hasCompleteConditionValue(rule, field) {
+	const config = getConditionOperator(field, rule.operator);
+	if (config == null) return false;
+	const { value } = rule;
+	if (config.isComplete != null && !config.isComplete(value)) return false;
+	switch (config.valueType) {
+		case "none": return value === null;
+		case "boolean": return typeof value === "boolean";
+		case "number": return typeof value === "number" && Number.isFinite(value);
+		case "integer": return typeof value === "number" && Number.isSafeInteger(value);
+		case "string": return typeof value === "string" && value.length > 0;
+		case "string_array": return Array.isArray(value) && value.length > 0 && value.every((entry) => typeof entry === "string");
+	}
 }
 /**
 * Whether a rule's value is a date range: a range operator, or a field that is
@@ -1382,20 +1624,25 @@ function fieldHasMultipleOperators(field) {
 	return getOperatorsForField(field).length > 1;
 }
 /**
-* Human-readable operator labels for the operator dropdown and filled pill.
+* Human-readable operator labels for the operator dropdown and filled pill, as keys into the
+* translatable `CommonStrings` table (English defaults: "is", "is not", "contains", ...).
 */
-const OPERATOR_LABELS = {
-	is: "is",
-	is_not: "is not",
-	contains: "contains",
-	does_not_contain: "does not contain",
-	is_empty: "is empty",
-	is_not_empty: "is not empty",
-	is_true: "is true",
-	is_false: "is false",
-	before: "before",
-	after: "after",
-	between: "is between"
+const OPERATOR_LABEL_KEYS = {
+	gt: "operatorGreaterThan",
+	gte: "operatorGreaterThanOrEqual",
+	lt: "operatorLessThan",
+	lte: "operatorLessThanOrEqual",
+	is: "operatorIs",
+	is_not: "operatorIsNot",
+	contains: "operatorContains",
+	does_not_contain: "operatorDoesNotContain",
+	is_empty: "operatorIsEmpty",
+	is_not_empty: "operatorIsNotEmpty",
+	is_true: "operatorIsTrue",
+	is_false: "operatorIsFalse",
+	before: "operatorBefore",
+	after: "operatorAfter",
+	between: "operatorBetween"
 };
 /**
 * Field-type-specific label overrides. The operator vocabulary itself
@@ -1403,18 +1650,21 @@ const OPERATOR_LABELS = {
 * labels can be more specific where the generic label is ambiguous.
 *
 * Only present for `(fieldType, operator)` pairs that diverge from the
-* generic label; everything else falls through to `OPERATOR_LABELS`.
+* generic label; everything else falls through to `OPERATOR_LABEL_KEYS`.
 */
-const OPERATOR_LABELS_BY_TYPE = { multi_choices: {
-	is: "is any of",
-	is_not: "is none of"
+const OPERATOR_LABEL_KEYS_BY_TYPE = { multi_choices: {
+	is: "operatorIsAnyOf",
+	is_not: "operatorIsNoneOf"
 } };
-function getOperatorLabel(operator, fieldType) {
-	if (fieldType) {
-		const override = OPERATOR_LABELS_BY_TYPE[fieldType]?.[operator];
-		if (override) return override;
-	}
-	return OPERATOR_LABELS[operator];
+/**
+* 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, 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
@@ -1448,7 +1698,16 @@ function emptyDateRange() {
 * `between`.
 */
 function emptyValueForRule(field, operator) {
-	if (isValuelessOperator(operator)) return null;
+	if (isValuelessOperator(operator, field)) return null;
+	const config = getConditionOperator(field, operator);
+	if (config != null) {
+		if (config.defaultValue != null) return config.defaultValue;
+		switch (config.valueType) {
+			case "string_array": return [];
+			case "boolean": return true;
+			default: return "";
+		}
+	}
 	if (isRangeOperator(operator) || field.type === "date_range") return emptyDateRange();
 	return emptyValueForFieldType(field.type);
 }
@@ -1459,7 +1718,8 @@ function emptyValueForRule(field, operator) {
 * the range control can't read it and the wire format would reject it.
 */
 function reconcileValueForOperator(field, nextOperator, previousOperator, value) {
-	if (isValuelessOperator(nextOperator)) return null;
+	if (isValuelessOperator(nextOperator, field)) return null;
+	if (field.condition != null) return getConditionOperator(field, nextOperator)?.valueType === getConditionOperator(field, previousOperator)?.valueType ? value ?? emptyValueForRule(field, nextOperator) : emptyValueForRule(field, nextOperator);
 	if (isRangeOperator(nextOperator) !== isRangeOperator(previousOperator)) return emptyValueForRule(field, nextOperator);
 	if (field.type === "date" && nextOperator === "is" && typeof value === "string" && TIME_COMPONENT$1.test(value)) return DateTime.fromISO(value).setZone(Settings.defaultZone).toISODate();
 	if (field.type === "date" && (previousOperator === "before" || previousOperator === "after") && (nextOperator === "before" || nextOperator === "after") && previousOperator !== nextOperator && typeof value === "string" && TIME_COMPONENT$1.test(value)) {
@@ -1496,10 +1756,15 @@ function resolveDateRangeRuleValue(rule, fieldType) {
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/format-date-value.ts
 const TIME_COMPONENT = /T\d{2}:\d{2}/;
-function formatDateValueForDisplay(value) {
+/**
+* Display form of a minute-precision filter value ("Oct 5, 2011 2:48 PM"). Date-only values are
+* returned untouched. Pass the `PDSProvider` locale (`usePDSLocale()`) to follow it; omitted or
+* en-US keeps the English format.
+*/
+function formatDateValueForDisplay(value, locale) {
 	if (!TIME_COMPONENT.test(value)) return value;
 	const dateTime = DateTime.fromISO(value).setZone(Settings.defaultZone);
-	return dateTime.isValid ? dateTime.toFormat("MMM d, yyyy h:mm a") : value;
+	return dateTime.isValid ? formatDateTime(dateTime, { locale }) : value;
 }
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/relative-date-label.ts
@@ -1518,17 +1783,20 @@ function relativePresetLabel(value, relativeDate) {
 }
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/display.ts
-function valueDisplayString(value, optionLabels, relativeDate, fieldType) {
+function valueDisplayString(value, optionLabels, relativeDate, fieldType, { locale, strings = DEFAULT_COMMON_STRINGS } = {}) {
 	if (value == null) return;
 	const relativeLabel = relativePresetLabel(value, relativeDate);
 	if (relativeLabel) return relativeLabel;
-	const display = (raw) => optionLabels?.[raw] ?? (fieldType === "date" || fieldType === "date_range" ? formatDateValueForDisplay(raw) : raw);
+	const display = (raw) => optionLabels?.[raw] ?? (fieldType === "date" || fieldType === "date_range" ? formatDateValueForDisplay(raw, locale) : raw);
 	if (Array.isArray(value)) {
 		if (value.length === 0) return;
 		if (value.length === 1) return display(String(value[0]));
 		return `${display(String(value[0]))} +${value.length - 1}`;
 	}
-	if (typeof value === "boolean") return value ? "true" : "false";
+	if (typeof value === "boolean") {
+		const label = value ? strings.booleanTrue : strings.booleanFalse;
+		return label === (value ? DEFAULT_COMMON_STRINGS.booleanTrue : DEFAULT_COMMON_STRINGS.booleanFalse) ? String(value) : label;
+	}
 	if (typeof value === "number") return String(value);
 	if (typeof value === "string") return value.length > 0 ? display(value) : void 0;
 	if (typeof value === "object") {
@@ -1538,6 +1806,7 @@ function valueDisplayString(value, optionLabels, relativeDate, fieldType) {
 	}
 }
 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);
@@ -1619,31 +1888,54 @@ function nodeToOptions(node) {
 * submenu entirely. Omit it (or pass `undefined`) to show every group.
 *
 * `excludeFieldIds`, when provided, drops those fields from the tree.
+*
+* `fieldsLabel` names the custom-field submenu; pass `usePDSStrings().fields` to translate it.
 */
-function buildFieldPickerOptions(registry, visibleCustomFieldParents, excludeFieldIds) {
-	const systemFields = registry.systemFieldsList();
+function buildFieldPickerOptions(registry, visibleCustomFieldParents, excludeFieldIds, fieldsLabel = FIELDS_SUBMENU_LABEL) {
+	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: FIELDS_SUBMENU_LABEL,
-		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
@@ -1661,68 +1953,97 @@ const StatementFields = styled.div`
   }
 `;
 function RuleEditorFields({ registry, dateTimesEnabled, field, groupIndex, ruleIndex, rule, size, operators, operatorConfigurable, onFieldChange, onOperatorChange, onValueChange, renderValueControl }) {
+	const strings = usePDSStrings();
 	const minutePrecisionValue = field != null && isMinutePrecisionDate(field, rule.operator, dateTimesEnabled);
-	const fieldOptions = useMemo(() => buildFieldPickerOptions(registry), [registry]);
+	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: "Value",
+			label: strings.field,
 			labelProps: { size },
-			"aria-label": `Field for rule ${ruleIndex + 1} in group ${groupIndex + 1}`,
+			"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);
-			},
-			placeholder: "Select field",
+			onChange: handleFieldChange,
+			placeholder: strings.selectField,
 			portal: false
 		}),
 		operatorConfigurable ? /* @__PURE__ */ jsx(ComboboxField, {
-			label: "Operator",
+			label: strings.operator,
 			labelProps: { size },
-			"aria-label": `Operator for rule ${ruleIndex + 1} in group ${groupIndex + 1}`,
+			"aria-label": strings.operatorForRule(ruleIndex + 1, groupIndex + 1),
 			size,
-			options: operators.map((op) => ({
-				label: getOperatorLabel(op, field?.type),
-				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: "Operator",
+			label: strings.operator,
 			labelProps: { size },
 			children: /* @__PURE__ */ jsx(Input_default, {
 				size,
-				"aria-label": `Operator for rule ${ruleIndex + 1} in group ${groupIndex + 1}`,
-				value: getOperatorLabel(rule.operator, field?.type),
+				"aria-label": strings.operatorForRule(ruleIndex + 1, groupIndex + 1),
+				value: getOperatorLabel(rule.operator, field?.type, strings, field),
 				disabled: true,
 				readOnly: true
 			})
 		}),
-		field && !isValuelessOperator(rule.operator) ? /* @__PURE__ */ jsx(FormField, {
-			label: "Value",
+		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
 	] });
 }
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/AdvancedFilterRuleRow.tsx
 function AdvancedFilterRuleRow({ registry, dateTimesEnabled, groupIndex, ruleIndex, rule, size, isOpen, onClose, onDelete, onFieldChange, onOperatorChange, onValueChange, renderValueControl }) {
+	const strings = usePDSStrings();
+	const locale = usePDSLocale();
 	const field = registry.get(rule.fieldId);
 	const operators = field ? getOperatorsForField(field) : [];
 	const operatorConfigurable = field ? fieldHasMultipleOperators(field) : true;
-	const condition = ruleIndex === 0 ? "If" : "And";
+	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),
+		getOperatorLabel(rule.operator, field?.type, strings, field),
 		valueDisplay
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(ListBox.LogicRow, {
@@ -1730,7 +2051,7 @@ function AdvancedFilterRuleRow({ registry, dateTimesEnabled, groupIndex, ruleInd
 		condition,
 		hideCondition: true,
 		attributeName: field?.label ?? rule.fieldId,
-		operator: getOperatorLabel(rule.operator, field?.type),
+		operator: getOperatorLabel(rule.operator, field?.type, strings, field),
 		matchLevelName: valueDisplay,
 		textValue,
 		size,
@@ -1738,7 +2059,7 @@ function AdvancedFilterRuleRow({ registry, dateTimesEnabled, groupIndex, ruleInd
 			if (isOpen) onClose();
 		},
 		onDelete,
-		dropdownHeadingText: `Edit \u2018${condition}\u2019 statement`,
+		dropdownHeadingText: strings.editStatement(condition),
 		dropdownFormFields: /* @__PURE__ */ jsx(RuleEditorFields, {
 			registry,
 			dateTimesEnabled,
@@ -1969,6 +2290,7 @@ function groupsForRender(compound) {
 * row's dropdown popover.
 */
 const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, open, onOpenChange, renderValueControl, size, dateTimesEnabled = false }) => {
+	const strings = usePDSStrings();
 	const resolvedSize = useFilterBarSize(size);
 	const subtleIconSize = resolvedSize === "sm" ? "xs" : "sm";
 	const wide = useMemo(() => dateTimesEnabled && registry.all().some((field) => field.timeGranularity === "minute"), [registry, dateTimesEnabled]);
@@ -1981,11 +2303,11 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 		onOpenChange?.(next);
 	}, [isControlled, onOpenChange]);
 	const baseId = useMemo(() => uniqueId("advanced-filter-rules__"), []);
-	const fields = registry.all();
+	const fields = useMemo(() => registry.all().filter((field) => field.disabledReason == null), [registry]);
 	const handleAddOrGroup = useCallback(() => {
 		const firstField = fields[0];
 		if (!firstField) return;
-		const operator = registry.reconcileOperator(firstField.id, "is");
+		const operator = firstField.condition != null ? registry.defaultOperatorFor(firstField.id) : registry.reconcileOperator(firstField.id, "is");
 		const groupIndex = compound.groups.length;
 		onChange(addRuleToGroup(compound, groupIndex, {
 			fieldId: firstField.id,
@@ -2002,7 +2324,7 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 	const handleAddRuleToGroup = useCallback((groupIndex) => {
 		const firstField = fields[0];
 		if (!firstField) return;
-		const operator = registry.reconcileOperator(firstField.id, "is");
+		const operator = firstField.condition != null ? registry.defaultOperatorFor(firstField.id) : registry.reconcileOperator(firstField.id, "is");
 		const newRowId = `${groupIndex}-${compound.groups[groupIndex]?.rules.length ?? 0}`;
 		onChange(addRuleToGroup(compound, groupIndex, {
 			fieldId: firstField.id,
@@ -2024,7 +2346,7 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 	}, [compound, applyCompoundChange]);
 	const handleFieldChange = useCallback((groupIndex, ruleIndex, nextFieldId) => {
 		const field = registry.get(nextFieldId);
-		if (!field) return;
+		if (!field || field.disabledReason != null) return;
 		const prev = compound.groups[groupIndex]?.rules[ruleIndex];
 		if (!prev) return;
 		const operator = registry.reconcileOperator(field.id, prev.operator);
@@ -2073,7 +2395,7 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 			sideOffset: 8,
 			collisionPadding: 8,
 			role: "dialog",
-			"aria-label": "Advanced filter rules",
+			"aria-label": strings.advancedFilterRules,
 			id: baseId,
 			onPointerDownCapture: letPointerDownReachDocument,
 			ref: popoverContentRef,
@@ -2082,9 +2404,11 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 				if (event.key !== "Enter") return;
 				if (selectedRowKey != null) {
 					event.preventDefault();
-					closeSelectedRow();
 					requestAnimationFrame(() => {
-						popoverContentRef.current?.focus();
+						closeSelectedRow();
+						requestAnimationFrame(() => {
+							popoverContentRef.current?.focus();
+						});
 					});
 					return;
 				}
@@ -2098,25 +2422,25 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 				children: [/* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(Paragraph, {
 					size: resolvedSize,
 					color: "secondary",
-					children: "Advanced filter rules"
+					children: strings.advancedFilterRules
 				}) }), /* @__PURE__ */ jsxs(Body, { children: [groupsForRender(compound).map((group, groupIndex, renderableGroups) => {
-					const groupTitle = groupIndex === 0 ? "If" : "Or";
+					const groupTitle = groupIndex === 0 ? strings.conditionIf : strings.conditionOr;
 					const isSynthetic = group.synthetic;
 					const isOnlyGroup = renderableGroups.length === 1;
 					const isEmptyGroup = group.rules.length === 0;
 					const hideGroupMenu = isOnlyGroup && isEmptyGroup;
-					const deleteGroupLabel = isOnlyGroup && !isEmptyGroup ? "Clear all" : "Delete group";
+					const deleteGroupLabel = isOnlyGroup && !isEmptyGroup ? strings.clearAll : strings.deleteGroup;
 					return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(GroupCard, {
 						"data-test": `advanced-filter-rules__group-${groupIndex}`,
 						role: "group",
-						"aria-label": `Filter group ${groupIndex + 1}`,
+						"aria-label": strings.filterGroup(groupIndex + 1),
 						children: [/* @__PURE__ */ jsxs(GroupHeader, { children: [/* @__PURE__ */ jsx(GroupTitle, {
 							$size: resolvedSize,
 							children: groupTitle
 						}), /* @__PURE__ */ jsxs(GroupHeaderActions, { children: [hideGroupMenu ? null : /* @__PURE__ */ jsx(GroupActionsMenu, {
 							trigger: /* @__PURE__ */ jsx(IconButton, {
 								size: subtleIconSize,
-								"aria-label": `More actions for filter group ${groupIndex + 1}`,
+								"aria-label": strings.moreActionsForFilterGroup(groupIndex + 1),
 								"data-test": `advanced-filter-rules__group-more-${groupIndex}`,
 								children: /* @__PURE__ */ jsx(MoreIcon$1, {})
 							}),
@@ -2137,17 +2461,18 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 							})
 						}), /* @__PURE__ */ jsx(IconButton, {
 							size: subtleIconSize,
+							disabled: fields.length === 0,
 							onClick: () => handleAddRuleToGroup(groupIndex),
-							"aria-label": `Add rule to filter group ${groupIndex + 1}`,
+							"aria-label": strings.addRuleToFilterGroup(groupIndex + 1),
 							"data-test": `advanced-filter-rules__add-rule-${groupIndex}`,
 							children: /* @__PURE__ */ jsx(PlusIcon$1, {})
 						})] })] }), group.rules.length === 0 ? /* @__PURE__ */ jsx(Paragraph, {
 							size: resolvedSize,
 							color: "secondary",
 							style: { padding: Spacing[2] },
-							children: "No rules yet"
+							children: strings.noRulesYet
 						}) : /* @__PURE__ */ jsx(RulesListBox, {
-							"aria-label": `Rules in group ${groupIndex + 1}`,
+							"aria-label": strings.rulesInGroup(groupIndex + 1),
 							selectionMode: "single",
 							size: resolvedSize,
 							fullWidth: true,
@@ -2179,8 +2504,9 @@ 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: "Or group"
+					children: strings.orGroup
 				}) })] })]
 			})
 		}) })]
@@ -2220,6 +2546,7 @@ const stringValue = (value) => {
 * scalar?", so we never produce an array-of-values from this control.
 */
 const ArrayValueControl = ({ field, operator, value, onChange, onCommit, ariaLabel, layout = "popover" }) => {
+	const strings = usePDSStrings();
 	const size = useFilterBarSize();
 	const [localValue, setLocalValue] = useState(() => stringDisplayValue(value));
 	useEffect(() => {
@@ -2234,7 +2561,7 @@ const ArrayValueControl = ({ field, operator, value, onChange, onCommit, ariaLab
 		onCommit?.();
 	}, [onChange, onCommit]);
 	if (isValuelessOperator(operator)) return null;
-	const label = ariaLabel ?? `${field.label} value`;
+	const label = ariaLabel ?? strings.fieldValue(field.label);
 	if ((field.itemType ?? "string") === "choices") return /* @__PURE__ */ jsx(Combobox, {
 		"aria-label": label,
 		options: (field.options ?? []).map((opt) => ({
@@ -2243,14 +2570,14 @@ const ArrayValueControl = ({ field, operator, value, onChange, onCommit, ariaLab
 		})),
 		value: stringValue(value),
 		onChange: handleComboboxChange,
-		placeholder: "Select an option",
+		placeholder: strings.selectAnOptionPlaceholder,
 		size,
 		embedded: layout === "popover"
 	});
 	return /* @__PURE__ */ jsx(Input_default, {
 		type: "text",
 		size,
-		placeholder: "Enter a value",
+		placeholder: strings.enterAValue,
 		"aria-label": label,
 		value: localValue,
 		onChange: (e) => handleTextChange(e.target.value)
@@ -2259,10 +2586,10 @@ const ArrayValueControl = ({ field, operator, value, onChange, onCommit, ariaLab
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/value-controls/BooleanValueControl/BooleanValueControl.tsx
 const OPTIONS = [{
-	label: "True",
+	labelKey: "booleanTrue",
 	value: true
 }, {
-	label: "False",
+	labelKey: "booleanFalse",
 	value: false
 }];
 const Row = styled.button`
@@ -2309,11 +2636,12 @@ const Root = styled.div`
 * for valueless operators (`is_empty`, `is_not_empty`).
 */
 function BooleanValueControl({ operator, value, onChange, ariaLabel }) {
+	const strings = usePDSStrings();
 	if (isValuelessOperator(operator)) return null;
 	const selected = typeof value === "boolean" ? value : null;
 	return /* @__PURE__ */ jsx(Root, {
 		role: "radiogroup",
-		"aria-label": ariaLabel ?? "Boolean value",
+		"aria-label": ariaLabel ?? strings.booleanValue,
 		children: OPTIONS.map((opt) => {
 			const isSelected = selected === opt.value;
 			return /* @__PURE__ */ jsxs(Row, {
@@ -2322,7 +2650,7 @@ function BooleanValueControl({ operator, value, onChange, ariaLabel }) {
 				"aria-checked": isSelected,
 				$selected: isSelected,
 				onClick: () => onChange(opt.value),
-				children: [opt.label, isSelected ? /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": true }) : null]
+				children: [strings[opt.labelKey], isSelected ? /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": true }) : null]
 			}, String(opt.value));
 		})
 	});
@@ -2341,6 +2669,7 @@ const EMPTY_VALUES = [];
 * valueless (e.g. `is_empty`).
 */
 function ChoicesValueControl({ field, operator, value, onChange, onCommit, ariaLabel, trigger, layout = "popover", multiple = false }) {
+	const strings = usePDSStrings();
 	const generatedId = useMemo(() => uniqueId(multiple ? "filter_v2_multi_choices_" : "filter_v2_choices_"), [multiple]);
 	const size = useFilterBarSize();
 	const options = field.options ?? EMPTY_OPTIONS;
@@ -2352,8 +2681,8 @@ function ChoicesValueControl({ field, operator, value, onChange, onCommit, ariaL
 		size,
 		"aria-label": ariaLabel ?? field.label,
 		placeholder: field.label,
-		searchPlaceholder: "Search",
-		emptyStateMessage: "No matches",
+		searchPlaceholder: strings.searchPlaceholder,
+		emptyStateMessage: strings.noMatches,
 		options,
 		values,
 		trigger,
@@ -2407,16 +2736,32 @@ const useDateRange = (value, relativeDate, minuteMode) => {
 	const parsedRelativeDate = parseDateFilterValue(relativeDate);
 	const parsed = parsedRelativeDate?.kind === "relative" ? parsedRelativeDate : parseDateFilterValue(value);
 	const resolved = parsed ? resolveDateFilterValue(parsed) : void 0;
-	return useMemo(() => ({
-		startDate: minuteMode ? parseIsoDateTime(resolved?.startDate, "start") : parseIsoDate$1(resolved?.startDate),
-		endDate: minuteMode ? parseIsoDateTime(resolved?.endDate, "end") : parseIsoDate$1(resolved?.endDate)
-	}), [
+	const isRelative = parsed?.kind === "relative";
+	const nowMinuteMillis = minuteMode && isRelative ? DateTime.now().setZone(Settings.defaultZone).set({
+		second: 0,
+		millisecond: 0
+	}).toMillis() : void 0;
+	return useMemo(() => {
+		const startDate = minuteMode ? parseIsoDateTime(resolved?.startDate, "start") : parseIsoDate$1(resolved?.startDate);
+		let endDate = minuteMode ? parseIsoDateTime(resolved?.endDate, "end") : parseIsoDate$1(resolved?.endDate);
+		if (minuteMode && isRelative && endDate && nowMinuteMillis !== void 0) {
+			const now = DateTime.fromMillis(nowMinuteMillis, { zone: Settings.defaultZone });
+			if (endDate.toMillis() > now.toMillis()) endDate = now;
+		}
+		return {
+			startDate,
+			endDate
+		};
+	}, [
+		isRelative,
 		minuteMode,
+		nowMinuteMillis,
 		resolved?.startDate,
 		resolved?.endDate
 	]);
 };
 const DateRangeValueControl = ({ field, operator, value, relativeDate, onChange, ariaLabel, hidePresets, portalContainer, visibleMonths, relativeDatesEnabled = false, dateTimesEnabled = false }) => {
+	const strings = usePDSStrings();
 	const size = useFilterBarSize();
 	const minuteMode = dateTimesEnabled && field.timeGranularity === "minute";
 	const dateRange = useDateRange(value, relativeDate, minuteMode);
@@ -2482,7 +2827,7 @@ const DateRangeValueControl = ({ field, operator, value, relativeDate, onChange,
 	if (isValuelessOperator(operator)) return null;
 	const hasCompleteRange = dateRange.startDate != null && dateRange.endDate != null;
 	return /* @__PURE__ */ jsx(DateRangePicker, {
-		"aria-label": ariaLabel ?? `${field.label} value`,
+		"aria-label": ariaLabel ?? strings.fieldValue(field.label),
 		calendarZIndex: Z_INDICES.modalDropdown,
 		dateRange,
 		hidePresets,
@@ -2529,6 +2874,7 @@ const parseIsoDate = (value, field, operator, dateTimesEnabled) => {
 * and bar both opt in; other date values remain `YYYY-MM-DD`.
 */
 const DateValueControl = ({ field, operator, value, onChange, ariaLabel, dateTimesEnabled = false }) => {
+	const strings = usePDSStrings();
 	const size = useFilterBarSize();
 	const minuteMode = isMinutePrecisionDate(field, operator, dateTimesEnabled);
 	const handleChange = useCallback((nextDate) => {
@@ -2554,7 +2900,7 @@ const DateValueControl = ({ field, operator, value, onChange, ariaLabel, dateTim
 	return /* @__PURE__ */ jsx(DatePicker, {
 		value: parseIsoDate(value, field, operator, dateTimesEnabled),
 		size,
-		"aria-label": ariaLabel ?? `${field.label} value`,
+		"aria-label": ariaLabel ?? strings.fieldValue(field.label),
 		onChange: handleChange,
 		granularity: minuteMode ? "minute" : "day",
 		useModalZIndex: true
@@ -2605,9 +2951,10 @@ 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();
 	const size = useFilterBarSize();
 	const [localValue, setLocalValue] = useState(() => numericDisplayValue(value));
 	const isFocusedRef = useRef(false);
@@ -2632,16 +2979,20 @@ 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",
 		size,
 		step: "any",
 		inputMode: "decimal",
-		placeholder: "Enter a number",
-		"aria-label": ariaLabel ?? `${field.label} value`,
+		placeholder: strings.enterANumber,
+		"aria-label": ariaLabel ?? strings.fieldValue(field.label),
 		value: localValue,
 		onChange: (e) => handleChange(e.target.value),
+		onKeyDown: handleKeyDown,
 		onFocus: () => {
 			isFocusedRef.current = true;
 		},
@@ -2676,9 +3027,10 @@ 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();
 	const size = useFilterBarSize();
 	const [localValue, setLocalValue] = useState(() => numericDisplayValue(value));
 	const isFocusedRef = useRef(false);
@@ -2703,16 +3055,20 @@ 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",
 		size,
 		step: 1,
 		inputMode: "numeric",
-		placeholder: "Enter a number",
-		"aria-label": ariaLabel ?? `${field.label} value`,
+		placeholder: strings.enterANumber,
+		"aria-label": ariaLabel ?? strings.fieldValue(field.label),
 		value: localValue,
 		onChange: (e) => handleChange(e.target.value),
+		onKeyDown: handleKeyDown,
 		onFocus: () => {
 			isFocusedRef.current = true;
 		},
@@ -2755,7 +3111,7 @@ function StringValueControl({ field, operator, value, onChange, ariaLabel, input
 			debouncedOnChange.flush();
 		},
 		onKeyDown: (event) => {
-			if (event.key === "Enter") debouncedOnChange.flush();
+			if (event.key === "Enter" && !event.defaultPrevented && !event.nativeEvent.isComposing) debouncedOnChange.flush();
 		}
 	});
 }
@@ -2777,8 +3133,27 @@ const RESOLVERS = {
 	array: (opts) => /* @__PURE__ */ jsx(ArrayValueControl, { ...opts })
 };
 function resolveValueControl(opts, hostResolver) {
+	if (opts.field.condition != null && isValuelessOperator(opts.operator, opts.field)) return null;
 	const hostControl = hostResolver?.(opts);
 	if (hostControl != null) return hostControl;
+	const config = getConditionOperator(opts.field, opts.operator);
+	if (config != null) {
+		if (config.valueType === "string_array") return opts.field.options != null ? /* @__PURE__ */ jsx(ChoicesValueControl, {
+			multiple: true,
+			...opts,
+			operator: "is"
+		}) : null;
+		const type = config.valueType === "number" ? "float" : config.valueType;
+		if (type === "none") return null;
+		return RESOLVERS[type]?.({
+			...opts,
+			operator: "is",
+			field: {
+				...opts.field,
+				type
+			}
+		}) ?? null;
+	}
 	const renderer = RESOLVERS[opts.field.type];
 	if (!renderer) return null;
 	return renderer(opts);
@@ -2806,26 +3181,34 @@ const TriggerWrapper = styled.span`
       }
     `}
 `;
-const FilterPickerMenu = ({ registry, onPickField, triggerLabel = "Filter", compact = false, disabled = false, visibleCustomFieldParents, excludeFieldIds, size, ...rest }) => {
+const FilterPickerMenu = ({ registry, onPickField, triggerLabel, compact = false, disabled = false, visibleCustomFieldParents, excludeFieldIds, size, ...rest }) => {
 	const resolvedSize = useFilterBarSize(size);
-	const unfilteredOptions = useMemo(() => buildFieldPickerOptions(registry, visibleCustomFieldParents), [registry, visibleCustomFieldParents]);
-	const options = useMemo(() => excludeFieldIds == null || excludeFieldIds.length === 0 ? unfilteredOptions : buildFieldPickerOptions(registry, visibleCustomFieldParents, excludeFieldIds), [
+	const strings = usePDSStrings();
+	const resolvedTriggerLabel = triggerLabel ?? strings.filter;
+	const unfilteredOptions = useMemo(() => buildFieldPickerOptions(registry, visibleCustomFieldParents, void 0, strings.fields), [
+		registry,
+		visibleCustomFieldParents,
+		strings.fields
+	]);
+	const options = useMemo(() => excludeFieldIds == null || excludeFieldIds.length === 0 ? unfilteredOptions : buildFieldPickerOptions(registry, visibleCustomFieldParents, excludeFieldIds, strings.fields), [
 		registry,
 		visibleCustomFieldParents,
 		excludeFieldIds,
-		unfilteredOptions
+		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;
 	const trigger = compact ? /* @__PURE__ */ jsx(IconButton, {
 		size: resolvedSize,
 		disabled,
-		"aria-label": triggerLabel,
+		"aria-label": resolvedTriggerLabel,
 		children: /* @__PURE__ */ jsx(CirclePlusIcon, {})
 	}) : /* @__PURE__ */ jsx(Button, {
 		variant: "text",
@@ -2833,17 +3216,18 @@ const FilterPickerMenu = ({ registry, onPickField, triggerLabel = "Filter", comp
 		width: "auto",
 		prefixIcon: /* @__PURE__ */ jsx(CirclePlusIcon, {}),
 		disabled,
-		children: triggerLabel
+		children: resolvedTriggerLabel
 	});
 	return /* @__PURE__ */ jsx(TriggerWrapper, {
 		...rest,
 		$isOpen: false,
 		children: /* @__PURE__ */ jsx(Combobox, {
 			options,
+			optionDisabledReason,
 			value: null,
 			onChange: handleChange,
 			size: resolvedSize,
-			"aria-label": "Filter field picker",
+			"aria-label": strings.filterFieldPicker,
 			trigger
 		})
 	});
@@ -3072,13 +3456,13 @@ const OverflowTooltipList = styled(Stack).attrs({
 * `optionLabels` lookup so the pill renders human-readable option labels
 * instead of raw option ids. Null / undefined collapses to an empty list.
 */
-function normalizeValueToDisplay(value, optionLabels, relativeDate, fieldType) {
+function normalizeValueToDisplay(value, optionLabels, relativeDate, fieldType, strings = DEFAULT_COMMON_STRINGS, locale) {
 	if (value == null) return [];
 	const relativeLabel = relativePresetLabel(value, relativeDate);
 	if (relativeLabel) return [relativeLabel];
-	const lookup = (raw) => optionLabels?.[raw] ?? (fieldType === "date" || fieldType === "date_range" ? formatDateValueForDisplay(raw) : raw);
+	const lookup = (raw) => optionLabels?.[raw] ?? (fieldType === "date" || fieldType === "date_range" ? formatDateValueForDisplay(raw, locale) : raw);
 	if (Array.isArray(value)) {
-		if (value.length > 0 && Array.isArray(value[0])) return [`${value.length} group${value.length === 1 ? "" : "s"}`];
+		if (value.length > 0 && Array.isArray(value[0])) return [strings.groupCount(value.length)];
 		return value.map((entry) => lookup(String(entry)));
 	}
 	if (typeof value === "object") {
@@ -3087,7 +3471,7 @@ function normalizeValueToDisplay(value, optionLabels, relativeDate, fieldType) {
 		const single = startDate || endDate;
 		return single ? [lookup(single)] : [];
 	}
-	if (typeof value === "boolean") return [value ? "True" : "False"];
+	if (typeof value === "boolean") return [value ? strings.booleanTrue : strings.booleanFalse];
 	if (typeof value === "number") return [String(value)];
 	return [lookup(value)];
 }
@@ -3097,24 +3481,29 @@ function normalizeValueToDisplay(value, optionLabels, relativeDate, fieldType) {
 * relying on child text nodes because the chip components don't always read
 * cleanly when concatenated by the AT.
 */
-function buildAccessibleName(field, rule, displayedValues) {
+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);
-	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) {
 	const reactId = useMemo(() => uniqueId("filter-pill-"), []);
 	const resolvedSize = useFilterBarSize(size);
-	const displayedValues = useMemo(() => rule && !isValuelessOperator(rule.operator) ? normalizeValueToDisplay(rule.value, optionLabels, carriesDateRange(rule.operator, field?.type) ? rule.relativeDate : void 0, field?.type) : [], [
+	const strings = usePDSStrings();
+	const locale = usePDSLocale();
+	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);
+	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`;
@@ -3122,15 +3511,15 @@ const FilterPill = forwardRef(function FilterPill({ field, rule, onClick, onDism
 		ref,
 		variant,
 		size: resolvedSize,
-		bodyAriaLabel: `Edit filter: ${accessibleName}`,
+		bodyAriaLabel: strings.editFilter(accessibleName),
 		onBodyClick: onClick,
 		onDismiss,
-		dismissAriaLabel: `Remove filter: ${accessibleName}`,
+		dismissAriaLabel: strings.removeFilter(accessibleName),
 		...rest,
 		children: [
 			/* @__PURE__ */ jsx(FieldLabel, { children: /* @__PURE__ */ jsx(TruncatedText, { children: field.label }) }),
-			isComplete && hasRule && /* @__PURE__ */ jsx(OperatorLabel, { children: getOperatorLabel(rule.operator, field.type) }),
-			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 })
@@ -3145,7 +3534,7 @@ const FilterPill = forwardRef(function FilterPill({ field, rule, onClick, onDism
 				hideArrow: true,
 				children: /* @__PURE__ */ jsx(OverflowTooltipList, {
 					id: overflowTooltipId,
-					"aria-label": "Additional values",
+					"aria-label": strings.additionalValues,
 					children: overflowValues.map((entry, index) => /* @__PURE__ */ jsx("li", { children: entry }, `${entry}-${index}`))
 				})
 			})] })
@@ -3154,13 +3543,10 @@ const FilterPill = forwardRef(function FilterPill({ field, rule, onClick, onDism
 });
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/FilterPopover/FilterPopover.tsx
-/**
-* Compact value controls fit the minimum width; wider controls can grow
-* up to 320px without overflowing, or 520px when the popover is `wide`.
-*/
+/** Wide controls size to their content while retaining a viewport gutter. */
 const POPOVER_MIN_WIDTH = "196px";
 const POPOVER_MAX_WIDTH = "320px";
-const POPOVER_WIDE_MAX_WIDTH = "520px";
+const POPOVER_WIDE_MAX_WIDTH = `calc(100vw - ${Spacing[4]} - ${Spacing[4]})`;
 const OperatorMenu = styled(DropdownMenu_default)`
   && {
     background-color: ${({ theme }) => semanticColor(theme, "SurfaceElevated", theme.color.background.primary)};
@@ -3168,7 +3554,7 @@ const OperatorMenu = styled(DropdownMenu_default)`
 `;
 const PopoverPanel = styled(Stack).attrs({ spacing: Spacing[0] })`
   min-width: ${POPOVER_MIN_WIDTH};
-  max-width: ${({ $wide }) => $wide ? POPOVER_WIDE_MAX_WIDTH : POPOVER_MAX_WIDTH};
+  max-width: ${({ $wide }) => $wide ? "none" : POPOVER_MAX_WIDTH};
   /* The design-system Popover.Card already supplies bg, border, shadow,
      and 6px corner radius — we just constrain the inner content. */
 `;
@@ -3270,9 +3656,10 @@ const Footer = styled(HStack).attrs({
 * back through `onChangeOperator` and forwards open/close transitions
 * through Radix's controlled props.
 */
-const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, onClose, trigger, open, onOpenChange, size, wide = false }) => {
+const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, onClose, onApply, trigger, open, onOpenChange, size, wide = false }) => {
+	const strings = usePDSStrings();
 	const resolvedSize = useFilterBarSize(size);
-	const valueless = isValuelessOperator(operator);
+	const valueless = isValuelessOperator(operator, field);
 	const CaretIcon = resolvedSize === "sm" ? CaretDownIcon$1 : CaretDownIcon;
 	const InfoIcon = resolvedSize === "sm" ? CircleInfoIcon$1 : CircleInfoIcon;
 	const showOperatorSelector = fieldHasMultipleOperators(field);
@@ -3282,6 +3669,7 @@ const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, on
 		if (!next) onClose();
 	}, [onOpenChange, onClose]);
 	const valueSlotRef = useRef(null);
+	const applyButtonRef = useRef(null);
 	useEffect(() => {
 		if (open !== true || valueless) return;
 		const handle = requestAnimationFrame(() => {
@@ -3295,16 +3683,19 @@ const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, on
 		field.id,
 		valueless
 	]);
-	const handleKeyDown = (event) => {
-		if (event.key !== "Enter") return;
+	const handleKeyDown = useCallback((event) => {
+		if (event.key !== "Enter" || event.defaultPrevented || event.nativeEvent.isComposing) return;
 		const target = event.target;
 		if (!target || target.tagName !== "INPUT") return;
 		const input = target;
-		if (input.type === "checkbox" || input.type === "radio") return;
-		if (input.getAttribute("role") === "combobox") return;
+		if (input.type === "checkbox" || input.type === "radio" || input.getAttribute("role") === "combobox") return;
 		event.preventDefault();
+		if (applyButtonRef.current != null) {
+			applyButtonRef.current.click();
+			return;
+		}
 		handleOpenChange(false);
-	};
+	}, [handleOpenChange]);
 	return /* @__PURE__ */ jsxs(Popover_default, {
 		open,
 		onOpenChange: handleOpenChange,
@@ -3316,39 +3707,55 @@ const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, on
 			sideOffset: 4,
 			avoidCollisions: true,
 			zIndex: Z_INDICES.floatingBar,
-			"aria-label": `Edit filter for ${field.label}`,
+			"aria-label": strings.editFilterFor(field.label),
 			noPadding: true,
+			style: wide ? {
+				width: "max-content",
+				maxWidth: POPOVER_WIDE_MAX_WIDTH
+			} : void 0,
 			children: /* @__PURE__ */ jsxs(PopoverPanel, {
 				$wide: wide,
 				onKeyDown: handleKeyDown,
 				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": "Operator",
+							children: [/* @__PURE__ */ jsx(FieldTypeLabel, {
 								$size: resolvedSize,
-								children: [getOperatorLabel(operator, field.type), /* @__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)
-							}, op))
-						}) : /* @__PURE__ */ jsx("span", { children: getOperatorLabel(operator, field.type) })]
-					}), !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 ",
@@ -3416,11 +3823,12 @@ const CountChip = styled.span`
 */
 const RulesPill = forwardRef(function RulesPill({ compound, enabled, onClick, isOpen = false, "aria-label": ariaLabel, "data-test": dataTest, size, ...rest }, ref) {
 	const resolvedSize = useFilterBarSize(size);
+	const strings = usePDSStrings();
 	if (!enabled) return null;
 	const count = countRules(compound);
 	const hasCount = count > 0;
 	const variant = isOpen ? "active" : "default";
-	const accessibleName = hasCount ? `Rules ${count}` : "Rules";
+	const accessibleName = hasCount ? strings.rulesWithCount(count) : strings.rules;
 	return /* @__PURE__ */ jsxs(PillShell, {
 		ref,
 		variant,
@@ -3430,7 +3838,7 @@ const RulesPill = forwardRef(function RulesPill({ compound, enabled, onClick, is
 		"data-test": dataTest ?? "rules-pill__trigger",
 		"aria-expanded": isOpen,
 		...rest,
-		children: [/* @__PURE__ */ jsx(Label, { children: "Rules" }), hasCount && /* @__PURE__ */ jsx(CountChip, {
+		children: [/* @__PURE__ */ jsx(Label, { children: strings.rules }), hasCount && /* @__PURE__ */ jsx(CountChip, {
 			$variant: variant,
 			$size: resolvedSize,
 			"data-test": "rules-pill__count",
@@ -3465,6 +3873,10 @@ function isEmptyState(state) {
 const OPERATOR_SET = new Set([
 	"is",
 	"is_not",
+	"gt",
+	"gte",
+	"lt",
+	"lte",
 	"contains",
 	"does_not_contain",
 	"is_empty",
@@ -3503,7 +3915,7 @@ function isFilterRule(value) {
 	if (typeof value !== "object" || value == null) return false;
 	const v = value;
 	if (typeof v.fieldId !== "string" || v.fieldId.length === 0) return false;
-	if (typeof v.operator !== "string" || !OPERATOR_SET.has(v.operator)) return false;
+	if (typeof v.operator !== "string" || !OPERATOR_SET.has(v.operator) && !/^custom:.+/.test(v.operator)) return false;
 	if (!isFilterRuleValue(v.value)) return false;
 	return true;
 }
@@ -3579,7 +3991,7 @@ function pruneToRegistry(state, registry) {
 */
 function coerceBooleanRule(rule, registry) {
 	const field = registry.get(rule.fieldId);
-	if (!field || field.type !== "boolean") return rule;
+	if (!field || field.condition != null || field.type !== "boolean") return rule;
 	if (rule.operator === "is_true") return {
 		...rule,
 		operator: "is",
@@ -3609,9 +4021,16 @@ function coerceBooleanRules(state, registry) {
 	};
 }
 function isDraftRuleValue(rule, registry) {
-	if (isValuelessOperator(rule.operator)) return false;
 	const field = registry.get(rule.fieldId);
 	if (!field) return false;
+	const config = getConditionOperator(field, rule.operator);
+	if (config != null) switch (config.valueType) {
+		case "none":
+		case "boolean": return false;
+		case "string_array": return Array.isArray(rule.value) && rule.value.length === 0;
+		default: return rule.value === "" || rule.value == null;
+	}
+	if (isValuelessOperator(rule.operator)) return false;
 	if (isRangeOperator(rule.operator)) return !isCompleteDateRange(rule.value);
 	switch (field.type) {
 		case "multi_choices":
@@ -3624,8 +4043,10 @@ function isDraftRuleValue(rule, registry) {
 	}
 }
 function isRuleAllowed(rule, registry, options = { allowDraftValues: false }) {
-	if (!registry.has(rule.fieldId)) return false;
+	const field = registry.get(rule.fieldId);
+	if (field == null) return false;
 	if (!registry.operatorsFor(rule.fieldId).includes(rule.operator)) return false;
+	if (field.condition != null) return hasCompleteConditionValue(rule, field) || options.allowDraftValues && isDraftRuleValue(rule, registry);
 	if (isValuelessOperator(rule.operator)) return rule.value == null;
 	if (options.allowDraftValues && isDraftRuleValue(rule, registry)) return true;
 	if (isRangeOperator(rule.operator)) return isCompleteDateRange(rule.value);
@@ -3652,6 +4073,8 @@ function isRuleAllowed(rule, registry, options = { allowDraftValues: false }) {
 * does not gate operator vocabulary or registry membership.
 */
 function hasCompleteValue(rule, registry) {
+	const field = registry.get(rule.fieldId);
+	if (field?.condition != null) return hasCompleteConditionValue(rule, field);
 	if (isValuelessOperator(rule.operator)) return rule.value == null;
 	const { value } = rule;
 	if (value == null) return false;
@@ -3755,20 +4178,22 @@ function useFilterStateV2(options) {
 					...prev.all,
 					topLevelRules: [...prev.all.topLevelRules, added]
 				},
-				heldIds: isHeldRule(added) ? withId(prev.heldIds, id) : prev.heldIds
+				heldIds: registry.get(rule.fieldId)?.condition != null || isHeldRule(added, registry) ? withId(prev.heldIds, id) : prev.heldIds
 			}));
 			return id;
-		}, []),
-		updateTopLevelRule: useCallback((id, rule) => {
+		}, [registry]),
+		updateTopLevelRule: useCallback((id, update) => {
 			setInternal((prev) => {
 				const idx = prev.all.topLevelRules.findIndex((r) => r.id === id);
-				if (idx < 0) return prev;
+				const currentRule = prev.all.topLevelRules[idx];
+				if (currentRule == null) return prev;
+				const rule = typeof update === "function" ? update(currentRule) : update;
 				const topLevelRules = [...prev.all.topLevelRules];
 				topLevelRules[idx] = {
 					...rule,
 					id
 				};
-				const heldIds = isHeldRule(rule) ? withId(prev.heldIds, id) : withoutId(prev.heldIds, id);
+				const heldIds = isHeldRule(rule, registry) ? withId(prev.heldIds, id) : withoutId(prev.heldIds, id);
 				return {
 					all: {
 						...prev.all,
@@ -3777,7 +4202,7 @@ function useFilterStateV2(options) {
 					heldIds
 				};
 			});
-		}, []),
+		}, [registry]),
 		removeTopLevelRule: useCallback((id) => {
 			setInternal((prev) => {
 				const topLevelRules = prev.all.topLevelRules.filter((r) => r.id !== id);
@@ -3798,7 +4223,8 @@ function useFilterStateV2(options) {
 * `''` and `[]` are values a user can choose, and a filter cleared to one is
 * still a filter.
 */
-function isHeldRule(rule) {
+function isHeldRule(rule, registry) {
+	if (registry.get(rule.fieldId)?.condition != null) return !hasCompleteValue(rule, registry);
 	return !isValuelessOperator(rule.operator) && rule.value == null;
 }
 function heldRulesOf(state) {
@@ -3978,6 +4404,7 @@ function useStableFieldIds(fieldIds) {
 	return stable.current;
 }
 function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = true, relativeDatesEnabled = false, dateTimesEnabled = false, singleUseFields = false, size = "md", valueControlResolver }) {
+	const strings = usePDSStrings();
 	const filterState = useFilterStateV2({
 		registry,
 		initialState,
@@ -3991,6 +4418,7 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 		onChangeRef.current = onChange;
 	}, [onChange]);
 	const { committedState } = filterState;
+	const committedRuleIds = useMemo(() => new Set(committedState.topLevelRules.map((rule) => rule.id)), [committedState.topLevelRules]);
 	const lastReportedState = useRef(committedState);
 	useEffect(() => {
 		if (isEqual(lastReportedState.current, committedState)) return;
@@ -3999,13 +4427,15 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 	}, [committedState]);
 	const pendingEditRuleIdRef = useRef(null);
 	const openedViaScrollIntoViewRef = useRef(false);
-	const handlePickField = (field) => {
-		pendingEditRuleIdRef.current = filterState.addTopLevelRule({
+	const { addTopLevelRule } = filterState;
+	const handlePickField = useCallback((field) => {
+		const operator = registry.defaultOperatorFor(field.id);
+		pendingEditRuleIdRef.current = addTopLevelRule({
 			fieldId: field.id,
-			operator: registry.defaultOperatorFor(field.id),
-			value: null
+			operator,
+			value: field.condition != null ? emptyValueForRule(field, operator) : null
 		});
-	};
+	}, [addTopLevelRule, registry]);
 	const hasPills = filterState.state.topLevelRules.length > 0;
 	const excludeFieldIds = useStableFieldIds(singleUseFields ? filterState.state.topLevelRules.map((rule) => rule.fieldId) : void 0);
 	const pillsScrollRef = useRef(null);
@@ -4083,7 +4513,7 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 		value: { size },
 		children: /* @__PURE__ */ jsxs(Bar, {
 			role: "toolbar",
-			"aria-label": "Filter bar",
+			"aria-label": strings.filterBar,
 			children: [filterState.advancedRulesEnabled ? /* @__PURE__ */ jsx(AdvancedFilterRulesPopover, {
 				registry,
 				dateTimesEnabled,
@@ -4153,6 +4583,7 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 								dateTimesEnabled
 							}, valueControlResolver),
 							onClose: () => setEditingRuleId(null),
+							onApply: field.condition != null && !committedRuleIds.has(rule.id) && hasCompleteValue(rule, registry) ? () => filterState.updateTopLevelRule(rule.id, (currentRule) => currentRule) : void 0,
 							open: isOpen,
 							onOpenChange: (open) => setEditingRuleId(open ? rule.id : null),
 							trigger: /* @__PURE__ */ jsx(FilterPill, {
@@ -4161,7 +4592,7 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 									else pillNodesRef.current.delete(rule.id);
 								},
 								field,
-								rule,
+								rule: field.condition != null && !committedRuleIds.has(rule.id) ? null : rule,
 								variant: isOpen ? "active" : "default",
 								optionLabels,
 								onDismiss: () => filterState.removeTopLevelRule(rule.id)
@@ -4327,7 +4758,10 @@ var FieldRegistry = class {
 	}
 	/** Default operator for a registered field. Used when creating a new pill. */
 	defaultOperatorFor(fieldId) {
-		const [defaultOperator] = getOperatorsForField(this.getOrThrow(fieldId));
+		const field = this.getOrThrow(fieldId);
+		const operators = getOperatorsForField(field);
+		const defaultOperator = field.condition?.defaultOperator ?? operators[0];
+		if (defaultOperator != null && !operators.includes(defaultOperator)) throw new Error(`FieldRegistry: default operator is not available for field "${fieldId}"`);
 		if (defaultOperator == null) throw new Error(`FieldRegistry: no operators available for field "${fieldId}"`);
 		return defaultOperator;
 	}
@@ -4498,4 +4932,4 @@ function decodeBase64(input) {
 //#endregion
 export { TableControlsProvider as A, getOperatorsForType as C, reconcileValueForOperator as D, isValuelessOperator as E, ControlBar as F, DataTableCompactBar as I, TableViewConfiguration as M, TableViewConfigurationDropdown as N, dateRuleIntent as O, TableControls as P, getOperatorsForField as S, isRangeOperator as T, FILTER_SIZE_TOKENS as _, encodeFilterStateToUrlParam as a, emptyValueForRule as b, FilterBar_default as c, isFilterStateV2 as d, pruneToRegistry as f, resolveValueControl as g, PillShell as h, decodeFilterStateFromUrl as i, useTableControls as j, TableControlsContext as k, useFilterStateV2 as l, isEmptyState as m, applyFilterStateToSearchParams as n, FieldRegistry as o, EMPTY_FILTER_STATE as p, decodeFilterStateFromString as r, buildFieldRegistry as s, FILTER_STATE_URL_PARAM as t, hasCompleteValue as u, useFilterBarSize as v, isCompleteDateRange as w, getDefaultOperatorForType as x, resolveDateRangeRuleValue as y };
 
-//# sourceMappingURL=TableControls-CqW_nyBY.mjs.map
+//# sourceMappingURL=TableControls-BtKBTGYR.mjs.map