@datum-cloud/datum-ui 1.8.0 → 2.1.0

package/dist/{data-table-mByk373T.mjs → data-table-Du7_FLBi.mjs}

@@ -3,20 +3,20 @@ import { t as Badge } from "./badge-BTNW_FEU.mjs";
 import { t as Button } from "./button-A1qTjZ8U.mjs";
 import { t as Checkbox } from "./checkbox-C6P12fio.mjs";
 import { t as Input } from "./input-j4tbmYYz.mjs";
-import { t as ResponsiveDropdown } from "./responsive-dropdown-fCmduKaz.mjs";
+import { t as ResponsiveDropdown } from "./responsive-dropdown-n0Txkax5.mjs";
 import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u as SelectValue } from "./select-DCU44UO6.mjs";
 import { Skeleton } from "./skeleton/index.mjs";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table/index.mjs";
-import { t as Autocomplete } from "./autocomplete-DM6JYV4W.mjs";
-import { t as CalendarDatePicker } from "./calendar-date-picker-AzvSqjeS.mjs";
+import { t as Autocomplete } from "./autocomplete-DZ_HSBak.mjs";
+import { t as CalendarDatePicker } from "./calendar-date-picker-ynSGADfR.mjs";
 import { t as ActionRow } from "./action-row-DTvs91_3.mjs";
 import { n as useDebouncedSearchInput } from "./use-debounced-search-input-yu_F0QBt.mjs";
-import { t as MultiSelect } from "./multi-select-PHaMEbY-.mjs";
+import { t as MultiSelect } from "./multi-select-PtdMChPF.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";
 import { parseAsInteger, parseAsString, useQueryStates } from "nuqs";
-import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { columnFilteringFeature, columnSizingFeature, columnVisibilityFeature, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFns, flexRender, globalFilteringFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFns, tableFeatures, useTable } from "@tanstack/react-table";
 //#region src/components/features/data-table/constants.ts
 const DEFAULT_PAGE_SIZE = 20;
 const DEFAULT_PAGE_SIZES = [
@@ -206,6 +206,40 @@ function DataTableRowActions({ row, actions, isLoading = false, className, respo
 	});
 }
 //#endregion
