@persona/design-system 0.3.1 → 0.4.0

package/dist/{Combobox-Bf_Xe1BG.d.mts → Combobox-C9QBItsc.d.mts}

@@ -1,5 +1,5 @@
-import { n as ComboboxMultiSelectProps } from "./ComboboxMultiSelect-iSuvyOx2.mjs";
-import { n as ComboboxSingleSelectProps } from "./ComboboxSingleSelect-DVRFKPi1.mjs";
+import { n as ComboboxMultiSelectProps } from "./ComboboxMultiSelect-DkVfwSKH.mjs";
+import { n as ComboboxSingleSelectProps } from "./ComboboxSingleSelect-CpumBcDn.mjs";
 
 //#region components/Combobox/Combobox.d.ts
 type ComboboxProps<T = string> = ComboboxSingleSelectProps<T> | ComboboxMultiSelectProps<T>;
@@ -8,4 +8,4 @@ declare const Combobox: <T = string>(props: ComboboxProps<T> & {
 }) => React.ReactElement;
 //#endregion
 export { ComboboxProps as n, Combobox as t };
-//# sourceMappingURL=Combobox-Bf_Xe1BG.d.mts.map
+//# sourceMappingURL=Combobox-C9QBItsc.d.mts.map

package/dist/Combobox.d.mts

@@ -1,3 +1,3 @@
-import { t as CaretButton } from "./ComboboxBase-CWzN8GML.mjs";
-import { n as ComboboxProps, t as Combobox } from "./Combobox-Bf_Xe1BG.mjs";
+import { t as CaretButton } from "./ComboboxBase-BkSpdmsT.mjs";
+import { n as ComboboxProps, t as Combobox } from "./Combobox-C9QBItsc.mjs";
 export { CaretButton, Combobox, Combobox as default, ComboboxProps };

package/dist/{ComboboxBase-CWzN8GML.d.mts → ComboboxBase-BkSpdmsT.d.mts}

@@ -1,8 +1,8 @@
-import { r as ButtonProps } from "./Button-CKzNTpPL.mjs";
-import { c as ParagraphProps, u as SpanProps } from "./Text-BIgrwIdS.mjs";
-import { n as InputSizes } from "./input-D9FuQmlI.mjs";
-import { a as InputProps } from "./Input-BHHWpSKN.mjs";
-import { o as StickerProps } from "./Sticker-DnSemOcW.mjs";
+import { r as ButtonProps } from "./Button-BrI1s2-r.mjs";
+import { c as ParagraphProps, u as SpanProps } from "./Text-CAKHcXSd.mjs";
+import { n as InputSizes } from "./input-M7BEIewR.mjs";
+import { a as InputProps } from "./Input-qlQVD5h0.mjs";
+import { o as StickerProps } from "./Sticker-OKVOQt_C.mjs";
 import { Spacing } from "@persona/design-tokens";
 import * as _$react from "react";
 import { CSSProperties, ReactNode } from "react";
