@persona/design-system 0.3.1 → 0.4.0

package/dist/{TableBoxCell-52g97gEg.d.mts → TableBoxCell-WXc57DwN.d.mts}

@@ -1,8 +1,8 @@
-import { o as ComboboxOptionsOrGroups } from "./ComboboxBase-CWzN8GML.mjs";
-import { a as TableCellProps, i as TableCell } from "./index-d_fTFuMM.mjs";
-import { r as TableBoxRowProps } from "./TableBoxRow-DnoumHIE.mjs";
-import { n as ReorderConfig, t as DragDirection } from "./useTableBoxDragAndDrop-Bye8gJTl.mjs";
-import { t as RowAction } from "./TableBoxRowActions-CDcREhP4.mjs";
+import { o as ComboboxOptionsOrGroups } from "./ComboboxBase-BkSpdmsT.mjs";
+import { a as TableCellProps, i as TableCell } from "./index-Dc_BgmPv.mjs";
+import { r as TableBoxRowProps } from "./TableBoxRow-BQz0a9vr.mjs";
+import { n as ReorderConfig, t as DragDirection } from "./useTableBoxDragAndDrop-B-Dev5D6.mjs";
+import { t as RowAction } from "./TableBoxRowActions-DfewtLrn.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
 import * as _$styled_components0 from "styled-components";
@@ -11,6 +11,7 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region components/TableBox/TableBox.d.ts
 interface InlineEditConfig {
   type: 'text' | 'combobox';
+  readOnly?: boolean;
   options?: ComboboxOptionsOrGroups;
   /**
    * Whether to render the combobox dropdown in a portal (breaks out of overflow containers)
@@ -41,6 +42,7 @@ interface TableBoxContextValue {
   columns: Array<{
     key: string;
     title: string;
+    tooltip?: string;
     inlineEditConfig?: InlineEditConfig;
   }>;
   selectedKey: string | null;
@@ -113,7 +115,8 @@ interface TableBoxProps<T extends object = object> {
   /** Column definitions for the table headers. */
   columns: Array<{
     key: string;
-    title: string; /** Inline edit configuration for this column */
+    title: string; /** Explanatory tooltip shown on hover of a dashed-underlined header title */
+    tooltip?: string; /** Inline edit configuration for this column */
     inlineEditConfig?: InlineEditConfig;
   }>;
   /** ID of the newly created row that should be focused */
@@ -270,4 +273,4 @@ declare const TableBoxCell: ({
 }: TableBoxCellProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableBox as a, PinnedActionsCell as i, TableBoxCellProps as n, TableBoxContext as o, InlineEditConfig as r, TableBoxProps as s, TableBoxCell as t };
-//# sourceMappingURL=TableBoxCell-52g97gEg.d.mts.map
+//# sourceMappingURL=TableBoxCell-WXc57DwN.d.mts.map

package/dist/TableBoxCell.d.mts

@@ -1,2 +1,2 @@
-import { n as TableBoxCellProps, t as TableBoxCell } from "./TableBoxCell-52g97gEg.mjs";
+import { n as TableBoxCellProps, t as TableBoxCell } from "./TableBoxCell-WXc57DwN.mjs";
 export { TableBoxCellProps, TableBoxCell as default };

package/dist/TableBoxField.d.mts

@@ -1,7 +1,7 @@
-import { l as MenuItemProps } from "./Menu-D4Y_J-QI.mjs";
+import { l as MenuItemProps } from "./Menu-ZShdhNd7.mjs";
 import { ImplementsFormField } from "./inputFields.mjs";
-import { r as TableBoxRowProps } from "./TableBoxRow-DnoumHIE.mjs";
-import { n as TableBoxCellProps, s as TableBoxProps } from "./TableBoxCell-52g97gEg.mjs";
+import { r as TableBoxRowProps } from "./TableBoxRow-BQz0a9vr.mjs";
+import { n as TableBoxCellProps, s as TableBoxProps } from "./TableBoxCell-WXc57DwN.mjs";
 import { MouseEvent, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/{TableBoxRow-DnoumHIE.d.mts → TableBoxRow-BQz0a9vr.d.mts}

@@ -1,5 +1,5 @@
-import { l as MenuItemProps } from "./Menu-D4Y_J-QI.mjs";
-import { t as TableRow } from "./TableRow-DdJcjG2b.mjs";
+import { l as MenuItemProps } from "./Menu-ZShdhNd7.mjs";
+import { t as TableRow } from "./TableRow-BTWf9xVC.mjs";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -83,4 +83,4 @@ declare const TableBoxRowOverlay: ({
 }) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableBoxRowOverlay as n, TableBoxRowProps as r, TableBoxRow as t };
-//# sourceMappingURL=TableBoxRow-DnoumHIE.d.mts.map
+//# sourceMappingURL=TableBoxRow-BQz0a9vr.d.mts.map

package/dist/TableBoxRow.d.mts

@@ -1,2 +1,2 @@
-import { n as TableBoxRowOverlay, r as TableBoxRowProps, t as TableBoxRow } from "./TableBoxRow-DnoumHIE.mjs";
+import { n as TableBoxRowOverlay, r as TableBoxRowProps, t as TableBoxRow } from "./TableBoxRow-BQz0a9vr.mjs";
 export { TableBoxRowOverlay, TableBoxRowProps, TableBoxRow as default };

package/dist/{TableBoxRowActions-CDcREhP4.d.mts → TableBoxRowActions-DfewtLrn.d.mts}

@@ -1,4 +1,4 @@
-import { l as MenuItemProps } from "./Menu-D4Y_J-QI.mjs";
+import { l as MenuItemProps } from "./Menu-ZShdhNd7.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -54,4 +54,4 @@ declare const RowActions: ({
 }: RowActionsProps) => _$react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { RowActionsContainerWithFadeWidth as i, RowActions as n, RowActionsContainer as r, RowAction as t };
