@dmsi/wedgekit-react 0.0.257 → 0.0.259

package/dist/{chunk-7PWT532Y.js → chunk-6GAYJCFE.js}

@@ -1,6 +1,6 @@
 import {
   Input
-} from "./chunk-5NIAGAA7.js";
+} from "./chunk-RJUN52HJ.js";
 import {
   __objRest,
   __spreadValues

package/dist/{chunk-2MZ5WKCL.js → chunk-ANDTMNGV.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-FLVYV4T4.js";
 import {
   Search
-} from "./chunk-7PWT532Y.js";
+} from "./chunk-6GAYJCFE.js";
 import {
   CSS
 } from "./chunk-WVUIIBRR.js";

package/dist/{chunk-SYN5FFHV.js → chunk-I3WFZOFY.js}

@@ -1,6 +1,6 @@
 import {
   InputBase
-} from "./chunk-5NIAGAA7.js";
+} from "./chunk-RJUN52HJ.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";

package/dist/{chunk-KIAURU7N.js → chunk-OAIAELMQ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-QQ5G773N.js";
 import {
   Select
-} from "./chunk-SYN5FFHV.js";
+} from "./chunk-I3WFZOFY.js";
 import {
   Checkbox
 } from "./chunk-NO5BIKWS.js";
@@ -12,7 +12,7 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "./chunk-2MZ5WKCL.js";
+} from "./chunk-ANDTMNGV.js";
 import {
   Menu
 } from "./chunk-PGSDEGBP.js";
@@ -28,10 +28,10 @@ import {
 } from "./chunk-TYTD4FLW.js";
 import {
   Search
-} from "./chunk-7PWT532Y.js";
+} from "./chunk-6GAYJCFE.js";
 import {
   Input
-} from "./chunk-5NIAGAA7.js";
+} from "./chunk-RJUN52HJ.js";
 import {
   formatCurrencyDisplay
 } from "./chunk-5UH6QUFB.js";
@@ -689,7 +689,7 @@ function DataGrid({
       })
     )
   );
