@chekinapp/ui 0.0.122 → 0.0.124

package/dist/index.cjs

@@ -13562,6 +13562,7 @@ function useSelectState(params) {
     closeMenuOnSelect,
     openMenuOnFocus = true,
     onKeyDown,
+    onFocus,
     onBlur,
     isSearchInDropdown
   } = params;
@@ -13577,7 +13578,8 @@ function useSelectState(params) {
     () => resolveValueLabel(singleSelected, getValueLabel),
     [singleSelected, getValueLabel]
   );
-  const [inputValue, setInputValue] = React48.useState(isMulti ? "" : valueLabel);
+  const isSearchOnlyInput = isMulti || Boolean(isSearchInDropdown);
+  const [inputValue, setInputValue] = React48.useState(isSearchOnlyInput ? "" : valueLabel);
   const hasValue = selectedOptions.length > 0;
   const isBlocked = Boolean(disabled) || Boolean(loading) || Boolean(readOnly);
   const hasInvalidState = Boolean(error);
@@ -13592,18 +13594,18 @@ function useSelectState(params) {
   const ids = useSelectIds({ name, hasValue, error, hideErrorMessage });
   const { listboxId, getOptionId: getOptionId2 } = ids;
   React48.useEffect(() => {
-    if (isMulti) return;
+    if (isSearchOnlyInput) return;
     if (!isFocused) setInputValue(valueLabel);
-  }, [valueLabel, isFocused, isMulti]);
+  }, [valueLabel, isFocused, isSearchOnlyInput]);
   React48.useEffect(() => {
-    if (!isMulti) return;
+    if (!isSearchOnlyInput) return;
     if (!isOpen) {
       setInputValue("");
       setHighlightedIndex(-1);
     }
-  }, [isOpen, isMulti]);
+  }, [isOpen, isSearchOnlyInput]);
   const trimmedInput = inputValue.trim();
