@dmsi/wedgekit-react 0.0.256 → 0.0.258

package/dist/{chunk-LR44WRGD.js → chunk-5LMXR6AJ.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk-WVUIIBRR.js";
 import {
   Search
-} from "./chunk-U2UQVMIF.js";
+} from "./chunk-6DPFKSCT.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";

package/dist/{chunk-U2UQVMIF.js → chunk-6DPFKSCT.js}

@@ -1,6 +1,6 @@
 import {
   Input
-} from "./chunk-OG26RVXY.js";
+} from "./chunk-ZL5X7KP6.js";
 import {
   __objRest,
   __spreadValues

package/dist/{chunk-TF6H5RZB.js → chunk-J5V2JRIK.js}

@@ -1,6 +1,6 @@
 import {
   InputBase
-} from "./chunk-OG26RVXY.js";
+} from "./chunk-ZL5X7KP6.js";
 import {
   Icon
 } from "./chunk-NKUETCDA.js";

package/dist/{chunk-IKPM5LCD.js → chunk-T3TT3SVX.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-QQ5G773N.js";
 import {
   Select
-} from "./chunk-TF6H5RZB.js";
+} from "./chunk-J5V2JRIK.js";
 import {
   DataCellHeader,
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "./chunk-LR44WRGD.js";
+} from "./chunk-5LMXR6AJ.js";
 import {
   Menu
 } from "./chunk-PGSDEGBP.js";
@@ -18,10 +18,10 @@ import {
 } from "./chunk-7CA54V6U.js";
 import {
   Search
-} from "./chunk-U2UQVMIF.js";
+} from "./chunk-6DPFKSCT.js";
 import {
   Input
-} from "./chunk-OG26RVXY.js";
+} from "./chunk-ZL5X7KP6.js";
 import {
   Label
 } from "./chunk-7CS736EF.js";

package/dist/{chunk-OG26RVXY.js → chunk-ZL5X7KP6.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)(

package/dist/components/CalendarRange.js

@@ -3,16 +3,16 @@ import {
   CalendarRange_default,
   isWeekend
 } from "../chunk-AEHXCKEP.js";
-import "../chunk-IKPM5LCD.js";
+import "../chunk-T3TT3SVX.js";
 import "../chunk-QQ5G773N.js";
-import "../chunk-TF6H5RZB.js";
-import "../chunk-LR44WRGD.js";
+import "../chunk-J5V2JRIK.js";
+import "../chunk-5LMXR6AJ.js";
 import "../chunk-PGSDEGBP.js";
 import "../chunk-CCOQOO23.js";
 import "../chunk-7CA54V6U.js";
 import "../chunk-WVUIIBRR.js";
-import "../chunk-U2UQVMIF.js";
-import "../chunk-OG26RVXY.js";
+import "../chunk-6DPFKSCT.js";
+import "../chunk-ZL5X7KP6.js";
 import "../chunk-7CS736EF.js";
 import "../chunk-NO5BIKWS.js";
 import "../chunk-WWAPK5PH.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,13 +4,13 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-LR44WRGD.js";
+} from "../chunk-5LMXR6AJ.js";
 import "../chunk-PGSDEGBP.js";
 import "../chunk-CCOQOO23.js";
 import "../chunk-7CA54V6U.js";
 import "../chunk-WVUIIBRR.js";
-import "../chunk-U2UQVMIF.js";
-import "../chunk-OG26RVXY.js";
+import "../chunk-6DPFKSCT.js";
+import "../chunk-ZL5X7KP6.js";
 import "../chunk-7CS736EF.js";
 import "../chunk-HIVPC3T4.js";
 import "../chunk-VXWSAIB5.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)(
@@ -4546,6 +4553,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 +4571,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 +4696,7 @@ var DateInput = (_a) => {
           triggerRef.current = el;
         }
       }, props), {
+        wrapperRef: rootRef,
         value: inputValue,
         placeholder,
         disabled,
@@ -4711,8 +4720,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,18 +1,18 @@
 import {
   CalendarRange
 } from "../chunk-AEHXCKEP.js";
-import "../chunk-IKPM5LCD.js";
+import "../chunk-T3TT3SVX.js";
 import "../chunk-QQ5G773N.js";
-import "../chunk-TF6H5RZB.js";
-import "../chunk-LR44WRGD.js";
+import "../chunk-J5V2JRIK.js";
+import "../chunk-5LMXR6AJ.js";
 import "../chunk-PGSDEGBP.js";
 import "../chunk-CCOQOO23.js";
 import "../chunk-7CA54V6U.js";
 import "../chunk-WVUIIBRR.js";
-import "../chunk-U2UQVMIF.js";
+import "../chunk-6DPFKSCT.js";
 import {
   InputBase
-} from "../chunk-OG26RVXY.js";
+} from "../chunk-ZL5X7KP6.js";
 import "../chunk-7CS736EF.js";
 import "../chunk-NO5BIKWS.js";
 import "../chunk-WWAPK5PH.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)(
