@dmsi/wedgekit-react 0.0.5 → 0.0.6

package/dist/components/DataGrid.js

@@ -10,28 +10,28 @@ import {
 } from "../chunk-5GOBP2JS.js";
 import {
   Select
-} from "../chunk-UEN5BURK.js";
+} from "../chunk-TRUPPHBQ.js";
 import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-YD462QK7.js";
-import {
-  Search
-} from "../chunk-TBHTISFW.js";
+} from "../chunk-TAW5ZZ4Z.js";
 import {
   Menu
-} from "../chunk-CABAANHQ.js";
+} from "../chunk-L4UM372R.js";
 import "../chunk-Z4UCFUF7.js";
 import {
   MenuOption
 } from "../chunk-E5ALT5W7.js";
 import "../chunk-SEKKGFM6.js";
+import {
+  Search
+} from "../chunk-GTCSRHPF.js";
 import "../chunk-WVUIIBRR.js";
 import "../chunk-4T7F5BZZ.js";
 import {
   Input
-} from "../chunk-UGXT677T.js";
+} from "../chunk-BWRHL2AG.js";
 import {
   Label
 } from "../chunk-4C66DLIJ.js";
@@ -40,7 +40,7 @@ import {
 } from "../chunk-KENSVWOY.js";
 import {
   Checkbox
-} from "../chunk-VFWFORJJ.js";
+} from "../chunk-DKKYR6DS.js";
 import {
   Paragraph
 } from "../chunk-K3IKUSZW.js";
@@ -57,7 +57,7 @@ import {
 } from "../chunk-ORMEWXMH.js";
 
 // src/components/DataGrid.tsx
