@persona/design-system 0.9.1 → 0.10.1

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

@@ -1,36 +1,37 @@
 import { a as styled, n as createGlobalStyle, r as css } from "./styledComponentsInterop-NxwFjeA4.mjs";
-import { isActive, isDisabled, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
+import { c as usePDSLocale, i as formatDateTime, l as usePDSStrings, u as DEFAULT_COMMON_STRINGS } from "./i18n-BscB9FUy.mjs";
+import { TruncatedText } from "./lib/TruncatedText.mjs";
 import { semanticColor, semanticOnly, semanticTokens } from "./lib/semanticColor.mjs";
-import { focusOutline, focusWithinOutline } from "./mixins/focus.mjs";
-import "./variables/transitions.mjs";
-import { transparent, withAlpha } from "./lib/color.mjs";
-import { semanticScrollbar } from "./mixins/scrollbar.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
-import { c as usePDSLocale, i as formatDateTime, l as usePDSStrings, u as DEFAULT_COMMON_STRINGS } from "./i18n-CeRarJIa.mjs";
-import { TruncatedText } from "./lib/TruncatedText.mjs";
 import { t as Card_default } from "./Card-BXNxWX5C.mjs";
 import { t as Spacer_default } from "./Spacer-J_HuhxX2.mjs";
 import { i as Paragraph, r as Label$1 } from "./Text-CSwFifQF.mjs";
-import { a as Tooltip } from "./Tooltip-DogEteGl.mjs";
+import "./variables/transitions.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-BkC7FCdF.mjs";
-import { n as Button, t as IconButton } from "./IconButton-D4awF770.mjs";
-import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-w_gxXSwA.mjs";
-import { r as InputGroup } from "./Input-DD4jzJhK.mjs";
+import { n as Button, t as IconButton } from "./IconButton-HWx5Hlmi.mjs";
+import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-SX8E9-Bk.mjs";
+import { r as InputGroup } from "./Input-Dap055xf.mjs";
 import Input_default from "./components/Input/index.mjs";
-import { c as MenuList, s as MenuItem } from "./Menu-DlN0A5Nb.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-CPE8Q56k.mjs";
-import { t as Combobox } from "./Combobox-CsXnJKvB.mjs";
-import { s as Popover_default } from "./Popover-DewrGOJB.mjs";
-import { i as Modal_default } from "./Modal-Cs5cZpEr.mjs";
-import { t as Toggle } from "./Toggle-C9cZnajR.mjs";
-import { i as selectedPresetFor, n as parseDateFilterValue, r as resolveDateFilterValue, t as formatDateFilterValue } from "./date-filter-CWgCXz85.mjs";
-import { t as ListBox } from "./ListBox-BhWLad_L.mjs";
-import { m as FormField, o as ComboboxField } from "./FormField-DjysBTKn.mjs";
-import { r as DatePicker, t as DateRangePicker } from "./DatePicker-DQHVCGnP.mjs";
+import { c as MenuList, s as MenuItem } from "./Menu-Dw6Rcpk6.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-CedsmO5h.mjs";
+import { t as Combobox } from "./Combobox-CcFJo68g.mjs";
+import { n as Select, r as SelectHeader, t as Option } from "./Select-BJ9ACmRD.mjs";
+import { s as Popover_default } from "./Popover-BcII7usF.mjs";
+import { i as Modal_default } from "./Modal-kjUptzg1.mjs";
+import { r as DateRangePicker, t as DatePicker } from "./DatePicker-D0cvVbzq.mjs";
+import { t as ListBox } from "./ListBox-eoyBHtnJ.mjs";
+import { i as selectedPresetFor, n as parseDateFilterValue, r as resolveDateFilterValue, t as formatDateFilterValue } from "./date-filter-D0ys8s0D.mjs";
+import { m as FormField, o as ComboboxField } from "./FormField-C4B2qFgh.mjs";
+import { t as Toggle } from "./Toggle-BsqSNYok.mjs";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
 import { Fragment, createContext, createElement, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -45,9 +46,9 @@ import { DragIcon as DragIcon$1 } from "@persona/icons/24px";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { DndContext, PointerSensor, closestCenter, pointerWithin, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, horizontalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
-import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 import { parseAbsolute, parseDate, toCalendarDate, toZoned } from "@internationalized/date";
 import { v4 } from "uuid";
+import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 //#region components/DataTable/FormControlLabel/FormControlLabel.ts
 const FormControlLabel = styled(Label$1).attrs(() => ({
 	size: "md",
@@ -403,9 +404,10 @@ const TabOverflowContainer = styled.div`
   position: absolute;
   height: 32px;
 `;
-const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditViews, handleNameChange, onDuplicateView, onRequestDeleteView, onSelectView, onResetCurrentView, onSaveView, onSetDefaultView, onViewHiddenChange, onHideView, onKeyboardMove, isHidden = false, isViewDirty, showTabContextMenu, setShowTabContextMenu, className, ...rest }) => {
+const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditViews, handleNameChange, onDuplicateView, onRequestDeleteView, onSelectView, onResetCurrentView, onSaveView, onRequestSetDefaultView, onRequestUnsetDefaultView, onViewHiddenChange, onHideView, onKeyboardMove, isHidden = false, isViewDirty, showTabContextMenu, setShowTabContextMenu, className, ...rest }) => {
 	const strings = usePDSStrings();
 	const showMenu = selected && (canEditViews || !!onViewHiddenChange);
+	const onRequestDefaultViewChange = view.isDefault ? onRequestUnsetDefaultView : onRequestSetDefaultView;
 	const inputRef = useRef(null);
 	const lastSubmittedNameRef = useRef(null);
 	const submitNameChange = (newName) => {
@@ -491,16 +493,15 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 						onKeyDown: enterProxiesClick,
 						children: strings.saveViewMenuItem
 					}),
-					canEditViews && onSetDefaultView && /* @__PURE__ */ jsx(MenuItem, {
-						id: "table-controls__view__menu-set-default",
+					canEditViews && onRequestDefaultViewChange && /* @__PURE__ */ jsx(MenuItem, {
+						id: `table-controls__view__menu-${view.isDefault ? "unset" : "set"}-default`,
 						prefixIcon: /* @__PURE__ */ jsx(StarIcon, {}),
-						disabled: view.isDefault,
-						onClick: async () => {
-							await onSetDefaultView(view.id);
+						onClick: () => {
 							setShowTabContextMenu(false);
+							onRequestDefaultViewChange(view);
 						},
 						onKeyDown: enterProxiesClick,
-						children: view.isDefault ? strings.alreadyDefaultView : strings.setAsDefaultView
+						children: view.isDefault ? strings.unsetDefaultView : strings.setAsDefaultView
 					}),
 					onViewHiddenChange && /* @__PURE__ */ jsx(MenuItem, {
 						id: "table-controls__view__menu-toggle-hidden",
@@ -670,24 +671,26 @@ const ProductTourStyles = createGlobalStyle`
     }
   }
 `;
-const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewIds, onAddView, onDuplicateView, onDeleteView, onViewNameChange, onReorderViews, onViewHiddenChange, onSaveView, onSetDefaultView, isViewDirty, canEditViews, showFilters, setShowFilters, searchProps, filtersId, propertiesButton, tableActions, isLoading, isFilterPanelLoading, showViews, selectedRows = [], bulkActions, onResetCurrentView, onClearSelection, title, "data-tour-target": dataTourTarget, compact, onError, filterPanel }) => {
+const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewIds, onAddView, onDuplicateView, onDeleteView, onViewNameChange, onReorderViews, onViewHiddenChange, onSaveView, onSetDefaultView, onUnsetDefaultView, isViewDirty, canEditViews, showFilters, setShowFilters, searchProps, filtersId, propertiesButton, tableActions, isLoading, isFilterPanelLoading, showViews, selectedRows = [], bulkActions, onResetCurrentView, onClearSelection, title, "data-tour-target": dataTourTarget, compact, onError, filterPanel }) => {
 	const strings = usePDSStrings();
 	const tabListRef = useRef(null);
 	const tabOverflowRef = useRef(null);
 	const [overflowViews, setOverflowViews] = useState([]);
 	const [showTabContextMenu, setShowTabContextMenu] = useState(false);
-	const [pendingDeleteView, setPendingDeleteView] = useState(null);
-	const previousPendingDeleteViewRef = useRef(null);
-	const [isDeletingView, setIsDeletingView] = useState(false);
+	const [viewAction, setViewAction] = useState(null);
+	const pendingViewAction = viewAction?.isOpen ? viewAction : null;
+	const previousPendingViewRef = useRef(null);
+	const isChangingViewRef = useRef(false);
+	const [isChangingView, setIsChangingView] = useState(false);
 	const [isAddingView, setIsAddingView] = useState(false);
 	const [overflowLeft, setOverflowLeft] = useState(null);
 	const [tabOverflowWidth, setTabOverflowWidth] = useState(null);
 	const [isAddViewOverflowing, setIsAddViewOverflowing] = useState(false);
 	useEffect(() => {
-		const previousPendingDeleteView = previousPendingDeleteViewRef.current;
-		if (!pendingDeleteView && previousPendingDeleteView) (document.getElementById(`${OVERFLOW_TAB_ID_PREFIX}${previousPendingDeleteView.id}`) ?? document.getElementById(`${TAB_ID_PREFIX}${previousPendingDeleteView.id}`))?.focus({ preventScroll: true });
-		previousPendingDeleteViewRef.current = pendingDeleteView;
-	}, [pendingDeleteView]);
+		const previousPendingView = previousPendingViewRef.current;
+		if (!pendingViewAction && previousPendingView) (document.getElementById(`${OVERFLOW_TAB_ID_PREFIX}${previousPendingView.id}`) ?? document.getElementById(`${TAB_ID_PREFIX}${previousPendingView.id}`))?.focus({ preventScroll: true });
+		previousPendingViewRef.current = pendingViewAction?.view ?? null;
+	}, [pendingViewAction]);
 	const [shownViews, hiddenViews] = useMemo(() => {
 		const hiddenIds = new Set(hiddenViewIds);
 		const allViews = views ?? [];
@@ -826,15 +829,65 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 	const handleNameChange = (view, newName) => {
 		if (canEditViews && view.name !== newName) onViewNameChange?.(view.id, newName);
 	};
-	const onRequestDeleteView = onDeleteView ? (view) => setPendingDeleteView(view) : void 0;
-	const confirmDeleteView = async () => {
-		if (!pendingDeleteView || !onDeleteView) return;
-		setIsDeletingView(true);
+	const onRequestDeleteView = onDeleteView ? (view) => setViewAction({
+		view,
+		action: "delete",
+		isOpen: true
+	}) : void 0;
+	const onRequestSetDefaultView = onSetDefaultView ? (view) => setViewAction({
+		view,
+		action: "set-default",
+		isOpen: true
+	}) : void 0;
+	const onRequestUnsetDefaultView = onUnsetDefaultView ? (view) => setViewAction({
+		view,
+		action: "unset-default",
+		isOpen: true
+	}) : void 0;
+	const getViewActionConfig = (action) => {
+		switch (action) {
+			case "set-default": return {
+				title: strings.setDefaultViewTitle,
+				confirmation: strings.setDefaultViewConfirmation,
+				label: strings.setAsDefaultView,
+				onConfirm: onSetDefaultView
+			};
+			case "unset-default": return {
+				title: strings.unsetDefaultViewTitle,
+				confirmation: strings.unsetDefaultViewConfirmation,
+				label: strings.unsetDefaultView,
+				onConfirm: onUnsetDefaultView
+			};
+			case "delete": return {
+				title: strings.deleteViewTitle,
+				confirmation: strings.deleteViewConfirmation,
+				label: strings.delete,
+				onConfirm: onDeleteView
+			};
+		}
+	};
+	const displayedActionConfig = getViewActionConfig(viewAction?.action ?? "delete");
+	const closeViewAction = () => {
+		setViewAction((previous) => previous && {
+			...previous,
+			isOpen: false
+		});
+	};
+	const confirmViewAction = async () => {
+		if (!pendingViewAction || isChangingViewRef.current) return;
+		const onConfirm = getViewActionConfig(pendingViewAction.action).onConfirm;
+		if (!onConfirm) {
+			closeViewAction();
+			return;
+		}
+		isChangingViewRef.current = true;
+		setIsChangingView(true);
 		try {
-			await onDeleteView(pendingDeleteView.id);
-			setPendingDeleteView(null);
+			await onConfirm(pendingViewAction.view.id);
+			closeViewAction();
 		} catch {} finally {
-			setIsDeletingView(false);
+			isChangingViewRef.current = false;
+			setIsChangingView(false);
 		}
 	};
 	if (compact) return /* @__PURE__ */ jsx(CompactBar, {
@@ -891,7 +944,8 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 		onSelectView,
 		onResetCurrentView,
 		onSaveView,
-		onSetDefaultView,
+		onRequestSetDefaultView,
+		onRequestUnsetDefaultView,
 		onViewHiddenChange,
 		isViewDirty: isViewDirty ?? false,
 		selected: view.id === currentView,
@@ -968,7 +1022,8 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 				onRequestDeleteView,
 				onResetCurrentView,
 				onSaveView,
-				onSetDefaultView,
+				onRequestSetDefaultView,
+				onRequestUnsetDefaultView,
 				onViewHiddenChange,
 				onHideView: hideView,
 				isViewDirty: isViewDirty ?? false,
@@ -1019,444 +1074,438 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, hiddenViewI
 		}),
 		showFilters && filterPanel,
 		/* @__PURE__ */ jsx(Modal_default, {
-			open: pendingDeleteView != null,
+			open: pendingViewAction != null,
 			onOpenChange: (open) => {
-				if (!open && !isDeletingView) setPendingDeleteView(null);
+				if (!open && !isChangingViewRef.current) closeViewAction();
 			},
-			isKeyboardDismissDisabled: isDeletingView,
-			contentProps: isDeletingView ? { showCloseButton: false } : void 0,
-			title: strings.deleteViewTitle,
+			isKeyboardDismissDisabled: isChangingView,
+			contentProps: isChangingView ? { showCloseButton: false } : void 0,
+			title: displayedActionConfig.title,
 			footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
 				variant: "basic",
 				width: "auto",
-				disabled: isDeletingView,
-				onClick: () => setPendingDeleteView(null),
+				disabled: isChangingView,
+				onClick: () => {
+					if (!isChangingViewRef.current) closeViewAction();
+				},
 				children: strings.cancel
 			}), /* @__PURE__ */ jsx(Button, {
-				id: "table-controls__view__delete-confirm",
-				variant: "danger",
+				id: `table-controls__view__${viewAction?.action ?? "delete"}-confirm`,
+				variant: viewAction?.action === "delete" ? "danger" : "primary",
 				width: "auto",
-				isPending: isDeletingView,
-				onClick: confirmDeleteView,
-				children: strings.delete
+				isPending: isChangingView,
+				onClick: confirmViewAction,
+				children: displayedActionConfig.label
 			})] }),
-			children: /* @__PURE__ */ jsx(Paragraph, { children: strings.deleteViewConfirmation(pendingDeleteView?.name ?? "") })
+			children: /* @__PURE__ */ jsx(Paragraph, { children: displayedActionConfig.confirmation(viewAction?.view.name ?? "") })
 		})
 	] });
 };
 //#endregion
