@wordrhyme/auto-crud 1.5.0 → 1.5.1

package/dist/index.cjs

@@ -380,9 +380,77 @@ function getDefaultFilterOperator(filterVariant) {
 	return getFilterOperators(filterVariant)[0]?.value ?? (filterVariant === "text" ? "iLike" : "eq");
 }
 
+//#endregion
+//#region src/lib/format.ts
+let hostDateFormatters = [];
+let dateFormatterVersion = 0;
+const dateFormatterListeners = /* @__PURE__ */ new Set();
+function notifyDateFormatterChange() {
+	dateFormatterVersion += 1;
+	dateFormatterListeners.forEach((listener) => listener());
+}
+function subscribeDateFormatter(listener) {
+	dateFormatterListeners.add(listener);
+	return () => {
+		dateFormatterListeners.delete(listener);
+	};
+}
+function getDateFormatterVersion() {
+	return dateFormatterVersion;
+}
+function useDateFormatterVersion() {
+	return (0, react.useSyncExternalStore)(subscribeDateFormatter, getDateFormatterVersion, getDateFormatterVersion);
+}
+function getHostDateFormatter() {
+	return hostDateFormatters[hostDateFormatters.length - 1]?.formatter;
+}
+/**
+* Register the host's process-wide date presentation policy without coupling
+* AutoCrud to locale or timezone selection. The returned cleanup removes only
+* this registration, so overlapping registrations may be disposed out of order.
+* Passing undefined clears every registration.
+*/
+function setDateFormatter(formatter) {
+	if (formatter === void 0) {
+		const hadFormatter = hostDateFormatters.length > 0;
+		hostDateFormatters = [];
+		if (hadFormatter) notifyDateFormatterChange();
+		return () => void 0;
+	}
+	const registration = {
+		formatter,
+		token: Symbol("date-formatter")
+	};
+	hostDateFormatters.push(registration);
+	notifyDateFormatterChange();
+	return () => {
+		const currentFormatter = getHostDateFormatter();
+		const previousLength = hostDateFormatters.length;
+		hostDateFormatters = hostDateFormatters.filter(({ token }) => token !== registration.token);
+		if (hostDateFormatters.length !== previousLength && getHostDateFormatter() !== currentFormatter) notifyDateFormatterChange();
+	};
+}
+function formatDate(date, opts = {}) {
+	if (date === void 0) return "";
+	try {
+		const value = new Date(date);
+		const options = {
+			month: opts.month ?? "long",
+			day: opts.day ?? "numeric",
+			year: opts.year ?? "numeric",
+			...opts
+		};
+		const hostDateFormatter = getHostDateFormatter();
+		return hostDateFormatter ? hostDateFormatter(value, options) : new Intl.DateTimeFormat("en-US", options).format(value);
+	} catch {
+		return "";
+	}
+}
+
 //#endregion
 //#region src/components/data-table/data-table.tsx
 function DataTable({ table, actionBar, children, className,...props }) {
+	useDateFormatterVersion();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: cn("flex w-full flex-col gap-2.5 overflow-auto", className),
 		...props,
@@ -921,49 +989,6 @@ function useDebouncedCallback(callback, delay) {
 	}, [handleCallback, delay]);
 }
 