@@ -363,4 +363,4 @@ declare function DropdownPortalWrapper({
 }: DropdownPortalWrapperProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { isNestedGroup as A, SearchInputContainer as C, flattenOptions as D, flattenLeafOptions as E, renderOptionsWithGroups as M, useDropdownPosition as N, getNavigableItemsAtLevel as O, useFilteredOptions as P, SearchInput as S, containsNestedGroup as T, LoadingContainer as _, ComboboxOptionGroup as a, OptionLabel as b, Description as c, DropdownPortalWrapperProps as d, EmptyState as f, LeafOptionEntry as g, InputContainer as h, ComboboxOption as i, isOptionGroup as j, getOptionsAtPath as k, DropdownContainer as l, FooterActionRow as m, ComboboxBaseProps as n, ComboboxOptionsOrGroups as o, FooterAction as p, ComboboxInput as r, Container as s, CaretButton as t, DropdownPortalWrapper as u, MAX_DROPDOWN_HEIGHT as v, buildVirtualRows as w, ScrollableMenuList as x, NavigableItem as y };
-//# sourceMappingURL=ComboboxBase-CWzN8GML.d.mts.map
+//# sourceMappingURL=ComboboxBase-BkSpdmsT.d.mts.map

package/dist/ComboboxBase.d.mts

@@ -1,2 +1,2 @@
-import { A as isNestedGroup, C as SearchInputContainer, D as flattenOptions, E as flattenLeafOptions, M as renderOptionsWithGroups, N as useDropdownPosition, O as getNavigableItemsAtLevel, P as useFilteredOptions, S as SearchInput, T as containsNestedGroup, _ as LoadingContainer, a as ComboboxOptionGroup, b as OptionLabel, c as Description, d as DropdownPortalWrapperProps, f as EmptyState, g as LeafOptionEntry, h as InputContainer, i as ComboboxOption, j as isOptionGroup, k as getOptionsAtPath, l as DropdownContainer, m as FooterActionRow, n as ComboboxBaseProps, o as ComboboxOptionsOrGroups, p as FooterAction, r as ComboboxInput, s as Container, t as CaretButton, u as DropdownPortalWrapper, v as MAX_DROPDOWN_HEIGHT, w as buildVirtualRows, x as ScrollableMenuList, y as NavigableItem } from "./ComboboxBase-CWzN8GML.mjs";
+import { A as isNestedGroup, C as SearchInputContainer, D as flattenOptions, E as flattenLeafOptions, M as renderOptionsWithGroups, N as useDropdownPosition, O as getNavigableItemsAtLevel, P as useFilteredOptions, S as SearchInput, T as containsNestedGroup, _ as LoadingContainer, a as ComboboxOptionGroup, b as OptionLabel, c as Description, d as DropdownPortalWrapperProps, f as EmptyState, g as LeafOptionEntry, h as InputContainer, i as ComboboxOption, j as isOptionGroup, k as getOptionsAtPath, l as DropdownContainer, m as FooterActionRow, n as ComboboxBaseProps, o as ComboboxOptionsOrGroups, p as FooterAction, r as ComboboxInput, s as Container, t as CaretButton, u as DropdownPortalWrapper, v as MAX_DROPDOWN_HEIGHT, w as buildVirtualRows, x as ScrollableMenuList, y as NavigableItem } from "./ComboboxBase-BkSpdmsT.mjs";
 export { CaretButton, ComboboxBaseProps, ComboboxInput, ComboboxOption, ComboboxOptionGroup, ComboboxOptionsOrGroups, Container, Description, DropdownContainer, DropdownPortalWrapper, DropdownPortalWrapperProps, EmptyState, FooterAction, FooterActionRow, InputContainer, LeafOptionEntry, LoadingContainer, MAX_DROPDOWN_HEIGHT, NavigableItem, OptionLabel, ScrollableMenuList, SearchInput, SearchInputContainer, buildVirtualRows, containsNestedGroup, flattenLeafOptions, flattenOptions, getNavigableItemsAtLevel, getOptionsAtPath, isNestedGroup, isOptionGroup, renderOptionsWithGroups, useDropdownPosition, useFilteredOptions };

package/dist/{ComboboxMultiSelect-iSuvyOx2.d.mts → ComboboxMultiSelect-DkVfwSKH.d.mts}

@@ -1,4 +1,4 @@
-import { n as ComboboxBaseProps } from "./ComboboxBase-CWzN8GML.mjs";
+import { n as ComboboxBaseProps } from "./ComboboxBase-BkSpdmsT.mjs";
 
 //#region components/Combobox/ComboboxMultiSelect.d.ts
 interface ComboboxMultiSelectProps<T = string> extends ComboboxBaseProps<T> {
@@ -44,4 +44,4 @@ declare const ComboboxMultiSelect: <T = string>(props: ComboboxMultiSelectProps<
 }) => React.ReactElement;
 //#endregion
 export { ComboboxMultiSelectProps as n, ComboboxMultiSelect as t };
-//# sourceMappingURL=ComboboxMultiSelect-iSuvyOx2.d.mts.map
+//# sourceMappingURL=ComboboxMultiSelect-DkVfwSKH.d.mts.map

package/dist/ComboboxMultiSelect.d.mts

@@ -1,2 +1,2 @@
-import { n as ComboboxMultiSelectProps, t as ComboboxMultiSelect } from "./ComboboxMultiSelect-iSuvyOx2.mjs";
+import { n as ComboboxMultiSelectProps, t as ComboboxMultiSelect } from "./ComboboxMultiSelect-DkVfwSKH.mjs";
 export { ComboboxMultiSelect, ComboboxMultiSelect as default, ComboboxMultiSelectProps };

package/dist/{ComboboxSingleSelect-DVRFKPi1.d.mts → ComboboxSingleSelect-CpumBcDn.d.mts}

@@ -1,6 +1,6 @@
-import { n as InputSizes } from "./input-D9FuQmlI.mjs";
-import { n as ComboboxBaseProps } from "./ComboboxBase-CWzN8GML.mjs";
-import { u as MenuItemType } from "./Menu-D4Y_J-QI.mjs";
+import { n as InputSizes } from "./input-M7BEIewR.mjs";
+import { n as ComboboxBaseProps } from "./ComboboxBase-BkSpdmsT.mjs";
+import { u as MenuItemType } from "./Menu-ZShdhNd7.mjs";
 import * as _$styled_components0 from "styled-components";
 
 //#region components/Combobox/ComboboxSingleSelect.d.ts
@@ -32,4 +32,4 @@ declare const ComboboxSingleSelect: <T = string>(props: ComboboxSingleSelectProp
 }) => React.ReactElement;
 //#endregion
 export { ComboboxSingleSelectProps as n, StyledMenuItem as r, ComboboxSingleSelect as t };
