@yamada-ui/select - npm Package Compare versions

Comparing version 1.8.6-dev-20241213204523 to 1.8.6-dev-20241213210300

dist/index.js

@@ -75,3 +75,3 @@ "use client"
     setFocusedIndex,
-    value,
+    value: selectedValue,
     optionProps,
@@ -84,13 +84,15 @@ onChange,
   const itemRef = (0, import_react.useRef)(null);
-  let {
-    id,
+  const {
+    id = uuid,
     children,
     closeOnSelect: customCloseOnSelect,
-    icon: customIcon,
     isDisabled,
+    disabled = isDisabled,
     isFocusable,
+    focusable = isFocusable,
+    icon: customIcon,
     value: optionValue,
     ...computedProps
   } = { ...optionProps, ...props };
-  const trulyDisabled = !!isDisabled && !isFocusable;
+  const trulyDisabled = !!disabled && !focusable;
   const { descendants, index, register } = useSelectDescendant({
@@ -102,22 +104,25 @@ disabled: trulyDisabled
   const hasPlaceholder = !!placeholder && placeholderInOptions;
-  const isPlaceholder = hasPlaceholder && index === 0;
-  const isMulti = (0, import_utils.isArray)(value);
-  const isDuplicated = !isMulti ? frontValues.some(({ node }) => node.dataset.value === (optionValue != null ? optionValue : "")) : false;
-  const isSelected = !isDuplicated && (!isMulti ? (optionValue != null ? optionValue : "") === value : value.includes(optionValue != null ? optionValue : ""));
-  const isFocused = index === focusedIndex;
-  id != null ? id : id = uuid;
-  if (!isPlaceholder && (0, import_utils.isUndefined)(optionValue)) {
-    if ((0, import_utils.isString)(children) || (0, import_utils.isNumber)(children)) {
-      optionValue = children.toString();
-    } else {
+  const optionPlaceholder = hasPlaceholder && index === 0;
+  const multi = (0, import_utils.isArray)(selectedValue);
+  const focused = index === focusedIndex;
+  const value = (0, import_react.useMemo)(() => {
+    let value2 = optionValue;
+    if (!optionPlaceholder && (0, import_utils.isUndefined)(optionValue)) {
+      if ((0, import_utils.isString)(children) || (0, import_utils.isNumber)(children)) {
+        value2 = children.toString();
+      } else {
+        console.warn(
+          `${!multi ? "Select" : "MultiSelect"}: Cannot infer the option value of complex children. Pass a \`value\` prop or use a plain string as children to <Option>.`
+        );
+      }
+    }
+    if (hasPlaceholder && index > 0 && !optionValue) {
       console.warn(
-        `${!isMulti ? "Select" : "MultiSelect"}: Cannot infer the option value of complex children. Pass a \`value\` prop or use a plain string as children to <Option>.`
+        `${!multi ? "Select" : "MultiSelect"}: If placeholders are present, All options must be set value. If want to set an empty value, either don't set the placeholder or set \`placeholderInOptions\` to false.`
       );
     }
-  }
-  if (hasPlaceholder && index > 0 && !optionValue) {
-    console.warn(
-      `${!isMulti ? "Select" : "MultiSelect"}: If placeholders are present, All options must be set value. If want to set an empty value, either don't set the placeholder or set 'placeholderInOptions' to false.`
-    );
-  }
+    return value2 != null ? value2 : "";
+  }, [children, hasPlaceholder, index, multi, optionPlaceholder, optionValue]);
+  const duplicated = !multi ? frontValues.some(({ node }) => node.dataset.selectedValue === value) : false;
+  const selected = !duplicated && (!multi ? value === selectedValue : selectedValue.includes(value));
   const onClick = (0, import_react.useCallback)(
@@ -127,8 +132,8 @@ (ev) => {
       ev.stopPropagation();
-      if (isDisabled || !isTargetOption(ev.currentTarget)) {
+      if (disabled || !isTargetOption(ev.currentTarget)) {
         if (fieldRef.current) fieldRef.current.focus();
         return;
       }
-      if (!isDuplicated) setFocusedIndex(index);
-      onChange(optionValue != null ? optionValue : "");
+      if (!duplicated) setFocusedIndex(index);
+      onChange(value);
       if (fieldRef.current) fieldRef.current.focus();
@@ -139,8 +144,8 @@ if (customCloseOnSelect != null ? customCloseOnSelect : closeOnSelect) onClose();
     [
-      isDisabled,
-      isDuplicated,
+      disabled,
+      duplicated,
       setFocusedIndex,
       index,
       onChange,
-      optionValue,
+      value,
       fieldRef,
@@ -173,9 +178,9 @@ customCloseOnSelect,
         id,
-        style: omitSelectedValues && isSelected ? style : void 0,
-        "aria-disabled": (0, import_utils.ariaAttr)(isDisabled),
-        "aria-selected": isSelected,
-        "data-disabled": (0, import_utils.dataAttr)(isDisabled),
-        "data-duplicated": (0, import_utils.dataAttr)(isDuplicated),
-        "data-focus": (0, import_utils.dataAttr)(isFocused),
-        "data-value": optionValue != null ? optionValue : "",
+        style: omitSelectedValues && selected ? style : void 0,
+        "aria-disabled": (0, import_utils.ariaAttr)(disabled),
+        "aria-selected": selected,
+        "data-disabled": (0, import_utils.dataAttr)(disabled),
+        "data-duplicated": (0, import_utils.dataAttr)(duplicated),
+        "data-focus": (0, import_utils.dataAttr)(focused),
+        "data-value": value,
         tabIndex: -1,
@@ -187,8 +192,8 @@ onClick: (0, import_utils.handlerAll)(computedProps.onClick, props2.onClick, onClick)
       id,
-      optionValue,
+      value,
       computedProps,
-      isDisabled,
-      isFocused,
-      isDuplicated,
-      isSelected,
+      disabled,
+      focused,
+      duplicated,
+      selected,
       omitSelectedValues,
@@ -202,4 +207,4 @@ onClick,
     customIcon,
-    isFocused,
-    isSelected,
+    focused,
+    selected,
     getOptionProps
@@ -214,3 +219,3 @@ };
     const { styles } = useSelectContext();
-    const { children, customIcon, isSelected, getOptionProps } = useSelectOption(rest);
+    const { children, customIcon, selected, getOptionProps } = useSelectOption(rest);
     icon != null ? icon : icon = customIcon;
@@ -237,3 +242,3 @@ const css = {
         children: [
-          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OptionIcon, { opacity: isSelected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, {}) }) : null,
+          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OptionIcon, { opacity: selected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, {}) }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { style: { flex: 1 }, "data-label": true, children })
@@ -296,4 +301,4 @@ ]
   const values = descendants.values();
-  const isMulti = (0, import_utils3.isArray)(value);
-  const selectedValues = isMulti && omitSelectedValues ? descendants.values(
+  const multi = (0, import_utils3.isArray)(value);
+  const selectedValues = multi && omitSelectedValues ? descendants.values(
     ({ node }) => {
@@ -311,3 +316,3 @@ var _a;
   );
-  const isEmpty = !childValues.length;
+  const empty = !childValues.length;
   const [containerProps, groupProps] = (0, import_utils3.splitObject)(rest, import_core2.layoutStyleProperties);
@@ -334,6 +339,6 @@ const getContainerProps = (0, import_react2.useCallback)(
         ...containerProps,
-        style: isEmpty ? style : void 0
+        style: empty ? style : void 0
       };
     },
-    [containerProps, isEmpty]
+    [containerProps, empty]
   );
@@ -445,2 +450,3 @@ const getLabelProps = (0, import_react2.useCallback)(
     defaultIsOpen,
+    defaultOpen,
     defaultValue,
@@ -452,4 +458,5 @@ duration = 0.2,
     isLazy,
-    isOpen: isOpenProp,
+    isOpen,
     items = [],
+    lazy,
     lazyBehavior,
@@ -461,2 +468,3 @@ matchWidth = true,
     omitSelectedValues = false,
+    open: openProp,
     openDelay,
@@ -485,3 +493,3 @@ placeholder,
   const [focusedIndex, setFocusedIndex] = (0, import_react3.useState)(-1);
-  const [isAllSelected, setIsAllSelected] = (0, import_react3.useState)(false);
+  const [allSelected, setAllSelected] = (0, import_react3.useState)(false);
   const containerRef = (0, import_react3.useRef)(null);
@@ -497,9 +505,9 @@ const fieldRef = (0, import_react3.useRef)(null);
   const hasPlaceholder = !!placeholder && placeholderInOptions;
-  const isFocused = focusedIndex > -1;
-  const isMulti = (0, import_utils5.isArray)(value);
-  const isEmptyValue = (!isMulti ? !value : !value.length) && !hasPlaceholder;
+  const focused = focusedIndex > -1;
+  const multi = (0, import_utils5.isArray)(value);
+  const emptyValue = (!multi ? !value : !value.length) && !hasPlaceholder;
   const selectedValues = descendants.values(
     ({ node }) => {
       var _a2;
-      return isMulti && value.includes((_a2 = node.dataset.value) != null ? _a2 : "");
+      return multi && value.includes((_a2 = node.dataset.value) != null ? _a2 : "");
     }
@@ -528,3 +536,3 @@ );
   }, [validChildren, items]);
-  const isEmpty = !validChildren.length && !computedChildren.length && (!isMulti ? !hasPlaceholder : true);
+  const empty = !validChildren.length && !computedChildren.length && (!multi ? !hasPlaceholder : true);
   const onFocusFirst = (0, import_react3.useCallback)(() => {
@@ -535,3 +543,3 @@ const id = setTimeout(() => {
       if (!first) return;
-      if (!isMulti || !omitSelectedValues) {
+      if (!multi || !omitSelectedValues) {
         setFocusedIndex(first.index);
@@ -548,3 +556,3 @@ } else {
     timeoutIds.current.add(id);
-  }, [descendants, enabledValues, isMulti, omitSelectedValues, selectedIndexes]);
+  }, [descendants, enabledValues, multi, omitSelectedValues, selectedIndexes]);
   const onFocusLast = (0, import_react3.useCallback)(() => {
@@ -555,3 +563,3 @@ const id = setTimeout(() => {
       if (!last) return;
-      if (!isMulti || !omitSelectedValues) {
+      if (!multi || !omitSelectedValues) {
         setFocusedIndex(last.index);
@@ -568,3 +576,3 @@ } else {
     timeoutIds.current.add(id);
-  }, [descendants, enabledValues, isMulti, omitSelectedValues, selectedIndexes]);
+  }, [descendants, enabledValues, multi, omitSelectedValues, selectedIndexes]);
   const onFocusSelected = (0, import_react3.useCallback)(() => {
@@ -576,3 +584,3 @@ const id = setTimeout(() => {
           var _a2;
-          return !isMulti ? node.dataset.value === value : value.includes((_a2 = node.dataset.value) != null ? _a2 : "");
+          return !multi ? node.dataset.value === value : value.includes((_a2 = node.dataset.value) != null ? _a2 : "");
         }
@@ -583,3 +591,3 @@ );
     timeoutIds.current.add(id);
-  }, [descendants, isMulti, value]);
+  }, [descendants, multi, value]);
   const onFocusNext = (0, import_react3.useCallback)(() => {
@@ -590,3 +598,3 @@ const id = setTimeout(() => {
       if (!next) return;
-      if (!isMulti || !omitSelectedValues) {
+      if (!multi || !omitSelectedValues) {
         setFocusedIndex(next.index);
@@ -607,3 +615,3 @@ } else {
     focusedIndex,
-    isMulti,
+    multi,
     omitSelectedValues,
@@ -618,3 +626,3 @@ selectedIndexes,
       if (!prev) return;
-      if (!isMulti || !omitSelectedValues) {
+      if (!multi || !omitSelectedValues) {
         setFocusedIndex(prev.index);
@@ -635,3 +643,3 @@ } else {
     focusedIndex,
-    isMulti,
+    multi,
     omitSelectedValues,
@@ -641,4 +649,4 @@ selectedIndexes,
   ]);
-  const onFocusFirstOrSelected = isEmptyValue || omitSelectedValues ? onFocusFirst : onFocusSelected;
-  const onFocusLastOrSelected = isEmptyValue || omitSelectedValues ? onFocusLast : onFocusSelected;
+  const onFocusFirstOrSelected = emptyValue || omitSelectedValues ? onFocusFirst : onFocusSelected;
+  const onFocusLastOrSelected = emptyValue || omitSelectedValues ? onFocusLast : onFocusSelected;
   const onChangeLabel = (0, import_react3.useCallback)(
@@ -658,5 +666,5 @@ (newValue) => {
       }).filter((label2) => !(0, import_utils5.isUndefined)(label2));
-      setLabel(!isMulti ? selectedLabel[0] : selectedLabel);
+      setLabel(!multi ? selectedLabel[0] : selectedLabel);
     },
-    [descendants, isMulti, hasPlaceholder]
+    [descendants, multi, hasPlaceholder]
   );
@@ -669,4 +677,4 @@ const onChange = (0, import_react3.useCallback)(
         } else {
-          const isSelected = prev.includes(newValue);
-          if (!isSelected) {
+          const selected = prev.includes(newValue);
+          if (!selected) {
             return [...prev, newValue];
@@ -690,3 +698,3 @@ } else {
   const {
-    isOpen,
+    open,
     onClose,
@@ -696,3 +704,5 @@ onOpen: onInternalOpen
     defaultIsOpen,
-    isOpen: isOpenProp,
+    defaultOpen,
+    isOpen,
+    open: openProp,
     onClose: onCloseProp,
@@ -703,5 +713,5 @@ onOpen: onOpenProp
     if (formControlProps.disabled || formControlProps.readOnly) return;
-    if (isEmpty || isAllSelected) return;
+    if (empty || allSelected) return;
     onInternalOpen();
-  }, [formControlProps, isEmpty, isAllSelected, onInternalOpen]);
+  }, [formControlProps, empty, allSelected, onInternalOpen]);
   const onSelect = (0, import_react3.useCallback)(() => {
@@ -727,11 +737,11 @@ var _a2, _b;
   const onClick = (0, import_react3.useCallback)(() => {
-    if (isOpen) return;
+    if (open) return;
     onOpen();
     onFocusFirstOrSelected();
-  }, [isOpen, onFocusFirstOrSelected, onOpen]);
+  }, [open, onFocusFirstOrSelected, onOpen]);
   const onFocus = (0, import_react3.useCallback)(() => {
-    if (isOpen) return;
+    if (open) return;
     onOpen();
     onFocusFirstOrSelected();
-  }, [isOpen, onFocusFirstOrSelected, onOpen]);
+  }, [open, onFocusFirstOrSelected, onOpen]);
   const onBlur = (0, import_react3.useCallback)(
@@ -742,5 +752,5 @@ (ev) => {
       if (!closeOnBlur) return;
-      if (isOpen) onClose();
+      if (open) onClose();
     },
-    [closeOnBlur, isOpen, onClose]
+    [closeOnBlur, open, onClose]
   );
@@ -752,9 +762,9 @@ const onKeyDown = (0, import_react3.useCallback)(
       const actions = {
-        ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? (0, import_utils5.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
-        ArrowUp: ev.altKey && isOpen ? onClose : isFocused ? () => onFocusPrev() : !isOpen ? (0, import_utils5.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
-        End: isOpen ? onFocusLast : void 0,
-        Enter: isFocused ? onSelect : !isOpen ? (0, import_utils5.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
+        ArrowDown: focused ? () => onFocusNext() : !open ? (0, import_utils5.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
+        ArrowUp: ev.altKey && open ? onClose : focused ? () => onFocusPrev() : !open ? (0, import_utils5.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
+        End: open ? onFocusLast : void 0,
+        Enter: focused ? onSelect : !open ? (0, import_utils5.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
         Escape: closeOnEsc ? onClose : void 0,
-        Home: isOpen ? onFocusFirst : void 0,
-        Space: isFocused ? onSelect : !isOpen ? (0, import_utils5.funcAll)(onOpen, onFocusFirstOrSelected) : void 0
+        Home: open ? onFocusFirst : void 0,
+        Space: focused ? onSelect : !open ? (0, import_utils5.funcAll)(onOpen, onFocusFirstOrSelected) : void 0
       };
@@ -770,4 +780,4 @@ const action = actions[ev.key];
       formControlProps.readOnly,
-      isFocused,
-      isOpen,
+      focused,
+      open,
       onOpen,
@@ -787,24 +797,17 @@ onFocusFirstOrSelected,
     ref: containerRef,
-    enabled: isOpen && closeOnBlur,
+    enabled: open && closeOnBlur,
     handler: onClose
   });
   (0, import_react3.useEffect)(() => {
-    if (!isMulti) return;
+    if (!multi) return;
     if (!omitSelectedValues && (0, import_utils5.isUndefined)(maxSelectValues)) return;
-    const isAll = value.length > 0 && value.length === descendants.count();
-    const isMax = value.length === maxSelectValues;
-    if (isAll || isMax) {
+    const all = value.length > 0 && value.length === descendants.count();
+    const max = value.length === maxSelectValues;
+    if (all || max) {
       onClose();
-      setIsAllSelected(true);
+      setAllSelected(true);
     } else {
-      setIsAllSelected(false);
+      setAllSelected(false);
     }
-  }, [
-    omitSelectedValues,
-    value,
-    descendants,
-    isMulti,
-    onClose,
-    maxSelectValues
-  ]);
+  }, [omitSelectedValues, value, descendants, multi, onClose, maxSelectValues]);
   (0, import_utils5.useSafeLayoutEffect)(() => {
@@ -814,4 +817,4 @@ onChangeLabel(value);
   (0, import_utils5.useUpdateEffect)(() => {
-    if (!isOpen) setFocusedIndex(-1);
-  }, [isOpen]);
+    if (!open) setFocusedIndex(-1);
+  }, [open]);
   (0, import_utils5.useUnmountEffect)(() => {
@@ -832,2 +835,3 @@ timeoutIds.current.forEach((id) => clearTimeout(id));
       isLazy,
+      lazy,
       lazyBehavior,
@@ -843,3 +847,3 @@ matchWidth,
       closeOnButton: false,
-      isOpen,
+      isOpen: open,
       trigger: "never",
@@ -853,2 +857,3 @@ onClose,
       closeDelay,
+      lazy,
       isLazy,
@@ -868,3 +873,3 @@ lazyBehavior,
       modifiers,
-      isOpen,
+      open,
       onOpen,
@@ -887,3 +892,3 @@ onClose
     ({ "aria-label": ariaLabel, ...props2 } = {}, ref = null) => {
-      ariaLabel != null ? ariaLabel : ariaLabel = placeholder != null ? placeholder : `Select ${isMulti ? "one or more options." : "an option."}`;
+      ariaLabel != null ? ariaLabel : ariaLabel = placeholder != null ? placeholder : `Select ${multi ? "one or more options." : "an option."}`;
       return {
@@ -898,5 +903,5 @@ ref: (0, import_utils5.mergeRefs)(fieldRef, ref),
         ...props2,
-        "data-active": (0, import_utils5.dataAttr)(isOpen),
+        "data-active": (0, import_utils5.dataAttr)(open),
         "data-placeholder": (0, import_utils5.dataAttr)(
-          !isMulti ? label === void 0 : !(label == null ? void 0 : label.length)
+          !multi ? label === void 0 : !(label == null ? void 0 : label.length)
         ),
@@ -910,4 +915,4 @@ onFocus: (0, import_utils5.handlerAll)(props2.onFocus, rest.onFocus, onFocus),
       fieldProps,
-      isOpen,
-      isMulti,
+      open,
+      multi,
       label,
@@ -925,8 +930,8 @@ placeholder,
     descendants,
+    empty,
     fieldRef,
     focusedIndex,
-    isEmpty,
-    isOpen,
     label,
     omitSelectedValues,
+    open,
     placeholder,
@@ -1003,6 +1008,4 @@ placeholderInOptions,
   const { styles } = useSelectContext();
-  const isDisabled = props.disabled;
   const rest = (0, import_use_clickable.useClickable)({
     ref,
-    isDisabled,
     ...props
@@ -1038,3 +1041,3 @@ });
   const selectedValue = descendants.value(focusedIndex);
-  const isMulti = (0, import_utils7.isArray)(value);
+  const multi = (0, import_utils7.isArray)(value);
   (0, import_react5.useEffect)(() => {
@@ -1051,9 +1054,9 @@ if (!listRef.current || !selectedValue) return;
     const childBottom = childTop + childHeight;
-    const isInView = viewTop <= childTop && childBottom <= viewBottom;
-    const isScrollBottom = beforeFocusedIndex.current < selectedValue.index;
-    if (!isInView) {
+    const inView = viewTop <= childTop && childBottom <= viewBottom;
+    const scrollBottom = beforeFocusedIndex.current < selectedValue.index;
+    if (!inView) {
       if (childBottom <= parentHeight) {
         listRef.current.scrollTo({ top: 0 });
       } else {
-        if (!isScrollBottom) {
+        if (!scrollBottom) {
           listRef.current.scrollTo({ top: childTop + 1 });
@@ -1070,7 +1073,7 @@ } else {
       ref,
-      "aria-multiselectable": (0, import_utils7.ariaAttr)(isMulti),
+      "aria-multiselectable": (0, import_utils7.ariaAttr)(multi),
       role: "listbox",
       ...props
     }),
-    [isMulti]
+    [multi]
   );
@@ -1154,2 +1157,3 @@ const getListProps = (0, import_react5.useCallback)(
     className,
+    clearable,
     closeOnSelect = false,
@@ -1178,3 +1182,3 @@ color,
     descendants,
-    isEmpty,
+    empty,
     placeholder,
@@ -1195,2 +1199,3 @@ value,
   });
+  clearable != null ? clearable : clearable = isClearable;
   h != null ? h : h = height;
@@ -1227,3 +1232,3 @@ minH != null ? minH : minH = minHeight;
               ) }),
-              isClearable && value.length ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              clearable && value.length ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 SelectClearIcon,
@@ -1239,3 +1244,3 @@ {
         ),
-        !isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        !empty ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           SelectList,
@@ -1372,3 +1377,3 @@ {
     descendants,
-    isEmpty,
+    empty,
     value,
@@ -1431,3 +1436,3 @@ formControlProps,
             ),
-            !isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_portal2.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            !empty ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_portal2.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
               SelectList,
@@ -1434,0 +1439,0 @@ {

dist/multi-select.d.ts

@@ -20,2 +20,8 @@ import * as _yamada_ui_core from '@yamada-ui/core';
     /**
+     * If `true`, display the multi select clear icon.
+     *
+     * @default true
+     */
+    clearable?: boolean;
+    /**
      * The custom display value to use.
@@ -55,2 +61,4 @@ */
      * @default true
+     *
+     * @deprecated Use `clearable` instead.
      */
@@ -91,3 +99,3 @@ isClearable?: boolean;
 }
-interface MultiSelectProps extends ThemeProps<"MultiSelect">, Omit<UseSelectProps<string[]>, "isEmpty" | "placeholderInOptions">, MultiSelectOptions {
+interface MultiSelectProps extends ThemeProps<"MultiSelect">, Omit<UseSelectProps<string[]>, "placeholderInOptions">, MultiSelectOptions {
 }
@@ -94,0 +102,0 @@ /**

dist/multi-select.js

@@ -70,3 +70,3 @@ "use client"
     setFocusedIndex,
-    value,
+    value: selectedValue,
     optionProps,
@@ -79,13 +79,15 @@ onChange,
   const itemRef = (0, import_react.useRef)(null);
-  let {
-    id,
+  const {
+    id = uuid,
     children,
     closeOnSelect: customCloseOnSelect,
-    icon: customIcon,
     isDisabled,
+    disabled = isDisabled,
     isFocusable,
+    focusable = isFocusable,
+    icon: customIcon,
     value: optionValue,
     ...computedProps
   } = { ...optionProps, ...props };
-  const trulyDisabled = !!isDisabled && !isFocusable;
+  const trulyDisabled = !!disabled && !focusable;
   const { descendants, index, register } = useSelectDescendant({
@@ -97,22 +99,25 @@ disabled: trulyDisabled
   const hasPlaceholder = !!placeholder && placeholderInOptions;
-  const isPlaceholder = hasPlaceholder && index === 0;
-  const isMulti = (0, import_utils.isArray)(value);
-  const isDuplicated = !isMulti ? frontValues.some(({ node }) => node.dataset.value === (optionValue != null ? optionValue : "")) : false;
-  const isSelected = !isDuplicated && (!isMulti ? (optionValue != null ? optionValue : "") === value : value.includes(optionValue != null ? optionValue : ""));
-  const isFocused = index === focusedIndex;
-  id != null ? id : id = uuid;
-  if (!isPlaceholder && (0, import_utils.isUndefined)(optionValue)) {
-    if ((0, import_utils.isString)(children) || (0, import_utils.isNumber)(children)) {
-      optionValue = children.toString();
-    } else {
+  const optionPlaceholder = hasPlaceholder && index === 0;
+  const multi = (0, import_utils.isArray)(selectedValue);
+  const focused = index === focusedIndex;
+  const value = (0, import_react.useMemo)(() => {
+    let value2 = optionValue;
+    if (!optionPlaceholder && (0, import_utils.isUndefined)(optionValue)) {
+      if ((0, import_utils.isString)(children) || (0, import_utils.isNumber)(children)) {
+        value2 = children.toString();
+      } else {
+        console.warn(
+          `${!multi ? "Select" : "MultiSelect"}: Cannot infer the option value of complex children. Pass a \`value\` prop or use a plain string as children to <Option>.`
+        );
+      }
+    }
+    if (hasPlaceholder && index > 0 && !optionValue) {
       console.warn(
-        `${!isMulti ? "Select" : "MultiSelect"}: Cannot infer the option value of complex children. Pass a \`value\` prop or use a plain string as children to <Option>.`
+        `${!multi ? "Select" : "MultiSelect"}: If placeholders are present, All options must be set value. If want to set an empty value, either don't set the placeholder or set \`placeholderInOptions\` to false.`
       );
     }
-  }
-  if (hasPlaceholder && index > 0 && !optionValue) {
-    console.warn(
-      `${!isMulti ? "Select" : "MultiSelect"}: If placeholders are present, All options must be set value. If want to set an empty value, either don't set the placeholder or set 'placeholderInOptions' to false.`
-    );
-  }
+    return value2 != null ? value2 : "";
+  }, [children, hasPlaceholder, index, multi, optionPlaceholder, optionValue]);
+  const duplicated = !multi ? frontValues.some(({ node }) => node.dataset.selectedValue === value) : false;
+  const selected = !duplicated && (!multi ? value === selectedValue : selectedValue.includes(value));
   const onClick = (0, import_react.useCallback)(
@@ -122,8 +127,8 @@ (ev) => {
       ev.stopPropagation();
-      if (isDisabled || !isTargetOption(ev.currentTarget)) {
+      if (disabled || !isTargetOption(ev.currentTarget)) {
         if (fieldRef.current) fieldRef.current.focus();
         return;
       }
-      if (!isDuplicated) setFocusedIndex(index);
-      onChange(optionValue != null ? optionValue : "");
+      if (!duplicated) setFocusedIndex(index);
+      onChange(value);
       if (fieldRef.current) fieldRef.current.focus();
@@ -134,8 +139,8 @@ if (customCloseOnSelect != null ? customCloseOnSelect : closeOnSelect) onClose();
     [
-      isDisabled,
-      isDuplicated,
+      disabled,
+      duplicated,
       setFocusedIndex,
       index,
       onChange,
-      optionValue,
+      value,
       fieldRef,
@@ -168,9 +173,9 @@ customCloseOnSelect,
         id,
-        style: omitSelectedValues && isSelected ? style : void 0,
-        "aria-disabled": (0, import_utils.ariaAttr)(isDisabled),
-        "aria-selected": isSelected,
-        "data-disabled": (0, import_utils.dataAttr)(isDisabled),
-        "data-duplicated": (0, import_utils.dataAttr)(isDuplicated),
-        "data-focus": (0, import_utils.dataAttr)(isFocused),
-        "data-value": optionValue != null ? optionValue : "",
+        style: omitSelectedValues && selected ? style : void 0,
+        "aria-disabled": (0, import_utils.ariaAttr)(disabled),
+        "aria-selected": selected,
+        "data-disabled": (0, import_utils.dataAttr)(disabled),
+        "data-duplicated": (0, import_utils.dataAttr)(duplicated),
+        "data-focus": (0, import_utils.dataAttr)(focused),
+        "data-value": value,
         tabIndex: -1,
@@ -182,8 +187,8 @@ onClick: (0, import_utils.handlerAll)(computedProps.onClick, props2.onClick, onClick)
       id,
-      optionValue,
+      value,
       computedProps,
-      isDisabled,
-      isFocused,
-      isDuplicated,
-      isSelected,
+      disabled,
+      focused,
+      duplicated,
+      selected,
       omitSelectedValues,
@@ -197,4 +202,4 @@ onClick,
     customIcon,
-    isFocused,
-    isSelected,
+    focused,
+    selected,
     getOptionProps
@@ -209,3 +214,3 @@ };
     const { styles } = useSelectContext();
-    const { children, customIcon, isSelected, getOptionProps } = useSelectOption(rest);
+    const { children, customIcon, selected, getOptionProps } = useSelectOption(rest);
     icon != null ? icon : icon = customIcon;
@@ -232,3 +237,3 @@ const css = {
         children: [
-          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OptionIcon, { opacity: isSelected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, {}) }) : null,
+          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OptionIcon, { opacity: selected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, {}) }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { style: { flex: 1 }, "data-label": true, children })
@@ -291,4 +296,4 @@ ]
   const values = descendants.values();
-  const isMulti = (0, import_utils3.isArray)(value);
-  const selectedValues = isMulti && omitSelectedValues ? descendants.values(
+  const multi = (0, import_utils3.isArray)(value);
+  const selectedValues = multi && omitSelectedValues ? descendants.values(
     ({ node }) => {
@@ -306,3 +311,3 @@ var _a;
   );
-  const isEmpty = !childValues.length;
+  const empty = !childValues.length;
   const [containerProps, groupProps] = (0, import_utils3.splitObject)(rest, import_core2.layoutStyleProperties);
@@ -329,6 +334,6 @@ const getContainerProps = (0, import_react2.useCallback)(
         ...containerProps,
-        style: isEmpty ? style : void 0
+        style: empty ? style : void 0
       };
     },
-    [containerProps, isEmpty]
+    [containerProps, empty]
   );
@@ -440,2 +445,3 @@ const getLabelProps = (0, import_react2.useCallback)(
     defaultIsOpen,
+    defaultOpen,
     defaultValue,
@@ -447,4 +453,5 @@ duration = 0.2,
     isLazy,
-    isOpen: isOpenProp,
+    isOpen,
     items = [],
+    lazy,
     lazyBehavior,
@@ -456,2 +463,3 @@ matchWidth = true,
     omitSelectedValues = false,
+    open: openProp,
     openDelay,
@@ -480,3 +488,3 @@ placeholder,
   const [focusedIndex, setFocusedIndex] = (0, import_react3.useState)(-1);
-  const [isAllSelected, setIsAllSelected] = (0, import_react3.useState)(false);
+  const [allSelected, setAllSelected] = (0, import_react3.useState)(false);
   const containerRef = (0, import_react3.useRef)(null);
@@ -492,9 +500,9 @@ const fieldRef = (0, import_react3.useRef)(null);
   const hasPlaceholder = !!placeholder && placeholderInOptions;
-  const isFocused = focusedIndex > -1;
-  const isMulti = (0, import_utils5.isArray)(value);
-  const isEmptyValue = (!isMulti ? !value : !value.length) && !hasPlaceholder;
+  const focused = focusedIndex > -1;
+  const multi = (0, import_utils5.isArray)(value);
+  const emptyValue = (!multi ? !value : !value.length) && !hasPlaceholder;
   const selectedValues = descendants.values(
     ({ node }) => {
       var _a2;
-      return isMulti && value.includes((_a2 = node.dataset.value) != null ? _a2 : "");
+      return multi && value.includes((_a2 = node.dataset.value) != null ? _a2 : "");
     }
@@ -523,3 +531,3 @@ );
   }, [validChildren, items]);
-  const isEmpty = !validChildren.length && !computedChildren.length && (!isMulti ? !hasPlaceholder : true);
+  const empty = !validChildren.length && !computedChildren.length && (!multi ? !hasPlaceholder : true);
   const onFocusFirst = (0, import_react3.useCallback)(() => {
@@ -530,3 +538,3 @@ const id = setTimeout(() => {
       if (!first) return;
-      if (!isMulti || !omitSelectedValues) {
+      if (!multi || !omitSelectedValues) {
         setFocusedIndex(first.index);
@@ -543,3 +551,3 @@ } else {
     timeoutIds.current.add(id);
-  }, [descendants, enabledValues, isMulti, omitSelectedValues, selectedIndexes]);
+  }, [descendants, enabledValues, multi, omitSelectedValues, selectedIndexes]);
   const onFocusLast = (0, import_react3.useCallback)(() => {
@@ -550,3 +558,3 @@ const id = setTimeout(() => {
       if (!last) return;
-      if (!isMulti || !omitSelectedValues) {
+      if (!multi || !omitSelectedValues) {
         setFocusedIndex(last.index);
@@ -563,3 +571,3 @@ } else {
     timeoutIds.current.add(id);
-  }, [descendants, enabledValues, isMulti, omitSelectedValues, selectedIndexes]);
+  }, [descendants, enabledValues, multi, omitSelectedValues, selectedIndexes]);
   const onFocusSelected = (0, import_react3.useCallback)(() => {
@@ -571,3 +579,3 @@ const id = setTimeout(() => {
           var _a2;
-          return !isMulti ? node.dataset.value === value : value.includes((_a2 = node.dataset.value) != null ? _a2 : "");
+          return !multi ? node.dataset.value === value : value.includes((_a2 = node.dataset.value) != null ? _a2 : "");
         }
@@ -578,3 +586,3 @@ );
     timeoutIds.current.add(id);
-  }, [descendants, isMulti, value]);
+  }, [descendants, multi, value]);
   const onFocusNext = (0, import_react3.useCallback)(() => {
@@ -585,3 +593,3 @@ const id = setTimeout(() => {
       if (!next) return;
-      if (!isMulti || !omitSelectedValues) {
+      if (!multi || !omitSelectedValues) {
         setFocusedIndex(next.index);
@@ -602,3 +610,3 @@ } else {
     focusedIndex,
-    isMulti,
+    multi,
     omitSelectedValues,
@@ -613,3 +621,3 @@ selectedIndexes,
       if (!prev) return;
-      if (!isMulti || !omitSelectedValues) {
+      if (!multi || !omitSelectedValues) {
         setFocusedIndex(prev.index);
@@ -630,3 +638,3 @@ } else {
     focusedIndex,
-    isMulti,
+    multi,
     omitSelectedValues,
@@ -636,4 +644,4 @@ selectedIndexes,
   ]);
-  const onFocusFirstOrSelected = isEmptyValue || omitSelectedValues ? onFocusFirst : onFocusSelected;
-  const onFocusLastOrSelected = isEmptyValue || omitSelectedValues ? onFocusLast : onFocusSelected;
+  const onFocusFirstOrSelected = emptyValue || omitSelectedValues ? onFocusFirst : onFocusSelected;
+  const onFocusLastOrSelected = emptyValue || omitSelectedValues ? onFocusLast : onFocusSelected;
   const onChangeLabel = (0, import_react3.useCallback)(
@@ -653,5 +661,5 @@ (newValue) => {
       }).filter((label2) => !(0, import_utils5.isUndefined)(label2));
-      setLabel(!isMulti ? selectedLabel[0] : selectedLabel);
+      setLabel(!multi ? selectedLabel[0] : selectedLabel);
     },
-    [descendants, isMulti, hasPlaceholder]
+    [descendants, multi, hasPlaceholder]
   );
@@ -664,4 +672,4 @@ const onChange = (0, import_react3.useCallback)(
         } else {
-          const isSelected = prev.includes(newValue);
-          if (!isSelected) {
+          const selected = prev.includes(newValue);
+          if (!selected) {
             return [...prev, newValue];
@@ -685,3 +693,3 @@ } else {
   const {
-    isOpen,
+    open,
     onClose,
@@ -691,3 +699,5 @@ onOpen: onInternalOpen
     defaultIsOpen,
-    isOpen: isOpenProp,
+    defaultOpen,
+    isOpen,
+    open: openProp,
     onClose: onCloseProp,
@@ -698,5 +708,5 @@ onOpen: onOpenProp
     if (formControlProps.disabled || formControlProps.readOnly) return;
-    if (isEmpty || isAllSelected) return;
+    if (empty || allSelected) return;
     onInternalOpen();
-  }, [formControlProps, isEmpty, isAllSelected, onInternalOpen]);
+  }, [formControlProps, empty, allSelected, onInternalOpen]);
   const onSelect = (0, import_react3.useCallback)(() => {
@@ -722,11 +732,11 @@ var _a2, _b;
   const onClick = (0, import_react3.useCallback)(() => {
-    if (isOpen) return;
+    if (open) return;
     onOpen();
     onFocusFirstOrSelected();
-  }, [isOpen, onFocusFirstOrSelected, onOpen]);
+  }, [open, onFocusFirstOrSelected, onOpen]);
   const onFocus = (0, import_react3.useCallback)(() => {
-    if (isOpen) return;
+    if (open) return;
     onOpen();
     onFocusFirstOrSelected();
-  }, [isOpen, onFocusFirstOrSelected, onOpen]);
+  }, [open, onFocusFirstOrSelected, onOpen]);
   const onBlur = (0, import_react3.useCallback)(
@@ -737,5 +747,5 @@ (ev) => {
       if (!closeOnBlur) return;
-      if (isOpen) onClose();
+      if (open) onClose();
     },
-    [closeOnBlur, isOpen, onClose]
+    [closeOnBlur, open, onClose]
   );
@@ -747,9 +757,9 @@ const onKeyDown = (0, import_react3.useCallback)(
       const actions = {
-        ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? (0, import_utils5.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
-        ArrowUp: ev.altKey && isOpen ? onClose : isFocused ? () => onFocusPrev() : !isOpen ? (0, import_utils5.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
-        End: isOpen ? onFocusLast : void 0,
-        Enter: isFocused ? onSelect : !isOpen ? (0, import_utils5.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
+        ArrowDown: focused ? () => onFocusNext() : !open ? (0, import_utils5.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
+        ArrowUp: ev.altKey && open ? onClose : focused ? () => onFocusPrev() : !open ? (0, import_utils5.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
+        End: open ? onFocusLast : void 0,
+        Enter: focused ? onSelect : !open ? (0, import_utils5.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
         Escape: closeOnEsc ? onClose : void 0,
-        Home: isOpen ? onFocusFirst : void 0,
-        Space: isFocused ? onSelect : !isOpen ? (0, import_utils5.funcAll)(onOpen, onFocusFirstOrSelected) : void 0
+        Home: open ? onFocusFirst : void 0,
+        Space: focused ? onSelect : !open ? (0, import_utils5.funcAll)(onOpen, onFocusFirstOrSelected) : void 0
       };
@@ -765,4 +775,4 @@ const action = actions[ev.key];
       formControlProps.readOnly,
-      isFocused,
-      isOpen,
+      focused,
+      open,
       onOpen,
@@ -782,24 +792,17 @@ onFocusFirstOrSelected,
     ref: containerRef,
-    enabled: isOpen && closeOnBlur,
+    enabled: open && closeOnBlur,
     handler: onClose
   });
   (0, import_react3.useEffect)(() => {
-    if (!isMulti) return;
+    if (!multi) return;
     if (!omitSelectedValues && (0, import_utils5.isUndefined)(maxSelectValues)) return;
-    const isAll = value.length > 0 && value.length === descendants.count();
-    const isMax = value.length === maxSelectValues;
-    if (isAll || isMax) {
+    const all = value.length > 0 && value.length === descendants.count();
+    const max = value.length === maxSelectValues;
+    if (all || max) {
       onClose();
-      setIsAllSelected(true);
+      setAllSelected(true);
     } else {
-      setIsAllSelected(false);
+      setAllSelected(false);
     }
-  }, [
-    omitSelectedValues,
-    value,
-    descendants,
-    isMulti,
-    onClose,
-    maxSelectValues
-  ]);
+  }, [omitSelectedValues, value, descendants, multi, onClose, maxSelectValues]);
   (0, import_utils5.useSafeLayoutEffect)(() => {
@@ -809,4 +812,4 @@ onChangeLabel(value);
   (0, import_utils5.useUpdateEffect)(() => {
-    if (!isOpen) setFocusedIndex(-1);
-  }, [isOpen]);
+    if (!open) setFocusedIndex(-1);
+  }, [open]);
   (0, import_utils5.useUnmountEffect)(() => {
@@ -827,2 +830,3 @@ timeoutIds.current.forEach((id) => clearTimeout(id));
       isLazy,
+      lazy,
       lazyBehavior,
@@ -838,3 +842,3 @@ matchWidth,
       closeOnButton: false,
-      isOpen,
+      isOpen: open,
       trigger: "never",
@@ -848,2 +852,3 @@ onClose,
       closeDelay,
+      lazy,
       isLazy,
@@ -863,3 +868,3 @@ lazyBehavior,
       modifiers,
-      isOpen,
+      open,
       onOpen,
@@ -882,3 +887,3 @@ onClose
     ({ "aria-label": ariaLabel, ...props2 } = {}, ref = null) => {
-      ariaLabel != null ? ariaLabel : ariaLabel = placeholder != null ? placeholder : `Select ${isMulti ? "one or more options." : "an option."}`;
+      ariaLabel != null ? ariaLabel : ariaLabel = placeholder != null ? placeholder : `Select ${multi ? "one or more options." : "an option."}`;
       return {
@@ -893,5 +898,5 @@ ref: (0, import_utils5.mergeRefs)(fieldRef, ref),
         ...props2,
-        "data-active": (0, import_utils5.dataAttr)(isOpen),
+        "data-active": (0, import_utils5.dataAttr)(open),
         "data-placeholder": (0, import_utils5.dataAttr)(
-          !isMulti ? label === void 0 : !(label == null ? void 0 : label.length)
+          !multi ? label === void 0 : !(label == null ? void 0 : label.length)
         ),
@@ -905,4 +910,4 @@ onFocus: (0, import_utils5.handlerAll)(props2.onFocus, rest.onFocus, onFocus),
       fieldProps,
-      isOpen,
-      isMulti,
+      open,
+      multi,
       label,
@@ -920,8 +925,8 @@ placeholder,
     descendants,
+    empty,
     fieldRef,
     focusedIndex,
-    isEmpty,
-    isOpen,
     label,
     omitSelectedValues,
+    open,
     placeholder,
@@ -998,6 +1003,4 @@ placeholderInOptions,
   const { styles } = useSelectContext();
-  const isDisabled = props.disabled;
   const rest = (0, import_use_clickable.useClickable)({
     ref,
-    isDisabled,
     ...props
@@ -1033,3 +1036,3 @@ });
   const selectedValue = descendants.value(focusedIndex);
-  const isMulti = (0, import_utils7.isArray)(value);
+  const multi = (0, import_utils7.isArray)(value);
   (0, import_react5.useEffect)(() => {
@@ -1046,9 +1049,9 @@ if (!listRef.current || !selectedValue) return;
     const childBottom = childTop + childHeight;
-    const isInView = viewTop <= childTop && childBottom <= viewBottom;
-    const isScrollBottom = beforeFocusedIndex.current < selectedValue.index;
-    if (!isInView) {
+    const inView = viewTop <= childTop && childBottom <= viewBottom;
+    const scrollBottom = beforeFocusedIndex.current < selectedValue.index;
+    if (!inView) {
       if (childBottom <= parentHeight) {
         listRef.current.scrollTo({ top: 0 });
       } else {
-        if (!isScrollBottom) {
+        if (!scrollBottom) {
           listRef.current.scrollTo({ top: childTop + 1 });
@@ -1065,7 +1068,7 @@ } else {
       ref,
-      "aria-multiselectable": (0, import_utils7.ariaAttr)(isMulti),
+      "aria-multiselectable": (0, import_utils7.ariaAttr)(multi),
       role: "listbox",
       ...props
     }),
-    [isMulti]
+    [multi]
   );
@@ -1149,2 +1152,3 @@ const getListProps = (0, import_react5.useCallback)(
     className,
+    clearable,
     closeOnSelect = false,
@@ -1173,3 +1177,3 @@ color,
     descendants,
-    isEmpty,
+    empty,
     placeholder,
@@ -1190,2 +1194,3 @@ value,
   });
+  clearable != null ? clearable : clearable = isClearable;
   h != null ? h : h = height;
@@ -1222,3 +1227,3 @@ minH != null ? minH : minH = minHeight;
               ) }),
-              isClearable && value.length ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              clearable && value.length ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 SelectClearIcon,
@@ -1234,3 +1239,3 @@ {
         ),
-        !isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        !empty ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           SelectList,
@@ -1237,0 +1242,0 @@ {

dist/option-group.js

@@ -64,4 +64,4 @@ "use client"
   const values = descendants.values();
-  const isMulti = (0, import_utils2.isArray)(value);
-  const selectedValues = isMulti && omitSelectedValues ? descendants.values(
+  const multi = (0, import_utils2.isArray)(value);
+  const selectedValues = multi && omitSelectedValues ? descendants.values(
     ({ node }) => {
@@ -79,3 +79,3 @@ var _a;
   );
-  const isEmpty = !childValues.length;
+  const empty = !childValues.length;
   const [containerProps, groupProps] = (0, import_utils2.splitObject)(rest, import_core2.layoutStyleProperties);
@@ -102,6 +102,6 @@ const getContainerProps = (0, import_react2.useCallback)(
         ...containerProps,
-        style: isEmpty ? style : void 0
+        style: empty ? style : void 0
       };
     },
-    [containerProps, isEmpty]
+    [containerProps, empty]
   );
@@ -108,0 +108,0 @@ const getLabelProps = (0, import_react2.useCallback)(

dist/option.js

@@ -67,3 +67,3 @@ "use client"
     setFocusedIndex,
-    value,
+    value: selectedValue,
     optionProps,
@@ -76,13 +76,15 @@ onChange,
   const itemRef = (0, import_react2.useRef)(null);
-  let {
-    id,
+  const {
+    id = uuid,
     children,
     closeOnSelect: customCloseOnSelect,
-    icon: customIcon,
     isDisabled,
+    disabled = isDisabled,
     isFocusable,
+    focusable = isFocusable,
+    icon: customIcon,
     value: optionValue,
     ...computedProps
   } = { ...optionProps, ...props };
-  const trulyDisabled = !!isDisabled && !isFocusable;
+  const trulyDisabled = !!disabled && !focusable;
   const { descendants, index, register } = useSelectDescendant({
@@ -94,22 +96,25 @@ disabled: trulyDisabled
   const hasPlaceholder = !!placeholder && placeholderInOptions;
-  const isPlaceholder = hasPlaceholder && index === 0;
-  const isMulti = (0, import_utils2.isArray)(value);
-  const isDuplicated = !isMulti ? frontValues.some(({ node }) => node.dataset.value === (optionValue != null ? optionValue : "")) : false;
-  const isSelected = !isDuplicated && (!isMulti ? (optionValue != null ? optionValue : "") === value : value.includes(optionValue != null ? optionValue : ""));
-  const isFocused = index === focusedIndex;
-  id != null ? id : id = uuid;
-  if (!isPlaceholder && (0, import_utils2.isUndefined)(optionValue)) {
-    if ((0, import_utils2.isString)(children) || (0, import_utils2.isNumber)(children)) {
-      optionValue = children.toString();
-    } else {
+  const optionPlaceholder = hasPlaceholder && index === 0;
+  const multi = (0, import_utils2.isArray)(selectedValue);
+  const focused = index === focusedIndex;
+  const value = (0, import_react2.useMemo)(() => {
+    let value2 = optionValue;
+    if (!optionPlaceholder && (0, import_utils2.isUndefined)(optionValue)) {
+      if ((0, import_utils2.isString)(children) || (0, import_utils2.isNumber)(children)) {
+        value2 = children.toString();
+      } else {
+        console.warn(
+          `${!multi ? "Select" : "MultiSelect"}: Cannot infer the option value of complex children. Pass a \`value\` prop or use a plain string as children to <Option>.`
+        );
+      }
+    }
+    if (hasPlaceholder && index > 0 && !optionValue) {
       console.warn(
-        `${!isMulti ? "Select" : "MultiSelect"}: Cannot infer the option value of complex children. Pass a \`value\` prop or use a plain string as children to <Option>.`
+        `${!multi ? "Select" : "MultiSelect"}: If placeholders are present, All options must be set value. If want to set an empty value, either don't set the placeholder or set \`placeholderInOptions\` to false.`
       );
     }
-  }
-  if (hasPlaceholder && index > 0 && !optionValue) {
-    console.warn(
-      `${!isMulti ? "Select" : "MultiSelect"}: If placeholders are present, All options must be set value. If want to set an empty value, either don't set the placeholder or set 'placeholderInOptions' to false.`
-    );
-  }
+    return value2 != null ? value2 : "";
+  }, [children, hasPlaceholder, index, multi, optionPlaceholder, optionValue]);
+  const duplicated = !multi ? frontValues.some(({ node }) => node.dataset.selectedValue === value) : false;
+  const selected = !duplicated && (!multi ? value === selectedValue : selectedValue.includes(value));
   const onClick = (0, import_react2.useCallback)(
@@ -119,8 +124,8 @@ (ev) => {
       ev.stopPropagation();
-      if (isDisabled || !isTargetOption(ev.currentTarget)) {
+      if (disabled || !isTargetOption(ev.currentTarget)) {
         if (fieldRef.current) fieldRef.current.focus();
         return;
       }
-      if (!isDuplicated) setFocusedIndex(index);
-      onChange(optionValue != null ? optionValue : "");
+      if (!duplicated) setFocusedIndex(index);
+      onChange(value);
       if (fieldRef.current) fieldRef.current.focus();
@@ -131,8 +136,8 @@ if (customCloseOnSelect != null ? customCloseOnSelect : closeOnSelect) onClose();
     [
-      isDisabled,
-      isDuplicated,
+      disabled,
+      duplicated,
       setFocusedIndex,
       index,
       onChange,
-      optionValue,
+      value,
       fieldRef,
@@ -165,9 +170,9 @@ customCloseOnSelect,
         id,
-        style: omitSelectedValues && isSelected ? style : void 0,
-        "aria-disabled": (0, import_utils2.ariaAttr)(isDisabled),
-        "aria-selected": isSelected,
-        "data-disabled": (0, import_utils2.dataAttr)(isDisabled),
-        "data-duplicated": (0, import_utils2.dataAttr)(isDuplicated),
-        "data-focus": (0, import_utils2.dataAttr)(isFocused),
-        "data-value": optionValue != null ? optionValue : "",
+        style: omitSelectedValues && selected ? style : void 0,
+        "aria-disabled": (0, import_utils2.ariaAttr)(disabled),
+        "aria-selected": selected,
+        "data-disabled": (0, import_utils2.dataAttr)(disabled),
+        "data-duplicated": (0, import_utils2.dataAttr)(duplicated),
+        "data-focus": (0, import_utils2.dataAttr)(focused),
+        "data-value": value,
         tabIndex: -1,
@@ -179,8 +184,8 @@ onClick: (0, import_utils2.handlerAll)(computedProps.onClick, props2.onClick, onClick)
       id,
-      optionValue,
+      value,
       computedProps,
-      isDisabled,
-      isFocused,
-      isDuplicated,
-      isSelected,
+      disabled,
+      focused,
+      duplicated,
+      selected,
       omitSelectedValues,
@@ -194,4 +199,4 @@ onClick,
     customIcon,
-    isFocused,
-    isSelected,
+    focused,
+    selected,
     getOptionProps
@@ -206,3 +211,3 @@ };
     const { styles } = useSelectContext();
-    const { children, customIcon, isSelected, getOptionProps } = useSelectOption(rest);
+    const { children, customIcon, selected, getOptionProps } = useSelectOption(rest);
     icon != null ? icon : icon = customIcon;
@@ -229,3 +234,3 @@ const css = {
         children: [
-          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OptionIcon, { opacity: isSelected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckIcon, {}) }) : null,
+          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OptionIcon, { opacity: selected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckIcon, {}) }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { style: { flex: 1 }, "data-label": true, children })
@@ -232,0 +237,0 @@ ]

dist/select-icon.js

@@ -105,6 +105,4 @@ "use client"
   const { styles } = useSelectContext();
-  const isDisabled = props.disabled;
   const rest = (0, import_use_clickable.useClickable)({
     ref,
-    isDisabled,
     ...props
@@ -111,0 +109,0 @@ });

dist/select-list.js

@@ -61,3 +61,3 @@ "use client"
   const selectedValue = descendants.value(focusedIndex);
-  const isMulti = (0, import_utils2.isArray)(value);
+  const multi = (0, import_utils2.isArray)(value);
   (0, import_react2.useEffect)(() => {
@@ -74,9 +74,9 @@ if (!listRef.current || !selectedValue) return;
     const childBottom = childTop + childHeight;
-    const isInView = viewTop <= childTop && childBottom <= viewBottom;
-    const isScrollBottom = beforeFocusedIndex.current < selectedValue.index;
-    if (!isInView) {
+    const inView = viewTop <= childTop && childBottom <= viewBottom;
+    const scrollBottom = beforeFocusedIndex.current < selectedValue.index;
+    if (!inView) {
       if (childBottom <= parentHeight) {
         listRef.current.scrollTo({ top: 0 });
       } else {
-        if (!isScrollBottom) {
+        if (!scrollBottom) {
           listRef.current.scrollTo({ top: childTop + 1 });
@@ -93,7 +93,7 @@ } else {
       ref,
-      "aria-multiselectable": (0, import_utils2.ariaAttr)(isMulti),
+      "aria-multiselectable": (0, import_utils2.ariaAttr)(multi),
       role: "listbox",
       ...props
     }),
-    [isMulti]
+    [multi]
   );
@@ -100,0 +100,0 @@ const getListProps = (0, import_react2.useCallback)(

dist/select.d.ts

@@ -68,3 +68,3 @@ import * as _yamada_ui_core from '@yamada-ui/core';
 }
-type SelectProps = Omit<UseSelectProps, "isEmpty" | "maxSelectValues" | "omitSelectedValues"> & SelectOptions & ThemeProps<"Select">;
+type SelectProps = Omit<UseSelectProps, "maxSelectValues" | "omitSelectedValues"> & SelectOptions & ThemeProps<"Select">;
 /**
@@ -71,0 +71,0 @@ * `Select` is a component used for allowing a user to choose one option from a list.

dist/select.js

@@ -63,4 +63,4 @@ "use client"
   const values = descendants.values();
-  const isMulti = (0, import_utils.isArray)(value);
-  const selectedValues = isMulti && omitSelectedValues ? descendants.values(
+  const multi = (0, import_utils.isArray)(value);
+  const selectedValues = multi && omitSelectedValues ? descendants.values(
     ({ node }) => {
@@ -78,3 +78,3 @@ var _a;
   );
-  const isEmpty = !childValues.length;
+  const empty = !childValues.length;
   const [containerProps, groupProps] = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
@@ -101,6 +101,6 @@ const getContainerProps = (0, import_react.useCallback)(
         ...containerProps,
-        style: isEmpty ? style : void 0
+        style: empty ? style : void 0
       };
     },
-    [containerProps, isEmpty]
+    [containerProps, empty]
   );
@@ -212,2 +212,3 @@ const getLabelProps = (0, import_react.useCallback)(
     defaultIsOpen,
+    defaultOpen,
     defaultValue,
@@ -219,4 +220,5 @@ duration = 0.2,
     isLazy,
-    isOpen: isOpenProp,
+    isOpen,
     items = [],
+    lazy,
     lazyBehavior,
@@ -228,2 +230,3 @@ matchWidth = true,
     omitSelectedValues = false,
+    open: openProp,
     openDelay,
@@ -252,3 +255,3 @@ placeholder,
   const [focusedIndex, setFocusedIndex] = (0, import_react2.useState)(-1);
-  const [isAllSelected, setIsAllSelected] = (0, import_react2.useState)(false);
+  const [allSelected, setAllSelected] = (0, import_react2.useState)(false);
   const containerRef = (0, import_react2.useRef)(null);
@@ -264,9 +267,9 @@ const fieldRef = (0, import_react2.useRef)(null);
   const hasPlaceholder = !!placeholder && placeholderInOptions;
-  const isFocused = focusedIndex > -1;
-  const isMulti = (0, import_utils3.isArray)(value);
-  const isEmptyValue = (!isMulti ? !value : !value.length) && !hasPlaceholder;
+  const focused = focusedIndex > -1;
+  const multi = (0, import_utils3.isArray)(value);
+  const emptyValue = (!multi ? !value : !value.length) && !hasPlaceholder;
   const selectedValues = descendants.values(
     ({ node }) => {
       var _a2;
-      return isMulti && value.includes((_a2 = node.dataset.value) != null ? _a2 : "");
+      return multi && value.includes((_a2 = node.dataset.value) != null ? _a2 : "");
     }
@@ -295,3 +298,3 @@ );
   }, [validChildren, items]);
-  const isEmpty = !validChildren.length && !computedChildren.length && (!isMulti ? !hasPlaceholder : true);
+  const empty = !validChildren.length && !computedChildren.length && (!multi ? !hasPlaceholder : true);
   const onFocusFirst = (0, import_react2.useCallback)(() => {
@@ -302,3 +305,3 @@ const id = setTimeout(() => {
       if (!first) return;
-      if (!isMulti || !omitSelectedValues) {
+      if (!multi || !omitSelectedValues) {
         setFocusedIndex(first.index);
@@ -315,3 +318,3 @@ } else {
     timeoutIds.current.add(id);
-  }, [descendants, enabledValues, isMulti, omitSelectedValues, selectedIndexes]);
+  }, [descendants, enabledValues, multi, omitSelectedValues, selectedIndexes]);
   const onFocusLast = (0, import_react2.useCallback)(() => {
@@ -322,3 +325,3 @@ const id = setTimeout(() => {
       if (!last) return;
-      if (!isMulti || !omitSelectedValues) {
+      if (!multi || !omitSelectedValues) {
         setFocusedIndex(last.index);
@@ -335,3 +338,3 @@ } else {
     timeoutIds.current.add(id);
-  }, [descendants, enabledValues, isMulti, omitSelectedValues, selectedIndexes]);
+  }, [descendants, enabledValues, multi, omitSelectedValues, selectedIndexes]);
   const onFocusSelected = (0, import_react2.useCallback)(() => {
@@ -343,3 +346,3 @@ const id = setTimeout(() => {
           var _a2;
-          return !isMulti ? node.dataset.value === value : value.includes((_a2 = node.dataset.value) != null ? _a2 : "");
+          return !multi ? node.dataset.value === value : value.includes((_a2 = node.dataset.value) != null ? _a2 : "");
         }
@@ -350,3 +353,3 @@ );
     timeoutIds.current.add(id);
-  }, [descendants, isMulti, value]);
+  }, [descendants, multi, value]);
   const onFocusNext = (0, import_react2.useCallback)(() => {
@@ -357,3 +360,3 @@ const id = setTimeout(() => {
       if (!next) return;
-      if (!isMulti || !omitSelectedValues) {
+      if (!multi || !omitSelectedValues) {
         setFocusedIndex(next.index);
@@ -374,3 +377,3 @@ } else {
     focusedIndex,
-    isMulti,
+    multi,
     omitSelectedValues,
@@ -385,3 +388,3 @@ selectedIndexes,
       if (!prev) return;
-      if (!isMulti || !omitSelectedValues) {
+      if (!multi || !omitSelectedValues) {
         setFocusedIndex(prev.index);
@@ -402,3 +405,3 @@ } else {
     focusedIndex,
-    isMulti,
+    multi,
     omitSelectedValues,
@@ -408,4 +411,4 @@ selectedIndexes,
   ]);
-  const onFocusFirstOrSelected = isEmptyValue || omitSelectedValues ? onFocusFirst : onFocusSelected;
-  const onFocusLastOrSelected = isEmptyValue || omitSelectedValues ? onFocusLast : onFocusSelected;
+  const onFocusFirstOrSelected = emptyValue || omitSelectedValues ? onFocusFirst : onFocusSelected;
+  const onFocusLastOrSelected = emptyValue || omitSelectedValues ? onFocusLast : onFocusSelected;
   const onChangeLabel = (0, import_react2.useCallback)(
@@ -425,5 +428,5 @@ (newValue) => {
       }).filter((label2) => !(0, import_utils3.isUndefined)(label2));
-      setLabel(!isMulti ? selectedLabel[0] : selectedLabel);
+      setLabel(!multi ? selectedLabel[0] : selectedLabel);
     },
-    [descendants, isMulti, hasPlaceholder]
+    [descendants, multi, hasPlaceholder]
   );
@@ -436,4 +439,4 @@ const onChange = (0, import_react2.useCallback)(
         } else {
-          const isSelected = prev.includes(newValue);
-          if (!isSelected) {
+          const selected = prev.includes(newValue);
+          if (!selected) {
             return [...prev, newValue];
@@ -457,3 +460,3 @@ } else {
   const {
-    isOpen,
+    open,
     onClose,
@@ -463,3 +466,5 @@ onOpen: onInternalOpen
     defaultIsOpen,
-    isOpen: isOpenProp,
+    defaultOpen,
+    isOpen,
+    open: openProp,
     onClose: onCloseProp,
@@ -470,5 +475,5 @@ onOpen: onOpenProp
     if (formControlProps.disabled || formControlProps.readOnly) return;
-    if (isEmpty || isAllSelected) return;
+    if (empty || allSelected) return;
     onInternalOpen();
-  }, [formControlProps, isEmpty, isAllSelected, onInternalOpen]);
+  }, [formControlProps, empty, allSelected, onInternalOpen]);
   const onSelect = (0, import_react2.useCallback)(() => {
@@ -494,11 +499,11 @@ var _a2, _b;
   const onClick = (0, import_react2.useCallback)(() => {
-    if (isOpen) return;
+    if (open) return;
     onOpen();
     onFocusFirstOrSelected();
-  }, [isOpen, onFocusFirstOrSelected, onOpen]);
+  }, [open, onFocusFirstOrSelected, onOpen]);
   const onFocus = (0, import_react2.useCallback)(() => {
-    if (isOpen) return;
+    if (open) return;
     onOpen();
     onFocusFirstOrSelected();
-  }, [isOpen, onFocusFirstOrSelected, onOpen]);
+  }, [open, onFocusFirstOrSelected, onOpen]);
   const onBlur = (0, import_react2.useCallback)(
@@ -509,5 +514,5 @@ (ev) => {
       if (!closeOnBlur) return;
-      if (isOpen) onClose();
+      if (open) onClose();
     },
-    [closeOnBlur, isOpen, onClose]
+    [closeOnBlur, open, onClose]
   );
@@ -519,9 +524,9 @@ const onKeyDown = (0, import_react2.useCallback)(
       const actions = {
-        ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? (0, import_utils3.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
-        ArrowUp: ev.altKey && isOpen ? onClose : isFocused ? () => onFocusPrev() : !isOpen ? (0, import_utils3.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
-        End: isOpen ? onFocusLast : void 0,
-        Enter: isFocused ? onSelect : !isOpen ? (0, import_utils3.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
+        ArrowDown: focused ? () => onFocusNext() : !open ? (0, import_utils3.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
+        ArrowUp: ev.altKey && open ? onClose : focused ? () => onFocusPrev() : !open ? (0, import_utils3.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
+        End: open ? onFocusLast : void 0,
+        Enter: focused ? onSelect : !open ? (0, import_utils3.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
         Escape: closeOnEsc ? onClose : void 0,
-        Home: isOpen ? onFocusFirst : void 0,
-        Space: isFocused ? onSelect : !isOpen ? (0, import_utils3.funcAll)(onOpen, onFocusFirstOrSelected) : void 0
+        Home: open ? onFocusFirst : void 0,
+        Space: focused ? onSelect : !open ? (0, import_utils3.funcAll)(onOpen, onFocusFirstOrSelected) : void 0
       };
@@ -537,4 +542,4 @@ const action = actions[ev.key];
       formControlProps.readOnly,
-      isFocused,
-      isOpen,
+      focused,
+      open,
       onOpen,
@@ -554,24 +559,17 @@ onFocusFirstOrSelected,
     ref: containerRef,
-    enabled: isOpen && closeOnBlur,
+    enabled: open && closeOnBlur,
     handler: onClose
   });
   (0, import_react2.useEffect)(() => {
-    if (!isMulti) return;
+    if (!multi) return;
     if (!omitSelectedValues && (0, import_utils3.isUndefined)(maxSelectValues)) return;
-    const isAll = value.length > 0 && value.length === descendants.count();
-    const isMax = value.length === maxSelectValues;
-    if (isAll || isMax) {
+    const all = value.length > 0 && value.length === descendants.count();
+    const max = value.length === maxSelectValues;
+    if (all || max) {
       onClose();
-      setIsAllSelected(true);
+      setAllSelected(true);
     } else {
-      setIsAllSelected(false);
+      setAllSelected(false);
     }
-  }, [
-    omitSelectedValues,
-    value,
-    descendants,
-    isMulti,
-    onClose,
-    maxSelectValues
-  ]);
+  }, [omitSelectedValues, value, descendants, multi, onClose, maxSelectValues]);
   (0, import_utils3.useSafeLayoutEffect)(() => {
@@ -581,4 +579,4 @@ onChangeLabel(value);
   (0, import_utils3.useUpdateEffect)(() => {
-    if (!isOpen) setFocusedIndex(-1);
-  }, [isOpen]);
+    if (!open) setFocusedIndex(-1);
+  }, [open]);
   (0, import_utils3.useUnmountEffect)(() => {
@@ -599,2 +597,3 @@ timeoutIds.current.forEach((id) => clearTimeout(id));
       isLazy,
+      lazy,
       lazyBehavior,
@@ -610,3 +609,3 @@ matchWidth,
       closeOnButton: false,
-      isOpen,
+      isOpen: open,
       trigger: "never",
@@ -620,2 +619,3 @@ onClose,
       closeDelay,
+      lazy,
       isLazy,
@@ -635,3 +635,3 @@ lazyBehavior,
       modifiers,
-      isOpen,
+      open,
       onOpen,
@@ -654,3 +654,3 @@ onClose
     ({ "aria-label": ariaLabel, ...props2 } = {}, ref = null) => {
-      ariaLabel != null ? ariaLabel : ariaLabel = placeholder != null ? placeholder : `Select ${isMulti ? "one or more options." : "an option."}`;
+      ariaLabel != null ? ariaLabel : ariaLabel = placeholder != null ? placeholder : `Select ${multi ? "one or more options." : "an option."}`;
       return {
@@ -665,5 +665,5 @@ ref: (0, import_utils3.mergeRefs)(fieldRef, ref),
         ...props2,
-        "data-active": (0, import_utils3.dataAttr)(isOpen),
+        "data-active": (0, import_utils3.dataAttr)(open),
         "data-placeholder": (0, import_utils3.dataAttr)(
-          !isMulti ? label === void 0 : !(label == null ? void 0 : label.length)
+          !multi ? label === void 0 : !(label == null ? void 0 : label.length)
         ),
@@ -677,4 +677,4 @@ onFocus: (0, import_utils3.handlerAll)(props2.onFocus, rest.onFocus, onFocus),
       fieldProps,
-      isOpen,
-      isMulti,
+      open,
+      multi,
       label,
@@ -692,8 +692,8 @@ placeholder,
     descendants,
+    empty,
     fieldRef,
     focusedIndex,
-    isEmpty,
-    isOpen,
     label,
     omitSelectedValues,
+    open,
     placeholder,
@@ -736,3 +736,3 @@ placeholderInOptions,
     setFocusedIndex,
-    value,
+    value: selectedValue,
     optionProps,
@@ -745,13 +745,15 @@ onChange,
   const itemRef = (0, import_react3.useRef)(null);
-  let {
-    id,
+  const {
+    id = uuid,
     children,
     closeOnSelect: customCloseOnSelect,
-    icon: customIcon,
     isDisabled,
+    disabled = isDisabled,
     isFocusable,
+    focusable = isFocusable,
+    icon: customIcon,
     value: optionValue,
     ...computedProps
   } = { ...optionProps, ...props };
-  const trulyDisabled = !!isDisabled && !isFocusable;
+  const trulyDisabled = !!disabled && !focusable;
   const { descendants, index, register } = useSelectDescendant({
@@ -763,22 +765,25 @@ disabled: trulyDisabled
   const hasPlaceholder = !!placeholder && placeholderInOptions;
-  const isPlaceholder = hasPlaceholder && index === 0;
-  const isMulti = (0, import_utils4.isArray)(value);
-  const isDuplicated = !isMulti ? frontValues.some(({ node }) => node.dataset.value === (optionValue != null ? optionValue : "")) : false;
-  const isSelected = !isDuplicated && (!isMulti ? (optionValue != null ? optionValue : "") === value : value.includes(optionValue != null ? optionValue : ""));
-  const isFocused = index === focusedIndex;
-  id != null ? id : id = uuid;
-  if (!isPlaceholder && (0, import_utils4.isUndefined)(optionValue)) {
-    if ((0, import_utils4.isString)(children) || (0, import_utils4.isNumber)(children)) {
-      optionValue = children.toString();
-    } else {
+  const optionPlaceholder = hasPlaceholder && index === 0;
+  const multi = (0, import_utils4.isArray)(selectedValue);
+  const focused = index === focusedIndex;
+  const value = (0, import_react3.useMemo)(() => {
+    let value2 = optionValue;
+    if (!optionPlaceholder && (0, import_utils4.isUndefined)(optionValue)) {
+      if ((0, import_utils4.isString)(children) || (0, import_utils4.isNumber)(children)) {
+        value2 = children.toString();
+      } else {
+        console.warn(
+          `${!multi ? "Select" : "MultiSelect"}: Cannot infer the option value of complex children. Pass a \`value\` prop or use a plain string as children to <Option>.`
+        );
+      }
+    }
+    if (hasPlaceholder && index > 0 && !optionValue) {
       console.warn(
-        `${!isMulti ? "Select" : "MultiSelect"}: Cannot infer the option value of complex children. Pass a \`value\` prop or use a plain string as children to <Option>.`
+        `${!multi ? "Select" : "MultiSelect"}: If placeholders are present, All options must be set value. If want to set an empty value, either don't set the placeholder or set \`placeholderInOptions\` to false.`
       );
     }
-  }
-  if (hasPlaceholder && index > 0 && !optionValue) {
-    console.warn(
-      `${!isMulti ? "Select" : "MultiSelect"}: If placeholders are present, All options must be set value. If want to set an empty value, either don't set the placeholder or set 'placeholderInOptions' to false.`
-    );
-  }
+    return value2 != null ? value2 : "";
+  }, [children, hasPlaceholder, index, multi, optionPlaceholder, optionValue]);
+  const duplicated = !multi ? frontValues.some(({ node }) => node.dataset.selectedValue === value) : false;
+  const selected = !duplicated && (!multi ? value === selectedValue : selectedValue.includes(value));
   const onClick = (0, import_react3.useCallback)(
@@ -788,8 +793,8 @@ (ev) => {
       ev.stopPropagation();
-      if (isDisabled || !isTargetOption(ev.currentTarget)) {
+      if (disabled || !isTargetOption(ev.currentTarget)) {
         if (fieldRef.current) fieldRef.current.focus();
         return;
       }
-      if (!isDuplicated) setFocusedIndex(index);
-      onChange(optionValue != null ? optionValue : "");
+      if (!duplicated) setFocusedIndex(index);
+      onChange(value);
       if (fieldRef.current) fieldRef.current.focus();
@@ -800,8 +805,8 @@ if (customCloseOnSelect != null ? customCloseOnSelect : closeOnSelect) onClose();
     [
-      isDisabled,
-      isDuplicated,
+      disabled,
+      duplicated,
       setFocusedIndex,
       index,
       onChange,
-      optionValue,
+      value,
       fieldRef,
@@ -834,9 +839,9 @@ customCloseOnSelect,
         id,
-        style: omitSelectedValues && isSelected ? style : void 0,
-        "aria-disabled": (0, import_utils4.ariaAttr)(isDisabled),
-        "aria-selected": isSelected,
-        "data-disabled": (0, import_utils4.dataAttr)(isDisabled),
-        "data-duplicated": (0, import_utils4.dataAttr)(isDuplicated),
-        "data-focus": (0, import_utils4.dataAttr)(isFocused),
-        "data-value": optionValue != null ? optionValue : "",
+        style: omitSelectedValues && selected ? style : void 0,
+        "aria-disabled": (0, import_utils4.ariaAttr)(disabled),
+        "aria-selected": selected,
+        "data-disabled": (0, import_utils4.dataAttr)(disabled),
+        "data-duplicated": (0, import_utils4.dataAttr)(duplicated),
+        "data-focus": (0, import_utils4.dataAttr)(focused),
+        "data-value": value,
         tabIndex: -1,
@@ -848,8 +853,8 @@ onClick: (0, import_utils4.handlerAll)(computedProps.onClick, props2.onClick, onClick)
       id,
-      optionValue,
+      value,
       computedProps,
-      isDisabled,
-      isFocused,
-      isDuplicated,
-      isSelected,
+      disabled,
+      focused,
+      duplicated,
+      selected,
       omitSelectedValues,
@@ -863,4 +868,4 @@ onClick,
     customIcon,
-    isFocused,
-    isSelected,
+    focused,
+    selected,
     getOptionProps
@@ -875,3 +880,3 @@ };
     const { styles } = useSelectContext();
-    const { children, customIcon, isSelected, getOptionProps } = useSelectOption(rest);
+    const { children, customIcon, selected, getOptionProps } = useSelectOption(rest);
     icon != null ? icon : icon = customIcon;
@@ -898,3 +903,3 @@ const css = {
         children: [
-          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OptionIcon, { opacity: isSelected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, {}) }) : null,
+          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OptionIcon, { opacity: selected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, {}) }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core4.ui.span, { style: { flex: 1 }, "data-label": true, children })
@@ -995,6 +1000,4 @@ ]
   const { styles } = useSelectContext();
-  const isDisabled = props.disabled;
   const rest = (0, import_use_clickable.useClickable)({
     ref,
-    isDisabled,
     ...props
@@ -1030,3 +1033,3 @@ });
   const selectedValue = descendants.value(focusedIndex);
-  const isMulti = (0, import_utils7.isArray)(value);
+  const multi = (0, import_utils7.isArray)(value);
   (0, import_react5.useEffect)(() => {
@@ -1043,9 +1046,9 @@ if (!listRef.current || !selectedValue) return;
     const childBottom = childTop + childHeight;
-    const isInView = viewTop <= childTop && childBottom <= viewBottom;
-    const isScrollBottom = beforeFocusedIndex.current < selectedValue.index;
-    if (!isInView) {
+    const inView = viewTop <= childTop && childBottom <= viewBottom;
+    const scrollBottom = beforeFocusedIndex.current < selectedValue.index;
+    if (!inView) {
       if (childBottom <= parentHeight) {
         listRef.current.scrollTo({ top: 0 });
       } else {
-        if (!isScrollBottom) {
+        if (!scrollBottom) {
           listRef.current.scrollTo({ top: childTop + 1 });
@@ -1062,7 +1065,7 @@ } else {
       ref,
-      "aria-multiselectable": (0, import_utils7.ariaAttr)(isMulti),
+      "aria-multiselectable": (0, import_utils7.ariaAttr)(multi),
       role: "listbox",
       ...props
     }),
-    [isMulti]
+    [multi]
   );
@@ -1167,3 +1170,3 @@ const getListProps = (0, import_react5.useCallback)(
     descendants,
-    isEmpty,
+    empty,
     value,
@@ -1226,3 +1229,3 @@ formControlProps,
             ),
-            !isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            !empty ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               SelectList,
@@ -1229,0 +1232,0 @@ {

dist/use-select-list.js

@@ -58,3 +58,3 @@ "use client"
   const selectedValue = descendants.value(focusedIndex);
-  const isMulti = (0, import_utils2.isArray)(value);
+  const multi = (0, import_utils2.isArray)(value);
   (0, import_react2.useEffect)(() => {
@@ -71,9 +71,9 @@ if (!listRef.current || !selectedValue) return;
     const childBottom = childTop + childHeight;
-    const isInView = viewTop <= childTop && childBottom <= viewBottom;
-    const isScrollBottom = beforeFocusedIndex.current < selectedValue.index;
-    if (!isInView) {
+    const inView = viewTop <= childTop && childBottom <= viewBottom;
+    const scrollBottom = beforeFocusedIndex.current < selectedValue.index;
+    if (!inView) {
       if (childBottom <= parentHeight) {
         listRef.current.scrollTo({ top: 0 });
       } else {
-        if (!isScrollBottom) {
+        if (!scrollBottom) {
           listRef.current.scrollTo({ top: childTop + 1 });
@@ -90,7 +90,7 @@ } else {
       ref,
-      "aria-multiselectable": (0, import_utils2.ariaAttr)(isMulti),
+      "aria-multiselectable": (0, import_utils2.ariaAttr)(multi),
       role: "listbox",
       ...props
     }),
-    [isMulti]
+    [multi]
   );
@@ -97,0 +97,0 @@ const getListProps = (0, import_react2.useCallback)(

dist/use-select-option-group.js

@@ -62,4 +62,4 @@ "use client"
   const values = descendants.values();
-  const isMulti = (0, import_utils2.isArray)(value);
-  const selectedValues = isMulti && omitSelectedValues ? descendants.values(
+  const multi = (0, import_utils2.isArray)(value);
+  const selectedValues = multi && omitSelectedValues ? descendants.values(
     ({ node }) => {
@@ -77,3 +77,3 @@ var _a;
   );
-  const isEmpty = !childValues.length;
+  const empty = !childValues.length;
   const [containerProps, groupProps] = (0, import_utils2.splitObject)(rest, import_core2.layoutStyleProperties);
@@ -100,6 +100,6 @@ const getContainerProps = (0, import_react2.useCallback)(
         ...containerProps,
-        style: isEmpty ? style : void 0
+        style: empty ? style : void 0
       };
     },
-    [containerProps, isEmpty]
+    [containerProps, empty]
   );
@@ -106,0 +106,0 @@ const getLabelProps = (0, import_react2.useCallback)(

dist/use-select-option.d.ts

@@ -16,2 +16,16 @@ import * as react from 'react';
      */
+    disabled?: boolean;
+    /**
+     * If `true`, the select option will be focusable.
+     *
+     * @default false
+     */
+    focusable?: boolean;
+    /**
+     * If `true`, the select option will be disabled.
+     *
+     * @default false
+     *
+     * @deprecated Use `disabled` instead.
+     */
     isDisabled?: boolean;
@@ -22,2 +36,4 @@ /**
      * @default false
+     *
+     * @deprecated Use `focusable` instead.
      */
@@ -33,4 +49,4 @@ isFocusable?: boolean;
     customIcon: react.ReactElement<any, string | react.JSXElementConstructor<any>> | null | undefined;
-    isFocused: boolean;
-    isSelected: boolean;
+    focused: boolean;
+    selected: boolean;
     getOptionProps: PropGetter<"div", undefined>;
@@ -37,0 +53,0 @@ };

dist/use-select-option.js

@@ -65,3 +65,3 @@ "use client"
     setFocusedIndex,
-    value,
+    value: selectedValue,
     optionProps,
@@ -74,13 +74,15 @@ onChange,
   const itemRef = (0, import_react2.useRef)(null);
-  let {
-    id,
+  const {
+    id = uuid,
     children,
     closeOnSelect: customCloseOnSelect,
-    icon: customIcon,
     isDisabled,
+    disabled = isDisabled,
     isFocusable,
+    focusable = isFocusable,
+    icon: customIcon,
     value: optionValue,
     ...computedProps
   } = { ...optionProps, ...props };
-  const trulyDisabled = !!isDisabled && !isFocusable;
+  const trulyDisabled = !!disabled && !focusable;
   const { descendants, index, register } = useSelectDescendant({
@@ -92,22 +94,25 @@ disabled: trulyDisabled
   const hasPlaceholder = !!placeholder && placeholderInOptions;
-  const isPlaceholder = hasPlaceholder && index === 0;
-  const isMulti = (0, import_utils2.isArray)(value);
-  const isDuplicated = !isMulti ? frontValues.some(({ node }) => node.dataset.value === (optionValue != null ? optionValue : "")) : false;
-  const isSelected = !isDuplicated && (!isMulti ? (optionValue != null ? optionValue : "") === value : value.includes(optionValue != null ? optionValue : ""));
-  const isFocused = index === focusedIndex;
-  id != null ? id : id = uuid;
-  if (!isPlaceholder && (0, import_utils2.isUndefined)(optionValue)) {
-    if ((0, import_utils2.isString)(children) || (0, import_utils2.isNumber)(children)) {
-      optionValue = children.toString();
-    } else {
+  const optionPlaceholder = hasPlaceholder && index === 0;
+  const multi = (0, import_utils2.isArray)(selectedValue);
+  const focused = index === focusedIndex;
+  const value = (0, import_react2.useMemo)(() => {
+    let value2 = optionValue;
+    if (!optionPlaceholder && (0, import_utils2.isUndefined)(optionValue)) {
+      if ((0, import_utils2.isString)(children) || (0, import_utils2.isNumber)(children)) {
+        value2 = children.toString();
+      } else {
+        console.warn(
+          `${!multi ? "Select" : "MultiSelect"}: Cannot infer the option value of complex children. Pass a \`value\` prop or use a plain string as children to <Option>.`
+        );
+      }
+    }
+    if (hasPlaceholder && index > 0 && !optionValue) {
       console.warn(
-        `${!isMulti ? "Select" : "MultiSelect"}: Cannot infer the option value of complex children. Pass a \`value\` prop or use a plain string as children to <Option>.`
+        `${!multi ? "Select" : "MultiSelect"}: If placeholders are present, All options must be set value. If want to set an empty value, either don't set the placeholder or set \`placeholderInOptions\` to false.`
       );
     }
-  }
-  if (hasPlaceholder && index > 0 && !optionValue) {
-    console.warn(
-      `${!isMulti ? "Select" : "MultiSelect"}: If placeholders are present, All options must be set value. If want to set an empty value, either don't set the placeholder or set 'placeholderInOptions' to false.`
-    );
-  }
+    return value2 != null ? value2 : "";
+  }, [children, hasPlaceholder, index, multi, optionPlaceholder, optionValue]);
+  const duplicated = !multi ? frontValues.some(({ node }) => node.dataset.selectedValue === value) : false;
+  const selected = !duplicated && (!multi ? value === selectedValue : selectedValue.includes(value));
   const onClick = (0, import_react2.useCallback)(
@@ -117,8 +122,8 @@ (ev) => {
       ev.stopPropagation();
-      if (isDisabled || !isTargetOption(ev.currentTarget)) {
+      if (disabled || !isTargetOption(ev.currentTarget)) {
         if (fieldRef.current) fieldRef.current.focus();
         return;
       }
-      if (!isDuplicated) setFocusedIndex(index);
-      onChange(optionValue != null ? optionValue : "");
+      if (!duplicated) setFocusedIndex(index);
+      onChange(value);
       if (fieldRef.current) fieldRef.current.focus();
@@ -129,8 +134,8 @@ if (customCloseOnSelect != null ? customCloseOnSelect : closeOnSelect) onClose();
     [
-      isDisabled,
-      isDuplicated,
+      disabled,
+      duplicated,
       setFocusedIndex,
       index,
       onChange,
-      optionValue,
+      value,
       fieldRef,
@@ -163,9 +168,9 @@ customCloseOnSelect,
         id,
-        style: omitSelectedValues && isSelected ? style : void 0,
-        "aria-disabled": (0, import_utils2.ariaAttr)(isDisabled),
-        "aria-selected": isSelected,
-        "data-disabled": (0, import_utils2.dataAttr)(isDisabled),
-        "data-duplicated": (0, import_utils2.dataAttr)(isDuplicated),
-        "data-focus": (0, import_utils2.dataAttr)(isFocused),
-        "data-value": optionValue != null ? optionValue : "",
+        style: omitSelectedValues && selected ? style : void 0,
+        "aria-disabled": (0, import_utils2.ariaAttr)(disabled),
+        "aria-selected": selected,
+        "data-disabled": (0, import_utils2.dataAttr)(disabled),
+        "data-duplicated": (0, import_utils2.dataAttr)(duplicated),
+        "data-focus": (0, import_utils2.dataAttr)(focused),
+        "data-value": value,
         tabIndex: -1,
@@ -177,8 +182,8 @@ onClick: (0, import_utils2.handlerAll)(computedProps.onClick, props2.onClick, onClick)
       id,
-      optionValue,
+      value,
       computedProps,
-      isDisabled,
-      isFocused,
-      isDuplicated,
-      isSelected,
+      disabled,
+      focused,
+      duplicated,
+      selected,
       omitSelectedValues,
@@ -192,4 +197,4 @@ onClick,
     customIcon,
-    isFocused,
-    isSelected,
+    focused,
+    selected,
     getOptionProps
@@ -196,0 +201,0 @@ };

dist/use-select.d.ts

@@ -131,8 +131,8 @@ import * as react from 'react';
 type MaybeValue = string | string[];
-interface SelectContext extends Omit<UseSelectProps, "defaultValue" | "isEmpty" | "onChange" | "value"> {
+interface SelectContext extends Omit<UseSelectProps, "defaultValue" | "onChange" | "value"> {
     containerRef: RefObject<HTMLDivElement>;
     fieldRef: RefObject<HTMLDivElement>;
     focusedIndex: number;
-    isOpen: boolean;
     label: MaybeValue | undefined;
+    open: boolean;
     setFocusedIndex: Dispatch<SetStateAction<number>>;
@@ -234,8 +234,8 @@ styles: {
     };
+    empty: boolean;
     fieldRef: RefObject<HTMLDivElement>;
     focusedIndex: number;
-    isEmpty: boolean;
-    isOpen: boolean;
     label: T | undefined;
     omitSelectedValues: boolean;
+    open: boolean;
     placeholder: string | undefined;
@@ -242,0 +242,0 @@ placeholderInOptions: boolean;

dist/use-select.js

@@ -62,3 +62,3 @@ "use client"
     setFocusedIndex,
-    value,
+    value: selectedValue,
     optionProps,
@@ -71,13 +71,15 @@ onChange,
   const itemRef = (0, import_react.useRef)(null);
-  let {
-    id,
+  const {
+    id = uuid,
     children,
     closeOnSelect: customCloseOnSelect,
-    icon: customIcon,
     isDisabled,
+    disabled = isDisabled,
     isFocusable,
+    focusable = isFocusable,
+    icon: customIcon,
     value: optionValue,
     ...computedProps
   } = { ...optionProps, ...props };
-  const trulyDisabled = !!isDisabled && !isFocusable;
+  const trulyDisabled = !!disabled && !focusable;
   const { descendants, index, register } = useSelectDescendant({
@@ -89,22 +91,25 @@ disabled: trulyDisabled
   const hasPlaceholder = !!placeholder && placeholderInOptions;
-  const isPlaceholder = hasPlaceholder && index === 0;
-  const isMulti = (0, import_utils.isArray)(value);
-  const isDuplicated = !isMulti ? frontValues.some(({ node }) => node.dataset.value === (optionValue != null ? optionValue : "")) : false;
-  const isSelected = !isDuplicated && (!isMulti ? (optionValue != null ? optionValue : "") === value : value.includes(optionValue != null ? optionValue : ""));
-  const isFocused = index === focusedIndex;
-  id != null ? id : id = uuid;
-  if (!isPlaceholder && (0, import_utils.isUndefined)(optionValue)) {
-    if ((0, import_utils.isString)(children) || (0, import_utils.isNumber)(children)) {
-      optionValue = children.toString();
-    } else {
+  const optionPlaceholder = hasPlaceholder && index === 0;
+  const multi = (0, import_utils.isArray)(selectedValue);
+  const focused = index === focusedIndex;
+  const value = (0, import_react.useMemo)(() => {
+    let value2 = optionValue;
+    if (!optionPlaceholder && (0, import_utils.isUndefined)(optionValue)) {
+      if ((0, import_utils.isString)(children) || (0, import_utils.isNumber)(children)) {
+        value2 = children.toString();
+      } else {
+        console.warn(
+          `${!multi ? "Select" : "MultiSelect"}: Cannot infer the option value of complex children. Pass a \`value\` prop or use a plain string as children to <Option>.`
+        );
+      }
+    }
+    if (hasPlaceholder && index > 0 && !optionValue) {
       console.warn(
-        `${!isMulti ? "Select" : "MultiSelect"}: Cannot infer the option value of complex children. Pass a \`value\` prop or use a plain string as children to <Option>.`
+        `${!multi ? "Select" : "MultiSelect"}: If placeholders are present, All options must be set value. If want to set an empty value, either don't set the placeholder or set \`placeholderInOptions\` to false.`
       );
     }
-  }
-  if (hasPlaceholder && index > 0 && !optionValue) {
-    console.warn(
-      `${!isMulti ? "Select" : "MultiSelect"}: If placeholders are present, All options must be set value. If want to set an empty value, either don't set the placeholder or set 'placeholderInOptions' to false.`
-    );
-  }
+    return value2 != null ? value2 : "";
+  }, [children, hasPlaceholder, index, multi, optionPlaceholder, optionValue]);
+  const duplicated = !multi ? frontValues.some(({ node }) => node.dataset.selectedValue === value) : false;
+  const selected = !duplicated && (!multi ? value === selectedValue : selectedValue.includes(value));
   const onClick = (0, import_react.useCallback)(
@@ -114,8 +119,8 @@ (ev) => {
       ev.stopPropagation();
-      if (isDisabled || !isTargetOption(ev.currentTarget)) {
+      if (disabled || !isTargetOption(ev.currentTarget)) {
         if (fieldRef.current) fieldRef.current.focus();
         return;
       }
-      if (!isDuplicated) setFocusedIndex(index);
-      onChange(optionValue != null ? optionValue : "");
+      if (!duplicated) setFocusedIndex(index);
+      onChange(value);
       if (fieldRef.current) fieldRef.current.focus();
@@ -126,8 +131,8 @@ if (customCloseOnSelect != null ? customCloseOnSelect : closeOnSelect) onClose();
     [
-      isDisabled,
-      isDuplicated,
+      disabled,
+      duplicated,
       setFocusedIndex,
       index,
       onChange,
-      optionValue,
+      value,
       fieldRef,
@@ -160,9 +165,9 @@ customCloseOnSelect,
         id,
-        style: omitSelectedValues && isSelected ? style : void 0,
-        "aria-disabled": (0, import_utils.ariaAttr)(isDisabled),
-        "aria-selected": isSelected,
-        "data-disabled": (0, import_utils.dataAttr)(isDisabled),
-        "data-duplicated": (0, import_utils.dataAttr)(isDuplicated),
-        "data-focus": (0, import_utils.dataAttr)(isFocused),
-        "data-value": optionValue != null ? optionValue : "",
+        style: omitSelectedValues && selected ? style : void 0,
+        "aria-disabled": (0, import_utils.ariaAttr)(disabled),
+        "aria-selected": selected,
+        "data-disabled": (0, import_utils.dataAttr)(disabled),
+        "data-duplicated": (0, import_utils.dataAttr)(duplicated),
+        "data-focus": (0, import_utils.dataAttr)(focused),
+        "data-value": value,
         tabIndex: -1,
@@ -174,8 +179,8 @@ onClick: (0, import_utils.handlerAll)(computedProps.onClick, props2.onClick, onClick)
       id,
-      optionValue,
+      value,
       computedProps,
-      isDisabled,
-      isFocused,
-      isDuplicated,
-      isSelected,
+      disabled,
+      focused,
+      duplicated,
+      selected,
       omitSelectedValues,
@@ -189,4 +194,4 @@ onClick,
     customIcon,
-    isFocused,
-    isSelected,
+    focused,
+    selected,
     getOptionProps
@@ -201,3 +206,3 @@ };
     const { styles } = useSelectContext();
-    const { children, customIcon, isSelected, getOptionProps } = useSelectOption(rest);
+    const { children, customIcon, selected, getOptionProps } = useSelectOption(rest);
     icon != null ? icon : icon = customIcon;
@@ -224,3 +229,3 @@ const css = {
         children: [
-          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OptionIcon, { opacity: isSelected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, {}) }) : null,
+          icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OptionIcon, { opacity: selected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, {}) }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { style: { flex: 1 }, "data-label": true, children })
@@ -283,4 +288,4 @@ ]
   const values = descendants.values();
-  const isMulti = (0, import_utils3.isArray)(value);
-  const selectedValues = isMulti && omitSelectedValues ? descendants.values(
+  const multi = (0, import_utils3.isArray)(value);
+  const selectedValues = multi && omitSelectedValues ? descendants.values(
     ({ node }) => {
@@ -298,3 +303,3 @@ var _a;
   );
-  const isEmpty = !childValues.length;
+  const empty = !childValues.length;
   const [containerProps, groupProps] = (0, import_utils3.splitObject)(rest, import_core2.layoutStyleProperties);
@@ -321,6 +326,6 @@ const getContainerProps = (0, import_react2.useCallback)(
         ...containerProps,
-        style: isEmpty ? style : void 0
+        style: empty ? style : void 0
       };
     },
-    [containerProps, isEmpty]
+    [containerProps, empty]
   );
@@ -432,2 +437,3 @@ const getLabelProps = (0, import_react2.useCallback)(
     defaultIsOpen,
+    defaultOpen,
     defaultValue,
@@ -439,4 +445,5 @@ duration = 0.2,
     isLazy,
-    isOpen: isOpenProp,
+    isOpen,
     items = [],
+    lazy,
     lazyBehavior,
@@ -448,2 +455,3 @@ matchWidth = true,
     omitSelectedValues = false,
+    open: openProp,
     openDelay,
@@ -472,3 +480,3 @@ placeholder,
   const [focusedIndex, setFocusedIndex] = (0, import_react3.useState)(-1);
-  const [isAllSelected, setIsAllSelected] = (0, import_react3.useState)(false);
+  const [allSelected, setAllSelected] = (0, import_react3.useState)(false);
   const containerRef = (0, import_react3.useRef)(null);
@@ -484,9 +492,9 @@ const fieldRef = (0, import_react3.useRef)(null);
   const hasPlaceholder = !!placeholder && placeholderInOptions;
-  const isFocused = focusedIndex > -1;
-  const isMulti = (0, import_utils5.isArray)(value);
-  const isEmptyValue = (!isMulti ? !value : !value.length) && !hasPlaceholder;
+  const focused = focusedIndex > -1;
+  const multi = (0, import_utils5.isArray)(value);
+  const emptyValue = (!multi ? !value : !value.length) && !hasPlaceholder;
   const selectedValues = descendants.values(
     ({ node }) => {
       var _a2;
-      return isMulti && value.includes((_a2 = node.dataset.value) != null ? _a2 : "");
+      return multi && value.includes((_a2 = node.dataset.value) != null ? _a2 : "");
     }
@@ -515,3 +523,3 @@ );
   }, [validChildren, items]);
-  const isEmpty = !validChildren.length && !computedChildren.length && (!isMulti ? !hasPlaceholder : true);
+  const empty = !validChildren.length && !computedChildren.length && (!multi ? !hasPlaceholder : true);
   const onFocusFirst = (0, import_react3.useCallback)(() => {
@@ -522,3 +530,3 @@ const id = setTimeout(() => {
       if (!first) return;
-      if (!isMulti || !omitSelectedValues) {
+      if (!multi || !omitSelectedValues) {
         setFocusedIndex(first.index);
@@ -535,3 +543,3 @@ } else {
     timeoutIds.current.add(id);
-  }, [descendants, enabledValues, isMulti, omitSelectedValues, selectedIndexes]);
+  }, [descendants, enabledValues, multi, omitSelectedValues, selectedIndexes]);
   const onFocusLast = (0, import_react3.useCallback)(() => {
@@ -542,3 +550,3 @@ const id = setTimeout(() => {
       if (!last) return;
-      if (!isMulti || !omitSelectedValues) {
+      if (!multi || !omitSelectedValues) {
         setFocusedIndex(last.index);
@@ -555,3 +563,3 @@ } else {
     timeoutIds.current.add(id);
-  }, [descendants, enabledValues, isMulti, omitSelectedValues, selectedIndexes]);
+  }, [descendants, enabledValues, multi, omitSelectedValues, selectedIndexes]);
   const onFocusSelected = (0, import_react3.useCallback)(() => {
@@ -563,3 +571,3 @@ const id = setTimeout(() => {
           var _a2;
-          return !isMulti ? node.dataset.value === value : value.includes((_a2 = node.dataset.value) != null ? _a2 : "");
+          return !multi ? node.dataset.value === value : value.includes((_a2 = node.dataset.value) != null ? _a2 : "");
         }
@@ -570,3 +578,3 @@ );
     timeoutIds.current.add(id);
-  }, [descendants, isMulti, value]);
+  }, [descendants, multi, value]);
   const onFocusNext = (0, import_react3.useCallback)(() => {
@@ -577,3 +585,3 @@ const id = setTimeout(() => {
       if (!next) return;
-      if (!isMulti || !omitSelectedValues) {
+      if (!multi || !omitSelectedValues) {
         setFocusedIndex(next.index);
@@ -594,3 +602,3 @@ } else {
     focusedIndex,
-    isMulti,
+    multi,
     omitSelectedValues,
@@ -605,3 +613,3 @@ selectedIndexes,
       if (!prev) return;
-      if (!isMulti || !omitSelectedValues) {
+      if (!multi || !omitSelectedValues) {
         setFocusedIndex(prev.index);
@@ -622,3 +630,3 @@ } else {
     focusedIndex,
-    isMulti,
+    multi,
     omitSelectedValues,
@@ -628,4 +636,4 @@ selectedIndexes,
   ]);
-  const onFocusFirstOrSelected = isEmptyValue || omitSelectedValues ? onFocusFirst : onFocusSelected;
-  const onFocusLastOrSelected = isEmptyValue || omitSelectedValues ? onFocusLast : onFocusSelected;
+  const onFocusFirstOrSelected = emptyValue || omitSelectedValues ? onFocusFirst : onFocusSelected;
+  const onFocusLastOrSelected = emptyValue || omitSelectedValues ? onFocusLast : onFocusSelected;
   const onChangeLabel = (0, import_react3.useCallback)(
@@ -645,5 +653,5 @@ (newValue) => {
       }).filter((label2) => !(0, import_utils5.isUndefined)(label2));
-      setLabel(!isMulti ? selectedLabel[0] : selectedLabel);
+      setLabel(!multi ? selectedLabel[0] : selectedLabel);
     },
-    [descendants, isMulti, hasPlaceholder]
+    [descendants, multi, hasPlaceholder]
   );
@@ -656,4 +664,4 @@ const onChange = (0, import_react3.useCallback)(
         } else {
-          const isSelected = prev.includes(newValue);
-          if (!isSelected) {
+          const selected = prev.includes(newValue);
+          if (!selected) {
             return [...prev, newValue];
@@ -677,3 +685,3 @@ } else {
   const {
-    isOpen,
+    open,
     onClose,
@@ -683,3 +691,5 @@ onOpen: onInternalOpen
     defaultIsOpen,
-    isOpen: isOpenProp,
+    defaultOpen,
+    isOpen,
+    open: openProp,
     onClose: onCloseProp,
@@ -690,5 +700,5 @@ onOpen: onOpenProp
     if (formControlProps.disabled || formControlProps.readOnly) return;
-    if (isEmpty || isAllSelected) return;
+    if (empty || allSelected) return;
     onInternalOpen();
-  }, [formControlProps, isEmpty, isAllSelected, onInternalOpen]);
+  }, [formControlProps, empty, allSelected, onInternalOpen]);
   const onSelect = (0, import_react3.useCallback)(() => {
@@ -714,11 +724,11 @@ var _a2, _b;
   const onClick = (0, import_react3.useCallback)(() => {
-    if (isOpen) return;
+    if (open) return;
     onOpen();
     onFocusFirstOrSelected();
-  }, [isOpen, onFocusFirstOrSelected, onOpen]);
+  }, [open, onFocusFirstOrSelected, onOpen]);
   const onFocus = (0, import_react3.useCallback)(() => {
-    if (isOpen) return;
+    if (open) return;
     onOpen();
     onFocusFirstOrSelected();
-  }, [isOpen, onFocusFirstOrSelected, onOpen]);
+  }, [open, onFocusFirstOrSelected, onOpen]);
   const onBlur = (0, import_react3.useCallback)(
@@ -729,5 +739,5 @@ (ev) => {
       if (!closeOnBlur) return;
-      if (isOpen) onClose();
+      if (open) onClose();
     },
-    [closeOnBlur, isOpen, onClose]
+    [closeOnBlur, open, onClose]
   );
@@ -739,9 +749,9 @@ const onKeyDown = (0, import_react3.useCallback)(
       const actions = {
-        ArrowDown: isFocused ? () => onFocusNext() : !isOpen ? (0, import_utils5.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
-        ArrowUp: ev.altKey && isOpen ? onClose : isFocused ? () => onFocusPrev() : !isOpen ? (0, import_utils5.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
-        End: isOpen ? onFocusLast : void 0,
-        Enter: isFocused ? onSelect : !isOpen ? (0, import_utils5.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
+        ArrowDown: focused ? () => onFocusNext() : !open ? (0, import_utils5.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
+        ArrowUp: ev.altKey && open ? onClose : focused ? () => onFocusPrev() : !open ? (0, import_utils5.funcAll)(onOpen, onFocusLastOrSelected) : void 0,
+        End: open ? onFocusLast : void 0,
+        Enter: focused ? onSelect : !open ? (0, import_utils5.funcAll)(onOpen, onFocusFirstOrSelected) : void 0,
         Escape: closeOnEsc ? onClose : void 0,
-        Home: isOpen ? onFocusFirst : void 0,
-        Space: isFocused ? onSelect : !isOpen ? (0, import_utils5.funcAll)(onOpen, onFocusFirstOrSelected) : void 0
+        Home: open ? onFocusFirst : void 0,
+        Space: focused ? onSelect : !open ? (0, import_utils5.funcAll)(onOpen, onFocusFirstOrSelected) : void 0
       };
@@ -757,4 +767,4 @@ const action = actions[ev.key];
       formControlProps.readOnly,
-      isFocused,
-      isOpen,
+      focused,
+      open,
       onOpen,
@@ -774,24 +784,17 @@ onFocusFirstOrSelected,
     ref: containerRef,
-    enabled: isOpen && closeOnBlur,
+    enabled: open && closeOnBlur,
     handler: onClose
   });
   (0, import_react3.useEffect)(() => {
-    if (!isMulti) return;
+    if (!multi) return;
     if (!omitSelectedValues && (0, import_utils5.isUndefined)(maxSelectValues)) return;
-    const isAll = value.length > 0 && value.length === descendants.count();
-    const isMax = value.length === maxSelectValues;
-    if (isAll || isMax) {
+    const all = value.length > 0 && value.length === descendants.count();
+    const max = value.length === maxSelectValues;
+    if (all || max) {
       onClose();
-      setIsAllSelected(true);
+      setAllSelected(true);
     } else {
-      setIsAllSelected(false);
+      setAllSelected(false);
     }
-  }, [
-    omitSelectedValues,
-    value,
-    descendants,
-    isMulti,
-    onClose,
-    maxSelectValues
-  ]);
+  }, [omitSelectedValues, value, descendants, multi, onClose, maxSelectValues]);
   (0, import_utils5.useSafeLayoutEffect)(() => {
@@ -801,4 +804,4 @@ onChangeLabel(value);
   (0, import_utils5.useUpdateEffect)(() => {
-    if (!isOpen) setFocusedIndex(-1);
-  }, [isOpen]);
+    if (!open) setFocusedIndex(-1);
+  }, [open]);
   (0, import_utils5.useUnmountEffect)(() => {
@@ -819,2 +822,3 @@ timeoutIds.current.forEach((id) => clearTimeout(id));
       isLazy,
+      lazy,
       lazyBehavior,
@@ -830,3 +834,3 @@ matchWidth,
       closeOnButton: false,
-      isOpen,
+      isOpen: open,
       trigger: "never",
@@ -840,2 +844,3 @@ onClose,
       closeDelay,
+      lazy,
       isLazy,
@@ -855,3 +860,3 @@ lazyBehavior,
       modifiers,
-      isOpen,
+      open,
       onOpen,
@@ -874,3 +879,3 @@ onClose
     ({ "aria-label": ariaLabel, ...props2 } = {}, ref = null) => {
-      ariaLabel != null ? ariaLabel : ariaLabel = placeholder != null ? placeholder : `Select ${isMulti ? "one or more options." : "an option."}`;
+      ariaLabel != null ? ariaLabel : ariaLabel = placeholder != null ? placeholder : `Select ${multi ? "one or more options." : "an option."}`;
       return {
@@ -885,5 +890,5 @@ ref: (0, import_utils5.mergeRefs)(fieldRef, ref),
         ...props2,
-        "data-active": (0, import_utils5.dataAttr)(isOpen),
+        "data-active": (0, import_utils5.dataAttr)(open),
         "data-placeholder": (0, import_utils5.dataAttr)(
-          !isMulti ? label === void 0 : !(label == null ? void 0 : label.length)
+          !multi ? label === void 0 : !(label == null ? void 0 : label.length)
         ),
@@ -897,4 +902,4 @@ onFocus: (0, import_utils5.handlerAll)(props2.onFocus, rest.onFocus, onFocus),
       fieldProps,
-      isOpen,
-      isMulti,
+      open,
+      multi,
       label,
@@ -912,8 +917,8 @@ placeholder,
     descendants,
+    empty,
     fieldRef,
     focusedIndex,
-    isEmpty,
-    isOpen,
     label,
     omitSelectedValues,
+    open,
     placeholder,
@@ -920,0 +925,0 @@ placeholderInOptions,

package.json

 {
   "name": "@yamada-ui/select",
-  "version": "1.8.6-dev-20241213204523",
+  "version": "1.8.6-dev-20241213210300",
   "description": "Yamada UI select component",
@@ -40,14 +40,14 @@ "keywords": [
   "dependencies": {
-    "@yamada-ui/core": "1.16.2-dev-20241213204523",
-    "@yamada-ui/form-control": "2.1.11-dev-20241213204523",
-    "@yamada-ui/icon": "1.1.17-dev-20241213204523",
-    "@yamada-ui/motion": "2.2.12-dev-20241213204523",
-    "@yamada-ui/popover": "1.4.7-dev-20241213204523",
-    "@yamada-ui/portal": "1.0.27-dev-20241213204523",
-    "@yamada-ui/use-clickable": "1.2.17-dev-20241213204523",
-    "@yamada-ui/use-controllable-state": "1.0.26-dev-20241213204523",
-    "@yamada-ui/use-descendant": "1.0.28-dev-20241213204523",
-    "@yamada-ui/use-disclosure": "1.1.3-dev-20241213204523",
-    "@yamada-ui/use-outside-click": "1.0.26-dev-20241213204523",
-    "@yamada-ui/utils": "1.6.2-dev-20241213204523"
+    "@yamada-ui/core": "1.16.2-dev-20241213210300",
+    "@yamada-ui/form-control": "2.1.11-dev-20241213210300",
+    "@yamada-ui/icon": "1.1.17-dev-20241213210300",
+    "@yamada-ui/motion": "2.2.12-dev-20241213210300",
+    "@yamada-ui/popover": "1.4.7-dev-20241213210300",
+    "@yamada-ui/portal": "1.0.27-dev-20241213210300",
+    "@yamada-ui/use-clickable": "1.2.17-dev-20241213210300",
+    "@yamada-ui/use-controllable-state": "1.0.26-dev-20241213210300",
+    "@yamada-ui/use-descendant": "1.0.28-dev-20241213210300",
+    "@yamada-ui/use-disclosure": "1.1.3-dev-20241213210300",
+    "@yamada-ui/use-outside-click": "1.0.26-dev-20241213210300",
+    "@yamada-ui/utils": "1.6.2-dev-20241213210300"
   },
@@ -54,0 +54,0 @@ "devDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

855141

increased by0.49%

Lines of code

8194

increased by0.68%

Dependency changes

• + Added@yamada-ui/close-button@1.0.51-dev-20241213210300(transitive)

• + Added@yamada-ui/core@1.16.2-dev-20241213210300(transitive)

• + Added@yamada-ui/form-control@2.1.11-dev-20241213210300(transitive)

• + Added@yamada-ui/icon@1.1.17-dev-20241213210300(transitive)

• + Added@yamada-ui/motion@2.2.12-dev-20241213210300(transitive)

• + Added@yamada-ui/popover@1.4.7-dev-20241213210300(transitive)

• + Added@yamada-ui/portal@1.0.27-dev-20241213210300(transitive)

• + Added@yamada-ui/ripple@1.0.48-dev-20241213210300(transitive)

• + Added@yamada-ui/transitions@1.1.15-dev-20241213210300(transitive)

• + Added@yamada-ui/use-animation@1.0.46-dev-20241213210300(transitive)

• + Added@yamada-ui/use-breakpoint@1.4.17-dev-20241213210300(transitive)

• + Added@yamada-ui/use-clickable@1.2.17-dev-20241213210300(transitive)

• + Added@yamada-ui/use-controllable-state@1.0.26-dev-20241213210300(transitive)

• + Added@yamada-ui/use-descendant@1.0.28-dev-20241213210300(transitive)

• + Added@yamada-ui/use-disclosure@1.1.3-dev-20241213210300(transitive)

• + Added@yamada-ui/use-event-listener@1.0.26-dev-20241213210300(transitive)

• + Added@yamada-ui/use-focus@1.0.27-dev-20241213210300(transitive)

• + Added@yamada-ui/use-outside-click@1.0.26-dev-20241213210300(transitive)

• + Added@yamada-ui/use-popper@1.0.46-dev-20241213210300(transitive)

• + Added@yamada-ui/use-token@1.1.34-dev-20241213210300(transitive)

• + Added@yamada-ui/use-value@1.1.34-dev-20241213210300(transitive)

• + Added@yamada-ui/utils@1.6.2-dev-20241213210300(transitive)

• + Added@yamada-ui/visually-hidden@1.0.20-dev-20241213210300(transitive)

• - Removed@yamada-ui/close-button@1.0.51-dev-20241213204523(transitive)

• - Removed@yamada-ui/core@1.16.2-dev-20241213204523(transitive)

• - Removed@yamada-ui/form-control@2.1.11-dev-20241213204523(transitive)

• - Removed@yamada-ui/icon@1.1.17-dev-20241213204523(transitive)

• - Removed@yamada-ui/motion@2.2.12-dev-20241213204523(transitive)

• - Removed@yamada-ui/popover@1.4.7-dev-20241213204523(transitive)

• - Removed@yamada-ui/portal@1.0.27-dev-20241213204523(transitive)

• - Removed@yamada-ui/ripple@1.0.48-dev-20241213204523(transitive)

• - Removed@yamada-ui/transitions@1.1.15-dev-20241213204523(transitive)

• - Removed@yamada-ui/use-animation@1.0.46-dev-20241213204523(transitive)

• - Removed@yamada-ui/use-breakpoint@1.4.17-dev-20241213204523(transitive)

• - Removed@yamada-ui/use-clickable@1.2.17-dev-20241213204523(transitive)

• - Removed@yamada-ui/use-controllable-state@1.0.26-dev-20241213204523(transitive)

• - Removed@yamada-ui/use-descendant@1.0.28-dev-20241213204523(transitive)

• - Removed@yamada-ui/use-disclosure@1.1.3-dev-20241213204523(transitive)

• - Removed@yamada-ui/use-event-listener@1.0.26-dev-20241213204523(transitive)

• - Removed@yamada-ui/use-focus@1.0.27-dev-20241213204523(transitive)

• - Removed@yamada-ui/use-outside-click@1.0.26-dev-20241213204523(transitive)

• - Removed@yamada-ui/use-popper@1.0.46-dev-20241213204523(transitive)

• - Removed@yamada-ui/use-token@1.1.34-dev-20241213204523(transitive)

• - Removed@yamada-ui/use-value@1.1.34-dev-20241213204523(transitive)

• - Removed@yamada-ui/utils@1.6.2-dev-20241213204523(transitive)

• - Removed@yamada-ui/visually-hidden@1.0.20-dev-20241213204523(transitive)

• Updated@yamada-ui/core@1.16.2-dev-20241213210300

• Updated@yamada-ui/form-control@2.1.11-dev-20241213210300

• Updated@yamada-ui/icon@1.1.17-dev-20241213210300

• Updated@yamada-ui/motion@2.2.12-dev-20241213210300

• Updated@yamada-ui/popover@1.4.7-dev-20241213210300

• Updated@yamada-ui/portal@1.0.27-dev-20241213210300

• Updated@yamada-ui/use-clickable@1.2.17-dev-20241213210300

• Updated@yamada-ui/use-controllable-state@1.0.26-dev-20241213210300

• Updated@yamada-ui/use-descendant@1.0.28-dev-20241213210300

• Updated@yamada-ui/use-disclosure@1.1.3-dev-20241213210300

• Updated@yamada-ui/use-outside-click@1.0.26-dev-20241213210300

• Updated@yamada-ui/utils@1.6.2-dev-20241213210300