@krak-stack/registry 0.1.22 → 0.1.24

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

@@ -3,15 +3,7 @@ import { type PaginationMessages } from "./pagination.js";
 import type { QueryType } from "../../lib/query.js";
 type RowData = object;
 export type DataTableView = "table" | "gallery";
-export interface DataTableUiState {
-    columnVisibility: Record<string, boolean>;
-    columnSizing: Record<string, number>;
-    rowSelection: Record<string, boolean>;
-    grouping: readonly string[];
-    collapsedGroups: Record<string, boolean>;
-    view: DataTableView;
-}
-export type DataTablePublicState = QueryType & DataTableUiState;
+export type DataTablePublicState = QueryType;
 export interface DataTableValueGetterParams<TData extends RowData> {
     data: TData;
     rowId: string;

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

@@ -1,7 +1,8 @@
 // ../../src/components/ui/data-table.tsx
 import { useAtom, useAtomSet } from "@effect/atom-react";
+import { BrowserKeyValueStore } from "@effect/platform-browser";
 import { Schema } from "effect";
-import { Atom } from "effect/unstable/reactivity";
+import { AsyncResult, Atom } from "effect/unstable/reactivity";
 import {
   ArrowDown,
   ArrowUp,
@@ -24,8 +25,10 @@ import {
 import {
   createContext,
   isValidElement,
+  useCallback as useCallback2,
   useContext,
   useLayoutEffect,
+  useMemo,
   useRef as useRef2,
   useState
 } from "react";
@@ -1806,6 +1809,12 @@ function VirtualizedCombobox(props) {
 
 // ../../src/components/ui/data-table.tsx
 import { jsx as jsx17, jsxs as jsxs9, Fragment } from "react/jsx-runtime";
+var DataTablePersistedUiStateSchema = Schema.Struct({
+  columnVisibility: Schema.Record(Schema.String, Schema.Boolean),
+  columnSizing: Schema.Record(Schema.String, Schema.Number),
+  view: Schema.Literals(["table", "gallery"])
+}).annotate({ identifier: "DataTablePersistedUiState" });
+var dataTableStorageRuntime = Atom.runtime(BrowserKeyValueStore.layerLocalStorage);
 var messages3 = {
   en: {
     ...paginationMessages("en"),
@@ -1873,9 +1882,11 @@ var dataTableMessages = (overrides) => ({
 var DEFAULT_MIN_WIDTH = 96;
 var DEFAULT_WIDTH = 208;
 var DEFAULT_MAX_WIDTH = 640;
-var DEFAULT_STATE = {
+var DEFAULT_QUERY = {
   page: 0,
-  pageSize: 10,
+  pageSize: 10
+};
+var DEFAULT_UI_STATE = {
   columnVisibility: {},
   columnSizing: {},
   rowSelection: {},
@@ -1883,6 +1894,16 @@ var DEFAULT_STATE = {
   collapsedGroups: {},
   view: "table"
 };
+var persistedUiFromState = (state) => ({
+  columnVisibility: state.columnVisibility,
+  columnSizing: state.columnSizing,
+  view: state.view
+});
+var transientUiFromState = (state) => ({
+  rowSelection: state.rowSelection,
+  grouping: state.grouping,
+  collapsedGroups: state.collapsedGroups
+});
 var clampWidth = (column, width) => Math.min(column.maxWidth ?? DEFAULT_MAX_WIDTH, Math.max(column.minWidth ?? DEFAULT_MIN_WIDTH, width));
 var normalizeDataTableColumns = (columnDefs, columnSizing = {}) => {
   const ids = new Set;
@@ -1998,7 +2019,7 @@ var clearDragPresentation = (root) => {
     element.removeAttribute("data-drop-position");
   });
 };
-var resolveConfig = (props) => {
+var resolveConfig = (props, onUiStateChange) => {
   const features = props.features ?? {};
   const selection = features.selection;
   const getRowId = selection && selection.getRowId || props.getRowId || undefined;
@@ -2008,21 +2029,35 @@ var resolveConfig = (props) => {
   return {
     getRowId,
     onStateChange: props.onStateChange,
+    onUiStateChange,
     status: props.status ?? {},
     features,
     onRowClicked: props.onRowClicked,
     labels: dataTableMessages(props.messages)
   };
 };
-var initialPublicState = (props) => {
-  const grouping = props.features?.grouping;
-  const groupingInitial = grouping && grouping.initial ? grouping.initial : [];
-  return props.state ?? {
-    ...DEFAULT_STATE,
-    grouping: groupingInitial,
-    ...props.initialState
-  };
-};
+var queryFromState = (state) => ({
+  page: state.page,
+  pageSize: state.pageSize,
+  globalFilter: state.globalFilter,
+  sort: state.sort
+});
+var uiFromState = (state) => ({
+  columnVisibility: state.columnVisibility,
+  columnSizing: state.columnSizing,
+  rowSelection: state.rowSelection,
+  grouping: state.grouping,
+  collapsedGroups: state.collapsedGroups,
+  view: state.view
+});
+var sameUiState = (left, right) => 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 sameQueryState = (left, right) => left.page === right.page && left.pageSize === right.pageSize && left.globalFilter === right.globalFilter && left.sort === right.sort;
+var initialPublicState = (props, uiState) => ({
+  ...DEFAULT_QUERY,
+  ...props.initialState,
+  ...props.state,
+  ...uiState
+});
 var buildDataTableModel = (store) => {
   const columns = normalizeDataTableColumns(store.columnDefs, store.state.columnSizing);
   const selection = store.config.features.selection;
@@ -2049,8 +2084,15 @@ var useTableAtom = (tableAtom) => useAtom(tableAtom);
 var changeState = (setStore, update) => {
   setStore((store) => {
     const proposed = update(store.state);
-    store.config.onStateChange?.(proposed);
-    const state = store.controlledState ?? proposed;
+    const query = queryFromState(proposed);
+    if (!sameQueryState(query, store.state)) {
+      store.config.onStateChange?.(query);
+    }
+    const uiState = uiFromState(proposed);
+    if (!sameUiState(uiState, store.state)) {
+      store.config.onUiStateChange(uiState);
+    }
+    const state = store.controlledState ? { ...proposed, ...store.controlledState } : proposed;
     if (sameDataTableState(state, store.state))
       return store;
     const next = { ...store, state };
@@ -2289,7 +2331,7 @@ var DataTableToolbar = ({
         ]
       }) : null,
       /* @__PURE__ */ jsx17("div", {
-        className: "-m-1 flex w-full overflow-x-auto p-1",
+        className: "-m-1 flex overflow-x-auto p-1",
         children: /* @__PURE__ */ jsxs9(Menubar, {
           className: "h-auto w-max min-w-full justify-start bg-transparent shadow-none [&_[data-slot=menubar-trigger]]:gap-2 [&_[data-slot=menubar-trigger]_svg]:size-4",
           children: [
@@ -2905,12 +2947,20 @@ var GroupedTable = ({
   const renderSections = (items) => items.flatMap((section) => {
     const collapsed = !!store.state.collapsedGroups[section.key];
     const targetKey = getGroupDropKey(section.field.id, section.groupId);
+    const toggleCollapsed = () => changeState(setStore, (state) => ({
+      ...state,
+      collapsedGroups: {
+        ...state.collapsedGroups,
+        [section.key]: !collapsed
+      }
+    }));
     const body = /* @__PURE__ */ jsxs9(TableBody, {
       className: "data-[drop-target=true]:outline-primary relative data-[drop-target=true]:z-30 data-[drop-target=true]:outline-2 data-[drop-target=true]:-outline-offset-2 data-[drop-target=true]:[&>tr]:border-transparent data-[drop-target=true]:[&>tr>td:last-child]:z-0",
       "data-table-group": section.field.onMoveToGroup ? targetKey : undefined,
       children: [
         /* @__PURE__ */ jsx17(TableRow, {
-          className: "bg-muted/40",
+          className: "bg-muted/40 hover:bg-accent! cursor-pointer",
+          onClick: toggleCollapsed,
           children: /* @__PURE__ */ jsx17(TableCell, {
             colSpan: model.visibleColumns.length + extra,
             children: /* @__PURE__ */ jsxs9("div", {
@@ -2919,14 +2969,7 @@ var GroupedTable = ({
               children: [
                 /* @__PURE__ */ jsxs9("button", {
                   "aria-expanded": !collapsed,
-                  className: "flex flex-1 items-center gap-2 text-left",
-                  onClick: () => changeState(setStore, (state) => ({
-                    ...state,
-                    collapsedGroups: {
-                      ...state.collapsedGroups,
-                      [section.key]: !collapsed
-                    }
-                  })),
+                  className: "flex flex-1 cursor-pointer items-center gap-2 text-left font-medium",
                   type: "button",
                   children: [
                     collapsed ? /* @__PURE__ */ jsx17(ChevronRight2, {
@@ -3278,23 +3321,24 @@ var DataTableGallery = ({
   const renderSections = (sections) => sections.map((section) => {
     const collapsed = !!store.state.collapsedGroups[section.key];
     const targetKey = getGroupDropKey(section.field.id, section.groupId);
+    const toggleCollapsed = () => changeState(setStore, (state) => ({
+      ...state,
+      collapsedGroups: {
+        ...state.collapsedGroups,
+        [section.key]: !collapsed
+      }
+    }));
     return /* @__PURE__ */ jsxs9("section", {
       className: "data-[drop-target=true]:ring-primary space-y-3 rounded-lg transition-shadow data-[drop-target=true]:ring-2",
       "data-table-group": section.field.onMoveToGroup ? targetKey : undefined,
       children: [
         /* @__PURE__ */ jsxs9("div", {
-          className: "flex items-center gap-2 rounded-lg border p-3",
+          className: "hover:bg-accent flex cursor-pointer items-center gap-2 rounded-lg border p-3 transition-colors",
+          onClick: toggleCollapsed,
           children: [
             /* @__PURE__ */ jsxs9("button", {
               "aria-expanded": !collapsed,
-              className: "flex flex-1 items-center gap-2 text-left",
-              onClick: () => changeState(setStore, (state) => ({
-                ...state,
-                collapsedGroups: {
-                  ...state.collapsedGroups,
-                  [section.key]: !collapsed
-                }
-              })),
+              className: "flex flex-1 cursor-pointer items-center gap-2 text-left font-medium",
               type: "button",
               children: [
                 collapsed ? /* @__PURE__ */ jsx17(ChevronRight2, {
@@ -3376,15 +3420,33 @@ var DataTablePagination = ({
     })
   });
 };
-var DataTable = (props) => {
-  const validatedConfig = resolveConfig(props);
+var HydratedDataTable = ({
+  persistedUiState,
+  setPersistedUiState,
+  ...props
+}) => {
+  const transientUiAtomRef = useRef2(null);
+  if (!transientUiAtomRef.current) {
+    const grouping = props.features?.grouping;
+    transientUiAtomRef.current = Atom.make({
+      ...transientUiFromState(DEFAULT_UI_STATE),
+      grouping: grouping && grouping.initial ? grouping.initial : []
+    });
+  }
+  const [transientUiState, setTransientUiState] = useAtom(transientUiAtomRef.current);
+  const uiState = useMemo(() => ({ ...persistedUiState, ...transientUiState }), [persistedUiState, transientUiState]);
+  const setUiState = useCallback2((state) => {
+    setPersistedUiState(persistedUiFromState(state));
+    setTransientUiState(transientUiFromState(state));
+  }, [setPersistedUiState, setTransientUiState]);
+  const validatedConfig = resolveConfig(props, (state) => setUiState(state));
   const atomRef = useRef2(null);
   if (!atomRef.current) {
     const initial = {
       rowData: props.rowData,
       columnDefs: props.columnDefs,
       config: validatedConfig,
-      state: initialPublicState(props),
+      state: initialPublicState(props, uiState),
       controlledState: props.state
     };
     atomRef.current = Atom.make({
@@ -3401,12 +3463,13 @@ var DataTable = (props) => {
       const config = {
         getRowId: selection && selection.getRowId || props.getRowId || undefined,
         onStateChange: props.onStateChange,
+        onUiStateChange: (state2) => setUiState(state2),
         status: props.status ?? {},
         features,
         onRowClicked: props.onRowClicked,
         labels: dataTableMessages(props.messages)
       };
-      const state = props.state ?? store.state;
+      const state = { ...store.state, ...uiState, ...props.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,
@@ -3428,7 +3491,9 @@ var DataTable = (props) => {
     props.rowData,
     props.state,
     props.status,
-    setStore
+    setStore,
+    setUiState,
+    uiState
   ]);
   return /* @__PURE__ */ jsxs9("div", {
     className: "w-full max-w-full min-w-0 rounded-md",
@@ -3446,6 +3511,34 @@ var DataTable = (props) => {
     ]
   });
 };
+var DataTable = (props) => {
+  const persistedUiAtomRef = useRef2(null);
+  if (!persistedUiAtomRef.current) {
+    const pathname = globalThis.window?.location.pathname ?? "/";
+    const columnIds = normalizeDataTableColumns(props.columnDefs).map(({ id }) => id).join(",");
+    const viewCapability = props.features?.gallery ? "gallery" : "table";
+    persistedUiAtomRef.current = Atom.kvs({
+      mode: "async",
+      runtime: dataTableStorageRuntime,
+      key: `data-table:${pathname}:${columnIds}:${viewCapability}:ui`,
+      schema: DataTablePersistedUiStateSchema,
+      defaultValue: () => persistedUiFromState(DEFAULT_UI_STATE)
+    });
+  }
+  const [persistedUiResult, setPersistedUiState] = useAtom(persistedUiAtomRef.current);
+  if (!AsyncResult.isSuccess(persistedUiResult) || AsyncResult.isWaiting(persistedUiResult)) {
+    return /* @__PURE__ */ jsx17("div", {
+      "aria-busy": "true",
+      className: "invisible w-full max-w-full min-w-0 rounded-md",
+      "data-table-root": ""
+    });
+  }
+  return /* @__PURE__ */ jsx17(HydratedDataTable, {
+    ...props,
+    persistedUiState: persistedUiResult.value,
+    setPersistedUiState
+  });
+};
 var DataTableContent = ({
   tableAtom
 }) => {