@wordrhyme/auto-crud 1.0.9 → 1.1.0

package/dist/index.cjs

@@ -825,10 +825,14 @@ function useQueryStates(parsers, options = {}) {
 //#endregion
 //#region src/hooks/use-readable-filters.ts
 const URL_CHANGE_EVENT = "urlchange";
+function toSearchString(params) {
+	const queryString = params.toString().replace(/%2C/g, ",");
+	return queryString ? `?${queryString}` : "";
+}
 function useReadableFilters(columns, options = {}) {
 	const { history = "replace", scroll = false } = options;
 	const columnSnapshot = react.useMemo(() => columns, [columns]);
-	const lastWrittenUrlRef = react.useRef("");
+	const lastWrittenUrlRef = react.useRef(null);
 	const filtersRef = react.useRef(null);
 	const [filters, setFilters] = react.useState(() => {
 		const initial = parseReadableFilters(getUrlParams(), columnSnapshot);
@@ -837,7 +841,10 @@ function useReadableFilters(columns, options = {}) {
 	});
 	react.useEffect(() => {
 		const handleUrlChange = () => {
-			if (window.location.search === lastWrittenUrlRef.current) return;
+			if (lastWrittenUrlRef.current !== null && window.location.search === lastWrittenUrlRef.current) {
+				lastWrittenUrlRef.current = null;
+				return;
+			}
 			const next = parseReadableFilters(getUrlParams(), columnSnapshot);
 			filtersRef.current = next;
 			setFilters(next);
@@ -852,11 +859,11 @@ function useReadableFilters(columns, options = {}) {
 	const writeToUrl = react.useCallback((next) => {
 		const params = getUrlParams();
 		applyReadableFilters(params, columnSnapshot, next);
+		lastWrittenUrlRef.current = toSearchString(params);
 		setSearchParams(params, {
 			history,
 			scroll
 		});
-		lastWrittenUrlRef.current = `?${params.toString()}`;
 	}, [
 		columnSnapshot,
 		history,

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 import { z } from "zod";
 import * as _tanstack_react_table0 from "@tanstack/react-table";
 import { Column, ColumnDef, ColumnSort, Row, RowData, Table, TableOptions, TableState } from "@tanstack/react-table";
@@ -314,7 +314,7 @@ declare function AutoTableActionBar<TData>({
   enableExport,
   enableDelete,
   extraActions
-}: AutoTableActionBarProps<TData>): react_jsx_runtime1.JSX.Element;
+}: AutoTableActionBarProps<TData>): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/lib/schema-bridge/types.d.ts
 /**
@@ -470,7 +470,7 @@ declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
   enableExport,
   onSelectedCountChange,
   getSelectedRows
-}: AutoTableProps<T>): react_jsx_runtime1.JSX.Element;
+}: AutoTableProps<T>): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/i18n/locale.d.ts
 /**
@@ -797,7 +797,7 @@ declare function AutoCrudTable<TSchema extends z.ZodObject<z.ZodRawShape>>({
   toolbarActions,
   locale: localeProp,
   onCreate
-}: AutoCrudTableProps<TSchema>): react_jsx_runtime1.JSX.Element;
+}: AutoCrudTableProps<TSchema>): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/auto-form.d.ts
 interface AutoFormProps<T extends z.ZodObject<z.ZodRawShape>> {
@@ -829,7 +829,7 @@ declare function AutoFormInner<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   showSubmitButton
-}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime1.JSX.Element;
+}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime9.JSX.Element;
 declare const AutoForm: <T extends z.ZodObject<z.ZodRawShape>>(props: AutoFormProps<T> & {
   ref?: React.Ref<AutoFormRef>;
 }) => ReturnType<typeof AutoFormInner>;
@@ -1127,7 +1127,7 @@ declare function AutoTableSimpleFilters<TData>({
   shallow,
   filters: externalFilters,
   onFiltersChange
-}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime1.JSX.Element | null;
+}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime9.JSX.Element | null;
 //#endregion
 //#region src/components/auto-crud/form-modal.d.ts
 type ModalVariant = "dialog" | "sheet";
@@ -1169,7 +1169,7 @@ declare function CrudFormModal<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   className
-}: CrudFormModalProps<T>): react_jsx_runtime1.JSX.Element;
+}: CrudFormModalProps<T>): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/import-dialog.d.ts
 interface ImportDialogProps {
@@ -1191,7 +1191,7 @@ declare function ImportDialog({
   columns,
   title,
   locale
-}: ImportDialogProps): react_jsx_runtime1.JSX.Element;
+}: ImportDialogProps): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/export-dialog.d.ts
 type ExportMode = "selected" | "filtered";
@@ -1211,7 +1211,7 @@ declare function ExportDialog({
   selectedCount,
   onExport,
   canExportFiltered
-}: ExportDialogProps): react_jsx_runtime1.JSX.Element;
+}: ExportDialogProps): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table.d.ts
 interface DataTableProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1224,7 +1224,7 @@ declare function DataTable<TData>({
   children,
   className,
   ...props
-}: DataTableProps<TData>): react_jsx_runtime1.JSX.Element;
+}: DataTableProps<TData>): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-advanced-toolbar.d.ts
 interface DataTableAdvancedToolbarProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1235,7 +1235,7 @@ declare function DataTableAdvancedToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime1.JSX.Element;
+}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-column-header.d.ts
 interface DataTableColumnHeaderProps<TData, TValue> extends React.ComponentProps<typeof DropdownMenuTrigger> {
@@ -1247,7 +1247,7 @@ declare function DataTableColumnHeader<TData, TValue>({
   label,
   className,
   ...props
-}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime1.JSX.Element;
+}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-faceted-filter.d.ts
 interface DataTableFacetedFilterProps<TData, TValue> {
@@ -1261,7 +1261,7 @@ declare function DataTableFacetedFilter<TData, TValue>({
   title,
   options,
   multiple
-}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime1.JSX.Element;
+}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-pagination.d.ts
 interface DataTablePaginationProps<TData> extends React.ComponentProps<"div"> {
@@ -1273,7 +1273,7 @@ declare function DataTablePagination<TData>({
   pageSizeOptions,
   className,
   ...props
-}: DataTablePaginationProps<TData>): react_jsx_runtime1.JSX.Element;
+}: DataTablePaginationProps<TData>): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-toolbar.d.ts
 interface DataTableToolbarProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1284,7 +1284,7 @@ declare function DataTableToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableToolbarProps<TData>): react_jsx_runtime1.JSX.Element;
+}: DataTableToolbarProps<TData>): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-view-options.d.ts
 interface DataTableViewOptionsProps<TData> extends React$1.ComponentProps<typeof PopoverContent> {
@@ -1295,7 +1295,7 @@ declare function DataTableViewOptions<TData>({
   table,
   disabled,
   ...props
-}: DataTableViewOptionsProps<TData>): react_jsx_runtime1.JSX.Element;
+}: DataTableViewOptionsProps<TData>): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/hooks/use-data-table.d.ts
 interface UseDataTableProps<TData> extends Omit<TableOptions<TData>, "state" | "pageCount" | "getCoreRowModel" | "manualFiltering" | "manualPagination" | "manualSorting">, Required<Pick<TableOptions<TData>, "pageCount">> {

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 "@pixpilot/shadcn";
 import { ClassValue } from "clsx";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 import { z } from "zod";
 import { ISchema } from "@formily/json-schema";
 
@@ -314,7 +314,7 @@ declare function AutoTableActionBar<TData>({
   enableExport,
   enableDelete,
   extraActions
-}: AutoTableActionBarProps<TData>): react_jsx_runtime2.JSX.Element;
+}: AutoTableActionBarProps<TData>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/lib/schema-bridge/types.d.ts
 /**
@@ -470,7 +470,7 @@ declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
   enableExport,
   onSelectedCountChange,
   getSelectedRows
-}: AutoTableProps<T>): react_jsx_runtime2.JSX.Element;
+}: AutoTableProps<T>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/i18n/locale.d.ts
 /**
@@ -797,7 +797,7 @@ declare function AutoCrudTable<TSchema extends z.ZodObject<z.ZodRawShape>>({
   toolbarActions,
   locale: localeProp,
   onCreate
-}: AutoCrudTableProps<TSchema>): react_jsx_runtime2.JSX.Element;
+}: AutoCrudTableProps<TSchema>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/auto-form.d.ts
 interface AutoFormProps<T extends z.ZodObject<z.ZodRawShape>> {
@@ -829,7 +829,7 @@ declare function AutoFormInner<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   showSubmitButton
-}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime2.JSX.Element;
+}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime3.JSX.Element;
 declare const AutoForm: <T extends z.ZodObject<z.ZodRawShape>>(props: AutoFormProps<T> & {
   ref?: React.Ref<AutoFormRef>;
 }) => ReturnType<typeof AutoFormInner>;
@@ -1127,7 +1127,7 @@ declare function AutoTableSimpleFilters<TData>({
   shallow,
   filters: externalFilters,
   onFiltersChange
-}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime2.JSX.Element | null;
+}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime3.JSX.Element | null;
 //#endregion
 //#region src/components/auto-crud/form-modal.d.ts
 type ModalVariant = "dialog" | "sheet";
@@ -1169,7 +1169,7 @@ declare function CrudFormModal<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   className
-}: CrudFormModalProps<T>): react_jsx_runtime2.JSX.Element;
+}: CrudFormModalProps<T>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/import-dialog.d.ts
 interface ImportDialogProps {
@@ -1191,7 +1191,7 @@ declare function ImportDialog({
   columns,
   title,
   locale
-}: ImportDialogProps): react_jsx_runtime2.JSX.Element;
+}: ImportDialogProps): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/export-dialog.d.ts
 type ExportMode = "selected" | "filtered";
@@ -1211,7 +1211,7 @@ declare function ExportDialog({
   selectedCount,
   onExport,
   canExportFiltered
-}: ExportDialogProps): react_jsx_runtime2.JSX.Element;
+}: ExportDialogProps): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table.d.ts
 interface DataTableProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1224,7 +1224,7 @@ declare function DataTable<TData>({
   children,
   className,
   ...props
-}: DataTableProps<TData>): react_jsx_runtime2.JSX.Element;
+}: DataTableProps<TData>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-advanced-toolbar.d.ts
 interface DataTableAdvancedToolbarProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1235,7 +1235,7 @@ declare function DataTableAdvancedToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime2.JSX.Element;
+}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-column-header.d.ts
 interface DataTableColumnHeaderProps<TData, TValue> extends React.ComponentProps<typeof DropdownMenuTrigger> {
@@ -1247,7 +1247,7 @@ declare function DataTableColumnHeader<TData, TValue>({
   label,
   className,
   ...props
-}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime2.JSX.Element;
+}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-faceted-filter.d.ts
 interface DataTableFacetedFilterProps<TData, TValue> {
@@ -1261,7 +1261,7 @@ declare function DataTableFacetedFilter<TData, TValue>({
   title,
   options,
   multiple
-}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime2.JSX.Element;
+}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-pagination.d.ts
 interface DataTablePaginationProps<TData> extends React.ComponentProps<"div"> {
@@ -1273,7 +1273,7 @@ declare function DataTablePagination<TData>({
   pageSizeOptions,
   className,
   ...props
-}: DataTablePaginationProps<TData>): react_jsx_runtime2.JSX.Element;
+}: DataTablePaginationProps<TData>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-toolbar.d.ts
 interface DataTableToolbarProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1284,7 +1284,7 @@ declare function DataTableToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableToolbarProps<TData>): react_jsx_runtime2.JSX.Element;
+}: DataTableToolbarProps<TData>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-view-options.d.ts
 interface DataTableViewOptionsProps<TData> extends React$1.ComponentProps<typeof PopoverContent> {
@@ -1295,7 +1295,7 @@ declare function DataTableViewOptions<TData>({
   table,
   disabled,
   ...props
-}: DataTableViewOptionsProps<TData>): react_jsx_runtime2.JSX.Element;
+}: DataTableViewOptionsProps<TData>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/hooks/use-data-table.d.ts
 interface UseDataTableProps<TData> extends Omit<TableOptions<TData>, "state" | "pageCount" | "getCoreRowModel" | "manualFiltering" | "manualPagination" | "manualSorting">, Required<Pick<TableOptions<TData>, "pageCount">> {

package/dist/index.js

@@ -783,10 +783,14 @@ function useQueryStates(parsers, options = {}) {
 //#endregion
 //#region src/hooks/use-readable-filters.ts
 const URL_CHANGE_EVENT = "urlchange";
+function toSearchString(params) {
+	const queryString = params.toString().replace(/%2C/g, ",");
+	return queryString ? `?${queryString}` : "";
+}
 function useReadableFilters(columns, options = {}) {
 	const { history = "replace", scroll = false } = options;
 	const columnSnapshot = React.useMemo(() => columns, [columns]);
-	const lastWrittenUrlRef = React.useRef("");
+	const lastWrittenUrlRef = React.useRef(null);
 	const filtersRef = React.useRef(null);
 	const [filters, setFilters] = React.useState(() => {
 		const initial = parseReadableFilters(getUrlParams(), columnSnapshot);
@@ -795,7 +799,10 @@ function useReadableFilters(columns, options = {}) {
 	});
 	React.useEffect(() => {
 		const handleUrlChange = () => {
-			if (window.location.search === lastWrittenUrlRef.current) return;
+			if (lastWrittenUrlRef.current !== null && window.location.search === lastWrittenUrlRef.current) {
+				lastWrittenUrlRef.current = null;
+				return;
+			}
 			const next = parseReadableFilters(getUrlParams(), columnSnapshot);
 			filtersRef.current = next;
 			setFilters(next);
@@ -810,11 +817,11 @@ function useReadableFilters(columns, options = {}) {
 	const writeToUrl = React.useCallback((next) => {
 		const params = getUrlParams();
 		applyReadableFilters(params, columnSnapshot, next);
+		lastWrittenUrlRef.current = toSearchString(params);
 		setSearchParams(params, {
 			history,
 			scroll
 		});
-		lastWrittenUrlRef.current = `?${params.toString()}`;
 	}, [
 		columnSnapshot,
 		history,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wordrhyme/auto-crud",
   "type": "module",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "Schema-first CRUD components with auto-generated tables and forms",
   "author": "wordrhyme",
   "license": "MIT",
@@ -85,8 +85,8 @@
     "@internal/eslint-config": "0.3.0",
     "@internal/prettier-config": "0.0.1",
     "@internal/tsconfig": "0.1.0",
-    "@internal/vitest-config": "0.1.0",
-    "@internal/tsdown-config": "0.1.0"
+    "@internal/tsdown-config": "0.1.0",
+    "@internal/vitest-config": "0.1.0"
   },
   "prettier": "@internal/prettier-config",
   "scripts": {