-//# sourceMappingURL=ComboboxSingleSelect-DVRFKPi1.d.mts.map
+//# sourceMappingURL=ComboboxSingleSelect-CpumBcDn.d.mts.map

package/dist/ComboboxSingleSelect.d.mts

@@ -1,2 +1,2 @@
-import { n as ComboboxSingleSelectProps, r as StyledMenuItem, t as ComboboxSingleSelect } from "./ComboboxSingleSelect-DVRFKPi1.mjs";
+import { n as ComboboxSingleSelectProps, r as StyledMenuItem, t as ComboboxSingleSelect } from "./ComboboxSingleSelect-CpumBcDn.mjs";
 export { ComboboxSingleSelect, ComboboxSingleSelect as default, ComboboxSingleSelectProps, StyledMenuItem };

package/dist/{CompactBar-C_61pgp7.d.mts → CompactBar-COxu_FDd.d.mts}

@@ -1,5 +1,5 @@
-import { n as HStackProps } from "./Stack-DHaK1-dw.mjs";
-import { n as ControlBarProps } from "./ControlBar-0XwbM4yC.mjs";
+import { n as HStackProps } from "./Stack-_JcvIE31.mjs";
+import { n as ControlBarProps } from "./ControlBar-DwAhPcb5.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -18,4 +18,4 @@ type CompactBarProps = Pick<ControlBarProps, 'title' | 'searchProps' | 'showFilt
 declare const CompactBar: React.FC<CompactBarProps>;
 //#endregion
 export { DataTableCompactBar as n, CompactBar as t };
-//# sourceMappingURL=CompactBar-C_61pgp7.d.mts.map
+//# sourceMappingURL=CompactBar-COxu_FDd.d.mts.map

package/dist/CompactBar.d.mts

@@ -1,2 +1,2 @@
-import { n as DataTableCompactBar, t as CompactBar } from "./CompactBar-C_61pgp7.mjs";
+import { n as DataTableCompactBar, t as CompactBar } from "./CompactBar-COxu_FDd.mjs";
 export { DataTableCompactBar, CompactBar as default };

package/dist/{ConfigFormGroup-DGCTW3by.mjs → ConfigFormGroup-aSdn2r6Z.mjs}

