@persona/design-system 0.7.1 → 0.8.0

package/dist/{TableControls-CYTpBlQN.mjs → TableControls-RS_ozBsI.mjs}

@@ -8,24 +8,26 @@ import { i as Paragraph, r as Label$1 } from "./Text-BdluS7Fy.mjs";
 import "./variables/transitions.mjs";
 import { a as Tooltip } from "./Tooltip-C0FuZS1C.mjs";
 import { transparent, withAlpha } from "./lib/color.mjs";
-import { isActive, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
+import { letPointerDownReachDocument } from "./lib/letPointerDownReachDocument.mjs";
+import { isActive, isDisabled, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { useScrollOverflow } from "./lib/useScrollOverflow.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
 import { focusOutline, focusWithinOutline } from "./mixins/focus.mjs";
-import { n as Stack, t as HStack } from "./Stack-ChsImaEY.mjs";
-import { n as Button, t as IconButton } from "./IconButton-CqTPMhjV.mjs";
-import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-BepWbJHz.mjs";
-import { r as InputGroup } from "./Input-Bc2yWH3j.mjs";
+import { semanticScrollbar } from "./mixins/scrollbar.mjs";
+import { n as Stack, t as HStack } from "./Stack-Bkn0TUDe.mjs";
+import { n as Button, t as IconButton } from "./IconButton-CCLMYWVN.mjs";
+import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-Bj84q1Mr.mjs";
+import { r as InputGroup } from "./Input-Cl4o41k4.mjs";
 import Input_default from "./components/Input/index.mjs";
-import { c as MenuList, s as MenuItem } from "./Menu-Cd6oxjAe.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-CuKSNxc9.mjs";
-import { t as Combobox } from "./Combobox-1M6EwVmq.mjs";
-import { s as Popover_default } from "./Popover-opVa9Xhc.mjs";
-import { t as Toggle } from "./Toggle-Dcn2Rqgm.mjs";
-import { i as selectedPresetFor, n as parseDateFilterValue, r as resolveDateFilterValue, t as formatDateFilterValue } from "./date-filter-CZeChs9T.mjs";
-import { t as ListBox } from "./ListBox-CFBhILRy.mjs";
-import { m as FormField, o as ComboboxField } from "./FormField-ByT0avVx.mjs";
-import { r as DatePicker, t as DateRangePicker } from "./DatePicker-D9JurBBj.mjs";
+import { c as MenuList, s as MenuItem } from "./Menu-CwlI7BMN.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-rm9Nnxn7.mjs";
+import { t as Combobox } from "./Combobox-C_kCY3P3.mjs";
+import { s as Popover_default } from "./Popover-ZAj03lws.mjs";
+import { t as Toggle } from "./Toggle-D4ZaUcVt.mjs";
+import { i as selectedPresetFor, n as parseDateFilterValue, r as resolveDateFilterValue, t as formatDateFilterValue } from "./date-filter-BnzR6NxT.mjs";
+import { t as ListBox } from "./ListBox-sqeLBiKS.mjs";
+import { m as FormField, o as ComboboxField } from "./FormField-Crp3F-hv.mjs";
+import { r as DatePicker, t as DateRangePicker } from "./DatePicker-C7z1yodK.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";
@@ -35,10 +37,10 @@ import { debounce, isEqual, noop, partition, startCase, union, uniqueId } from "
 import { useId } from "react-aria";
 import Fuse from "fuse.js";
 import { DragIcon as DragIcon$1 } from "@persona/icons/24px";
-import { DateTime } from "luxon";
+import { DateTime, Settings } from "luxon";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
-import { parseDate } from "@internationalized/date";
+import { parseAbsolute, parseDate, toCalendarDate, toZoned } from "@internationalized/date";
 import { v4 } from "uuid";
 //#region components/DataTable/FormControlLabel/FormControlLabel.ts
 const FormControlLabel = styled(Label$1).attrs(() => ({
@@ -76,6 +78,12 @@ const CursorAnchor = styled.div`
   pointer-events: none;
 `;
 const StyledInput = styled(Input_default)`
+  &&,
+  &&${isHovered}${isNotDisabled},
+  &&${isDisabled} {
+    background: transparent;
+  }
+
   ${({ theme, flattenDisplay }) => flattenDisplay && css`
       border-width: 0px;
 
@@ -207,7 +215,7 @@ const CompactSearchInput = styled(SearchInput)`
 * @see ControlBar.tsx
 * @see ControlBar.spec.tsx
 */
-const CompactBar = ({ title, searchProps, showFilters, setShowFilters, filtersId, isLoading, propertiesButton, tableActions, "data-tour-target": dataTourTarget, filterPanel }) => {
+const CompactBar = ({ title, searchProps, showFilters, setShowFilters, filtersId, isLoading, isFilterPanelLoading, propertiesButton, tableActions, "data-tour-target": dataTourTarget, filterPanel }) => {
 	const autoExpandSearch = !title;
 	const [showSearch, setShowSearch] = useState(autoExpandSearch);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(DataTableCompactBar, {
@@ -255,7 +263,8 @@ const CompactBar = ({ title, searchProps, showFilters, setShowFilters, filtersId
 						"aria-label": showFilters ? "Hide filters" : "Show filters",
 						"aria-expanded": showFilters,
 						"aria-controls": filtersId,
-						disabled: isLoading,
+						disabled: isLoading || isFilterPanelLoading,
+						isPending: isFilterPanelLoading,
 						active: showFilters,
 						width: "icon",
 						size: "sm",
@@ -289,9 +298,17 @@ const rectContainsRect = (parent, child) => {
 //#region components/DataTable/TableControls/ControlBar.tsx
 const TAB_ID_PREFIX = "table-controls__view-tab_";
 const OVERFLOW_TAB_ID_PREFIX = "table-controls__view-tab-overflow_";
+const OVERFLOW_WIDTH_SHRINK_THRESHOLD = 16;
 function enterProxiesClick(e) {
 	if (e.key === "Enter") e.target.dispatchEvent(new Event("click", { bubbles: true }));
 }
+const ViewNameInput = styled(Input_default)`
+  &&,
+  &&${isHovered}${isNotDisabled},
+  &&${isDisabled} {
+    background: transparent;
+  }
+`;
 const AddViewButton = styled(IconButton)`
   color: ${({ theme }) => semanticColor(theme, "FgSecondary", theme.color.text.secondary)};
 `;
@@ -304,6 +321,7 @@ const LockedTab = styled(Tab)`
 const OverflowMenuList = styled(MenuList)`
   max-height: 300px;
   overflow: auto;
+  ${semanticScrollbar}
 `;
 const ExpandedSearchInput = styled(SearchInput)`
   flex-basis: 440px;
@@ -332,6 +350,12 @@ const TabOverflowContainer = styled.div`
 `;
 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 lastSubmittedNameRef = useRef(null);
+	const submitNameChange = (newName) => {
+		if (newName === view.name || newName === lastSubmittedNameRef.current) return;
+		lastSubmittedNameRef.current = newName;
+		handleNameChange?.(view, newName);
+	};
 	const tab = /* @__PURE__ */ jsx(StyledTab, {
 		id: `${tabIdPrefix}${view.id}`,
 		selected,
@@ -348,7 +372,8 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 		open: showTabContextMenu,
 		onOpenChange: (open) => {
 			if (selected) setShowTabContextMenu(open);
-			if (!open && inputRef.current) handleNameChange?.(view, inputRef.current.value);
+			if (open) lastSubmittedNameRef.current = null;
+			else if (inputRef.current) submitNameChange(inputRef.current.value);
 		},
 		contentProps: {
 			align: "start",
@@ -356,11 +381,11 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 		},
 		children: /* @__PURE__ */ jsxs(Stack, {
 			spacing: Spacing[3],
-			children: [/* @__PURE__ */ jsx(Input_default, {
+			children: [/* @__PURE__ */ jsx(ViewNameInput, {
 				defaultValue: view.name,
-				onBlur: (e) => handleNameChange?.(view, e.currentTarget.value),
+				onBlur: (e) => submitNameChange(e.currentTarget.value),
 				onKeyDown: (e) => {
-					if (e.key === "Enter") handleNameChange?.(view, e.currentTarget.value);
+					if (e.key === "Enter") submitNameChange(e.currentTarget.value);
 				},
 				disabled: !handleNameChange,
 				ref: inputRef
@@ -524,7 +549,7 @@ const ProductTourStyles = createGlobalStyle`
     }
   }
 `;
-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 ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView, onDuplicateView, onDeleteView, onViewNameChange, onSaveView, onSetDefaultView, isViewDirty, canEditViews, showFilters, setShowFilters, searchProps, filtersId, propertiesButton, tableActions, isLoading, isFilterPanelLoading, showViews, selectedRows = [], bulkActions, onResetCurrentView, onClearSelection, title, "data-tour-target": dataTourTarget, compact, onError, filterPanel }) => {
 	const tabListRef = useRef(null);
 	const tabOverflowRef = useRef(null);
 	const [hiddenViews, setHiddenViews] = useState([]);
@@ -549,7 +574,7 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 		}
 		setHiddenViews((firstHiddenIndex === -1 ? [] : views?.slice(firstHiddenIndex)) || []);
 		const tabOverflowWidth = tabOverflowRef.current?.getBoundingClientRect().width;
-		if (tabOverflowWidth) setTabOverflowWidth(tabOverflowWidth);
+		if (tabOverflowWidth) setTabOverflowWidth((prev) => prev != null && prev > tabOverflowWidth && prev - tabOverflowWidth < OVERFLOW_WIDTH_SHRINK_THRESHOLD ? prev : tabOverflowWidth);
 	}, [setHiddenViews, views]);
 	useLayoutEffect(() => {
 		if (!showViews || !tabListRef.current) return;
@@ -598,6 +623,7 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 		setShowFilters,
 		filtersId,
 		isLoading,
+		isFilterPanelLoading,
 		propertiesButton,
 		tableActions,
 		filterPanel
@@ -740,7 +766,8 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 					"aria-label": showFilters ? "Hide filters" : "Show filters",
 					"aria-expanded": showFilters,
 					"aria-controls": filtersId,
-					disabled: isLoading,
+					disabled: isLoading || isFilterPanelLoading,
+					isPending: isFilterPanelLoading,
 					active: showFilters,
 					width: "icon",
 					size: "md",
@@ -755,7 +782,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, onSetDefaultView, 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, isFilterPanelLoading, 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;
@@ -786,13 +813,14 @@ const TableControls = ({ filterPanel, searchProps, defaultShowFilters, showFilte
 			onSetDefaultView: compact ? void 0 : onSetDefaultView,
 			isViewDirty,
 			canEditViews: compact ? false : canEditViews,
-			showFilters,
-			setShowFilters: filterPanel != null && !showFiltersAlways ? setShowFilters : void 0,
+			showFilters: showFilters && (showFiltersAlways || !isFilterPanelLoading),
+			setShowFilters: (filterPanel != null || isFilterPanelLoading) && !showFiltersAlways ? setShowFilters : void 0,
 			filtersId,
 			searchProps,
 			propertiesButton: enhancedPropertiesButton,
 			tableActions,
 			isLoading,
+			isFilterPanelLoading,
 			selectedRows,
 			bulkActions,
 			onClearSelection,
@@ -1239,6 +1267,7 @@ const VALUELESS_OPERATORS = new Set(["is_empty", "is_not_empty"]);
 * a `{ startDate, endDate }` pair for `between`.
 */
 const RANGE_OPERATORS = new Set(["between"]);
+const TIME_COMPONENT$1 = /T\d{2}:\d{2}/;
 function getOperatorsForType(type) {
 	return OPERATORS_BY_TYPE[type] ?? [];
 }
@@ -1376,6 +1405,17 @@ function emptyValueForRule(field, operator) {
 function reconcileValueForOperator(field, nextOperator, previousOperator, value) {
 	if (isValuelessOperator(nextOperator)) return null;
 	if (isRangeOperator(nextOperator) !== isRangeOperator(previousOperator)) return emptyValueForRule(field, nextOperator);
+	if (field.type === "date" && nextOperator === "is" && typeof value === "string" && TIME_COMPONENT$1.test(value)) return DateTime.fromISO(value).setZone(Settings.defaultZone).toISODate();
+	if (field.type === "date" && (previousOperator === "before" || previousOperator === "after") && (nextOperator === "before" || nextOperator === "after") && previousOperator !== nextOperator && typeof value === "string" && TIME_COMPONENT$1.test(value)) {
+		const dateTime = DateTime.fromISO(value, { setZone: true });
+		return nextOperator === "after" ? dateTime.set({
+			second: 0,
+			millisecond: 0
+		}).toISO() : dateTime.set({
+			second: 59,
+			millisecond: 999
+		}).toISO();
+	}
 	return value ?? emptyValueForRule(field, nextOperator);
 }
 //#endregion
@@ -1398,6 +1438,14 @@ function resolveDateRangeRuleValue(rule, fieldType) {
 	return parsed ? resolveDateFilterValue(parsed) : null;
 }
 //#endregion
+//#region components/DataTable/TableControls/FiltersV2/format-date-value.ts
+const TIME_COMPONENT = /T\d{2}:\d{2}/;
+function formatDateValueForDisplay(value) {
+	if (!TIME_COMPONENT.test(value)) return value;
+	const dateTime = DateTime.fromISO(value).setZone(Settings.defaultZone);
+	return dateTime.isValid ? dateTime.toFormat("MMM d, yyyy h:mm a") : value;
+}
+//#endregion
 //#region components/DataTable/TableControls/FiltersV2/relative-date-label.ts
 /**
 * The preset name a rule should display instead of its dates, or `undefined`
@@ -1414,11 +1462,11 @@ function relativePresetLabel(value, relativeDate) {
 }
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/display.ts
-function valueDisplayString(value, optionLabels, relativeDate) {
+function valueDisplayString(value, optionLabels, relativeDate, fieldType) {
 	if (value == null) return;
 	const relativeLabel = relativePresetLabel(value, relativeDate);
 	if (relativeLabel) return relativeLabel;
-	const display = (raw) => optionLabels?.[raw] ?? raw;
+	const display = (raw) => optionLabels?.[raw] ?? (fieldType === "date" || fieldType === "date_range" ? formatDateValueForDisplay(raw) : raw);
 	if (Array.isArray(value)) {
 		if (value.length === 0) return;
 		if (value.length === 1) return display(String(value[0]));
@@ -1429,8 +1477,8 @@ function valueDisplayString(value, optionLabels, relativeDate) {
 	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;
+		if (startDate && endDate) return `${display(startDate)} – ${display(endDate)}`;
+		return startDate ? display(startDate) : endDate ? display(endDate) : void 0;
 	}
 }
 function draftValueFor(field, operator) {
@@ -1544,9 +1592,21 @@ function buildFieldPickerOptions(registry, visibleCustomFieldParents, excludeFie
 }
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/RuleEditorFields.tsx
+const StatementFields = styled.div`
+  display: contents;
+
+  && input,
+  && input${isHovered}${isNotDisabled},
+  && input${isDisabled},
+  && [role='group'],
+  && [role='group']${isHovered}${isNotDisabled},
+  && [role='group']${isDisabled} {
+    background: transparent;
+  }
+`;
 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(StatementFields, { children: [
 		/* @__PURE__ */ jsx(ComboboxField, {
 			label: "Value",
 			labelProps: { size },
@@ -1600,7 +1660,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), carriesDateRange(rule.operator, field?.type) ? rule.relativeDate : void 0);
+	const valueDisplay = isValuelessOperator(rule.operator) ? void 0 : valueDisplayString(rule.value, registry.optionLabelsFor(rule.fieldId), carriesDateRange(rule.operator, field?.type) ? rule.relativeDate : void 0, field?.type);
 	const textValue = [
 		condition,
 		field?.label ?? rule.fieldId,
@@ -1746,6 +1806,10 @@ const PopoverCard = styled(Card_default)`
   width: 384px;
   max-width: calc(100vw - ${Spacing[4]});
   margin-bottom: 0;
+
+  && {
+    background-color: ${({ theme }) => semanticColor(theme, "SurfaceElevated", theme.color.background.primary)};
+  }
 `;
 const Header = styled.div`
   display: flex;
@@ -1760,6 +1824,7 @@ const Body = styled.div`
   padding: 0 ${Spacing[3]} ${Spacing[3]};
   max-height: 60vh;
   overflow-y: auto;
+  ${semanticScrollbar}
 `;
 /**
 * Bordered container that wraps a single AndGroup. Visually mirrors the
@@ -1794,6 +1859,11 @@ const GroupHeaderActions = styled.div`
   align-items: center;
   gap: ${Spacing[1]};
 `;
+const GroupActionsMenu = styled(DropdownMenu_default)`
+  && {
+    background-color: ${({ theme }) => semanticColor(theme, "SurfaceElevated", theme.color.background.primary)};
+  }
+`;
 /**
 * A focused-down `ListBox` for the rules in one AndGroup. Strips the
 * default 204px width AND the standalone border (the parent `GroupCard`
@@ -1945,6 +2015,7 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 			role: "dialog",
 			"aria-label": "Advanced filter rules",
 			id: baseId,
+			onPointerDownCapture: letPointerDownReachDocument,
 			ref: popoverContentRef,
 			tabIndex: -1,
 			onKeyDown: (event) => {
@@ -1981,7 +2052,7 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 						children: [/* @__PURE__ */ jsxs(GroupHeader, { children: [/* @__PURE__ */ jsx(GroupTitle, {
 							$size: resolvedSize,
 							children: groupTitle
-						}), /* @__PURE__ */ jsxs(GroupHeaderActions, { children: [hideGroupMenu ? null : /* @__PURE__ */ jsx(DropdownMenu_default, {
+						}), /* @__PURE__ */ jsxs(GroupHeaderActions, { children: [hideGroupMenu ? null : /* @__PURE__ */ jsx(GroupActionsMenu, {
 							trigger: /* @__PURE__ */ jsx(IconButton, {
 								size: subtleIconSize,
 								"aria-label": `More actions for filter group ${groupIndex + 1}`,
@@ -2248,6 +2319,7 @@ 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 DATE_ONLY$1 = /^\d{4}-\d{2}-\d{2}$/;
 const parseIsoDate$1 = (value) => {
 	if (typeof value !== "string") return;
 	const calendarDay = CALENDAR_DATE.exec(value)?.[1];
@@ -2263,29 +2335,63 @@ const parseIsoDate$1 = (value) => {
 		return;
 	}
 };
-const useDateRange = (value, relativeDate) => {
+const parseIsoDateTime = (value, endpoint) => {
+	if (typeof value !== "string") return;
+	const dateTime = DateTime.fromISO(value, DATE_ONLY$1.test(value) ? { zone: Settings.defaultZone } : {}).setZone(Settings.defaultZone);
+	if (!dateTime.isValid) return;
+	return DATE_ONLY$1.test(value) ? dateTime[endpoint === "start" ? "startOf" : "endOf"]("day") : dateTime;
+};
+const useDateRange = (value, relativeDate, minuteMode) => {
 	const parsedRelativeDate = parseDateFilterValue(relativeDate);
 	const parsed = parsedRelativeDate?.kind === "relative" ? parsedRelativeDate : parseDateFilterValue(value);
 	const resolved = parsed ? resolveDateFilterValue(parsed) : void 0;
 	return useMemo(() => ({
-		startDate: parseIsoDate$1(resolved?.startDate),
-		endDate: parseIsoDate$1(resolved?.endDate)
-	}), [resolved?.startDate, resolved?.endDate]);
+		startDate: minuteMode ? parseIsoDateTime(resolved?.startDate, "start") : parseIsoDate$1(resolved?.startDate),
+		endDate: minuteMode ? parseIsoDateTime(resolved?.endDate, "end") : parseIsoDate$1(resolved?.endDate)
+	}), [
+		minuteMode,
+		resolved?.startDate,
+		resolved?.endDate
+	]);
 };
-const DateRangeValueControl = ({ field, operator, value, relativeDate, onChange, ariaLabel, hidePresets, portalContainer, visibleMonths, relativeDatesEnabled = false }) => {
+const DateRangeValueControl = ({ field, operator, value, relativeDate, onChange, ariaLabel, hidePresets, portalContainer, visibleMonths, relativeDatesEnabled = false, dateTimesEnabled = false }) => {
 	const size = useFilterBarSize();
-	const dateRange = useDateRange(value, relativeDate);
+	const minuteMode = dateTimesEnabled && field.timeGranularity === "minute";
+	const dateRange = useDateRange(value, relativeDate, minuteMode);
 	const noopChange = useCallback(() => void 0, []);
 	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()
+		if (!minuteMode) {
+			onChange({
+				startDate: range.start.toString(),
+				endDate: range.end.toString()
+			});
+			return;
+		}
+		const zone = Settings.defaultZone.name;
+		const toDateTime = (date) => DateTime.fromJSDate(toZoned(date, zone).toDate(), { zone });
+		const startDate = toDateTime(range.start).set({
+			second: 0,
+			millisecond: 0
 		});
-	}, [onChange]);
+		const endDate = toDateTime(range.end).set({
+			second: 59,
+			millisecond: 999
+		});
+		if (!startDate.isValid || !endDate.isValid) {
+			onChange(null);
+			return;
+		}
+		const startIso = startDate.toISO();
+		const endIso = endDate.toISO();
+		onChange(startIso && endIso ? {
+			startDate: startIso,
+			endDate: endIso
+		} : null);
+	}, [minuteMode, onChange]);
 	const handleDateFilterChange = useCallback((change) => {
 		const intent = dateRuleIntent(change, relativeDatesEnabled);
 		if (intent.kind === "clear") {
@@ -2297,8 +2403,8 @@ const DateRangeValueControl = ({ field, operator, value, relativeDate, onChange,
 			return;
 		}
 		onChange({
-			startDate: intent.range.start.toString(),
-			endDate: intent.range.end.toString()
+			startDate: toCalendarDate(intent.range.start).toString(),
+			endDate: toCalendarDate(intent.range.end).toString()
 		}, {
 			kind: "relative",
 			preset: intent.preset
@@ -2309,6 +2415,8 @@ const DateRangeValueControl = ({ field, operator, value, relativeDate, onChange,
 		relativeDatesEnabled
 	]);
 	const relativePreset = selectedPresetFor(parseDateFilterValue(relativeDate), relativeDatesEnabled);
+	const hasDayEdgeBounds = dateRange.startDate !== void 0 && dateRange.endDate !== void 0 && dateRange.startDate.toMillis() === dateRange.startDate.startOf("day").toMillis() && dateRange.endDate.toMillis() === dateRange.endDate.endOf("day").toMillis();
+	const selectedPreset = minuteMode && relativePreset === void 0 && !hasDayEdgeBounds ? null : relativePreset;
 	if (isValuelessOperator(operator)) return null;
 	const hasCompleteRange = dateRange.startDate != null && dateRange.endDate != null;
 	return /* @__PURE__ */ jsx(DateRangePicker, {
@@ -2319,19 +2427,29 @@ const DateRangeValueControl = ({ field, operator, value, relativeDate, onChange,
 		label: null,
 		onChange: noopChange,
 		onDateFilterChange: handleDateFilterChange,
-		selectedPreset: relativePreset,
+		selectedPreset,
 		portalContainer,
 		showClear: false,
 		size,
-		visibleMonths
+		visibleMonths,
+		granularity: minuteMode ? "minute" : "day"
 	}, hasCompleteRange ? "range" : "empty");
 };
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/value-controls/DateValueControl/DateValueControl.tsx
-const parseIsoDate = (value) => {
+const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
+const parseIsoDate = (value, field, operator, dateTimesEnabled) => {
 	if (typeof value !== "string") return null;
 	try {
-		return parseDate(value);
+		if (dateTimesEnabled && field.timeGranularity === "minute" && operator !== "is") {
+			if (DATE_ONLY.test(value)) {
+				const dateTime = DateTime.fromISO(value, { zone: Settings.defaultZone });
+				const iso = (operator === "after" ? dateTime.startOf("day") : dateTime.endOf("day")).toISO();
+				return iso ? parseAbsolute(iso, Settings.defaultZone.name) : null;
+			}
+			return parseAbsolute(value, Settings.defaultZone.name);
+		}
+		return DATE_ONLY.test(value) ? parseDate(value) : toCalendarDate(parseAbsolute(value, Settings.defaultZone.name));
 	} catch {
 		return null;
 	}
@@ -2344,20 +2462,38 @@ const parseIsoDate = (value) => {
 * (`is_empty` / `is_not_empty`) — those operators are themselves the
 * predicate and need no companion value.
 *
-* Output value is always a `YYYY-MM-DD` ISO date string (or `null` when
-* cleared).
+* Before/after values may use minute-precision ISO instants when the field
+* and bar both opt in; other date values remain `YYYY-MM-DD`.
 */
-const DateValueControl = ({ field, operator, value, onChange, ariaLabel }) => {
+const DateValueControl = ({ field, operator, value, onChange, ariaLabel, dateTimesEnabled = false }) => {
 	const size = useFilterBarSize();
+	const minuteMode = dateTimesEnabled && field.timeGranularity === "minute" && operator !== "is";
 	const handleChange = useCallback((nextDate) => {
-		onChange(nextDate ? nextDate.toString() : null);
-	}, [onChange]);
+		if (!nextDate || !minuteMode) {
+			onChange(nextDate ? nextDate.toString() : null);
+			return;
+		}
+		const zone = Settings.defaultZone.name;
+		const dateTime = DateTime.fromJSDate(toZoned(nextDate, zone).toDate(), { zone });
+		onChange((operator === "after" ? dateTime.set({
+			second: 0,
+			millisecond: 0
+		}) : dateTime.set({
+			second: 59,
+			millisecond: 999
+		})).toISO() ?? null);
+	}, [
+		minuteMode,
+		onChange,
+		operator
+	]);
 	if (isValuelessOperator(operator)) return null;
 	return /* @__PURE__ */ jsx(DatePicker, {
-		value: parseIsoDate(value),
+		value: parseIsoDate(value, field, operator, dateTimesEnabled),
 		size,
 		"aria-label": ariaLabel ?? `${field.label} value`,
 		onChange: handleChange,
+		granularity: minuteMode ? "minute" : "day",
 		useModalZIndex: true
 	});
 };
@@ -2675,7 +2811,7 @@ const PillRoot = styled.span`
           background-color: ${tokens ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25) : Color.CorePurple100};
           color: ${semanticColor(theme, "FgAccent", Color.TextActive)};
         ` : css`
-          background-color: ${semanticColor(theme, "SurfaceSubtle", Color.BackgroundSecondary)};
+          background-color: ${semanticColor(theme, "SurfaceSecondary", theme.color.background.secondary)};
           color: ${semanticColor(theme, "FgPrimary", Color.TextPrimary)};
 
           &:hover {
@@ -2873,20 +3009,20 @@ 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, relativeDate) {
+function normalizeValueToDisplay(value, optionLabels, relativeDate, fieldType) {
 	if (value == null) return [];
 	const relativeLabel = relativePresetLabel(value, relativeDate);
 	if (relativeLabel) return [relativeLabel];
-	const lookup = (raw) => optionLabels?.[raw] ?? raw;
+	const lookup = (raw) => optionLabels?.[raw] ?? (fieldType === "date" || fieldType === "date_range" ? formatDateValueForDisplay(raw) : raw);
 	if (Array.isArray(value)) {
 		if (value.length > 0 && Array.isArray(value[0])) return [`${value.length} group${value.length === 1 ? "" : "s"}`];
 		return value.map((entry) => lookup(String(entry)));
 	}
 	if (typeof value === "object") {
 		const { startDate, endDate } = value;
-		if (startDate && endDate) return [`${startDate} – ${endDate}`];
+		if (startDate && endDate) return [`${lookup(startDate)} – ${lookup(endDate)}`];
 		const single = startDate || endDate;
-		return single ? [single] : [];
+		return single ? [lookup(single)] : [];
 	}
 	if (typeof value === "boolean") return [value ? "True" : "False"];
 	if (typeof value === "number") return [String(value)];
@@ -2908,7 +3044,7 @@ 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, carriesDateRange(rule.operator, field?.type) ? rule.relativeDate : void 0) : [], [
+	const displayedValues = useMemo(() => rule && !isValuelessOperator(rule.operator) ? normalizeValueToDisplay(rule.value, optionLabels, carriesDateRange(rule.operator, field?.type) ? rule.relativeDate : void 0, field?.type) : [], [
 		rule,
 		optionLabels,
 		field?.type
@@ -2955,9 +3091,20 @@ const FilterPill = forwardRef(function FilterPill({ field, rule, onClick, onDism
 });
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/FilterPopover/FilterPopover.tsx
+/**
+* Compact value controls fit the minimum width; wider controls can grow
+* up to 320px without overflowing.
+*/
+const POPOVER_MIN_WIDTH = "196px";
+const POPOVER_MAX_WIDTH = "320px";
+const OperatorMenu = styled(DropdownMenu_default)`
+  && {
+    background-color: ${({ theme }) => semanticColor(theme, "SurfaceElevated", theme.color.background.primary)};
+  }
+`;
 const PopoverPanel = styled(Stack).attrs({ spacing: Spacing[0] })`
-  min-width: ${"196px"};
-  max-width: ${"320px"};
+  min-width: ${POPOVER_MIN_WIDTH};
+  max-width: ${POPOVER_MAX_WIDTH};
   /* The design-system Popover.Card already supplies bg, border, shadow,
      and 6px corner radius — we just constrain the inner content. */
 `;
@@ -3117,7 +3264,7 @@ const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, on
 						children: [/* @__PURE__ */ jsx(FieldTypeLabel, {
 							$size: resolvedSize,
 							children: /* @__PURE__ */ jsx(TruncatedText, { children: field.label })
-						}), showOperatorSelector ? /* @__PURE__ */ jsx(DropdownMenu_default, {
+						}), showOperatorSelector ? /* @__PURE__ */ jsx(OperatorMenu, {
 							trigger: /* @__PURE__ */ jsxs(InlineOperatorTrigger, {
 								type: "button",
 								"aria-label": "Operator",
@@ -3765,7 +3912,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, relativeDatesEnabled = false, singleUseFields = false, size = "md", valueControlResolver }) {
+function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = true, relativeDatesEnabled = false, dateTimesEnabled = false, singleUseFields = false, size = "md", valueControlResolver }) {
 	const filterState = useFilterStateV2({
 		registry,
 		initialState,
@@ -3887,7 +4034,8 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 					relativeDate,
 					onChange,
 					layout: "inline",
-					relativeDatesEnabled
+					relativeDatesEnabled,
+					dateTimesEnabled
 				}, valueControlResolver),
 				trigger: /* @__PURE__ */ jsx(RulesPill, {
 					compound: filterState.state.compound,
@@ -3934,7 +4082,8 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 									});
 								},
 								onCommit: () => setEditingRuleId(null),
-								relativeDatesEnabled
+								relativeDatesEnabled,
+								dateTimesEnabled
 							}, valueControlResolver),
 							onClose: () => setEditingRuleId(null),
 							open: isOpen,
@@ -4282,4 +4431,4 @@ function decodeBase64(input) {
 //#endregion
 export { TableControlsProvider as A, getOperatorsForType as C, reconcileValueForOperator as D, isValuelessOperator as E, ControlBar as F, DataTableCompactBar as I, TableViewConfiguration as M, TableViewConfigurationDropdown as N, dateRuleIntent as O, TableControls as P, getOperatorsForField as S, isRangeOperator as T, FILTER_SIZE_TOKENS as _, encodeFilterStateToUrlParam as a, emptyValueForRule as b, FilterBar_default as c, isFilterStateV2 as d, pruneToRegistry as f, resolveValueControl as g, PillShell as h, decodeFilterStateFromUrl as i, useTableControls as j, TableControlsContext as k, useFilterStateV2 as l, isEmptyState as m, applyFilterStateToSearchParams as n, FieldRegistry as o, EMPTY_FILTER_STATE as p, decodeFilterStateFromString as r, buildFieldRegistry as s, FILTER_STATE_URL_PARAM as t, hasCompleteValue as u, useFilterBarSize as v, isCompleteDateRange as w, getDefaultOperatorForType as x, resolveDateRangeRuleValue as y };
 
-//# sourceMappingURL=TableControls-CYTpBlQN.mjs.map
+//# sourceMappingURL=TableControls-RS_ozBsI.mjs.map