@chekinapp/ui 0.0.123 → 0.0.125

package/dist/index.cjs

@@ -12854,7 +12854,8 @@ function SelectFieldShell({
             {
               id: errorId,
               message: errorMessage,
-              className: "mt-[1px] text-[14px]"
+              className: "mt-[1px] text-[14px]",
+              "data-testid": name ? `${name}-error` : void 0
             }
           )
         ] })
@@ -13562,6 +13563,7 @@ function useSelectState(params) {
     closeMenuOnSelect,
     openMenuOnFocus = true,
     onKeyDown,
+    onFocus,
     onBlur,
     isSearchInDropdown
   } = params;
@@ -13578,9 +13580,7 @@ function useSelectState(params) {
     [singleSelected, getValueLabel]
   );
   const isSearchOnlyInput = isMulti || Boolean(isSearchInDropdown);
-  const [inputValue, setInputValue] = React48.useState(
-    isSearchOnlyInput ? "" : valueLabel
-  );
+  const [inputValue, setInputValue] = React48.useState(isSearchOnlyInput ? "" : valueLabel);
   const hasValue = selectedOptions.length > 0;
   const isBlocked = Boolean(disabled) || Boolean(loading) || Boolean(readOnly);
   const hasInvalidState = Boolean(error);
@@ -13739,14 +13739,18 @@ function useSelectState(params) {
     },
     [isOpen, setIsOpen]
   );
