@mezzanine-ui/react 0.7.1 → 0.8.0

package/Drawer/Drawer.d.ts

@@ -1,13 +1,8 @@
 /// <reference types="react" />
 import { DrawerPlacement } from '@mezzanine-ui/core/drawer';
-import { OverlayProps } from '../Overlay';
+import { SlideFadeOverlayProps } from '../_internal/SlideFadeOverlay';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface DrawerProps extends NativeElementPropsWithoutKeyAndRef<'div'>, Pick<OverlayProps, 'container' | 'disableCloseOnBackdropClick' | 'disablePortal' | 'hideBackdrop' | 'invisibleBackdrop' | 'onBackdropClick' | 'onClose' | 'open'> {
-    /**
-     * Controls whether to disable closing drawer while escape key down.
-     * @default false
-     */
-    disableCloseOnEscapeKeyDown?: boolean;
+export interface DrawerProps extends Omit<SlideFadeOverlayProps, 'children'>, Pick<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
     /**
      * Whether the drawer placement.
      * @default 'left'

package/Drawer/Drawer.js

@@ -1,34 +1,18 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { drawerClasses } from '@mezzanine-ui/core/drawer';
-import { useDocumentEscapeKeyDown } from '../hooks/useDocumentEscapeKeyDown.js';
-import Overlay from '../Overlay/Overlay.js';
-import SlideFade from '../Transition/SlideFade.js';
+import SlideFadeOverlay from '../_internal/SlideFadeOverlay/SlideFadeOverlay.js';
 import cx from 'clsx';
 
 const Drawer = forwardRef((props, ref) => {
     const { className, children, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal, hideBackdrop, invisibleBackdrop, onBackdropClick, onClose, open, placement = 'left', ...rest } = props;
-    const [exited, setExited] = useState(true);
-    useDocumentEscapeKeyDown(() => {
-        if (!open || disableCloseOnEscapeKeyDown || !onClose) {
-            return;
-        }
-        return onClose;
-    }, [
-        disableCloseOnEscapeKeyDown,
-        open,
-        onClose,
-    ]);
-    if (!open && exited) {
-        return null;
-    }
-    const slideFadeDirection = {
+    const slideFadeDirection = useMemo(() => ({
         top: 'down',
         left: 'right',
         right: 'left',
         bottom: 'up',
-    };
-    return (jsx(Overlay, Object.assign({ className: drawerClasses.overlay, container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, role: "presentation" }, { children: jsx(SlideFade, Object.assign({ ref: ref, direction: slideFadeDirection[placement], in: open, onEntered: () => setExited(false), onExited: () => setExited(true) }, { children: jsx("div", Object.assign({}, rest, { className: cx(drawerClasses.host, drawerClasses[placement], className) }, { children: children }), void 0) }), void 0) }), void 0));
+    }), []);
+    return (jsx(SlideFadeOverlay, Object.assign({ className: drawerClasses.overlay, container: container, direction: slideFadeDirection[placement], disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref }, { children: jsx("div", Object.assign({}, rest, { className: cx(drawerClasses.host, drawerClasses[placement], className) }, { children: children }), void 0) }), void 0));
 });
 var Drawer$1 = Drawer;
 

package/Form/useAutoCompleteValueControl.d.ts

@@ -17,7 +17,7 @@ export interface AutoCompleteValueControl {
     options: string[];
     searchText: string;
     setSearchText: Dispatch<SetStateAction<string>>;
-    setValue: Dispatch<SetStateAction<string>>;
-    value: SelectValue[];
+    setValue: (text: string) => void;
+    value: SelectValue | null;
 }
 export declare function useAutoCompleteValueControl(props: UseAutoCompleteValueControl): AutoCompleteValueControl;

package/Form/useAutoCompleteValueControl.js

@@ -11,6 +11,10 @@ function useAutoCompleteValueControl(props) {
     });
     const [searchText, setSearchText] = useState('');
     const [focused, setFocused] = useState(false);
+    const onChangeValue = useCallback((text) => {
+        setValue(text);
+        onChange === null || onChange === void 0 ? void 0 : onChange(text);
+    }, [setValue, onChange]);
     const onFocus = useCallback((focus) => {
         setFocused(focus);
         /** sync current value */
@@ -21,10 +25,10 @@ function useAutoCompleteValueControl(props) {
         value,
         onChange,
     ]);
