@dmsi/wedgekit-react 0.0.215 → 0.0.216

package/dist/components/Stepper.js

@@ -1,15 +1,15 @@
 "use client";
 import {
   InputBase
-} from "../chunk-7W4I2NK3.js";
-import "../chunk-5UH6QUFB.js";
+} from "../chunk-GW7OVMMC.js";
 import "../chunk-CJVTFYI4.js";
-import {
-  Button
-} from "../chunk-SK742QNF.js";
+import "../chunk-5UH6QUFB.js";
 import {
   Icon
 } from "../chunk-UAPWR2KE.js";
+import {
+  Button
+} from "../chunk-SK742QNF.js";
 import {
   componentGap
 } from "../chunk-RDLEIAQU.js";

package/dist/components/Time.js

@@ -1,12 +1,12 @@
 import {
   findDocumentRoot
 } from "../chunk-VXWSAIB5.js";
-import "../chunk-T3F37S6Z.js";
 import {
   InputBase
-} from "../chunk-7W4I2NK3.js";
-import "../chunk-5UH6QUFB.js";
+} from "../chunk-GW7OVMMC.js";
 import "../chunk-CJVTFYI4.js";
+import "../chunk-T3F37S6Z.js";
+import "../chunk-5UH6QUFB.js";
 import {
   Stack
 } from "../chunk-BOWQUDUU.js";

package/dist/components/Toast.js

@@ -5,12 +5,12 @@ import {
 import {
   Paragraph
 } from "../chunk-CJELWEO2.js";
-import {
-  Button
-} from "../chunk-SK742QNF.js";
 import {
   Icon
 } from "../chunk-UAPWR2KE.js";
+import {
+  Button
+} from "../chunk-SK742QNF.js";
 import {
   componentGap,
   componentPadding,

package/dist/components/Upload.js

@@ -1,12 +1,12 @@
 import {
   Paragraph
 } from "../chunk-CJELWEO2.js";
-import {
-  Button
-} from "../chunk-SK742QNF.js";
 import {
   Icon
 } from "../chunk-UAPWR2KE.js";
+import {
+  Button
+} from "../chunk-SK742QNF.js";
 import {
   componentGap
 } from "../chunk-RDLEIAQU.js";

package/dist/components/index.cjs

@@ -515,38 +515,47 @@ var import_react5 = require("react");
 function useTableLayout(initialColumns, key) {
   const [columns, setColumns] = (0, import_react5.useState)(initialColumns);
   const [isReady, setIsReady] = (0, import_react5.useState)(false);
-  const [layoutSignal, setLayoutSignal] = (0, import_react5.useState)(0);
+  const renderCountRef = (0, import_react5.useRef)(0);
+  const handleSaveLayout = (0, import_react5.useCallback)(
+    (setter, _internal) => {
+      if (!isReady && !_internal || !key) return;
+      setColumns((prevColumns) => {
+        const newColumns = typeof setter === "function" ? setter(prevColumns) : setter;
+        if (JSON.stringify(newColumns) === JSON.stringify(prevColumns) && !_internal)
+          return prevColumns;
+        localStorage.setItem(`${key}-tableLayout`, JSON.stringify(newColumns));
+        return newColumns;
+      });
+    },
+    [isReady, key]
+  );
   (0, import_react5.useEffect)(() => {
     if (!key) return setIsReady(true);
+    if (renderCountRef.current > 1) {
+      throw new Error(
+        `useTableLayout should only be called once per component render cycle.
+        ${renderCountRef.current} Renders detected.
+        Check dependency stability`
+      );
+    }
+    renderCountRef.current += 1;
     const savedLayout = localStorage.getItem(`${key}-tableLayout`);
     if (savedLayout) {
-      setColumns(
+      handleSaveLayout(
         mergeObjectArrays(
           initialColumns,
           JSON.parse(savedLayout)
-        )
+        ),
+        true
       );
     }
     if (!savedLayout) handleSaveLayout(initialColumns, true);
-    setLayoutSignal((prev) => prev + 1);
     setIsReady(true);
-  }, []);
-  const handleSaveLayout = (0, import_react5.useCallback)(
-    (setter, _internal) => {
-      if (!isReady && !_internal) return null;
-      const newColumns = typeof setter === "function" ? setter(columns) : setter;
-      if (JSON.stringify(newColumns) === JSON.stringify(columns) && !_internal)
-        return null;
-      if (key) {
-        localStorage.setItem(`${key}-tableLayout`, JSON.stringify(newColumns));
-      }
-      setColumns(newColumns);
-      setLayoutSignal((prev) => prev + 1);
-      return newColumns;
-    },
-    [columns, isReady, key]
-  );
-  return { columns, setColumns: handleSaveLayout, layoutSignal, isReady };
+    return () => {
+      renderCountRef.current = 0;
+    };
+  }, [handleSaveLayout, initialColumns, key]);
+  return { columns, setColumns: handleSaveLayout, isReady };
 }
 
 // src/components/MenuOption.tsx