-  const handleInputFocus = React48.useCallback(() => {
-    if (isBlocked) return;
-    setIsFocused(true);
-    if (openMenuOnFocus) setIsOpen(true);
-    if (!isMulti) {
-      requestAnimationFrame(() => inputRef.current?.select());
-    }
-  }, [isBlocked, openMenuOnFocus, setIsOpen, isMulti]);
+  const handleInputFocus = React48.useCallback(
+    (event) => {
+      if (isBlocked) return;
+      onFocus?.(event);
+      setIsFocused(true);
+      if (openMenuOnFocus) setIsOpen(true);
+      if (!isMulti) {
+        requestAnimationFrame(() => inputRef.current?.select());
+      }
+    },
+    [isBlocked, onFocus, openMenuOnFocus, setIsOpen, isMulti]
+  );
   const handleContainerClick = React48.useCallback(() => {
     if (isBlocked) return;
     inputRef.current?.focus();
@@ -14180,6 +14184,7 @@ function SelectInternal(props, ref) {
   const {
     options = [],
     onBlur,
+    onFocus,
     label,
     topLabel,
     placeholder,
@@ -14281,6 +14286,7 @@ function SelectInternal(props, ref) {
     closeMenuOnSelect,
     openMenuOnFocus,
     onKeyDown,
+    onFocus,
     onBlur,
     isSearchInDropdown
   });
@@ -14507,6 +14513,7 @@ var PhoneInput = React50.forwardRef(
     options,
     value,
     onChange,
+    onFocus,
     onBlur,
     name,
     codeName,
@@ -14646,6 +14653,7 @@ var PhoneInput = React50.forwardRef(
                 tooltip,
                 "aria-label": resolvedLabel || name,
                 onChange: handleNumberChange,
+                onFocus,
                 onBlur,
                 renderErrorMessage: false,
                 wrapperClassName: "!max-w-none"
@@ -16235,6 +16243,9 @@ var Datepicker = React62.forwardRef(
     value,
     defaultValue,
     onChange,
+    onFocus,
+    onFieldFocus,
+    onFieldBlur,
     name,
     invalid,
     error,
@@ -16298,9 +16309,30 @@ var Datepicker = React62.forwardRef(
     const [monthInputValue, setMonthInputValue] = React62.useState("");
     const [monthHighlightIndex, setMonthHighlightIndex] = React62.useState(-1);
     const isMobile3 = useIsMobile();
+    const emitChangeRef = React62.useRef(() => {
+    });
+    const dayStateRef = React62.useRef(day);
+    const yearStateRef = React62.useRef(year);
+    const monthIndexRef = React62.useRef(monthIndex);
+    dayStateRef.current = day;
+    yearStateRef.current = year;
+    monthIndexRef.current = monthIndex;
     React62.useImperativeHandle(
       ref,
-      () => dayInputRef.current ?? mobileTriggerRef.current,
+      () => ({
+        getDayValue: () => dayStateRef.current,
+        getYearValue: () => yearStateRef.current,
+        setDayValue: (next) => {
+          if (!PARTIAL_DAY_PATTERN.test(next)) return;
+          setDay(next);
+          emitChangeRef.current(next, monthIndexRef.current, yearStateRef.current);
+        },
+        setYearValue: (next) => {
+          if (!PARTIAL_YEAR_PATTERN.test(next)) return;
+          setYear(next);
+          emitChangeRef.current(dayStateRef.current, monthIndexRef.current, next);
+        }
+      }),
       []
     );
     React62.useEffect(() => {
@@ -16361,6 +16393,7 @@ var Datepicker = React62.forwardRef(
       },
       [name, onChange]
     );
+    emitChangeRef.current = emitChange;
     const handleDayChange = (event) => {
       const next = event.target.value;
       if (!PARTIAL_DAY_PATTERN.test(next)) return;
@@ -16548,6 +16581,7 @@ var Datepicker = React62.forwardRef(
                 "aria-busy": loading,
                 disabled: isBlocked || readOnly,
                 onClick: openWheel,
+                onFocus,
                 className: cn(
                   "relative m-0 box-border flex h-12 w-full cursor-pointer items-center justify-between gap-2 rounded-[6px] border-0 px-4 text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
                   triggerText ? "bg-transparent text-[var(--chekin-color-brand-navy)]" : "bg-[var(--empty-field-background)] text-[var(--chekin-color-gray-1)]",
@@ -16590,8 +16624,15 @@ var Datepicker = React62.forwardRef(
                       "aria-invalid": isInvalid,
                       "aria-labelledby": labelId,
                       onChange: handleDayChange,
-                      onFocus: () => setFocusedField("day"),
-                      onBlur: () => setFocusedField(null),
+                      onFocus: (event) => {
+                        onFocus?.(event);
+                        onFieldFocus?.("day");
+                        setFocusedField("day");
+                      },
+                      onBlur: () => {
+                        onFieldBlur?.("day");
+                        setFocusedField(null);
+                      },
                       maxLength: 2,
                       className: subInputClass
                     }
@@ -16618,7 +16659,9 @@ var Datepicker = React62.forwardRef(
                         disabled: isBlocked,
                         readOnly,
                         onChange: handleMonthInputChange,
-                        onFocus: () => {
+                        onFocus: (event) => {
+                          onFocus?.(event);
+                          onFieldFocus?.("month");
                           setFocusedField("month");
                           if (!isBlocked && !readOnly) {
                             setIsMonthOpen(true);
@@ -16626,6 +16669,7 @@ var Datepicker = React62.forwardRef(
                           }
                         },
                         onBlur: () => {
+                          onFieldBlur?.("month");
                           setFocusedField(null);
                           commitMonthInput();
                         },
@@ -16673,8 +16717,15 @@ var Datepicker = React62.forwardRef(
                       "aria-invalid": isInvalid,
                       "aria-labelledby": labelId,
                       onChange: handleYearChange,
-                      onFocus: () => setFocusedField("year"),
-                      onBlur: () => setFocusedField(null),
+                      onFocus: (event) => {
+                        onFocus?.(event);
+                        onFieldFocus?.("year");
+                        setFocusedField("year");
+                      },
+                      onBlur: () => {
+                        onFieldBlur?.("year");
+                        setFocusedField(null);
+                      },
                       maxLength: 4,
                       className: subInputClass
                     }
@@ -17204,6 +17255,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
   value: externalValue,
   defaultValue,
   onChange,
+  onFocus,
   onBlur,
   name,
   invalid,
@@ -17399,11 +17451,13 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
               openCalendarLabel: t("open_calendar"),
               onFromTextChange: setFromText,
               onToTextChange: setToText,
-              onFromFocus: () => {
+              onFromFocus: (event) => {
+                onFocus?.(event);
                 setFocusedInput("from");
                 if (!readOnly && !isBlocked) setIsOpen(true);
               },
-              onToFocus: () => {
+              onToFocus: (event) => {
+                onFocus?.(event);
                 setFocusedInput("to");
                 if (!readOnly && !isBlocked) setIsOpen(true);
               },
@@ -17657,6 +17711,7 @@ var FileInput = React69.forwardRef(function FileInput2({
   label,
   value,
   onChange,
+  onFocus,
   onDownload = defaultDownload,
   name = "file",
   placeholder,
@@ -17730,6 +17785,7 @@ var FileInput = React69.forwardRef(function FileInput2({
             multiple,
             disabled: isBlocked || readOnly,
             onChange: handleFileChange,
+            onFocus,
             className: "absolute h-[0.1px] w-[0.1px] opacity-0",
             "aria-labelledby": labelId,
             "aria-invalid": isInvalid
@@ -17830,6 +17886,7 @@ var SelectIconsBox = React70.forwardRef(
     isOpen: controlledOpen,
     defaultOpen = false,
     onOpenChange,
+    onFocus,
     position = "left",
     className,
     boxClassName
@@ -17857,6 +17914,7 @@ var SelectIconsBox = React70.forwardRef(
       setOpen(false);
     };
     const handleContainerFocus = (event) => {
+      onFocus?.(event);
       if (event.target !== event.currentTarget) return;
       const focusable = event.currentTarget.querySelector(
         FOCUSABLE_TRIGGER_SELECTOR2