@mezzanine-ui/react 0.13.10 → 0.13.12

package/Radio/Radio.js

@@ -8,27 +8,27 @@ import InputCheck from '../_internal/InputCheck/InputCheck.js';
 import { FormControlContext } from '../Form/FormControlContext.js';
 import cx from 'clsx';
 
-/**
- * The react component for `mezzanine` radio.
- */
-const Radio = forwardRef(function Radio(props, ref) {
-    const { size: globalSize, } = useContext(MezzanineConfig);
-    const { disabled: disabledFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const radioGroup = useContext(RadioGroupContext);
-    const { disabled: disabledFromGroup, name: nameFromGroup, size: sizeFromGroup, } = radioGroup || {};
-    const { checked: checkedProp, children, defaultChecked, disabled = (disabledFromGroup !== null && disabledFromGroup !== void 0 ? disabledFromGroup : disabledFromFormControl) || false, error = severity === 'error' || false, inputProps, onChange: onChangeProp, size = sizeFromGroup || globalSize, value, ...rest } = props;
-    const { id: inputId, name = nameFromGroup, ...restInputProps } = inputProps || {};
-    const [checked, onChange] = useRadioControlValue({
-        checked: checkedProp,
-        defaultChecked,
-        onChange: onChangeProp,
-        radioGroup,
-        value,
-    });
-    return (jsx(InputCheck, { ...rest, ref: ref, control: (jsx("span", { className: cx(radioClasses.host, {
-                [radioClasses.checked]: checked,
-            }), children: jsx("input", { ...restInputProps, "aria-checked": checked, "aria-disabled": disabled, checked: checked, disabled: disabled, id: inputId, onChange: onChange, name: name, type: "radio", value: value }) })), disabled: disabled, error: error, htmlFor: inputId, size: size, children: children }));
-});
+/**
+ * The react component for `mezzanine` radio.
+ */
+const Radio = forwardRef(function Radio(props, ref) {
+    const { size: globalSize, } = useContext(MezzanineConfig);
+    const { disabled: disabledFromFormControl, severity, } = useContext(FormControlContext) || {};
+    const radioGroup = useContext(RadioGroupContext);
+    const { disabled: disabledFromGroup, name: nameFromGroup, size: sizeFromGroup, } = radioGroup || {};
+    const { checked: checkedProp, children, defaultChecked, disabled = (disabledFromGroup !== null && disabledFromGroup !== void 0 ? disabledFromGroup : disabledFromFormControl) || false, error = severity === 'error' || false, inputProps, onChange: onChangeProp, size = sizeFromGroup || globalSize, value, ...rest } = props;
+    const { id: inputId, name = nameFromGroup, ...restInputProps } = inputProps || {};
+    const [checked, onChange] = useRadioControlValue({
+        checked: checkedProp,
+        defaultChecked,
+        onChange: onChangeProp,
+        radioGroup,
+        value,
+    });
+    return (jsx(InputCheck, { ...rest, ref: ref, control: (jsx("span", { className: cx(radioClasses.host, {
+                [radioClasses.checked]: checked,
+            }), children: jsx("input", { ...restInputProps, "aria-checked": checked, "aria-disabled": disabled, checked: checked, disabled: disabled, id: inputId, onChange: onChange, name: name, type: "radio", value: value }) })), disabled: disabled, error: error, htmlFor: inputId, size: size, children: children }));
+});
 var Radio$1 = Radio;
 
 export { Radio$1 as default };

package/Radio/RadioGroup.d.ts

@@ -1,47 +1,47 @@
-import { RadioGroupOption, RadioSize } from '@mezzanine-ui/core/radio';
-import { ChangeEventHandler, ReactNode } from 'react';
-import { InputCheckGroupProps } from '../_internal/InputCheck';
-export interface RadioGroupProps extends Omit<InputCheckGroupProps, 'onChange'> {
-    /**
-     * The radios in radio group.
-     */
-    children?: ReactNode;
-    /**
-     * The default value of radio group.
-     */
-    defaultValue?: string;
-    /**
-     * Whether the radio group is disabled.
-     * Control the disabled of radios in group if disabled not passed to radio.
-     */
-    disabled?: boolean;
-    /**
-     * The name of radio group.
-     * Control the name of radios in group if name not passed to radio.
-     */
-    name?: string;
-    /**
-     * The onChange of radio group.
-     * Will be passed to each radios but composing both instead of overriding.
-     */
-    onChange?: ChangeEventHandler<HTMLInputElement>;
-    /**
-     * The options of radio group.
-     * Will be ignored if children passed.
-     */
-    options?: RadioGroupOption[];
-    /**
-     * The size of radio group.
-     * Control the size of radios in group if size not passed to radio.
-     */
-    size?: RadioSize;
-    /**
-     * The value of radio group.
-     */
-    value?: string;
-}
-/**
- * The react component for `mezzanine` radio group.
- */
-declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
-export default RadioGroup;
+import { RadioGroupOption, RadioSize } from '@mezzanine-ui/core/radio';
+import { ChangeEventHandler, ReactNode } from 'react';
+import { InputCheckGroupProps } from '../_internal/InputCheck';
+export interface RadioGroupProps extends Omit<InputCheckGroupProps, 'onChange'> {
+    /**
+     * The radios in radio group.
+     */
+    children?: ReactNode;
+    /**
+     * The default value of radio group.
+     */
+    defaultValue?: string;
+    /**
+     * Whether the radio group is disabled.
+     * Control the disabled of radios in group if disabled not passed to radio.
+     */
+    disabled?: boolean;
+    /**
+     * The name of radio group.
+     * Control the name of radios in group if name not passed to radio.
+     */
+    name?: string;
+    /**
+     * The onChange of radio group.
+     * Will be passed to each radios but composing both instead of overriding.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * The options of radio group.
+     * Will be ignored if children passed.
+     */
+    options?: RadioGroupOption[];
+    /**
+     * The size of radio group.
+     * Control the size of radios in group if size not passed to radio.
+     */
+    size?: RadioSize;
+    /**
+     * The value of radio group.
+     */
+    value?: string;
+}
+/**
+ * The react component for `mezzanine` radio group.
+ */
+declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export default RadioGroup;

package/Radio/RadioGroup.js

@@ -5,26 +5,26 @@ import { RadioGroupContext } from './RadioGroupContext.js';
 import Radio from './Radio.js';
 import InputCheckGroup from '../_internal/InputCheck/InputCheckGroup.js';
 
-/**
- * The react component for `mezzanine` radio group.
- */
-const RadioGroup = forwardRef(function RadioGroup(props, ref) {
-    const { children: childrenProp, defaultValue, disabled, name, options = [], onChange: onChangeProp, size, value: valueProp, ...rest } = props;
-    const [value, onChange] = useInputControlValue({
-        defaultValue,
-        onChange: onChangeProp,
-        value: valueProp,
-    });
-    const context = useMemo(() => ({
-        disabled,
-        name,
-        onChange,
-        size,
-        value,
-    }), [disabled, name, onChange, size, value]);
-    const children = childrenProp || options.map((option) => (jsx(Radio, { disabled: option.disabled, value: option.value, children: option.label }, option.value)));
-    return (jsx(RadioGroupContext.Provider, { value: context, children: jsx(InputCheckGroup, { ...rest, ref: ref, role: "radiogroup", children: children }) }));
-});
+/**
+ * The react component for `mezzanine` radio group.
+ */
+const RadioGroup = forwardRef(function RadioGroup(props, ref) {
+    const { children: childrenProp, defaultValue, disabled, name, options = [], onChange: onChangeProp, size, value: valueProp, ...rest } = props;
+    const [value, onChange] = useInputControlValue({
+        defaultValue,
+        onChange: onChangeProp,
+        value: valueProp,
+    });
+    const context = useMemo(() => ({
+        disabled,
+        name,
+        onChange,
+        size,
+        value,
+    }), [disabled, name, onChange, size, value]);
+    const children = childrenProp || options.map((option) => (jsx(Radio, { disabled: option.disabled, value: option.value, children: option.label }, option.value)));
+    return (jsx(RadioGroupContext.Provider, { value: context, children: jsx(InputCheckGroup, { ...rest, ref: ref, role: "radiogroup", children: children }) }));
+});
 var RadioGroup$1 = RadioGroup;
 
 export { RadioGroup$1 as default };

package/Radio/RadioGroupContext.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-import { RadioSize } from '@mezzanine-ui/core/radio';
-import { RadioGroupControlContextValue } from '../Form/useRadioControlValue';
-export interface RadioGroupContextValue extends RadioGroupControlContextValue {
-    disabled?: boolean;
-    name?: string;
-    size?: RadioSize;
-}
-export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | undefined>;
+/// <reference types="react" />
+import { RadioSize } from '@mezzanine-ui/core/radio';
+import { RadioGroupControlContextValue } from '../Form/useRadioControlValue';
+export interface RadioGroupContextValue extends RadioGroupControlContextValue {
+    disabled?: boolean;
+    name?: string;
+    size?: RadioSize;
+}
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | undefined>;

package/Radio/index.d.ts

@@ -1,3 +1,3 @@
-export type { RadioSize, RadioGroupOption, RadioGroupOrientation, } from '@mezzanine-ui/core/radio';
-export { RadioProps, default, } from './Radio';
-export { RadioGroupProps, default as RadioGroup, } from './RadioGroup';
+export type { RadioSize, RadioGroupOption, RadioGroupOrientation, } from '@mezzanine-ui/core/radio';
+export { RadioProps, default, } from './Radio';
+export { RadioGroupProps, default as RadioGroup, } from './RadioGroup';

package/Select/AutoComplete.d.ts

@@ -1,101 +1,101 @@
-/// <reference types="react" />
-import { SelectInputSize } from '@mezzanine-ui/core/select';
-import { SelectValue } from './typings';
-import { MenuProps } from '../Menu';
-import { PopperProps } from '../Popper';
-import { PickRenameMulti } from '../utils/general';
-import { SelectTriggerProps, SelectTriggerInputProps } from './SelectTrigger';
-export interface AutoCompleteBaseProps extends Omit<SelectTriggerProps, 'active' | 'clearable' | 'forceHideSuffixActionIcon' | 'mode' | 'onClick' | 'onKeyDown' | 'onChange' | 'renderValue' | 'inputProps' | 'suffixActionIcon' | 'value'>, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
-    maxHeight: 'menuMaxHeight';
-    role: 'menuRole';
-    size: 'menuSize';
-}>, PickRenameMulti<Pick<PopperProps, 'options'>, {
-    options: 'popperOptions';
-}> {
-    /**
-     * Set to true when options can be added dynamically
-     * @default false
-     */
-    addable?: boolean;
-    /**
-     * Should the filter rules be disabled (If you need to control options filter by yourself)
-     * @default false
-     */
-    disabledOptionsFilter?: boolean;
-    /**
-     * The other native props for input element.
-     */
-    inputProps?: Omit<SelectTriggerInputProps, 'onChange' | 'placeholder' | 'role' | 'value' | `aria-${'controls' | 'expanded' | 'owns'}`>;
-    /**
-     * insert callback whenever insert icon is clicked
-     * return `true` when insert is successfully
-     */
-    onInsert?(text: string): SelectValue;
-    /**
-     * The search event handler
-     */
-    onSearch?(input: string): any;
-    /**
-     * The options that mapped autocomplete options
-     */
-    options: SelectValue[];
-    /**
-     * select input placeholder
-     */
-    placeholder?: string;
-    /**
-     * Whether the selection is required.
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * The size of input.
-     */
-    size?: SelectInputSize;
-}
-export declare type AutoCompleteMultipleProps = AutoCompleteBaseProps & {
-    /**
-     * The default selection
-     */
-    defaultValue?: SelectValue[];
-    /**
-     * Controls the layout of trigger.
-     */
-    mode: 'multiple';
-    /**
-     * The change event handler of input element.
-     */
-    onChange?(newOptions: SelectValue[]): any;
-    /**
-     * The value of selection.
-     * @default undefined
-     */
-    value?: SelectValue[];
-};
-export declare type AutoCompleteSingleProps = AutoCompleteBaseProps & {
-    /**
-     * The default selection
-     */
-    defaultValue?: SelectValue;
-    /**
-     * Controls the layout of trigger.
-     */
-    mode?: 'single';
-    /**
-     * The change event handler of input element.
-     */
-    onChange?(newOptions: SelectValue): any;
-    /**
-     * The value of selection.
-     * @default undefined
-     */
-    value?: SelectValue | null;
-};
-export declare type AutoCompleteProps = AutoCompleteMultipleProps | AutoCompleteSingleProps;
-/**
- * The AutoComplete component for react. <br />
- * Note that if you need search for ONLY given options, not included your typings,
- * should considering using the `Select` component with `onSearch` prop.
- */
-declare const AutoComplete: import("react").ForwardRefExoticComponent<AutoCompleteProps & import("react").RefAttributes<HTMLDivElement>>;
-export default AutoComplete;
+/// <reference types="react" />
+import { SelectInputSize } from '@mezzanine-ui/core/select';
+import { SelectValue } from './typings';
+import { MenuProps } from '../Menu';
+import { PopperProps } from '../Popper';
+import { PickRenameMulti } from '../utils/general';
+import { SelectTriggerProps, SelectTriggerInputProps } from './SelectTrigger';
+export interface AutoCompleteBaseProps extends Omit<SelectTriggerProps, 'active' | 'clearable' | 'forceHideSuffixActionIcon' | 'mode' | 'onClick' | 'onKeyDown' | 'onChange' | 'renderValue' | 'inputProps' | 'suffixActionIcon' | 'value'>, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
+    maxHeight: 'menuMaxHeight';
+    role: 'menuRole';
+    size: 'menuSize';
+}>, PickRenameMulti<Pick<PopperProps, 'options'>, {
+    options: 'popperOptions';
+}> {
+    /**
+     * Set to true when options can be added dynamically
+     * @default false
+     */
+    addable?: boolean;
+    /**
+     * Should the filter rules be disabled (If you need to control options filter by yourself)
+     * @default false
+     */
+    disabledOptionsFilter?: boolean;
+    /**
+     * The other native props for input element.
+     */
+    inputProps?: Omit<SelectTriggerInputProps, 'onChange' | 'placeholder' | 'role' | 'value' | `aria-${'controls' | 'expanded' | 'owns'}`>;
+    /**
+     * insert callback whenever insert icon is clicked
+     * return `true` when insert is successfully
+     */
+    onInsert?(text: string): SelectValue;
+    /**
+     * The search event handler
+     */
+    onSearch?(input: string): any;
+    /**
+     * The options that mapped autocomplete options
+     */
+    options: SelectValue[];
+    /**
+     * select input placeholder
+     */
+    placeholder?: string;
+    /**
+     * Whether the selection is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The size of input.
+     */
+    size?: SelectInputSize;
+}
+export type AutoCompleteMultipleProps = AutoCompleteBaseProps & {
+    /**
+     * The default selection
+     */
+    defaultValue?: SelectValue[];
+    /**
+     * Controls the layout of trigger.
+     */
+    mode: 'multiple';
+    /**
+     * The change event handler of input element.
+     */
+    onChange?(newOptions: SelectValue[]): any;
+    /**
+     * The value of selection.
+     * @default undefined
+     */
+    value?: SelectValue[];
+};
+export type AutoCompleteSingleProps = AutoCompleteBaseProps & {
+    /**
+     * The default selection
+     */
+    defaultValue?: SelectValue;
+    /**
+     * Controls the layout of trigger.
+     */
+    mode?: 'single';
+    /**
+     * The change event handler of input element.
+     */
+    onChange?(newOptions: SelectValue): any;
+    /**
+     * The value of selection.
+     * @default undefined
+     */
+    value?: SelectValue | null;
+};
+export type AutoCompleteProps = AutoCompleteMultipleProps | AutoCompleteSingleProps;
+/**
+ * The AutoComplete component for react. <br />
+ * Note that if you need search for ONLY given options, not included your typings,
+ * should considering using the `Select` component with `onSearch` prop.
+ */
+declare const AutoComplete: import("react").ForwardRefExoticComponent<AutoCompleteProps & import("react").RefAttributes<HTMLDivElement>>;
+export default AutoComplete;