@@ -4557,6 +4564,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 +4583,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 +4962,7 @@ var DateRangeInput = (_a) => {
           triggerRef.current = el;
         }
       }, props), {
+        wrapperRef: rootRef,
         value: inputValue,
         placeholder: disableRange ? "MM/DD/YYYY" : placeholder,
         disabled,
@@ -4977,8 +4986,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,18 +1,18 @@
 import {
   CalendarRange
 } from "../chunk-AEHXCKEP.js";
-import "../chunk-IKPM5LCD.js";
+import "../chunk-T3TT3SVX.js";
 import "../chunk-QQ5G773N.js";
-import "../chunk-TF6H5RZB.js";
-import "../chunk-LR44WRGD.js";
+import "../chunk-J5V2JRIK.js";
+import "../chunk-5LMXR6AJ.js";
 import "../chunk-PGSDEGBP.js";
 import "../chunk-CCOQOO23.js";
 import "../chunk-7CA54V6U.js";
 import "../chunk-WVUIIBRR.js";
-import "../chunk-U2UQVMIF.js";
+import "../chunk-6DPFKSCT.js";
 import {
   InputBase
-} from "../chunk-OG26RVXY.js";
+} from "../chunk-ZL5X7KP6.js";
 import "../chunk-7CS736EF.js";
 import "../chunk-NO5BIKWS.js";
 import "../chunk-WWAPK5PH.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

@@ -4,8 +4,8 @@ import {
 } from "../chunk-4XTTJOQA.js";
 import {
   Search
-} from "../chunk-U2UQVMIF.js";
-import "../chunk-OG26RVXY.js";
+} from "../chunk-6DPFKSCT.js";
+import "../chunk-ZL5X7KP6.js";
 import {
   Label
 } from "../chunk-7CS736EF.js";

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-OG26RVXY.js";
+} from "../chunk-ZL5X7KP6.js";
 import "../chunk-7CS736EF.js";
 import "../chunk-5UH6QUFB.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-OG26RVXY.js";
+} from "../chunk-ZL5X7KP6.js";
 import "../chunk-7CS736EF.js";
 import "../chunk-5UH6QUFB.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-U2UQVMIF.js";
-import "../chunk-OG26RVXY.js";
+} from "../chunk-6DPFKSCT.js";
+import "../chunk-ZL5X7KP6.js";
 import "../chunk-7CS736EF.js";
 import "../chunk-5UH6QUFB.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-TF6H5RZB.js";
-import "../chunk-OG26RVXY.js";
+} from "../chunk-J5V2JRIK.js";
+import "../chunk-ZL5X7KP6.js";
 import "../chunk-7CS736EF.js";
 import "../chunk-5UH6QUFB.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-OG26RVXY.js";
+} from "../chunk-ZL5X7KP6.js";
 import "../chunk-7CS736EF.js";
 import {
   Button

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

@@ -1,6 +1,6 @@
 import {
   InputBase
-} from "../chunk-OG26RVXY.js";
+} from "../chunk-ZL5X7KP6.js";
 import "../chunk-7CS736EF.js";
 import {
   findDocumentRoot

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)(

package/dist/components/index.js

@@ -1,18 +1,18 @@
 import {
   DataGrid
-} from "../chunk-IKPM5LCD.js";
+} from "../chunk-T3TT3SVX.js";
 import {
   Tooltip
 } from "../chunk-QQ5G773N.js";
 import {
   Select
-} from "../chunk-TF6H5RZB.js";
+} from "../chunk-J5V2JRIK.js";
 import {
   DataCellHeader,
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-LR44WRGD.js";
+} from "../chunk-5LMXR6AJ.js";
 import {
   Menu
 } from "../chunk-PGSDEGBP.js";
@@ -23,10 +23,10 @@ import {
 import "../chunk-WVUIIBRR.js";
 import {
   Search
-} from "../chunk-U2UQVMIF.js";
+} from "../chunk-6DPFKSCT.js";
 import {
   Input
-} from "../chunk-OG26RVXY.js";
+} from "../chunk-ZL5X7KP6.js";
 import {
   Label
 } from "../chunk-7CS736EF.js";

package/package.json

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

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}