-//#region components/DataTable/TableControls/TableControls.tsx
-const TableControls = ({ filterPanel, searchProps, defaultShowFilters, showFilters: controlledShowFilters, setShowFilters: controlledSetShowFilters, className, tableActions, propertiesButton, isLoading, isFilterPanelLoading, showViews, canEditViews, onSelectView, views, hiddenViewIds, currentView, onAddView, onViewNameChange, onReorderViews, onViewHiddenChange, onDuplicateView, onDeleteView, onSaveView, onSetDefaultView, isViewDirty, selectedRows, bulkActions, onClearSelection, title, presetViews, compact, columnConfigurationProps, showFiltersAlways = false, onError, "data-tour-target": dataTourTarget }) => {
-	const filtersId = useId();
-	const [internalShowFilters, internalSetShowFilters] = useState(defaultShowFilters ?? false);
-	const showFilters = controlledShowFilters != null ? controlledShowFilters : internalShowFilters;
-	const setShowFilters = controlledSetShowFilters != null ? controlledSetShowFilters : internalSetShowFilters;
-	const enhancedPropertiesButton = useMemo(() => {
-		if (!columnConfigurationProps && !propertiesButton) return;
-		const elements = [];
-		if (propertiesButton) elements.push(propertiesButton);
-		if (columnConfigurationProps) elements.push(/* @__PURE__ */ jsx(TableViewConfigurationDropdown, {
-			disabled: false,
-			...columnConfigurationProps
-		}, "column-config"));
-		if (elements.length === 1) return elements[0];
-		return /* @__PURE__ */ jsx(StyledEnhancedPropertiesButton, { children: elements });
-	}, [columnConfigurationProps, propertiesButton]);
-	return /* @__PURE__ */ jsx(Container, {
-		className,
-		children: /* @__PURE__ */ jsx(ControlBar, {
-			showViews: compact ? false : showViews,
-			views: compact ? void 0 : views,
-			hiddenViewIds: compact ? void 0 : hiddenViewIds,
-			onSelectView: compact ? void 0 : onSelectView,
-			currentView: compact ? void 0 : currentView,
-			onAddView: compact ? void 0 : onAddView,
-			onDeleteView: compact ? void 0 : onDeleteView,
-			onDuplicateView: compact ? void 0 : onDuplicateView,
-			onViewNameChange: compact ? void 0 : onViewNameChange,
-			onReorderViews: compact ? void 0 : onReorderViews,
-			onViewHiddenChange: compact ? void 0 : onViewHiddenChange,
-			onSaveView: compact ? void 0 : onSaveView,
-			onSetDefaultView: compact ? void 0 : onSetDefaultView,
-			isViewDirty,
-			canEditViews: compact ? false : canEditViews,
-			showFilters: showFilters && (showFiltersAlways || !isFilterPanelLoading),
-			setShowFilters: (filterPanel != null || isFilterPanelLoading) && !showFiltersAlways ? setShowFilters : void 0,
-			filtersId,
-			searchProps,
-			propertiesButton: enhancedPropertiesButton,
-			tableActions,
-			isLoading,
-			isFilterPanelLoading,
-			selectedRows,
-			bulkActions,
-			onClearSelection,
-			title,
-			"data-tour-target": dataTourTarget,
-			presetViews: compact ? void 0 : presetViews,
-			compact,
-			onError,
-			filterPanel
-		})
-	});
-};
-const Container = styled(Stack)`
-  margin-bottom: ${Spacing[2]};
-`;
-const StyledEnhancedPropertiesButton = styled.div`
-  display: flex;
-  gap: ${Spacing[1]};
-`;
+//#region components/DataTable/TableControls/TableControlsContext.ts
+const TableControlsContext = createContext({
+	filters: [],
+	activeFilters: [],
+	setActiveFilters: () => {}
+});
+function useTableControls() {
+	return useContext(TableControlsContext);
+}
+function TableControlsProvider({ children, ...value }) {
+	return createElement(TableControlsContext.Provider, { value }, children);
+}
 //#endregion
