@dmsi/wedgekit-react 0.0.257 → 0.0.258

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}
 

package/dist/{chunk-6CPGOW6J.js → chunk-3C2U4FKR.js}

@@ -1,12 +1,12 @@
 import {
   Heading2
 } from "./chunk-EU73QPW7.js";
-import {
-  Icon
-} from "./chunk-NKUETCDA.js";
 import {
   Button
 } from "./chunk-WWAPK5PH.js";
+import {
+  Icon
+} from "./chunk-NKUETCDA.js";
 import {
   layoutGroupGap,
   layoutPaddding

package/dist/{chunk-KKESN5SF.js → chunk-4XTTJOQA.js}

@@ -1,12 +1,12 @@
 import {
   Label
 } from "./chunk-7CS736EF.js";
-import {
-  Icon
-} from "./chunk-NKUETCDA.js";
 import {
   Button
 } from "./chunk-WWAPK5PH.js";
+import {
+  Icon
+} from "./chunk-NKUETCDA.js";
 import {
   baseTransition,
   componentGap,

package/dist/{chunk-XM7IQHBU.js → chunk-5OPI4GTJ.js}

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

package/dist/{chunk-FLVYV4T4.js → chunk-7CA54V6U.js}

@@ -1,9 +1,9 @@
-import {
-  useMatchesMobile
-} from "./chunk-HIVPC3T4.js";
 import {
   Label
 } from "./chunk-7CS736EF.js";
+import {
+  useMatchesMobile
+} from "./chunk-HIVPC3T4.js";
 import {
   Paragraph
 } from "./chunk-OGIFIPKH.js";

package/dist/{chunk-FHQL42YP.js → chunk-YUBQJQ75.js}

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