-//#endregion
-//#region src/lib/format.ts
-let hostDateFormatters = [];
-function getHostDateFormatter() {
-	return hostDateFormatters[hostDateFormatters.length - 1]?.formatter;
-}
-/**
-* Register the host's process-wide date presentation policy without coupling
-* AutoCrud to locale or timezone selection. The returned cleanup removes only
-* this registration, so overlapping registrations may be disposed out of order.
-* Passing undefined clears every registration.
-*/
-function setDateFormatter(formatter) {
-	if (formatter === void 0) {
-		hostDateFormatters = [];
-		return () => void 0;
-	}
-	const registration = {
-		formatter,
-		token: Symbol("date-formatter")
-	};
-	hostDateFormatters.push(registration);
-	return () => {
-		hostDateFormatters = hostDateFormatters.filter(({ token }) => token !== registration.token);
-	};
-}
-function formatDate(date, opts = {}) {
-	if (date === void 0) return "";
-	try {
-		const value = new Date(date);
-		const options = {
-			month: opts.month ?? "long",
-			day: opts.day ?? "numeric",
-			year: opts.year ?? "numeric",
-			...opts
-		};
-		const hostDateFormatter = getHostDateFormatter();
-		return hostDateFormatter ? hostDateFormatter(value, options) : new Intl.DateTimeFormat("en-US", options).format(value);
-	} catch {
-		return "";
-	}
-}
-
 //#endregion
 //#region src/components/data-table/data-table-filter-list.tsx
 const DEBOUNCE_MS$2 = 300;

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import * as _tanstack_react_table0 from "@tanstack/react-table";
 import { Column, ColumnDef, ColumnSort, Row, RowData, Table, TableOptions, TableState } from "@tanstack/react-table";
 import { DropdownMenuTrigger, PopoverContent } from "@wordrhyme/shadcn";
 import { ClassValue } from "clsx";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 import { MultiCombobox, MultiComboboxOption, MultiComboboxProps, MultiComboboxTriggerRenderProps, Select, SelectMode, SelectOption, SelectProps, SelectSearchableDynamicProps, SelectSearchableMultipleProps, SelectSearchableProps, SelectSearchableSingleProps, SelectSimpleProps, SelectTriggerRenderProps } from "@wordrhyme/shadcn-ui";
 import { z } from "zod";
 import { JsonSchemaFormScope } from "@wordrhyme/formily-shadcn";