-import React, { useId, useState } from "react";
+import React, { useCallback, useId, useRef, useState } from "react";
 import {
   flexRender,
   getCoreRowModel,
@@ -112,7 +112,8 @@ function DataGrid({
   filteredSortedData,
   totalRowCount,
   hideStatusBar,
-  centerHeader
+  centerHeader,
+  enableColumnSelector
 }) {
   var _a, _b, _c, _d, _e;
   const [columnOrder, setColumnOrder] = useState(
@@ -140,6 +141,34 @@ function DataGrid({
   } : setLocalRowSelection;
   const id = useId();
   const containerRef = React.useRef(null);
+  const [columnVisibility, setColumnVisibility] = useState(() => {
+    const initialVisibility = {};
+    columns.forEach((column) => {
+      var _a2, _b2;
+      if (column.id) {
+        initialVisibility[column.id] = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
+      }
+    });
+    return initialVisibility;
+  });
+  const toggleColumnVisibility = useCallback(
+    (id2, isVisible) => {
+      setColumnVisibility((prev) => __spreadProps(__spreadValues({}, prev), { [id2]: isVisible }));
+    },
+    [setColumnVisibility]
+  );
+  const resetColumnVisibility = useCallback(() => {
+    setColumnVisibility(() => {
+      const initialVisibility = {};
+      columns.forEach((column) => {
+        var _a2, _b2;
+        if (column.id) {
+          initialVisibility[column.id] = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
+        }
+      });
+      return initialVisibility;
+    });
+  }, [columns]);
   const table = useReactTable({
     columns,
     data,
@@ -155,7 +184,8 @@ function DataGrid({
       columnOrder,
       sorting: sortingState,
       columnFilters: columnFilterState,
-      rowSelection
+      rowSelection,
+      columnVisibility
     },
     onColumnOrderChange: setColumnOrder,
     onSortingChange: adaptTableStateSetter(setSortingState),
@@ -248,11 +278,11 @@ function DataGrid({
         {
           items: columnOrder,
           strategy: horizontalListSortingStrategy,
-          children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 max-h-screen m-4 rounded border border-border-primary-normal overflow-hidden text-text-primary-normal", children: [
+          children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 h-full w-full rounded border border-border-primary-normal overflow-hidden text-text-primary-normal", children: [
             /* @__PURE__ */ jsx(
               "div",
               {
-                className: "overflow-auto scrollbar-thin max-h-full relative contain-paint will-change-transform",
+                className: "overflow-auto scrollbar-thin h-full relative contain-paint will-change-transform",
                 ref: containerRef,
                 children: /* @__PURE__ */ jsxs("table", { className: "min-w-full grid", children: [
                   /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10 grid", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs("tr", { className: "flex w-full", children: [
@@ -340,7 +370,15 @@ function DataGrid({
                           style: { display: "flex", width: virtualPaddingRight }
                         }
                       )
-                    ) : null
+                    ) : null,
+                    enableColumnSelector && /* @__PURE__ */ jsx(
+                      ColumnSelectorHeaderCell,
+                      {
+                        table,
+                        toggleColumnVisibility,
+                        resetColumnVisibility
+                      }
+                    )
                   ] }, headerGroup.id)) }),
                   /* @__PURE__ */ jsx(
                     TableBody,
@@ -353,7 +391,8 @@ function DataGrid({
                       pagination,
                       isLoadingMore,
                       hasMore,
-                      showFilterRow
+                      showFilterRow,
+                      enableColumnSelector
                     }
                   )
                 ] })
@@ -455,7 +494,8 @@ function TableBody({
   pagination,
   isLoadingMore,
   hasMore,
-  showFilterRow
+  showFilterRow,
+  enableColumnSelector = false
 }) {
   const { rows } = table.getRowModel();
   const rowVirtualizer = useVirtualizer({
@@ -528,7 +568,8 @@ function TableBody({
               virtualPaddingLeft,
               virtualPaddingRight,
               virtualRow,
-              showFilterRow
+              showFilterRow,
+              enableColumnSelector
             },
             row.id
           );
@@ -557,7 +598,8 @@ function TableBodyRow({
   virtualPaddingLeft,
   virtualPaddingRight,
   virtualRow,
-  showFilterRow
+  showFilterRow,
+  enableColumnSelector = false
 }) {
   const visibleCells = row.getVisibleCells();
   const virtualColumns = columnVirtualizer.getVirtualItems();
@@ -598,7 +640,8 @@ function TableBodyRow({
         virtualPaddingRight ? (
           // fake empty column to the right for virtualization scroll padding
           /* @__PURE__ */ jsx("td", { style: { display: "flex", width: virtualPaddingRight } })
-        ) : null
+        ) : null,
+        enableColumnSelector && /* @__PURE__ */ jsx("td", {})
       ]
     },
     row.id
@@ -623,6 +666,82 @@ var LoadingCell = ({
   }
   return /* @__PURE__ */ jsx(DataGridCell, { children: /* @__PURE__ */ jsx("div", { className: "bg-linear-270 to-neutral-300/[24%] from-neutral-300/[12%] rounded-xs w-full max-w-25 h-6" }) }, key);
 };
+function ColumnSelectorHeaderCell({
+  table,
+  toggleColumnVisibility,
+  resetColumnVisibility
+}) {
+  const ref = useRef(null);
+  const [show, setShow] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    DataGridCell,
+    {
+      width: "48",
+      type: "header",
+      color: "text-secondary-normal",
+      ref,
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: () => setShow((prev) => !prev),
+            variant: "navigation",
+            iconOnly: true,
+            leftIcon: /* @__PURE__ */ jsx(Icon, { name: "tune" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Menu,
+          {
+            positionTo: ref,
+            position: "bottom-right",
+            show,
+            setShow,
+            children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "tertiary",
+                  onClick: () => {
+                    resetColumnVisibility();
+                    setShow(false);
+                  },
+                  children: "Reset to default"
+                }
+              ),
+              table.getAllColumns().map((column) => /* @__PURE__ */ jsx(
+                ColumnSelectorMenuOption,
+                {
+                  column,
+                  toggleColumnVisibility
+                },
+                column.id
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function ColumnSelectorMenuOption({
+  column,
+  toggleColumnVisibility
+}) {
+  const [isVisible, setIsVisible] = useState(column.getIsVisible());
+  const label = typeof column.columnDef.header === "string" ? column.columnDef.header : null;
+  return /* @__PURE__ */ jsx(MenuOption, { selected: isVisible, defaultChecked: isVisible, children: /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      label: label != null ? label : "Unknown",
+      checked: isVisible,
+      onChange: (e) => {
+        setIsVisible(e.target.checked);
+        toggleColumnVisibility(column.id, e.target.checked);
+      }
+    }
+  ) });
+}
 function getSortIcon(sort, nextSort = false) {
   const iconClassName = clsx(
     "text-icon-on-action-primary-normal",

package/dist/components/DataGridCell.cjs

@@ -543,7 +543,9 @@ var Input = (_a) => {
   }, [propValue, decimals, variant]);
   const getInputProps = () => {
     var _a2;
-    const baseProps = __spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals));
+    const baseProps = __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
+      value: propValue
+    });
     switch (variant) {
       case "search":
         return __spreadProps(__spreadValues({}, baseProps), {
@@ -597,7 +599,7 @@ var Input = (_a) => {
       case "finder":
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "search" });
       case "uom":
-        return uom ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom }) : null;
+        return uom ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : null;
       case "percentage":
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "percent" }) });
       default:

package/dist/components/DataGridCell.js

@@ -3,15 +3,15 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-YD462QK7.js";
-import "../chunk-TBHTISFW.js";
-import "../chunk-CABAANHQ.js";
+} from "../chunk-TAW5ZZ4Z.js";
+import "../chunk-L4UM372R.js";
 import "../chunk-Z4UCFUF7.js";
 import "../chunk-E5ALT5W7.js";
 import "../chunk-SEKKGFM6.js";
+import "../chunk-GTCSRHPF.js";
 import "../chunk-WVUIIBRR.js";
 import "../chunk-4T7F5BZZ.js";
-import "../chunk-UGXT677T.js";
+import "../chunk-BWRHL2AG.js";
 import "../chunk-4C66DLIJ.js";
 import "../chunk-K3IKUSZW.js";
 import "../chunk-IGQVA7SC.js";

package/dist/components/DateInput.cjs

@@ -486,7 +486,9 @@ var Input = (_a) => {
   }, [propValue, decimals, variant]);
   const getInputProps = () => {
     var _a2;
-    const baseProps = __spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals));
+    const baseProps = __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
+      value: propValue
+    });
     switch (variant) {
       case "search":
         return __spreadProps(__spreadValues({}, baseProps), {
@@ -540,7 +542,7 @@ var Input = (_a) => {
       case "finder":
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "search" });
       case "uom":
-        return uom ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom }) : null;
+        return uom ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : null;
       case "percentage":
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "percent" }) });
       default:

