@bigbinary/neeto-atoms 1.0.104 → 1.0.105

package/dist/{Select-N5Ten-tn.js → Select-ZWR0HFCa.js}

@@ -1,9 +1,9 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default, { useState, useRef, useEffect, useCallback, useMemo, useId, forwardRef } from 'react';
 import { b as buildTestIdPrefix, a as buildAriaDescribedBy } from './fieldIds-VpluAAMl.js';
-import { S as SelectFieldWrapper } from './SelectFieldWrapper-D98IWsW5.js';
+import { S as SelectFieldWrapper } from './SelectFieldWrapper-D370CD4o.js';
 import { c as cn } from './utils-BJnb9o5c.js';
-import { i as ComboboxItem, k as ComboboxList, f as ComboboxEmpty, d as ComboboxCollection, g as ComboboxGroup, j as ComboboxLabel, o as ComboboxTrigger, C as Combobox, b as ComboboxChips, c as ComboboxChipsInput, m as ComboboxTrigger$1, e as ComboboxContent, a as ComboboxChip } from './Combobox-DriZMj4f.js';
+import { i as ComboboxItem, k as ComboboxList, f as ComboboxEmpty, d as ComboboxCollection, g as ComboboxGroup, j as ComboboxLabel, o as ComboboxTrigger, C as Combobox, b as ComboboxChips, c as ComboboxChipsInput, m as ComboboxTrigger$1, e as ComboboxContent, h as ComboboxInput, a as ComboboxChip } from './Combobox-NgubHftk.js';
 import { Spinner } from './primitives/Spinner.js';
 import { X } from './x-_o2T3n6D.js';
 import { C as ChevronDown } from './chevron-down-BNi0ntys.js';
