@datum-cloud/datum-ui 0.8.1 → 0.10.0

package/dist/data-table/index.mjs

@@ -4,13 +4,13 @@ import { t as Button } from "../button-BllvE9Lm.mjs";
 import { t as Checkbox } from "../checkbox-I5BvrMPe.mjs";
 import { t as Input } from "../input-FKGqZypx.mjs";
 import { t as ResponsiveDropdown } from "../responsive-dropdown-IFroDgKn.mjs";
-import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u as SelectValue } from "../select-zxwykvQn.mjs";
-import { t as Skeleton } from "../skeleton-D4HOEiOZ.mjs";
-import { c as TableRow, i as TableCell, n as TableBody, o as TableHead, s as TableHeader, t as Table } from "../table-DWGT4cqh.mjs";
-import { t as Autocomplete } from "../autocomplete-DdbTQe6u.mjs";
-import { t as CalendarDatePicker } from "../calendar-date-picker-BaykEs6j.mjs";
-import { t as ActionRow } from "../action-row-DnhBhMtt.mjs";
-import { t as MultiSelect } from "../multi-select-DM_dxnSV.mjs";
+import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u as SelectValue } from "../select-Ck0szhAH.mjs";
+import { t as Skeleton } from "../skeleton-CxAhQT6T.mjs";
+import { c as TableRow, i as TableCell, n as TableBody, o as TableHead, s as TableHeader, t as Table } from "../table-ouGk4Vxe.mjs";
+import { t as Autocomplete } from "../autocomplete-ChuPNldi.mjs";
+import { t as CalendarDatePicker } from "../calendar-date-picker-CchHKodM.mjs";
+import { t as ActionRow } from "../action-row-DXw4UnHU.mjs";
+import { t as MultiSelect } from "../multi-select-7jly2Hcd.mjs";
 import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, MoreHorizontal, X } from "lucide-react";
 import { createContext, memo, use, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -1228,6 +1228,14 @@ function ClientProvider(props) {
 		}
 		store.setData(data);
 	}, [data, store]);