-    const getCurrentInputValue = () => (value ? [{
-            id: value,
-            name: value,
-        }] : []);
+    const getCurrentInputValue = () => (value ? {
+        id: value,
+        name: value,
+    } : null);
     const options = disabledOptionsFilter
         ? optionsProp
         : optionsProp.filter((option) => ~option.search(searchText));
@@ -50,7 +54,7 @@ function useAutoCompleteValueControl(props) {
         options,
         searchText,
         setSearchText,
-        setValue,
+        setValue: onChangeValue,
         value: getCurrentInputValue(),
     };
 }

package/Form/useSelectValueControl.d.ts

@@ -1,16 +1,33 @@
 import { MouseEvent } from 'react';
 import { SelectValue } from '../Select/typings';
-export interface UseSelectValueControl {
-    defaultValue?: SelectValue[];
-    mode: string;
-    onChange?(newOptions: SelectValue[]): any;
+export interface UseSelectBaseValueControl {
     onClear?(e: MouseEvent<Element>): void;
+    onChange?(newOptions: SelectValue[] | SelectValue): any;
     onClose?(): void;
+}
+export declare type UseSelectMultipleValueControl = UseSelectBaseValueControl & {
+    defaultValue?: SelectValue[];
+    mode: 'multiple';
+    onChange?(newOptions: SelectValue[]): any;
     value?: SelectValue[];
+};
+export declare type UseSelectSingleValueControl = UseSelectBaseValueControl & {
+    defaultValue?: SelectValue;
+    mode: 'single';
+    onChange?(newOption: SelectValue): any;
+    value?: SelectValue | null;
+};
+export declare type UseSelectValueControl = UseSelectMultipleValueControl | UseSelectSingleValueControl;
+export interface SelectBaseValueControl {
+    onClear(e: MouseEvent<Element>): void;
 }
-export interface SelectValueControl {
+export declare type SelectMultipleValueControl = SelectBaseValueControl & {
     onChange: (v: SelectValue | null) => SelectValue[];
-    onClear(e: MouseEvent<Element>): void;
     value: SelectValue[];
-}
-export declare function useSelectValueControl(props: UseSelectValueControl): SelectValueControl;
+};
+export declare type SelectSingleValueControl = SelectBaseValueControl & {
+    onChange: (v: SelectValue | null) => SelectValue | null;
+    value: SelectValue | null;
+};
+export declare type SelectValueControl = SelectMultipleValueControl | SelectSingleValueControl;
+export declare const useSelectValueControl: (props: UseSelectValueControl) => SelectValueControl;

package/Form/useSelectValueControl.js

@@ -1,31 +1,28 @@
-import intersectionBy from 'lodash/intersectionBy';
+import isEqual from 'lodash/isEqual';
 import { useControlValueState } from './useControlValueState.js';
 
-const equalityFn = (a, b) => (a.length === b.length && intersectionBy(a, b, 'id').length === a.length);
-function useSelectValueControl(props) {
+const equalityFn = (a, b) => isEqual(a, b);
+function useSelectBaseValueControl(props) {
     const { defaultValue, mode, onChange, onClear: onClearProp, onClose, value: valueProp, } = props;
     const [value, setValue] = useControlValueState({
-        defaultValue: defaultValue || [],
+        defaultValue: defaultValue || (mode === 'multiple' ? [] : null),
         equalityFn,
         value: valueProp,
     });
     return {
         value,
         onChange: (chooseOption) => {
-            if (!chooseOption)
-                return [];
-            let newValue = [];
-            switch (mode) {
-                case 'single': {
-                    newValue = [chooseOption];
-                    if (typeof onClose === 'function') {
-                        /** single selection should close modal when clicked */
-                        onClose();
-                    }
-                    break;
+            var _a;
+            if (!chooseOption) {
+                if (mode === 'multiple') {
+                    return [];
                 }
+                return null;
+            }
+            let newValue = mode === 'multiple' ? [] : null;
+            switch (mode) {
                 case 'multiple': {
-                    const existedValueIdx = (value !== null && value !== void 0 ? value : []).findIndex((v) => v.id === chooseOption.id);
+                    const existedValueIdx = ((_a = value) !== null && _a !== void 0 ? _a : []).findIndex((v) => v.id === chooseOption.id);
                     if (~existedValueIdx) {
                         newValue = [
                             ...value.slice(0, existedValueIdx),
@@ -38,22 +35,43 @@ function useSelectValueControl(props) {
                             chooseOption,
                         ];
                     }
+                    if (typeof onChange === 'function')
+                        onChange(newValue);
+                    break;
+                }
+                default: {
+                    newValue = chooseOption;
+                    if (typeof onClose === 'function') {
+                        /** single selection should close modal when clicked */
+                        onClose();
+                    }
+                    if (typeof onChange === 'function')
+                        onChange(newValue);
                     break;
                 }
             }
             setValue(newValue);
-            if (typeof onChange === 'function')
-                onChange(newValue);
             return newValue;
         },
         onClear: (e) => {
             e.stopPropagation();
-            setValue([]);
+            if (mode === 'multiple') {
+                setValue([]);
+            }
+            else {
+                setValue(null);
+            }
             if (typeof onClearProp === 'function') {
                 onClearProp(e);
             }
         },
     };
-}
+}
+const useSelectValueControl = (props) => {
+    if (props.mode === 'multiple') {
+        return useSelectBaseValueControl(props);
+    }
+    return useSelectBaseValueControl(props);
+};
 
 export { useSelectValueControl };

package/Icon/Icon.d.ts

@@ -11,6 +11,10 @@ export interface IconProps extends NativeElementPropsWithoutKeyAndRef<'i'> {
      * The icon provided by `@mezzanine-ui/icons` package.
      */
     icon: IconDefinition;
+    /**
+     * Icon size in px
+     */
+    size?: number;
     /**
      * Whether to spin the icon or not.
      * @default false

package/Icon/Icon.js

@@ -7,9 +7,9 @@ import cx from 'clsx';
  * The react component for `mezzanine` icon.
  */
 const Icon = forwardRef(function Icon(props, ref) {
-    const { className, color, icon, spin = false, style: styleProp, ...rest } = props;
+    const { className, color, icon, size, spin = false, style: styleProp, ...rest } = props;
     const { definition } = icon;
-    const cssVars = toIconCssVars({ color });
+    const cssVars = toIconCssVars({ color, size });
     const style = {
         ...cssVars,
         ...styleProp,
@@ -17,6 +17,7 @@ const Icon = forwardRef(function Icon(props, ref) {
     return (jsx("i", Object.assign({}, rest, { ref: ref, "aria-hidden": true, className: cx(iconClasses.host, {
             [iconClasses.color]: color,
             [iconClasses.spin]: spin,
+            [iconClasses.size]: size,
         }, className), "data-icon-name": icon.name, style: style }, { children: jsx("svg", Object.assign({}, definition.svg, { focusable: false }, { children: jsx("path", Object.assign({}, definition.path), void 0) }), void 0) }), void 0));
 });
 var Icon$1 = Icon;

package/Modal/Modal.d.ts

@@ -1,13 +1,8 @@
 /// <reference types="react" />
 import { ModalSeverity, ModalSize } from '@mezzanine-ui/core/modal';
+import { SlideFadeOverlayProps } from '../_internal/SlideFadeOverlay';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-import { OverlayProps } from '../Overlay';
-export interface ModalProps extends NativeElementPropsWithoutKeyAndRef<'div'>, Pick<OverlayProps, 'container' | 'disableCloseOnBackdropClick' | 'disablePortal' | 'hideBackdrop' | 'onBackdropClick' | 'onClose' | 'open'> {
-    /**
-     * Controls whether to disable closing modal while escape key down.
-     * @default false
-     */
-    disableCloseOnEscapeKeyDown?: boolean;
+export interface ModalProps extends Omit<SlideFadeOverlayProps, 'children'>, Pick<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
     /**
      * Whether to force full screen on any breakpoint.
      * @default false

package/Modal/Modal.js

@@ -1,13 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { modalClasses } from '@mezzanine-ui/core/modal';
 import { TimesIcon } from '@mezzanine-ui/icons';
-import { forwardRef, useState, useLayoutEffect, useEffect } from 'react';
-import { useDocumentEscapeKeyDown } from '../hooks/useDocumentEscapeKeyDown.js';
-import { lockBodyScroll, allowBodyScroll } from '../utils/scroll-lock.js';
-import { useIsTopModal } from './useIsTopModal.js';
+import { forwardRef } from 'react';
 import { ModalControlContext } from './ModalControl.js';
-import Overlay from '../Overlay/Overlay.js';
-import SlideFade from '../Transition/SlideFade.js';
+import useModalContainer from './useModalContainer.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
@@ -15,61 +11,16 @@ import cx from 'clsx';
  * The react component for `mezzanine` modal.
  */
 const Modal = forwardRef(function Modal(props, ref) {
-    const { children, className, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal, fullScreen = false, hideBackdrop, hideCloseIcon = false, loading = false, onBackdropClick, onClose, open, severity = 'info', size = 'medium', ...rest } = props;
+    const { children, className, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal = false, fullScreen = false, hideBackdrop = false, hideCloseIcon = false, invisibleBackdrop = false, loading = false, onBackdropClick, onClose, open, severity = 'info', size = 'medium', ...rest } = props;
     const modalControl = {
         loading,
         severity,
     };
-    const [exited, setExited] = useState(true);
-    /**
-     * Escape keydown close: escape will only close the top modal
-     */
-    const isTopModal = useIsTopModal(open);
-    useDocumentEscapeKeyDown(() => {
-        if (!open || disableCloseOnEscapeKeyDown || !onClose) {
-            return;
-        }
-        return (event) => {
-            if (isTopModal()) {
-                event.stopPropagation();
-                onClose();
-            }
-        };
-    }, [
-        disableCloseOnEscapeKeyDown,
-        isTopModal,
-        open,
-        onClose,
-    ]);
-    /** lock body scroll */
-    useLayoutEffect(() => {
-        if (open) {
-            lockBodyScroll();
-        }
-    }, [open]);
-    /** unlock body scroll */
-    useEffect(() => {
-        function checkAndAllowScroll() {
-            // wait until dom element unmount, and check if other modal existed
-            const allModals = document.querySelectorAll('.mzn-modal');
-            if (!allModals.length) {
-                allowBodyScroll();
-            }
-        }
-        if (!open && exited) {
-            checkAndAllowScroll();
-        }
-        return (() => {
-            requestAnimationFrame(checkAndAllowScroll);
-        });
-    }, [open, exited]);
-    if (!open && exited) {
-        return null;
-    }
-    return (jsx(Overlay, Object.assign({ className: modalClasses.overlay, container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disablePortal: disablePortal, hideBackdrop: hideBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, role: "presentation" }, { children: jsx(ModalControlContext.Provider, Object.assign({ value: modalControl }, { children: jsx(SlideFade, Object.assign({ ref: ref, in: open, direction: "down", onEntered: () => setExited(false), onExited: () => setExited(true) }, { children: jsxs("div", Object.assign({}, rest, { className: cx(modalClasses.host, modalClasses.severity(severity), modalClasses.size(size), {
-                        [modalClasses.fullScreen]: fullScreen,
-                        [modalClasses.withCloseIcon]: !hideCloseIcon,
-                    }, className), role: "dialog" }, { children: [children, !hideCloseIcon && (jsx(Icon, { className: modalClasses.closeIcon, icon: TimesIcon, onClick: onClose }, void 0))] }), void 0) }), void 0) }), void 0) }), void 0));
+    const { Container: ModalContainer } = useModalContainer();
+    return (jsx(ModalControlContext.Provider, Object.assign({ value: modalControl }, { children: jsx(ModalContainer, Object.assign({ className: modalClasses.overlay, container: container, direction: "down", disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref }, { children: jsxs("div", Object.assign({}, rest, { className: cx(modalClasses.host, modalClasses.severity(severity), modalClasses.size(size), {
+                    [modalClasses.fullScreen]: fullScreen,
+                    [modalClasses.withCloseIcon]: !hideCloseIcon,
+                }, className), role: "dialog" }, { children: [children, !hideCloseIcon && (jsx(Icon, { className: modalClasses.closeIcon, icon: TimesIcon, onClick: onClose }, void 0))] }), void 0) }), void 0) }), void 0));
 });
 var Modal$1 = Modal;
 

package/Modal/index.d.ts

@@ -3,4 +3,5 @@ export { ModalActionsProps, default as ModalActions, } from './ModalActions';
 export { ModalBodyProps, default as ModalBody, } from './ModalBody';
 export { ModalFooterProps, default as ModalFooter, } from './ModalFooter';
 export { ModalHeaderProps, default as ModalHeader, } from './ModalHeader';
+export { default as useModalContainer, } from './useModalContainer';
 export { ModalProps, default, } from './Modal';

package/Modal/index.js

@@ -2,4 +2,5 @@ export { default as ModalActions } from './ModalActions.js';
 export { default as ModalBody } from './ModalBody.js';
 export { default as ModalFooter } from './ModalFooter.js';
 export { default as ModalHeader } from './ModalHeader.js';
+export { default as useModalContainer } from './useModalContainer.js';
 export { default } from './Modal.js';

package/Modal/useModalContainer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { SlideFadeOverlayProps } from '../_internal/SlideFadeOverlay';
+export default function useModalContainer(): {
+    Container: import("react").ForwardRefExoticComponent<SlideFadeOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
+    defaultOptions: Pick<SlideFadeOverlayProps, "className" | "direction" | "disableCloseOnBackdropClick" | "disableCloseOnEscapeKeyDown" | "disablePortal" | "hideBackdrop" | "invisibleBackdrop" | "open">;
+};

package/Modal/useModalContainer.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { modalClasses } from '@mezzanine-ui/core/modal';
+import { forwardRef } from 'react';
+import SlideFadeOverlay from '../_internal/SlideFadeOverlay/SlideFadeOverlay.js';
+
+const defaultOptions = {
+    className: modalClasses.overlay,
+    direction: 'down',
+    disableCloseOnBackdropClick: false,
+    disableCloseOnEscapeKeyDown: false,
+    disablePortal: false,
+    hideBackdrop: false,
+    invisibleBackdrop: false,
+    open: false,
+};
+const ModalContainer = forwardRef((props, ref) => {
+    const { className = defaultOptions.className, children, container, direction = defaultOptions.direction, disableCloseOnBackdropClick = defaultOptions.disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown = defaultOptions.disableCloseOnEscapeKeyDown, disablePortal = defaultOptions.disablePortal, hideBackdrop = defaultOptions.hideBackdrop, invisibleBackdrop = defaultOptions.invisibleBackdrop, onBackdropClick, onClose, open = defaultOptions.open, } = props;
+    return (jsx(SlideFadeOverlay, Object.assign({ className: className, container: container, direction: direction, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref }, { children: children }), void 0));
+});
+function useModalContainer() {
+    return {
+        Container: ModalContainer,
+        defaultOptions,
+    };
+}
+
+export { useModalContainer as default };

package/Select/AutoComplete.js

@@ -22,7 +22,7 @@ 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, _b;
+    var _a;
     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 [open, toggleOpen] = useState(false);
@@ -87,8 +87,10 @@ const AutoComplete = forwardRef(function Select(props, ref) {
     return (jsx(SelectControlContext.Provider, Object.assign({ value: {
             onChange,
             value,
-        } }, { children: jsxs("div", Object.assign({ ref: nodeRef, className: selectClasses.host }, { 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": (_b = (_a = value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '', itemsInView: itemsInView, maxHeight: menuMaxHeight, role: menuRole, size: menuSize, style: { border: 0 } }, { children: [jsx(Option, Object.assign({ value: searchText }, { children: searchText }), void 0),
+        } }, { children: jsxs("div", Object.assign({ 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, {

package/Select/Option.js

@@ -7,7 +7,19 @@ const Option = forwardRef(function Option(props, ref) {
     const { active: activeProp, children, role = 'option', value, ...rest } = props;
     const selectControl = useContext(SelectControlContext);
     const { onChange, value: selectedValue, } = selectControl || {};
-    const active = Boolean(activeProp || (selectedValue !== null && selectedValue !== void 0 ? selectedValue : []).find((sv) => sv.id === value));
+    const getActive = () => {
+        if (activeProp) {
+            return activeProp;
+        }
+        if (selectedValue) {
+            if (Array.isArray(selectedValue)) {
+                return selectedValue.find((sv) => sv.id === value);
+            }
+            return selectedValue.id === value;
+        }
+        return false;
+    };
+    const active = Boolean(getActive());
     const onSelect = () => {
         if (typeof onChange === 'function' && value) {
             onChange({

package/Select/Select.d.ts

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

package/Select/Select.js

@@ -52,9 +52,14 @@ const Select = forwardRef(function Select(props, ref) {
     const [focused, setFocused] = useState(false);
     const renderValue = focused && searchable ? () => searchText : renderValueProp;
     function getPlaceholder() {
-        var _a;
         if (focused && searchable) {
-            return (_a = renderValueProp === null || renderValueProp === void 0 ? void 0 : renderValueProp(value)) !== null && _a !== void 0 ? _a : value.map(({ name }) => name).join(', ');
+            if (typeof renderValueProp === 'function') {
+                return renderValueProp(value);
+            }
+            if (value) {
+                return value.name;
+            }
+            return placeholder;
         }
         return placeholder;
     }
@@ -139,7 +144,7 @@ const Select = forwardRef(function Select(props, ref) {
             onChange,
             value,
         } }, { children: jsxs("div", Object.assign({ ref: nodeRef, className: cx(selectClasses.host, fullWidth && selectClasses.hostFullWidth) }, { children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, onClick: onClickTextField, onKeyDown: onKeyDownTextField, prefix: prefix, readOnly: !searchable, required: required, inputProps: resolvedInputProps, size: size, suffixActionIcon: suffixActionIcon, value: value, renderValue: renderValue }, void 0),
-                jsx(InputTriggerPopper, Object.assign({ ref: popperRef, anchor: controlRef, className: selectClasses.popper, open: open, sameWidth: true, options: popperOptions }, { children: jsx(Menu, Object.assign({ id: MENU_ID, "aria-activedescendant": (_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '', itemsInView: itemsInView, maxHeight: menuMaxHeight, role: menuRole, size: menuSize, style: { border: 0 } }, { children: children }), void 0) }), void 0)] }), void 0) }), void 0));
+                jsx(InputTriggerPopper, Object.assign({ ref: popperRef, anchor: controlRef, className: selectClasses.popper, open: open, sameWidth: true, options: popperOptions }, { children: jsx(Menu, Object.assign({ 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: children }), void 0) }), void 0)] }), void 0) }), void 0));
 });
 var Select$1 = Select;