@persona/design-system 0.7.2 → 0.8.1

package/dist/{TableControls-BxuPCUQS.mjs → TableControls-CqW_nyBY.mjs}

@@ -8,24 +8,27 @@ 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-C_3QwAAt.mjs";
+import { semanticScrollbar } from "./mixins/scrollbar.mjs";
+import { n as Stack, t as HStack } from "./Stack-CEPzs4Pb.mjs";
+import { n as Button, t as IconButton } from "./IconButton-BHFCjvzs.mjs";
+import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-BSl5v5aa.mjs";
+import { r as InputGroup } from "./Input-BQN97Hzm.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-C2b9u955.mjs";
-import { s as Popover_default } from "./Popover-opVa9Xhc.mjs";
-import { t as Toggle } from "./Toggle-DWbJOwf3.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-D4j4LCT3.mjs";
-import { m as FormField, o as ComboboxField } from "./FormField-74TPV8-8.mjs";
-import { r as DatePicker, t as DateRangePicker } from "./DatePicker-IgiUI3Wj.mjs";
+import { c as MenuList, s as MenuItem } from "./Menu-DjW2b3Wk.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-j8NWbAvM.mjs";
+import { t as Combobox } from "./Combobox-CCDoNF9Y.mjs";
+import { s as Popover_default } from "./Popover-CbYaWrAy.mjs";
+import { i as Modal_default } from "./Modal-DHLPK65-.mjs";
+import { t as Toggle } from "./Toggle-CntyMUPJ.mjs";
+import { i as selectedPresetFor, n as parseDateFilterValue, r as resolveDateFilterValue, t as formatDateFilterValue } from "./date-filter-D6IfCkwp.mjs";
+import { t as ListBox } from "./ListBox-DOqN9DNl.mjs";
+import { m as FormField, o as ComboboxField } from "./FormField-DbcqNcx2.mjs";
+import { r as DatePicker, t as DateRangePicker } from "./DatePicker-LPIJrc0n.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 +38,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 +79,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 +216,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 +264,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",
@@ -293,6 +303,13 @@ 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)};
 `;
@@ -305,6 +322,7 @@ const LockedTab = styled(Tab)`
 const OverflowMenuList = styled(MenuList)`
   max-height: 300px;
   overflow: auto;
+  ${semanticScrollbar}
 `;
 const ExpandedSearchInput = styled(SearchInput)`
   flex-basis: 440px;
@@ -331,7 +349,7 @@ const TabOverflowContainer = styled.div`
   position: absolute;
   height: 32px;
 `;
-const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditViews, handleNameChange, onDuplicateView, onDeleteView, onSelectView, onResetCurrentView, onSaveView, onSetDefaultView, isViewDirty, showTabContextMenu, setShowTabContextMenu, className, ...rest }) => {
+const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditViews, handleNameChange, onDuplicateView, onRequestDeleteView, onSelectView, onResetCurrentView, onSaveView, onSetDefaultView, isViewDirty, showTabContextMenu, setShowTabContextMenu, className, ...rest }) => {
 	const inputRef = useRef(null);
 	const lastSubmittedNameRef = useRef(null);
 	const submitNameChange = (newName) => {
@@ -364,7 +382,7 @@ 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) => submitNameChange(e.currentTarget.value),
 				onKeyDown: (e) => {
@@ -420,12 +438,12 @@ const SavedViewTab = ({ view, selected, tabIdPrefix = TAB_ID_PREFIX, canEditView
 						onKeyDown: enterProxiesClick,
 						children: view.isDefault ? "Already the default" : "Set as default"
 					}),
-					onDeleteView && /* @__PURE__ */ jsx(MenuItem, {
+					onRequestDeleteView && /* @__PURE__ */ jsx(MenuItem, {
 						id: "table-controls__view__menu-delete",
 						prefixIcon: /* @__PURE__ */ jsx(TrashIcon, {}),
-						onClick: async () => {
-							await onDeleteView(view.id);
+						onClick: () => {
 							setShowTabContextMenu(false);
+							onRequestDeleteView(view);
 						},
 						onKeyDown: enterProxiesClick,
 						children: "Delete"
@@ -532,14 +550,22 @@ 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([]);
 	const [showTabContextMenu, setShowTabContextMenu] = useState(false);
+	const [pendingDeleteView, setPendingDeleteView] = useState(null);
+	const previousPendingDeleteViewRef = useRef(null);
+	const [isDeletingView, setIsDeletingView] = useState(false);
 	const [isAddingView, setIsAddingView] = useState(false);
 	const [lastVisibleViewElement, setLastVisibleViewElement] = useState(null);
 	const [tabOverflowWidth, setTabOverflowWidth] = useState(null);
+	useEffect(() => {
+		const previousPendingDeleteView = previousPendingDeleteViewRef.current;
+		if (!pendingDeleteView && previousPendingDeleteView) (document.getElementById(`${OVERFLOW_TAB_ID_PREFIX}${previousPendingDeleteView.id}`) ?? document.getElementById(`${TAB_ID_PREFIX}${previousPendingDeleteView.id}`))?.focus();
+		previousPendingDeleteViewRef.current = pendingDeleteView;
+	}, [pendingDeleteView]);
 	const onResize = useCallback(() => {
 		if (!tabListRef.current) return;
 		const containerRect = tabListRef.current.getBoundingClientRect();
@@ -598,6 +624,17 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 	const handleNameChange = (view, newName) => {
 		if (canEditViews && view.name !== newName) onViewNameChange?.(view.id, newName);
 	};
+	const onRequestDeleteView = onDeleteView ? (view) => setPendingDeleteView(view) : void 0;
+	const confirmDeleteView = async () => {
+		if (!pendingDeleteView || !onDeleteView) return;
+		setIsDeletingView(true);
+		try {
+			await onDeleteView(pendingDeleteView.id);
+			setPendingDeleteView(null);
+		} catch {} finally {
+			setIsDeletingView(false);
+		}
+	};
 	if (compact) return /* @__PURE__ */ jsx(CompactBar, {
 		"data-tour-target": dataTourTarget,
 		title,
@@ -606,6 +643,7 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 		setShowFilters,
 		filtersId,
 		isLoading,
+		isFilterPanelLoading,
 		propertiesButton,
 		tableActions,
 		filterPanel
@@ -690,7 +728,7 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 						canEditViews: canEditViews ?? false,
 						handleNameChange,
 						onDuplicateView,
-						onDeleteView,
+						onRequestDeleteView,
 						onSelectView,
 						onResetCurrentView,
 						onSaveView,
@@ -719,7 +757,7 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 					handleAddView: onAddView ? handleAddView : null,
 					handleNameChange,
 					onDuplicateView,
-					onDeleteView,
+					onRequestDeleteView,
 					onResetCurrentView,
 					onSaveView,
 					onSetDefaultView,
@@ -748,7 +786,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",
@@ -758,12 +797,40 @@ const ControlBar = ({ presetViews, currentView, onSelectView, views, onAddView,
 				propertiesButton
 			]
 		}),
-		showFilters && filterPanel
+		showFilters && filterPanel,
+		/* @__PURE__ */ jsx(Modal_default, {
+			open: pendingDeleteView != null,
+			onOpenChange: (open) => {
+				if (!open && !isDeletingView) setPendingDeleteView(null);
+			},
+			isKeyboardDismissDisabled: isDeletingView,
+			contentProps: isDeletingView ? { showCloseButton: false } : void 0,
+			title: "Delete view?",
+			footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "basic",
+				width: "auto",
+				disabled: isDeletingView,
+				onClick: () => setPendingDeleteView(null),
+				children: "Cancel"
+			}), /* @__PURE__ */ jsx(Button, {
+				id: "table-controls__view__delete-confirm",
+				variant: "danger",
+				width: "auto",
+				isPending: isDeletingView,
+				onClick: confirmDeleteView,
+				children: "Delete"
+			})] }),
+			children: /* @__PURE__ */ jsxs(Paragraph, { children: [
+				"This will permanently delete “",
+				pendingDeleteView?.name,
+				"”. This action cannot be undone."
+			] })
+		})
 	] });
 };
 //#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;
@@ -794,13 +861,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,
@@ -1247,6 +1315,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] ?? [];
 }
@@ -1283,6 +1352,14 @@ function isValuelessOperator(operator) {
 function carriesDateRange(operator, fieldType) {
 	return isRangeOperator(operator) || fieldType === "date_range";
 }
+/**
+* Whether a rule's value control edits minute-precision date-times: the bar
+* and field both opt in, and the value is a range or a before/after instant
+* (`date` + `is` stays a whole calendar day).
+*/
+function isMinutePrecisionDate(field, operator, dateTimesEnabled) {
+	return dateTimesEnabled && field.timeGranularity === "minute" && (field.type === "date_range" || field.type === "date" && operator !== "is");
+}
 function isRangeOperator(operator) {
 	return RANGE_OPERATORS.has(operator);
 }
@@ -1384,6 +1461,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
@@ -1406,6 +1494,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`
@@ -1422,11 +1518,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]));
@@ -1437,8 +1533,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) {
@@ -1552,9 +1648,22 @@ function buildFieldPickerOptions(registry, visibleCustomFieldParents, excludeFie
 }
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/RuleEditorFields.tsx
-function RuleEditorFields({ registry, field, groupIndex, ruleIndex, rule, size, operators, operatorConfigurable, onFieldChange, onOperatorChange, onValueChange, renderValueControl }) {
+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, dateTimesEnabled, field, groupIndex, ruleIndex, rule, size, operators, operatorConfigurable, onFieldChange, onOperatorChange, onValueChange, renderValueControl }) {
+	const minutePrecisionValue = field != null && isMinutePrecisionDate(field, rule.operator, dateTimesEnabled);
 	const fieldOptions = useMemo(() => buildFieldPickerOptions(registry), [registry]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	return /* @__PURE__ */ jsxs(StatementFields, { children: [
 		/* @__PURE__ */ jsx(ComboboxField, {
 			label: "Value",
 			labelProps: { size },
@@ -1596,19 +1705,20 @@ function RuleEditorFields({ registry, field, groupIndex, ruleIndex, rule, size,
 		field && !isValuelessOperator(rule.operator) ? /* @__PURE__ */ jsx(FormField, {
 			label: "Value",
 			labelProps: { size },
+			configField: minutePrecisionValue ? false : void 0,
 			children: /* @__PURE__ */ jsx(Fragment$1, { children: renderValueControl(field, rule.operator, rule.value, (next, relativeDate) => onValueChange(groupIndex, ruleIndex, next, relativeDate), rule.relativeDate) })
 		}) : null
 	] });
 }
 //#endregion
 //#region components/DataTable/TableControls/FiltersV2/AdvancedFilterRulesPopover/AdvancedFilterRuleRow.tsx
-function AdvancedFilterRuleRow({ registry, groupIndex, ruleIndex, rule, size, isOpen, onClose, onDelete, onFieldChange, onOperatorChange, onValueChange, renderValueControl }) {
+function AdvancedFilterRuleRow({ registry, dateTimesEnabled, groupIndex, ruleIndex, rule, size, isOpen, onClose, onDelete, onFieldChange, onOperatorChange, onValueChange, renderValueControl }) {
 	const field = registry.get(rule.fieldId);
 	const operators = field ? getOperatorsForField(field) : [];
 	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,
@@ -1631,6 +1741,7 @@ function AdvancedFilterRuleRow({ registry, groupIndex, ruleIndex, rule, size, is
 		dropdownHeadingText: `Edit \u2018${condition}\u2019 statement`,
 		dropdownFormFields: /* @__PURE__ */ jsx(RuleEditorFields, {
 			registry,
+			dateTimesEnabled,
 			field,
 			groupIndex,
 			ruleIndex,
@@ -1751,9 +1862,13 @@ const PopoverContent = styled(PopoverPrimitive.Content)`
   z-index: ${Z_INDICES.modalDropdown};
 `;
 const PopoverCard = styled(Card_default)`
-  width: 384px;
+  width: ${({ $wide }) => $wide ? "520px" : "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;
@@ -1768,6 +1883,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
@@ -1802,6 +1918,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`
@@ -1847,9 +1968,10 @@ function groupsForRender(compound) {
 * inline; clicking a row reveals the field/operator/value editor inside the
 * row's dropdown popover.
 */
-const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, open, onOpenChange, renderValueControl, size }) => {
+const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, open, onOpenChange, renderValueControl, size, dateTimesEnabled = false }) => {
 	const resolvedSize = useFilterBarSize(size);
 	const subtleIconSize = resolvedSize === "sm" ? "xs" : "sm";
+	const wide = useMemo(() => dateTimesEnabled && registry.all().some((field) => field.timeGranularity === "minute"), [registry, dateTimesEnabled]);
 	const [internalOpen, setInternalOpen] = useState(false);
 	const isControlled = open != null;
 	const isOpen = isControlled ? open : internalOpen;
@@ -1953,6 +2075,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) => {
@@ -1971,6 +2094,7 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 			},
 			children: /* @__PURE__ */ jsxs(PopoverCard, {
 				elevated: true,
+				$wide: wide,
 				children: [/* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(Paragraph, {
 					size: resolvedSize,
 					color: "secondary",
@@ -1989,7 +2113,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}`,
@@ -2033,6 +2157,7 @@ const AdvancedFilterRulesPopover = ({ registry, compound, onChange, trigger, ope
 								const rowId = `${groupIndex}-${ruleIndex}`;
 								return /* @__PURE__ */ jsx(AdvancedFilterRuleRow, {
 									registry,
+									dateTimesEnabled,
 									groupIndex,
 									ruleIndex,
 									rule,
@@ -2256,6 +2381,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];
@@ -2271,29 +2397,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") {
@@ -2305,8 +2465,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
@@ -2317,6 +2477,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, {
@@ -2327,19 +2489,30 @@ 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",
+		hideTimeZone: !minuteMode
 	}, 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 (isMinutePrecisionDate(field, operator, dateTimesEnabled)) {
+			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;
 	}
@@ -2352,20 +2525,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 = isMinutePrecisionDate(field, operator, dateTimesEnabled);
 	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
 	});
 };
@@ -2683,7 +2874,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 {
@@ -2881,20 +3072,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)];
@@ -2916,7 +3107,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
@@ -2963,9 +3154,21 @@ 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, or 520px when the popover is `wide`.
+*/
+const POPOVER_MIN_WIDTH = "196px";
+const POPOVER_MAX_WIDTH = "320px";
+const POPOVER_WIDE_MAX_WIDTH = "520px";
+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: ${({ $wide }) => $wide ? POPOVER_WIDE_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. */
 `;
@@ -3067,7 +3270,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 }) => {
+const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, onClose, trigger, open, onOpenChange, size, wide = false }) => {
 	const resolvedSize = useFilterBarSize(size);
 	const valueless = isValuelessOperator(operator);
 	const CaretIcon = resolvedSize === "sm" ? CaretDownIcon$1 : CaretDownIcon;
@@ -3116,6 +3319,7 @@ const FilterPopover = ({ field, operator, onChangeOperator, valueControlSlot, on
 			"aria-label": `Edit filter for ${field.label}`,
 			noPadding: true,
 			children: /* @__PURE__ */ jsxs(PopoverPanel, {
+				$wide: wide,
 				onKeyDown: handleKeyDown,
 				children: [/* @__PURE__ */ jsxs(Main, {
 					$valueless: valueless,
@@ -3125,7 +3329,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",
@@ -3773,7 +3977,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,
@@ -3882,6 +4086,7 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 			"aria-label": "Filter bar",
 			children: [filterState.advancedRulesEnabled ? /* @__PURE__ */ jsx(AdvancedFilterRulesPopover, {
 				registry,
+				dateTimesEnabled,
 				compound: filterState.state.compound,
 				open: rulesPopoverOpen,
 				onOpenChange: setRulesPopoverOpen,
@@ -3895,7 +4100,8 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 					relativeDate,
 					onChange,
 					layout: "inline",
-					relativeDatesEnabled
+					relativeDatesEnabled,
+					dateTimesEnabled
 				}, valueControlResolver),
 				trigger: /* @__PURE__ */ jsx(RulesPill, {
 					compound: filterState.state.compound,
@@ -3920,6 +4126,7 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 						return /* @__PURE__ */ jsx(FilterPopover, {
 							field,
 							operator: rule.operator,
+							wide: isMinutePrecisionDate(field, rule.operator, dateTimesEnabled) && carriesDateRange(rule.operator, field.type),
 							onChangeOperator: (op) => {
 								const { relativeDate: _staleRelativeDate, ...rest } = rule;
 								filterState.updateTopLevelRule(rule.id, {
@@ -3942,7 +4149,8 @@ function FilterBar({ registry, initialState, onChange, advancedRulesEnabled = tr
 									});
 								},
 								onCommit: () => setEditingRuleId(null),
-								relativeDatesEnabled
+								relativeDatesEnabled,
+								dateTimesEnabled
 							}, valueControlResolver),
 							onClose: () => setEditingRuleId(null),
 							open: isOpen,
@@ -4290,4 +4498,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-BxuPCUQS.mjs.map
+//# sourceMappingURL=TableControls-CqW_nyBY.mjs.map