@persona/design-system 0.2.1 → 0.3.0

package/dist/TableBoxField.d.mts

@@ -1,9 +1,9 @@
-import { l as MenuItemProps } from "./Menu-DM9OoZ71.mjs";
+import { l as MenuItemProps } from "./Menu-CYRdEnfo.mjs";
 import { ImplementsFormField } from "./inputFields.mjs";
-import { r as TableBoxRowProps } from "./TableBoxRow-BAYvEDjT.mjs";
-import { n as TableBoxCellProps, s as TableBoxProps } from "./TableBoxCell-BmoPs1u1.mjs";
-import { MouseEvent, ReactNode } from "react";
+import { r as TableBoxRowProps } from "./TableBoxRow-nwq41Bpi.mjs";
+import { n as TableBoxCellProps, s as TableBoxProps } from "./TableBoxCell-DmVX_tgn.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { MouseEvent, ReactNode } from "react";
 
 //#region components/FormField/TableBoxField.d.ts
 interface TableBoxFieldAction extends Omit<MenuItemProps, 'children'> {

package/dist/{TableBoxRow-BAYvEDjT.d.mts → TableBoxRow-nwq41Bpi.d.mts}

@@ -1,7 +1,7 @@
-import { l as MenuItemProps } from "./Menu-DM9OoZ71.mjs";
-import { t as TableRow } from "./TableRow-lvjbVccA.mjs";
-import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { l as MenuItemProps } from "./Menu-CYRdEnfo.mjs";
+import { t as TableRow } from "./TableRow-CPqZ8DK3.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
 
 //#region components/TableBox/TableBoxRow.d.ts
 interface TableBoxRowProps extends ComponentPropsWithoutRef<typeof TableRow> {
@@ -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-BAYvEDjT.d.mts.map
+//# sourceMappingURL=TableBoxRow-nwq41Bpi.d.mts.map

package/dist/TableBoxRow.d.mts

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

package/dist/{TableBoxRowActions-DRs4MdK0.d.mts → TableBoxRowActions-B4_ojiQo.d.mts}

@@ -1,4 +1,4 @@
-import { l as MenuItemProps } from "./Menu-DM9OoZ71.mjs";
+import { l as MenuItemProps } from "./Menu-CYRdEnfo.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-DRs4MdK0.d.mts.map
+//# sourceMappingURL=TableBoxRowActions-B4_ojiQo.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-DRs4MdK0.mjs";
+import { i as RowActionsContainerWithFadeWidth, n as RowActions, r as RowActionsContainer, t as RowAction } from "./TableBoxRowActions-B4_ojiQo.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-DJn4AeE4.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-C1bz13uw.mjs";
 export { StickyTD, StickyTH, TableActionTD, TableCellProps, TableCellTitle, TableIconTD, TableTD, TableTR, TableCell as default };

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

@@ -2,37 +2,37 @@ import { isActive, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass
 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 { TruncatedText } from "./lib/TruncatedText.mjs";
-import { t as Card_default } from "./Card-CLTkZLKr.mjs";
-import { t as Spacer_default } from "./Spacer-Ln3KChb5.mjs";
-import { i as Paragraph, r as Label$1 } from "./Text-hEoPeOc9.mjs";
-import { a as Tooltip } from "./Tooltip-CDvOu1UN.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 { useScrollOverflow } from "./lib/useScrollOverflow.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { n as Stack, t as HStack } from "./Stack-ckRN7LrP.mjs";
-import { n as Button, t as IconButton } from "./IconButton-DC4rh6ow.mjs";
-import { r as InputGroup } from "./Input-PWfwMSJ7.mjs";
+import { n as Button, t as IconButton } from "./IconButton-BfDlic2K.mjs";
+import { r as InputGroup } from "./Input-Bimw8KFj.mjs";
 import Input_default from "./components/Input/index.mjs";
-import { c as MenuList, s as MenuItem } from "./Menu-DpM8o234.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-DZIFSJXD.mjs";
-import { t as Combobox } from "./Combobox-DhTUY8JT.mjs";
-import { s as Popover_default } from "./Popover-BZ5Bs80y.mjs";
-import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-DLf4Hwa4.mjs";
-import { t as Toggle } from "./Toggle-CC2FTAKS.mjs";
-import { t as ListBox } from "./ListBox-BwD-q7wF.mjs";
-import { m as FormField, o as ComboboxField } from "./FormField-DcGQvgNW.mjs";
-import { n as DatePicker } from "./DatePicker-DpGvo7Bd.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 { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
 import styled, { createGlobalStyle, css } from "styled-components";
-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 { 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 { 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 { isEqual, noop, startCase, uniqueId } from "lodash";
-import { debounce as debounce$1, union, uniqueId as uniqueId$1 } from "lodash/fp.js";
+import { debounce, isEqual, noop, 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";
+import { DateTime } from "luxon";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 import { parseDate } from "@internationalized/date";
@@ -207,7 +207,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$1, { children: [/* @__PURE__ */ jsxs(DataTableCompactBar, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(DataTableCompactBar, {
 		"data-tour-target": dataTourTarget,
 		justify: "space-between",
 		align: "center",
@@ -617,7 +617,7 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 			children: displayLabel
 		}, key);
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx(ProductTourStyles, {}),
 		(title || showViews || canEditViews && onSaveView || tableActions || bulkActions) && /* @__PURE__ */ jsx(ViewsBar, {
 			ref: tabListRef,
@@ -645,7 +645,7 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 					tableActions
 				]
 			}),
-			children: showViews && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			children: showViews && /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsx(LockedViewTab, {
 					id: `${TAB_ID_PREFIX}default`,
 					selected: !currentView,
@@ -1158,6 +1158,7 @@ const OPERATORS_BY_TYPE = {
 		"is",
 		"before",
 		"after",
+		"between",
 		"is_empty",
 		"is_not_empty"
 	],
@@ -1172,6 +1173,14 @@ const OPERATORS_BY_TYPE = {
 };
 /** Operators that have no value control (the operator itself is the predicate). */
 const VALUELESS_OPERATORS = new Set(["is_empty", "is_not_empty"]);
+/**
+* Operators whose value is a {@link DateRangeFilterValue} rather than the
+* scalar its field type would otherwise carry. The value control, the draft
+* seed, and every validator branch on this rather than on field type alone —
+* a `date` field carries an ISO day string for `is` / `before` / `after` and
+* a `{ startDate, endDate }` pair for `between`.
+*/
+const RANGE_OPERATORS = new Set(["between"]);
 function getOperatorsForType(type) {
 	return OPERATORS_BY_TYPE[type] ?? [];
 }
@@ -1199,6 +1208,19 @@ function getDefaultOperatorForType(type) {
 function isValuelessOperator(operator) {
 	return VALUELESS_OPERATORS.has(operator);
 }
+function isRangeOperator(operator) {
+	return RANGE_OPERATORS.has(operator);
+}
+/**
+* Whether `value` carries both endpoints of a range. Shared by the pill,
+* the validators, and the serialize boundary so "complete enough to send"
+* has one definition.
+*/
+function isCompleteDateRange(value) {
+	if (value == null || typeof value !== "object" || Array.isArray(value)) return false;
+	const { startDate, endDate } = value;
+	return typeof startDate === "string" && startDate.length > 0 && typeof endDate === "string" && endDate.length > 0;
+}
 /**
 * Whether a concrete field's operator selector should be shown. A field
 * pinned to one operator renders it as static text rather than a caret that
@@ -1220,7 +1242,8 @@ const OPERATOR_LABELS = {
 	is_true: "is true",
 	is_false: "is false",
 	before: "before",
-	after: "after"
+	after: "after",
+	between: "is between"
 };
 /**
 * Field-type-specific label overrides. The operator vocabulary itself
@@ -1253,6 +1276,40 @@ function emptyValueForFieldType(type) {
 		default: return "";
 	}
 }
+/**
+* Empty endpoints are written as `''` rather than omitted so the object still
+* reads as a date range after a JSON round-trip — `undefined` keys don't
+* survive `JSON.stringify`, and a bare `{}` is indistinguishable from a
+* corrupted value at the validation boundary.
+*/
+function emptyDateRange() {
+	return {
+		startDate: "",
+		endDate: ""
+	};
+}
+/**
+* Empty-but-present value for a concrete `(field, operator)` pair. Prefer this
+* over {@link emptyValueForFieldType} anywhere an operator is in hand: the same
+* `date` field seeds an empty string for `before` and an empty range for
+* `between`.
+*/
+function emptyValueForRule(field, operator) {
+	if (isValuelessOperator(operator)) return null;
+	if (isRangeOperator(operator) || field.type === "date_range") return emptyDateRange();
+	return emptyValueForFieldType(field.type);
+}
+/**
+* Carry `value` across an operator change, replacing it with a fresh draft
+* when the two operators disagree about value shape. Switching a date pill
+* from `after` to `between` must not leave the old ISO day string behind —
+* the range control can't read it and the wire format would reject it.
+*/
+function reconcileValueForOperator(field, nextOperator, previousOperator, value) {
+	if (isValuelessOperator(nextOperator)) return null;
+	if (isRangeOperator(nextOperator) !== isRangeOperator(previousOperator)) return emptyValueForRule(field, nextOperator);
+	return value ?? emptyValueForRule(field, nextOperator);
+}
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/display.ts
 function valueDisplayString(value, optionLabels) {
@@ -1266,10 +1323,16 @@ function valueDisplayString(value, optionLabels) {
 	if (typeof value === "boolean") return value ? "true" : "false";
 	if (typeof value === "number") return String(value);
 	if (typeof value === "string") return value.length > 0 ? display(value) : void 0;
+	if (typeof value === "object") {
+		const { startDate, endDate } = value;
+		if (startDate && endDate) return `${startDate} – ${endDate}`;
+		return startDate || endDate || void 0;
+	}
 }
 function draftValueFor(field, operator) {
 	if (isValuelessOperator(operator)) return null;
 	if (field.type === "boolean") return true;
+	if (isRangeOperator(operator)) return emptyValueForRule(field, operator);
 	if (field.type === "multi_choices") return [];
 	return "";
 }
@@ -1380,7 +1443,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$1, { children: [
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx(ComboboxField, {
 			label: "Value",
 			labelProps: { size },
@@ -1422,7 +1485,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, { children: renderValueControl(field, rule.operator, rule.value, (next) => onValueChange(groupIndex, ruleIndex, next)) })
 		}) : null
 	] });
 }
@@ -1745,12 +1808,17 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 	const handleOperatorChange = useCallback((groupIndex, ruleIndex, nextOperator) => {
 		const prev = compound.groups[groupIndex]?.rules[ruleIndex];
 		if (!prev) return;
+		const field = registry.get(prev.fieldId);
 		onChange(setRuleInGroup(compound, groupIndex, ruleIndex, {
 			fieldId: prev.fieldId,
 			operator: nextOperator,
-			value: isValuelessOperator(nextOperator) ? null : prev.value
+			value: field ? reconcileValueForOperator(field, nextOperator, prev.operator, prev.value) : null
 		}));
-	}, [compound, onChange]);
+	}, [
+		compound,
+		onChange,
+		registry
+	]);
 	const handleValueChange = useCallback((groupIndex, ruleIndex, nextValue) => {
 		const prev = compound.groups[groupIndex]?.rules[ruleIndex];
 		if (!prev) return;
@@ -1802,7 +1870,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, { children: /* @__PURE__ */ jsxs(GroupCard, {
+					return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs(GroupCard, {
 						"data-test": `advanced-filter-rules__group-${groupIndex}`,
 						role: "group",
 						"aria-label": `Filter group ${groupIndex + 1}`,
@@ -2074,6 +2142,63 @@ function ChoicesValueControl({ field, operator, value, onChange, onCommit, ariaL
 	});
 }
 //#endregion
+//#region components/DataTable/TableControls/FiltersV2/value-controls/DateRangeValueControl/DateRangeValueControl.tsx
+const CALENDAR_DATE = /^(\d{4}-\d{2}-\d{2})/;
+const parseIsoDate$1 = (value) => {
+	if (typeof value !== "string") return;
+	const calendarDay = CALENDAR_DATE.exec(value)?.[1];
+	if (calendarDay == null) return;
+	try {
+		const parsed = parseDate(calendarDay);
+		return DateTime.fromObject({
+			year: parsed.year,
+			month: parsed.month,
+			day: parsed.day
+		});
+	} catch {
+		return;
+	}
+};
+const readIsoEndpoints = (value) => {
+	if (value == null || typeof value !== "object" || Array.isArray(value)) return {};
+	return value;
+};
+const useDateRange = (value) => {
+	const { startDate, endDate } = readIsoEndpoints(value);
+	return useMemo(() => ({
+		startDate: parseIsoDate$1(startDate),
+		endDate: parseIsoDate$1(endDate)
+	}), [startDate, endDate]);
+};
+const DateRangeValueControl = ({ field, operator, value, onChange, ariaLabel, hidePresets, portalContainer, visibleMonths }) => {
+	const size = useFilterBarSize();
+	const dateRange = useDateRange(value);
+	const handleChange = useCallback((range) => {
+		if (!range?.start || !range.end || range.start.compare(range.end) > 0) {
+			onChange(null);
+			return;
+		}
+		onChange({
+			startDate: range.start.toString(),
+			endDate: range.end.toString()
+		});
+	}, [onChange]);
+	if (isValuelessOperator(operator)) return null;
+	const hasCompleteRange = dateRange.startDate != null && dateRange.endDate != null;
+	return /* @__PURE__ */ jsx(DateRangePicker, {
+		"aria-label": ariaLabel ?? `${field.label} value`,
+		calendarZIndex: Z_INDICES.modalDropdown,
+		dateRange,
+		hidePresets,
+		label: null,
+		onChange: handleChange,
+		portalContainer,
+		showClear: false,
+		size,
+		visibleMonths
+	}, hasCompleteRange ? "range" : "empty");
+};
+//#endregion
 //#region components/DataTable/TableControls/FiltersV2/value-controls/DateValueControl/DateValueControl.tsx
 const parseIsoDate = (value) => {
 	if (typeof value !== "string") return null;
@@ -2159,7 +2284,7 @@ const FloatValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
 	const size = useFilterBarSize();
 	const [localValue, setLocalValue] = useState(() => numericDisplayValue(value));
 	const isFocusedRef = useRef(false);
-	const debouncedOnChange = useMemo(() => debounce$1(300, onChange), [onChange]);
+	const debouncedOnChange = useMemo(() => debounce(onChange, 300), [onChange]);
 	useEffect(() => {
 		const cancelPendingChange = () => {
 			debouncedOnChange.cancel();
@@ -2230,7 +2355,7 @@ const IntegerValueControl = ({ field, operator, value, onChange, ariaLabel }) =>
 	const size = useFilterBarSize();
 	const [localValue, setLocalValue] = useState(() => numericDisplayValue(value));
 	const isFocusedRef = useRef(false);
-	const debouncedOnChange = useMemo(() => debounce$1(300, onChange), [onChange]);
+	const debouncedOnChange = useMemo(() => debounce(onChange, 300), [onChange]);
 	useEffect(() => {
 		const cancelPendingChange = () => {
 			debouncedOnChange.cancel();
@@ -2280,7 +2405,7 @@ function StringValueControl({ field, operator, value, onChange, ariaLabel, input
 	const resolvedInputType = inputType ?? (field.type === "email" ? "email" : "text");
 	const size = useFilterBarSize();
 	const [localValue, setLocalValue] = useState(typeof value === "string" ? value : "");
-	const debouncedOnChange = useMemo(() => debounce$1(DEBOUNCE_MS, onChange), [onChange]);
+	const debouncedOnChange = useMemo(() => debounce(onChange, DEBOUNCE_MS), [onChange]);
 	useEffect(() => () => {
 		debouncedOnChange.cancel();
 	}, [debouncedOnChange]);
@@ -2318,7 +2443,8 @@ const RESOLVERS = {
 		...opts
 	}),
 	boolean: (opts) => /* @__PURE__ */ jsx(BooleanValueControl, { ...opts }),
-	date: (opts) => /* @__PURE__ */ jsx(DateValueControl, { ...opts }),
+	date: (opts) => isRangeOperator(opts.operator) ? /* @__PURE__ */ jsx(DateRangeValueControl, { ...opts }) : /* @__PURE__ */ jsx(DateValueControl, { ...opts }),
+	date_range: (opts) => /* @__PURE__ */ jsx(DateRangeValueControl, { ...opts }),
 	integer: (opts) => /* @__PURE__ */ jsx(IntegerValueControl, { ...opts }),
 	float: (opts) => /* @__PURE__ */ jsx(FloatValueControl, { ...opts }),
 	array: (opts) => /* @__PURE__ */ jsx(ArrayValueControl, { ...opts })
@@ -2540,7 +2666,7 @@ const PillShell = forwardRef(function PillShell({ variant, children, bodyAriaLab
 			"aria-haspopup": "dialog",
 			"aria-expanded": ariaExpanded,
 			children
-		}), onDismiss ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DismissibleCaretWrapper, {
+		}), onDismiss ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DismissibleCaretWrapper, {
 			"aria-hidden": "true",
 			$size: resolvedSize,
 			children: /* @__PURE__ */ jsx(CaretIcon, {})
@@ -2618,9 +2744,10 @@ function normalizeValueToDisplay(value, optionLabels) {
 		return value.map((entry) => lookup(String(entry)));
 	}
 	if (typeof value === "object") {
-		const record = value;
-		if (record.startDate && record.endDate) return [`${record.startDate} – ${record.endDate}`];
-		if (record.startDate || record.endDate) return [record.startDate ?? record.endDate ?? ""];
+		const { startDate, endDate } = value;
+		if (startDate && endDate) return [`${startDate} – ${endDate}`];
+		const single = startDate || endDate;
+		return single ? [single] : [];
 	}
 	if (typeof value === "boolean") return [value ? "True" : "False"];
 	if (typeof value === "number") return [String(value)];
@@ -2640,7 +2767,7 @@ function buildAccessibleName(field, rule, displayedValues) {
 	return `${field.label} ${operatorLabel} ${displayedValues.join(", ")}`;
 }
 const FilterPill = forwardRef(function FilterPill({ field, rule, onClick, onDismiss, variant = "default", optionLabels, size, ...rest }, ref) {
-	const reactId = useMemo(() => uniqueId$1("filter-pill-"), []);
+	const reactId = useMemo(() => uniqueId("filter-pill-"), []);
 	const resolvedSize = useFilterBarSize(size);
 	const displayedValues = useMemo(() => rule && !isValuelessOperator(rule.operator) ? normalizeValueToDisplay(rule.value, optionLabels) : [], [rule, optionLabels]);
 	const accessibleName = buildAccessibleName(field, rule, displayedValues);
@@ -2789,7 +2916,7 @@ const Footer = styled(HStack).attrs({
 * back through `onChangeOperator` and forwards open/close transitions
 * through Radix's controlled props.
 */
-const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, onClose, trigger, open, onOpenChange, size, portalContainer }) => {
+const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, onClose, trigger, open, onOpenChange, size }) => {
 	const resolvedSize = useFilterBarSize(size);
 	const valueless = isValuelessOperator(operator);
 	const CaretIcon = resolvedSize === "sm" ? CaretDownIcon$1 : CaretDownIcon;
@@ -2827,15 +2954,14 @@ const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, on
 	return /* @__PURE__ */ jsxs(Popover_default, {
 		open,
 		onOpenChange: handleOpenChange,
-		portalProps: portalContainer ? { container: portalContainer } : void 0,
 		children: [/* @__PURE__ */ jsx(Popover_default.Trigger, {
 			asChild: true,
 			children: trigger
 		}), /* @__PURE__ */ jsx(Popover_default.Card, {
 			align: "start",
 			sideOffset: 4,
-			avoidCollisions: portalContainer == null,
-			zIndex: Z_INDICES.dropdown,
+			avoidCollisions: true,
+			zIndex: Z_INDICES.floatingBar,
 			"aria-label": `Edit filter for ${field.label}`,
 			noPadding: true,
 			children: /* @__PURE__ */ jsxs(PopoverPanel, {
@@ -2857,7 +2983,6 @@ const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, on
 							}),
 							align: "start",
 							portal: true,
-							portalProps: portalContainer ? { container: portalContainer } : void 0,
 							zIndex: Z_INDICES.layeredDropdown,
 							children: operatorOptions.map((op) => /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
 								size: resolvedSize,
@@ -2988,7 +3113,8 @@ const OPERATOR_SET = new Set([
 	"is_true",
 	"is_false",
 	"before",
-	"after"
+	"after",
+	"between"
 ]);
 /**
 * Returns `true` when `value` is a structurally-valid `FilterStateV2`,
@@ -3037,7 +3163,7 @@ function isFilterRuleValue(value) {
 	}
 	if (typeof value === "object") {
 		const record = value;
-		if ("startDate" in record || "endDate" in record) {
+		if (Object.keys(record).every((key) => key === "startDate" || key === "endDate")) {
 			const { startDate, endDate } = record;
 			return (startDate == null || typeof startDate === "string") && (endDate == null || typeof endDate === "string");
 		}
@@ -3127,6 +3253,7 @@ function isDraftRuleValue(rule, registry) {
 	if (isValuelessOperator(rule.operator)) return false;
 	const field = registry.get(rule.fieldId);
 	if (!field) return false;
+	if (isRangeOperator(rule.operator)) return !isCompleteDateRange(rule.value);
 	switch (field.type) {
 		case "multi_choices":
 		case "tags_conditions": return Array.isArray(rule.value) && rule.value.length === 0;
@@ -3141,18 +3268,14 @@ function isRuleAllowed(rule, registry, options = { allowDraftValues: false }) {
 	if (!registry.operatorsFor(rule.fieldId).includes(rule.operator)) return false;
 	if (isValuelessOperator(rule.operator)) return rule.value == null;
 	if (options.allowDraftValues && isDraftRuleValue(rule, registry)) return true;
+	if (isRangeOperator(rule.operator)) return isCompleteDateRange(rule.value);
 	if (registry.get(rule.fieldId)?.type === "boolean") return typeof rule.value === "boolean";
 	if (registry.get(rule.fieldId)?.type === "date") return typeof rule.value === "string" && rule.value.length > 0;
 	if (registry.get(rule.fieldId)?.type === "multi_choices") {
 		if (Array.isArray(rule.value)) return rule.value.length > 0;
 		return typeof rule.value === "string" && rule.value.length > 0;
 	}
-	if (registry.get(rule.fieldId)?.type === "date_range") {
-		const value = rule.value;
-		if (value == null || typeof value !== "object" || Array.isArray(value)) return false;
-		const { startDate, endDate } = value;
-		return typeof startDate === "string" && startDate.length > 0 && typeof endDate === "string" && endDate.length > 0;
-	}
+	if (registry.get(rule.fieldId)?.type === "date_range") return isCompleteDateRange(rule.value);
 	if (registry.get(rule.fieldId)?.type === "tags_conditions") return Array.isArray(rule.value) && rule.value.length > 0;
 	return rule.value != null && typeof rule.value !== "boolean";
 }
@@ -3171,16 +3294,13 @@ function hasCompleteValue(rule, registry) {
 	if (isValuelessOperator(rule.operator)) return rule.value == null;
 	const { value } = rule;
 	if (value == null) return false;
+	if (isRangeOperator(rule.operator)) return isCompleteDateRange(value);
 	switch (registry.get(rule.fieldId)?.type) {
 		case "boolean": return typeof value === "boolean";
 		case "date": return typeof value === "string" && value.length > 0;
 		case "multi_choices": return Array.isArray(value) ? value.length > 0 : typeof value === "string" && value.length > 0;
 		case "tags_conditions": return Array.isArray(value) && value.length > 0;
-		case "date_range": {
-			if (typeof value !== "object" || Array.isArray(value)) return false;
-			const { startDate, endDate } = value;
-			return typeof startDate === "string" && startDate.length > 0 && typeof endDate === "string" && endDate.length > 0;
-		}
+		case "date_range": return isCompleteDateRange(value);
 		default:
 			if (typeof value === "string") return value.length > 0;
 			if (Array.isArray(value)) return value.length > 0;
@@ -3495,7 +3615,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, portalContainer }) {
+function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = true, singleUseFields = false, size = "md", valueControlResolver }) {
 	const filterState = useFilterStateV2({
 		registry,
 		initialState,
@@ -3622,7 +3742,7 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 					enabled: true,
 					isOpen: rulesPopoverOpen
 				})
-			}) : null, hasPills ? /* @__PURE__ */ jsxs(Fragment$1, { children: [filterState.advancedRulesEnabled ? /* @__PURE__ */ jsx(Divider, {
+			}) : null, hasPills ? /* @__PURE__ */ jsxs(Fragment, { children: [filterState.advancedRulesEnabled ? /* @__PURE__ */ jsx(Divider, {
 				"aria-hidden": "true",
 				$size: size
 			}) : null, /* @__PURE__ */ jsxs(PillsScrollRegion, {
@@ -3644,7 +3764,7 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 								filterState.updateTopLevelRule(rule.id, {
 									...rule,
 									operator: op,
-									value: isValuelessOperator(op) ? null : rule.value ?? emptyValueForFieldType(field.type)
+									value: reconcileValueForOperator(field, op, rule.operator, rule.value)
 								});
 							},
 							valueControlSlot: resolveValueControl({
@@ -3660,7 +3780,6 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 							onClose: () => setEditingRuleId(null),
 							open: isOpen,
 							onOpenChange: (open) => setEditingRuleId(open ? rule.id : null),
-							portalContainer,
 							trigger: /* @__PURE__ */ jsx(FilterPill, {
 								ref: (node) => {
 									if (node) pillNodesRef.current.set(rule.id, node);
@@ -3926,6 +4045,6 @@ function normalizeFieldSource(raw) {
 	return raw === "system" ? "system" : "custom";
 }
 //#endregion
-export { DataTableCompactBar as S, useTableControls as _, hasCompleteValue as a, TableControls as b, EMPTY_FILTER_STATE as c, getDefaultOperatorForType as d, getOperatorsForField as f, TableControlsProvider as g, TableControlsContext as h, useFilterStateV2 as i, resolveValueControl as l, isValuelessOperator as m, buildFieldRegistry as n, isFilterStateV2 as o, getOperatorsForType as p, FilterBar_default as r, pruneToRegistry as s, FieldRegistry as t, useFilterBarSize as u, TableViewConfiguration as v, ControlBar as x, TableViewConfigurationDropdown as y };
+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 };
 
-//# sourceMappingURL=TableControls-BK8DCsqi.mjs.map
+//# sourceMappingURL=TableControls-CZ9iu3ma.mjs.map