@@ -2865,11 +2874,7 @@ function DataGrid({
   const [localSorting, setLocalSorting] = (0, import_react16.useState)([]);
   const [localColumnFilters, setLocalColumnFilters] = (0, import_react16.useState)([]);
   const [localRowSelection, setLocalRowSelection] = (0, import_react16.useState)({});
-  const {
-    columns: tableColumns,
-    setColumns: setTableColumns,
-    layoutSignal
-  } = useTableLayout(columns, id != null ? id : testid);
+  const { columns: tableColumns, setColumns: setTableColumns } = useTableLayout(columns, id != null ? id : testid);
   const [columnOrder, setColumnOrder] = (0, import_react16.useState)(
     tableColumns.map((c) => c.id)
   );
@@ -2881,10 +2886,23 @@ function DataGrid({
       })
     )
   );
+  const resetColumnVisibility = (0, import_react16.useCallback)(
+    (updateOrder) => {
+      setColumnVisibility(
+        Object.fromEntries(
+          tableColumns.filter((column) => !!column.id).map((column) => {
+            var _a2, _b2;
+            return [column.id, (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true];
+          })
+        )
+      );
+      if (updateOrder) setColumnOrder(tableColumns.map((c) => c.id));
+    },
+    [tableColumns]
+  );
   (0, import_react16.useEffect)(() => {
-    setColumnOrder(tableColumns.map((c) => c.id));
-    resetColumnVisibility();
-  }, [layoutSignal]);
+    resetColumnVisibility(true);
+  }, [resetColumnVisibility]);
   const sortingState = pagination ? externalSorting != null ? externalSorting : localSorting : localSorting;
   const setSortingState = pagination ? (updaterOrValue) => {
     const value = typeof updaterOrValue === "function" ? updaterOrValue(
@@ -2928,16 +2946,6 @@ function DataGrid({
     },
     [setTableColumns]
   );
-  const resetColumnVisibility = (0, import_react16.useCallback)(() => {
-    setColumnVisibility(
-      Object.fromEntries(
-        tableColumns.filter((column) => !!column.id).map((column) => {
-          var _a2, _b2;
-          return [column.id, (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true];
-        })
-      )
-    );
-  }, [tableColumns]);
   const table = (0, import_react_table3.useReactTable)({
     columns: tableColumns,
     data,
@@ -3410,17 +3418,18 @@ var Select = (_a) => {
     "displayValue",
     "value"
   ]);
+  var _a2;
   const inputRef = (0, import_react17.useRef)(null);
   const inputContainerRef = (0, import_react17.useRef)(null);
   const preventFocusOnInitialRender = (0, import_react17.useRef)(true);
   const [show, setShow] = (0, import_react17.useState)(false);
   (0, import_react17.useEffect)(() => {
-    var _a2;
+    var _a3;
     if (preventFocusOnInitialRender.current) {
       preventFocusOnInitialRender.current = false;
       return;
     }
-    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+    (_a3 = inputRef.current) == null ? void 0 : _a3.focus();
   }, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -3463,11 +3472,11 @@ var Select = (_a) => {
         removeRoundness,
         focus: show,
         onChange: (e) => {
-          var _a2;
-          return (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e);
+          var _a3;
+          return (_a3 = props.onChange) == null ? void 0 : _a3.call(props, e);
         }
       }, props), {
-        value: displayValue != null ? displayValue : value
+        value: (_a2 = displayValue != null ? displayValue : value) != null ? _a2 : props.onChange ? "" : void 0
       })
     ),
     renderMenu ? renderMenu({

package/dist/components/index.js

@@ -3,7 +3,7 @@ import {
 } from "../chunk-3WNXMCZV.js";
 import {
   Select
-} from "../chunk-33W2KSCB.js";
+} from "../chunk-OC6RTDZT.js";
 import {
   Checkbox
 } from "../chunk-E3UOI2D2.js";
@@ -12,31 +12,31 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-CZ55LUFC.js";
-import {
-  Menu
-} from "../chunk-JITZWSPR.js";
-import "../chunk-NIHZMIOL.js";
+} from "../chunk-SC24WU65.js";
 import {
   MenuOption
-} from "../chunk-ERW3AMED.js";
+} from "../chunk-QHHNFGEX.js";
+import {
+  Menu
+} from "../chunk-NA3ODQCN.js";
+import "../chunk-VP36B2MM.js";
 import {
   useInfiniteScroll,
   useTableLayout
-} from "../chunk-E6Y7ZHQX.js";
+} from "../chunk-ZU2K7BD3.js";
+import "../chunk-WVUIIBRR.js";
 import "../chunk-VXWSAIB5.js";
