@krak-stack/registry 0.1.20 → 0.1.22

package/dist/components/ui/data-table.d.ts

@@ -1,19 +1,9 @@
 import { type ReactNode } from "react";
 import { type PaginationMessages } from "./pagination.js";
+import type { QueryType } from "../../lib/query.js";
 type RowData = object;
-export type DataTableSorting = readonly {
-    id: string;
-    desc: boolean;
-}[];
-export type DataTablePaginationState = {
-    pageIndex: number;
-    pageSize: number;
-};
 export type DataTableView = "table" | "gallery";
-export interface DataTablePublicState {
-    globalFilter: string;
-    sorting: DataTableSorting;
-    pagination: DataTablePaginationState;
+export interface DataTableUiState {
     columnVisibility: Record<string, boolean>;
     columnSizing: Record<string, number>;
     rowSelection: Record<string, boolean>;
@@ -21,6 +11,7 @@ export interface DataTablePublicState {
     collapsedGroups: Record<string, boolean>;
     view: DataTableView;
 }
+export type DataTablePublicState = QueryType & DataTableUiState;
 export interface DataTableValueGetterParams<TData extends RowData> {
     data: TData;
     rowId: string;
@@ -156,6 +147,8 @@ export type DataTableMessages = PaginationMessages & {
     sortBy: string;
     hideColumn: string;
     reorder: string;
+    moveUp: string;
+    moveDown: string;
     resizeColumn: (column: string) => string;
     listOthers: (count: number) => string;
     selectAllRows: string;
@@ -191,6 +184,8 @@ export declare const dataTableMessages: (overrides?: DataTableMessageOverrides)
     sortBy: string;
     hideColumn: string;
     reorder: string;
+    moveUp: string;
+    moveDown: string;
     resizeColumn: (column: string) => string;
     listOthers: (count: number) => string;
     selectAllRows: string;
@@ -224,6 +219,8 @@ export declare const dataTableMessages: (overrides?: DataTableMessageOverrides)
     sortBy: string;
     hideColumn: string;
     reorder: string;
+    moveUp: string;
+    moveDown: string;
     resizeColumn: (column: string) => string;
     listOthers: (count: number) => string;
     selectAllRows: string;
@@ -234,7 +231,7 @@ export interface DataTableProps<TData extends RowData> {
     rowData: readonly TData[];
     columnDefs: readonly DataTableColDef<TData>[];
     getRowId?: (row: TData) => string;
-    state?: Partial<DataTablePublicState>;
+    state?: DataTablePublicState;
     initialState?: Partial<DataTablePublicState>;
     onStateChange?: (state: DataTablePublicState) => void;
     status?: DataTableStatus;
@@ -267,9 +264,8 @@ export declare const normalizeDataTableColumns: <TData extends RowData>(columnDe
 export declare const getDataTableWidth: <TData extends RowData>(columns: readonly DataTableColumn<TData>[], utilityColumns?: number) => number;
 export declare const buildDataTableRows: <TData extends RowData>(rowData: readonly TData[], columns: readonly DataTableColumn<TData>[], getRowId?: (row: TData) => string) => DataTableModelRow<TData>[];
 export declare const filterDataTableRows: <TData extends RowData>(rows: readonly DataTableModelRow<TData>[], columns: readonly DataTableColumn<TData>[], globalFilter: string) => DataTableModelRow<TData>[];
-export declare const sortDataTableRows: <TData extends RowData>(rows: readonly DataTableModelRow<TData>[], columns: readonly DataTableColumn<TData>[], sorting: DataTableSorting) => DataTableModelRow<TData>[];
-export declare const paginateDataTableRows: <TData extends RowData>(rows: readonly DataTableModelRow<TData>[], pagination: DataTablePaginationState) => DataTableModelRow<TData>[];
-export declare const mergeDataTableState: (state: DataTablePublicState, controlledState?: Partial<DataTablePublicState>) => DataTablePublicState;
+export declare const sortDataTableRows: <TData extends RowData>(rows: readonly DataTableModelRow<TData>[], columns: readonly DataTableColumn<TData>[], sorting: NonNullable<QueryType["sort"]>) => DataTableModelRow<TData>[];
+export declare const paginateDataTableRows: <TData extends RowData>(rows: readonly DataTableModelRow<TData>[], pagination: Pick<QueryType, "page" | "pageSize">) => DataTableModelRow<TData>[];
 export declare const reorderDataTableRows: <TData extends RowData>(rows: readonly DataTableModelRow<TData>[], sourceRowId: string, targetRowId: string) => TData[];
 type GroupSection<TData extends RowData> = {
     key: string;

package/dist/components/ui/data-table.js

@@ -1828,6 +1828,8 @@ var messages3 = {
     sortBy: "Sort by",
     hideColumn: "Hide column",
     reorder: "Drag to reorder",
+    moveUp: "Move up",
+    moveDown: "Move down",
     resizeColumn: (column) => `Resize ${column} column`,
     listOthers: (count) => count === 1 ? "and 1 other" : `and ${count} others`,
     selectAllRows: "Select all rows on this page",
@@ -1855,6 +1857,8 @@ var messages3 = {
     sortBy: "Trier par",
     hideColumn: "Masquer la colonne",
     reorder: "Glisser pour réordonner",
+    moveUp: "Déplacer vers le haut",
+    moveDown: "Déplacer vers le bas",
     resizeColumn: (column) => `Redimensionner la colonne ${column}`,
     listOthers: (count) => count === 1 ? "et 1 autre" : `et ${count} autres`,
     selectAllRows: "Sélectionner toutes les lignes de cette page",
@@ -1870,9 +1874,8 @@ var DEFAULT_MIN_WIDTH = 96;
 var DEFAULT_WIDTH = 208;
 var DEFAULT_MAX_WIDTH = 640;
 var DEFAULT_STATE = {
-  globalFilter: "",
-  sorting: [],
-  pagination: { pageIndex: 0, pageSize: 10 },
+  page: 0,
+  pageSize: 10,
   columnVisibility: {},
   columnSizing: {},
   rowSelection: {},
@@ -1937,7 +1940,7 @@ var sortDataTableRows = (rows, columns, sorting) => {
       const rightValue = right.row.values.get(sort.id);
       const comparison = column.colDef.comparator ? column.colDef.comparator(leftValue, rightValue, left.row.data, right.row.data) : Object.is(leftValue, rightValue) ? 0 : leftValue === null || leftValue === undefined ? 1 : rightValue === null || rightValue === undefined ? -1 : Schema.is(Schema.Number)(leftValue) && Schema.is(Schema.Number)(rightValue) ? leftValue - rightValue : String(leftValue).localeCompare(String(rightValue), undefined, { numeric: true, sensitivity: "base" });
       if (comparison !== 0)
-        return sort.desc ? -comparison : comparison;
+        return sort.direction === "desc" ? -comparison : comparison;
     }
     return left.stableIndex - right.stableIndex;
   }).map(({ row }) => row);
@@ -1945,22 +1948,11 @@ var sortDataTableRows = (rows, columns, sorting) => {
 var paginateDataTableRows = (rows, pagination) => {
   const pageSize = Math.max(1, pagination.pageSize);
   const lastPageIndex = Math.max(0, Math.ceil(rows.length / pageSize) - 1);
-  const pageIndex = Math.min(lastPageIndex, Math.max(0, pagination.pageIndex));
+  const pageIndex = Math.min(lastPageIndex, Math.max(0, pagination.page));
   const start = pageIndex * pageSize;
   return rows.slice(start, start + pageSize);
 };
-var mergeDataTableState = (state, controlledState = {}) => ({
-  globalFilter: controlledState.globalFilter ?? state.globalFilter,
-  sorting: controlledState.sorting ?? state.sorting,
-  pagination: controlledState.pagination ?? state.pagination,
-  columnVisibility: controlledState.columnVisibility ?? state.columnVisibility,
-  columnSizing: controlledState.columnSizing ?? state.columnSizing,
-  rowSelection: controlledState.rowSelection ?? state.rowSelection,
-  grouping: controlledState.grouping ?? state.grouping,
-  collapsedGroups: controlledState.collapsedGroups ?? state.collapsedGroups,
-  view: controlledState.view ?? state.view
-});
-var sameDataTableState = (left, right) => left.globalFilter === right.globalFilter && left.sorting === right.sorting && left.pagination === right.pagination && left.columnVisibility === right.columnVisibility && left.columnSizing === right.columnSizing && left.rowSelection === right.rowSelection && left.grouping === right.grouping && left.collapsedGroups === right.collapsedGroups && left.view === right.view;
+var sameDataTableState = (left, right) => left.page === right.page && left.pageSize === right.pageSize && left.globalFilter === right.globalFilter && left.sort === right.sort && left.columnVisibility === right.columnVisibility && left.columnSizing === right.columnSizing && left.rowSelection === right.rowSelection && left.grouping === right.grouping && left.collapsedGroups === right.collapsedGroups && left.view === right.view;
 var reorderDataTableRows = (rows, sourceRowId, targetRowId) => {
   const sourceIndex = rows.findIndex((row) => row.id === sourceRowId);
   const targetIndex = rows.findIndex((row) => row.id === targetRowId);
@@ -2025,11 +2017,10 @@ var resolveConfig = (props) => {
 var initialPublicState = (props) => {
   const grouping = props.features?.grouping;
   const groupingInitial = grouping && grouping.initial ? grouping.initial : [];
-  return {
+  return props.state ?? {
     ...DEFAULT_STATE,
     grouping: groupingInitial,
-    ...props.initialState,
-    ...props.state
+    ...props.initialState
   };
 };
 var buildDataTableModel = (store) => {
@@ -2039,9 +2030,9 @@ var buildDataTableModel = (store) => {
   const rows = buildDataTableRows(store.rowData, columns, rowId);
   const pagination = store.config.features.pagination ?? { mode: "client" };
   const server = pagination !== false && pagination.mode === "server";
-  const filteredRows = server ? [...rows] : filterDataTableRows(rows, columns, store.state.globalFilter);
-  const sortedRows = server ? filteredRows : sortDataTableRows(filteredRows, columns, store.state.sorting);
-  const pageRows = pagination === false || server ? sortedRows : paginateDataTableRows(sortedRows, store.state.pagination);
+  const filteredRows = server ? [...rows] : filterDataTableRows(rows, columns, store.state.globalFilter ?? "");
+  const sortedRows = server ? filteredRows : sortDataTableRows(filteredRows, columns, store.state.sort ?? []);
+  const pageRows = pagination === false || server ? sortedRows : paginateDataTableRows(sortedRows, store.state);
   const totalRows = server ? pagination.rowCount : sortedRows.length;
   return {
     columns,
@@ -2050,7 +2041,7 @@ var buildDataTableModel = (store) => {
     filteredRows,
     sortedRows,
     pageRows,
-    pageCount: Math.max(1, Math.ceil(totalRows / Math.max(1, store.state.pagination.pageSize))),
+    pageCount: Math.max(1, Math.ceil(totalRows / Math.max(1, store.state.pageSize))),
     totalRows
   };
 };
@@ -2059,7 +2050,7 @@ var changeState = (setStore, update) => {
   setStore((store) => {
     const proposed = update(store.state);
     store.config.onStateChange?.(proposed);
-    const state = mergeDataTableState(proposed, store.controlledState);
+    const state = store.controlledState ?? proposed;
     if (sameDataTableState(state, store.state))
       return store;
     const next = { ...store, state };
@@ -2104,10 +2095,11 @@ var getActiveGrouping = (store) => {
 };
 var canReorderRows = (store) => {
   const pagination = store.config.features.pagination;
-  return !!store.config.features.reordering && !getActiveGrouping(store).length && !store.state.globalFilter && !store.state.sorting.length && !(pagination && pagination.mode === "server");
+  return !!store.config.features.reordering && !getActiveGrouping(store).length && !store.state.globalFilter && !store.state.sort?.length && !(pagination && pagination.mode === "server");
 };
 var canMoveRowsToGroups = (store) => getActiveGrouping(store).some((field) => !!field.onMoveToGroup);
 var canDragRows = (store) => getActiveGrouping(store).length ? canMoveRowsToGroups(store) : canReorderRows(store);
+var hasRowActionMenu = (store) => !!store.config.features.rowActions || canReorderRows(store);
 var getSelectedRows = (store, model) => model.rows.filter((row) => store.state.rowSelection[row.id]).map((row) => row.data);
 var renderCell = (row, column) => {
   const value = row.values.get(column.id);
@@ -2209,6 +2201,45 @@ var DataTableRowActions = ({
     ]
   });
 };
+var DataTableRowActionMenu = ({
+  tableAtom
+}) => {
+  const [store] = useTableAtom(tableAtom);
+  const rowId = useRequiredId(RowIdContext);
+  const model = deriveModel(store);
+  const row = model.sortedRows.find((candidate) => candidate.id === rowId);
+  if (!row)
+    return null;
+  const rowActions = store.config.features.rowActions || undefined;
+  const visibleRows = model.pageRows;
+  const rowIndex = visibleRows.findIndex((candidate) => candidate.id === rowId);
+  const reordering = store.config.features.reordering;
+  const reorderActions = [];
+  if (reordering && canReorderRows(store)) {
+    const move = (targetIndex) => reordering.onReorder(reorderDataTableRows(model.rows, rowId, visibleRows[targetIndex].id));
+    if (rowIndex > 0) {
+      reorderActions.push({
+        id: "data-table-move-up",
+        name: store.config.labels.moveUp,
+        icon: /* @__PURE__ */ jsx17(ArrowUp, {}),
+        onClick: () => move(rowIndex - 1)
+      });
+    }
+    if (rowIndex !== -1 && rowIndex < visibleRows.length - 1) {
+      reorderActions.push({
+        id: "data-table-move-down",
+        name: store.config.labels.moveDown,
+        icon: /* @__PURE__ */ jsx17(ArrowDown, {}),
+        onClick: () => move(rowIndex + 1)
+      });
+    }
+  }
+  return /* @__PURE__ */ jsx17(DataTableRowActions, {
+    actions: [...reorderActions, ...rowActions ? rowActions.items : []],
+    row: row.data,
+    title: rowActions?.label ?? store.config.labels.actions
+  });
+};
 var DataTableToolbar = ({
   tableAtom
 }) => {
@@ -2238,18 +2269,18 @@ var DataTableToolbar = ({
             onChange: (event) => update((state) => ({
               ...state,
               globalFilter: event.target.value,
-              pagination: { ...state.pagination, pageIndex: 0 }
+              page: 0
             })),
             placeholder: labels2.filter,
-            value: store.state.globalFilter
+            value: store.state.globalFilter ?? ""
           }),
           store.state.globalFilter ? /* @__PURE__ */ jsx17(Button, {
             "aria-label": labels2.filter,
             className: "absolute top-1/2 right-1 size-7 -translate-y-1/2",
             onClick: () => update((state) => ({
               ...state,
-              globalFilter: "",
-              pagination: { ...state.pagination, pageIndex: 0 }
+              globalFilter: undefined,
+              page: 0
             })),
             size: "icon",
             variant: "ghost",
@@ -2408,18 +2439,18 @@ var SortMenu = ({
   const columns = deriveModel(store).columns.filter(({ colDef }) => colDef.sortable !== false);
   if (!columns.length)
     return null;
-  const current = store.state.sorting[0];
-  const sort = (id, desc) => changeState(setStore, (state) => ({
+  const current = store.state.sort?.[0];
+  const sort = (id, direction) => changeState(setStore, (state) => ({
     ...state,
-    sorting: [{ id, desc }],
-    pagination: { ...state.pagination, pageIndex: 0 }
+    sort: [{ id, direction }],
+    page: 0
   }));
   return /* @__PURE__ */ jsxs9(MenubarMenu, {
     children: [
       /* @__PURE__ */ jsxs9(MenubarTrigger, {
         "aria-label": store.config.labels.sortBy,
         children: [
-          current ? current.desc ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {}) : /* @__PURE__ */ jsx17(ChevronsUpDown2, {}),
+          current ? current.direction === "desc" ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {}) : /* @__PURE__ */ jsx17(ChevronsUpDown2, {}),
           /* @__PURE__ */ jsx17("span", {
             className: "hidden sm:inline",
             children: store.config.labels.sortBy
@@ -2430,19 +2461,19 @@ var SortMenu = ({
         align: "end",
         className: "w-52",
         children: columns.map((column) => {
-          const sortState = store.state.sorting.find(({ id }) => id === column.id);
+          const sortState = store.state.sort?.find(({ id }) => id === column.id);
           return /* @__PURE__ */ jsxs9(MenubarSub, {
             children: [
               /* @__PURE__ */ jsxs9(MenubarSubTrigger, {
                 children: [
-                  sortState ? sortState.desc ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {}) : null,
+                  sortState ? sortState.direction === "desc" ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {}) : null,
                   columnLabel(column)
                 ]
               }),
               /* @__PURE__ */ jsxs9(MenubarSubContent, {
                 children: [
                   /* @__PURE__ */ jsxs9(MenubarItem, {
-                    onClick: () => sort(column.id, false),
+                    onClick: () => sort(column.id, "asc"),
                     children: [
                       /* @__PURE__ */ jsx17(ArrowUp, {}),
                       " ",
@@ -2450,7 +2481,7 @@ var SortMenu = ({
                     ]
                   }),
                   /* @__PURE__ */ jsxs9(MenubarItem, {
-                    onClick: () => sort(column.id, true),
+                    onClick: () => sort(column.id, "desc"),
                     children: [
                       /* @__PURE__ */ jsx17(ArrowDown, {}),
                       " ",
@@ -2463,7 +2494,7 @@ var SortMenu = ({
                       /* @__PURE__ */ jsxs9(MenubarItem, {
                         onClick: () => changeState(setStore, (state) => ({
                           ...state,
-                          sorting: state.sorting.filter(({ id }) => id !== column.id)
+                          sort: state.sort?.filter(({ id }) => id !== column.id)
                         })),
                         children: [
                           /* @__PURE__ */ jsx17(X2, {}),
@@ -2772,7 +2803,6 @@ var TableDataRow = ({
     return null;
   const selection = store.config.features.selection;
   const selectable = !!selection && (selection.isRowSelectable?.(row.data) ?? true);
-  const rowActions = store.config.features.rowActions;
   const draggable = canDragRows(store);
   return /* @__PURE__ */ jsxs9(TableRow, {
     className: cn("group/row h-16 data-[drag-source=true]:opacity-40 data-[drop-position=before]:[&>td]:border-t-2 data-[drop-position=before]:[&>td]:border-primary data-[drop-position=after]:[&>td]:border-b-2 data-[drop-position=after]:[&>td]:border-primary", store.config.onRowClicked && "cursor-pointer"),
@@ -2811,15 +2841,13 @@ var TableDataRow = ({
           children: renderCell(row, column)
         })
       }, column.id)),
-      rowActions ? /* @__PURE__ */ jsx17(TableCell, {
+      hasRowActionMenu(store) ? /* @__PURE__ */ jsx17(TableCell, {
         className: "bg-background group-data-[state=selected]/row:bg-muted sticky right-0 z-20 w-10 min-w-10 cursor-default p-0 transition-colors group-hover/row:bg-[color-mix(in_oklab,var(--muted)_50%,var(--background))]",
         onClick: (event) => event.stopPropagation(),
         children: /* @__PURE__ */ jsx17("div", {
           className: "flex h-16 items-center justify-center",
-          children: /* @__PURE__ */ jsx17(DataTableRowActions, {
-            actions: rowActions.items,
-            row: row.data,
-            title: rowActions.label ?? store.config.labels.actions
+          children: /* @__PURE__ */ jsx17(DataTableRowActionMenu, {
+            tableAtom
           })
         })
       }) : null
@@ -2873,7 +2901,7 @@ var GroupedTable = ({
   const [store, setStore] = useTableAtom(tableAtom);
   const model = deriveModel(store);
   const sections = groupDataTableRows(model.sortedRows, getActiveGrouping(store));
-  const extra = (store.config.features.selection ? 1 : 0) + (store.config.features.rowActions ? 1 : 0) + (canDragRows(store) ? 1 : 0);
+  const extra = (store.config.features.selection ? 1 : 0) + (hasRowActionMenu(store) ? 1 : 0) + (canDragRows(store) ? 1 : 0);
   const renderSections = (items) => items.flatMap((section) => {
     const collapsed = !!store.state.collapsedGroups[section.key];
     const targetKey = getGroupDropKey(section.field.id, section.groupId);
@@ -2957,12 +2985,12 @@ var ColumnHeaderMenu = ({
     return null;
   const sortingEnabled = store.config.features.sorting !== false && column.colDef.sortable !== false;
   const hidingEnabled = store.config.features.columnVisibility !== false && column.colDef.hideable !== false;
-  const sort = store.state.sorting.find(({ id }) => id === column.id);
+  const sort = store.state.sort?.find(({ id }) => id === column.id);
   const update = (next) => changeState(setStore, next);
-  const setSort = (desc) => update((state) => ({
+  const setSort = (direction) => update((state) => ({
     ...state,
-    sorting: [{ id: column.id, desc }],
-    pagination: { ...state.pagination, pageIndex: 0 }
+    sort: [{ id: column.id, direction }],
+    page: 0
   }));
   const label = columnLabel(column);
   if (!sortingEnabled && !hidingEnabled) {
@@ -2984,7 +3012,7 @@ var ColumnHeaderMenu = ({
               className: "truncate",
               children: column.colDef.headerName
             }),
-            sort ? sort.desc ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {}) : sortingEnabled ? /* @__PURE__ */ jsx17(ChevronsUpDown2, {}) : null
+            sort ? sort.direction === "desc" ? /* @__PURE__ */ jsx17(ArrowDown, {}) : /* @__PURE__ */ jsx17(ArrowUp, {}) : sortingEnabled ? /* @__PURE__ */ jsx17(ChevronsUpDown2, {}) : null
           ]
         })
       }),
@@ -2996,7 +3024,7 @@ var ColumnHeaderMenu = ({
             sortingEnabled ? /* @__PURE__ */ jsxs9(Fragment, {
               children: [
                 /* @__PURE__ */ jsxs9(DropdownMenuItem, {
-                  onClick: () => setSort(false),
+                  onClick: () => setSort("asc"),
                   children: [
                     /* @__PURE__ */ jsx17(ArrowUp, {}),
                     " ",
@@ -3004,7 +3032,7 @@ var ColumnHeaderMenu = ({
                   ]
                 }),
                 /* @__PURE__ */ jsxs9(DropdownMenuItem, {
-                  onClick: () => setSort(true),
+                  onClick: () => setSort("desc"),
                   children: [
                     /* @__PURE__ */ jsx17(ArrowDown, {}),
                     " ",
@@ -3014,7 +3042,7 @@ var ColumnHeaderMenu = ({
                 sort ? /* @__PURE__ */ jsxs9(DropdownMenuItem, {
                   onClick: () => update((state) => ({
                     ...state,
-                    sorting: state.sorting.filter(({ id }) => id !== column.id)
+                    sort: state.sort?.filter(({ id }) => id !== column.id)
                   })),
                   children: [
                     /* @__PURE__ */ jsx17(X2, {}),
@@ -3095,7 +3123,7 @@ var DataTableHeader = ({
             })
           }, column.id);
         }),
-        store.config.features.rowActions ? /* @__PURE__ */ jsx17(TableHead, {
+        hasRowActionMenu(store) ? /* @__PURE__ */ jsx17(TableHead, {
           className: "w-10"
         }) : null
       ]
@@ -3109,7 +3137,7 @@ var DataTableBody = ({
   const model = deriveModel(store);
   const grouped = getActiveGrouping(store).length > 0;
   const rows = grouped ? model.sortedRows : model.pageRows;
-  const colSpan = model.visibleColumns.length + (store.config.features.selection ? 1 : 0) + (store.config.features.rowActions ? 1 : 0) + (canDragRows(store) ? 1 : 0);
+  const colSpan = model.visibleColumns.length + (store.config.features.selection ? 1 : 0) + (hasRowActionMenu(store) ? 1 : 0) + (canDragRows(store) ? 1 : 0);
   if (grouped && rows.length && !store.config.status.error) {
     return /* @__PURE__ */ jsx17(GroupedTable, {
       tableAtom
@@ -3154,7 +3182,6 @@ var GalleryCard = ({
   const tag = find(gallery.tag);
   const selection = store.config.features.selection;
   const selectable = !!selection && (selection.isRowSelectable?.(row.data) ?? true);
-  const rowActions = store.config.features.rowActions;
   const draggable = canDragRows(store);
   return /* @__PURE__ */ jsx17(Card, {
     className: cn("relative gap-3 data-[drag-source=true]:opacity-40 data-[drop-position=before]:border-t-2 data-[drop-position=before]:border-t-primary data-[drop-position=after]:border-b-2 data-[drop-position=after]:border-b-primary", store.config.onRowClicked && "cursor-pointer"),
@@ -3199,13 +3226,11 @@ var GalleryCard = ({
           className: "text-muted-foreground line-clamp-3 text-sm",
           children: renderCell(row, description)
         }) : null,
-        rowActions ? /* @__PURE__ */ jsx17("div", {
+        hasRowActionMenu(store) ? /* @__PURE__ */ jsx17("div", {
           className: "absolute top-4 right-4",
           onClick: (event) => event.stopPropagation(),
-          children: /* @__PURE__ */ jsx17(DataTableRowActions, {
-            actions: rowActions.items,
-            row: row.data,
-            title: rowActions.label ?? store.config.labels.actions
+          children: /* @__PURE__ */ jsx17(DataTableRowActionMenu, {
+            tableAtom
           })
         }) : null
       ]
@@ -3322,29 +3347,29 @@ var DataTablePagination = ({
   const pagination = store.config.features.pagination ?? { mode: "client" };
   const clientGrouping = pagination !== false && pagination.mode === "client" && getActiveGrouping(store).length > 0;
   const paginationVisible = pagination !== false && !clientGrouping;
-  const pageIndex = store.state.pagination.pageIndex;
+  const pageIndex = store.state.page;
   const maxPageIndex = model.pageCount - 1;
   useLayoutEffect(() => {
     if (paginationVisible && pageIndex > maxPageIndex) {
       changeState(setStore, (state) => ({
         ...state,
-        pagination: { ...state.pagination, pageIndex: maxPageIndex }
+        page: maxPageIndex
       }));
     }
   }, [maxPageIndex, pageIndex, paginationVisible, setStore]);
   if (!paginationVisible)
     return null;
   const selected = model.rows.filter((row) => store.state.rowSelection[row.id]).length;
-  const setPagination = (next) => changeState(setStore, (state) => ({ ...state, pagination: next }));
+  const setPagination = (next) => changeState(setStore, (state) => ({ ...state, ...next }));
   return /* @__PURE__ */ jsx17("div", {
     className: "pt-4",
     children: /* @__PURE__ */ jsx17(Pagination, {
       messages: store.config.labels,
-      onPageChange: (pageIndex2) => setPagination({ ...store.state.pagination, pageIndex: pageIndex2 }),
-      onPageSizeChange: (pageSize) => setPagination({ pageIndex: 0, pageSize }),
-      page: Math.min(store.state.pagination.pageIndex, model.pageCount - 1),
+      onPageChange: (page) => setPagination({ page, pageSize: store.state.pageSize }),
+      onPageSizeChange: (pageSize) => setPagination({ page: 0, pageSize }),
+      page: Math.min(store.state.page, model.pageCount - 1),
       pageCount: model.pageCount,
-      pageSize: store.state.pagination.pageSize,
+      pageSize: store.state.pageSize,
       pageSizes: pagination.pageSizes,
       selectedRows: selected,
       totalRows: model.totalRows
@@ -3360,7 +3385,7 @@ var DataTable = (props) => {
       columnDefs: props.columnDefs,
       config: validatedConfig,
       state: initialPublicState(props),
-      controlledState: props.state ?? {}
+      controlledState: props.state
     };
     atomRef.current = Atom.make({
       ...initial,
@@ -3381,14 +3406,14 @@ var DataTable = (props) => {
         onRowClicked: props.onRowClicked,
         labels: dataTableMessages(props.messages)
       };
-      const state = mergeDataTableState(store.state, props.state);
+      const state = props.state ?? store.state;
       const modelChanged = store.rowData !== props.rowData || store.columnDefs !== props.columnDefs || !sameDataTableState(store.state, state) || store.config.getRowId !== config.getRowId || store.config.features.pagination !== config.features.pagination;
       const next = {
         ...store,
         rowData: props.rowData,
         columnDefs: props.columnDefs,
         config,
-        controlledState: props.state ?? {},
+        controlledState: props.state,
         state
       };
       return modelChanged ? { ...next, model: buildDataTableModel(next) } : next;
@@ -3431,7 +3456,7 @@ var DataTableContent = ({
     });
   }
   const model = deriveModel(store);
-  const width = getDataTableWidth(model.visibleColumns, (store.config.features.selection ? 1 : 0) + (store.config.features.rowActions ? 1 : 0) + (canDragRows(store) ? 1 : 0));
+  const width = getDataTableWidth(model.visibleColumns, (store.config.features.selection ? 1 : 0) + (hasRowActionMenu(store) ? 1 : 0) + (canDragRows(store) ? 1 : 0));
   return /* @__PURE__ */ jsxs9(ScrollArea, {
     className: "max-w-full min-w-0",
     children: [
@@ -3602,7 +3627,6 @@ export {
   getDataTableSelectableRows,
   getDataTableWidth,
   groupDataTableRows,
-  mergeDataTableState,
   normalizeDataTableColumns,
   paginateDataTableRows,
   reorderDataTableRows,

package/dist/lib/query.d.ts

@@ -22,15 +22,17 @@ export declare const SortParamsFromString: Schema.decodeTo<Schema.$Array<Schema.
     readonly direction: Schema.Union<readonly [Schema.Literal<"asc">, Schema.Literal<"desc">]>;
 }>>, Schema.String, never, never>;
 export declare const Query: Schema.Struct<{
-    readonly page: Schema.Int;
-    readonly pageSize: Schema.Int;
+    readonly page: Schema.withDecodingDefaultKey<Schema.Int, never>;
+    readonly pageSize: Schema.withDecodingDefaultKey<Schema.Int, never>;
     readonly globalFilter: Schema.optional<Schema.String>;
-    readonly sort: Schema.optional<Schema.decodeTo<Schema.String, Schema.decodeTo<Schema.$Array<Schema.Struct<{
+    readonly sort: Schema.optional<Schema.decodeTo<Schema.$Array<Schema.Struct<{
         readonly id: Schema.NonEmptyString;
         readonly direction: Schema.Union<readonly [Schema.Literal<"asc">, Schema.Literal<"desc">]>;
-    }>>, Schema.String, never, never>, never, never>>;
+    }>>, Schema.String, never, never>>;
 }>;
 export type QueryType = typeof Query.Type;
+export type QueryEncoded = typeof Query.Encoded;
+export declare const QueryStandard: ReturnType<typeof Schema.toStandardSchemaV1<typeof Query>>;
 export declare const PaginationMeta: Schema.Struct<{
     readonly page: Schema.Int;
     readonly pageSize: Schema.Int;

package/dist/lib/query.js

@@ -75,20 +75,11 @@ var SortParamsFromString = Schema.String.pipe(Schema.decodeTo(Schema.Array(SortP
     ]
   ]
 }));
-var SortParamSearch = SortParamsFromString.pipe(Schema.decodeTo(Schema.String, SchemaTransformation.transform({
-  decode: (sort) => Schema.encodeSync(SortParamsFromString)(sort),
-  encode: (sort) => Schema.decodeUnknownSync(SortParamsFromString)(sort)
-})), Schema.annotate({
-  identifier: "SortParamSearch",
-  title: "Sort Search Parameter",
-  description: 'Search parameter sort value normalized to the compact "-field,otherField" URL format.',
-  examples: ["-name,age"]
-}));
 var Query = Schema.Struct({
-  page: Schema.Int.check(Schema.isGreaterThanOrEqualTo(0)),
-  pageSize: Schema.Int.check(Schema.isBetween({ minimum: 1, maximum: 100 })),
+  page: Schema.Int.check(Schema.isGreaterThanOrEqualTo(0)).pipe(Schema.withDecodingDefaultKey(Effect.succeed(0))),
+  pageSize: Schema.Int.check(Schema.isBetween({ minimum: 1, maximum: 100 })).pipe(Schema.withDecodingDefaultKey(Effect.succeed(10))),
   globalFilter: Schema.optional(Schema.String),
-  sort: Schema.optional(SortParamSearch)
+  sort: Schema.optional(SortParamsFromString)
 }).annotate({
   identifier: "Query",
   title: "Query",
@@ -98,10 +89,14 @@ var Query = Schema.Struct({
       page: 0,
       pageSize: 10,
       globalFilter: "housing",
-      sort: "-publicName,createdAt"
+      sort: [
+        { id: "publicName", direction: "desc" },
+        { id: "createdAt", direction: "asc" }
+      ]
     }
   ]
 });
+var QueryStandard = Schema.toStandardSchemaV1(Query);
 var PaginationMeta = Schema.Struct({
   page: Schema.Int,
   pageSize: Schema.Int,
@@ -121,6 +116,7 @@ export {
   PaginatedResponse,
   PaginationMeta,
   Query,
+  QueryStandard,
   SortDirection,
   SortParam,
   SortParamFromString,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krak-stack/registry",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "Tree-shakable KrakStack components and Effect services.",
   "license": "MIT",
   "repository": {