-//#region components/DataTable/dnd/StyledIconDrag.tsx
-const StyledIconDrag = styled(DragIcon$1)`
-  display: ${({ $shouldHide = false }) => $shouldHide ? "none" : "inline"};
-
-  ${({ $horizontal = false }) => $horizontal ? css`
-          transform: rotate(90deg);
-        ` : ""}
+//#region components/DataTable/TableControls/filters.tsx
+const SegmentedControl = styled.div`
+  display: grid;
+  grid-template-columns: min-content minmax(auto, max-content);
 
-  ${({ $active = false, $hover = false }) => $active ? css`
-          cursor: grabbing;
-          opacity: 1;
-        ` : $hover ? css`
-            cursor: grab;
-            opacity: 1;
-          ` : css`
-            cursor: normal;
-            opacity: 0.4;
-          `}
+  > *:first-child:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
 
-  transition: opacity 0.2s ease-in-out;
+  > *:last-child:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-left: -1px;
+  }
 
-  path {
-    stroke: ${({ theme }) => semanticColor(theme, "FgPrimary", Color.CoreSlate1000)};
-    stroke-width: 1px;
+  /* Segments overlap by a pixel, so lift the focused one to keep its outline on top. */
+  > *:focus-visible,
+  > *:has(:focus-visible) {
+    position: relative;
+    z-index: 1;
   }
 `;
-//#endregion
-//#region components/DataTable/dnd/utils.ts
-/**
-* reorder returns a reordered version of the inputed list by swapping the element
-* at startIndex with the one at endIndex
-*/
-function reorder(list, startIndex, endIndex) {
-	const result = Array.from(list);
-	const [removed] = result.splice(startIndex, 1);
-	result.splice(endIndex, 0, removed);
-	return result;
-}
-/**
-* Translates a drag result into indices into the full list. dnd reports positions among the
-* rendered rows, which diverge from the full list as soon as the view is filtered.
-*
-* Returns null when either end cannot be resolved, in which case the drag should be ignored
-* rather than applied at the wrong position.
-*/
-function resolveDragIndices(listKeys, renderedKeys, draggableId, destinationIndex) {
-	const destinationKey = renderedKeys[destinationIndex];
-	if (destinationKey == null) return null;
-	const from = listKeys.indexOf(draggableId);
-	const to = listKeys.indexOf(destinationKey);
-	return from === -1 || to === -1 ? null : {
-		from,
-		to
-	};
-}
-//#endregion
-//#region components/DataTable/TableControls/TableViewConfigurationDropdown.tsx
-const SHOWN_DROPPABLE_ID = "cases-view__configure-shown-columns";
-const startsCapitalized = (label) => {
-	const first = label.charAt(0);
-	return first !== "" && first === first.toUpperCase() && first !== first.toLowerCase();
-};
-const byLabel = (a, b) => {
-	const aCapitalized = startsCapitalized(a.label);
-	if (aCapitalized !== startsCapitalized(b.label)) return aCapitalized ? -1 : 1;
-	return a.label.localeCompare(b.label, void 0, { numeric: true });
-};
-const DndSection = styled("div")`
-  max-height: 400px;
+const AddFilterButton = styled(Button)`
+  opacity: 0;
+  color: ${({ theme }) => theme.color.text.secondary};
 
-  overflow: scroll;
-  ::-webkit-scrollbar {
-    display: none;
+  @media (hover: none) {
+    opacity: 1;
   }
-`;
-const DndItemWrapper = styled("div")`
-  background: white;
-  ${semanticOnly((tokens) => `background: ${tokens.SurfacePrimary};`)}
-  width: 100%;
-  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", theme.color.border.secondary)};
-  padding: ${Spacing[2]} ${Spacing[2]};
 
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: left;
-`;
-const SuffixContainer = styled("div")`
-  padding-left: ${Spacing[2]};
-  margin-left: auto;
-  align-self: center;
+  &:focus-visible {
+    opacity: 1;
+  }
 `;
-const SearchContainer = styled.div`
+const FiltersContainer = styled.div`
   display: flex;
-`;
-const StyledSearchInput = styled(SearchInput)`
+  flex-wrap: wrap;
+  gap: ${Spacing[2]};
   width: 100%;
+
+  &:hover {
+    ${AddFilterButton} {
+      opacity: 1;
+    }
+  }
 `;
-const PopoverCard$1 = styled(Card_default)`
-  width: 300px;
-  padding: ${Spacing[4]};
+const FilterCombobox = styled.div`
+  min-width: ${({ $compact }) => $compact ? "150px" : "200px"};
+  max-width: ${({ $compact, $multiple }) => $compact && !$multiple ? "150px" : "250px"};
+
+  ${({ $isFilterSelectSibling }) => $isFilterSelectSibling && css`
+      input[role='combobox'] {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    `}
 `;
-const TriggerIconButton = forwardRef(function TriggerIconButton({ disabled, ...elemProps }, ref) {
-	const strings = usePDSStrings();
-	return /* @__PURE__ */ jsx(Button, {
-		disabled,
-		width: "icon",
-		variant: "basic",
-		size: "md",
-		...elemProps,
-		ref,
-		"data-tour-target": "table-properties-button",
-		"aria-label": strings.tableProperties,
-		children: /* @__PURE__ */ jsx(SettingsIcon, {})
+const InputFilter = ({ config, compact, onActiveChange }) => {
+	const [value, setValue] = useState(config.value);
+	const onChangeRef = useRef(config.onChange);
+	onChangeRef.current = config.onChange;
+	const onActiveChangeRef = useRef(onActiveChange);
+	onActiveChangeRef.current = onActiveChange;
+	const debouncedOnChange = useMemo(() => debounce((nextValue) => {
+		onActiveChangeRef.current(nextValue.length > 0);
+		onChangeRef.current(nextValue);
+	}, 300), []);
+	useEffect(() => setValue(config.value), [config.value]);
+	useEffect(() => () => debouncedOnChange.cancel(), [debouncedOnChange]);
+	return /* @__PURE__ */ jsx(Input_default, {
+		"aria-label": config.name,
+		placeholder: config.placeholder,
+		size: compact ? "sm" : void 0,
+		value,
+		onChange: ({ target: { value: nextValue } }) => {
+			setValue(nextValue);
+			debouncedOnChange(nextValue);
+		}
 	});
-});
-const TooltipButtonWrapper = styled("div")`
-  display: inline-block;
-`;
-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 ?? strings.configureViewPermissionDenied
-	}) : /* @__PURE__ */ jsxs(Popover_default, { children: [/* @__PURE__ */ jsx(Popover_default.Trigger, {
-		asChild: true,
-		children: /* @__PURE__ */ jsx(TriggerIconButton, {
-			disabled: false,
-			size,
-			variant
-		})
-	}), /* @__PURE__ */ jsx(Popover_default.Content, {
-		style: { zIndex: Z_INDICES.dropdown },
-		sideOffset: 8,
-		side: "bottom",
-		align: "end",
-		children: /* @__PURE__ */ jsx(PopoverCard$1, {
-			elevated: true,
-			children: /* @__PURE__ */ jsx(TableViewConfiguration, { ...props })
-		})
-	})] });
 };
-const TableViewConfiguration = ({ columnConfiguration, attributeOptions, updateColumnConfiguration, getColumnDisabled, sortByRelevance = false }) => {
+const SelectFilter = ({ config, compact, onActiveChange }) => {
 	const strings = usePDSStrings();
-	const [searchTerm, setSearchTerm] = useState("");
-	const fuse = useMemo(() => {
-		return new Fuse(attributeOptions, sortByRelevance ? {
-			shouldSort: true,
-			threshold: .3,
-			ignoreLocation: true,
-			includeScore: true,
-			minMatchCharLength: 1,
-			keys: [{
-				name: "label",
-				weight: 1
-			}]
-		} : {
-			shouldSort: false,
-			threshold: .4,
-			location: 0,
-			distance: 100,
-			minMatchCharLength: 1,
-			keys: [{
-				name: "label",
-				weight: 1
-			}]
+	return /* @__PURE__ */ jsx(Select, {
+		"aria-label": config.name,
+		placeholder: config.placeholder ?? strings.selectFilterOption,
+		value: config.value,
+		width: "auto",
+		minWidth: 150,
+		size: compact ? "sm" : void 0,
+		onValueChange: (value) => {
+			onActiveChange(Boolean(value));
+			config.onChange(value);
+		},
+		portal: true,
+		children: config.options.map((option) => /* @__PURE__ */ jsx(Option, {
+			value: option.value,
+			children: option.label ?? option.value
+		}, option.value))
+	});
+};
+const builtInDefinitions = {
+	input: {
+		render: ({ config, compact, onActiveChange }) => {
+			if (config.type !== "input") return null;
+			return /* @__PURE__ */ jsx(InputFilter, {
+				config,
+				compact,
+				onActiveChange
+			}, config.id);
+		},
+		isActive: (config) => config.type === "input" && Boolean(config.value),
+		clear: (config) => {
+			if (config.type === "input") if (config.onDelete) config.onDelete();
+			else config.onChange("");
+		}
+	},
+	select: {
+		render: ({ config, compact, onActiveChange }) => {
+			if (config.type !== "select") return null;
+			return /* @__PURE__ */ jsx(SelectFilter, {
+				config,
+				compact,
+				onActiveChange
+			});
+		},
+		isActive: (config) => config.type === "select" && Boolean(config.value),
+		clear: (config) => config.type === "select" && config.onChange("")
+	},
+	multiselect: {
+		render: ({ config, compact, isFilterSelectSibling, onActiveChange }) => {
+			if (config.type !== "multiselect") return null;
+			return /* @__PURE__ */ jsx(FilterCombobox, {
+				$compact: compact,
+				$isFilterSelectSibling: isFilterSelectSibling,
+				$multiple: true,
+				children: /* @__PURE__ */ jsx(Combobox, {
+					"aria-label": config.name,
+					multiple: true,
+					options: config.options.map((option) => ({
+						...option,
+						label: option.label ?? option.value
+					})),
+					values: config.value,
+					onValuesChange: (values) => {
+						onActiveChange(values.length > 0);
+						config.onChange(values);
+					},
+					placeholder: config.placeholder,
+					size: compact ? "sm" : void 0,
+					truncate: true
+				})
+			});
+		},
+		isActive: (config) => config.type === "multiselect" && config.value.length > 0,
+		clear: (config) => config.type === "multiselect" && config.onChange([])
+	},
+	combobox: {
+		render: ({ config, compact, isFilterSelectSibling, onActiveChange }) => {
+			if (config.type !== "combobox") return null;
+			return /* @__PURE__ */ jsx(ComboboxFilter, {
+				config,
+				compact,
+				isFilterSelectSibling,
+				onActiveChange
+			});
+		},
+		isActive: (config) => config.type === "combobox" && (config.multiple ? Boolean(config.values?.length) : Boolean(config.value)),
+		clear: (config) => {
+			if (config.type === "combobox") if (config.multiple) config.onValuesChange?.([]);
+			else config.onChange?.(null);
+		}
+	},
+	daterange: {
+		render: ({ config, compact, onActiveChange }) => {
+			if (config.type !== "daterange") return null;
+			return /* @__PURE__ */ jsx(DateRangePicker, {
+				"aria-label": config.name,
+				dateRange: config.value,
+				label: null,
+				onChange: (range) => {
+					onActiveChange(range != null);
+					config.onChange(range);
+				},
+				showClear: false,
+				size: compact ? "sm" : void 0
+			});
+		},
+		isActive: (config) => config.type === "daterange" && Boolean(config.value?.startDate || config.value?.endDate),
+		clear: (config) => config.type === "daterange" && config.onChange(null)
+	}
+};
+const ComboboxFilter = ({ config, compact, isFilterSelectSibling, onActiveChange }) => {
+	if (config.multiple) {
+		const { id: _id, name: _name, type: _type, enabled: _enabled, disabledReason: _disabledReason, required: _required, onFilterSelect: _onFilterSelect, defaultVisible: _defaultVisible, group: _group, htmlId: _htmlId, ...comboboxProps } = config;
+		return /* @__PURE__ */ jsx(FilterCombobox, {
+			$compact: compact,
+			$isFilterSelectSibling: isFilterSelectSibling,
+			$multiple: true,
+			children: /* @__PURE__ */ jsx(Combobox, {
+				...comboboxProps,
+				"aria-label": config.name,
+				size: compact ? "sm" : void 0,
+				onValuesChange: (values) => {
+					onActiveChange(values.length > 0);
+					config.onValuesChange?.(values);
+				}
+			})
 		});
-	}, [attributeOptions, sortByRelevance]);
-	const allOptions = useMemo(() => union(attributeOptions, columnConfiguration), [attributeOptions, columnConfiguration]);
-	const filteredSearchOptions = useMemo(() => {
-		if (searchTerm === "") return allOptions;
-		const results = fuse.search(searchTerm);
-		if (!sortByRelevance) return results.map(({ item }) => item);
-		return [...results].sort((a, b) => (a.score ?? 0) - (b.score ?? 0) || byLabel(a.item, b.item)).map(({ item }) => item);
-	}, [
-		allOptions,
-		fuse,
-		searchTerm,
-		sortByRelevance
-	]);
-	const hiddenAttributes = useMemo(() => {
-		const columnConfigurationKeys = new Set(columnConfiguration.map((c) => c.key));
-		const hidden = filteredSearchOptions.filter((attribute) => !columnConfigurationKeys.has(attribute.key));
-		if (!sortByRelevance || searchTerm !== "") return hidden;
-		const [systemColumns, customFields] = partition(hidden, (a) => !a.isCustomField);
-		return [...systemColumns, ...[...customFields].sort(byLabel)];
-	}, [
-		columnConfiguration,
-		filteredSearchOptions,
-		sortByRelevance,
-		searchTerm
-	]);
-	const filteredShownAttributes = useMemo(() => {
-		return columnConfiguration.filter((column) => filteredSearchOptions.map((o) => o.key).includes(column.key));
-	}, [columnConfiguration, filteredSearchOptions]);
-	const handleDragEnd = (result, _provided) => {
-		const { destination, source } = result;
-		if (!destination || destination.droppableId === source.droppableId && destination.index === source.index) return;
-		const indices = resolveDragIndices(columnConfiguration.map((c) => c.key), filteredShownAttributes.map((c) => c.key), result.draggableId, destination.index);
-		if (!indices) return;
-		updateColumnConfiguration(reorder(columnConfiguration, indices.from, indices.to));
-	};
-	const generateShownAttributesToggle = (column) => () => {
-		updateColumnConfiguration(columnConfiguration.filter((a) => a.key !== column.key));
-	};
-	const generateHiddenAttributesToggle = (column) => () => {
-		updateColumnConfiguration(columnConfiguration.concat({
-			key: column.key,
-			label: column.label
-		}));
-	};
-	const shownColumnIds = useMemo(() => {
-		return columnConfiguration.map((c) => c.key);
-	}, [columnConfiguration]);
-	const shownDndItemProps = filteredShownAttributes.map((column, index) => {
-		const isDisabledByDefault = columnConfiguration.length === 1;
-		const isDisabledByCustom = getColumnDisabled?.(column.key, shownColumnIds) ?? false;
-		const shouldDisableDragForColumn = isDisabledByCustom && index === filteredShownAttributes.length - 1;
-		return {
-			column,
-			index,
-			isDisabled: isDisabledByDefault || isDisabledByCustom,
-			isToggled: true,
-			shouldDisableDrag: shouldDisableDragForColumn,
-			handleToggle: generateShownAttributesToggle(column)
-		};
+	}
+	const { id: _id, name: _name, type: _type, enabled: _enabled, disabledReason: _disabledReason, required: _required, onFilterSelect: _onFilterSelect, defaultVisible: _defaultVisible, group: _group, htmlId: _htmlId, ...comboboxProps } = config;
+	return /* @__PURE__ */ jsx(FilterCombobox, {
+		$compact: compact,
+		$isFilterSelectSibling: isFilterSelectSibling,
+		$multiple: false,
+		children: /* @__PURE__ */ jsx(Combobox, {
+			...comboboxProps,
+			"aria-label": config.name,
+			size: compact ? "sm" : void 0,
+			onChange: (value) => {
+				onActiveChange(Boolean(value));
+				config.onChange?.(value);
+			}
+		})
 	});
-	const hiddenDndItemProps = hiddenAttributes.map((column, index) => {
+};
+function resolveFilterTypeDefinition(config, filterResolver) {
+	return filterResolver?.(config) ?? builtInDefinitions[config.type];
+}
+function isFilterActive(config, filterResolver) {
+	return config.required === true || resolveFilterTypeDefinition(config, filterResolver)?.isActive(config) === true;
+}
+const getHighestId = (activeFilters) => activeFilters.reduce((highestId, filter) => Math.max(highestId, filter.id), 0);
+const getActiveFilters = (filters, activeFilters = [], includeDefaultVisible = false, filterResolver) => {
+	let currentId = getHighestId(activeFilters);
+	const activeByConfigId = new Map(activeFilters.flatMap((filter) => filter.config ? [[filter.config.id, filter]] : []));
+	return filters.filter((filter) => isFilterActive(filter, filterResolver) || includeDefaultVisible && filter.defaultVisible).map((filter) => {
 		return {
-			column,
-			index,
-			isToggled: false,
-			shouldDisableDrag: true,
-			handleToggle: generateHiddenAttributesToggle(column)
+			id: activeByConfigId.get(filter.id)?.id ?? ++currentId,
+			config: filter,
+			isConfiguring: false
 		};
+	}).sort((first, second) => first.id - second.id);
+};
+const createUnsetFilter = (activeFilters) => ({
+	id: getHighestId(activeFilters) + 1,
+	isConfiguring: true
+});
+const synchronizeActiveFilters = (filters, activeFilters, filterResolver) => {
+	if (filters.length === 0) return activeFilters.length === 0 ? activeFilters : [];
+	const refreshed = activeFilters.flatMap((active) => {
+		if (!active.config) return [active];
+		const config = filters.find((filter) => filter.id === active.config?.id);
+		if (config) return [{
+			...active,
+			config
+		}];
+		return active.isConfiguring ? [active] : [];
 	});
-	return /* @__PURE__ */ jsxs("div", { children: [
-		/* @__PURE__ */ jsx(Label$1, {
-			size: "lg",
-			weight: "bold",
-			children: strings.configureColumns
-		}),
-		/* @__PURE__ */ jsx(Spacer_default, { height: 2 }),
-		/* @__PURE__ */ jsx(SearchContainer, { children: /* @__PURE__ */ jsx(StyledSearchInput, {
-			title: null,
-			value: searchTerm,
-			handleInput: setSearchTerm,
-			size: "md",
-			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: strings.shownColumns }), /* @__PURE__ */ jsx(DragDropContext, {
-				onDragEnd: handleDragEnd,
-				children: /* @__PURE__ */ jsx(Droppable, {
-					droppableId: SHOWN_DROPPABLE_ID,
-					renderClone: (provided, _snapshot, rubric) => {
-						return /* @__PURE__ */ jsx("div", {
-							...provided.draggableProps,
-							...provided.dragHandleProps,
-							ref: provided.innerRef,
-							children: /* @__PURE__ */ jsx(AttributeDnd, { ...shownDndItemProps[rubric.source.index] })
-						});
-					},
-					children: (provided) => {
-						return /* @__PURE__ */ jsxs("div", {
-							ref: provided.innerRef,
-							...provided.droppableProps,
-							children: [shownDndItemProps.map((props, idx) => {
-								return /* @__PURE__ */ jsx(Draggable, {
-									draggableId: props.column.key,
-									index: idx,
-									isDragDisabled: props.shouldDisableDrag,
-									children: (provided) => {
-										return /* @__PURE__ */ jsx("div", {
-											ref: provided.innerRef,
-											...provided.draggableProps,
-											...provided.dragHandleProps,
-											children: /* @__PURE__ */ jsx(AttributeDnd, { ...props })
-										});
-									}
-								}, `${props.column.key}`);
-							}), provided.placeholder]
-						});
-					}
-				})
-			})] }),
-			/* @__PURE__ */ jsx(Spacer_default, { height: 2 }),
-			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 activeFromConfig = getActiveFilters(filters, refreshed, false, filterResolver);
+	const activeConfigIds = new Set(activeFromConfig.flatMap((active) => active.config ? [active.config.id] : []));
+	const retainedDefaultVisible = refreshed.filter((active) => active.config?.defaultVisible && !activeConfigIds.has(active.config.id));
+	const configuring = refreshed.filter((active) => active.isConfiguring && (!active.config || !activeConfigIds.has(active.config.id)));
+	const next = [
+		...activeFromConfig,
+		...retainedDefaultVisible,
+		...configuring
+	].sort((first, second) => first.id - second.id);
+	return next.length === 0 ? [createUnsetFilter(activeFilters)] : next;
 };
-const OverflowText = styled("div")`
-  max-width: 160px;
-  flex-wrap: wrap;
-  display: flex;
-`;
-const AttributeDnd = ({ column, index, isDisabled = false, isToggled, shouldDisableDrag, handleToggle }) => {
+const Filter = ({ config, compact, hideFilterSelection, filterResolver }) => {
+	const { activeFilters, setActiveFilters } = useTableControls();
 	const strings = usePDSStrings();
-	return /* @__PURE__ */ jsxs(DndItemWrapper, { children: [
-		/* @__PURE__ */ jsx(StyledIconDrag, {
-			$active: true,
-			$shouldHide: shouldDisableDrag
-		}),
-		/* @__PURE__ */ jsx(OverflowText, { children: /* @__PURE__ */ jsx(Paragraph, {
-			color: "primary",
-			size: "sm",
-			children: column.label
-		}) }),
-		/* @__PURE__ */ jsx(SuffixContainer, { children: /* @__PURE__ */ jsx(Toggle, {
-			value: isToggled,
-			disabled: isDisabled,
-			onChange: handleToggle,
-			"aria-label": isToggled ? strings.hideColumn(column.label) : strings.showColumn(column.label)
-		}) })
-	] }, `${column.key}-${index}`);
+	const definition = config ? resolveFilterTypeDefinition(config, filterResolver) : void 0;
+	const onActiveChange = (active) => {
+		setActiveFilters(activeFilters.map((filter) => filter.config?.id === config?.id ? {
+			...filter,
+			isConfiguring: !active
+		} : filter));
+	};
+	const content = config && definition?.render({
+		config,
+		compact,
+		isFilterSelectSibling: !hideFilterSelection,
+		onActiveChange
+	});
+	if (hideFilterSelection) return /* @__PURE__ */ jsx(Fragment$1, { children: content });
+	return /* @__PURE__ */ jsxs(SegmentedControl, {
+		id: config?.htmlId,
+		role: "group",
+		"aria-label": config?.name ? strings.filterGroupLabel(config.name) : strings.filter,
+		children: [/* @__PURE__ */ jsx(FilterSelection, {
+			value: config?.id,
+			disabled: config?.required,
+			compact,
+			filterResolver
+		}), content]
+	});
 };
-//#endregion
-//#region components/DataTable/TableControls/TableControlsContext.ts
-const TableControlsContext = createContext({
-	filters: [],
-	activeFilters: [],
-	setActiveFilters: () => {}
-});
-function useTableControls() {
-	return useContext(TableControlsContext);
-}
-function TableControlsProvider({ children, ...value }) {
-	return createElement(TableControlsContext.Provider, { value }, children);
-}
-//#endregion
-//#region components/DataTable/TableControls/FiltersV2/date-rule-intent.ts
-function dateRuleIntent(change, writesEnabled) {
-	if (change.source === "clear") return { kind: "clear" };
-	if (change.source === "calendar" || !writesEnabled) return change.range == null ? { kind: "clear" } : {
-		kind: "absolute",
-		range: change.range
+const FilterSelection = ({ value, disabled, compact, filterResolver }) => {
+	const strings = usePDSStrings();
+	const { filters, activeFilters, setActiveFilters } = useTableControls();
+	const options = useMemo(() => filters.filter((filter) => filter.id === value || !activeFilters.some((active) => active.config?.id === filter.id)).filter((filter) => !filter.group || filter.id === value || !activeFilters.some((active) => active.config?.group === filter.group && active.config?.id !== value)), [
+		activeFilters,
+		filters,
+		value
+	]);
+	const replaceFilter = (nextId) => {
+		const next = filters.find((filter) => filter.id === nextId);
+		const previous = filters.find((filter) => filter.id === value);
+		if (!next) return;
+		if (!value) {
+			setActiveFilters(activeFilters.map((active) => active.config ? active : {
+				...active,
+				config: next
+			}));
+			next.onFilterSelect?.();
+			return;
+		}
+		if (previous) resolveFilterTypeDefinition(previous, filterResolver)?.clear(previous);
+		setActiveFilters(activeFilters.map((active) => active.config?.id === value ? {
+			...active,
+			config: next,
+			isConfiguring: true
+		} : active));
+		next.onFilterSelect?.();
 	};
-	return {
-		kind: "relative",
-		preset: change.preset,
-		range: change.range
+	const removeFilter = () => {
+		const current = filters.find((filter) => filter.id === value);
+		if (current) resolveFilterTypeDefinition(current, filterResolver)?.clear(current);
+		setActiveFilters(activeFilters.filter((active) => active.config?.id !== value));
 	};
-}
+	return /* @__PURE__ */ jsx(Select, {
+		"aria-label": strings.filterType,
+		width: "auto",
+		minWidth: 120,
+		placeholder: strings.selectFilterType,
+		value,
+		size: compact ? "sm" : void 0,
+		disabled,
+		onValueChange: replaceFilter,
+		portal: true,
+		header: /* @__PURE__ */ jsx(SelectHeader, {
+			title: strings.filterType,
+			menuTriggerLabel: strings.filterActions,
+			menuItems: /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
+				onClick: removeFilter,
+				children: strings.deleteFilter
+			})
+		}),
+		children: options.map((filter) => {
+			const isDisabled = Boolean(filter.disabledReason) && filter.id !== value;
+			const option = /* @__PURE__ */ jsx(Option, {
+				value: filter.id,
+				disabled: isDisabled,
+				style: isDisabled ? { pointerEvents: "auto" } : void 0,
+				children: filter.name
+			}, filter.id);
+			return isDisabled ? /* @__PURE__ */ jsx(Tooltip, {
+				trigger: option,
+				side: "top",
+				children: filter.disabledReason
+			}, filter.id) : option;
+		})
+	});
+};
+const Filters = ({ compact, filterResolver, ...props }) => {
+	const strings = usePDSStrings();
+	const { filters, activeFilters, setActiveFilters } = useTableControls();
+	const hasNewFilter = activeFilters.some((filter) => !filter.config);
+	const hideFilterSelection = Boolean(compact && filters.length > 0 && filters.every((filter) => filter.required));
+	return /* @__PURE__ */ jsxs(FiltersContainer, {
+		...props,
+		children: [activeFilters.map((filter) => /* @__PURE__ */ jsx(Filter, {
+			config: filter.config,
+			compact,
+			hideFilterSelection,
+			filterResolver
+		}, filter.id)), /* @__PURE__ */ jsx(AddFilterButton, {
+			id: "table-controls__add-filter-button",
+			type: "button",
+			variant: "text",
+			width: "icon",
+			size: compact ? "sm" : "md",
+			"aria-label": strings.addFilter,
+			disabled: hasNewFilter || activeFilters.length >= filters.length,
+			onClick: () => setActiveFilters([...activeFilters, createUnsetFilter(activeFilters)]),
+			children: /* @__PURE__ */ jsx(CirclePlusIcon, {})
+		})]
+	});
+};
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/operators.ts
 /**
@@ -1799,27 +1848,8 @@ function reconcileValueForOperator(field, nextOperator, previousOperator, value)
 	return value ?? emptyValueForRule(field, nextOperator);
 }
 //#endregion
-//#region components/DataTable/TableControls/FiltersV2/date-range-rule-value.ts
-/**
-* The absolute bounds a rule should be queried with, or `null` when it does not
-* carry a date range.
-*
-* Relative metadata wins over the stored snapshot: the snapshot is a picture of
-* the window when it was saved, and the point of a relative rule is that the
-* window moves. The operator gate is part of this rather than the caller's job —
-* metadata only ever describes a range, so resolving it onto a scalar rule
-* would put a `{ startDate, endDate }` object where the wire expects a day.
-*/
-function resolveDateRangeRuleValue(rule, fieldType) {
-	if (!carriesDateRange(rule.operator, fieldType)) return null;
-	const relative = parseDateFilterValue(rule.relativeDate);
-	if (relative?.kind === "relative") return resolveDateFilterValue(relative);
-	const parsed = parseDateFilterValue(rule.value);
-	return parsed ? resolveDateFilterValue(parsed) : null;
-}
-//#endregion
-//#region components/DataTable/TableControls/FiltersV2/format-date-value.ts
-const TIME_COMPONENT = /T\d{2}:\d{2}/;
+//#region components/DataTable/TableControls/FiltersV2/format-date-value.ts
+const TIME_COMPONENT = /T\d{2}:\d{2}/;
 /**
 * 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
@@ -2246,7 +2276,7 @@ const FILTER_SIZE_TOKENS = {
 const PopoverContent = styled(PopoverPrimitive.Content)`
   z-index: ${Z_INDICES.modalDropdown};
 `;
-const PopoverCard = styled(Card_default)`
+const PopoverCard$1 = styled(Card_default)`
   width: ${({ $wide }) => $wide ? "520px" : "384px"};
   max-width: calc(100vw - ${Spacing[4]});
   margin-bottom: 0;
@@ -2480,7 +2510,7 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 				event.preventDefault();
 				handleOpenChange(false);
 			},
-			children: /* @__PURE__ */ jsxs(PopoverCard, {
+			children: /* @__PURE__ */ jsxs(PopoverCard$1, {
 				elevated: true,
 				$wide: wide,
 				children: [/* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(Paragraph, {
@@ -2772,6 +2802,20 @@ function ChoicesValueControl({ field, operator, value, onChange, onCommit, ariaL
 	});
 }
 //#endregion
+//#region components/DataTable/TableControls/FiltersV2/date-rule-intent.ts
+function dateRuleIntent(change, writesEnabled) {
+	if (change.source === "clear") return { kind: "clear" };
+	if (change.source === "calendar" || !writesEnabled) return change.range == null ? { kind: "clear" } : {
+		kind: "absolute",
+		range: change.range
+	};
+	return {
+		kind: "relative",
+		preset: change.preset,
+		range: change.range
+	};
+}
+//#endregion
 //#region components/DataTable/TableControls/FiltersV2/value-controls/DateRangeValueControl/DateRangeValueControl.tsx
 const CALENDAR_DATE = /^(\d{4}-\d{2}-\d{2})/;
 const DATE_ONLY$1 = /^\d{4}-\d{2}-\d{2}$/;
@@ -4726,6 +4770,466 @@ function deriveVisibleCustomFieldParents(registry, topLevelRules) {
 	return hasActiveSelectorRule ? Array.from(allowedParents) : void 0;
 }
 //#endregion
+//#region components/DataTable/dnd/StyledIconDrag.tsx
+const StyledIconDrag = styled(DragIcon$1)`
+  display: ${({ $shouldHide = false }) => $shouldHide ? "none" : "inline"};
+
+  ${({ $horizontal = false }) => $horizontal ? css`
+          transform: rotate(90deg);
+        ` : ""}
+
+  ${({ $active = false, $hover = false }) => $active ? css`
+          cursor: grabbing;
+          opacity: 1;
+        ` : $hover ? css`
+            cursor: grab;
+            opacity: 1;
+          ` : css`
+            cursor: normal;
+            opacity: 0.4;
+          `}
+
+  transition: opacity 0.2s ease-in-out;
+
+  path {
+    stroke: ${({ theme }) => semanticColor(theme, "FgPrimary", Color.CoreSlate1000)};
+    stroke-width: 1px;
+  }
+`;
+//#endregion
+//#region components/DataTable/dnd/utils.ts
+/**
+* reorder returns a reordered version of the inputed list by swapping the element
+* at startIndex with the one at endIndex
+*/
+function reorder(list, startIndex, endIndex) {
+	const result = Array.from(list);
+	const [removed] = result.splice(startIndex, 1);
+	result.splice(endIndex, 0, removed);
+	return result;
+}
+/**
+* Translates a drag result into indices into the full list. dnd reports positions among the
+* rendered rows, which diverge from the full list as soon as the view is filtered.
+*
+* Returns null when either end cannot be resolved, in which case the drag should be ignored
+* rather than applied at the wrong position.
+*/
+function resolveDragIndices(listKeys, renderedKeys, draggableId, destinationIndex) {
+	const destinationKey = renderedKeys[destinationIndex];
+	if (destinationKey == null) return null;
+	const from = listKeys.indexOf(draggableId);
+	const to = listKeys.indexOf(destinationKey);
+	return from === -1 || to === -1 ? null : {
+		from,
+		to
+	};
+}
+//#endregion
+//#region components/DataTable/TableControls/TableViewConfigurationDropdown.tsx
+const SHOWN_DROPPABLE_ID = "cases-view__configure-shown-columns";
+const startsCapitalized = (label) => {
+	const first = label.charAt(0);
+	return first !== "" && first === first.toUpperCase() && first !== first.toLowerCase();
+};
+const byLabel = (a, b) => {
+	const aCapitalized = startsCapitalized(a.label);
+	if (aCapitalized !== startsCapitalized(b.label)) return aCapitalized ? -1 : 1;
+	return a.label.localeCompare(b.label, void 0, { numeric: true });
+};
+const DndSection = styled("div")`
+  max-height: 400px;
+
+  overflow: scroll;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`;
+const DndItemWrapper = styled("div")`
+  background: white;
+  ${semanticOnly((tokens) => `background: ${tokens.SurfacePrimary};`)}
+  width: 100%;
+  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", theme.color.border.secondary)};
+  padding: ${Spacing[2]} ${Spacing[2]};
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: left;
+`;
+const SuffixContainer = styled("div")`
+  padding-left: ${Spacing[2]};
+  margin-left: auto;
+  align-self: center;
+`;
+const SearchContainer = styled.div`
+  display: flex;
+`;
+const StyledSearchInput = styled(SearchInput)`
+  width: 100%;
+`;
+const PopoverCard = styled(Card_default)`
+  width: 300px;
+  padding: ${Spacing[4]};
+`;
+const TriggerIconButton = forwardRef(function TriggerIconButton({ disabled, ...elemProps }, ref) {
+	const strings = usePDSStrings();
+	return /* @__PURE__ */ jsx(Button, {
+		disabled,
+		width: "icon",
+		variant: "basic",
+		size: "md",
+		...elemProps,
+		ref,
+		"data-tour-target": "table-properties-button",
+		"aria-label": strings.tableProperties,
+		children: /* @__PURE__ */ jsx(SettingsIcon, {})
+	});
+});
+const TooltipButtonWrapper = styled("div")`
+  display: inline-block;
+`;
+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 ?? strings.configureViewPermissionDenied
+	}) : /* @__PURE__ */ jsxs(Popover_default, { children: [/* @__PURE__ */ jsx(Popover_default.Trigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(TriggerIconButton, {
+			disabled: false,
+			size,
+			variant
+		})
+	}), /* @__PURE__ */ jsx(Popover_default.Content, {
+		style: { zIndex: Z_INDICES.dropdown },
+		sideOffset: 8,
+		side: "bottom",
+		align: "end",
+		children: /* @__PURE__ */ jsx(PopoverCard, {
+			elevated: true,
+			children: /* @__PURE__ */ jsx(TableViewConfiguration, { ...props })
+		})
+	})] });
+};
+const TableViewConfiguration = ({ columnConfiguration, attributeOptions, updateColumnConfiguration, getColumnDisabled, sortByRelevance = false }) => {
+	const strings = usePDSStrings();
+	const [searchTerm, setSearchTerm] = useState("");
+	const fuse = useMemo(() => {
+		return new Fuse(attributeOptions, sortByRelevance ? {
+			shouldSort: true,
+			threshold: .3,
+			ignoreLocation: true,
+			includeScore: true,
+			minMatchCharLength: 1,
+			keys: [{
+				name: "label",
+				weight: 1
+			}]
+		} : {
+			shouldSort: false,
+			threshold: .4,
+			location: 0,
+			distance: 100,
+			minMatchCharLength: 1,
+			keys: [{
+				name: "label",
+				weight: 1
+			}]
+		});
+	}, [attributeOptions, sortByRelevance]);
+	const allOptions = useMemo(() => union(attributeOptions, columnConfiguration), [attributeOptions, columnConfiguration]);
+	const filteredSearchOptions = useMemo(() => {
+		if (searchTerm === "") return allOptions;
+		const results = fuse.search(searchTerm);
+		if (!sortByRelevance) return results.map(({ item }) => item);
+		return [...results].sort((a, b) => (a.score ?? 0) - (b.score ?? 0) || byLabel(a.item, b.item)).map(({ item }) => item);
+	}, [
+		allOptions,
+		fuse,
+		searchTerm,
+		sortByRelevance
+	]);
+	const hiddenAttributes = useMemo(() => {
+		const columnConfigurationKeys = new Set(columnConfiguration.map((c) => c.key));
+		const hidden = filteredSearchOptions.filter((attribute) => !columnConfigurationKeys.has(attribute.key));
+		if (!sortByRelevance || searchTerm !== "") return hidden;
+		const [systemColumns, customFields] = partition(hidden, (a) => !a.isCustomField);
+		return [...systemColumns, ...[...customFields].sort(byLabel)];
+	}, [
+		columnConfiguration,
+		filteredSearchOptions,
+		sortByRelevance,
+		searchTerm
+	]);
+	const filteredShownAttributes = useMemo(() => {
+		return columnConfiguration.filter((column) => filteredSearchOptions.map((o) => o.key).includes(column.key));
+	}, [columnConfiguration, filteredSearchOptions]);
+	const handleDragEnd = (result, _provided) => {
+		const { destination, source } = result;
+		if (!destination || destination.droppableId === source.droppableId && destination.index === source.index) return;
+		const indices = resolveDragIndices(columnConfiguration.map((c) => c.key), filteredShownAttributes.map((c) => c.key), result.draggableId, destination.index);
+		if (!indices) return;
+		updateColumnConfiguration(reorder(columnConfiguration, indices.from, indices.to));
+	};
+	const generateShownAttributesToggle = (column) => () => {
+		updateColumnConfiguration(columnConfiguration.filter((a) => a.key !== column.key));
+	};
+	const generateHiddenAttributesToggle = (column) => () => {
+		updateColumnConfiguration(columnConfiguration.concat({
+			key: column.key,
+			label: column.label
+		}));
+	};
+	const shownColumnIds = useMemo(() => {
+		return columnConfiguration.map((c) => c.key);
+	}, [columnConfiguration]);
+	const shownDndItemProps = filteredShownAttributes.map((column, index) => {
+		const isDisabledByDefault = columnConfiguration.length === 1;
+		const isDisabledByCustom = getColumnDisabled?.(column.key, shownColumnIds) ?? false;
+		const shouldDisableDragForColumn = isDisabledByCustom && index === filteredShownAttributes.length - 1;
+		return {
+			column,
+			index,
+			isDisabled: isDisabledByDefault || isDisabledByCustom,
+			isToggled: true,
+			shouldDisableDrag: shouldDisableDragForColumn,
+			handleToggle: generateShownAttributesToggle(column)
+		};
+	});
+	const hiddenDndItemProps = hiddenAttributes.map((column, index) => {
+		return {
+			column,
+			index,
+			isToggled: false,
+			shouldDisableDrag: true,
+			handleToggle: generateHiddenAttributesToggle(column)
+		};
+	});
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx(Label$1, {
+			size: "lg",
+			weight: "bold",
+			children: strings.configureColumns
+		}),
+		/* @__PURE__ */ jsx(Spacer_default, { height: 2 }),
+		/* @__PURE__ */ jsx(SearchContainer, { children: /* @__PURE__ */ jsx(StyledSearchInput, {
+			title: null,
+			value: searchTerm,
+			handleInput: setSearchTerm,
+			size: "md",
+			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: strings.shownColumns }), /* @__PURE__ */ jsx(DragDropContext, {
+				onDragEnd: handleDragEnd,
+				children: /* @__PURE__ */ jsx(Droppable, {
+					droppableId: SHOWN_DROPPABLE_ID,
+					renderClone: (provided, _snapshot, rubric) => {
+						return /* @__PURE__ */ jsx("div", {
+							...provided.draggableProps,
+							...provided.dragHandleProps,
+							ref: provided.innerRef,
+							children: /* @__PURE__ */ jsx(AttributeDnd, { ...shownDndItemProps[rubric.source.index] })
+						});
+					},
+					children: (provided) => {
+						return /* @__PURE__ */ jsxs("div", {
+							ref: provided.innerRef,
+							...provided.droppableProps,
+							children: [shownDndItemProps.map((props, idx) => {
+								return /* @__PURE__ */ jsx(Draggable, {
+									draggableId: props.column.key,
+									index: idx,
+									isDragDisabled: props.shouldDisableDrag,
+									children: (provided) => {
+										return /* @__PURE__ */ jsx("div", {
+											ref: provided.innerRef,
+											...provided.draggableProps,
+											...provided.dragHandleProps,
+											children: /* @__PURE__ */ jsx(AttributeDnd, { ...props })
+										});
+									}
+								}, `${props.column.key}`);
+							}), provided.placeholder]
+						});
+					}
+				})
+			})] }),
+			/* @__PURE__ */ jsx(Spacer_default, { height: 2 }),
+			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")`
+  max-width: 160px;
+  flex-wrap: wrap;
+  display: flex;
+`;
+const AttributeDnd = ({ column, index, isDisabled = false, isToggled, shouldDisableDrag, handleToggle }) => {
+	const strings = usePDSStrings();
+	return /* @__PURE__ */ jsxs(DndItemWrapper, { children: [
+		/* @__PURE__ */ jsx(StyledIconDrag, {
+			$active: true,
+			$shouldHide: shouldDisableDrag
+		}),
+		/* @__PURE__ */ jsx(OverflowText, { children: /* @__PURE__ */ jsx(Paragraph, {
+			color: "primary",
+			size: "sm",
+			children: column.label
+		}) }),
+		/* @__PURE__ */ jsx(SuffixContainer, { children: /* @__PURE__ */ jsx(Toggle, {
+			value: isToggled,
+			disabled: isDisabled,
+			onChange: handleToggle,
+			"aria-label": isToggled ? strings.hideColumn(column.label) : strings.showColumn(column.label)
+		}) })
+	] }, `${column.key}-${index}`);
+};
+//#endregion
+//#region components/DataTable/TableControls/TableControls.tsx
+const EMPTY_FILTERS = [];
+const resolveFilterArea = (filterPanel, filtersV2Panel, configuredFilterPanel) => filterPanel ?? filtersV2Panel ?? configuredFilterPanel;
+const hasNewFilterId = (currentIds, previousIds) => {
+	const previous = new Set(previousIds.split("\0").filter(Boolean));
+	return currentIds.split("\0").some((id) => id !== "" && !previous.has(id));
+};
+const TableControls = ({ filters = EMPTY_FILTERS, filterResolver, filtersV2, filterPanel, searchProps, defaultShowFilters, showFilters: controlledShowFilters, setShowFilters: controlledSetShowFilters, className, tableActions, propertiesButton, isLoading, isFilterPanelLoading, showViews, canEditViews, onSelectView, views, hiddenViewIds, currentView, onAddView, onViewNameChange, onReorderViews, onViewHiddenChange, onDuplicateView, onDeleteView, onSaveView, onSetDefaultView, onUnsetDefaultView, isViewDirty, selectedRows, bulkActions, onClearSelection, title, presetViews, compact, columnConfigurationProps, showFiltersAlways = false, onError, "data-tour-target": dataTourTarget }) => {
+	const filtersId = useId();
+	const enabledFilters = useMemo(() => filtersV2 != null ? EMPTY_FILTERS : filters.filter((filter) => filter.enabled !== false), [filters, filtersV2]);
+	const [activeFilters, setActiveFilters] = useState(() => getActiveFilters(enabledFilters, [], true, filterResolver));
+	const generatedFilterPanel = enabledFilters.length > 0 ? /* @__PURE__ */ jsx(TableControlsProvider, {
+		filters: enabledFilters,
+		activeFilters,
+		setActiveFilters,
+		children: /* @__PURE__ */ jsx(Filters, {
+			id: filtersId,
+			compact,
+			filterResolver
+		})
+	}) : void 0;
+	const usesFiltersV2 = filterPanel == null && filtersV2 != null;
+	const resolvedFilterPanel = resolveFilterArea(filterPanel, filtersV2 != null ? /* @__PURE__ */ jsx("div", {
+		id: filtersId,
+		children: /* @__PURE__ */ jsx(FilterBar, {
+			...filtersV2,
+			size: filtersV2.size ?? (compact ? "sm" : "md")
+		})
+	}) : void 0, generatedFilterPanel);
+	const [internalShowFilters, internalSetShowFilters] = useState(defaultShowFilters ?? (filterPanel == null && (usesFiltersV2 || activeFilters.length > 0)));
+	useEffect(() => {
+		setActiveFilters((current) => synchronizeActiveFilters(enabledFilters, current, filterResolver));
+	}, [enabledFilters, filterResolver]);
+	const activeFilterIds = enabledFilters.filter((filter) => isFilterActive(filter, filterResolver)).map((filter) => filter.id).sort().join("\0");
+	const configuredFilterIds = activeFilters.flatMap((filter) => filter.config ? [filter.config.id] : []).sort().join("\0");
+	const previousActiveFilterIds = useRef(activeFilterIds);
+	const previousConfiguredFilterIds = useRef(configuredFilterIds);
+	const previouslyUsedFiltersV2 = useRef(usesFiltersV2);
+	useEffect(() => {
+		const becameActive = hasNewFilterId(activeFilterIds, previousActiveFilterIds.current);
+		const newlyConfigured = hasNewFilterId(configuredFilterIds, previousConfiguredFilterIds.current);
+		const enabledFiltersV2 = usesFiltersV2 && !previouslyUsedFiltersV2.current;
+		previousActiveFilterIds.current = activeFilterIds;
+		previousConfiguredFilterIds.current = configuredFilterIds;
+		previouslyUsedFiltersV2.current = usesFiltersV2;
+		if (defaultShowFilters == null && filterPanel == null && (enabledFiltersV2 || !usesFiltersV2 && (becameActive || newlyConfigured))) internalSetShowFilters(true);
+	}, [
+		activeFilterIds,
+		configuredFilterIds,
+		defaultShowFilters,
+		filterPanel,
+		usesFiltersV2
+	]);
+	const showFilters = controlledShowFilters != null ? controlledShowFilters : internalShowFilters;
+	const setShowFilters = controlledSetShowFilters != null ? controlledSetShowFilters : internalSetShowFilters;
+	const enhancedPropertiesButton = useMemo(() => {
+		if (!columnConfigurationProps && !propertiesButton) return;
+		const elements = [];
+		if (propertiesButton) elements.push(propertiesButton);
+		if (columnConfigurationProps) elements.push(/* @__PURE__ */ jsx(TableViewConfigurationDropdown, {
+			disabled: false,
+			...columnConfigurationProps
+		}, "column-config"));
+		if (elements.length === 1) return elements[0];
+		return /* @__PURE__ */ jsx(StyledEnhancedPropertiesButton, { children: elements });
+	}, [columnConfigurationProps, propertiesButton]);
+	return /* @__PURE__ */ jsx(Container, {
+		className,
+		children: /* @__PURE__ */ jsx(ControlBar, {
+			showViews: compact ? false : showViews,
+			views: compact ? void 0 : views,
+			hiddenViewIds: compact ? void 0 : hiddenViewIds,
+			onSelectView: compact ? void 0 : onSelectView,
+			currentView: compact ? void 0 : currentView,
+			onAddView: compact ? void 0 : onAddView,
+			onDeleteView: compact ? void 0 : onDeleteView,
+			onDuplicateView: compact ? void 0 : onDuplicateView,
+			onViewNameChange: compact ? void 0 : onViewNameChange,
+			onReorderViews: compact ? void 0 : onReorderViews,
+			onViewHiddenChange: compact ? void 0 : onViewHiddenChange,
+			onSaveView: compact ? void 0 : onSaveView,
+			...!compact && onSetDefaultView ? {
+				onSetDefaultView,
+				onUnsetDefaultView
+			} : {
+				onSetDefaultView: void 0,
+				onUnsetDefaultView: void 0
+			},
+			isViewDirty,
+			canEditViews: compact ? false : canEditViews,
+			showFilters: showFilters && (showFiltersAlways || !isFilterPanelLoading),
+			setShowFilters: (resolvedFilterPanel != null || isFilterPanelLoading) && !showFiltersAlways ? setShowFilters : void 0,
+			filtersId,
+			searchProps,
+			propertiesButton: enhancedPropertiesButton,
+			tableActions,
+			isLoading,
+			isFilterPanelLoading,
+			selectedRows,
+			bulkActions,
+			onClearSelection,
+			title,
+			"data-tour-target": dataTourTarget,
+			presetViews: compact ? void 0 : presetViews,
+			compact,
+			onError,
+			filterPanel: resolvedFilterPanel
+		})
+	});
+};
+const Container = styled(Stack)`
+  margin-bottom: ${Spacing[2]};
+`;
+const StyledEnhancedPropertiesButton = styled.div`
+  display: flex;
+  gap: ${Spacing[1]};
+`;
+//#endregion
+//#region components/DataTable/TableControls/FiltersV2/date-range-rule-value.ts
+/**
+* The absolute bounds a rule should be queried with, or `null` when it does not
+* carry a date range.
+*
+* Relative metadata wins over the stored snapshot: the snapshot is a picture of
+* the window when it was saved, and the point of a relative rule is that the
+* window moves. The operator gate is part of this rather than the caller's job —
+* metadata only ever describes a range, so resolving it onto a scalar rule
+* would put a `{ startDate, endDate }` object where the wire expects a day.
+*/
+function resolveDateRangeRuleValue(rule, fieldType) {
+	if (!carriesDateRange(rule.operator, fieldType)) return null;
+	const relative = parseDateFilterValue(rule.relativeDate);
+	if (relative?.kind === "relative") return resolveDateFilterValue(relative);
+	const parsed = parseDateFilterValue(rule.value);
+	return parsed ? resolveDateFilterValue(parsed) : null;
+}
+//#endregion
 //#region components/DataTable/TableControls/FiltersV2/FilterBar/index.ts
 var FilterBar_default = FilterBar;
 //#endregion
@@ -4998,6 +5502,6 @@ function decodeBase64(input) {
 	return decodeURIComponent(escape(atob(input)));
 }
 //#endregion
-export { dateRuleIntent as A, getOperatorsForField as C, isRangeOperator as D, isNumericComparisonOperator as E, TableViewConfigurationDropdown as F, TableControls as I, ControlBar as L, TableControlsProvider as M, useTableControls as N, isValuelessOperator as O, TableViewConfiguration as P, DataTableCompactBar as R, getDefaultOperatorForType as S, isCompleteDateRange as T, FILTER_SIZE_TOKENS as _, encodeFilterStateToUrlParam as a, NUMERIC_COMPARISON_OPERATORS as b, FilterBar_default as c, isFilterStateV2 as d, pruneToRegistry as f, resolveValueControl as g, PillShell as h, decodeFilterStateFromUrl as i, TableControlsContext as j, reconcileValueForOperator as k, useFilterStateV2 as l, isEmptyState as m, applyFilterStateToSearchParams as n, FieldRegistry as o, EMPTY_FILTER_STATE as p, decodeFilterStateFromString as r, buildFieldRegistry as s, FILTER_STATE_URL_PARAM as t, hasCompleteValue as u, useFilterBarSize as v, getOperatorsForType as w, emptyValueForRule as x, resolveDateRangeRuleValue as y };
+export { isNumericComparisonOperator as A, useTableControls as B, useFilterBarSize as C, getOperatorsForField as D, getDefaultOperatorForType as E, getActiveFilters as F, DataTableCompactBar as H, isFilterActive as I, resolveFilterTypeDefinition as L, isValuelessOperator as M, reconcileValueForOperator as N, getOperatorsForType as O, FiltersContainer as P, TableControlsContext as R, FILTER_SIZE_TOKENS as S, emptyValueForRule as T, ControlBar as V, EMPTY_FILTER_STATE as _, encodeFilterStateToUrlParam as a, resolveValueControl as b, FilterBar_default as c, TableViewConfiguration as d, TableViewConfigurationDropdown as f, pruneToRegistry as g, isFilterStateV2 as h, decodeFilterStateFromUrl as i, isRangeOperator as j, isCompleteDateRange as k, resolveDateRangeRuleValue as l, hasCompleteValue as m, applyFilterStateToSearchParams as n, FieldRegistry as o, useFilterStateV2 as p, decodeFilterStateFromString as r, buildFieldRegistry as s, FILTER_STATE_URL_PARAM as t, TableControls as u, isEmptyState as v, NUMERIC_COMPARISON_OPERATORS as w, dateRuleIntent as x, PillShell as y, TableControlsProvider as z };
 
-//# sourceMappingURL=TableControls-C1MF2JvY.mjs.map
+//# sourceMappingURL=TableControls-n16XKO9S.mjs.map