@mezzanine-ui/react 0.9.2 → 0.10.0

package/Pagination/PaginationJumper.js

@@ -38,15 +38,13 @@ const PaginationJumper = forwardRef((props, ref) => {
             handleClick();
         }
     };
-    return (jsxs("div", Object.assign({}, rest, { ref: ref, className: cx(paginationJumperClasses.host, className) }, { children: [jsx(Typography, Object.assign({ color: disabled ? 'text-disabled' : 'text-primary', component: "div", ellipsis: true, variant: "input2" }, { children: hintText }), void 0),
-            jsx(Input, { disabled: disabled, error: error, onChange: (e) => {
+    return (jsxs("div", { ...rest, ref: ref, className: cx(paginationJumperClasses.host, className), children: [jsx(Typography, { color: disabled ? 'text-disabled' : 'text-primary', component: "div", ellipsis: true, variant: "input2", children: hintText }), jsx(Input, { disabled: disabled, error: error, onChange: (e) => {
                     setValue(e.target.value);
                 }, placeholder: inputPlaceholder, inputProps: {
                     type: 'number',
                     className: paginationJumperClasses.input,
                     onKeyDown: handleKeyDown,
-                }, value: value }, void 0),
-            jsx(Button, Object.assign({ disabled: disabled, onClick: handleClick }, { children: buttonText }), void 0)] }), void 0));
+                }, value: value }), jsx(Button, { disabled: disabled, onClick: handleClick, children: buttonText })] }));
 });
 var PaginationJumper$1 = PaginationJumper;
 

package/Picker/PickerTrigger.js