+	const isPageSizeInitial = useRef(true);
+	useEffect(() => {
+		if (isPageSizeInitial.current) {
+			isPageSizeInitial.current = false;
+			return;
+		}
+		if (pageSize != null) store.setPageSize(pageSize);
+	}, [pageSize, store]);
 	const [tableReady, setTableReady] = useState(false);
 	useEffect(() => setTableReady(true), []);
 	useEffect(() => {
@@ -1494,17 +1502,16 @@ function DatePickerFilter({ column, label, className, datePickerPopoverClassName
 		registerFilter,
 		unregisterFilter
 	]);
-	const dateRange = useMemo(() => {
-		const date = rawValue ? new Date(rawValue) : void 0;
-		return {
-			from: date,
-			to: date
-		};
-	}, [rawValue]);
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "dt-filter",
 		children: /* @__PURE__ */ jsx(CalendarDatePicker, {
-			date: dateRange,
+			date: useMemo(() => {
+				const date = rawValue ? new Date(rawValue) : void 0;
+				return {
+					from: date,
+					to: date
+				};
+			}, [rawValue]),
 			numberOfMonths: 1,
 			closeOnSelect: true,
 			placeholder: label,

package/dist/date-picker/index.mjs

@@ -1,3 +1,3 @@
-import { t as CalendarDatePicker } from "../calendar-date-picker-BaykEs6j.mjs";
-import { C as utcToLocalInputString, S as utcStringToZonedDate, _ as getBrowserTimezone, a as formatTimeRangeDisplay, b as getTimezoneOffset, c as getPresetByKey, d as TimezoneSelector, f as QuickRangesPanel, g as formatUtcForDisplay, h as formatTimezoneLabel, i as formatSingleTimeDisplay, l as getPresetByShortcut, m as createTimezoneOption, n as TimeRangePicker, o as DEFAULT_PRESETS, p as CustomRangePanel, r as formatDateForInput, s as getDefaultPreset, t as toApiTimeRange, u as getPresetRange, v as getDefaultTimezoneOptions, w as zonedDateToUtcString, x as localInputStringToUtc, y as getShortTimezoneDisplay } from "../to-api-format-CgKcC9SK.mjs";
+import { t as CalendarDatePicker } from "../calendar-date-picker-CchHKodM.mjs";
+import { C as utcToLocalInputString, S as utcStringToZonedDate, _ as getBrowserTimezone, a as TimeRangePicker, b as getTimezoneOffset, c as getPresetByKey, d as TimezoneSelector, f as QuickRangesPanel, g as formatUtcForDisplay, h as formatTimezoneLabel, i as formatTimeRangeDisplay, l as getPresetByShortcut, m as createTimezoneOption, n as formatDateForInput, o as DEFAULT_PRESETS, p as CustomRangePanel, r as formatSingleTimeDisplay, s as getDefaultPreset, t as toApiTimeRange, u as getPresetRange, v as getDefaultTimezoneOptions, w as zonedDateToUtcString, x as localInputStringToUtc, y as getShortTimezoneDisplay } from "../to-api-format-CmXTvYka.mjs";
 export { CustomRangePanel as AbsoluteRangePanel, CustomRangePanel, CalendarDatePicker, DEFAULT_PRESETS, QuickRangesPanel, TimeRangePicker, TimezoneSelector, createTimezoneOption, formatDateForInput, formatSingleTimeDisplay, formatTimeRangeDisplay, formatTimezoneLabel, formatUtcForDisplay, getBrowserTimezone, getDefaultPreset, getDefaultTimezoneOptions, getPresetByKey, getPresetByShortcut, getPresetRange, getShortTimezoneDisplay, getTimezoneOffset, localInputStringToUtc, toApiTimeRange, utcStringToZonedDate, utcToLocalInputString, zonedDateToUtcString };

package/dist/date-range-picker-DNZh06zo.mjs

@@ -0,0 +1,77 @@
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { t as Button } from "./button-Rw1xI-k9.mjs";
+import { S as PickerContent, c as PickerTrigger, l as Picker, s as formatPickerValue, t as DefaultFooter, w as usePickerContext } from "./default-footer-DbpemJVl.mjs";
+import { t as PickerCalendar } from "./calendar-D_DriVHT.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/features/picker/components/presets.tsx
+function PickerPresets({ className }) {
+	const { presets, state, actions, timezone } = usePickerContext();
+	if (presets.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("border-border hidden flex-col gap-1 border-r p-2 md:flex", className),
+		children: presets.map((preset) => {
+			return /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: state.selectedPresetKey === preset.key ? "default" : "ghost",
+				size: "sm",
+				className: "justify-start font-normal",
+				onClick: () => {
+					const range = preset.getRange(timezone);
+					actions.selectPreset(range, preset.key);
+				},
+				children: [/* @__PURE__ */ jsx("span", { children: preset.label }), preset.shortcut && /* @__PURE__ */ jsx("kbd", {
+					className: "bg-muted ml-auto hidden rounded border px-1.5 font-mono text-[10px] sm:inline-flex",
+					children: preset.shortcut
+				})]
+			}, preset.key);
+		})
+	});
+}
+PickerPresets.displayName = "Picker.Presets";
+//#endregion
+//#region src/components/features/picker/wrappers/date-range-picker.tsx
+function DateRangePicker({ value, onChange, placeholder = "Pick a date range", clearable = true, responsive = true, sheetTitle = "Pick a date range", numberOfMonths = 2, triggerLabel, icon, disabled, className, triggerClassName, popoverClassName, id, sheetDescription, modal, commit, disablePast, disableFuture, minDate, maxDate, presets, excludePresets, dateFormat }) {
+	return /* @__PURE__ */ jsx(Picker.Root, {
+		mode: "date-range",
+		value,
+		onChange,
+		commit,
+		responsive,
+		presets,
+		excludePresets,
+		disablePast,
+		disableFuture,
+		minDate,
+		maxDate,
+		children: /* @__PURE__ */ jsx(PickerContent, {
+			trigger: /* @__PURE__ */ jsx(PickerTrigger, {
+				placeholder,
+				clearable,
+				disabled,
+				className,
+				triggerClassName,
+				id,
+				icon,
+				children: (v) => triggerLabel ? triggerLabel(v) : formatPickerValue(v, "date-range", { dateFormat })
+			}),
+			sheetTitle,
+			sheetDescription,
+			modal,
+			contentClassName: popoverClassName,
+			footer: /* @__PURE__ */ jsx(DefaultFooter, {}),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col md:flex-row",
+				children: [/* @__PURE__ */ jsx(PickerPresets, {}), /* @__PURE__ */ jsx(PickerCalendar, {
+					numberOfMonths,
+					minDate,
+					maxDate,
+					disablePast,
+					disableFuture
+				})]
+			})
+		})
+	});
+}
+DateRangePicker.displayName = "DateRangePicker";
+//#endregion
+export { PickerPresets as n, DateRangePicker as t };

package/dist/date-time-picker/index.mjs

@@ -1,2 +1,2 @@
-import { t as DateTimePicker } from "../date-time-picker-DKOxrhmc.mjs";
+import { t as DateTimePicker } from "../date-time-picker-BiobghTJ.mjs";
 export { DateTimePicker };

package/dist/date-time-picker-BiobghTJ.mjs