-  const isFiltering = isMulti ? trimmedInput.length > 0 : trimmedInput.length > 0 && trimmedInput.toLowerCase() !== valueLabel.toLowerCase();
+  const isFiltering = isSearchOnlyInput ? trimmedInput.length > 0 : trimmedInput.length > 0 && trimmedInput.toLowerCase() !== valueLabel.toLowerCase();
   const filteredOptions = React48.useMemo(() => {
     if (!isFiltering) return options;
     return options.filter((option) => filterOption(option, trimmedInput));
@@ -13664,7 +13666,7 @@ function useSelectState(params) {
         return;
       }
       onSelectionChange([option], { action: "select" });
-      setInputValue(resolveValueLabel(option, getValueLabel));
+      setInputValue(isSearchInDropdown ? "" : resolveValueLabel(option, getValueLabel));
       setIsOpen(false);
       setIsFocused(false);
       inputRef.current?.blur();
@@ -13677,7 +13679,8 @@ function useSelectState(params) {
       onSelectionChange,
       closeMenuOnSelect,
       setIsOpen,
-      getValueLabel
+      getValueLabel,
+      isSearchInDropdown
     ]
   );
   const removeOption = React48.useCallback(
@@ -13712,7 +13715,7 @@ function useSelectState(params) {
       return;
     }
     onSelectionChange([newOption], { action: "create" });
-    setInputValue(resolveValueLabel(newOption, getValueLabel));
+    setInputValue(isSearchInDropdown ? "" : resolveValueLabel(newOption, getValueLabel));
     setIsOpen(false);
     setIsFocused(false);
     inputRef.current?.blur();
@@ -13725,7 +13728,8 @@ function useSelectState(params) {
     selectedOptions,
     closeMenuOnSelect,
     setIsOpen,
-    getValueLabel
+    getValueLabel,
+    isSearchInDropdown
   ]);
   const handleInputChange = React48.useCallback(
     (event) => {
@@ -13734,14 +13738,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();
@@ -13751,10 +13759,10 @@ function useSelectState(params) {
     (event) => {
       if (containerRef.current?.contains(event.relatedTarget)) return;
       setIsFocused(false);
-      if (!isMulti) setInputValue(valueLabel);
+      if (!isSearchOnlyInput) setInputValue(valueLabel);
       onBlur?.(event);
     },
-    [containerRef, isMulti, valueLabel, onBlur]
+    [containerRef, isSearchOnlyInput, valueLabel, onBlur]
   );
   const handleInputKeyDown = React48.useCallback(
     (event) => {
@@ -13808,7 +13816,7 @@ function useSelectState(params) {
       }
       if (event.key === "Escape") {
         event.preventDefault();
-        if (!isMulti) setInputValue(valueLabel);
+        if (!isSearchOnlyInput) setInputValue(valueLabel);
         setIsOpen(false);
         inputRef.current?.blur();
       }
@@ -13816,6 +13824,7 @@ function useSelectState(params) {
     [
       onKeyDown,
       isMulti,
+      isSearchOnlyInput,
       inputValue,
       selectedOptions,
       onSelectionChange,
@@ -14153,12 +14162,28 @@ function mergeComponents(overrides) {
   };
 }
 
+// src/dashboard/select/useSetCorrectOptionIfThereIsOnlyValue.ts
+var import_react89 = require("react");
+function useSetCorrectOptionIfThereIsOnlyValue({ value, options, onChange, enabled = true }) {
+  (0, import_react89.useEffect)(() => {
+    if (!enabled || !value || !onChange || !options?.length) return;
+    if (value.value === void 0 || value.value === null) return;
+    if (value.label !== "NONE" && value.label !== "") return;
+    const validOption = flattenGroupedOptions(options).find(
+      (option) => option.value === value.value
+    );
+    if (!validOption) return;
+    onChange({ ...validOption, isPrefilled: true }, { action: "select" });
+  }, [enabled, onChange, options, value]);
+}
+
 // src/dashboard/select/Select.tsx
 var import_jsx_runtime158 = require("react/jsx-runtime");
 function SelectInternal(props, ref) {
   const {
     options = [],
     onBlur,
+    onFocus,
     label,
     topLabel,
     placeholder,
@@ -14213,6 +14238,12 @@ function SelectInternal(props, ref) {
     return props.defaultValue ?? null;
   });
   const currentValue = isControlled ? props.value : internalValue;
+  useSetCorrectOptionIfThereIsOnlyValue({
+    enabled: !isMulti,
+    value: !isMulti ? props.value : void 0,
+    options,
+    onChange: !isMulti ? props.onChange : void 0
+  });
   const selectedOptions = React49.useMemo(() => {
     if (isMulti) return currentValue ?? [];
     return currentValue ? [currentValue] : [];
@@ -14254,6 +14285,7 @@ function SelectInternal(props, ref) {
     closeMenuOnSelect,
     openMenuOnFocus,
     onKeyDown,
+    onFocus,
     onBlur,
     isSearchInDropdown
   });
@@ -14480,6 +14512,7 @@ var PhoneInput = React50.forwardRef(
     options,
     value,
     onChange,
+    onFocus,
     onBlur,
     name,
     codeName,
@@ -14619,6 +14652,7 @@ var PhoneInput = React50.forwardRef(
                 tooltip,
                 "aria-label": resolvedLabel || name,
                 onChange: handleNumberChange,
+                onFocus,
                 onBlur,
                 renderErrorMessage: false,
                 wrapperClassName: "!max-w-none"
@@ -16208,6 +16242,9 @@ var Datepicker = React62.forwardRef(
     value,
     defaultValue,
     onChange,
+    onFocus,
+    onFieldFocus,
+    onFieldBlur,
     name,
     invalid,
     error,
@@ -16271,9 +16308,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(() => {
@@ -16334,6 +16392,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;
@@ -16521,6 +16580,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)]",
@@ -16563,8 +16623,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
                     }
@@ -16591,7 +16658,9 @@ var Datepicker = React62.forwardRef(
                         disabled: isBlocked,
                         readOnly,
                         onChange: handleMonthInputChange,
-                        onFocus: () => {
+                        onFocus: (event) => {
+                          onFocus?.(event);
+                          onFieldFocus?.("month");
                           setFocusedField("month");
                           if (!isBlocked && !readOnly) {
                             setIsMonthOpen(true);
@@ -16599,6 +16668,7 @@ var Datepicker = React62.forwardRef(
                           }
                         },
                         onBlur: () => {
+                          onFieldBlur?.("month");
                           setFocusedField(null);
                           commitMonthInput();
                         },
@@ -16646,8 +16716,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
                     }
@@ -17177,6 +17254,7 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
   value: externalValue,
   defaultValue,
   onChange,
+  onFocus,
   onBlur,
   name,
   invalid,
@@ -17372,11 +17450,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);
               },
@@ -17630,6 +17710,7 @@ var FileInput = React69.forwardRef(function FileInput2({
   label,
   value,
   onChange,
+  onFocus,
   onDownload = defaultDownload,
   name = "file",
   placeholder,
@@ -17703,6 +17784,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
@@ -17803,6 +17885,7 @@ var SelectIconsBox = React70.forwardRef(
     isOpen: controlledOpen,
     defaultOpen = false,
     onOpenChange,
+    onFocus,
     position = "left",
     className,
     boxClassName
@@ -17830,6 +17913,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
@@ -17962,11 +18046,11 @@ function toastResponseError(error, options = {}) {
 }
 
 // src/legacy-fields/textarea/Textarea.tsx
-var import_react89 = require("react");
+var import_react90 = require("react");
 var import_jsx_runtime182 = require("react/jsx-runtime");
-var LegacyTextarea = (0, import_react89.forwardRef)(
+var LegacyTextarea = (0, import_react90.forwardRef)(
   ({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
-    const inputId = (0, import_react89.useId)();
+    const inputId = (0, import_react90.useId)();
     return /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("div", { className: cn("relative", className), children: [
       /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
         "textarea",
@@ -19786,7 +19870,7 @@ AirbnbPhoneField.displayName = "AirbnbPhoneField";
 var React80 = __toESM(require("react"), 1);
 var import_lucide_react57 = require("lucide-react");
 var import_react_virtual3 = require("@tanstack/react-virtual");
-var import_react90 = require("react");
+var import_react91 = require("react");
 var import_jsx_runtime193 = require("react/jsx-runtime");
 var ROW_HEIGHT = 48;
 var DESKTOP_LIST_HEIGHT = 280;
@@ -19864,7 +19948,7 @@ var AirbnbSearchableSelectInternal = ({
     isDisabled: !open || isMobile3
   });
   const handleOnOpenChange = useEvent(onOpenChange);
-  const setSelectOpen = (0, import_react90.useCallback)(
+  const setSelectOpen = (0, import_react91.useCallback)(
     (nextOpen, options2) => {
       setOpen(nextOpen);
       handleOnOpenChange?.(nextOpen);