+//#region src/components/features/data-table/core/features.ts
+/**
+* The single TanStack Table v9 feature set used by every table in this package.
+*
+* v9 made features opt-in and threaded a `TFeatures` generic through every
+* public type (`ColumnDef<TFeatures, TData, TValue>`, `Row<TFeatures, TData>`,
+* ...). Leaving that generic open would push the parameter into every exported
+* type in this library and force consumers to thread it through their own code.
+*
+* Declaring one concrete feature set and referencing `DataTableFeatures`
+* internally keeps our public types parameterised on `TData` alone, which is
+* what they were in v8.
+*
+* `data-table` needs sorting, pagination and row selection; `grouped-table`
+* additionally needs global filtering for its search box. Both need column
+* sizing (`columnDef.size` drives the shared grid template) and column
+* visibility (`enableHiding` on the injected selection column). The set is the
+* union rather than `stockFeatures` so unused features stay out of the bundle.
+*/
+const dataTableFeatures = tableFeatures({
+	columnFilteringFeature,
+	columnSizingFeature,
+	columnVisibilityFeature,
+	globalFilteringFeature,
+	rowPaginationFeature,
+	rowSelectionFeature,
+	rowSortingFeature,
+	filteredRowModel: createFilteredRowModel(),
+	paginatedRowModel: createPaginatedRowModel(),
+	sortedRowModel: createSortedRowModel(),
+	filterFns,
+	sortFns
+});
+//#endregion
 //#region src/components/features/data-table/core/filter-engine.ts
 /**
 * Resolve a dot-path on an object (e.g. "status.registrationApproval").
@@ -1107,7 +1141,8 @@ function useClientTable(store, options) {
 	const { columns, getRowId, enableRowSelection = false, stateAdapter } = options;
 	const resolvedColumns = useMemo(() => enableRowSelection ? withSelectionColumn(columns, typeof enableRowSelection === "object" ? enableRowSelection : {}) : columns, [columns, enableRowSelection]);
 	const { filteredData, sorting, rowSelection, pageIndex, pageSize: storePageSize, filters, search } = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
-	const table = useReactTable({
+	const table = useTable({
+		features: dataTableFeatures,
 		data: filteredData,
 		columns: resolvedColumns,
 		state: {
@@ -1133,9 +1168,6 @@ function useClientTable(store, options) {
 			}) : updater;
 			store.setPagination(next.pageIndex, next.pageSize);
 		},
-		getCoreRowModel: getCoreRowModel(),
-		getSortedRowModel: getSortedRowModel(),
-		getPaginationRowModel: getPaginationRowModel(),
 		getRowId,
 		enableRowSelection: !!enableRowSelection
 	});
@@ -1345,7 +1377,8 @@ function useServerTable(store, options) {
 		store
 	]);
 	const resolvedColumns = useMemo(() => enableRowSelection ? withSelectionColumn(columns, typeof enableRowSelection === "object" ? enableRowSelection : {}) : columns, [columns, enableRowSelection]);
-	const table = useReactTable({
+	const table = useTable({
+		features: dataTableFeatures,
 		data: store.getSnapshot().data,
 		columns: resolvedColumns,
 		state: {
@@ -1360,7 +1393,6 @@ function useServerTable(store, options) {
 		manualSorting: true,
 		manualFiltering: true,
 		pageCount: hasNextPageRef.current ? pageIndex + 2 : pageIndex + 1,
-		getCoreRowModel: getCoreRowModel(),
 		getRowId,
 		enableRowSelection: !!enableRowSelection,
 		onSortingChange: (updater) => {
@@ -1579,4 +1611,4 @@ const DataTable = {
 	DatePickerFilter
 };
 //#endregion
-export { DEFAULT_DEBOUNCE_MS as _, useDataTablePagination as a, DEFAULT_PAGE_SIZES as b, useDataTableSelection as c, resolvePath as d, rowMatchesSearch as f, useNuqsAdapter as g, createSelectionColumn as h, useDataTableLoading as i, useDataTableSorting as l, DataTableColumnHeader as m, useDataTableFilters as n, useDataTableRows as o, DataTableRowActions as p, useDataTableInlineContents as r, useDataTableSearch as s, DataTable as t, createDataTableStore as u, DEFAULT_LOADING_ROWS as v, DEFAULT_PAGE_SIZE as y };
+export { useNuqsAdapter as _, useDataTablePagination as a, DEFAULT_PAGE_SIZE as b, useDataTableSelection as c, resolvePath as d, rowMatchesSearch as f, createSelectionColumn as g, DataTableColumnHeader as h, useDataTableLoading as i, useDataTableSorting as l, DataTableRowActions as m, useDataTableFilters as n, useDataTableRows as o, dataTableFeatures as p, useDataTableInlineContents as r, useDataTableSearch as s, DataTable as t, createDataTableStore as u, DEFAULT_DEBOUNCE_MS as v, DEFAULT_PAGE_SIZES as x, DEFAULT_LOADING_ROWS as y };

package/dist/date-picker/index.mjs

@@ -1,4 +1,4 @@
-import { G as getTimezoneOffset, U as formatTimezoneLabel, W as getBrowserTimezone } from "../picker-b5-x-EHs.mjs";
-import { t as CalendarDatePicker } from "../calendar-date-picker-AzvSqjeS.mjs";
-import { _ as getShortTimezoneDisplay, a as TimeRangePicker, b as utcToLocalInputString, c as getPresetByKey, d as TimezoneSelector, f as QuickRangesPanel, g as getDefaultTimezoneOptions, h as formatUtcForDisplay, 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 localInputStringToUtc, x as zonedDateToUtcString, y as utcStringToZonedDate } from "../to-api-format-43Boq7OR.mjs";
+import { M as getBrowserTimezone, N as getTimezoneOffset, j as formatTimezoneLabel } from "../date-time-range-picker-Dog33Ry0.mjs";
+import { t as CalendarDatePicker } from "../calendar-date-picker-ynSGADfR.mjs";
+import { _ as getShortTimezoneDisplay, a as TimeRangePicker, b as utcToLocalInputString, c as getPresetByKey, d as TimezoneSelector, f as QuickRangesPanel, g as getDefaultTimezoneOptions, h as formatUtcForDisplay, 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 localInputStringToUtc, x as zonedDateToUtcString, y as utcStringToZonedDate } from "../to-api-format-WC7b9Mcv.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-time/index.mjs

@@ -0,0 +1,2 @@
+import { a as formatRelativeDate, c as getTimestamp, i as formatCombinedDate, l as getTimezoneAbbreviation, n as DEFAULT_DATE_FORMAT, o as formatTimezoneDate, r as formatAbsoluteDate, s as formatUTCDate, t as DateTime, u as parseDate } from "../date-time-CA-09lnw.mjs";
+export { DEFAULT_DATE_FORMAT, DateTime, formatAbsoluteDate, formatCombinedDate, formatRelativeDate, formatTimezoneDate, formatUTCDate, getTimestamp, getTimezoneAbbreviation, parseDate };

package/dist/date-time-CA-09lnw.mjs

@@ -0,0 +1,134 @@
+import { t as cn } from "./utils-Bu32wN-x.mjs";
+import { t as Tooltip } from "./tooltip-C_SL1imw.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { formatInTimeZone } from "date-fns-tz";
+import { format, formatDistanceToNowStrict } from "date-fns";
+import { enUS } from "date-fns/locale/en-US";
+//#region src/components/features/date-time/formatters.ts
+/** e.g. "June 12th at 11:30 AM" — used for absolute / table dates. */
+const DEFAULT_DATE_FORMAT = "MMMM do 'at' h:mm a";
+function getBrowserTimezone() {
+	try {
+		return new Intl.DateTimeFormat().resolvedOptions().timeZone;
+	} catch {
+		return "UTC";
+	}
+}
+function parseDate(date) {
+	const parsedDate = date instanceof Date ? date : new Date(date);
+	if (!date || Number.isNaN(parsedDate.getTime())) return null;
+	return parsedDate;
+}
+function formatAbsoluteDate(date, options) {
+	const formatString = options.format || "MMMM do 'at' h:mm a";
+	if (options.disableTimezone) return format(date, formatString, { locale: enUS });
+	return formatInTimeZone(date, options.timezone, formatString, { locale: enUS });
+}
+function formatRelativeDate(date, options) {
+	return formatDistanceToNowStrict(date, { addSuffix: options.addSuffix ?? true });
+}
+function getTimezoneAbbreviation(date, timezone) {
+	return formatInTimeZone(date, timezone, "zzz", { locale: enUS });
+}
+function formatCombinedDate(date, options, separator = " ") {
+	return `${formatAbsoluteDate(date, options)}${separator}(${formatRelativeDate(date, options)})`;
+}
+function formatUTCDate(date, format = "dd MMM yy HH:mm:ss") {
+	return formatInTimeZone(date, "UTC", format, { locale: enUS });
+}
+function formatTimezoneDate(date, timezone, format = "dd MMM yy HH:mm:ss") {
+	return formatInTimeZone(date, timezone, format, { locale: enUS });
+}
+/** Microseconds since epoch, matching the Datum DateTime tooltip. */
+function getTimestamp(date) {
+	return (date.getTime() * 1e3).toString();
+}
+//#endregion
+//#region src/components/features/date-time/date-time.tsx
+/**
+* Date display with the shared Datum hover tooltip (UTC, local zone, relative, epoch).
+*/
+function DateTime({ date, variant = "detailed", format, addSuffix, tooltip = "auto", timezone, disableTimezone = false, className, separator = " ", timestamp, children }) {
+	if (!date) return null;
+	const parsedDate = parseDate(date);
+	if (!parsedDate) return null;
+	const timeZone = timezone ?? getBrowserTimezone();
+	const formatterOptions = {
+		timezone: timeZone,
+		disableTimezone,
+		format,
+		addSuffix
+	};
+	const shouldShowTooltip = tooltip !== false && !disableTimezone;
+	const textClass = cn("text-sm", shouldShowTooltip && "cursor-pointer", className);
+	const trigger = children ?? /* @__PURE__ */ jsx("time", {
+		dateTime: parsedDate.toISOString(),
+		className: textClass,
+		children: formatTriggerContent(parsedDate, variant, formatterOptions, separator)
+	});
+	if (!shouldShowTooltip) return trigger;
+	const showDetailedTooltip = variant === "detailed" || tooltip === "detailed";
+	return /* @__PURE__ */ jsx(Tooltip, {
+		message: getTooltipContent(parsedDate, variant, tooltip, formatterOptions, timeZone, timestamp),
+		contentClassName: showDetailedTooltip ? "min-w-64 text-left" : void 0,
+		children: trigger
+	});
+}
+function formatTriggerContent(date, variant, options, separator) {
+	switch (variant) {
+		case "relative": return formatRelativeDate(date, options);
+		case "both": return formatCombinedDate(date, options, separator);
+		default: return formatAbsoluteDate(date, options);
+	}
+}
+function getTooltipContent(date, variant, tooltip, options, timeZone, timestamp) {
+	if (variant === "detailed" || tooltip === "detailed") {
+		const rows = [
+			{
+				label: "UTC",
+				value: formatUTCDate(date)
+			},
+			{
+				label: timeZone.replaceAll("_", " "),
+				value: formatTimezoneDate(date, timeZone)
+			},
+			{
+				label: "Relative",
+				value: formatRelativeDate(date, options)
+			},
+			{
+				label: "Timestamp",
+				value: timestamp ?? getTimestamp(date)
+			}
+		];
+		return /* @__PURE__ */ jsx("div", {
+			className: "space-y-2 text-xs",
+			children: rows.map((row) => /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: row.label
+					}),
+					/* @__PURE__ */ jsx("span", { className: "mx-1 flex-1 border-b border-dotted border-current/50" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-right",
+						children: row.value
+					})
+				]
+			}, row.label))
+		});
+	}
+	if (tooltip === "timezone") return /* @__PURE__ */ jsx("p", { children: `${timeZone.replaceAll("_", " ")} (${getTimezoneAbbreviation(date, timeZone)})` });
+	if (tooltip === "alternate") {
+		if (variant === "relative") return formatAbsoluteDate(date, options);
+		if (variant === "absolute" || variant === "both") return formatRelativeDate(date, options);
+	}
+	if (tooltip === "auto" || tooltip === true) switch (variant) {
+		case "relative": return formatAbsoluteDate(date, options);
+		default: return /* @__PURE__ */ jsx("p", { children: `${timeZone.replaceAll("_", " ")} (${getTimezoneAbbreviation(date, timeZone)})` });
+	}
+	return null;
+}
+//#endregion
+export { formatRelativeDate as a, getTimestamp as c, formatCombinedDate as i, getTimezoneAbbreviation as l, DEFAULT_DATE_FORMAT as n, formatTimezoneDate as o, formatAbsoluteDate as r, formatUTCDate as s, DateTime as t, parseDate as u };

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

@@ -1,2 +1,2 @@
-import { t as DateTimePicker } from "../date-time-picker-D3-DeNo8.mjs";
+import { t as DateTimePicker } from "../date-time-picker-BzcHrf-A.mjs";
 export { DateTimePicker };

package/dist/{date-time-picker-D3-DeNo8.mjs → date-time-picker-BzcHrf-A.mjs}

@@ -1,5 +1,5 @@
-import { i as DateTimePicker$1 } from "./picker-b5-x-EHs.mjs";
 import { t as useDeprecationWarning } from "./use-deprecation-warning-DXrGc0jX.mjs";
+import { r as DateTimePicker$1 } from "./picker-raVuDxsh.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/features/date-time-picker/date-time-picker.tsx
 /**