@@ -0,0 +1,43 @@
+import { t as useDeprecationWarning } from "./use-deprecation-warning-Dy_DOyLu.mjs";
+import { t as DateTimePicker$1 } from "./date-time-picker-C0fF7s_e.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/features/date-time-picker/date-time-picker.tsx
+/**
+* @deprecated Use `DateTimePicker` from `@datum-cloud/datum-ui/picker`
+* instead. This adapter shim ships through 0.10.x and is removed in 1.0.0.
+* See `picker-migration.mdx`.
+*
+* Notable diff: legacy `showTimezoneIndicator` (default `false`) is the
+* inverse of the new `hideTimezone` prop. The shim handles the inversion
+* and pins the trigger label / time-input UX to the legacy semantics
+* (typeable input via `timeInputMode='input'`, bare TZ name via
+* `timezoneIndicatorVariant='compact'`).
+*/
+function DateTimePicker({ value, onChange, minDate, maxDate, disabledDates: _disabledDates, disablePast, disableFuture, timezone, showTimezoneIndicator = false, placeholder, disabled, className, modal, sheetTitle, sheetDescription, responsive = true }) {
+	useDeprecationWarning("DateTimePicker (legacy)", "DateTimePicker");
+	return /* @__PURE__ */ jsx(DateTimePicker$1, {
+		value: value ?? null,
+		onChange: (next) => {
+			onChange?.(next ?? "");
+		},
+		placeholder: placeholder ?? "Select date and time",
+		sheetTitle: sheetTitle ?? placeholder ?? "Select date and time",
+		sheetDescription,
+		responsive,
+		modal,
+		disabled,
+		className,
+		hideTimezone: !showTimezoneIndicator,
+		timezone,
+		minDate,
+		maxDate,
+		disablePast,
+		disableFuture,
+		timeInputMode: "input",
+		timezoneIndicatorVariant: "compact",
+		hourCycle: "24"
+	});
+}
+DateTimePicker.displayName = "DateTimePicker";
+//#endregion
+export { DateTimePicker as t };

package/dist/date-time-picker-C0fF7s_e.mjs

@@ -0,0 +1,109 @@
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { A as zonedDateToIso, S as PickerContent, c as PickerTrigger, k as isoToZonedDate, l as Picker, s as formatPickerValue, t as DefaultFooter, w as usePickerContext, y as parseTimeString } from "./default-footer-DbpemJVl.mjs";
+import { t as PickerCalendar } from "./calendar-D_DriVHT.mjs";
+import { t as PickerTimeInput } from "./time-input-9LdNL0Us.mjs";
+import { t as PickerTimezoneIndicator } from "./timezone-indicator-COoeMKKs.mjs";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/features/picker/components/time-input-field.tsx
+function formatZonedTimeOfDay(iso, tz) {
+	try {
+		const d = isoToZonedDate(iso, tz);
+		if (Number.isNaN(d.getTime())) return "";
+		return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+	} catch {
+		return "";
+	}
+}
+function PickerTimeInputField({ className, ariaLabel = "Select time", id }) {
+	const { mode, timezone, state, actions } = usePickerContext();
+	const isoValue = mode === "datetime" ? state.pendingValue : null;
+	const externalTimeValue = isoValue ? formatZonedTimeOfDay(isoValue, timezone) : "";
+	const [localValue, setLocalValue] = useState(externalTimeValue);
+	useEffect(() => {
+		setLocalValue(externalTimeValue);
+	}, [externalTimeValue]);
+	if (mode !== "datetime") return null;
+	const disabled = isoValue === null;
+	const handleChange = (e) => {
+		const next = e.target.value;
+		setLocalValue(next);
+		if (!isoValue) return;
+		const parsed = parseTimeString(next);
+		if (!parsed) return;
+		const d = isoToZonedDate(isoValue, timezone);
+		d.setHours(parsed.h, parsed.m, 0, 0);
+		actions.setSingleDatetime(zonedDateToIso(d, timezone));
+	};
+	return /* @__PURE__ */ jsx("input", {
+		type: "text",
+		id,
+		"aria-label": ariaLabel,
+		value: localValue,
+		onChange: handleChange,
+		disabled,
+		className: cn("border-input-border bg-input-background/50 h-10 w-full rounded-lg border px-3 text-sm", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "disabled:cursor-not-allowed disabled:opacity-50", className)
+	});
+}
+PickerTimeInputField.displayName = "Picker.TimeInputField";
+//#endregion
+//#region src/components/features/picker/wrappers/date-time-picker.tsx
+function DateTimePicker({ value, onChange, placeholder = "Pick a date & time", clearable = true, responsive = true, sheetTitle = "Pick a date & time", timezone, step = 15, hourCycle, numberOfMonths = 1, hideTimezone = false, timeInputMode = "slot", timezoneIndicatorVariant = "full", triggerLabel, icon, disabled, className, triggerClassName, popoverClassName, id, sheetDescription, modal, disablePast, disableFuture, minDate, maxDate, dateFormat, timeFormat }) {
+	return /* @__PURE__ */ jsx(Picker.Root, {
+		mode: "datetime",
+		value,
+		onChange,
+		responsive,
+		timezone,
+		step,
+		hourCycle,
+		hideTimezone,
+		presets: [],
+		disablePast,
+		disableFuture,
+		minDate,
+		maxDate,
+		children: /* @__PURE__ */ jsx(PickerContent, {
+			trigger: /* @__PURE__ */ jsx(PickerTrigger, {
+				placeholder,
+				clearable,
+				disabled,
+				className,
+				triggerClassName,
+				id,
+				icon,
+				children: (v) => triggerLabel ? triggerLabel(v) : formatPickerValue(v, "datetime", {
+					timezone,
+					hourCycle,
+					dateFormat,
+					timeFormat
+				})
+			}),
+			sheetTitle,
+			sheetDescription,
+			modal,
+			contentClassName: popoverClassName,
+			footer: /* @__PURE__ */ jsx(DefaultFooter, {}),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [
+					/* @__PURE__ */ jsx(PickerCalendar, {
+						numberOfMonths,
+						minDate,
+						maxDate,
+						disablePast,
+						disableFuture
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "border-t p-3",
+						children: timeInputMode === "input" ? /* @__PURE__ */ jsx(PickerTimeInputField, {}) : /* @__PURE__ */ jsx(PickerTimeInput, { target: "embedded-from" })
+					}),
+					/* @__PURE__ */ jsx(PickerTimezoneIndicator, { variant: timezoneIndicatorVariant })
+				]
+			})
+		})
+	});
+}
+DateTimePicker.displayName = "DateTimePicker";
+//#endregion
+export { DateTimePicker as t };