@@ -25,4 +25,4 @@ const ConfigFormGroup = forwardRef(function ConfigFormGroup(props, ref) {
 //#endregion
 export { ConfigFormGroup as t };
 
-//# sourceMappingURL=ConfigFormGroup-DGCTW3by.mjs.map
+//# sourceMappingURL=ConfigFormGroup-aSdn2r6Z.mjs.map

package/dist/{ConfigFormGroup-DGCTW3by.mjs.map → ConfigFormGroup-aSdn2r6Z.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ConfigFormGroup-DGCTW3by.mjs","names":[],"sources":["../components/ConfigFormGroup/ConfigFormGroup.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, forwardRef } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { FormGroupContext } from './useFormGroup';\n\n/**\n * Use to wrap a group of config fields.\n * Provides consistent spacing between the fields.\n */\nconst FormGroup = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: ${Spacing[5]};\n`;\n\nexport const ConfigFormGroup = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  function ConfigFormGroup(props, ref) {\n    return (\n      <FormGroupContext.Provider value={{ configField: true }}>\n        <FormGroup ref={ref} {...props} />\n      </FormGroupContext.Provider>\n    );\n  },\n);\n\nexport default ConfigFormGroup;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAY,OAAO,GAAG;;;SAGnB,QAAQ,GAAG;;AAGpB,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,OAAO,KAAK;AACnC,QACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO,EAAE,aAAa,MAAM;YACrD,oBAAC,WAAD;GAAgB;GAAK,GAAI;GAAS,CAAA;EACR,CAAA;EAGjC"}
+{"version":3,"file":"ConfigFormGroup-aSdn2r6Z.mjs","names":[],"sources":["../components/ConfigFormGroup/ConfigFormGroup.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, forwardRef } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { FormGroupContext } from './useFormGroup';\n\n/**\n * Use to wrap a group of config fields.\n * Provides consistent spacing between the fields.\n */\nconst FormGroup = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: ${Spacing[5]};\n`;\n\nexport const ConfigFormGroup = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(\n  function ConfigFormGroup(props, ref) {\n    return (\n      <FormGroupContext.Provider value={{ configField: true }}>\n        <FormGroup ref={ref} {...props} />\n      </FormGroupContext.Provider>\n    );\n  },\n);\n\nexport default ConfigFormGroup;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAY,OAAO,GAAG;;;SAGnB,QAAQ,GAAG;;AAGpB,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,OAAO,KAAK;AACnC,QACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO,EAAE,aAAa,MAAM;YACrD,oBAAC,WAAD;GAAgB;GAAK,GAAI;GAAS,CAAA;EACR,CAAA;EAGjC"}

package/dist/{ControlBar-0XwbM4yC.d.mts → ControlBar-DwAhPcb5.d.mts}

@@ -1,10 +1,15 @@
-import { t as OmniSearchProps } from "./SearchInput-CaKHRC_s.mjs";
+import { t as OmniSearchProps } from "./SearchInput-Dc90GLTF.mjs";
 import { FC } from "react";
 
 //#region components/DataTable/TableControls/ControlBar.d.ts
 interface TableViewConfig {
   id: string;
   name: string;
+  /**
+   * Whether this view is currently marked as the default view. Used to toggle the
+   * "Set as default"/"Already the default" menu item label when `onSetDefaultView` is provided.
+   */
+  isDefault?: boolean;
 }
 interface EventHandlers {
   /**
@@ -31,6 +36,11 @@ interface EventHandlers {
    * Called when the save view button is clicked. If not provided, the save view button will not be displayed.
    */
   onSaveView?: () => Promise<void>;
+  /**
+   * Called when the "Set as default" menu item is clicked. If not provided, the menu item
+   * will not be displayed.
+   */
+  onSetDefaultView?: (viewId: string) => Promise<void>;
   /**
    * Called when the add view button is clicked. If not provided, the add view button will not be displayed.
    *
@@ -148,4 +158,4 @@ interface ControlBarProps extends EventHandlers {
 declare const ControlBar: FC<ControlBarProps>;
 //#endregion
 export { ControlBarProps as n, ControlBar as t };
-//# sourceMappingURL=ControlBar-0XwbM4yC.d.mts.map
+//# sourceMappingURL=ControlBar-DwAhPcb5.d.mts.map

package/dist/ControlBar.d.mts

@@ -1,2 +1,2 @@
-import { n as ControlBarProps, t as ControlBar } from "./ControlBar-0XwbM4yC.mjs";
+import { n as ControlBarProps, t as ControlBar } from "./ControlBar-DwAhPcb5.mjs";
 export { ControlBarProps, ControlBar as default };

package/dist/DataTable.d.mts

@@ -1,6 +1,6 @@
-import { t as AttributeColumn } from "./types-0_9G0kWg.mjs";
-import { n as TableControlsProps, t as TableControls } from "./TableControls-CrGGlkEG.mjs";
-import { t as Pagination } from "./Pagination-Dcmv7bVe.mjs";
+import { t as AttributeColumn } from "./types-Df0D37uh.mjs";
+import { n as TableControlsProps, t as TableControls } from "./TableControls-C26vGkWZ.mjs";
+import { t as Pagination } from "./Pagination-j4hF7GOk.mjs";
 import { BulkAction, DataTableColumnFormat, DataTableColumns, RowAction, SortProps } from "./components/DataTable/types.mjs";
 import { RenderFormatFn } from "./useTableColumns.mjs";
 import { ComponentProps } from "react";
@@ -37,6 +37,7 @@ declare const DataTableControls: _$styled_components0.StyledComponent<({
   onDuplicateView,
   onDeleteView,
   onSaveView,
+  onSetDefaultView,
   isViewDirty,
   selectedRows,
   bulkActions,

package/dist/{DateField-CKeSIhGy.d.mts → DateField-tOyrGcx1.d.mts}

@@ -1,4 +1,4 @@
-import { n as InputSizes } from "./input-D9FuQmlI.mjs";
+import { n as InputSizes } from "./input-M7BEIewR.mjs";
 import * as _$react from "react";
 import { DateValue } from "@internationalized/date";
 import { AriaDateFieldProps } from "@react-aria/datepicker";
@@ -20,4 +20,4 @@ interface DateFieldProps extends AriaDateFieldProps<DateValue> {
 declare const DateField: _$react.ForwardRefExoticComponent<DateFieldProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { DateField as t };
-//# sourceMappingURL=DateField-CKeSIhGy.d.mts.map
+//# sourceMappingURL=DateField-tOyrGcx1.d.mts.map

package/dist/DateField.d.mts

@@ -1,2 +1,2 @@
-import { t as DateField } from "./DateField-CKeSIhGy.mjs";
+import { t as DateField } from "./DateField-tOyrGcx1.mjs";
 export { DateField, DateField as default };

package/dist/{DatePicker-B1iWrqR5.d.mts → DatePicker-Bs9JODNg.d.mts}

@@ -1,4 +1,4 @@
-import { n as InputSizes } from "./input-D9FuQmlI.mjs";
+import { n as InputSizes } from "./input-M7BEIewR.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { DateValue } from "@internationalized/date";
 import { DatePickerProps } from "@react-types/datepicker";
@@ -16,4 +16,4 @@ interface DatePickerProps$1 extends DatePickerProps<DateValue> {
 declare const DatePicker: (props: DatePickerProps$1) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { DatePickerProps$1 as n, DatePicker as t };
-//# sourceMappingURL=DatePicker-B1iWrqR5.d.mts.map
+//# sourceMappingURL=DatePicker-Bs9JODNg.d.mts.map

package/dist/{DatePicker-BNnZ6L1y.mjs → DatePicker-CLP-ajza.mjs}

@@ -5,10 +5,10 @@ import { Z_INDICES } from "./lib/zindex.mjs";
 import { focusWithinOutline } from "./mixins/focus.mjs";
 import inputMixin from "./mixins/input.mjs";
 import { t as IconButton } from "./IconButton-BgL3QUVO.mjs";
-import { t as ClearButton } from "./Input-DoB8YswA.mjs";
-import { c as MenuList, s as MenuItem } from "./Menu-CHbUf9PQ.mjs";
-import { s as Popover_default } from "./Popover-DNH8Jx1-.mjs";
-import { a as FormLabel } from "./FormControl-D1HIqDKm.mjs";
+import { t as ClearButton } from "./Input-BWlvBYB3.mjs";
+import { c as MenuList, s as MenuItem } from "./Menu-38UCGcte.mjs";
+import { s as Popover_default } from "./Popover-DlXyKYL5.mjs";
+import { a as FormLabel } from "./FormControl-1BmoYFCu.mjs";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
 import { forwardRef, memo, useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -16,8 +16,8 @@ import { ArrowLeftIcon, ArrowRightIcon, CircleXInverseIcon } from "@persona/icon
 import { range } from "lodash-es";
 import { VisuallyHidden, mergeProps, useButton, useCalendar, useCalendarCell, useCalendarGrid, useDateFormatter, useDatePicker, useDateRangePicker, useFocusWithin, useLocale, usePress, useRangeCalendar } from "react-aria";
 import { useCalendarState, useDatePickerState, useDateRangePickerState, useRangeCalendarState } from "react-stately";
-import { DateTime, Settings } from "luxon";
 import { mergeRefs } from "@react-aria/utils";
+import { DateTime, Settings } from "luxon";
 import { CalendarDate, GregorianCalendar, endOfMonth, endOfYear, getWeeksInMonth, isSameDay, isSameMonth, now, parseAbsolute, startOfMonth, startOfYear, toCalendarDateTime, today } from "@internationalized/date";
 import { useDateField, useDateSegment } from "@react-aria/datepicker";
 import { useLocale as useLocale$1 } from "@react-aria/i18n";
@@ -431,10 +431,12 @@ const DatePicker = (props) => {
 };
 //#endregion
 //#region components/DatePicker/Calendar/RangeCalendarPresets.tsx
+/** The preset windows the picker offers; the codec resolves the same ids on read. */
 const getDefaultPresets = (tz) => {
 	const now = today(tz);
 	return [
 		{
+			id: "last_7_days",
 			label: "Last 7 days",
 			range: {
 				start: now.subtract({ days: 7 }),
@@ -442,6 +444,7 @@ const getDefaultPresets = (tz) => {
 			}
 		},
 		{
+			id: "last_14_days",
 			label: "Last 14 days",
 			range: {
 				start: now.subtract({ days: 14 }),
@@ -449,6 +452,7 @@ const getDefaultPresets = (tz) => {
 			}
 		},
 		{
+			id: "last_30_days",
 			label: "Last 30 days",
 			range: {
 				start: now.subtract({ days: 30 }),
@@ -456,6 +460,7 @@ const getDefaultPresets = (tz) => {
 			}
 		},
 		{
+			id: "this_month",
 			label: "This month",
 			range: {
 				start: startOfMonth(now),
@@ -463,6 +468,7 @@ const getDefaultPresets = (tz) => {
 			}
 		},
 		{
+			id: "last_month",
 			label: "Last month",
 			range: {
 				start: startOfMonth(now.subtract({ months: 1 })),
@@ -470,6 +476,7 @@ const getDefaultPresets = (tz) => {
 			}
 		},
 		{
+			id: "this_year",
 			label: "This year",
 			range: {
 				start: startOfYear(now),
@@ -477,6 +484,7 @@ const getDefaultPresets = (tz) => {
 			}
 		},
 		{
+			id: "last_year",
 			label: "Last year",
 			range: {
 				start: startOfYear(now.subtract({ years: 1 })),
@@ -506,10 +514,12 @@ const StyledPresetButton = styled(MenuItem)`
     outline-offset: 1px;
   }
 `;
-const PresetButton = ({ state, preset, isSelected, setDateMode, ...props }) => {
+const PresetButton = ({ commitRange, state, preset, isSelected, setDateMode, onPresetSelect, ...props }) => {
 	const ref = useRef();
 	const { buttonProps } = useButton({ onPress: () => {
-		state.setValue(preset.range);
+		const commit = () => commitRange(preset.range);
+		if (onPresetSelect) onPresetSelect(preset.id, commit);
+		else commit();
 		setDateMode(null);
 	} }, ref);
 	const { "aria-current": _ariaCurrent, ...mergedProps } = mergeProps(props, buttonProps);
@@ -520,24 +530,28 @@ const PresetButton = ({ state, preset, isSelected, setDateMode, ...props }) => {
 		children: preset.label
 	});
 };
-const DateRangePickerPresets = ({ presetsFn = getDefaultPresets, state, setDateMode, ...props }) => {
+const DateRangePickerPresets = ({ presetsFn = getDefaultPresets, commitRange, state, setDateMode, onPresetSelect, selectedPreset, ...props }) => {
 	const presets = presetsFn(Settings.defaultZone.name);
 	const { value } = state;
 	const selectedPresetIndex = value ? presets.findIndex((preset) => datesMatchByDay(preset.range.start, value.start) && datesMatchByDay(preset.range.end, value.end)) : -1;
+	const infersSelection = typeof selectedPreset === "undefined";
 	return /* @__PURE__ */ jsx(Container, {
 		...props,
 		children: /* @__PURE__ */ jsx(MenuList, {
 			"aria-label": "Date range presets",
 			children: presets.map((preset, i) => /* @__PURE__ */ jsx(PresetButton, {
 				preset,
+				commitRange,
 				state,
 				setDateMode,
-				isSelected: i === selectedPresetIndex
+				onPresetSelect,
+				isSelected: infersSelection ? i === selectedPresetIndex : preset.id === selectedPreset
 			}, i))
 		})
 	});
 };
 const arePropsEqual = (prevProps, nextProps) => {
+	if (prevProps.selectedPreset !== nextProps.selectedPreset || prevProps.onPresetSelect !== nextProps.onPresetSelect || prevProps.commitRange !== nextProps.commitRange || prevProps.setDateMode !== nextProps.setDateMode || prevProps.presetsFn !== nextProps.presetsFn) return false;
 	const prevValue = prevProps.state.value;
 	const nextValue = nextProps.state.value;
 	if (!prevValue && !nextValue) return true;
@@ -598,7 +612,7 @@ const presetEnd = (end) => earliest(end.set({
 	second: 0,
 	millisecond: 0
 }));
-const RangeCalendar = ({ calendarRef, onSelectDate, minDate, maxDate, hidePresets, visibleMonths = 2, setDateMode, setValue, granularity, ...props }) => {
+const RangeCalendar = ({ calendarRef, onSelectDate, minDate, maxDate, hidePresets, visibleMonths = 2, setDateMode, onPresetSelect, selectedPreset, setValue, granularity, ...props }) => {
 	const { locale } = useLocale();
 	const timezoneName = Settings.defaultZone.name;
 	const rangeCalendarState = useRangeCalendarState({
@@ -628,6 +642,11 @@ const RangeCalendar = ({ calendarRef, onSelectDate, minDate, maxDate, hidePreset
 			} else rangeCalendarState.selectDate(date);
 		}
 	};
+	const commitRef = useRef(state.setValue);
+	useEffect(() => {
+		commitRef.current = state.setValue;
+	});
+	const commitRange = useCallback((value) => commitRef.current(value), []);
 	const ref = useRef();
 	const { calendarProps, prevButtonProps, nextButtonProps } = useRangeCalendar(props, state, ref);
 	const monthDateFormatter = useDateFormatter({
@@ -664,7 +683,10 @@ const RangeCalendar = ({ calendarRef, onSelectDate, minDate, maxDate, hidePreset
 			padding: Spacing[3],
 			children: /* @__PURE__ */ jsx(RangeCalendarPresets_default, {
 				state,
-				setDateMode
+				commitRange,
+				setDateMode,
+				onPresetSelect,
+				selectedPreset
 			})
 		}), /* @__PURE__ */ jsx(Card_default.Body, {
 			padding: Spacing[3],
@@ -717,11 +739,37 @@ const ClearRangeButton = styled(ClearButton)`
     background-color: transparent;
   }
 `;
-const DateRangePicker = ({ granularity = "day", hideTimeZone = true, className, calendarZIndex, portalContainer, ...props }) => {
+const DateRangePicker = ({ granularity = "day", hideTimeZone = true, className, calendarZIndex, portalContainer, onDateFilterChange, selectedPreset, ...props }) => {
+	const writeOriginRef = useRef({ kind: "interaction" });
+	const writeWithOrigin = useCallback((origin, commit) => {
+		writeOriginRef.current = origin;
+		try {
+			commit();
+		} finally {
+			writeOriginRef.current = { kind: "interaction" };
+		}
+	}, []);
 	const state = useDateRangePickerState({
 		granularity,
 		hideTimeZone,
-		...props
+		...props,
+		onChange: (range) => {
+			props.onChange(range);
+			const origin = writeOriginRef.current;
+			if (origin.kind === "sync" || origin.kind === "clear") return;
+			if (origin.kind === "preset" && range) {
+				onDateFilterChange?.({
+					source: "preset",
+					preset: origin.preset,
+					range
+				});
+				return;
+			}
+			onDateFilterChange?.({
+				source: "calendar",
+				range
+			});
+		}
 	});
 	const ref = useRef(null);
 	const startFieldRef = useRef(null);
@@ -746,6 +794,10 @@ const DateRangePicker = ({ granularity = "day", hideTimeZone = true, className,
 		openCalendar();
 		focusCalendar();
 	}, [focusCalendar, openCalendar]);
+	const handlePresetSelect = useCallback((preset, commit) => writeWithOrigin({
+		kind: "preset",
+		preset
+	}, commit), [writeWithOrigin]);
 	const startInstant = props.dateRange.startDate?.isValid ? props.dateRange.startDate.toMillis() : void 0;
 	const endInstant = props.dateRange.endDate?.isValid ? props.dateRange.endDate.toMillis() : void 0;
 	useEffect(() => {
@@ -757,7 +809,7 @@ const DateRangePicker = ({ granularity = "day", hideTimeZone = true, className,
 			start: state.hasTime ? parseAbsolute(startDate.toISO(), Settings.defaultZone.name) : new CalendarDate(startDate.year, startDate.month, startDate.day),
 			end: state.hasTime ? parseAbsolute(endDate.toISO(), Settings.defaultZone.name) : new CalendarDate(endDate.year, endDate.month, endDate.day)
 		};
-		state.setValue(dateRangeV2);
+		writeWithOrigin({ kind: "sync" }, () => state.setValue(dateRangeV2));
 	}, [
 		startInstant,
 		endInstant,
@@ -800,8 +852,9 @@ const DateRangePicker = ({ granularity = "day", hideTimeZone = true, className,
 		}
 	};
 	const { pressProps: pressClearProps } = usePress({ onPress: () => {
-		state.setValue(null);
+		writeWithOrigin({ kind: "clear" }, () => state.setValue(null));
 		if (props.onClear) props.onClear();
+		onDateFilterChange?.({ source: "clear" });
 	} });
 	const handleKeyDown = useCallback((event) => {
 		if (event.key === "Enter") {
@@ -890,6 +943,8 @@ const DateRangePicker = ({ granularity = "day", hideTimeZone = true, className,
 				granularity,
 				hidePresets: props.hidePresets,
 				visibleMonths: props.visibleMonths,
+				onPresetSelect: handlePresetSelect,
+				selectedPreset,
 				onSelectDate: (dateVal) => {
 					/**
 					* Please use caution when editing the logic below.
@@ -937,4 +992,4 @@ const DateRangePicker = ({ granularity = "day", hideTimeZone = true, className,
 //#endregion
 export { Calendar as i, DatePicker as n, DateField as r, DateRangePicker as t };
 
-//# sourceMappingURL=DatePicker-BNnZ6L1y.mjs.map
+//# sourceMappingURL=DatePicker-CLP-ajza.mjs.map