-import "../chunk-T3F37S6Z.js";
 import {
   Search
-} from "../chunk-2WRRRPEB.js";
+} from "../chunk-BHFIS4ZV.js";
 import {
   Input
-} from "../chunk-7W4I2NK3.js";
-import "../chunk-5UH6QUFB.js";
+} from "../chunk-GW7OVMMC.js";
 import {
   Label
 } from "../chunk-CJVTFYI4.js";
-import "../chunk-WVUIIBRR.js";
+import "../chunk-T3F37S6Z.js";
+import "../chunk-5UH6QUFB.js";
 import {
   Subheader
 } from "../chunk-KGVKHWUK.js";
@@ -50,12 +50,12 @@ import {
 import {
   Paragraph
 } from "../chunk-CJELWEO2.js";
-import {
-  Button
-} from "../chunk-SK742QNF.js";
 import {
   Icon
 } from "../chunk-UAPWR2KE.js";
+import {
+  Button
+} from "../chunk-SK742QNF.js";
 import {
   componentGap,
   componentPadding
@@ -680,11 +680,7 @@ function DataGrid({
   const [localSorting, setLocalSorting] = useState3([]);
   const [localColumnFilters, setLocalColumnFilters] = useState3([]);
   const [localRowSelection, setLocalRowSelection] = useState3({});
-  const {
-    columns: tableColumns,
-    setColumns: setTableColumns,
-    layoutSignal
-  } = useTableLayout(columns, id != null ? id : testid);
+  const { columns: tableColumns, setColumns: setTableColumns } = useTableLayout(columns, id != null ? id : testid);
   const [columnOrder, setColumnOrder] = useState3(
     tableColumns.map((c) => c.id)
   );
@@ -696,10 +692,23 @@ function DataGrid({
       })
     )
   );
+  const resetColumnVisibility = useCallback(
+    (updateOrder) => {
+      setColumnVisibility(
+        Object.fromEntries(
+          tableColumns.filter((column) => !!column.id).map((column) => {
+            var _a2, _b2;
+            return [column.id, (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true];
+          })
+        )
+      );
+      if (updateOrder) setColumnOrder(tableColumns.map((c) => c.id));
+    },
+    [tableColumns]
+  );
   useEffect(() => {
-    setColumnOrder(tableColumns.map((c) => c.id));
-    resetColumnVisibility();
-  }, [layoutSignal]);
+    resetColumnVisibility(true);
+  }, [resetColumnVisibility]);
   const sortingState = pagination ? externalSorting != null ? externalSorting : localSorting : localSorting;
   const setSortingState = pagination ? (updaterOrValue) => {
     const value = typeof updaterOrValue === "function" ? updaterOrValue(
@@ -743,16 +752,6 @@ function DataGrid({
     },
     [setTableColumns]
   );
-  const resetColumnVisibility = useCallback(() => {
-    setColumnVisibility(
-      Object.fromEntries(
-        tableColumns.filter((column) => !!column.id).map((column) => {
-          var _a2, _b2;
-          return [column.id, (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true];
-        })
-      )
-    );
-  }, [tableColumns]);
   const table = useReactTable({
     columns: tableColumns,
     data,

package/dist/components/useMenuSystem.js

@@ -2,8 +2,8 @@
 import {
   useMenuPosition,
   useSubMenuSystem
-} from "../chunk-NIHZMIOL.js";
-import "../chunk-E6Y7ZHQX.js";
+} from "../chunk-VP36B2MM.js";
+import "../chunk-ZU2K7BD3.js";
 import "../chunk-VXWSAIB5.js";
 import "../chunk-T3F37S6Z.js";
 import "../chunk-5UH6QUFB.js";

package/dist/hooks/index.cjs

@@ -129,38 +129,47 @@ var import_react4 = require("react");
 function useTableLayout(initialColumns, key) {
   const [columns, setColumns] = (0, import_react4.useState)(initialColumns);
   const [isReady, setIsReady] = (0, import_react4.useState)(false);
-  const [layoutSignal, setLayoutSignal] = (0, import_react4.useState)(0);
+  const renderCountRef = (0, import_react4.useRef)(0);
+  const handleSaveLayout = (0, import_react4.useCallback)(
+    (setter, _internal) => {
+      if (!isReady && !_internal || !key) return;
+      setColumns((prevColumns) => {
+        const newColumns = typeof setter === "function" ? setter(prevColumns) : setter;
+        if (JSON.stringify(newColumns) === JSON.stringify(prevColumns) && !_internal)
+          return prevColumns;
+        localStorage.setItem(`${key}-tableLayout`, JSON.stringify(newColumns));
+        return newColumns;
+      });
+    },
+    [isReady, key]
+  );
   (0, import_react4.useEffect)(() => {
     if (!key) return setIsReady(true);
+    if (renderCountRef.current > 1) {
+      throw new Error(
+        `useTableLayout should only be called once per component render cycle.
+        ${renderCountRef.current} Renders detected.
+        Check dependency stability`
+      );
+    }
+    renderCountRef.current += 1;
     const savedLayout = localStorage.getItem(`${key}-tableLayout`);
     if (savedLayout) {
-      setColumns(
+      handleSaveLayout(
         mergeObjectArrays(
           initialColumns,
           JSON.parse(savedLayout)
-        )
+        ),
+        true
       );
     }
     if (!savedLayout) handleSaveLayout(initialColumns, true);
-    setLayoutSignal((prev) => prev + 1);
     setIsReady(true);
-  }, []);
-  const handleSaveLayout = (0, import_react4.useCallback)(
-    (setter, _internal) => {
-      if (!isReady && !_internal) return null;
-      const newColumns = typeof setter === "function" ? setter(columns) : setter;
-      if (JSON.stringify(newColumns) === JSON.stringify(columns) && !_internal)
-        return null;
-      if (key) {
-        localStorage.setItem(`${key}-tableLayout`, JSON.stringify(newColumns));
-      }
-      setColumns(newColumns);
-      setLayoutSignal((prev) => prev + 1);
-      return newColumns;
-    },
-    [columns, isReady, key]
-  );
-  return { columns, setColumns: handleSaveLayout, layoutSignal, isReady };
+    return () => {
+      renderCountRef.current = 0;
+    };
+  }, [handleSaveLayout, initialColumns, key]);
+  return { columns, setColumns: handleSaveLayout, isReady };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/hooks/index.js

@@ -4,7 +4,7 @@ import {
   useMatchesMedia,
   useMatchesMobile,
   useTableLayout
-} from "../chunk-E6Y7ZHQX.js";
+} from "../chunk-ZU2K7BD3.js";
 import "../chunk-VXWSAIB5.js";
 import "../chunk-T3F37S6Z.js";
 import "../chunk-5UH6QUFB.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.215",
+  "version": "0.0.216",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/DataGrid/index.tsx

@@ -88,11 +88,8 @@ export function DataGrid<T extends Record<string, unknown>>({
   const [localRowSelection, setLocalRowSelection] = useState<
     Record<string, boolean>
   >({});
-  const {
-    columns: tableColumns,
-    setColumns: setTableColumns,
-    layoutSignal,
-  } = useTableLayout<T>(columns, id ?? testid);
+  const { columns: tableColumns, setColumns: setTableColumns } =
+    useTableLayout<T>(columns, id ?? testid);
   const [columnOrder, setColumnOrder] = useState<string[]>(
     tableColumns.map((c) => c.id!),
   );
@@ -107,10 +104,23 @@ export function DataGrid<T extends Record<string, unknown>>({
     ),
   );
 
+  const resetColumnVisibility = useCallback(
+    (updateOrder?: boolean) => {
+      setColumnVisibility(
+        Object.fromEntries(
+          tableColumns
+            .filter((column) => !!column.id)
+            .map((column) => [column.id, column.meta?.visible ?? true]),
+        ),
+      );
+      if (updateOrder) setColumnOrder(tableColumns.map((c) => c.id!));
+    },
+    [tableColumns],
+  );
+
   useEffect(() => {
-    setColumnOrder(tableColumns.map((c) => c.id!));
-    resetColumnVisibility();
-  }, [layoutSignal]);
+    resetColumnVisibility(true);
+  }, [resetColumnVisibility]);
 
   const sortingState = pagination
     ? (externalSorting ?? localSorting)
@@ -202,16 +212,6 @@ export function DataGrid<T extends Record<string, unknown>>({
     [setTableColumns],
   );
 
-  const resetColumnVisibility = useCallback(() => {
-    setColumnVisibility(
-      Object.fromEntries(
-        tableColumns
-          .filter((column) => !!column.id)
-          .map((column) => [column.id, column.meta?.visible ?? true]),
-      ),
-    );
-  }, [tableColumns]);
-
   const table = useReactTable<T>({
     columns: tableColumns,
     data,

package/src/components/Select.tsx

@@ -95,7 +95,7 @@ export const Select = ({
         focus={show}
         onChange={(e) => props.onChange?.(e)}
         {...props}
-        value={displayValue ?? value}
+        value={displayValue ?? value ?? (props.onChange ? "" : undefined)}
       />
 
       {renderMenu

package/src/hooks/useTableLayout.ts

@@ -2,11 +2,16 @@
 
 import { mergeObjectArrays } from "../utils";
 import { ColumnDef } from "@dmsi/wedgekit-react/components";
-import { useState, useEffect, SetStateAction, useCallback } from "react";
+import {
+  useState,
+  useEffect,
+  SetStateAction,
+  useCallback,
+  useRef,
+} from "react";
 export type PersistedTableLayout<T> = {
   columns: ColumnDef<T>[];
-  setColumns: (setter: SetStateAction<ColumnDef<T>[]>) => ColumnDef<T>[] | null;
-  layoutSignal: number;
+  setColumns: (setter: SetStateAction<ColumnDef<T>[]>) => void;
   isReady: boolean;
 };
 
@@ -22,47 +27,58 @@ export function useTableLayout<T>(
   initialColumns: Array<ColumnDef<T>>,
   key?: string,
 ): PersistedTableLayout<T> {
+  // Use useMemo to ensure initialColumns is stable
   const [columns, setColumns] = useState<ColumnDef<T>[]>(initialColumns);
   const [isReady, setIsReady] = useState(false);
-  const [layoutSignal, setLayoutSignal] = useState(0);
+  const renderCountRef = useRef(0);
+
+  const handleSaveLayout = useCallback(
+    (setter: React.SetStateAction<ColumnDef<T>[]>, _internal?: boolean) => {
+      if ((!isReady && !_internal) || !key) return;
+      // get value from passed setter
+      setColumns((prevColumns) => {
+        const newColumns =
+          typeof setter === "function" ? setter(prevColumns) : setter;
+        if (
+          JSON.stringify(newColumns) === JSON.stringify(prevColumns) &&
+          !_internal
+        )
+          return prevColumns;
+        localStorage.setItem(`${key}-tableLayout`, JSON.stringify(newColumns));
+        return newColumns;
+      });
+    },
+    [isReady, key],
+  );
 
   useEffect(() => {
     if (!key) return setIsReady(true);
+    if (renderCountRef.current > 1) {
+      throw new Error(
+        `useTableLayout should only be called once per component render cycle.
+        ${renderCountRef.current} Renders detected.
+        Check dependency stability`,
+      );
+    }
+    renderCountRef.current += 1;
     const savedLayout = localStorage.getItem(`${key}-tableLayout`);
     if (savedLayout) {
-      setColumns(
+      handleSaveLayout(
         mergeObjectArrays<ColumnDef<T>>(
           initialColumns,
           JSON.parse(savedLayout),
         ),
+        true,
       );
     }
     if (!savedLayout) handleSaveLayout(initialColumns, true);
-    setLayoutSignal((prev) => prev + 1);
     setIsReady(true);
 
+    return () => {
+      renderCountRef.current = 0;
+    };
     // Load the layout from local storage on init
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const handleSaveLayout = useCallback(
-    (setter: React.SetStateAction<ColumnDef<T>[]>, _internal?: boolean) => {
-      if (!isReady && !_internal) return null;
-      // get value from passed setter
-      const newColumns =
-        typeof setter === "function" ? setter(columns) : setter;
-      if (JSON.stringify(newColumns) === JSON.stringify(columns) && !_internal)
-        return null;
-      if (key) {
-        localStorage.setItem(`${key}-tableLayout`, JSON.stringify(newColumns));
-      }
-      setColumns(newColumns);
-      setLayoutSignal((prev) => prev + 1);
-
-      return newColumns;
-    },
-    [columns, isReady, key],
-  );
+  }, [handleSaveLayout, initialColumns, key]);
 
-  return { columns, setColumns: handleSaveLayout, layoutSignal, isReady };
+  return { columns, setColumns: handleSaveLayout, isReady };
 }

package/dist/{chunk-ED7FXZRX.js → chunk-BW2MWMVM.js}

@@ -1,12 +1,12 @@
 import {
   Label
 } from "./chunk-CJVTFYI4.js";
-import {
-  Button
-} from "./chunk-SK742QNF.js";
 import {
   Icon
 } from "./chunk-UAPWR2KE.js";
+import {
+  Button
+} from "./chunk-SK742QNF.js";
 import {
   baseTransition,
   componentGap,

package/dist/{chunk-7W4I2NK3.js → chunk-GW7OVMMC.js}

@@ -1,11 +1,11 @@
+import {
+  Label
+} from "./chunk-CJVTFYI4.js";
 import {
   formatCurrencyDisplay,
   formatDecimalValue,
   getDecimalPlaceholder
 } from "./chunk-5UH6QUFB.js";
-import {
-  Label
-} from "./chunk-CJVTFYI4.js";
 import {
   Icon
 } from "./chunk-UAPWR2KE.js";

package/dist/{chunk-FYW64H7N.js → chunk-JFPRYMID.js}

@@ -1,9 +1,9 @@
-import {
-  Button
-} from "./chunk-SK742QNF.js";
 import {
   Icon
 } from "./chunk-UAPWR2KE.js";
+import {
+  Button
+} from "./chunk-SK742QNF.js";
 import {
   __objRest,
   __spreadProps,