@persona/design-system 0.9.1 → 0.10.0

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