@persona/design-system 0.2.1 → 0.3.1

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

@@ -1,38 +1,38 @@
-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 { 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-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 { 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 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 { 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 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-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 { 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 { 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 { 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, 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";
+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";
@@ -834,8 +834,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 +939,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 +963,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 +1052,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 +1085,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" }) })
 	] });
 };
@@ -1158,6 +1183,7 @@ const OPERATORS_BY_TYPE = {
 		"is",
 		"before",
 		"after",
+		"between",
 		"is_empty",
 		"is_not_empty"
 	],
@@ -1172,6 +1198,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 +1233,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 +1267,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 +1301,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 +1348,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 "";
 }
@@ -1745,12 +1833,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;
@@ -2074,6 +2167,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 +2309,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 +2380,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 +2430,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 +2468,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 })
@@ -2618,9 +2769,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 +2792,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 +2941,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 +2979,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 +3008,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 +3138,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 +3188,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 +3278,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 +3293,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 +3319,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 +3640,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,
@@ -3644,7 +3789,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 +3805,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 +4070,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-3bXyd8gS.mjs.map