@persona/design-system 0.3.0 → 0.4.0

package/dist/{TableControls-CZ9iu3ma.mjs → TableControls-WUNbzSNq.mjs}

@@ -1,34 +1,35 @@
-import { isActive, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
-import { focusOutline, focusWithinOutline } from "./mixins/focus.mjs";
-import "./variables/transitions.mjs";
-import { paragraphMixins } from "./mixins/text.mjs";
-import { n as Stack, t as HStack } from "./Stack-Bl54WmhY.mjs";
+import { a as styled, n as createGlobalStyle, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
 import { TruncatedText } from "./lib/TruncatedText.mjs";
-import { t as Card_default } from "./Card-BMCB9eFC.mjs";
-import { t as Spacer_default } from "./Spacer-CJp0lwkL.mjs";
-import { i as Paragraph, r as Label$1 } from "./Text-RcEfNFLx.mjs";
-import { a as Tooltip } from "./Tooltip-BvDbmXak.mjs";
+import { paragraphMixins } from "./mixins/text.mjs";
+import { t as Card_default } from "./Card-CKrJtn1f.mjs";
+import { t as Spacer_default } from "./Spacer-BsK8tTwA.mjs";
+import { i as Paragraph, r as Label$1 } from "./Text-B0orb-cZ.mjs";
+import "./variables/transitions.mjs";
+import { a as Tooltip } from "./Tooltip-iJcfJqxn.mjs";
+import { isActive, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { useScrollOverflow } from "./lib/useScrollOverflow.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { n as Button, t as IconButton } from "./IconButton-BfDlic2K.mjs";
-import { r as InputGroup } from "./Input-Bimw8KFj.mjs";
+import { focusOutline, focusWithinOutline } from "./mixins/focus.mjs";
+import { n as Stack, t as HStack } from "./Stack-Bre2oiov.mjs";
+import { n as Button, t as IconButton } from "./IconButton-BgL3QUVO.mjs";
+import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-B5NtgtgC.mjs";
+import { r as InputGroup } from "./Input-BWlvBYB3.mjs";
 import Input_default from "./components/Input/index.mjs";
-import { c as MenuList, s as MenuItem } from "./Menu-Dir03WA9.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-BCyV8nC0.mjs";
-import { t as Combobox } from "./Combobox-xBrxiUAu.mjs";
-import { s as Popover_default } from "./Popover-BkDpDdaO.mjs";
-import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-D6UocZXi.mjs";
-import { t as Toggle } from "./Toggle-BPgfSjuu.mjs";
-import { t as ListBox } from "./ListBox-DKZpGYjo.mjs";
-import { m as FormField, o as ComboboxField } from "./FormField-B9P3BWvS.mjs";
-import { n as DatePicker, t as DateRangePicker } from "./DatePicker-BlnE2MBD.mjs";
+import { c as MenuList, s as MenuItem } from "./Menu-38UCGcte.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-CUnf420M.mjs";
+import { t as Combobox } from "./Combobox-BUtqtzKl.mjs";
+import { s as Popover_default } from "./Popover-DlXyKYL5.mjs";
+import { t as Toggle } from "./Toggle-e8DCYa6i.mjs";
+import { i as selectedPresetFor, n as parseDateFilterValue, r as resolveDateFilterValue, t as formatDateFilterValue } from "./date-filter-BbWgAXy3.mjs";
+import { t as ListBox } from "./ListBox-9jHHEaqW.mjs";
+import { m as FormField, o as ComboboxField } from "./FormField-oBKH25qf.mjs";
+import { n as DatePicker, t as DateRangePicker } from "./DatePicker-CLP-ajza.mjs";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
-import styled, { createGlobalStyle, css } from "styled-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, createContext, createElement, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { CaretDownIcon, CheckIcon, CircleInfoIcon, CirclePlusIcon, CopyIcon, FilterIcon, MoreIcon, PlusIcon, RotateCcwIcon, SaveIcon, SearchIcon, SettingsIcon, TrashIcon, XIcon } from "@persona/icons";
+import { Fragment, createContext, createElement, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CaretDownIcon, CheckIcon, CircleInfoIcon, CirclePlusIcon, CopyIcon, FilterIcon, MoreIcon, PlusIcon, RotateCcwIcon, SaveIcon, SearchIcon, SettingsIcon, StarIcon, TrashIcon, XIcon } from "@persona/icons";
 import { CaretDownIcon as CaretDownIcon$1, CircleInfoIcon as CircleInfoIcon$1, LockedIcon as LockedIcon$1, MoreIcon as MoreIcon$1, PlusIcon as PlusIcon$1, SearchIcon as SearchIcon$1, XIcon as XIcon$1 } from "@persona/icons/12px";
-import { debounce, isEqual, noop, startCase, union, uniqueId } from "lodash-es";
+import { debounce, isEqual, noop, partition, startCase, union, uniqueId } from "lodash-es";
 import { useId } from "react-aria";
 import Fuse from "fuse.js";
 import { DragIcon as DragIcon$1 } from "@persona/icons/24px";
@@ -207,7 +208,7 @@ const CompactSearchInput = styled(SearchInput)`
 const CompactBar = ({ title, searchProps, showFilters, setShowFilters, filtersId, isLoading, propertiesButton, tableActions, "data-tour-target": dataTourTarget, filterPanel }) => {
 	const autoExpandSearch = !title;
 	const [showSearch, setShowSearch] = useState(autoExpandSearch);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(DataTableCompactBar, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(DataTableCompactBar, {
 		"data-tour-target": dataTourTarget,
 		justify: "space-between",
 		align: "center",
@@ -327,7 +328,7 @@ const TabOverflowContainer = styled.div`
   position: absolute;
   height: 32px;
 `;
-const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditViews, handleNameChange, onDuplicateView, onDeleteView, onSelectView, onResetCurrentView, onSaveView, isViewDirty, showTabContextMenu, setShowTabContextMenu, className, ...rest }) => {
+const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditViews, handleNameChange, onDuplicateView, onDeleteView, onSelectView, onResetCurrentView, onSaveView, onSetDefaultView, isViewDirty, showTabContextMenu, setShowTabContextMenu, className, ...rest }) => {
 	const inputRef = useRef(null);
 	const tab = /* @__PURE__ */ jsx(StyledTab, {
 		id: `${tabIdPrefix}${view.id}`,
@@ -398,6 +399,17 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 						onKeyDown: enterProxiesClick,
 						children: "Save"
 					}),
+					onSetDefaultView && /* @__PURE__ */ jsx(MenuItem, {
+						id: "table-controls__view__menu-set-default",
+						prefixIcon: /* @__PURE__ */ jsx(StarIcon, {}),
+						disabled: view.isDefault,
+						onClick: async () => {
+							await onSetDefaultView(view.id);
+							setShowTabContextMenu(false);
+						},
+						onKeyDown: enterProxiesClick,
+						children: view.isDefault ? "Already the default" : "Set as default"
+					}),
 					onDeleteView && /* @__PURE__ */ jsx(MenuItem, {
 						id: "table-controls__view__menu-delete",
 						prefixIcon: /* @__PURE__ */ jsx(TrashIcon, {}),
@@ -510,7 +522,7 @@ const ProductTourStyles = createGlobalStyle`
     }
   }
 `;
-const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView, onDuplicateView, onDeleteView, onViewNameChange, onSaveView, isViewDirty, canEditViews, showFilters, setShowFilters, searchProps, filtersId, propertiesButton, tableActions, isLoading, showViews, selectedRows = [], bulkActions, onResetCurrentView, onClearSelection, title, "data-tour-target": dataTourTarget, compact, onError, filterPanel }) => {
+const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView, onDuplicateView, onDeleteView, onViewNameChange, onSaveView, onSetDefaultView, isViewDirty, canEditViews, showFilters, setShowFilters, searchProps, filtersId, propertiesButton, tableActions, isLoading, showViews, selectedRows = [], bulkActions, onResetCurrentView, onClearSelection, title, "data-tour-target": dataTourTarget, compact, onError, filterPanel }) => {
 	const tabListRef = useRef(null);
 	const tabOverflowRef = useRef(null);
 	const [hiddenViews, setHiddenViews] = useState([]);
@@ -617,7 +629,7 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 			children: displayLabel
 		}, key);
 	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx(ProductTourStyles, {}),
 		(title || showViews || canEditViews && onSaveView || tableActions || bulkActions) && /* @__PURE__ */ jsx(ViewsBar, {
 			ref: tabListRef,
@@ -645,7 +657,7 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 					tableActions
 				]
 			}),
-			children: showViews && /* @__PURE__ */ jsxs(Fragment, { children: [
+			children: showViews && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx(LockedViewTab, {
 					id: `${TAB_ID_PREFIX}default`,
 					selected: !currentView,
@@ -672,6 +684,7 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 						onSelectView,
 						onResetCurrentView,
 						onSaveView,
+						onSetDefaultView,
 						isViewDirty: isViewDirty ?? false,
 						selected: view.id === currentView,
 						showTabContextMenu: showTabContextMenu && !currentViewHidden,
@@ -699,6 +712,7 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 					onDeleteView,
 					onResetCurrentView,
 					onSaveView,
+					onSetDefaultView,
 					isViewDirty: isViewDirty ?? false,
 					showTabContextMenu: showTabContextMenu && currentViewHidden,
 					setShowTabContextMenu,
@@ -739,7 +753,7 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 };
 //#endregion
 //#region components/DataTable/TableControls/TableControls.tsx
-const TableControls = ({ filterPanel, searchProps, defaultShowFilters, showFilters: controlledShowFilters, setShowFilters: controlledSetShowFilters, className, tableActions, propertiesButton, isLoading, showViews, canEditViews, onSelectView, views, currentView, onAddView, onViewNameChange, onDuplicateView, onDeleteView, onSaveView, isViewDirty, selectedRows, bulkActions, onClearSelection, title, presetViews, compact, columnConfigurationProps, showFiltersAlways = false, onError, "data-tour-target": dataTourTarget }) => {
+const TableControls = ({ filterPanel, searchProps, defaultShowFilters, showFilters: controlledShowFilters, setShowFilters: controlledSetShowFilters, className, tableActions, propertiesButton, isLoading, showViews, canEditViews, onSelectView, views, currentView, onAddView, onViewNameChange, onDuplicateView, onDeleteView, onSaveView, onSetDefaultView, isViewDirty, selectedRows, bulkActions, onClearSelection, title, presetViews, compact, columnConfigurationProps, showFiltersAlways = false, onError, "data-tour-target": dataTourTarget }) => {
 	const filtersId = useId();
 	const [internalShowFilters, internalSetShowFilters] = useState(defaultShowFilters ?? false);
 	const showFilters = controlledShowFilters != null ? controlledShowFilters : internalShowFilters;
@@ -767,6 +781,7 @@ const TableControls = ({ filterPanel, searchProps, defaultShowFilters, showFilte
 			onDuplicateView: compact ? void 0 : onDuplicateView,
 			onViewNameChange: compact ? void 0 : onViewNameChange,
 			onSaveView: compact ? void 0 : onSaveView,
+			onSetDefaultView: compact ? void 0 : onSetDefaultView,
 			isViewDirty,
 			canEditViews: compact ? false : canEditViews,
 			showFilters,
@@ -834,8 +849,35 @@ function reorder(list, startIndex, endIndex) {
 	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;
 
@@ -912,10 +954,20 @@ const TableViewConfigurationDropdown = ({ disabled = false, disabledTooltipMessa
 		})
 	})] });
 };
-const TableViewConfiguration = ({ columnConfiguration, attributeOptions, updateColumnConfiguration, getColumnDisabled }) => {
+const TableViewConfiguration = ({ columnConfiguration, attributeOptions, updateColumnConfiguration, getColumnDisabled, sortByRelevance = false }) => {
 	const [searchTerm, setSearchTerm] = useState("");
 	const fuse = useMemo(() => {
-		return new Fuse(attributeOptions, {
+		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,
@@ -926,27 +978,49 @@ const TableViewConfiguration = ({ columnConfiguration, attributeOptions, updateC
 				weight: 1
 			}]
 		});
-	}, [attributeOptions]);
+	}, [attributeOptions, sortByRelevance]);
 	const allOptions = useMemo(() => union(attributeOptions, columnConfiguration), [attributeOptions, columnConfiguration]);
-	const filteredSearchOptions = searchTerm === "" ? allOptions : fuse.search(searchTerm).map(({ item }) => item);
+	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(() => {
-		return filteredSearchOptions.filter((attribute) => {
-			return !columnConfiguration.map((c) => c.key).includes(attribute.key);
-		});
-	}, [columnConfiguration, filteredSearchOptions]);
+		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;
-		updateColumnConfiguration(reorder(columnConfiguration, source.index, destination.index));
+		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(column));
+		updateColumnConfiguration(columnConfiguration.concat({
+			key: column.key,
+			label: column.label
+		}));
 	};
 	const shownColumnIds = useMemo(() => {
 		return columnConfiguration.map((c) => c.key);
@@ -993,7 +1067,7 @@ const TableViewConfiguration = ({ columnConfiguration, attributeOptions, updateC
 			shownDndItemProps.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Paragraph, { children: "Shown attributes" }), /* @__PURE__ */ jsx(DragDropContext, {
 				onDragEnd: handleDragEnd,
 				children: /* @__PURE__ */ jsx(Droppable, {
-					droppableId: "cases-view__configure-shown-columns",
+					droppableId: SHOWN_DROPPABLE_ID,
 					renderClone: (provided, _snapshot, rubric) => {
 						return /* @__PURE__ */ jsx("div", {
 							...provided.draggableProps,
@@ -1026,41 +1100,7 @@ const TableViewConfiguration = ({ columnConfiguration, attributeOptions, updateC
 				})
 			})] }),
 			/* @__PURE__ */ jsx(Spacer_default, { height: 2 }),
-			hiddenDndItemProps.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Paragraph, { children: "Hidden attributes" }), /* @__PURE__ */ jsx(DragDropContext, {
-				onDragEnd: handleDragEnd,
-				children: /* @__PURE__ */ jsx(Droppable, {
-					droppableId: "cases-view__configure-hidden-columns",
-					renderClone: (provided, _snapshot, rubric) => {
-						return /* @__PURE__ */ jsx("div", {
-							...provided.draggableProps,
-							...provided.dragHandleProps,
-							ref: provided.innerRef,
-							children: /* @__PURE__ */ jsx(AttributeDnd, { ...hiddenDndItemProps[rubric.source.index] })
-						});
-					},
-					children: (provided) => {
-						return /* @__PURE__ */ jsxs("div", {
-							ref: provided.innerRef,
-							...provided.droppableProps,
-							children: [hiddenDndItemProps.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]
-						});
-					}
-				})
-			})] })
+			hiddenDndItemProps.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Paragraph, { children: "Hidden attributes" }), hiddenDndItemProps.map((props) => /* @__PURE__ */ jsx(AttributeDnd, { ...props }, props.column.key))] })
 		] }) : /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Paragraph, { children: "No matching attributes" }) })
 	] });
 };
@@ -1102,6 +1142,20 @@ 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
+	};
+	return {
+		kind: "relative",
+		preset: change.preset,
+		range: change.range
+	};
+}
+//#endregion
 //#region components/DataTable/TableControls/FiltersV2/operators.ts
 /**
 * Operator vocabulary per field type. The UI uses this to populate the
@@ -1208,6 +1262,15 @@ function getDefaultOperatorForType(type) {
 function isValuelessOperator(operator) {
 	return VALUELESS_OPERATORS.has(operator);
 }
+/**
+* Whether a rule's value is a date range: a range operator, or a field that is
+* one by type. Relative metadata only describes a range, so resolving or
+* labelling it on a scalar rule would put a `{ startDate, endDate }` object
+* where the wire expects a day string.
+*/
+function carriesDateRange(operator, fieldType) {
+	return isRangeOperator(operator) || fieldType === "date_range";
+}
 function isRangeOperator(operator) {
 	return RANGE_OPERATORS.has(operator);
 }
@@ -1311,9 +1374,45 @@ 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/relative-date-label.ts
+/**
+* The preset name a rule should display instead of its dates, or `undefined`
+* when it has none and the caller should fall back to rendering the value.
+*
+* Completeness is checked against the same predicate the serialize boundary
+* uses: labelling a rule `hasCompleteValue` drops would advertise a filter the
+* request never carries.
+*/
+function relativePresetLabel(value, relativeDate) {
+	const parsed = relativeDate ? parseDateFilterValue(relativeDate) : null;
+	if (parsed?.kind !== "relative" || !isCompleteDateRange(value)) return;
+	return formatDateFilterValue(parsed) ?? void 0;
+}
+//#endregion
 //#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/display.ts
-function valueDisplayString(value, optionLabels) {
+function valueDisplayString(value, optionLabels, relativeDate) {
 	if (value == null) return;
+	const relativeLabel = relativePresetLabel(value, relativeDate);
+	if (relativeLabel) return relativeLabel;
 	const display = (raw) => optionLabels?.[raw] ?? raw;
 	if (Array.isArray(value)) {
 		if (value.length === 0) return;
@@ -1443,7 +1542,7 @@ function buildFieldPickerOptions(registry, visibleCustomFieldParents, excludeFie
 //#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/RuleEditorFields.tsx
 function RuleEditorFields({ registry, field, groupIndex, ruleIndex, rule, size, operators, operatorConfigurable, onFieldChange, onOperatorChange, onValueChange, renderValueControl }) {
 	const fieldOptions = useMemo(() => buildFieldPickerOptions(registry), [registry]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx(ComboboxField, {
 			label: "Value",
 			labelProps: { size },
@@ -1485,7 +1584,7 @@ function RuleEditorFields({ registry, field, groupIndex, ruleIndex, rule, size,
 		field && !isValuelessOperator(rule.operator) ? /* @__PURE__ */ jsx(FormField, {
 			label: "Value",
 			labelProps: { size },
-			children: /* @__PURE__ */ jsx(Fragment, { children: renderValueControl(field, rule.operator, rule.value, (next) => onValueChange(groupIndex, ruleIndex, next)) })
+			children: /* @__PURE__ */ jsx(Fragment$1, { children: renderValueControl(field, rule.operator, rule.value, (next, relativeDate) => onValueChange(groupIndex, ruleIndex, next, relativeDate), rule.relativeDate) })
 		}) : null
 	] });
 }
@@ -1497,7 +1596,7 @@ function AdvancedFilterRuleRow({ registry, groupIndex, ruleIndex, rule, size, is
 	const operatorConfigurable = field ? fieldHasMultipleOperators(field) : true;
 	const condition = ruleIndex === 0 ? "If" : "And";
 	const rowId = `${groupIndex}-${ruleIndex}`;
-	const valueDisplay = isValuelessOperator(rule.operator) ? void 0 : valueDisplayString(rule.value, registry.optionLabelsFor(rule.fieldId));
+	const valueDisplay = isValuelessOperator(rule.operator) ? void 0 : valueDisplayString(rule.value, registry.optionLabelsFor(rule.fieldId), carriesDateRange(rule.operator, field?.type) ? rule.relativeDate : void 0);
 	const textValue = [
 		condition,
 		field?.label ?? rule.fieldId,
@@ -1819,13 +1918,14 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 		onChange,
 		registry
 	]);
-	const handleValueChange = useCallback((groupIndex, ruleIndex, nextValue) => {
+	const handleValueChange = useCallback((groupIndex, ruleIndex, nextValue, relativeDate) => {
 		const prev = compound.groups[groupIndex]?.rules[ruleIndex];
 		if (!prev) return;
+		const { relativeDate: _previousRelativeDate, ...rest } = prev;
 		onChange(setRuleInGroup(compound, groupIndex, ruleIndex, {
-			fieldId: prev.fieldId,
-			operator: prev.operator,
-			value: nextValue
+			...rest,
+			value: nextValue,
+			...relativeDate ? { relativeDate } : {}
 		}));
 	}, [compound, onChange]);
 	return /* @__PURE__ */ jsxs(PopoverPrimitive.Root, {
@@ -1870,7 +1970,7 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 					const isEmptyGroup = group.rules.length === 0;
 					const hideGroupMenu = isOnlyGroup && isEmptyGroup;
 					const deleteGroupLabel = isOnlyGroup && !isEmptyGroup ? "Clear all" : "Delete group";
-					return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs(GroupCard, {
+					return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(GroupCard, {
 						"data-test": `advanced-filter-rules__group-${groupIndex}`,
 						role: "group",
 						"aria-label": `Filter group ${groupIndex + 1}`,
@@ -2159,20 +2259,19 @@ const parseIsoDate$1 = (value) => {
 		return;
 	}
 };
-const readIsoEndpoints = (value) => {
-	if (value == null || typeof value !== "object" || Array.isArray(value)) return {};
-	return value;
-};
-const useDateRange = (value) => {
-	const { startDate, endDate } = readIsoEndpoints(value);
+const useDateRange = (value, relativeDate) => {
+	const parsedRelativeDate = parseDateFilterValue(relativeDate);
+	const parsed = parsedRelativeDate?.kind === "relative" ? parsedRelativeDate : parseDateFilterValue(value);
+	const resolved = parsed ? resolveDateFilterValue(parsed) : void 0;
 	return useMemo(() => ({
-		startDate: parseIsoDate$1(startDate),
-		endDate: parseIsoDate$1(endDate)
-	}), [startDate, endDate]);
+		startDate: parseIsoDate$1(resolved?.startDate),
+		endDate: parseIsoDate$1(resolved?.endDate)
+	}), [resolved?.startDate, resolved?.endDate]);
 };
-const DateRangeValueControl = ({ field, operator, value, onChange, ariaLabel, hidePresets, portalContainer, visibleMonths }) => {
+const DateRangeValueControl = ({ field, operator, value, relativeDate, onChange, ariaLabel, hidePresets, portalContainer, visibleMonths, relativeDatesEnabled = false }) => {
 	const size = useFilterBarSize();
-	const dateRange = useDateRange(value);
+	const dateRange = useDateRange(value, relativeDate);
+	const noopChange = useCallback(() => void 0, []);
 	const handleChange = useCallback((range) => {
 		if (!range?.start || !range.end || range.start.compare(range.end) > 0) {
 			onChange(null);
@@ -2183,6 +2282,29 @@ const DateRangeValueControl = ({ field, operator, value, onChange, ariaLabel, hi
 			endDate: range.end.toString()
 		});
 	}, [onChange]);
+	const handleDateFilterChange = useCallback((change) => {
+		const intent = dateRuleIntent(change, relativeDatesEnabled);
+		if (intent.kind === "clear") {
+			handleChange(null);
+			return;
+		}
+		if (intent.kind === "absolute") {
+			handleChange(intent.range);
+			return;
+		}
+		onChange({
+			startDate: intent.range.start.toString(),
+			endDate: intent.range.end.toString()
+		}, {
+			kind: "relative",
+			preset: intent.preset
+		});
+	}, [
+		handleChange,
+		onChange,
+		relativeDatesEnabled
+	]);
+	const relativePreset = selectedPresetFor(parseDateFilterValue(relativeDate), relativeDatesEnabled);
 	if (isValuelessOperator(operator)) return null;
 	const hasCompleteRange = dateRange.startDate != null && dateRange.endDate != null;
 	return /* @__PURE__ */ jsx(DateRangePicker, {
@@ -2191,7 +2313,9 @@ const DateRangeValueControl = ({ field, operator, value, onChange, ariaLabel, hi
 		dateRange,
 		hidePresets,
 		label: null,
-		onChange: handleChange,
+		onChange: noopChange,
+		onDateFilterChange: handleDateFilterChange,
+		selectedPreset: relativePreset,
 		portalContainer,
 		showClear: false,
 		size,
@@ -2666,7 +2790,7 @@ const PillShell = forwardRef(function PillShell({ variant, children, bodyAriaLab
 			"aria-haspopup": "dialog",
 			"aria-expanded": ariaExpanded,
 			children
-		}), onDismiss ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DismissibleCaretWrapper, {
+		}), onDismiss ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DismissibleCaretWrapper, {
 			"aria-hidden": "true",
 			$size: resolvedSize,
 			children: /* @__PURE__ */ jsx(CaretIcon, {})
@@ -2736,8 +2860,10 @@ const OverflowTooltipList = styled(Stack).attrs({
 * `optionLabels` lookup so the pill renders human-readable option labels
 * instead of raw option ids. Null / undefined collapses to an empty list.
 */
-function normalizeValueToDisplay(value, optionLabels) {
+function normalizeValueToDisplay(value, optionLabels, relativeDate) {
 	if (value == null) return [];
+	const relativeLabel = relativePresetLabel(value, relativeDate);
+	if (relativeLabel) return [relativeLabel];
 	const lookup = (raw) => optionLabels?.[raw] ?? raw;
 	if (Array.isArray(value)) {
 		if (value.length > 0 && Array.isArray(value[0])) return [`${value.length} group${value.length === 1 ? "" : "s"}`];
@@ -2769,7 +2895,11 @@ function buildAccessibleName(field, rule, displayedValues) {
 const FilterPill = forwardRef(function FilterPill({ field, rule, onClick, onDismiss, variant = "default", optionLabels, size, ...rest }, ref) {
 	const reactId = useMemo(() => uniqueId("filter-pill-"), []);
 	const resolvedSize = useFilterBarSize(size);
-	const displayedValues = useMemo(() => rule && !isValuelessOperator(rule.operator) ? normalizeValueToDisplay(rule.value, optionLabels) : [], [rule, optionLabels]);
+	const displayedValues = useMemo(() => rule && !isValuelessOperator(rule.operator) ? normalizeValueToDisplay(rule.value, optionLabels, carriesDateRange(rule.operator, field?.type) ? rule.relativeDate : void 0) : [], [
+		rule,
+		optionLabels,
+		field?.type
+	]);
 	const accessibleName = buildAccessibleName(field, rule, displayedValues);
 	const hasRule = rule != null;
 	const isComplete = hasRule && (isValuelessOperator(rule.operator) || displayedValues.length > 0);
@@ -3090,6 +3220,10 @@ const EMPTY_FILTER_STATE = Object.freeze({
 	topLevelRules: [],
 	compound: Object.freeze({ groups: [] })
 });
+/** True when no filters are applied — no pills and no compound groups. */
+function isEmptyState(state) {
+	return state.topLevelRules.length === 0 && state.compound.groups.length === 0;
+}
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/validation.ts
 /**
@@ -3615,7 +3749,7 @@ function useStableFieldIds(fieldIds) {
 	if (previous == null || fieldIds == null || previous.length !== fieldIds.length || fieldIds.some((id, index) => previous[index] !== id)) stable.current = fieldIds;
 	return stable.current;
 }
-function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = true, singleUseFields = false, size = "md", valueControlResolver }) {
+function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = true, relativeDatesEnabled = false, singleUseFields = false, size = "md", valueControlResolver }) {
 	const filterState = useFilterStateV2({
 		registry,
 		initialState,
@@ -3730,19 +3864,21 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 				onChange: (compound) => {
 					filterState.setCompound(compound);
 				},
-				renderValueControl: (field, operator, value, onChange) => resolveValueControl({
+				renderValueControl: (field, operator, value, onChange, relativeDate) => resolveValueControl({
 					field,
 					operator,
 					value,
+					relativeDate,
 					onChange,
-					layout: "inline"
+					layout: "inline",
+					relativeDatesEnabled
 				}, valueControlResolver),
 				trigger: /* @__PURE__ */ jsx(RulesPill, {
 					compound: filterState.state.compound,
 					enabled: true,
 					isOpen: rulesPopoverOpen
 				})
-			}) : null, hasPills ? /* @__PURE__ */ jsxs(Fragment, { children: [filterState.advancedRulesEnabled ? /* @__PURE__ */ jsx(Divider, {
+			}) : null, hasPills ? /* @__PURE__ */ jsxs(Fragment$1, { children: [filterState.advancedRulesEnabled ? /* @__PURE__ */ jsx(Divider, {
 				"aria-hidden": "true",
 				$size: size
 			}) : null, /* @__PURE__ */ jsxs(PillsScrollRegion, {
@@ -3761,8 +3897,9 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 							field,
 							operator: rule.operator,
 							onChangeOperator: (op) => {
+								const { relativeDate: _staleRelativeDate, ...rest } = rule;
 								filterState.updateTopLevelRule(rule.id, {
-									...rule,
+									...rest,
 									operator: op,
 									value: reconcileValueForOperator(field, op, rule.operator, rule.value)
 								});
@@ -3771,11 +3908,17 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 								field,
 								operator: rule.operator,
 								value: rule.value,
-								onChange: (value) => filterState.updateTopLevelRule(rule.id, {
-									...rule,
-									value
-								}),
-								onCommit: () => setEditingRuleId(null)
+								relativeDate: rule.relativeDate,
+								onChange: (value, relativeDate) => {
+									const { relativeDate: _staleRelativeDate, ...rest } = rule;
+									filterState.updateTopLevelRule(rule.id, {
+										...rest,
+										value,
+										...relativeDate ? { relativeDate } : {}
+									});
+								},
+								onCommit: () => setEditingRuleId(null),
+								relativeDatesEnabled
 							}, valueControlResolver),
 							onClose: () => setEditingRuleId(null),
 							open: isOpen,
@@ -4045,6 +4188,81 @@ function normalizeFieldSource(raw) {
 	return raw === "system" ? "system" : "custom";
 }
 //#endregion
-export { TableViewConfigurationDropdown as C, DataTableCompactBar as E, TableViewConfiguration as S, ControlBar as T, isValuelessOperator as _, hasCompleteValue as a, TableControlsProvider as b, EMPTY_FILTER_STATE as c, emptyValueForRule as d, getDefaultOperatorForType as f, isRangeOperator as g, isCompleteDateRange as h, useFilterStateV2 as i, resolveValueControl as l, getOperatorsForType as m, buildFieldRegistry as n, isFilterStateV2 as o, getOperatorsForField as p, FilterBar_default as r, pruneToRegistry as s, FieldRegistry as t, useFilterBarSize as u, reconcileValueForOperator as v, TableControls as w, useTableControls as x, TableControlsContext as y };
+//#region components/DataTable/TableControls/FiltersV2/url-state.ts
+/**
+* URL state encoding/decoding for the `fv2=` namespace.
+*
+* v2 URL state is base64'd JSON of `FilterStateV2`. Encoding is a lossless
+* mirror of the in-memory shape — no schema migrations required when the
+* vocabulary grows because the type already models OR-of-AND.
+*
+* Hosts that persist filter state elsewhere (saved views, session storage)
+* store the same encoded string the URL carries; see
+* {@link decodeFilterStateFromString}.
+*/
+/** The query param the FilterBar's full rule state travels in. */
+const FILTER_STATE_URL_PARAM = "fv2";
+/** Read `fv2=…` from a query string and return the decoded state. */
+function decodeFilterStateFromUrl(search) {
+	const raw = (typeof search === "string" ? new URLSearchParams(search) : search).get("fv2");
+	if (raw == null) return {
+		state: EMPTY_FILTER_STATE,
+		hadParam: false,
+		invalid: false
+	};
+	const decoded = tryDecode(raw);
+	if (decoded == null) return {
+		state: EMPTY_FILTER_STATE,
+		hadParam: true,
+		invalid: true
+	};
+	return {
+		state: decoded,
+		hadParam: true,
+		invalid: false
+	};
+}
+/**
+* Produce a `fv2=…` segment for the given state. Returns `null` when the
+* state is empty — callers should treat that as "no param at all" so URLs
+* stay clean in the common case of no filters.
+*/
+function encodeFilterStateToUrlParam(state) {
+	if (isEmptyState(state)) return null;
+	return encodeBase64(JSON.stringify(state));
+}
+function applyFilterStateToSearchParams(params, state) {
+	const encoded = encodeFilterStateToUrlParam(state);
+	if (encoded == null) params.delete("fv2");
+	else params.set("fv2", encoded);
+	return params;
+}
+/**
+* Decode a bare base64 string (as produced by {@link encodeFilterStateToUrlParam})
+* back into a {@link FilterStateV2}, or `null` when it is absent/corrupt/from a
+* future vocabulary.
+*/
+function decodeFilterStateFromString(raw) {
+	if (raw == null || raw === "") return null;
+	return tryDecode(raw);
+}
+function tryDecode(raw) {
+	try {
+		const json = decodeBase64(raw);
+		const parsed = JSON.parse(json);
+		if (!isFilterStateV2(parsed)) return null;
+		return parsed;
+	} catch {
+		return null;
+	}
+}
+function encodeBase64(input) {
+	return btoa(unescape(encodeURIComponent(input)));
+}
+function decodeBase64(input) {
+	return decodeURIComponent(escape(atob(input)));
+}
+//#endregion
+export { TableViewConfiguration as A, isRangeOperator as C, TableControlsContext as D, dateRuleIntent as E, TableControls as M, ControlBar as N, TableControlsProvider as O, DataTableCompactBar as P, isCompleteDateRange as S, reconcileValueForOperator as T, resolveDateRangeRuleValue as _, encodeFilterStateToUrlParam as a, getOperatorsForField as b, FilterBar_default as c, isFilterStateV2 as d, pruneToRegistry as f, useFilterBarSize as g, resolveValueControl as h, decodeFilterStateFromUrl as i, TableViewConfigurationDropdown as j, useTableControls 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, emptyValueForRule as v, isValuelessOperator as w, getOperatorsForType as x, getDefaultOperatorForType as y };
 
-//# sourceMappingURL=TableControls-CZ9iu3ma.mjs.map
+//# sourceMappingURL=TableControls-WUNbzSNq.mjs.map