-  const resetColumnVisibility = useCallback(
+  const updateColumnVisibility = useCallback(
     (updateOrder) => {
       setColumnVisibility(
         Object.fromEntries(
@@ -703,9 +703,25 @@ function DataGrid({
     },
     [tableColumns]
   );
+  const resetDefaultColumnVisibility = useCallback(() => {
+    setTableColumns((prev) => {
+      columns.forEach((column) => {
+        var _a2, _b2;
+        const columnId = column.id;
+        const isVisible = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
+        const persistedIndex = prev.findIndex((col) => col.id === columnId);
+        if (persistedIndex !== -1) {
+          prev[persistedIndex].meta = __spreadProps(__spreadValues({}, prev[persistedIndex].meta), {
+            visible: isVisible
+          });
+        }
+      });
+      return [...prev];
+    }, true);
+  }, [columns, setTableColumns]);
   useEffect(() => {
-    resetColumnVisibility(true);
-  }, [resetColumnVisibility]);
+    updateColumnVisibility(true);
+  }, [updateColumnVisibility]);
   const sortingState = pagination ? externalSorting != null ? externalSorting : localSorting : localSorting;
   const setSortingState = pagination ? (updaterOrValue) => {
     const value = typeof updaterOrValue === "function" ? updaterOrValue(
@@ -1043,7 +1059,7 @@ function DataGrid({
                           id,
                           enableColumnSelector,
                           toggleColumnVisibility,
-                          resetColumnVisibility,
+                          resetColumnVisibility: resetDefaultColumnVisibility,
                           testid,
                           pinDirection: "right",
                           table,

package/dist/{chunk-5NIAGAA7.js → chunk-RJUN52HJ.js}

@@ -50,7 +50,8 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus,
     secondaryIconColor,
-    fullWidth = true
+    fullWidth = true,
+    wrapperRef
   } = _b, props = __objRest(_b, [
     "id",
     "testid",
@@ -70,7 +71,8 @@ var InputBase = (_a) => {
     "wrapperClassName",
     "focus",
     "secondaryIconColor",
-    "fullWidth"
+    "fullWidth",
+    "wrapperRef"
   ]);
   const attributes = {
     "data-error": error && !focus || null,
@@ -161,6 +163,11 @@ var InputBase = (_a) => {
               inputReadOnlyClass,
               wrapperClassName
             ),
+            ref: (el) => {
+              if (wrapperRef) {
+                wrapperRef.current = el;
+              }
+            },
             children: [
               before,
               /* @__PURE__ */ jsx(

package/dist/components/CalendarRange.cjs

@@ -1404,7 +1404,8 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus,
     secondaryIconColor,
-    fullWidth = true
+    fullWidth = true,
+    wrapperRef
   } = _b, props = __objRest(_b, [
     "id",
     "testid",
@@ -1424,7 +1425,8 @@ var InputBase = (_a) => {
     "wrapperClassName",
     "focus",
     "secondaryIconColor",
-    "fullWidth"
+    "fullWidth",
+    "wrapperRef"
   ]);
   const attributes = {
     "data-error": error && !focus || null,
@@ -1515,6 +1517,11 @@ var InputBase = (_a) => {
               inputReadOnlyClass,
               wrapperClassName
             ),
+            ref: (el) => {
+              if (wrapperRef) {
+                wrapperRef.current = el;
+              }
+            },
             children: [
               before,
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -2941,7 +2948,7 @@ function DataGrid({
       })
     )
   );
-  const resetColumnVisibility = (0, import_react16.useCallback)(
+  const updateColumnVisibility = (0, import_react16.useCallback)(
     (updateOrder) => {
       setColumnVisibility(
         Object.fromEntries(
@@ -2955,9 +2962,25 @@ function DataGrid({
     },
     [tableColumns]
   );
+  const resetDefaultColumnVisibility = (0, import_react16.useCallback)(() => {
+    setTableColumns((prev) => {
+      columns.forEach((column) => {
+        var _a2, _b2;
+        const columnId = column.id;
+        const isVisible = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
+        const persistedIndex = prev.findIndex((col) => col.id === columnId);
+        if (persistedIndex !== -1) {
+          prev[persistedIndex].meta = __spreadProps(__spreadValues({}, prev[persistedIndex].meta), {
+            visible: isVisible
+          });
+        }
+      });
+      return [...prev];
+    }, true);
+  }, [columns, setTableColumns]);
   (0, import_react16.useEffect)(() => {
-    resetColumnVisibility(true);
-  }, [resetColumnVisibility]);
+    updateColumnVisibility(true);
+  }, [updateColumnVisibility]);
   const sortingState = pagination ? externalSorting != null ? externalSorting : localSorting : localSorting;
   const setSortingState = pagination ? (updaterOrValue) => {
     const value = typeof updaterOrValue === "function" ? updaterOrValue(
@@ -3295,7 +3318,7 @@ function DataGrid({
                           id,
                           enableColumnSelector,
                           toggleColumnVisibility,
-                          resetColumnVisibility,
+                          resetColumnVisibility: resetDefaultColumnVisibility,
                           testid,
                           pinDirection: "right",
                           table,

package/dist/components/CalendarRange.js

@@ -3,19 +3,19 @@ import {
   CalendarRange_default,
   isWeekend
 } from "../chunk-PEB3BNN6.js";
-import "../chunk-KIAURU7N.js";
+import "../chunk-OAIAELMQ.js";
 import "../chunk-QQ5G773N.js";
-import "../chunk-SYN5FFHV.js";
+import "../chunk-I3WFZOFY.js";
 import "../chunk-NO5BIKWS.js";
-import "../chunk-2MZ5WKCL.js";
+import "../chunk-ANDTMNGV.js";
 import "../chunk-PGSDEGBP.js";
 import "../chunk-CCOQOO23.js";
 import "../chunk-FLVYV4T4.js";
 import "../chunk-HIVPC3T4.js";
 import "../chunk-VXWSAIB5.js";
 import "../chunk-TYTD4FLW.js";
-import "../chunk-7PWT532Y.js";
-import "../chunk-5NIAGAA7.js";
+import "../chunk-6GAYJCFE.js";
+import "../chunk-RJUN52HJ.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-7CS736EF.js";
 import "../chunk-WVUIIBRR.js";

package/dist/components/DataGridCell.cjs

@@ -1271,7 +1271,8 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus,
     secondaryIconColor,
-    fullWidth = true
+    fullWidth = true,
+    wrapperRef
   } = _b, props = __objRest(_b, [
     "id",
     "testid",
@@ -1291,7 +1292,8 @@ var InputBase = (_a) => {
     "wrapperClassName",
     "focus",
     "secondaryIconColor",
-    "fullWidth"
+    "fullWidth",
+    "wrapperRef"
   ]);
   const attributes = {
     "data-error": error && !focus || null,
@@ -1382,6 +1384,11 @@ var InputBase = (_a) => {
               inputReadOnlyClass,
               wrapperClassName
             ),
+            ref: (el) => {
+              if (wrapperRef) {
+                wrapperRef.current = el;
+              }
+            },
             children: [
               before,
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(

package/dist/components/DataGridCell.js

@@ -4,15 +4,15 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-2MZ5WKCL.js";
+} from "../chunk-ANDTMNGV.js";
 import "../chunk-PGSDEGBP.js";
 import "../chunk-CCOQOO23.js";
 import "../chunk-FLVYV4T4.js";
 import "../chunk-HIVPC3T4.js";
 import "../chunk-VXWSAIB5.js";
 import "../chunk-TYTD4FLW.js";
-import "../chunk-7PWT532Y.js";
-import "../chunk-5NIAGAA7.js";
+import "../chunk-6GAYJCFE.js";
+import "../chunk-RJUN52HJ.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-7CS736EF.js";
 import "../chunk-WVUIIBRR.js";

package/dist/components/DateInput.cjs

@@ -334,7 +334,8 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus,
     secondaryIconColor,
-    fullWidth = true
+    fullWidth = true,
+    wrapperRef
   } = _b, props = __objRest(_b, [
     "id",
     "testid",
@@ -354,7 +355,8 @@ var InputBase = (_a) => {
     "wrapperClassName",
     "focus",
     "secondaryIconColor",
-    "fullWidth"
+    "fullWidth",
+    "wrapperRef"
   ]);
   const attributes = {
     "data-error": error && !focus || null,
@@ -445,6 +447,11 @@ var InputBase = (_a) => {
               inputReadOnlyClass,
               wrapperClassName
             ),
+            ref: (el) => {
+              if (wrapperRef) {
+                wrapperRef.current = el;
+              }
+            },
             children: [
               before,
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -3011,7 +3018,7 @@ function DataGrid({
       })
     )
   );
-  const resetColumnVisibility = (0, import_react16.useCallback)(
+  const updateColumnVisibility = (0, import_react16.useCallback)(
     (updateOrder) => {
       setColumnVisibility(
         Object.fromEntries(
@@ -3025,9 +3032,25 @@ function DataGrid({
     },
     [tableColumns]
   );
+  const resetDefaultColumnVisibility = (0, import_react16.useCallback)(() => {
+    setTableColumns((prev) => {
+      columns.forEach((column) => {
+        var _a2, _b2;
+        const columnId = column.id;
+        const isVisible = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
+        const persistedIndex = prev.findIndex((col) => col.id === columnId);
+        if (persistedIndex !== -1) {
+          prev[persistedIndex].meta = __spreadProps(__spreadValues({}, prev[persistedIndex].meta), {
+            visible: isVisible
+          });
+        }
+      });
+      return [...prev];
+    }, true);
+  }, [columns, setTableColumns]);
   (0, import_react16.useEffect)(() => {
-    resetColumnVisibility(true);
-  }, [resetColumnVisibility]);
+    updateColumnVisibility(true);
+  }, [updateColumnVisibility]);
   const sortingState = pagination ? externalSorting != null ? externalSorting : localSorting : localSorting;
   const setSortingState = pagination ? (updaterOrValue) => {
     const value = typeof updaterOrValue === "function" ? updaterOrValue(
@@ -3365,7 +3388,7 @@ function DataGrid({
                           id,
                           enableColumnSelector,
                           toggleColumnVisibility,
-                          resetColumnVisibility,
+                          resetColumnVisibility: resetDefaultColumnVisibility,
                           testid,
                           pinDirection: "right",
                           table,
@@ -4546,6 +4569,7 @@ var DateInput = (_a) => {
   const [isTyping, setIsTyping] = (0, import_react20.useState)(false);
   const popoverRef = (0, import_react20.useRef)(null);
   const triggerRef = (0, import_react20.useRef)(null);
+  const rootRef = (0, import_react20.useRef)(null);
   const [calendarPosition, setCalendarPosition] = (0, import_react20.useState)({
     top: 0,
     left: 0,
@@ -4563,8 +4587,8 @@ var DateInput = (_a) => {
     }
   }, [visible]);
   const updatePosition = () => {
-    if (triggerRef.current) {
-      const rect = triggerRef.current.getBoundingClientRect();
+    if (rootRef.current) {
+      const rect = rootRef.current.getBoundingClientRect();
       setCalendarPosition({
         top: rect.bottom + window.scrollY,
         left: rect.left + window.scrollX,
@@ -4688,6 +4712,7 @@ var DateInput = (_a) => {
           triggerRef.current = el;
         }
       }, props), {
+        wrapperRef: rootRef,
         value: inputValue,
         placeholder,
         disabled,
@@ -4711,8 +4736,8 @@ var DateInput = (_a) => {
           },
           className: "absolute z-40 bg-white",
           style: {
-            top: `${calendarPosition.top + 16}px`,
-            left: `${calendarPosition.left - 4}px`,
+            top: `${calendarPosition.top + 4}px`,
+            left: `${calendarPosition.left}px`,
             minWidth: `${calendarPosition.width}px`
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(

package/dist/components/DateInput.js

@@ -1,11 +1,11 @@
 import {
   CalendarRange
 } from "../chunk-PEB3BNN6.js";
-import "../chunk-KIAURU7N.js";
+import "../chunk-OAIAELMQ.js";
 import "../chunk-QQ5G773N.js";
-import "../chunk-SYN5FFHV.js";
+import "../chunk-I3WFZOFY.js";
 import "../chunk-NO5BIKWS.js";
-import "../chunk-2MZ5WKCL.js";
+import "../chunk-ANDTMNGV.js";
 import "../chunk-PGSDEGBP.js";
 import "../chunk-CCOQOO23.js";
 import "../chunk-FLVYV4T4.js";
@@ -20,10 +20,10 @@ import {
   isValidDate,
   parseInputDate
 } from "../chunk-TYTD4FLW.js";
-import "../chunk-7PWT532Y.js";
+import "../chunk-6GAYJCFE.js";
 import {
   InputBase
-} from "../chunk-5NIAGAA7.js";
+} from "../chunk-RJUN52HJ.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-7CS736EF.js";
 import "../chunk-WVUIIBRR.js";
@@ -72,6 +72,7 @@ var DateInput = (_a) => {
   const [isTyping, setIsTyping] = useState(false);
   const popoverRef = useRef(null);
   const triggerRef = useRef(null);
+  const rootRef = useRef(null);
   const [calendarPosition, setCalendarPosition] = useState({
     top: 0,
     left: 0,
@@ -89,8 +90,8 @@ var DateInput = (_a) => {
     }
   }, [visible]);
   const updatePosition = () => {
-    if (triggerRef.current) {
-      const rect = triggerRef.current.getBoundingClientRect();
+    if (rootRef.current) {
+      const rect = rootRef.current.getBoundingClientRect();
       setCalendarPosition({
         top: rect.bottom + window.scrollY,
         left: rect.left + window.scrollX,
@@ -214,6 +215,7 @@ var DateInput = (_a) => {
           triggerRef.current = el;
         }
       }, props), {
+        wrapperRef: rootRef,
         value: inputValue,
         placeholder,
         disabled,
@@ -237,8 +239,8 @@ var DateInput = (_a) => {
           },
           className: "absolute z-40 bg-white",
           style: {
-            top: `${calendarPosition.top + 16}px`,
-            left: `${calendarPosition.left - 4}px`,
+            top: `${calendarPosition.top + 4}px`,
+            left: `${calendarPosition.left}px`,
             minWidth: `${calendarPosition.width}px`
           },
           children: /* @__PURE__ */ jsx(

package/dist/components/DateRangeInput.cjs

@@ -334,7 +334,8 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus,
     secondaryIconColor,
-    fullWidth = true
+    fullWidth = true,
+    wrapperRef
   } = _b, props = __objRest(_b, [
     "id",
     "testid",
@@ -354,7 +355,8 @@ var InputBase = (_a) => {
     "wrapperClassName",
     "focus",
     "secondaryIconColor",
-    "fullWidth"
+    "fullWidth",
+    "wrapperRef"
   ]);
   const attributes = {
     "data-error": error && !focus || null,
@@ -445,6 +447,11 @@ var InputBase = (_a) => {
               inputReadOnlyClass,
               wrapperClassName
             ),
+            ref: (el) => {
+              if (wrapperRef) {
+                wrapperRef.current = el;
+              }
+            },
             children: [
               before,
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -3019,7 +3026,7 @@ function DataGrid({
       })
     )
   );
-  const resetColumnVisibility = (0, import_react16.useCallback)(
+  const updateColumnVisibility = (0, import_react16.useCallback)(
     (updateOrder) => {
       setColumnVisibility(
         Object.fromEntries(
@@ -3033,9 +3040,25 @@ function DataGrid({
     },
     [tableColumns]
   );
+  const resetDefaultColumnVisibility = (0, import_react16.useCallback)(() => {
+    setTableColumns((prev) => {
+      columns.forEach((column) => {
+        var _a2, _b2;
+        const columnId = column.id;
+        const isVisible = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
+        const persistedIndex = prev.findIndex((col) => col.id === columnId);
+        if (persistedIndex !== -1) {
+          prev[persistedIndex].meta = __spreadProps(__spreadValues({}, prev[persistedIndex].meta), {
+            visible: isVisible
+          });
+        }
+      });
+      return [...prev];
+    }, true);
+  }, [columns, setTableColumns]);
   (0, import_react16.useEffect)(() => {
-    resetColumnVisibility(true);
-  }, [resetColumnVisibility]);
+    updateColumnVisibility(true);
+  }, [updateColumnVisibility]);
   const sortingState = pagination ? externalSorting != null ? externalSorting : localSorting : localSorting;
   const setSortingState = pagination ? (updaterOrValue) => {
     const value = typeof updaterOrValue === "function" ? updaterOrValue(
@@ -3373,7 +3396,7 @@ function DataGrid({
                           id,
                           enableColumnSelector,
                           toggleColumnVisibility,
-                          resetColumnVisibility,
+                          resetColumnVisibility: resetDefaultColumnVisibility,
                           testid,
                           pinDirection: "right",
                           table,
@@ -4557,6 +4580,7 @@ var DateRangeInput = (_a) => {
   const [inputValue, setInputValue] = (0, import_react20.useState)("");
   const [isTyping, setIsTyping] = (0, import_react20.useState)(false);
   const popoverRef = (0, import_react20.useRef)(null);
+  const rootRef = (0, import_react20.useRef)(null);
   const triggerRef = (0, import_react20.useRef)(null);
   const [calendarPosition, setCalendarPosition] = (0, import_react20.useState)({
     top: 0,
@@ -4575,8 +4599,8 @@ var DateRangeInput = (_a) => {
     }
   }, [visible]);
   const updatePosition = () => {
-    if (triggerRef.current) {
-      const rect = triggerRef.current.getBoundingClientRect();
+    if (rootRef.current) {
+      const rect = rootRef.current.getBoundingClientRect();
       setCalendarPosition({
         top: rect.bottom + window.scrollY,
         left: rect.left + window.scrollX,
@@ -4954,6 +4978,7 @@ var DateRangeInput = (_a) => {
           triggerRef.current = el;
         }
       }, props), {
+        wrapperRef: rootRef,
         value: inputValue,
         placeholder: disableRange ? "MM/DD/YYYY" : placeholder,
         disabled,
@@ -4977,8 +5002,8 @@ var DateRangeInput = (_a) => {
           },
           className: "absolute z-40 bg-white",
           style: {
-            top: `${calendarPosition.top + 16}px`,
-            left: `${calendarPosition.left - 4}px`,
+            top: `${calendarPosition.top + 4}px`,
+            left: `${calendarPosition.left}px`,
             minWidth: `${calendarPosition.width}px`
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(

package/dist/components/DateRangeInput.js

@@ -1,11 +1,11 @@
 import {
   CalendarRange
 } from "../chunk-PEB3BNN6.js";
-import "../chunk-KIAURU7N.js";
+import "../chunk-OAIAELMQ.js";
 import "../chunk-QQ5G773N.js";
-import "../chunk-SYN5FFHV.js";
+import "../chunk-I3WFZOFY.js";
 import "../chunk-NO5BIKWS.js";
-import "../chunk-2MZ5WKCL.js";
+import "../chunk-ANDTMNGV.js";
 import "../chunk-PGSDEGBP.js";
 import "../chunk-CCOQOO23.js";
 import "../chunk-FLVYV4T4.js";
@@ -21,10 +21,10 @@ import {
   isValidDateRangeOrder,
   parseInputDate
 } from "../chunk-TYTD4FLW.js";
-import "../chunk-7PWT532Y.js";
+import "../chunk-6GAYJCFE.js";
 import {
   InputBase
-} from "../chunk-5NIAGAA7.js";
+} from "../chunk-RJUN52HJ.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-7CS736EF.js";
 import "../chunk-WVUIIBRR.js";
@@ -76,6 +76,7 @@ var DateRangeInput = (_a) => {
   const [inputValue, setInputValue] = useState("");
   const [isTyping, setIsTyping] = useState(false);
   const popoverRef = useRef(null);
+  const rootRef = useRef(null);
   const triggerRef = useRef(null);
   const [calendarPosition, setCalendarPosition] = useState({
     top: 0,
@@ -94,8 +95,8 @@ var DateRangeInput = (_a) => {
     }
   }, [visible]);
   const updatePosition = () => {
-    if (triggerRef.current) {
-      const rect = triggerRef.current.getBoundingClientRect();
+    if (rootRef.current) {
+      const rect = rootRef.current.getBoundingClientRect();
       setCalendarPosition({
         top: rect.bottom + window.scrollY,
         left: rect.left + window.scrollX,
@@ -473,6 +474,7 @@ var DateRangeInput = (_a) => {
           triggerRef.current = el;
         }
       }, props), {
+        wrapperRef: rootRef,
         value: inputValue,
         placeholder: disableRange ? "MM/DD/YYYY" : placeholder,
         disabled,
@@ -496,8 +498,8 @@ var DateRangeInput = (_a) => {
           },
           className: "absolute z-40 bg-white",
           style: {
-            top: `${calendarPosition.top + 16}px`,
-            left: `${calendarPosition.left - 4}px`,
+            top: `${calendarPosition.top + 4}px`,
+            left: `${calendarPosition.left}px`,
             minWidth: `${calendarPosition.width}px`
           },
           children: /* @__PURE__ */ jsx(

package/dist/components/FilterGroup.cjs

@@ -854,7 +854,8 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus,
     secondaryIconColor,
-    fullWidth = true
+    fullWidth = true,
+    wrapperRef
   } = _b, props = __objRest(_b, [
     "id",
     "testid",
@@ -874,7 +875,8 @@ var InputBase = (_a) => {
     "wrapperClassName",
     "focus",
     "secondaryIconColor",
-    "fullWidth"
+    "fullWidth",
+    "wrapperRef"
   ]);
   const attributes = {
     "data-error": error && !focus || null,
@@ -965,6 +967,11 @@ var InputBase = (_a) => {
               inputReadOnlyClass,
               wrapperClassName
             ),
+            ref: (el) => {
+              if (wrapperRef) {
+                wrapperRef.current = el;
+              }
+            },
             children: [
               before,
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(

package/dist/components/FilterGroup.js

@@ -10,8 +10,8 @@ import {
 } from "../chunk-NO5BIKWS.js";
 import {
   Search
-} from "../chunk-7PWT532Y.js";
-import "../chunk-5NIAGAA7.js";
+} from "../chunk-6GAYJCFE.js";
+import "../chunk-RJUN52HJ.js";
 import "../chunk-5UH6QUFB.js";
 import {
   Label

package/dist/components/Input.cjs

@@ -336,7 +336,8 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus,
     secondaryIconColor,
-    fullWidth = true
+    fullWidth = true,
+    wrapperRef
   } = _b, props = __objRest(_b, [
     "id",
     "testid",
@@ -356,7 +357,8 @@ var InputBase = (_a) => {
     "wrapperClassName",
     "focus",
     "secondaryIconColor",
-    "fullWidth"
+    "fullWidth",
+    "wrapperRef"
   ]);
   const attributes = {
     "data-error": error && !focus || null,
@@ -447,6 +449,11 @@ var InputBase = (_a) => {
               inputReadOnlyClass,
               wrapperClassName
             ),
+            ref: (el) => {
+              if (wrapperRef) {
+                wrapperRef.current = el;
+              }
+            },
             children: [
               before,
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(

package/dist/components/Input.js

@@ -6,7 +6,7 @@ import {
   InputBase,
   Percentage,
   UOM
-} from "../chunk-5NIAGAA7.js";
+} from "../chunk-RJUN52HJ.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-7CS736EF.js";
 import "../chunk-NKUETCDA.js";

package/dist/components/Password.cjs

@@ -334,7 +334,8 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus,
     secondaryIconColor,
-    fullWidth = true
+    fullWidth = true,
+    wrapperRef
   } = _b, props = __objRest(_b, [
     "id",
     "testid",
@@ -354,7 +355,8 @@ var InputBase = (_a) => {
     "wrapperClassName",
     "focus",
     "secondaryIconColor",
-    "fullWidth"
+    "fullWidth",
+    "wrapperRef"
   ]);
   const attributes = {
     "data-error": error && !focus || null,
@@ -445,6 +447,11 @@ var InputBase = (_a) => {
               inputReadOnlyClass,
               wrapperClassName
             ),
+            ref: (el) => {
+              if (wrapperRef) {
+                wrapperRef.current = el;
+              }
+            },
             children: [
               before,
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(

package/dist/components/Password.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   InputBase
-} from "../chunk-5NIAGAA7.js";
+} from "../chunk-RJUN52HJ.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-7CS736EF.js";
 import {

package/dist/components/Search.cjs

@@ -334,7 +334,8 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus,
     secondaryIconColor,
-    fullWidth = true
+    fullWidth = true,
+    wrapperRef
   } = _b, props = __objRest(_b, [
     "id",
     "testid",
@@ -354,7 +355,8 @@ var InputBase = (_a) => {
     "wrapperClassName",
     "focus",
     "secondaryIconColor",
-    "fullWidth"
+    "fullWidth",
+    "wrapperRef"
   ]);
   const attributes = {
     "data-error": error && !focus || null,
@@ -445,6 +447,11 @@ var InputBase = (_a) => {
               inputReadOnlyClass,
               wrapperClassName
             ),
+            ref: (el) => {
+              if (wrapperRef) {
+                wrapperRef.current = el;
+              }
+            },
             children: [
               before,
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(

package/dist/components/Search.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   Search
-} from "../chunk-7PWT532Y.js";
-import "../chunk-5NIAGAA7.js";
+} from "../chunk-6GAYJCFE.js";
+import "../chunk-RJUN52HJ.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-7CS736EF.js";
 import "../chunk-NKUETCDA.js";

package/dist/components/Select.cjs

@@ -334,7 +334,8 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus,
     secondaryIconColor,
-    fullWidth = true
+    fullWidth = true,
+    wrapperRef
   } = _b, props = __objRest(_b, [
     "id",
     "testid",
@@ -354,7 +355,8 @@ var InputBase = (_a) => {
     "wrapperClassName",
     "focus",
     "secondaryIconColor",
-    "fullWidth"
+    "fullWidth",
+    "wrapperRef"
   ]);
   const attributes = {
     "data-error": error && !focus || null,
@@ -445,6 +447,11 @@ var InputBase = (_a) => {
               inputReadOnlyClass,
               wrapperClassName
             ),
+            ref: (el) => {
+              if (wrapperRef) {
+                wrapperRef.current = el;
+              }
+            },
             children: [
               before,
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(

package/dist/components/Select.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   Select
-} from "../chunk-SYN5FFHV.js";
-import "../chunk-5NIAGAA7.js";
+} from "../chunk-I3WFZOFY.js";
+import "../chunk-RJUN52HJ.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-7CS736EF.js";
 import "../chunk-NKUETCDA.js";

package/dist/components/Stepper.cjs

@@ -474,7 +474,8 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus,
     secondaryIconColor,
-    fullWidth = true
+    fullWidth = true,
+    wrapperRef
   } = _b, props = __objRest(_b, [
     "id",
     "testid",
@@ -494,7 +495,8 @@ var InputBase = (_a) => {
     "wrapperClassName",
     "focus",
     "secondaryIconColor",
-    "fullWidth"
+    "fullWidth",
+    "wrapperRef"
   ]);
   const attributes = {
     "data-error": error && !focus || null,
@@ -585,6 +587,11 @@ var InputBase = (_a) => {
               inputReadOnlyClass,
               wrapperClassName
             ),
+            ref: (el) => {
+              if (wrapperRef) {
+                wrapperRef.current = el;
+              }
+            },
             children: [
               before,
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(

package/dist/components/Stepper.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   InputBase
-} from "../chunk-5NIAGAA7.js";
+} from "../chunk-RJUN52HJ.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-7CS736EF.js";
 import {

package/dist/components/Time.cjs

@@ -333,7 +333,8 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus,
     secondaryIconColor,
-    fullWidth = true
+    fullWidth = true,
+    wrapperRef
   } = _b, props = __objRest(_b, [
     "id",
     "testid",
@@ -353,7 +354,8 @@ var InputBase = (_a) => {
     "wrapperClassName",
     "focus",
     "secondaryIconColor",
-    "fullWidth"
+    "fullWidth",
+    "wrapperRef"
   ]);
   const attributes = {
     "data-error": error && !focus || null,
@@ -444,6 +446,11 @@ var InputBase = (_a) => {
               inputReadOnlyClass,
               wrapperClassName
             ),
+            ref: (el) => {
+              if (wrapperRef) {
+                wrapperRef.current = el;
+              }
+            },
             children: [
               before,
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(

package/dist/components/Time.js

@@ -4,7 +4,7 @@ import {
 import "../chunk-TYTD4FLW.js";
 import {
   InputBase
-} from "../chunk-5NIAGAA7.js";
+} from "../chunk-RJUN52HJ.js";
 import "../chunk-5UH6QUFB.js";
 import "../chunk-7CS736EF.js";
 import {

package/dist/components/index.cjs

@@ -1415,7 +1415,8 @@ var InputBase = (_a) => {
     wrapperClassName,
     focus,
     secondaryIconColor,
-    fullWidth = true
+    fullWidth = true,
+    wrapperRef
   } = _b, props = __objRest(_b, [
     "id",
     "testid",
@@ -1435,7 +1436,8 @@ var InputBase = (_a) => {
     "wrapperClassName",
     "focus",
     "secondaryIconColor",
-    "fullWidth"
+    "fullWidth",
+    "wrapperRef"
   ]);
   const attributes = {
     "data-error": error && !focus || null,
@@ -1526,6 +1528,11 @@ var InputBase = (_a) => {
               inputReadOnlyClass,
               wrapperClassName
             ),
+            ref: (el) => {
+              if (wrapperRef) {
+                wrapperRef.current = el;
+              }
+            },
             children: [
               before,
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -2952,7 +2959,7 @@ function DataGrid({
       })
     )
   );
-  const resetColumnVisibility = (0, import_react16.useCallback)(
+  const updateColumnVisibility = (0, import_react16.useCallback)(
     (updateOrder) => {
       setColumnVisibility(
         Object.fromEntries(
@@ -2966,9 +2973,25 @@ function DataGrid({
     },
     [tableColumns]
   );
+  const resetDefaultColumnVisibility = (0, import_react16.useCallback)(() => {
+    setTableColumns((prev) => {
+      columns.forEach((column) => {
+        var _a2, _b2;
+        const columnId = column.id;
+        const isVisible = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
+        const persistedIndex = prev.findIndex((col) => col.id === columnId);
+        if (persistedIndex !== -1) {
+          prev[persistedIndex].meta = __spreadProps(__spreadValues({}, prev[persistedIndex].meta), {
+            visible: isVisible
+          });
+        }
+      });
+      return [...prev];
+    }, true);
+  }, [columns, setTableColumns]);
   (0, import_react16.useEffect)(() => {
-    resetColumnVisibility(true);
-  }, [resetColumnVisibility]);
+    updateColumnVisibility(true);
+  }, [updateColumnVisibility]);
   const sortingState = pagination ? externalSorting != null ? externalSorting : localSorting : localSorting;
   const setSortingState = pagination ? (updaterOrValue) => {
     const value = typeof updaterOrValue === "function" ? updaterOrValue(
@@ -3306,7 +3329,7 @@ function DataGrid({
                           id,
                           enableColumnSelector,
                           toggleColumnVisibility,
-                          resetColumnVisibility,
+                          resetColumnVisibility: resetDefaultColumnVisibility,
                           testid,
                           pinDirection: "right",
                           table,

package/dist/components/index.js

@@ -1,12 +1,12 @@
 import {
   DataGrid
-} from "../chunk-KIAURU7N.js";
+} from "../chunk-OAIAELMQ.js";
 import {
   Tooltip
 } from "../chunk-QQ5G773N.js";
 import {
   Select
-} from "../chunk-SYN5FFHV.js";
+} from "../chunk-I3WFZOFY.js";
 import {
   Checkbox
 } from "../chunk-NO5BIKWS.js";
@@ -15,7 +15,7 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-2MZ5WKCL.js";
+} from "../chunk-ANDTMNGV.js";
 import {
   Menu
 } from "../chunk-PGSDEGBP.js";
@@ -28,10 +28,10 @@ import "../chunk-VXWSAIB5.js";
 import "../chunk-TYTD4FLW.js";
 import {
   Search
-} from "../chunk-7PWT532Y.js";
+} from "../chunk-6GAYJCFE.js";
 import {
   Input
-} from "../chunk-5NIAGAA7.js";
+} from "../chunk-RJUN52HJ.js";
 import "../chunk-5UH6QUFB.js";
 import {
   Label

package/package.json

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

package/src/components/DataGrid/index.tsx

@@ -104,7 +104,7 @@ export function DataGrid<T extends Record<string, unknown>>({
     ),
   );
 
-  const resetColumnVisibility = useCallback(
+  const updateColumnVisibility = useCallback(
     (updateOrder?: boolean) => {
       setColumnVisibility(
         Object.fromEntries(
@@ -118,9 +118,27 @@ export function DataGrid<T extends Record<string, unknown>>({
     [tableColumns],
   );
 
+  const resetDefaultColumnVisibility = useCallback(() => {
+    setTableColumns((prev) => {
+      columns.forEach((column) => {
+        const columnId = column.id;
+        const isVisible = column.meta?.visible ?? true;
+        const persistedIndex = prev.findIndex((col) => col.id === columnId);
+        if (persistedIndex !== -1) {
+          prev[persistedIndex].meta = {
+            ...prev[persistedIndex].meta,
+            visible: isVisible,
+          };
+        }
+      });
+      return [...prev];
+      // @ts-expect-error Internal usage only
+    }, true);
+  }, [columns, setTableColumns]);
+
   useEffect(() => {
-    resetColumnVisibility(true);
-  }, [resetColumnVisibility]);
+    updateColumnVisibility(true);
+  }, [updateColumnVisibility]);
 
   const sortingState = pagination
     ? (externalSorting ?? localSorting)
@@ -563,7 +581,7 @@ export function DataGrid<T extends Record<string, unknown>>({
               id={id}
               enableColumnSelector={enableColumnSelector}
               toggleColumnVisibility={toggleColumnVisibility}
-              resetColumnVisibility={resetColumnVisibility}
+              resetColumnVisibility={resetDefaultColumnVisibility}
               testid={testid}
               pinDirection="right"
               table={table}

package/src/components/DateInput.tsx

@@ -57,6 +57,7 @@ export const DateInput = ({
   const [isTyping, setIsTyping] = useState(false);
   const popoverRef = useRef<HTMLDivElement | null>(null);
   const triggerRef = useRef<HTMLInputElement | null>(null);
+  const rootRef = useRef<HTMLDivElement | null>(null);
   const [calendarPosition, setCalendarPosition] = useState({
     top: 0,
     left: 0,
@@ -80,8 +81,8 @@ export const DateInput = ({
   }, [visible]);
 
   const updatePosition = () => {
-    if (triggerRef.current) {
-      const rect = triggerRef.current.getBoundingClientRect();
+    if (rootRef.current) {
+      const rect = rootRef.current.getBoundingClientRect();
       setCalendarPosition({
         top: rect.bottom + window.scrollY,
         left: rect.left + window.scrollX,
@@ -237,6 +238,7 @@ export const DateInput = ({
           triggerRef.current = el;
         }}
         {...props}
+        wrapperRef={rootRef}
         value={inputValue}
         placeholder={placeholder}
         disabled={disabled}
@@ -259,8 +261,8 @@ export const DateInput = ({
             }}
             className="absolute z-40 bg-white"
             style={{
-              top: `${calendarPosition.top + 16}px`,
-              left: `${calendarPosition.left - 4}px`,
+              top: `${calendarPosition.top + 4}px`,
+              left: `${calendarPosition.left}px`,
               minWidth: `${calendarPosition.width}px`,
             }}
           >

package/src/components/DateRangeInput.tsx

@@ -61,6 +61,7 @@ export const DateRangeInput = ({
   const [inputValue, setInputValue] = useState("");
   const [isTyping, setIsTyping] = useState(false);
   const popoverRef = useRef<HTMLDivElement | null>(null);
+  const rootRef = useRef<HTMLDivElement | null>(null);
   const triggerRef = useRef<HTMLInputElement | null>(null);
   const [calendarPosition, setCalendarPosition] = useState({
     top: 0,
@@ -84,8 +85,8 @@ export const DateRangeInput = ({
   }, [visible]);
 
   const updatePosition = () => {
-    if (triggerRef.current) {
-      const rect = triggerRef.current.getBoundingClientRect();
+    if (rootRef.current) {
+      const rect = rootRef.current.getBoundingClientRect();
       setCalendarPosition({
         top: rect.bottom + window.scrollY,
         left: rect.left + window.scrollX,
@@ -583,6 +584,7 @@ export const DateRangeInput = ({
           triggerRef.current = el;
         }}
         {...props}
+        wrapperRef={rootRef}
         value={inputValue}
         placeholder={disableRange ? "MM/DD/YYYY" : placeholder}
         disabled={disabled}
@@ -605,8 +607,8 @@ export const DateRangeInput = ({
             }}
             className="absolute z-40 bg-white"
             style={{
-              top: `${calendarPosition.top + 16}px`,
-              left: `${calendarPosition.left - 4}px`,
+              top: `${calendarPosition.top + 4}px`,
+              left: `${calendarPosition.left}px`,
               minWidth: `${calendarPosition.width}px`,
             }}
           >

package/src/components/Input.tsx

@@ -58,6 +58,7 @@ export type InputBaseProps = {
   focus?: boolean;
   secondaryIconColor?: boolean;
   fullWidth?: boolean; // If true, input takes full width of the container
+  wrapperRef?: RefObject<HTMLDivElement | null>;
 } & InputFormatting &
   Omit<ComponentProps<"input">, "align" | "id">;
 
@@ -81,6 +82,7 @@ export const InputBase = ({
   focus,
   secondaryIconColor,
   fullWidth = true,
+  wrapperRef,
   ...props
 }: InputBaseProps) => {
   const attributes = {
@@ -182,6 +184,11 @@ export const InputBase = ({
           inputReadOnlyClass,
           wrapperClassName,
         )}
+        ref={(el) => {
+          if (wrapperRef) {
+            wrapperRef.current = el;
+          }
+        }}
       >
         {before}