@@ -9,7 +9,7 @@ import cx from 'clsx';
  */
 const PickerTrigger = forwardRef(function PickerTrigger(props, ref) {
     const { className, disabled, inputProps, inputRef, onChange, placeholder, readOnly, required, value, ...restTextFieldProps } = props;
-    return (jsx(TextField, Object.assign({}, restTextFieldProps, { ref: ref, active: !!value, className: cx(pickerClasses.host, className), disabled: disabled }, { children: jsx("input", Object.assign({}, inputProps, { ref: inputRef, "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, onChange: onChange, placeholder: placeholder, readOnly: readOnly, required: required, value: value }), void 0) }), void 0));
+    return (jsx(TextField, { ...restTextFieldProps, ref: ref, active: !!value, className: cx(pickerClasses.host, className), disabled: disabled, children: jsx("input", { ...inputProps, ref: inputRef, "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, onChange: onChange, placeholder: placeholder, readOnly: readOnly, required: required, value: value }) }));
 });
 var PickerTrigger$1 = PickerTrigger;
 

package/Picker/RangePickerTrigger.js

@@ -11,9 +11,7 @@ import cx from 'clsx';
  */
 const RangePickerTrigger = forwardRef(function DateRangePickerTrigger(props, ref) {
     const { className, disabled, inputFromPlaceholder, inputFromProps, inputFromRef, inputFromValue, inputToPlaceholder, inputToProps, inputToRef, inputToValue, onIconClick, onInputFromChange, onInputToChange, readOnly, required, ...restTextFieldProps } = props;
-    return (jsxs(TextField, Object.assign({}, restTextFieldProps, { ref: ref, active: !!inputFromValue || !!inputToValue, className: cx(pickerClasses.host, className), disabled: disabled }, { children: [jsx("input", Object.assign({}, inputFromProps, { ref: inputFromRef, "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, onChange: onInputFromChange, placeholder: inputFromPlaceholder, readOnly: readOnly, required: required, value: inputFromValue }), void 0),
-            jsx(Icon, { icon: ArrowRightIcon, className: pickerClasses.arrowIcon }, void 0),
-            jsx("input", Object.assign({}, inputToProps, { ref: inputToRef, "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, onChange: onInputToChange, placeholder: inputToPlaceholder, readOnly: readOnly, required: required, value: inputToValue }), void 0)] }), void 0));
+    return (jsxs(TextField, { ...restTextFieldProps, ref: ref, active: !!inputFromValue || !!inputToValue, className: cx(pickerClasses.host, className), disabled: disabled, children: [jsx("input", { ...inputFromProps, ref: inputFromRef, "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, onChange: onInputFromChange, placeholder: inputFromPlaceholder, readOnly: readOnly, required: required, value: inputFromValue }), jsx(Icon, { icon: ArrowRightIcon, className: pickerClasses.arrowIcon }), jsx("input", { ...inputToProps, ref: inputToRef, "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, onChange: onInputToChange, placeholder: inputToPlaceholder, readOnly: readOnly, required: required, value: inputToValue })] }));
 });
 var RangePickerTrigger$1 = RangePickerTrigger;
 

package/Picker/usePickerInputValue.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ChangeEventHandler } from 'react';
 export interface UsePickerInputValueProps {
     defaultValue?: string;
     initialValue?: string;
@@ -6,7 +6,7 @@ export interface UsePickerInputValueProps {
 }
 export declare function usePickerInputValue(props?: UsePickerInputValueProps): {
     inputValue: string;
-    inputChangeHandler: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
+    inputChangeHandler: ChangeEventHandler<HTMLInputElement>;
     onChange: import("react").Dispatch<import("react").SetStateAction<string>>;
 };
 export default usePickerInputValue;

package/Picker/usePickerValue.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="moment" />
 import { DateType } from '@mezzanine-ui/core/calendar';
-import { RefObject } from 'react';
+import { FocusEventHandler, KeyboardEventHandler, RefObject } from 'react';
 export declare type UsePickerValueProps = {
     defaultValue?: DateType;
     format: string;
@@ -13,9 +12,9 @@ export declare type UsePickerValueProps = {
  */
 export declare function usePickerValue({ defaultValue, format, formats, inputRef, value: valueProp, }: UsePickerValueProps): {
     inputValue: string;
-    onBlur: (event: import("react").FocusEvent<HTMLInputElement, Element>) => void;
-    onChange: (val?: import("moment").Moment | undefined) => void;
-    onInputChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
-    onKeyDown: (event: import("react").KeyboardEvent<HTMLInputElement>) => void;
-    value: import("moment").Moment | undefined;
+    onBlur: FocusEventHandler<HTMLInputElement>;
+    onChange: (val?: string | undefined) => void;
+    onInputChange: import("react").ChangeEventHandler<HTMLInputElement>;
+    onKeyDown: KeyboardEventHandler<HTMLInputElement>;
+    value: string | undefined;
 };

package/Picker/useRangePickerValue.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="moment" />
 import { RangePickerPickingValue, RangePickerValue } from '@mezzanine-ui/core/picker';
-import { RefObject } from 'react';
+import { ChangeEventHandler, KeyboardEventHandler, RefObject } from 'react';
 import { UsePickerValueProps } from './usePickerValue';
 export interface UseRangePickerValueProps extends Pick<UsePickerValueProps, 'format' | 'formats'> {
     inputFromRef: RefObject<HTMLInputElement>;
@@ -10,12 +9,12 @@ export interface UseRangePickerValueProps extends Pick<UsePickerValueProps, 'for
 export declare function useRangePickerValue({ format, formats, inputFromRef, inputToRef, value: valueProp, }: UseRangePickerValueProps): {
     inputFromValue: string;
     inputToValue: string;
-    onChange: (target?: undefined[] | [import("moment").Moment, import("moment").Moment] | [import("moment").Moment] | [undefined, import("moment").Moment] | [import("moment").Moment, undefined] | undefined) => RangePickerPickingValue | undefined;
-    onFromBlur: (event: import("react").FocusEvent<HTMLInputElement, Element>) => void;
-    onFromKeyDown: (event: import("react").KeyboardEvent<HTMLInputElement>) => void;
-    onInputFromChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
-    onInputToChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
-    onToBlur: (event: import("react").FocusEvent<HTMLInputElement, Element>) => void;
-    onToKeyDown: (event: import("react").KeyboardEvent<HTMLInputElement>) => void;
-    value: RangePickerPickingValue;
+    onChange: (target?: RangePickerPickingValue<string> | undefined) => RangePickerPickingValue | undefined;
+    onFromBlur: import("react").FocusEventHandler<HTMLInputElement>;
+    onFromKeyDown: KeyboardEventHandler<HTMLInputElement>;
+    onInputFromChange: ChangeEventHandler<HTMLInputElement>;
+    onInputToChange: ChangeEventHandler<HTMLInputElement>;
+    onToBlur: import("react").FocusEventHandler<HTMLInputElement>;
+    onToKeyDown: KeyboardEventHandler<HTMLInputElement>;
+    value: RangePickerPickingValue<string>;
 };

package/Popconfirm/Popconfirm.js

@@ -9,7 +9,7 @@ import cx from 'clsx';
 
 const Popconfirm = forwardRef(function Popconfirm(props, ref) {
     const { className, container, cancelButtonProps, cancelText, confirmButtonProps, confirmText, icon = ExclamationCircleFilledIcon, onCancel, onConfirm, title, ...rest } = props;
-    return (jsx(Popover, Object.assign({}, rest, { ref: ref, className: cx(popConfirmClasses.host, className), title: (jsxs(Fragment, { children: [jsx(Icon, { className: popConfirmClasses.icon, icon: icon }, void 0), title] }, void 0)) }, { children: jsx(ConfirmActions, { cancelButtonProps: cancelButtonProps, cancelText: cancelText, confirmButtonProps: confirmButtonProps, confirmText: confirmText, onCancel: onCancel, onConfirm: onConfirm, size: "small" }, void 0) }), void 0));
+    return (jsx(Popover, { ...rest, ref: ref, className: cx(popConfirmClasses.host, className), title: (jsxs(Fragment, { children: [jsx(Icon, { className: popConfirmClasses.icon, icon: icon }), title] })), children: jsx(ConfirmActions, { cancelButtonProps: cancelButtonProps, cancelText: cancelText, confirmButtonProps: confirmButtonProps, confirmText: confirmText, onCancel: onCancel, onConfirm: onConfirm, size: "small" }) }));
 });
 var Popconfirm$1 = Popconfirm;
 

package/Popover/Popover.js

@@ -35,11 +35,10 @@ const Popover = forwardRef(function Popover(props, ref) {
         onClose,
         popoverRef,
     ]);
-    return (jsxs(Popper, Object.assign({}, rest, { ref: composedRef, className: cx(popoverClasses.host, className), open: open, options: {
+    return (jsxs(Popper, { ...rest, ref: composedRef, className: cx(popoverClasses.host, className), open: open, options: {
             ...options,
             modifiers: [offsetModifier, ...modifiers],
-        } }, { children: [title && jsx("div", Object.assign({ className: popoverClasses.title }, { children: title }), void 0),
-            children && jsx("div", Object.assign({ className: popoverClasses.content }, { children: children }), void 0)] }), void 0));
+        }, children: [title && jsx("div", { className: popoverClasses.title, children: title }), children && jsx("div", { className: popoverClasses.content, children: children })] }));
 });
 var Popover$1 = Popover;
 

package/Popper/Popper.js

@@ -21,10 +21,10 @@ const Popper = forwardRef(function Popper(props, ref) {
     if (!open) {
         return null;
     }
-    return (jsx(Portal, Object.assign({ container: container, disablePortal: disablePortal }, { children: jsx("div", Object.assign({}, rest, { ref: composedRef, style: {
+    return (jsx(Portal, { container: container, disablePortal: disablePortal, children: jsx("div", { ...rest, ref: composedRef, style: {
                 ...style,
                 ...styles.popper,
-            } }, attributes.popper, { children: children }), void 0) }), void 0));
+            }, ...attributes.popper, children: children }) }));
 });
 var Popper$1 = Popper;
 

package/Portal/Portal.js

@@ -14,7 +14,7 @@ const Portal = (props) => {
         }
     }, [container, disablePortal]);
     if (disablePortal || !portalElement) {
-        return jsx(Fragment, { children: children }, void 0);
+        return jsx(Fragment, { children: children });
     }
     return createPortal(children, portalElement);
 };

package/Progress/Progress.js

@@ -14,19 +14,17 @@ const Progress = forwardRef(function Progress(props, ref) {
     const percentLimited = Math.max(0, Math.min(100, percent));
     const defaultSuccessIcon = type === ProgressTypes.line ? CheckCircleFilledIcon : CheckIcon;
     const defaultErrorIcon = type === ProgressTypes.line ? TimesCircleFilledIcon : TimesIcon;
-    const renderInfo = (variant) => (jsx("div", Object.assign({ className: progressClasses.info }, { children: status === ProgressStatuses.normal
-            ? /** percent text */ (jsx(Typography, Object.assign({ className: progressClasses.infoPercent, variant: variant }, percentProps, { children: `${percentLimited}%` }), void 0)) : (jsxs(Fragment, { children: [status === ProgressStatuses.success && (jsx(Icon, Object.assign({ className: progressClasses.infoIcon, icon: defaultSuccessIcon }, successIconProps), void 0)),
-                status === ProgressStatuses.error && (jsx(Icon, Object.assign({ className: progressClasses.infoIcon, icon: defaultErrorIcon }, errorIconProps), void 0))] }, void 0)) }), void 0));
-    const renderLine = () => (jsxs(Fragment, { children: [jsx("div", Object.assign({ className: progressClasses.lineBg }, { children: jsx("div", { style: { width: `${percentLimited}%` } }, void 0) }), void 0), showInfo && renderInfo('input3')] }, void 0));
+    const renderInfo = (variant) => (jsx("div", { className: progressClasses.info, children: status === ProgressStatuses.normal
+            ? /** percent text */ (jsx(Typography, { className: progressClasses.infoPercent, variant: variant, ...percentProps, children: `${percentLimited}%` })) : (jsxs(Fragment, { children: [status === ProgressStatuses.success && (jsx(Icon, { className: progressClasses.infoIcon, icon: defaultSuccessIcon, ...successIconProps })), status === ProgressStatuses.error && (jsx(Icon, { className: progressClasses.infoIcon, icon: defaultErrorIcon, ...errorIconProps }))] })) }));
+    const renderLine = () => (jsxs(Fragment, { children: [jsx("div", { className: progressClasses.lineBg, children: jsx("div", { style: { width: `${percentLimited}%` } }) }), showInfo && renderInfo('input3')] }));
     const renderCircle = () => {
         const { size: circleSize = 80, strokeWidth = 8, } = circleProps || {};
         const radius = (circleSize - strokeWidth) / 2;
         const progressLength = percent > 0 ? percent * radius * Math.PI * 0.02 : 0.00001;
         const circleXY = circleSize / 2;
-        return (jsxs(Fragment, { children: [jsxs("svg", Object.assign({ style: { boxSizing: 'border-box' }, height: circleSize, width: circleSize }, { children: [jsx("circle", { className: progressClasses.circleBg, cx: circleXY, cy: circleXY, r: radius, strokeWidth: strokeWidth }, void 0),
-                        jsx("circle", { className: progressClasses.circleFiller, cx: circleXY, cy: circleXY, r: radius, strokeWidth: strokeWidth, strokeDasharray: `${progressLength.toString()} 999` }, void 0)] }), void 0), showInfo && renderInfo('button3')] }, void 0));
+        return (jsxs(Fragment, { children: [jsxs("svg", { style: { boxSizing: 'border-box' }, height: circleSize, width: circleSize, children: [jsx("circle", { className: progressClasses.circleBg, cx: circleXY, cy: circleXY, r: radius, strokeWidth: strokeWidth }), jsx("circle", { className: progressClasses.circleFiller, cx: circleXY, cy: circleXY, r: radius, strokeWidth: strokeWidth, strokeDasharray: `${progressLength.toString()} 999` })] }), showInfo && renderInfo('button3')] }));
     };
-    return (jsxs("div", Object.assign({ ref: ref, className: cx(progressClasses.host, className, status === ProgressStatuses.success && progressClasses.success, status === ProgressStatuses.error && progressClasses.error, type === ProgressTypes.line && progressClasses.lineVariant, type === ProgressTypes.circle && progressClasses.circleVariant, progressClasses.size(size)) }, rest, { children: [type === ProgressTypes.line && renderLine(), type === ProgressTypes.circle && renderCircle()] }), void 0));
+    return (jsxs("div", { ref: ref, className: cx(progressClasses.host, className, status === ProgressStatuses.success && progressClasses.success, status === ProgressStatuses.error && progressClasses.error, type === ProgressTypes.line && progressClasses.lineVariant, type === ProgressTypes.circle && progressClasses.circleVariant, progressClasses.size(size)), ...rest, children: [type === ProgressTypes.line && renderLine(), type === ProgressTypes.circle && renderCircle()] }));
 });
 var Progress$1 = Progress;
 

package/Radio/Radio.js

@@ -23,9 +23,9 @@ const Radio = forwardRef(function Radio(props, ref) {
         radioGroup,
         value,
     });
-    return (jsx(InputCheck, Object.assign({}, rest, { ref: ref, control: (jsx("span", Object.assign({ className: cx(radioClasses.host, {
+    return (jsx(InputCheck, { ...rest, ref: ref, control: (jsx("span", { className: cx(radioClasses.host, {
                 [radioClasses.checked]: checked,
-            }) }, { children: jsx("input", Object.assign({}, restInputProps, { "aria-checked": checked, "aria-disabled": disabled, checked: checked, disabled: disabled, id: inputId, onChange: onChange, name: name, type: "radio", value: value }), void 0) }), void 0)), disabled: disabled, error: error, htmlFor: inputId, size: size }, { children: children }), void 0));
+            }), 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;
 

package/Radio/RadioGroup.js

@@ -22,8 +22,8 @@ const RadioGroup = forwardRef(function RadioGroup(props, ref) {
         size,
         value,
     };
-    const children = childrenProp || options.map((option) => (jsx(Radio, Object.assign({ disabled: option.disabled, value: option.value }, { children: option.label }), option.value)));
-    return (jsx(RadioGroupContext.Provider, Object.assign({ value: context }, { children: jsx(InputCheckGroup, Object.assign({}, rest, { ref: ref, role: "radiogroup" }, { children: children }), void 0) }), void 0));
+    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;
 

package/Select/AutoComplete.d.ts

@@ -1,10 +1,11 @@
 /// <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 AutoCompleteProps extends Omit<SelectTriggerProps, 'active' | 'clearable' | 'forceHideSuffixActionIcon' | 'mode' | 'onClick' | 'onKeyDown' | 'onChange' | 'renderValue' | 'inputProps' | 'suffixActionIcon' | 'value'>, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
+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';
@@ -16,10 +17,6 @@ export interface AutoCompleteProps extends Omit<SelectTriggerProps, 'active' | '
      * @default false
      */
     addable?: boolean;
-    /**
-     * The default selection
-     */
-    defaultValue?: string;
     /**
      * Should the filter rules be disabled (If you need to control options filter by yourself)
      * @default false
@@ -29,15 +26,11 @@ export interface AutoCompleteProps extends Omit<SelectTriggerProps, 'active' | '
      * The other native props for input element.
      */
     inputProps?: Omit<SelectTriggerInputProps, 'onChange' | 'placeholder' | 'role' | 'value' | `aria-${'controls' | 'expanded' | 'owns'}`>;
-    /**
-     * The change event handler of input element.
-     */
-    onChange?(text: string): any;
     /**
      * insert callback whenever insert icon is clicked
      * return `true` when insert is successfully
      */
-    onInsert?(text: string): boolean;
+    onInsert?(text: string): SelectValue;
     /**
      * The search event handler
      */
@@ -45,7 +38,7 @@ export interface AutoCompleteProps extends Omit<SelectTriggerProps, 'active' | '
     /**
      * The options that mapped autocomplete options
      */
-    options: string[];
+    options: SelectValue[];
     /**
      * select input placeholder
      */
@@ -60,12 +53,46 @@ export interface AutoCompleteProps extends Omit<SelectTriggerProps, 'active' | '
      * @default 'medium'
      */
     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?: string;
-}
+    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,

package/Select/AutoComplete.js

@@ -1,7 +1,8 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useContext, useState, useRef } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useContext, useState, useRef, useMemo } from 'react';
 import { selectClasses } from '@mezzanine-ui/core/select';
 import { PlusIcon } from '@mezzanine-ui/icons';
+import isArray from 'lodash/isArray';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import Option from './Option.js';
 import { SelectControlContext } from './SelectControlContext.js';
@@ -10,7 +11,6 @@ import { useClickAway } from '../hooks/useClickAway.js';
 import SelectTrigger from './SelectTrigger.js';
 import InputTriggerPopper from '../_internal/InputTriggerPopper/InputTriggerPopper.js';
 import Menu from '../Menu/Menu.js';
-import Empty from '../Empty/Empty.js';
 import Icon from '../Icon/Icon.js';
 import { FormControlContext } from '../Form/FormControlContext.js';
 import cx from 'clsx';
@@ -22,16 +22,18 @@ const MENU_ID = 'mzn-select-autocomplete-menu-id';
  * should considering using the `Select` component with `onSearch` prop.
  */
 const AutoComplete = forwardRef(function Select(props, ref) {
-    var _a;
+    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 = 'medium', onChange: onChangeProp, onClear: onClearProp, onInsert, onSearch, options: optionsProp, popperOptions = {}, placeholder = '', prefix, required = requiredFromFormControl || false, size = 'medium', value: valueProp, } = props;
+    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 = 'medium', mode = 'single', onChange: onChangeProp, onClear: onClearProp, onInsert, onSearch, options: optionsProp, popperOptions = {}, placeholder = '', prefix, required = requiredFromFormControl || false, size = 'medium', value: valueProp, } = props;
     const [open, toggleOpen] = useState(false);
-    const { focused, onFocus, onChange, onClear, options, searchText, setSearchText, setValue, value, } = useAutoCompleteValueControl({
+    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,
     });
@@ -41,6 +43,7 @@ const AutoComplete = forwardRef(function Select(props, ref) {
     const controlRef = useRef(null);
     const popperRef = useRef(null);
     const composedRef = useComposeRefs([ref, controlRef]);
+    const renderValue = focused ? () => searchText : undefined;
     useClickAway(() => {
         if (!open || focused)
             return;
@@ -53,11 +56,17 @@ const AutoComplete = forwardRef(function Select(props, ref) {
         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);
-        setValue(e.target.value);
+        setInsertText(e.target.value);
         /** return current value to onSearch */
         onSearch === null || onSearch === void 0 ? void 0 : onSearch(e.target.value);
     };
@@ -73,6 +82,9 @@ const AutoComplete = forwardRef(function Select(props, ref) {
         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,
@@ -81,30 +93,27 @@ const AutoComplete = forwardRef(function Select(props, ref) {
         onBlur: onSearchInputBlur,
         onChange: onSearchInputChange,
         onFocus: onSearchInputFocus,
-        placeholder,
+        placeholder: getPlaceholder(),
         role: 'combobox',
     };
-    return (jsx(SelectControlContext.Provider, Object.assign({ value: {
-            onChange,
-            value,
-        } }, { children: jsxs("div", Object.assign({ ref: nodeRef, className: cx(selectClasses.host, {
+    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, error: error, forceHideSuffixActionIcon: true, fullWidth: fullWidth, inputRef: inputRef, mode: "single", onTagClose: onChange, onClear: onClear, prefix: prefix, readOnly: false, required: required, inputProps: resolvedInputProps, size: size, suffixActionIcon: undefined, value: value }, void 0),
-                jsxs(InputTriggerPopper, Object.assign({ ref: popperRef, anchor: controlRef, className: selectClasses.popper, open: open, sameWidth: true, options: popperOptions }, { children: [jsxs(Menu, Object.assign({ id: MENU_ID, "aria-activedescendant": (_a = value === null || value === void 0 ? void 0 : value.id) !== null && _a !== void 0 ? _a : '', itemsInView: itemsInView, maxHeight: menuMaxHeight, role: menuRole, size: menuSize, style: { border: 0 } }, { children: [jsx(Option, Object.assign({ value: searchText }, { children: searchText }), void 0),
-                                options.length ? options.map((option) => (jsx(Option, Object.assign({ value: option }, { children: option }), option))) : (jsx(Empty, { children: "\u67E5\u7121\u8CC7\u6599" }, void 0))] }), void 0),
-                        addable ? (jsxs("div", Object.assign({ className: selectClasses.autoComplete }, { children: [jsx("input", { type: "text", onChange: (e) => setInsertText(e.target.value), onClick: (e) => e.stopPropagation(), onFocus: (e) => e.stopPropagation(), placeholder: "\u65B0\u589E\u9078\u9805", value: insertText }, void 0),
-                                jsx(Icon, { className: cx(selectClasses.autoCompleteIcon, {
-                                        [selectClasses.autoCompleteIconActive]: !!insertText,
-                                    }), icon: PlusIcon, onClick: (e) => {
-                                        var _a;
-                                        e.stopPropagation();
-                                        if (insertText) {
-                                            const insertSuccess = (_a = onInsert === null || onInsert === void 0 ? void 0 : onInsert(insertText)) !== null && _a !== void 0 ? _a : false;
-                                            if (insertSuccess) {
-                                                setInsertText('');
-                                            }
-                                        }
-                                    } }, void 0)] }), void 0)) : null] }), void 0)] }), void 0) }), void 0));
+            }), 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('');
+                                        onChange(newOption);
+                                    }
+                                }
+                            }, children: [jsx("p", { children: insertText }), jsx(Icon, { className: selectClasses.autoCompleteIcon, icon: PlusIcon })] })) : null] })] }) }));
 });
 var AutoComplete$1 = AutoComplete;
 

package/Select/Option.js

@@ -35,10 +35,10 @@ const Option = forwardRef(function Option(props, ref) {
                 break;
         }
     };
-    return (jsx(MenuItem, Object.assign({}, rest, { ref: ref, active: active, "aria-selected": active, id: value, onClick: (evt) => {
+    return (jsx(MenuItem, { ...rest, ref: ref, active: active, "aria-selected": active, id: value, onClick: (evt) => {
             evt.stopPropagation();
             onSelect();
-        }, onKeyDown: onKeyDown, role: role, tabIndex: 0 }, { children: children }), void 0));
+        }, onKeyDown: onKeyDown, role: role, tabIndex: 0, children: children }));
 });
 var Option$1 = Option;
 

package/Select/Select.d.ts

@@ -6,7 +6,7 @@ import { PopperProps } from '../Popper';
 import { SelectValue } from './typings';
 import { PickRenameMulti } from '../utils/general';
 import { SelectTriggerProps, SelectTriggerInputProps } from './SelectTrigger';
-export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'inputProps' | 'mode' | 'onBlur' | 'onChange' | 'onClick' | 'onFocus' | 'onKeyDown' | 'renderValue' | 'value'>, FormElementFocusHandlers, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
+export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'inputProps' | 'mode' | 'onBlur' | 'onChange' | 'onClick' | 'onFocus' | 'onKeyDown' | 'readOnly' | 'renderValue' | 'value'>, FormElementFocusHandlers, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
     maxHeight: 'menuMaxHeight';
     role: 'menuRole';
     size: 'menuSize';
@@ -17,10 +17,6 @@ export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'in
      * The other native props for input element.
      */
     inputProps?: Omit<SelectTriggerInputProps, 'onBlur' | 'onChange' | 'onFocus' | 'placeholder' | 'role' | 'value' | `aria-${'controls' | 'expanded' | 'owns'}`>;
-    /**
-     * The search event handler, this prop won't work when mode is `multiple`
-     */
-    onSearch?(input: string): any;
     /**
      * select input placeholder
      */
@@ -87,49 +83,5 @@ export declare type SelectSingleProps = SelectBaseProps & {
     value?: SelectValue | null;
 };
 export declare type SelectProps = SelectMultipleProps | SelectSingleProps;
-declare const Select: import("react").ForwardRefExoticComponent<(SelectBaseProps & {
-    /**
-     * The default selection
-     */
-    defaultValue?: SelectValue[] | undefined;
-    /**
-     * Controls the layout of trigger.
-     */
-    mode: 'multiple';
-    /**
-     * The change event handler of input element.
-     */
-    onChange?(newOptions: SelectValue[]): any;
-    /**
-     * To customize rendering select input value
-     */
-    renderValue?(values: SelectValue[]): string;
-    /**
-     * The value of selection.
-     * @default undefined
-     */
-    value?: SelectValue[] | undefined;
-} & import("react").RefAttributes<HTMLDivElement>) | (SelectBaseProps & {
-    /**
-     * The default selection
-     */
-    defaultValue?: SelectValue | undefined;
-    /**
-     * Controls the layout of trigger.
-     */
-    mode?: "single" | undefined;
-    /**
-     * The change event handler of input element.
-     */
-    onChange?(newOptions: SelectValue): any;
-    /**
-     * To customize rendering select input value
-     */
-    renderValue?(values: SelectValue | null): string;
-    /**
-     * The value of selection.
-     * @default undefined
-     */
-    value?: SelectValue | null | undefined;
-} & import("react").RefAttributes<HTMLDivElement>)>;
+declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Select;