@chekinapp/ui 0.0.138 → 0.0.140

package/dist/index.cjs

@@ -13338,8 +13338,8 @@ function ComboboxTrigger({
                 "span",
                 {
                   className: cn(
-                    "grid min-w-0 max-w-full w-min flex-none",
-                    isMulti && "min-w-[40px]",
+                    "grid min-w-0 max-w-full",
+                    isMulti ? "w-min flex-none min-w-[40px]" : "w-full overflow-hidden",
                     !searchable && "sr-only"
                   ),
                   children: [
@@ -13371,7 +13371,7 @@ function ComboboxTrigger({
                         "aria-activedescendant": activeOptionId,
                         className: cn(
                           "col-start-1 row-start-1 m-0 box-border w-full min-w-0 border-0 bg-transparent p-0 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]",
-                          isMulti && "min-w-[40px]",
+                          isMulti ? "min-w-[40px]" : "text-ellipsis",
                           readOnly && !disabled && !loading && "cursor-default",
                           disabled && !loading && "cursor-not-allowed",
                           loading && "!cursor-progress",
@@ -13527,6 +13527,7 @@ function useSelectState(params) {
     onKeyDown,
     onFocus,
     onBlur,
+    inputValue: controlledInputValue,
     onInputChange,
     isSearchInDropdown,
     searchable = true
@@ -13544,9 +13545,17 @@ function useSelectState(params) {
     [singleSelected, getValueLabel]
   );
   const isSearchOnlyInput = searchable && (isMulti || Boolean(isSearchInDropdown));
-  const [inputValue, setInputValue] = React48.useState(
+  const isInputControlled = controlledInputValue !== void 0;
+  const [internalInputValue, setInternalInputValue] = React48.useState(
     searchable && !isSearchOnlyInput ? valueLabel : ""
   );
+  const inputValue = isInputControlled ? controlledInputValue : internalInputValue;
+  const setInputValue = React48.useCallback(
+    (next) => {
+      if (!isInputControlled) setInternalInputValue(next);
+    },
+    [isInputControlled]
+  );
   const hasValue = selectedOptions.length > 0;
   const isBlocked = Boolean(disabled) || Boolean(loading) || Boolean(readOnly);
   const hasInvalidState = Boolean(error);
@@ -13713,7 +13722,7 @@ function useSelectState(params) {
       onInputChange?.(nextValue);
       if (!isOpen) setIsOpen(true);
     },
-    [isOpen, onInputChange, searchable, setIsOpen]
+    [isOpen, onInputChange, searchable, setIsOpen, setInputValue]
   );
   const handleInputFocus = React48.useCallback(
     (event) => {
@@ -14241,6 +14250,7 @@ function SelectInternal(props, ref) {
     hideIndicator,
     openMenuOnFocus,
     components: userComponents,
+    inputValue,
     onInputChange,
     searchable = true,
     searchPosition = "trigger",
@@ -14310,6 +14320,7 @@ function SelectInternal(props, ref) {
     onKeyDown,
     onFocus,
     onBlur,
+    inputValue,
     onInputChange,
     isSearchInDropdown,
     searchable
@@ -14534,189 +14545,228 @@ function formatPhoneCodeOptionLabel(option) {
 // src/dashboard/phone-input/PhoneInput.tsx
 var import_jsx_runtime158 = require("react/jsx-runtime");
 var EMPTY_VALUE = { code: "", number: "" };
-var PhoneInput = React50.forwardRef(function PhoneInput2({
-  options,
-  value,
-  onChange,
-  onFocus,
-  onBlur,
-  name,
-  codeName,
-  numberName,
-  label,
-  topLabel,
-  prefixLabel,
-  placeholder,
-  codePlaceholder = "+00",
-  disabled,
-  loading,
-  readOnly,
-  codeReadOnly,
-  optional,
-  tooltip,
-  error,
-  invalid,
-  className,
-  autoDetectCode = true,
-  searchable = true,
-  defaultCode
-}, ref) {
-  const { t } = (0, import_react_i18next33.useTranslation)();
-  const groupLabelId = React50.useId();
-  const errorMsgId = React50.useId();
-  const numberInputRef = React50.useRef(null);
-  const safeValue = value ?? EMPTY_VALUE;
-  const effectiveCode = safeValue.code || defaultCode || "";
-  const resolvedLabel = label ?? "";
-  const hasExternalError = Boolean(error);
-  const isPrefixRequired = autoDetectCode && Boolean(safeValue.number) && !effectiveCode;
-  const hasInvalidState = hasExternalError || Boolean(invalid) || isPrefixRequired;
-  const errorMessage = error ?? (isPrefixRequired ? t("prefix_required") : void 0);
-  const combinedValue = effectiveCode || safeValue.number ? `${effectiveCode}${safeValue.number}` : "";
-  const codeOptions = React50.useMemo(
-    () => options.map((option) => ({
-      value: option.value,
-      label: formatPhoneCodeOptionLabel(option),
-      data: option.data,
-      isDisabled: option.disabled
-    })),
-    [options]
-  );
-  const selectedCodeOption = React50.useMemo(
-    () => codeOptions.find((option) => option.value === effectiveCode) ?? null,
-    [codeOptions, effectiveCode]
-  );
-  const parsePhoneValue = React50.useMemo(
-    () => parsePhoneValueWithOptions(options),
-    [options]
-  );
-  const emitChange = (next) => {
-    onChange?.(next, name);
-  };
-  const handleCodeChange = (option) => {
-    if (!option) return;
-    emitChange({ code: option.value, number: safeValue.number });
-    if (!disabled && !readOnly) {
-      setTimeout(() => numberInputRef.current?.focus(), 0);
-    }
-  };
-  const handleNumberChange = (event) => {
-    if (readOnly || disabled) return;
-    const rawValue = event.target.value;
-    if (!autoDetectCode) {
-      emitChange({ code: effectiveCode, number: clearPhoneNumber(rawValue) });
-      return;
-    }
-    const parsed = parsePhoneValue(rawValue);
-    const cleanedNumber = clearPhoneNumber(parsed.number);
-    if (parsed.code) {
-      emitChange({ code: parsed.code, number: cleanedNumber });
-      return;
-    }
-    emitChange({ code: effectiveCode, number: cleanedNumber });
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
-    "div",
-    {
-      className: cn(
-        "relative w-[var(--field-width,100%)] max-w-[var(--field-max-width,296px)]",
-        disabled && "cursor-not-allowed opacity-50",
-        loading && "cursor-progress",
-        className
-      ),
-      children: [
-        name && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("input", { type: "hidden", name, value: combinedValue, disabled }),
-        codeName && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("input", { type: "hidden", name: codeName, value: effectiveCode, disabled }),
-        numberName && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
-          "input",
-          {
-            type: "hidden",
-            name: numberName,
-            value: safeValue.number,
-            disabled
-          }
-        ),
-        topLabel && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
-          "span",
-          {
-            id: groupLabelId,
-            className: "mb-2 block text-[14px] font-medium text-[var(--chekin-color-brand-navy)]",
-            children: topLabel
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
-          "div",
-          {
-            role: "group",
-            "aria-labelledby": topLabel ? groupLabelId : void 0,
-            className: "grid grid-cols-[96px_minmax(0,1fr)] gap-2",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
-                Select,
-                {
-                  ref,
-                  options: codeOptions,
-                  value: selectedCodeOption,
-                  onChange: handleCodeChange,
-                  label: prefixLabel,
-                  placeholder: codePlaceholder,
-                  disabled,
-                  readOnly: Boolean(readOnly) || Boolean(codeReadOnly),
-                  loading,
-                  invalid: hasInvalidState,
-                  hideErrorMessage: true,
-                  searchPosition: searchable ? "dropdown" : "trigger",
-                  searchable,
-                  filterOption: countriesFilter,
-                  clearable: false,
-                  getValueLabel: (option) => option.value,
-                  className: "max-w-none w-auto",
-                  dropdownClassName: "right-auto w-[280px]"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
-                Input,
-                {
-                  ref: numberInputRef,
-                  type: "tel",
-                  inputMode: "tel",
-                  autoComplete: "tel-national",
-                  label: resolvedLabel,
-                  value: safeValue.number,
-                  placeholder,
-                  disabled,
-                  readOnly,
-                  loading,
-                  invalid: hasInvalidState,
-                  tooltip,
-                  "aria-label": resolvedLabel || name,
-                  "aria-describedby": errorMessage ? errorMsgId : void 0,
-                  onChange: handleNumberChange,
-                  onFocus,
-                  onBlur,
-                  renderErrorMessage: false,
-                  wrapperClassName: "max-w-none w-auto",
-                  contentClassName: readOnly ? "!cursor-default" : void 0,
-                  inputClassName: readOnly ? "!cursor-default" : void 0
-                }
-              )
-            ]
-          }
+var PhoneInput = React50.forwardRef(
+  function PhoneInput2({
+    options,
+    value,
+    onChange,
+    onFocus,
+    onBlur,
+    name,
+    codeName,
+    numberName,
+    label,
+    topLabel,
+    prefixLabel,
+    placeholder,
+    codePlaceholder = "+00",
+    disabled,
+    loading,
+    readOnly,
+    codeReadOnly,
+    optional,
+    tooltip,
+    error,
+    invalid,
+    className,
+    autoDetectCode = true,
+    searchable = true,
+    defaultCode
+  }, ref) {
+    const { t } = (0, import_react_i18next33.useTranslation)();
+    const groupLabelId = React50.useId();
+    const errorMsgId = React50.useId();
+    const numberInputRef = React50.useRef(null);
+    const [codeSearchValue, setCodeSearchValue] = React50.useState("");
+    const safeValue = value ?? EMPTY_VALUE;
+    const effectiveCode = safeValue.code || defaultCode || "";
+    const resolvedLabel = label ?? "";
+    const hasExternalError = Boolean(error);
+    const isPrefixRequired = autoDetectCode && Boolean(safeValue.number) && !effectiveCode;
+    const hasInvalidState = hasExternalError || Boolean(invalid) || isPrefixRequired;
+    const errorMessage = error ?? (isPrefixRequired ? t("prefix_required") : void 0);
+    const combinedValue = effectiveCode || safeValue.number ? `${effectiveCode}${safeValue.number}` : "";
+    const codeOptions = React50.useMemo(
+      () => options.map((option) => ({
+        value: option.value,
+        label: formatPhoneCodeOptionLabel(option),
+        data: option.data,
+        isDisabled: option.disabled
+      })),
+      [options]
+    );
+    const selectedCodeOption = React50.useMemo(
+      () => codeOptions.find((option) => option.value === effectiveCode) ?? null,
+      [codeOptions, effectiveCode]
+    );
+    const parsePhoneValue = React50.useMemo(
+      () => parsePhoneValueWithOptions(options),
+      [options]
+    );
+    const emitChange = (next) => {
+      onChange?.(next, name);
+    };
+    const handleCodeChange = (option) => {
+      if (!option) return;
+      emitChange({ code: option.value, number: safeValue.number });
+      if (!disabled && !readOnly) {
+        setTimeout(() => numberInputRef.current?.focus(), 0);
+      }
+    };
+    const handleNumberChange = (event) => {
+      if (readOnly || disabled) return;
+      const rawValue = event.target.value;
+      if (!autoDetectCode) {
+        emitChange({ code: effectiveCode, number: clearPhoneNumber(rawValue) });
+        return;
+      }
+      const parsed = parsePhoneValue(rawValue);
+      const cleanedNumber = clearPhoneNumber(parsed.number);
+      if (parsed.code) {
+        emitChange({ code: parsed.code, number: cleanedNumber });
+        return;
+      }
+      emitChange({ code: effectiveCode, number: cleanedNumber });
+    };
+    const effectiveCodeRef = React50.useRef(effectiveCode);
+    const numberValueRef = React50.useRef(safeValue.number);
+    const codeSearchValueRef = React50.useRef(codeSearchValue);
+    const onChangeRef = React50.useRef(onChange);
+    const nameRef = React50.useRef(name);
+    effectiveCodeRef.current = effectiveCode;
+    numberValueRef.current = safeValue.number;
+    codeSearchValueRef.current = codeSearchValue;
+    onChangeRef.current = onChange;
+    nameRef.current = name;
+    React50.useImperativeHandle(
+      ref,
+      () => ({
+        getCodeSearchValue: () => codeSearchValueRef.current,
+        setCodeSearchValue: (next) => setCodeSearchValue(next),
+        getNumberValue: () => numberValueRef.current,
+        setNumberValue: (next) => {
+          const cleanedNumber = clearPhoneNumber(next);
+          onChangeRef.current?.(
+            { code: effectiveCodeRef.current, number: cleanedNumber },
+            nameRef.current
+          );
+        },
+        focus: () => numberInputRef.current?.focus()
+      }),
+      []
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
+      "div",
+      {
+        className: cn(
+          "relative w-[var(--field-width,100%)] max-w-[var(--field-max-width,296px)]",
+          disabled && "cursor-not-allowed opacity-50",
+          loading && "cursor-progress",
+          className
         ),
-        !errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
-        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
-          FieldErrorMessage,
-          {
-            id: errorMsgId,
-            message: errorMessage,
-            "data-testid": name ? `${name}-error` : void 0,
-            className: "mt-[1px] text-[14px]"
-          }
-        )
-      ]
-    }
-  );
-});
+        children: [
+          name && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("input", { type: "hidden", name, value: combinedValue, disabled }),
+          codeName && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+            "input",
+            {
+              type: "hidden",
+              name: codeName,
+              value: effectiveCode,
+              disabled
+            }
+          ),
+          numberName && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+            "input",
+            {
+              type: "hidden",
+              name: numberName,
+              value: safeValue.number,
+              disabled
+            }
+          ),
+          topLabel && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+            "span",
+            {
+              id: groupLabelId,
+              className: "mb-2 block text-[14px] font-medium text-[var(--chekin-color-brand-navy)]",
+              children: topLabel
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
+            "div",
+            {
+              role: "group",
+              "aria-labelledby": topLabel ? groupLabelId : void 0,
+              className: "grid grid-cols-[96px_minmax(0,1fr)] gap-2",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+                  Select,
+                  {
+                    options: codeOptions,
+                    value: selectedCodeOption,
+                    onChange: handleCodeChange,
+                    label: prefixLabel,
+                    placeholder: codePlaceholder,
+                    disabled,
+                    readOnly: Boolean(readOnly) || Boolean(codeReadOnly),
+                    loading,
+                    invalid: hasInvalidState,
+                    hideErrorMessage: true,
+                    searchPosition: searchable ? "dropdown" : "trigger",
+                    searchable,
+                    filterOption: countriesFilter,
+                    clearable: false,
+                    getValueLabel: (option) => option.value,
+                    className: "max-w-none w-auto",
+                    dropdownClassName: "right-auto w-[280px]",
+                    inputValue: searchable ? codeSearchValue : void 0,
+                    onInputChange: setCodeSearchValue
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+                  Input,
+                  {
+                    ref: numberInputRef,
+                    type: "tel",
+                    inputMode: "tel",
+                    autoComplete: "tel-national",
+                    label: resolvedLabel,
+                    value: safeValue.number,
+                    placeholder,
+                    disabled,
+                    readOnly,
+                    loading,
+                    invalid: hasInvalidState,
+                    tooltip,
+                    "aria-label": resolvedLabel || name,
+                    "aria-describedby": errorMessage ? errorMsgId : void 0,
+                    onChange: handleNumberChange,
+                    onFocus,
+                    onBlur,
+                    renderErrorMessage: false,
+                    wrapperClassName: "max-w-none w-auto",
+                    contentClassName: readOnly ? "!cursor-default" : void 0,
+                    inputClassName: readOnly ? "!cursor-default" : void 0
+                  }
+                )
+              ]
+            }
+          ),
+          !errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
+          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+            FieldErrorMessage,
+            {
+              id: errorMsgId,
+              message: errorMessage,
+              "data-testid": name ? `${name}-error` : void 0,
+              className: "mt-[1px] text-[14px]"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 PhoneInput.displayName = "PhoneInput";
 
 // src/dashboard/creatable-select/CreatableSelect.tsx