package/dist/date-time-range-picker-BAsH_Wv9.mjs

@@ -0,0 +1,82 @@
+import { S as PickerContent, c as PickerTrigger, l as Picker, s as formatPickerValue, t as DefaultFooter } from "./default-footer-DbpemJVl.mjs";
+import { t as PickerCalendar } from "./calendar-D_DriVHT.mjs";
+import { n as PickerPresets } from "./date-range-picker-DNZh06zo.mjs";
+import { t as PickerTimeInput } from "./time-input-9LdNL0Us.mjs";
+import { t as PickerTimezoneIndicator } from "./timezone-indicator-COoeMKKs.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/features/picker/wrappers/date-time-range-picker.tsx
+function DateTimeRangePicker({ value, onChange, placeholder = "Pick a date & time range", clearable = true, responsive = true, sheetTitle = "Pick a date & time range", timezone, step = 15, hourCycle, numberOfMonths = 2, hideTimezone = false, triggerLabel, icon, disabled, className, triggerClassName, popoverClassName, id, sheetDescription, modal, disablePast, disableFuture, minDate, maxDate, presets, excludePresets, dateFormat, timeFormat }) {
+	return /* @__PURE__ */ jsx(Picker.Root, {
+		mode: "datetime-range",
+		value,
+		onChange,
+		responsive,
+		timezone,
+		step,
+		hourCycle,
+		hideTimezone,
+		presets,
+		excludePresets,
+		disablePast,
+		disableFuture,
+		minDate,
+		maxDate,
+		children: /* @__PURE__ */ jsx(PickerContent, {
+			trigger: /* @__PURE__ */ jsx(PickerTrigger, {
+				placeholder,
+				clearable,
+				disabled,
+				className,
+				triggerClassName,
+				id,
+				icon,
+				children: (v) => triggerLabel ? triggerLabel(v) : formatPickerValue(v, "datetime-range", {
+					timezone,
+					hourCycle,
+					dateFormat,
+					timeFormat
+				})
+			}),
+			sheetTitle,
+			sheetDescription,
+			modal,
+			contentClassName: popoverClassName,
+			footer: /* @__PURE__ */ jsx(DefaultFooter, {}),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col md:flex-row",
+				children: [/* @__PURE__ */ jsx(PickerPresets, {}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col",
+					children: [
+						/* @__PURE__ */ jsx(PickerCalendar, {
+							numberOfMonths,
+							minDate,
+							maxDate,
+							disablePast,
+							disableFuture
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex gap-2 border-t p-3",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex-1",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "text-muted-foreground mb-1 text-xs",
+									children: "From"
+								}), /* @__PURE__ */ jsx(PickerTimeInput, { target: "embedded-from" })]
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "flex-1",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "text-muted-foreground mb-1 text-xs",
+									children: "To"
+								}), /* @__PURE__ */ jsx(PickerTimeInput, { target: "embedded-to" })]
+							})]
+						}),
+						/* @__PURE__ */ jsx(PickerTimezoneIndicator, {})
+					]
+				})]
+			})
+		})
+	});
+}
+DateTimeRangePicker.displayName = "DateTimeRangePicker";
+//#endregion
+export { DateTimeRangePicker as t };