@@ -411,7 +411,7 @@ declare function AutoTableActionBar<TData>({
   extraActions,
   actions,
   deleteConfirmation
-}: AutoTableActionBarProps<TData>): react_jsx_runtime3.JSX.Element;
+}: AutoTableActionBarProps<TData>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/lib/schema-bridge/types.d.ts
 /**
@@ -587,7 +587,7 @@ declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
   onSelectedCountChange,
   onSelectedRowsChange,
   getSelectedRows
-}: AutoTableProps<T>): react_jsx_runtime3.JSX.Element;
+}: AutoTableProps<T>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/i18n/locale.d.ts
 /**
@@ -1079,7 +1079,7 @@ declare function AutoCrudTable<TSchema extends z.ZodObject<z.ZodRawShape>>({
   toolbarActions,
   locale: localeProp,
   onCreate
-}: AutoCrudTableProps<TSchema>): react_jsx_runtime3.JSX.Element;
+}: AutoCrudTableProps<TSchema>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/auto-form.d.ts
 interface AutoFormProps<T extends z.ZodObject<z.ZodRawShape>> {
@@ -1118,7 +1118,7 @@ declare function AutoFormInner<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   showSubmitButton
-}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime3.JSX.Element;
+}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime2.JSX.Element;
 declare const AutoForm: <T extends z.ZodObject<z.ZodRawShape>>(props: AutoFormProps<T> & {
   ref?: React.Ref<AutoFormRef>;
 }) => ReturnType<typeof AutoFormInner>;
@@ -1434,7 +1434,7 @@ declare function AutoTableSimpleFilters<TData>({
   filters: externalFilters,
   onFiltersChange,
   leading
-}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime3.JSX.Element | null;
+}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime2.JSX.Element | null;
 //#endregion
 //#region src/components/auto-crud/form-modal.d.ts
 type ModalVariant = 'dialog' | 'sheet';
@@ -1478,7 +1478,7 @@ declare function CrudFormModal<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   className
-}: CrudFormModalProps<T>): react_jsx_runtime3.JSX.Element;
+}: CrudFormModalProps<T>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/import-dialog.d.ts
 interface ImportDialogProps {
@@ -1500,7 +1500,7 @@ declare function ImportDialog({
   columns,
   title,
   locale
-}: ImportDialogProps): react_jsx_runtime3.JSX.Element;
+}: ImportDialogProps): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/export-dialog.d.ts
 type ExportMode = 'selected' | 'filtered';
@@ -1520,7 +1520,7 @@ declare function ExportDialog({
   selectedCount,
   onExport,
   canExportFiltered
-}: ExportDialogProps): react_jsx_runtime3.JSX.Element;
+}: ExportDialogProps): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table.d.ts
 interface DataTableProps<TData> extends React$1.ComponentProps<'div'> {
@@ -1533,7 +1533,7 @@ declare function DataTable<TData>({
   children,
   className,
   ...props
-}: DataTableProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTableProps<TData>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-advanced-toolbar.d.ts
 interface DataTableAdvancedToolbarProps<TData> extends React$1.ComponentProps<'div'> {
@@ -1544,7 +1544,7 @@ declare function DataTableAdvancedToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-column-header.d.ts
 interface DataTableColumnHeaderProps<TData, TValue> extends React.ComponentProps<typeof DropdownMenuTrigger> {
@@ -1556,7 +1556,7 @@ declare function DataTableColumnHeader<TData, TValue>({
   label,
   className,
   ...props
-}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime3.JSX.Element;
+}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-faceted-filter.d.ts
 interface DataTableFacetedFilterProps<TData, TValue> {
@@ -1570,7 +1570,7 @@ declare function DataTableFacetedFilter<TData, TValue>({
   title,
   options,
   multiple
-}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime3.JSX.Element;
+}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-pagination.d.ts
 interface DataTablePaginationProps<TData> extends React.ComponentProps<'div'> {
@@ -1582,7 +1582,7 @@ declare function DataTablePagination<TData>({
   pageSizeOptions,
   className,
   ...props
-}: DataTablePaginationProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTablePaginationProps<TData>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-toolbar.d.ts
 interface DataTableToolbarProps<TData> extends React$1.ComponentProps<'div'> {
@@ -1593,7 +1593,7 @@ declare function DataTableToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableToolbarProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTableToolbarProps<TData>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-view-options.d.ts
 interface DataTableViewOptionsProps<TData> extends React$1.ComponentProps<typeof PopoverContent> {
@@ -1604,7 +1604,7 @@ declare function DataTableViewOptions<TData>({
   table,
   disabled,
   ...props
-}: DataTableViewOptionsProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTableViewOptionsProps<TData>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/lib/crud-actions.d.ts
 type CrudActionZone = 'toolbar' | 'row' | 'batch';

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState } from "react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
 import { ArrowDownUp, BadgeCheck, CalendarIcon, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsUpDown, CommandIcon, Download, Ellipsis, EyeOff, FileDown, FileSpreadsheetIcon, GripVertical, ListFilter, ListFilterIcon, Loader2, PlusCircle, RefreshCw, Settings2, Text, Trash2, Upload, X, XCircle } from "lucide-react";
 import { flexRender, getCoreRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Badge, Button, Calendar, Checkbox, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Input, Label, Popover, PopoverContent, PopoverTrigger, Select as Select$1, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, Slider, Switch, Table as Table$1, TableBody, TableCell, TableHead, TableHeader, TableRow, cn as cn$1 } from "@wordrhyme/shadcn";
@@ -343,9 +343,77 @@ function getDefaultFilterOperator(filterVariant) {
 	return getFilterOperators(filterVariant)[0]?.value ?? (filterVariant === "text" ? "iLike" : "eq");
 }
 
+//#endregion
+//#region src/lib/format.ts
+let hostDateFormatters = [];
+let dateFormatterVersion = 0;
+const dateFormatterListeners = /* @__PURE__ */ new Set();
+function notifyDateFormatterChange() {
+	dateFormatterVersion += 1;
+	dateFormatterListeners.forEach((listener) => listener());
+}
+function subscribeDateFormatter(listener) {
+	dateFormatterListeners.add(listener);
+	return () => {
+		dateFormatterListeners.delete(listener);
+	};
+}
+function getDateFormatterVersion() {
+	return dateFormatterVersion;
+}
+function useDateFormatterVersion() {
+	return useSyncExternalStore(subscribeDateFormatter, getDateFormatterVersion, getDateFormatterVersion);
+}
+function getHostDateFormatter() {
+	return hostDateFormatters[hostDateFormatters.length - 1]?.formatter;
+}
+/**
+* Register the host's process-wide date presentation policy without coupling
+* AutoCrud to locale or timezone selection. The returned cleanup removes only
+* this registration, so overlapping registrations may be disposed out of order.
+* Passing undefined clears every registration.
+*/
+function setDateFormatter(formatter) {
+	if (formatter === void 0) {
+		const hadFormatter = hostDateFormatters.length > 0;
+		hostDateFormatters = [];
+		if (hadFormatter) notifyDateFormatterChange();
+		return () => void 0;
+	}
+	const registration = {
+		formatter,
+		token: Symbol("date-formatter")
+	};
+	hostDateFormatters.push(registration);
+	notifyDateFormatterChange();
+	return () => {
+		const currentFormatter = getHostDateFormatter();
+		const previousLength = hostDateFormatters.length;
+		hostDateFormatters = hostDateFormatters.filter(({ token }) => token !== registration.token);
+		if (hostDateFormatters.length !== previousLength && getHostDateFormatter() !== currentFormatter) notifyDateFormatterChange();
+	};
+}
+function formatDate(date, opts = {}) {
+	if (date === void 0) return "";
+	try {
+		const value = new Date(date);
+		const options = {
+			month: opts.month ?? "long",
+			day: opts.day ?? "numeric",
+			year: opts.year ?? "numeric",
+			...opts
+		};
+		const hostDateFormatter = getHostDateFormatter();
+		return hostDateFormatter ? hostDateFormatter(value, options) : new Intl.DateTimeFormat("en-US", options).format(value);
+	} catch {
+		return "";
+	}
+}
+
 //#endregion
 //#region src/components/data-table/data-table.tsx
 function DataTable({ table, actionBar, children, className,...props }) {
+	useDateFormatterVersion();
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex w-full flex-col gap-2.5 overflow-auto", className),
 		...props,
@@ -884,49 +952,6 @@ function useDebouncedCallback(callback, delay) {
 	}, [handleCallback, delay]);
 }
 