package/dist/components/DateInput.js

@@ -3,7 +3,7 @@ import {
 } from "../chunk-4T7F5BZZ.js";
 import {
   InputBase
-} from "../chunk-UGXT677T.js";
+} from "../chunk-BWRHL2AG.js";
 import "../chunk-4C66DLIJ.js";
 import {
   CalendarRange

package/dist/components/DateRangeInput.cjs

@@ -486,7 +486,9 @@ var Input = (_a) => {
   }, [propValue, decimals, variant]);
   const getInputProps = () => {
     var _a2;
-    const baseProps = __spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals));
+    const baseProps = __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
+      value: propValue
+    });
     switch (variant) {
       case "search":
         return __spreadProps(__spreadValues({}, baseProps), {
@@ -540,7 +542,7 @@ var Input = (_a) => {
       case "finder":
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "search" });
       case "uom":
-        return uom ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom }) : null;
+        return uom ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : null;
       case "percentage":
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "percent" }) });
       default:

package/dist/components/DateRangeInput.js

@@ -3,7 +3,7 @@ import {
 } from "../chunk-4T7F5BZZ.js";
 import {
   InputBase
-} from "../chunk-UGXT677T.js";
+} from "../chunk-BWRHL2AG.js";
 import "../chunk-4C66DLIJ.js";
 import {
   CalendarRange