-//# sourceMappingURL=TableBoxRowActions-CDcREhP4.d.mts.map
+//# sourceMappingURL=TableBoxRowActions-DfewtLrn.d.mts.map

package/dist/TableBoxRowActions.d.mts

@@ -1,2 +1,2 @@
-import { i as RowActionsContainerWithFadeWidth, n as RowActions, r as RowActionsContainer, t as RowAction } from "./TableBoxRowActions-CDcREhP4.mjs";
+import { i as RowActionsContainerWithFadeWidth, n as RowActions, r as RowActionsContainer, t as RowAction } from "./TableBoxRowActions-DfewtLrn.mjs";
 export { RowAction, RowActions, RowActionsContainer, RowActionsContainerWithFadeWidth };

package/dist/TableCell.d.mts

@@ -1,2 +1,2 @@
-import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD } from "./index-d_fTFuMM.mjs";
+import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD } from "./index-Dc_BgmPv.mjs";
 export { StickyTD, StickyTH, TableActionTD, TableCellProps, TableCellTitle, TableIconTD, TableTD, TableTR, TableCell as default };

package/dist/{TableControls-CrGGlkEG.d.mts → TableControls-C26vGkWZ.d.mts}

@@ -1,5 +1,5 @@
-import { n as ControlBarProps } from "./ControlBar-0XwbM4yC.mjs";
-import { i as TableViewConfigurationProps } from "./TableViewConfigurationDropdown-CHBOjw7O.mjs";
+import { n as ControlBarProps } from "./ControlBar-DwAhPcb5.mjs";
+import { i as TableViewConfigurationProps } from "./TableViewConfigurationDropdown-BqB7pOh8.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -49,6 +49,7 @@ declare const TableControls: ({
   onDuplicateView,
   onDeleteView,
   onSaveView,
+  onSetDefaultView,
   isViewDirty,
   selectedRows,
   bulkActions,
@@ -63,4 +64,4 @@ declare const TableControls: ({
 }: TableControlsProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableControlsProps as n, TableControls as t };
-//# sourceMappingURL=TableControls-CrGGlkEG.d.mts.map
+//# sourceMappingURL=TableControls-C26vGkWZ.d.mts.map

package/dist/{TableControls-3bXyd8gS.mjs → TableControls-WUNbzSNq.mjs}

@@ -12,21 +12,22 @@ import { Z_INDICES } from "./lib/zindex.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 { r as InputGroup } from "./Input-DoB8YswA.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-CHbUf9PQ.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-82xH1AZr.mjs";
-import { t as Combobox } from "./Combobox-BGRyr_-L.mjs";
-import { s as Popover_default } from "./Popover-DNH8Jx1-.mjs";
-import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-sYllYizt.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 { t as ListBox } from "./ListBox-B9uuMt2R.mjs";
-import { m as FormField, o as ComboboxField } from "./FormField-CVnbsNvU.mjs";
-import { n as DatePicker, t as DateRangePicker } from "./DatePicker-BNnZ6L1y.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 { 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, TrashIcon, XIcon } from "@persona/icons";
+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, partition, startCase, union, uniqueId } from "lodash-es";
 import { useId } from "react-aria";
@@ -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([]);
@@ -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,
@@ -1127,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
@@ -1233,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);
 }
@@ -1336,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;
@@ -1510,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$1, { 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
 	] });
 }
@@ -1522,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,
@@ -1844,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, {
@@ -2184,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);
@@ -2208,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, {
@@ -2216,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,
@@ -2761,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"}`];
@@ -2794,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);
@@ -3115,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
 /**
@@ -3640,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,
@@ -3755,12 +3864,14 @@ 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,
@@ -3786,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)
 								});
@@ -3796,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,
@@ -4070,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-3bXyd8gS.mjs.map
+//# sourceMappingURL=TableControls-WUNbzSNq.mjs.map