-//#endregion
-//#region src/lib/format.ts
-let hostDateFormatters = [];
-function getHostDateFormatter() {
-	return hostDateFormatters[hostDateFormatters.length - 1]?.formatter;
-}
-/**
-* Register the host's process-wide date presentation policy without coupling
-* AutoCrud to locale or timezone selection. The returned cleanup removes only
-* this registration, so overlapping registrations may be disposed out of order.
-* Passing undefined clears every registration.
-*/
-function setDateFormatter(formatter) {
-	if (formatter === void 0) {
-		hostDateFormatters = [];
-		return () => void 0;
-	}
-	const registration = {
-		formatter,
-		token: Symbol("date-formatter")
-	};
-	hostDateFormatters.push(registration);
-	return () => {
-		hostDateFormatters = hostDateFormatters.filter(({ token }) => token !== registration.token);
-	};
-}
-function formatDate(date, opts = {}) {
-	if (date === void 0) return "";
-	try {
-		const value = new Date(date);
-		const options = {
-			month: opts.month ?? "long",
-			day: opts.day ?? "numeric",
-			year: opts.year ?? "numeric",
-			...opts
-		};
-		const hostDateFormatter = getHostDateFormatter();
-		return hostDateFormatter ? hostDateFormatter(value, options) : new Intl.DateTimeFormat("en-US", options).format(value);
-	} catch {
-		return "";
-	}
-}
-
 //#endregion
 //#region src/components/data-table/data-table-filter-list.tsx
 const DEBOUNCE_MS$2 = 300;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wordrhyme/auto-crud",
   "type": "module",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Schema-first CRUD components with auto-generated tables and forms",
   "author": "wordrhyme",
   "license": "MIT",
@@ -62,8 +62,8 @@
     "nanoid": "^5.1.6",
     "tailwind-merge": "^3.5.0",
     "vaul": "^1.1.2",
-    "@wordrhyme/shadcn-ui": "1.32.7",
     "@wordrhyme/formily-shadcn": "1.13.2",
+    "@wordrhyme/shadcn-ui": "1.32.7",
     "@wordrhyme/shadcn": "1.3.2"
   },
   "devDependencies": {