package/Select/AutoComplete.js

@@ -15,107 +15,107 @@ import Icon from '../Icon/Icon.js';
 import { FormControlContext } from '../Form/FormControlContext.js';
 import cx from 'clsx';
 
-const MENU_ID = 'mzn-select-autocomplete-menu-id';
-/**
- * The AutoComplete component for react. <br />
- * Note that if you need search for ONLY given options, not included your typings,
- * should considering using the `Select` component with `onSearch` prop.
- */
-const AutoComplete = forwardRef(function Select(props, ref) {
-    var _a, _b;
-    const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { addable = false, className, disabled = disabledFromFormControl || false, disabledOptionsFilter = false, defaultValue, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputRef, inputProps, itemsInView = 4, menuMaxHeight, menuRole = 'listbox', menuSize, mode = 'single', onChange: onChangeProp, onClear: onClearProp, onInsert, onSearch, options: optionsProp, popperOptions = {}, placeholder = '', prefix, required = requiredFromFormControl || false, size, value: valueProp, } = props;
-    const [open, toggleOpen] = useState(false);
-    const { focused, onFocus, onChange, onClear, options, searchText, selectedOptions, setSearchText, unselectedOptions, value, } = useAutoCompleteValueControl({
-        defaultValue,
-        disabledOptionsFilter,
-        mode,
-        onChange: onChangeProp,
-        onClear: onClearProp,
-        onClose: () => toggleOpen(false),
-        onSearch,
-        options: optionsProp,
-        value: valueProp,
-    });
-    /** insert feature */
-    const [insertText, setInsertText] = useState('');
-    const nodeRef = useRef(null);
-    const controlRef = useRef(null);
-    const popperRef = useRef(null);
-    const composedRef = useComposeRefs([ref, controlRef]);
-    const renderValue = focused ? () => searchText : undefined;
-    useClickAway(() => {
-        if (!open || focused)
-            return;
-        return () => {
-            toggleOpen((prev) => !prev);
-        };
-    }, nodeRef, [
-        focused,
-        nodeRef,
-        open,
-        toggleOpen,
-    ]);
-    function getPlaceholder() {
-        if (focused && value && !isArray(value)) {
-            return value.name;
-        }
-        return placeholder;
-    }
-    /** Trigger input props */
-    const onSearchInputChange = (e) => {
-        /** should sync both search input and value */
-        setSearchText(e.target.value);
-        setInsertText(e.target.value);
-        /** return current value to onSearch */
-        onSearch === null || onSearch === void 0 ? void 0 : onSearch(e.target.value);
-    };
-    const onSearchInputFocus = (e) => {
-        var _a;
-        e.stopPropagation();
-        toggleOpen(true);
-        onFocus(true);
-        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
-    };
-    const onSearchInputBlur = (e) => {
-        var _a;
-        onFocus(false);
-        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
-    };
-    const onClickSuffixActionIcon = () => {
-        toggleOpen((prev) => !prev);
-    };
-    const resolvedInputProps = {
-        ...inputProps,
-        'aria-controls': MENU_ID,
-        'aria-expanded': open,
-        'aria-owns': MENU_ID,
-        onBlur: onSearchInputBlur,
-        onChange: onSearchInputChange,
-        onFocus: onSearchInputFocus,
-        placeholder: getPlaceholder(),
-        role: 'combobox',
-    };
-    const searchTextExistWithoutOption = !!searchText && options.find((option) => option.name === searchText) === undefined;
-    const context = useMemo(() => ({
-        onChange,
-        value,
-    }), [onChange, value]);
-    return (jsx(SelectControlContext.Provider, { value: context, children: jsxs("div", { ref: nodeRef, className: cx(selectClasses.host, {
-                [selectClasses.hostFullWidth]: fullWidth,
-            }), children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: true, disabled: disabled, ellipsis: true, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, prefix: prefix, readOnly: false, required: required, inputProps: resolvedInputProps, searchText: searchText, size: size, showTextInputAfterTags: true, suffixAction: onClickSuffixActionIcon, value: value, renderValue: renderValue }), jsxs(InputTriggerPopper, { ref: popperRef, anchor: controlRef, className: selectClasses.popper, open: open, sameWidth: true, options: popperOptions, children: [options.length ? (jsx(Menu, { id: MENU_ID, "aria-activedescendant": Array.isArray(value) ? (_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '' : value === null || value === void 0 ? void 0 : value.id, itemsInView: itemsInView, maxHeight: menuMaxHeight, role: menuRole, size: menuSize, style: { border: 0 }, children: mode === 'single' ? (jsx(Fragment, { children: options.map((option) => (jsx(Option, { value: option.id, children: option.name }, option.id))) })) : (jsxs(Fragment, { children: [selectedOptions.map((option) => (jsx(Option, { value: option.id, children: option.name }, option.id))), unselectedOptions.map((option) => (jsx(Option, { value: option.id, children: option.name }, option.id)))] })) })) : null, searchTextExistWithoutOption && addable ? (jsxs("button", { type: "button", className: selectClasses.autoComplete, onClick: (e) => {
-                                var _a;
-                                e.stopPropagation();
-                                if (insertText) {
-                                    const newOption = (_a = onInsert === null || onInsert === void 0 ? void 0 : onInsert(insertText)) !== null && _a !== void 0 ? _a : null;
-                                    if (newOption) {
-                                        setInsertText('');
-                                        setSearchText('');
-                                        onChange(newOption);
-                                    }
-                                }
-                            }, children: [jsx("p", { children: insertText }), jsx(Icon, { className: selectClasses.autoCompleteIcon, icon: PlusIcon })] })) : null] })] }) }));
-});
+const MENU_ID = 'mzn-select-autocomplete-menu-id';
+/**
+ * The AutoComplete component for react. <br />
+ * Note that if you need search for ONLY given options, not included your typings,
+ * should considering using the `Select` component with `onSearch` prop.
+ */
+const AutoComplete = forwardRef(function Select(props, ref) {
+    var _a, _b;
+    const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
+    const { addable = false, className, disabled = disabledFromFormControl || false, disabledOptionsFilter = false, defaultValue, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputRef, inputProps, itemsInView = 4, menuMaxHeight, menuRole = 'listbox', menuSize, mode = 'single', onChange: onChangeProp, onClear: onClearProp, onInsert, onSearch, options: optionsProp, popperOptions = {}, placeholder = '', prefix, required = requiredFromFormControl || false, size, value: valueProp, } = props;
+    const [open, toggleOpen] = useState(false);
+    const { focused, onFocus, onChange, onClear, options, searchText, selectedOptions, setSearchText, unselectedOptions, value, } = useAutoCompleteValueControl({
+        defaultValue,
+        disabledOptionsFilter,
+        mode,
+        onChange: onChangeProp,
+        onClear: onClearProp,
+        onClose: () => toggleOpen(false),
+        onSearch,
+        options: optionsProp,
+        value: valueProp,
+    });
+    /** insert feature */
+    const [insertText, setInsertText] = useState('');
+    const nodeRef = useRef(null);
+    const controlRef = useRef(null);
+    const popperRef = useRef(null);
+    const composedRef = useComposeRefs([ref, controlRef]);
+    const renderValue = focused ? () => searchText : undefined;
+    useClickAway(() => {
+        if (!open || focused)
+            return;
+        return () => {
+            toggleOpen((prev) => !prev);
+        };
+    }, nodeRef, [
+        focused,
+        nodeRef,
+        open,
+        toggleOpen,
+    ]);
+    function getPlaceholder() {
+        if (focused && value && !isArray(value)) {
+            return value.name;
+        }
+        return placeholder;
+    }
+    /** Trigger input props */
+    const onSearchInputChange = (e) => {
+        /** should sync both search input and value */
+        setSearchText(e.target.value);
+        setInsertText(e.target.value);
+        /** return current value to onSearch */
+        onSearch === null || onSearch === void 0 ? void 0 : onSearch(e.target.value);
+    };
+    const onSearchInputFocus = (e) => {
+        var _a;
+        e.stopPropagation();
+        toggleOpen(true);
+        onFocus(true);
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+    };
+    const onSearchInputBlur = (e) => {
+        var _a;
+        onFocus(false);
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+    };
+    const onClickSuffixActionIcon = () => {
+        toggleOpen((prev) => !prev);
+    };
+    const resolvedInputProps = {
+        ...inputProps,
+        'aria-controls': MENU_ID,
+        'aria-expanded': open,
+        'aria-owns': MENU_ID,
+        onBlur: onSearchInputBlur,
+        onChange: onSearchInputChange,
+        onFocus: onSearchInputFocus,
+        placeholder: getPlaceholder(),
+        role: 'combobox',
+    };
+    const searchTextExistWithoutOption = !!searchText && options.find((option) => option.name === searchText) === undefined;
+    const context = useMemo(() => ({
+        onChange,
+        value,
+    }), [onChange, value]);
+    return (jsx(SelectControlContext.Provider, { value: context, children: jsxs("div", { ref: nodeRef, className: cx(selectClasses.host, {
+                [selectClasses.hostFullWidth]: fullWidth,
+            }), children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: true, disabled: disabled, ellipsis: true, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, prefix: prefix, readOnly: false, required: required, inputProps: resolvedInputProps, searchText: searchText, size: size, showTextInputAfterTags: true, suffixAction: onClickSuffixActionIcon, value: value, renderValue: renderValue }), jsxs(InputTriggerPopper, { ref: popperRef, anchor: controlRef, className: selectClasses.popper, open: open, sameWidth: true, options: popperOptions, children: [options.length ? (jsx(Menu, { id: MENU_ID, "aria-activedescendant": Array.isArray(value) ? (_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '' : value === null || value === void 0 ? void 0 : value.id, itemsInView: itemsInView, maxHeight: menuMaxHeight, role: menuRole, size: menuSize, style: { border: 0 }, children: mode === 'single' ? (jsx(Fragment, { children: options.map((option) => (jsx(Option, { value: option.id, children: option.name }, option.id))) })) : (jsxs(Fragment, { children: [selectedOptions.map((option) => (jsx(Option, { value: option.id, children: option.name }, option.id))), unselectedOptions.map((option) => (jsx(Option, { value: option.id, children: option.name }, option.id)))] })) })) : null, searchTextExistWithoutOption && addable ? (jsxs("button", { type: "button", className: selectClasses.autoComplete, onClick: (e) => {
+                                var _a;
+                                e.stopPropagation();
+                                if (insertText) {
+                                    const newOption = (_a = onInsert === null || onInsert === void 0 ? void 0 : onInsert(insertText)) !== null && _a !== void 0 ? _a : null;
+                                    if (newOption) {
+                                        setInsertText('');
+                                        setSearchText('');
+                                        onChange(newOption);
+                                    }
+                                }
+                            }, children: [jsx("p", { children: insertText }), jsx(Icon, { className: selectClasses.autoCompleteIcon, icon: PlusIcon })] })) : null] })] }) }));
+});
 var AutoComplete$1 = AutoComplete;
 
 export { AutoComplete$1 as default };