@@ -104,6 +104,28 @@ function useLazyLoadSentinel({
   return sentinelRef;
 }
 
+const INPUT_CHANGE_REASON = "input-change";
+const SIZE_CONFIG = {
+  small: {
+    chips: "min-h-8 md:min-h-7 text-base md:text-xs gap-0.5 px-1 py-0.5",
+    input: "text-base md:text-xs",
+    chip: "h-4.5 text-[0.6875rem] px-1",
+    icon: "size-3.5"
+  },
+  medium: {
+    chips: "min-h-8 text-base md:text-sm gap-1 px-2.5 py-1",
+    input: "text-base md:text-sm",
+    chip: "h-5.25 text-xs px-1.5",
+    icon: "size-4"
+  },
+  large: {
+    chips: "min-h-10 text-base md:text-sm gap-1 px-2.5 py-1.5",
+    input: "text-base md:text-sm",
+    chip: "h-6 text-xs px-2",
+    icon: "size-5"
+  }
+};
+
 const CREATE_PREFIX = "__create__:";
 const isCreateValue = (val) => typeof val === "string" && val.startsWith(CREATE_PREFIX);
 function useCreatableItems({
@@ -119,9 +141,11 @@ function useCreatableItems({
 }) {
   const [inputValue, setInputValue] = useState("");
   const handleInputValueChange = useCallback(
-    (value) => {
-      setInputValue(value);
-      onAsyncInputChange?.(value);
+    (value, details) => {
+      const isTyping = details?.reason === INPUT_CHANGE_REASON;
+      const nextValue = isTyping ? value : "";
+      setInputValue(nextValue);
+      if (isTyping) onAsyncInputChange?.(nextValue);
     },
     [onAsyncInputChange]
   );
@@ -180,6 +204,13 @@ function isOptionGroup(opt) {
   return "options" in opt && Array.isArray(opt.options);
 }
 
+function assignRef(ref, element) {
+  if (typeof ref === "function") {
+    ref(element);
+  } else if (ref) {
+    ref.current = element;
+  }
+}
 function normalizeOption(option, getValue, getLabel) {
   if (!getValue && !getLabel) return option;
   return {
@@ -215,6 +246,16 @@ function toBaseUiItems(options) {
   }
   return options.map((o) => o.value);
 }
+function resolveIsSearchable({
+  isSearchable,
+  searchThreshold,
+  optionCount,
+  isCountKnown
+}) {
+  if (!isSearchable) return false;
+  if (searchThreshold === void 0 || !isCountKnown) return true;
+  return optionCount >= searchThreshold;
+}
 function computeEffectiveItems(children, baseUiItems, showCreateOption, isGrouped, trimmedInput) {
   if (children) return void 0;
   const createValue = showCreateOption ? `${CREATE_PREFIX}${trimmedInput}` : null;
@@ -262,27 +303,6 @@ function useMultiSelectOptions(props) {
   };
 }
 
-const SIZE_CONFIG = {
-  small: {
-    chips: "min-h-8 md:min-h-7 text-base md:text-xs gap-0.5 px-1 py-0.5",
-    input: "text-base md:text-xs",
-    chip: "h-4.5 text-[0.6875rem] px-1",
-    icon: "size-3.5"
-  },
-  medium: {
-    chips: "min-h-8 text-base md:text-sm gap-1 px-2.5 py-1",
-    input: "text-base md:text-sm",
-    chip: "h-5.25 text-xs px-1.5",
-    icon: "size-4"
-  },
-  large: {
-    chips: "min-h-10 text-base md:text-sm gap-1 px-2.5 py-1.5",
-    input: "text-base md:text-sm",
-    chip: "h-6 text-xs px-2",
-    icon: "size-5"
-  }
-};
-
 const defaultFormatCreateLabel$1 = (v) => `Create "${v}"`;
 function useSelectState(props) {
   const {
@@ -303,7 +323,11 @@ function useSelectState(props) {
     isClearable = false,
     isDisabled = false,
     required = false,
-    isSearchable = true,
+    isSearchable: isSearchableProp = true,
+    searchPosition = "trigger",
+    searchPlaceholder = "Search...",
+    searchThreshold,
+    isAsyncLoadOptionEnabled = false,
     autoHighlight = true,
     onOpenChange,
     children
@@ -313,6 +337,7 @@ function useSelectState(props) {
   const id = idProp ?? generatedId;
   const errorId = `error_${id}`;
   const helpTextId = `helpText_${id}`;
+  const labelId = `label_${id}`;
   const sizeConfig = SIZE_CONFIG[size];
   const isControlled = valueProp !== void 0;
   const [internalValue, setInternalValue] = useState(
@@ -342,9 +367,11 @@ function useSelectState(props) {
   const [inputValue, setInputValueState] = useState("");
   const trimmedInput = inputValue.trim();
   const combinedHandleInputValueChange = useCallback(
-    (value) => {
-      setInputValueState(value);
-      if (opt.isAsync) opt.handleAsyncInputChange(value);
+    (value, details) => {
+      const isTyping = details?.reason === INPUT_CHANGE_REASON;
+      const nextValue = isTyping ? value : "";
+      setInputValueState(nextValue);
+      if (isTyping && opt.isAsync) opt.handleAsyncInputChange(nextValue);
     },
     [opt.isAsync, opt.handleAsyncInputChange]
   );
@@ -394,6 +421,12 @@ function useSelectState(props) {
   );
   const testIdPrefix = buildTestIdPrefix(dataTestId, label);
   const showClearButton = isClearable && !!currentValue && !isDisabled;
+  const isSearchable = resolveIsSearchable({
+    isSearchable: isSearchableProp,
+    searchThreshold,
+    optionCount: opt.flatOptions.length,
+    isCountKnown: !opt.isAsync && !isCreatable && !isAsyncLoadOptionEnabled
+  });
   const flatOptionsMap = useMemo(
     () => new Map(opt.flatOptions.map((o) => [o.value, o])),
     [opt.flatOptions]
@@ -432,6 +465,7 @@ function useSelectState(props) {
     id,
     errorId,
     helpTextId,
+    labelId,
     sizeConfig,
     isControlled,
     currentValue,
@@ -454,6 +488,9 @@ function useSelectState(props) {
     isDisabled,
     required,
     isSearchable,
+    searchPosition,
+    searchPlaceholder,
+    inputValue,
     autoHighlight,
     onOpenChange,
     isClearable
@@ -476,6 +513,11 @@ function useMultiSelectState(props) {
     onCreateOption,
     formatCreateLabel = defaultFormatCreateLabel,
     formatOptionLabel,
+    isSearchable: isSearchableProp = true,
+    searchPosition = "trigger",
+    searchPlaceholder = "Search...",
+    searchThreshold,
+    isAsyncLoadOptionEnabled = false,
     children
   } = props;
   const opt = useMultiSelectOptions(props);
@@ -483,7 +525,14 @@ function useMultiSelectState(props) {
   const id = idProp ?? generatedId;
   const errorId = `error_${id}`;
   const helpTextId = `helpText_${id}`;
+  const labelId = `label_${id}`;
   const sizeConfig = SIZE_CONFIG[size];
+  const isSearchable = resolveIsSearchable({
+    isSearchable: isSearchableProp,
+    searchThreshold,
+    optionCount: opt.flatOptions.length,
+    isCountKnown: !opt.isAsync && !isCreatable && !isAsyncLoadOptionEnabled
+  });
   const isControlled = valueProp !== void 0;
   const [internalValue, setInternalValue] = useState(
     defaultValue ?? []
@@ -548,9 +597,13 @@ function useMultiSelectState(props) {
     id,
     errorId,
     helpTextId,
+    labelId,
     sizeConfig,
     isControlled,
     selectedValues,
+    isSearchable,
+    searchPosition,
+    searchPlaceholder,
     effectiveItems,
     creatableFilter,
     handleInputValueChange,
@@ -651,9 +704,12 @@ function MultiSelectDropdown({
   );
 }
 
+const omitUndefined = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
 const SelectAnchor = forwardRef(
-  ({ isSearchable, className, dataTestId, children }, ref) => {
-    if (isSearchable) {
+  ({ renderAsTrigger, className, dataTestId, triggerFieldProps, children }, ref) => {
+    if (!renderAsTrigger) {
       return /* @__PURE__ */ jsx(
         "div",
         {
@@ -664,15 +720,21 @@ const SelectAnchor = forwardRef(
         }
       );
     }
+    const { id, ...ariaProps } = triggerFieldProps ?? {};
     return /* @__PURE__ */ jsx(
       ComboboxTrigger,
       {
         nativeButton: false,
-        render: (props) => /* @__PURE__ */ jsx(
+        ...id ? { id } : {},
+        render: ({ ref: baseUiRef, ...props }) => /* @__PURE__ */ jsx(
           "div",
           {
             ...props,
-            ref,
+            ...omitUndefined(ariaProps),
+            ref: (element) => {
+              assignRef(baseUiRef, element);
+              assignRef(ref, element);
+            },
             className,
             ...dataTestId ? { "data-testid": dataTestId } : {}
           }
@@ -688,11 +750,15 @@ const SelectCombobox = forwardRef(
   ({
     name,
     id,
+    labelId,
     effectiveItems,
     labelForValue,
     renderOption,
     renderTrigger,
     isSearchable,
+    searchPosition,
+    searchPlaceholder,
+    inputValue,
     isAsync,
     isCreatable,
     creatableFilter,
@@ -716,6 +782,20 @@ const SelectCombobox = forwardRef(
     children
   }, ref) => {
     const [anchorEl, setAnchorEl] = useState(null);
+    const isContentSearch = isSearchable && searchPosition === "content";
+    const renderTriggerInput = searchPosition !== "content";
+    const isTriggerSearch = isSearchable && renderTriggerInput;
+    const useTriggerAnchor = !isTriggerSearch;
+    const showValue = !!currentValue && (!isTriggerSearch || inputValue === "");
+    const showPlaceholder = !currentValue && !isTriggerSearch;
+    const setTriggerEl = useCallback(
+      (element) => {
+        setAnchorEl(element);
+        if (renderTriggerInput) return;
+        assignRef(ref, element);
+      },
+      [ref, renderTriggerInput]
+    );
     const handleClearClick = useCallback(
       (event) => {
         event.stopPropagation();
@@ -737,7 +817,8 @@ const SelectCombobox = forwardRef(
           } : {},
           value: currentValue,
           onValueChange: handleValueChange,
-          ...isCreatable || isAsync ? { onInputValueChange: handleInputValueChange } : {},
+          inputValue,
+          onInputValueChange: handleInputValueChange,
           onOpenChange,
           disabled: isDisabled,
           autoHighlight,
@@ -745,10 +826,17 @@ const SelectCombobox = forwardRef(
             /* @__PURE__ */ jsx(
               SelectAnchor,
               {
-                ref: setAnchorEl,
-                isSearchable,
+                ref: setTriggerEl,
                 dataTestId: testIdPrefix,
-                className: !isSearchable ? "cursor-pointer" : void 0,
+                renderAsTrigger: useTriggerAnchor,
+                className: useTriggerAnchor ? "cursor-pointer" : void 0,
+                triggerFieldProps: renderTriggerInput ? void 0 : {
+                  id,
+                  "aria-labelledby": labelId,
+                  "aria-describedby": ariaDescribedBy,
+                  "aria-required": required || void 0,
+                  "aria-invalid": !!error || void 0
+                },
                 children: /* @__PURE__ */ jsxs(
                   ComboboxChips,
                   {
@@ -759,24 +847,28 @@ const SelectCombobox = forwardRef(
                     ),
                     ...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-container` } : {},
                     children: [
-                      !isSearchable && (currentValue ? /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: renderTrigger(currentValue) }) : /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-muted-foreground", children: placeholder })),
-                      /* @__PURE__ */ jsx(
-                        ComboboxChipsInput,
-                        {
-                          ref,
-                          id,
-                          placeholder: isSearchable && !currentValue ? placeholder : void 0,
-                          "aria-invalid": !!error || void 0,
-                          "aria-describedby": ariaDescribedBy,
-                          "aria-required": required || void 0,
-                          className: cn(
-                            sizeConfig.input,
-                            !isSearchable && "w-0 min-w-0 overflow-hidden p-0 opacity-0"
-                          ),
-                          disabled: isDisabled,
-                          ...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-input` } : {}
-                        }
-                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 flex-1 items-center [&>*]:col-start-1 [&>*]:row-start-1", children: [
+                        showValue && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: renderTrigger(currentValue) }),
+                        showPlaceholder && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-muted-foreground", children: placeholder }),
+                        renderTriggerInput && /* @__PURE__ */ jsx(
+                          ComboboxChipsInput,
+                          {
+                            ref,
+                            id,
+                            placeholder: isTriggerSearch && !currentValue ? placeholder : void 0,
+                            "aria-invalid": !!error || void 0,
+                            "aria-describedby": ariaDescribedBy,
+                            "aria-required": required || void 0,
+                            className: cn(
+                              sizeConfig.input,
+                              "w-full min-w-0",
+                              !isSearchable && "w-0 overflow-hidden p-0 opacity-0"
+                            ),
+                            disabled: isDisabled,
+                            ...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-input` } : {}
+                          }
+                        )
+                      ] }),
                       showClearButton && /* @__PURE__ */ jsx(
                         "button",
                         {
@@ -788,7 +880,7 @@ const SelectCombobox = forwardRef(
                           children: /* @__PURE__ */ jsx(X, { className: sizeConfig.icon })
                         }
                       ),
-                      isSearchable ? /* @__PURE__ */ jsx(
+                      isTriggerSearch ? /* @__PURE__ */ jsx(
                         ComboboxTrigger$1,
                         {
                           className: cn(
@@ -811,15 +903,26 @@ const SelectCombobox = forwardRef(
                 )
               }
             ),
-            /* @__PURE__ */ jsx(ComboboxContent, { anchor: anchorEl, ...contentProps, children: /* @__PURE__ */ jsx(
-              MultiSelectDropdown,
-              {
-                ...dropdownProps,
-                renderOption,
-                testIdPrefix,
-                children
-              }
-            ) })
+            /* @__PURE__ */ jsxs(ComboboxContent, { anchor: anchorEl, ...contentProps, children: [
+              isContentSearch && /* @__PURE__ */ jsx(
+                ComboboxInput,
+                {
+                  showTrigger: false,
+                  placeholder: searchPlaceholder,
+                  ...labelId ? { "aria-labelledby": labelId } : { "aria-label": searchPlaceholder },
+                  ...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-input` } : {}
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MultiSelectDropdown,
+                {
+                  ...dropdownProps,
+                  renderOption,
+                  testIdPrefix,
+                  children
+                }
+              )
+            ] })
           ]
         }
       )
@@ -832,10 +935,13 @@ const MultiSelectCombobox = forwardRef(
   ({
     name,
     id,
+    labelId,
     effectiveItems,
     labelForValue,
     renderOption,
     isSearchable,
+    searchPosition,
+    searchPlaceholder,
     isAsync,
     isCreatable,
     creatableFilter,
@@ -862,6 +968,18 @@ const MultiSelectCombobox = forwardRef(
     children
   }, ref) => {
     const [anchorEl, setAnchorEl] = useState(null);
+    const isContentSearch = isSearchable && searchPosition === "content";
+    const renderTriggerInput = searchPosition !== "content";
+    const isTriggerSearch = isSearchable && renderTriggerInput;
+    const useTriggerAnchor = !isTriggerSearch;
+    const setTriggerEl = useCallback(
+      (element) => {
+        setAnchorEl(element);
+        if (renderTriggerInput) return;
+        assignRef(ref, element);
+      },
+      [ref, renderTriggerInput]
+    );
     return (
       // @ts-expect-error — conditional spread creates a union that TS cannot narrow to the Combobox discriminated-union props
       /* @__PURE__ */ jsxs(
@@ -884,9 +1002,16 @@ const MultiSelectCombobox = forwardRef(
             /* @__PURE__ */ jsx(
               SelectAnchor,
               {
-                ref: setAnchorEl,
-                isSearchable,
-                className: !isSearchable ? "cursor-pointer" : void 0,
+                ref: setTriggerEl,
+                renderAsTrigger: useTriggerAnchor,
+                className: useTriggerAnchor ? "cursor-pointer" : void 0,
+                triggerFieldProps: renderTriggerInput ? void 0 : {
+                  id,
+                  "aria-labelledby": labelId,
+                  "aria-describedby": ariaDescribedBy,
+                  "aria-required": required || void 0,
+                  "aria-invalid": !!error || void 0
+                },
                 children: /* @__PURE__ */ jsxs(
                   ComboboxChips,
                   {
@@ -898,22 +1023,23 @@ const MultiSelectCombobox = forwardRef(
                     ),
                     ...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-container` } : {},
                     children: [
-                      selectedValues.map((val) => /* @__PURE__ */ jsx(
+                      selectedValues.map((val, index) => /* @__PURE__ */ jsx(
                         ComboboxChip,
                         {
                           className: sizeConfig.chip,
                           showRemove: !hideChipRemove,
+                          ...renderTriggerInput || isDisabled ? {} : { tabIndex: index === 0 ? 0 : -1 },
                           ...testIdPrefix ? { "data-testid": `${testIdPrefix}-chip` } : {},
                           children: renderOption(val)
                         },
                         val
                       )),
-                      /* @__PURE__ */ jsx(
+                      renderTriggerInput ? /* @__PURE__ */ jsx(
                         ComboboxChipsInput,
                         {
                           ref,
                           id,
-                          placeholder: isSearchable && selectedValues.length === 0 ? placeholder : void 0,
+                          placeholder: isTriggerSearch && selectedValues.length === 0 ? placeholder : void 0,
                           "aria-invalid": !!error || void 0,
                           "aria-describedby": ariaDescribedBy,
                           "aria-required": required || void 0,
@@ -924,21 +1050,44 @@ const MultiSelectCombobox = forwardRef(
                           disabled: isDisabled,
                           ...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-input` } : {}
                         }
-                      )
+                      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                        selectedValues.length === 0 && /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-muted-foreground", children: placeholder }),
+                        /* @__PURE__ */ jsx(
+                          ChevronDown,
+                          {
+                            "aria-hidden": true,
+                            className: cn(
+                              "pointer-events-none ms-auto shrink-0 text-muted-foreground",
+                              sizeConfig.icon
+                            )
+                          }
+                        )
+                      ] })
                     ]
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx(ComboboxContent, { anchor: anchorEl, ...contentProps, children: /* @__PURE__ */ jsx(
-              MultiSelectDropdown,
-              {
-                ...dropdownProps,
-                renderOption,
-                testIdPrefix,
-                children
-              }
-            ) })
+            /* @__PURE__ */ jsxs(ComboboxContent, { anchor: anchorEl, ...contentProps, children: [
+              isContentSearch && /* @__PURE__ */ jsx(
+                ComboboxInput,
+                {
+                  showTrigger: false,
+                  placeholder: searchPlaceholder,
+                  ...labelId ? { "aria-labelledby": labelId } : { "aria-label": searchPlaceholder },
+                  ...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-input` } : {}
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MultiSelectDropdown,
+                {
+                  ...dropdownProps,
+                  renderOption,
+                  testIdPrefix,
+                  children
+                }
+              )
+            ] })
           ]
         }
       )
@@ -956,6 +1105,7 @@ const SingleSelectInner = forwardRef(
       helpText,
       errorId,
       helpTextId,
+      labelId,
       isDisabled,
       required,
       testIdPrefix,
@@ -964,6 +1114,9 @@ const SingleSelectInner = forwardRef(
       renderOption,
       renderTrigger,
       isSearchable,
+      searchPosition,
+      searchPlaceholder,
+      inputValue,
       isAsync,
       creatableFilter,
       isControlled,
@@ -997,17 +1150,23 @@ const SingleSelectInner = forwardRef(
         testIdPrefix,
         labelProps: props.labelProps,
         className: props.className,
+        labelId,
+        focusTargetOnLabelClick: searchPosition === "content",
         children: /* @__PURE__ */ jsx(
           SelectCombobox,
           {
             ref,
             name: props.name,
             id,
+            labelId: label ? labelId : void 0,
             effectiveItems,
             labelForValue,
             renderOption,
             renderTrigger,
             isSearchable,
+            searchPosition,
+            searchPlaceholder,
+            inputValue,
             isAsync,
             isCreatable: props.isCreatable ?? false,
             creatableFilter,
@@ -1059,10 +1218,14 @@ const MultiSelectInner = forwardRef(
       helpText,
       errorId,
       helpTextId,
+      labelId,
       testIdPrefix,
       effectiveItems,
       labelForValue,
       renderOption,
+      isSearchable,
+      searchPosition,
+      searchPlaceholder,
       isAsync,
       creatableFilter,
       isControlled,
@@ -1094,16 +1257,21 @@ const MultiSelectInner = forwardRef(
         testIdPrefix,
         labelProps: props.labelProps,
         className: props.className,
+        labelId,
+        focusTargetOnLabelClick: searchPosition === "content",
         children: /* @__PURE__ */ jsx(
           MultiSelectCombobox,
           {
             ref,
             name: props.name,
             id,
+            labelId: label ? labelId : void 0,
             effectiveItems,
             labelForValue,
             renderOption,
-            isSearchable: props.isSearchable ?? true,
+            isSearchable,
+            searchPosition,
+            searchPlaceholder,
             isAsync,
             isCreatable: props.isCreatable ?? false,
             creatableFilter,
@@ -1190,4 +1358,4 @@ const Select = forwardRef((props, ref) => {
 Select.displayName = "Select";
 
 export { Select as S };
-//# sourceMappingURL=Select-N5Ten-tn.js.map
+//# sourceMappingURL=Select-ZWR0HFCa.js.map