@dmsi/wedgekit-react 0.0.214 → 0.0.216

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/dist/index.css

@@ -774,6 +774,9 @@
   .min-h-6 {
     min-height: calc(var(--spacing) * 6);
   }
+  .min-h-10 {
+    min-height: calc(var(--spacing) * 10);
+  }
   .min-h-19 {
     min-height: calc(var(--spacing) * 19);
   }

package/package.json

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

package/src/components/DataGrid/PinnedColumns.tsx

@@ -175,7 +175,7 @@ export function PinnedColumns<TData>({
         testid={pinnedTestId}
         {...props}
         table={table}
-        locked={true}
+        locked={!enableColumnSelector}
         pinDirection={pinDirection}
       />
     </table>

package/src/components/DataGrid/TableBody/TableBodyRow.tsx

@@ -59,6 +59,7 @@ export function TableBodyRow<T>({
     <tr
       key={row.id}
       className={clsx(
+        "min-h-10",
         "transition-colors hover:bg-background-action-secondary-hover",
         row.getIsSelected() && "!bg-background-action-secondary-hover",
         isError && "!bg-background-action-critical-secondary-hover",
@@ -81,7 +82,6 @@ export function TableBodyRow<T>({
         // fake empty column to the left for virtualization scroll padding
         <td style={{ display: "flex", width: virtualPaddingLeft }} />
       ) : null}
-
       {columns.map((column) => {
         const cell = locked
           ? (column as Cell<T, unknown>)
@@ -90,6 +90,7 @@ export function TableBodyRow<T>({
         if (!cell) {
           return;
         }
+        const cellAlignment = cell.column.columnDef.meta?.align;
         const cellValue = cell.getValue();
 
         return cell.column.columnDef.meta?.useCustomRenderer ? (
@@ -104,9 +105,20 @@ export function TableBodyRow<T>({
               testid ? `${testid}-row-${row.id}-cell-${cell.id}` : undefined
             }
             cell={cell}
-            className={clsx({
-              "justify-end": typeof cellValue === "number",
-            })}
+            className={clsx(
+              cellAlignment
+                ? {
+                    "justify-start": cellAlignment === "left",
+                    "justify-end": cellAlignment === "right",
+                  }
+                : {
+                    "justify-end": typeof cellValue === "number",
+                  },
+            )}
+            width={
+              (cell.column.columnDef.meta?.headerWidth as string | undefined) ??
+              `${cell.column.getSize()}px`
+            }
           >
             <Tooltip
               id={id ? `${id}-tooltip-${cell.id}` : undefined}
@@ -122,12 +134,10 @@ export function TableBodyRow<T>({
           </CellElement>
         );
       })}
-
       {!locked && virtualPaddingRight ? (
         // fake empty column to the right for virtualization scroll padding
         <td style={{ display: "flex", width: virtualPaddingRight }} />
       ) : null}
-
       {enableColumnSelector && !locked && (
         <td className="p-2" style={{ width: "48.8px" }}></td>
       )}

package/src/components/DataGrid/index.tsx

@@ -57,6 +57,7 @@ const NO_RESULTS_HEIGHT = "h-[185px]";
 
 export function DataGrid<T extends Record<string, unknown>>({
   id,
+  rowIdAccessor,
   testid,
   data,
   columns,
@@ -87,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!),
   );
@@ -106,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)
@@ -147,13 +158,13 @@ export function DataGrid<T extends Record<string, unknown>>({
       }
     : setLocalColumnFilters;
 
-  const rowSelection = pagination
-    ? (externalRowSelection ?? localRowSelection)
-    : localRowSelection;
+  const rowSelection = externalRowSelection ?? localRowSelection;
+
   const setRowSelection: React.Dispatch<
     React.SetStateAction<Record<string, boolean>>
-  > = pagination
-    ? (updaterOrValue) => {
+  > = useCallback(
+    (updaterOrValue) => {
+      if (pagination) {
         const value =
           typeof updaterOrValue === "function"
             ? (
@@ -163,8 +174,23 @@ export function DataGrid<T extends Record<string, unknown>>({
               )(externalRowSelection ?? {})
             : updaterOrValue;
         (onRowSelectionChange ?? setLocalRowSelection)(value);
+      } else if (externalRowSelection && onRowSelectionChange) {
+        const value =
+          typeof updaterOrValue === "function"
+            ? (
+                updaterOrValue as (
+                  prev: Record<string, boolean>,
+                ) => Record<string, boolean>
+              )(externalRowSelection ?? {})
+            : updaterOrValue;
+
+        onRowSelectionChange(value);
+      } else {
+        setLocalRowSelection(updaterOrValue);
       }
-    : setLocalRowSelection;
+    },
+    [externalRowSelection, onRowSelectionChange, pagination],
+  );
 
   const dndId = useId();
   const containerRef = React.useRef<HTMLDivElement>(null);
@@ -186,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,
@@ -203,7 +219,9 @@ export function DataGrid<T extends Record<string, unknown>>({
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     columnResizeMode: "onChange",
-    getRowId: (row, index) => String(row.id ?? index + 1),
+    getRowId: rowIdAccessor
+      ? (row) => String(row[rowIdAccessor])
+      : (row, index) => String(row.id ?? index + 1),
     state: {
       columnOrder,
       sorting: sortingState,
@@ -405,6 +423,12 @@ export function DataGrid<T extends Record<string, unknown>>({
                           .getRowModel()
                           .rows[0]?.getValue(header.column.id);
 
+                        const cellAlignment: "left" | "right" | "center" =
+                          (header.column.columnDef.meta?.align ??
+                          cellValue === "number")
+                            ? "right"
+                            : "left";
+
                         return (
                           <DraggableCellHeader
                             key={header.id}
@@ -423,13 +447,19 @@ export function DataGrid<T extends Record<string, unknown>>({
                                 ? "cursor-pointer"
                                 : "cursor-grab",
                               "group",
-                              {
-                                "justify-end": typeof cellValue === "number",
-                              },
+                              cellAlignment
+                                ? {
+                                    "justify-start": cellAlignment === "left",
+                                    "justify-end": cellAlignment === "right",
+                                  }
+                                : {
+                                    "justify-end":
+                                      typeof cellValue === "number",
+                                  },
                             )}
                             useMenuDefaultMinWidth={useMenuDefaultMinWidth}
                           >
-                            {typeof cellValue !== "number" && (
+                            {cellAlignment === "left" && (
                               <Subheader tall>
                                 {header.column.columnDef.header}
                               </Subheader>
@@ -450,7 +480,7 @@ export function DataGrid<T extends Record<string, unknown>>({
                                   {header.column.getSortIndex() + 1}
                                 </Subheader>
                               )}
-                            {typeof cellValue === "number" && (
+                            {cellAlignment === "right" && (
                               <Subheader tall>
                                 {header.column.columnDef.header}
                               </Subheader>

package/src/components/DataGrid/types.ts

@@ -27,6 +27,7 @@ export interface DataGridPagination {
 
 export interface DataGridProps<T extends Record<string, unknown>> {
   id?: string;
+  rowIdAccessor?: keyof T;
   testid?: string;
   data: T[];
   columns: ColumnDef<T>[];
@@ -83,5 +84,6 @@ declare module "@tanstack/react-table" {
       header: Header<TData, TValue>;
       table: Table<TData>;
     }) => ReactNode;
+    align?: "left" | "right";
   }
 }

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,

package/dist/{chunk-A5ROZWIH.js → chunk-R4H6D4SZ.js}

@@ -1,12 +1,12 @@
 import {
   Heading2
 } from "./chunk-REOLWEZG.js";
-import {
-  Button
-} from "./chunk-SK742QNF.js";
 import {
   Icon
 } from "./chunk-UAPWR2KE.js";
+import {
+  Button
+} from "./chunk-SK742QNF.js";
 import {
   layoutGroupGap,
   layoutPaddding

package/dist/{chunk-47KTDBGA.js → chunk-T7UCZWWK.js}

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