@mezzanine-ui/react 0.7.3 → 0.9.0

package/DatePicker/DatePicker.js

@@ -18,7 +18,7 @@ import { FormControlContext } from '../Form/FormControlContext.js';
 const DatePicker = forwardRef(function DatePicker(props, ref) {
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
     const { defaultDateFormat, getNow, } = useCalendarContext();
-    const { calendarProps, className, clearable, defaultValue, disableOnNext, disableOnPrev, disabled = disabledFromFormControl || false, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultDateFormat, fullWidth = fullWidthFromFormControl || false, inputProps, isDateDisabled, isMonthDisabled, isYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl || false, size, value: valueProp, ...restTriggerProps } = props;
+    const { calendarProps, className, clearable = true, defaultValue, disableOnNext, disableOnPrev, disabled = disabledFromFormControl || false, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultDateFormat, fullWidth = fullWidthFromFormControl || false, inputProps, isDateDisabled, isMonthDisabled, isYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl || false, size, value: valueProp, ...restTriggerProps } = props;
     const { onBlur: onBlurProp, onKeyDown: onKeyDownProp, onFocus: onFocusProp, size: inputSize = format.length + 2, ...restInputProp } = inputProps || {};
     const formats = useMemo(() => [
         format,

package/DateRangePicker/DateRangePicker.js

@@ -18,7 +18,7 @@ import { FormControlContext } from '../Form/FormControlContext.js';
 const DateRangePicker = forwardRef(function DateRangePicker(props, ref) {
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
     const { defaultDateFormat, getNow, isBetween, } = useCalendarContext();
-    const { calendarProps, className, clearable, defaultValue, disabled = disabledFromFormControl || false, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultDateFormat, fullWidth = fullWidthFromFormControl || false, inputFromPlaceholder, inputFromProps, inputToPlaceholder, inputToProps, isDateDisabled, isMonthDisabled, isYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl || false, size, value: valueProp, } = props;
+    const { calendarProps, className, clearable = true, defaultValue, disabled = disabledFromFormControl || false, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultDateFormat, fullWidth = fullWidthFromFormControl || false, inputFromPlaceholder, inputFromProps, inputToPlaceholder, inputToProps, isDateDisabled, isMonthDisabled, isYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl || false, size, value: valueProp, } = props;
     const { onBlur: onFromBlurProp, onKeyDown: onFromKeyDownProp, onFocus: onFromFocusProp, ...restInputFromProps } = inputFromProps || {};
     const { onBlur: onToBlurProp, onKeyDown: onToKeyDownProp, onFocus: onToFocusProp, ...restInputToProps } = inputToProps || {};
     const formats = useMemo(() => [
@@ -156,7 +156,9 @@ const DateRangePicker = forwardRef(function DateRangePicker(props, ref) {
         const [from, to] = internalValue;
         if (from && to) {
             const newValue = onChange([from, to]);
-            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(newValue);
+            if (onChangeProp) {
+                onChangeProp(newValue);
+            }
         }
         else {
             onChange(valueProp);

package/DateTimePicker/DateTimePicker.js

@@ -18,7 +18,7 @@ const DateTimePicker = forwardRef(function DateTimePicker(props, ref) {
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
     const { defaultDateFormat, defaultTimeFormat, getNow, startOf, } = useCalendarContext();
     const defaultFormat = `${defaultDateFormat} ${defaultTimeFormat}`;
-    const { calendarProps, className, clearable, confirmText, defaultValue, disableOnNext, disableOnPrev, disabled = disabledFromFormControl, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultFormat, fullWidth = fullWidthFromFormControl, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, inputProps, isDateDisabled, isMonthDisabled, isYearDisabled, minutePrefix, minuteStep, onChange: onChangeProp, onPanelToggle: onPanelToggleProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl, secondPrefix, secondStep, size: sizeProp, value: valueProp, } = props;
+    const { calendarProps, className, clearable = true, confirmText, defaultValue, disableOnNext, disableOnPrev, disabled = disabledFromFormControl, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultFormat, fullWidth = fullWidthFromFormControl, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, inputProps, isDateDisabled, isMonthDisabled, isYearDisabled, minutePrefix, minuteStep, onChange: onChangeProp, onPanelToggle: onPanelToggleProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl, secondPrefix, secondStep, size: sizeProp, value: valueProp, } = props;
     const { onBlur: onBlurProp, onKeyDown: onKeyDownProp, onFocus: onFocusProp, size: inputSize = format.length + 2, ...restInputProp } = inputProps || {};
     const formats = useMemo(() => [format, defaultFormat], [defaultFormat, format]);
     /** Panel open control */

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/useInputWithTagsModeValue.d.ts

@@ -0,0 +1,37 @@
+import { ChangeEvent, KeyboardEvent, RefObject } from 'react';
+import { UseInputControlValueProps } from './useInputControlValue';
+export declare type TagsType = string[] | number[];
+export interface UseInputWithTagsModeValueProps<E extends HTMLInputElement | HTMLTextAreaElement> extends UseInputControlValueProps<E> {
+    /**
+     * The value of initial tags
+     */
+    initialTagsValue?: string[];
+    /**
+     * Maximum permitted length of the tags
+     * @default 3
+     */
+    maxTagsLength?: number;
+    /**
+     * The change event handler of tags
+     */
+    onTagsChange?: (tags: TagsType) => void;
+    /**
+     * The ref object of input element
+     */
+    ref: RefObject<E>;
+    /**
+     * Will skip `onKeyDown` calling if `true`
+     * @default false
+     */
+    skip?: boolean;
+    /**
+     * Maximum length of value on each tag
+     * @default 8
+     */
+    tagValueMaxLength?: number;
+}
+export declare function useInputWithTagsModeValue<E extends HTMLInputElement | HTMLTextAreaElement>(props: Omit<UseInputWithTagsModeValueProps<E>, 'onChange'>): readonly [{
+    readonly tags: string[];
+    readonly typingValue: string;
+    readonly tagsReachedMax: boolean;
+}, (event: ChangeEvent<E> | null) => void, () => void, (tag: string) => void, (e: KeyboardEvent) => void];

package/Form/useInputWithTagsModeValue.js

@@ -0,0 +1,88 @@
+import { useRef, useState, useCallback } from 'react';
+import { useInputControlValue } from './useInputControlValue.js';
+
+function useInputWithTagsModeValue(props) {
+    var _a;
+    const { defaultValue, initialTagsValue = [], maxTagsLength, onTagsChange: onChangeProp, ref, skip = false, tagValueMaxLength = 8, } = props;
+    const canActive = !skip;
+    const activeMaxTagsLength = maxTagsLength || Math.max(3, initialTagsValue.length);
+    const tagsSetRef = useRef(new Set(initialTagsValue.map((initialTag) => initialTag.trim())));
+    const inputTypeIsNumber = useRef(((_a = ref.current) === null || _a === void 0 ? void 0 : _a.type) === 'number');
+    const tagValueTransform = (tag) => (tag.slice(0, tagValueMaxLength).trim());
+    const transformNumberTags = (tags) => (tags.map((tag) => Number(tag)));
+    const generateUniqueTags = () => (Array
+        .from(tagsSetRef.current.values())
+        .map((initialTag) => tagValueTransform(initialTag)));
+    const [value, setValue] = useInputControlValue({
+        defaultValue: canActive ? defaultValue : undefined,
+    });
+    const [tags, setTags] = useState(generateUniqueTags()
+        .slice(0, activeMaxTagsLength));
+    const tagsWillOverflow = useCallback(() => (tagsSetRef.current.size === activeMaxTagsLength), []);
+    const clearTypingFieldValue = () => {
+        if (!canActive)
+            return;
+        const target = ref.current;
+        if (target) {
+            const changeEvent = Object.create({});
+            changeEvent.target = target;
+            changeEvent.currentTarget = target;
+            target.value = '';
+            setValue(changeEvent);
+        }
+    };
+    const onClear = () => {
+        if (!canActive)
+            return;
+        clearTypingFieldValue();
+        tagsSetRef.current.clear();
+        setTags([]);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([]);
+    };
+    const onChange = (event) => {
+        if (canActive && event) {
+            setValue(event);
+        }
+    };
+    const onRemove = (tag) => {
+        tagsSetRef.current.delete(tag);
+        const numberTag = inputTypeIsNumber.current;
+        const newTags = generateUniqueTags();
+        setTags(newTags);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(numberTag ? transformNumberTags(newTags) : newTags);
+    };
+    const onKeyDown = useCallback((e) => {
+        var _a;
+        if (!canActive)
+            return;
+        const element = ref.current;
+        if (element && (element === null || element === void 0 ? void 0 : element.value) &&
+            (e.key === 'Enter' || e.code === 'Enter') &&
+            !e.nativeEvent.isComposing &&
+            !tagsWillOverflow()) {
+            e.preventDefault();
+            inputTypeIsNumber.current = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.type) === 'number';
+            const tagsSet = tagsSetRef.current;
+            const isNumber = inputTypeIsNumber.current;
+            const newTagValue = tagValueTransform(element.value);
+            tagsSet.add(newTagValue);
+            const newTags = generateUniqueTags();
+            setTags(newTags);
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(isNumber ? transformNumberTags(newTags) : newTags);
+            clearTypingFieldValue();
+        }
+    }, [tagsWillOverflow]);
+    return [
+        {
+            tags,
+            typingValue: value,
+            tagsReachedMax: tagsWillOverflow(),
+        },
+        onChange,
+        onClear,
+        onRemove,
+        onKeyDown,
+    ];
+}
+
+export { useInputWithTagsModeValue };

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.js

@@ -11,6 +11,7 @@ const Icon = forwardRef(function Icon(props, ref) {
     const { definition } = icon;
     const cssVars = toIconCssVars({ color, size });
     const style = {
+        '--mzn-icon-cursor': props.onClick || props.onMouseOver ? 'pointer' : 'inherit',
         ...cssVars,
         ...styleProp,
     };

package/Input/Input.d.ts

@@ -1,6 +1,7 @@
 import { Ref, ChangeEventHandler } from 'react';
 import { InputSize } from '@mezzanine-ui/core/input';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import type { TagsType } from '../Form/useInputWithTagsModeValue';
 import { TextFieldProps } from '../TextField';
 export interface InputProps extends Omit<TextFieldProps, 'active' | 'children' | 'onClear' | 'onKeyDown'> {
     /**
@@ -15,6 +16,11 @@ export interface InputProps extends Omit<TextFieldProps, 'active' | 'children' |
      * The other native props for input element.
      */
     inputProps?: Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'defaultValue' | 'disabled' | 'onChange' | 'placeholder' | 'readOnly' | 'required' | 'value' | `aria-${'disabled' | 'multiline' | 'readonly' | 'required'}`>;
+    /**
+     * The input value mode
+     * @default 'default'
+     */
+    mode?: 'default' | 'tags';
     /**
      * The change event handler of input element.
      */
@@ -38,6 +44,28 @@ export interface InputProps extends Omit<TextFieldProps, 'active' | 'children' |
      * @default 'medium'
      */
     size?: InputSize;
+    /**
+      * The props for input element with tags mode.
+      */
+    tagsProps?: {
+        /**
+         * The initial value of tags
+         */
+        initialTagsValue?: string[];
+        /**
+         * The position of input field on tags mode
+         * @default 'bottom''
+         */
+        inputPosition?: 'top' | 'bottom';
+        /**
+         * Maximum permitted length of the tags
+         */
+        maxTagsLength?: number;
+        /**
+        * The change event handler of input tags value.
+        */
+        onTagsChange?: (tags: TagsType) => void;
+    };
     /**
      * The value of input.
      */

package/Input/Input.js

@@ -1,9 +1,12 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext, useRef } from 'react';
 import { inputClasses } from '@mezzanine-ui/core/input';
+import { selectClasses } from '@mezzanine-ui/core/select';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import { useInputWithClearControlValue } from '../Form/useInputWithClearControlValue.js';
+import { useInputWithTagsModeValue } from '../Form/useInputWithTagsModeValue.js';
 import TextField from '../TextField/TextField.js';
+import Tag from '../Tag/Tag.js';
 import { FormControlContext } from '../Form/FormControlContext.js';
 import cx from 'clsx';
 
@@ -12,7 +15,9 @@ import cx from 'clsx';
  */
 const Input = forwardRef(function Input(props, ref) {
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputRef: inputRefProp, inputProps, onChange: onChangeProp, placeholder, prefix, readOnly = false, required = requiredFromFormControl || false, size = 'medium', suffix, value: valueProp, } = props;
+    const { className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef: inputRefProp, mode = 'default', onChange: onChangeProp, placeholder, prefix, readOnly = false, required = requiredFromFormControl || false, size = 'medium', suffix, tagsProps, value: valueProp, } = props;
+    const { initialTagsValue, inputPosition = 'bottom', maxTagsLength, onTagsChange, } = tagsProps || {};
+    const tagsMode = mode === 'tags';
     const inputRef = useRef(null);
     const [value, onChange, onClear,] = useInputWithClearControlValue({
         defaultValue,
@@ -20,9 +25,27 @@ const Input = forwardRef(function Input(props, ref) {
         ref: inputRef,
         value: valueProp,
     });
+    const [{ tags, tagsReachedMax, }, tagsModeOnChange, tagsModeOnClear, tagsModeOnRemove, onKeyDown,] = useInputWithTagsModeValue({
+        defaultValue,
+        initialTagsValue,
+        maxTagsLength,
+        onTagsChange,
+        ref: inputRef,
+        skip: !tagsMode,
+        tagValueMaxLength: inputProps === null || inputProps === void 0 ? void 0 : inputProps.maxLength,
+        value: valueProp,
+    });
     const composedInputRef = useComposeRefs([inputRefProp, inputRef]);
+    const maxLength = () => (tagsMode
+        ? Math.min((inputProps === null || inputProps === void 0 ? void 0 : inputProps.maxLength) || 8, 8)
+        : inputProps === null || inputProps === void 0 ? void 0 : inputProps.maxLength);
     const active = !!value;
-    return (jsx(TextField, Object.assign({ ref: ref, active: active, className: cx(inputClasses.host, className), clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, onClear: onClear, prefix: prefix, size: size, suffix: suffix }, { children: jsx("input", Object.assign({}, inputProps, { ref: composedInputRef, "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));
+    const mountInput = !tagsMode || !tagsReachedMax;
+    return (jsxs(TextField, Object.assign({ ref: ref, active: active, className: cx(inputClasses.host, tagsMode && inputClasses.tagsMode, inputPosition === 'top' && inputClasses.tagsModeInputOnTop, className), clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, onClear: tagsMode ? tagsModeOnClear : onClear, prefix: mountInput ? prefix : undefined, suffix: mountInput ? suffix : undefined, size: size }, { children: [tagsMode && (jsx("div", Object.assign({ className: selectClasses.triggerTags }, { children: tags.map((tag) => (jsx(Tag, Object.assign({ closable: true, disabled: disabled, size: size, onClose: (e) => {
+                        e.stopPropagation();
+                        tagsModeOnRemove(tag);
+                    } }, { children: tag }), tag))) }), void 0)),
+            mountInput && (jsx("input", Object.assign({}, inputProps, { "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, maxLength: maxLength(), onChange: tagsMode ? tagsModeOnChange : onChange, onKeyDown: tagsMode ? onKeyDown : inputProps === null || inputProps === void 0 ? void 0 : inputProps.onKeyDown, placeholder: placeholder, readOnly: readOnly, ref: composedInputRef, required: required, value: tagsMode ? undefined : value }), void 0))] }), void 0));
 });
 var Input$1 = Input;
 

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;
 

package/Select/SelectTrigger.d.ts

@@ -1,10 +1,9 @@
 import { Ref } from 'react';
-import { SelectMode } from '@mezzanine-ui/core/select';
 import { TextFieldProps } from '../TextField';
 import { SelectValue } from './typings';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export declare type SelectTriggerInputProps = Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'autoComplete' | 'children' | 'defaultValue' | 'disabled' | 'readOnly' | 'required' | 'type' | 'value' | `aria-${'autocomplete' | 'disabled' | 'haspopup' | 'multiline' | 'readonly' | 'required'}`>;
-export interface SelectTriggerProps extends Omit<TextFieldProps, 'active' | 'children' | 'defaultChecked' | 'suffix'> {
+export interface SelectTriggerBaseProps extends Omit<TextFieldProps, 'active' | 'children' | 'defaultChecked' | 'suffix'> {
     /**
      * Controls the chevron icon layout.
      */
@@ -13,6 +12,10 @@ export interface SelectTriggerProps extends Omit<TextFieldProps, 'active' | 'chi
      * force hide suffixAction icons
      */
     forceHideSuffixActionIcon?: boolean;
+    /**
+     * The ref for SelectTrigger root.
+     */
+    innerRef?: Ref<HTMLDivElement>;
     /**
      * Other props you may provide to input element.
      */
@@ -21,10 +24,6 @@ export interface SelectTriggerProps extends Omit<TextFieldProps, 'active' | 'chi
      * The ref object for input element.
      */
     inputRef?: Ref<HTMLInputElement>;
-    /**
-     * Controls the layout of trigger.
-     */
-    mode?: SelectMode;
     /**
      * The click handler for the cross icon on tags
      */
@@ -38,17 +37,46 @@ export interface SelectTriggerProps extends Omit<TextFieldProps, 'active' | 'chi
      * Provide if you have a customize value rendering logic.
      * By default will have a comma between values.
      */
-    renderValue?: (value: SelectValue[]) => string;
+    renderValue?: (value: SelectValue[] | SelectValue | null) => string;
     /**
      * Whether the input is required.
      * @default false
      */
     required?: boolean;
+}
+export declare type SelectTriggerMultipleProps = SelectTriggerBaseProps & {
+    /**
+     * Controls the layout of trigger.
+     */
+    mode: 'multiple';
     /**
      * The value of selection.
      * @default undefined
      */
     value?: SelectValue[];
-}
-declare const SelectTrigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+    /**
+     * Provide if you have a customize value rendering logic.
+     * By default will have a comma between values.
+     */
+    renderValue?: (value: SelectValue[]) => string;
+};
+export declare type SelectTriggerSingleProps = SelectTriggerBaseProps & {
+    /**
+     * Controls the layout of trigger.
+     */
+    mode?: 'single';
+    /**
+     * The value of selection.
+     * @default undefined
+     */
+    value?: SelectValue | null;
+    /**
+     * Provide if you have a customize value rendering logic.
+     * By default will have a comma between values.
+     */
+    renderValue?: (value: SelectValue | null) => string;
+};
+export declare type SelectTriggerComponentProps = SelectTriggerMultipleProps | SelectTriggerSingleProps;
+export declare type SelectTriggerProps = Omit<SelectTriggerComponentProps, 'innerRef'>;
+declare const SelectTrigger: import("react").ForwardRefExoticComponent<Pick<SelectTriggerComponentProps, "disabled" | "placeholder" | "readOnly" | "required" | "size" | "value" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "active" | "clearable" | "error" | "fullWidth" | "onClear" | "suffixActionIcon" | "forceHideSuffixActionIcon" | "inputProps" | "inputRef" | "onTagClose" | "renderValue" | "mode"> & import("react").RefAttributes<HTMLDivElement>>;
 export default SelectTrigger;

package/Select/SelectTrigger.js

@@ -7,21 +7,45 @@ import TextField from '../TextField/TextField.js';
 import Tag from '../Tag/Tag.js';
 import cx from 'clsx';
 
-const SelectTrigger = forwardRef(function SelectTrigger(props, ref) {
-    const { active, className, disabled, forceHideSuffixActionIcon, inputProps, inputRef, mode, onTagClose, readOnly, renderValue: renderValueProp, required, size, suffixActionIcon: suffixActionIconProp, value, ...restTextFieldProps } = props;
+function SelectTriggerComponent(props) {
+    var _a;
+    const { active, className, disabled, forceHideSuffixActionIcon, inputProps, innerRef, inputRef, mode, onTagClose, readOnly, renderValue: renderValueProp, required, size, suffixActionIcon: suffixActionIconProp, value, ...restTextFieldProps } = props;
     /** Render value to string for input */
     const renderValue = () => {
-        var _a, _b;
-        return ((_b = (_a = renderValueProp === null || renderValueProp === void 0 ? void 0 : renderValueProp(value || [])) !== null && _a !== void 0 ? _a : value === null || value === void 0 ? void 0 : value.map((v) => v.name).join(', ')) !== null && _b !== void 0 ? _b : '');
+        if (typeof renderValueProp === 'function') {
+            return renderValueProp(value || (mode === 'multiple' ? [] : null));
+        }
+        if (value) {
+            if (Array.isArray(value)) {
+                return value.map((v) => v.name).join(', ');
+            }
+            return value.name;
+        }
+        return '';
     };
     /** Compute suffix action icon */
     const suffixActionIcon = suffixActionIconProp || (jsx(Icon, { icon: ChevronDownIcon, className: cx(selectClasses.triggerSuffixActionIcon, {
             [selectClasses.triggerSuffixActionIconActive]: active,
         }) }, void 0));
-    return (jsx(TextField, Object.assign({ ref: ref }, restTextFieldProps, { active: !!(value === null || value === void 0 ? void 0 : value.length), className: cx(selectClasses.trigger, className), disabled: disabled, size: size, suffixActionIcon: forceHideSuffixActionIcon ? undefined : suffixActionIcon }, { children: mode === 'multiple' && (value === null || value === void 0 ? void 0 : value.length) ? (jsx("div", Object.assign({ className: selectClasses.triggerTags }, { children: value.map((selection) => (jsx(Tag, Object.assign({ closable: true, disabled: disabled, onClose: (e) => {
+    const getTextFieldActive = () => {
+        if (value) {
+            if (Array.isArray(value)) {
+                return !!(value === null || value === void 0 ? void 0 : value.length);
+            }
+            return !!value;
+        }
+        return false;
+    };
+    return (jsx(TextField, Object.assign({ ref: innerRef }, restTextFieldProps, { active: getTextFieldActive(), className: cx(selectClasses.trigger, className), disabled: disabled, size: size, suffixActionIcon: forceHideSuffixActionIcon ? undefined : suffixActionIcon }, { children: mode === 'multiple' && ((_a = value) === null || _a === void 0 ? void 0 : _a.length) ? (jsx("div", Object.assign({ className: selectClasses.triggerTags }, { children: value.map((selection) => (jsx(Tag, Object.assign({ closable: true, disabled: disabled, onClose: (e) => {
                     e.stopPropagation();
                     onTagClose === null || onTagClose === void 0 ? void 0 : onTagClose(selection);
                 }, size: size }, { children: selection.name }), selection.id))) }), void 0)) : (jsx("input", Object.assign({}, inputProps, { ref: inputRef, "aria-autocomplete": "list", "aria-disabled": disabled, "aria-haspopup": "listbox", "aria-readonly": readOnly, "aria-required": required, autoComplete: "false", disabled: disabled, readOnly: readOnly, required: required, type: "search", value: renderValue() }), void 0)) }), void 0));
+}
+const SelectTrigger = forwardRef((props, ref) => {
+    if (props.mode === 'multiple') {
+        return (jsx(SelectTriggerComponent, Object.assign({}, props, { innerRef: ref }), void 0));
+    }
+    return (jsx(SelectTriggerComponent, Object.assign({}, props, { innerRef: ref }), void 0));
 });
 var SelectTrigger$1 = SelectTrigger;
 

package/Select/typings.d.ts

@@ -6,6 +6,6 @@ export interface TreeSelectOption extends SelectValue {
     siblings?: TreeSelectOption[];
 }
 export interface SelectControl {
-    value: SelectValue[];
-    onChange: (v: SelectValue | null) => SelectValue[];
+    value: SelectValue[] | SelectValue | null;
+    onChange: (v: SelectValue | null) => SelectValue[] | SelectValue | null;
 }

package/Table/TableBodyRow.js

@@ -1,8 +1,10 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useState, useMemo, useCallback, Fragment } from 'react';
-import { tableClasses } from '@mezzanine-ui/core/table';
+import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { forwardRef, useContext, useState, useMemo, Fragment } from 'react';
+import { tableClasses, getColumnStyle, getCellStyle } from '@mezzanine-ui/core/table';
+import get from 'lodash/get';
 import { TableContext, TableDataContext } from './TableContext.js';
 import TableCell from './TableCell.js';
+import TableExpandedTable from './TableExpandedTable.js';
 import TableRowSelection from './rowSelection/TableRowSelection.js';
 import TableExpandable from './expandable/TableExpandable.js';
 import TableEditRenderWrapper from './editable/TableEditRenderWrapper.js';
@@ -25,39 +27,17 @@ const TableBodyRow = forwardRef(function TableBodyRow(props, ref) {
         var _a, _b;
         return ((_b = (_a = expanding === null || expanding === void 0 ? void 0 : expanding.expandedRowRender) === null || _a === void 0 ? void 0 : _a.call(expanding, rowData)) !== null && _b !== void 0 ? _b : null);
     }, [expanding, rowData]);
-    /** styling */
-    const getColumnStyle = useCallback((column) => {
-        let style = {};
-        if (column.width) {
-            style = {
-                ...style,
-                width: column.width,
-                maxWidth: column.width,
-            };
-        }
-        return style;
-    }, []);
-    const getCellStyle = useCallback((column) => {
-        let style = {};
-        if (column.align) {
-            style = {
-                ...style,
-                justifyContent: column.align === 'center' ? column.align : `flex-${column.align}`,
-            };
-        }
-        return style;
-    }, []);
     return (jsxs(Fragment, { children: [jsxs("div", Object.assign({}, rest, { ref: ref, className: cx(tableClasses.bodyRow, {
                     [tableClasses.bodyRowHighlight]: selected || expanded,
                 }, className), role: "row" }, { children: [rowSelection ? (jsx(TableRowSelection, { role: "gridcell", rowKey: (rowData.key || rowData.id), setChecked: (status) => setSelected(status), showDropdownIcon: false }, void 0)) : null,
-                    expanding ? (jsx(TableExpandable, { expandable: isExpandable, expanded: expanded, role: "gridcell", setExpanded: setExpanded }, void 0)) : null,
+                    expanding ? (jsx(TableExpandable, { expandable: isExpandable, expanded: expanded, role: "gridcell", setExpanded: setExpanded, onExpand: (status) => { var _a; return (_a = expanding.onExpand) === null || _a === void 0 ? void 0 : _a.call(expanding, rowData, status); } }, void 0)) : null,
                     (columns !== null && columns !== void 0 ? columns : []).map((column, index) => {
                         var _a, _b, _c, _d;
-                        const ellipsis = !!(rowData[column.dataIndex]) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
-                        const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, rowData)) !== null && _c !== void 0 ? _c : rowData[column.dataIndex]);
-                        return (jsx("div", Object.assign({ className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle(column) }, { children: jsx(TableEditRenderWrapper, Object.assign({}, column, { rowData: rowData }, { children: jsx(TableCell, Object.assign({ ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle(column), tooltipTitle: tooltipTitle }, { children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, column, rowData, index)) || rowData[column.dataIndex] }), void 0) }), void 0) }), `${column.dataIndex}-${column.title}`));
+                        const ellipsis = !!(get(rowData, column.dataIndex)) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
+                        const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, rowData)) !== null && _c !== void 0 ? _c : get(rowData, column.dataIndex));
+                        return (jsx("div", Object.assign({ className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle(column) }, { children: jsx(TableEditRenderWrapper, Object.assign({}, column, { rowData: rowData }, { children: jsx(TableCell, Object.assign({ ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle(column), tooltipTitle: tooltipTitle }, { children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, column, rowData, index)) || get(rowData, column.dataIndex) }), void 0) }), void 0) }), `${column.dataIndex}-${column.title}`));
                     })] }), void 0),
-            renderedExpandedContent ? (jsx(AccordionDetails, Object.assign({ className: expanding.className, expanded: expanded }, { children: renderedExpandedContent }), void 0)) : null] }, void 0));
+            renderedExpandedContent ? (jsx(Fragment$1, { children: typeof renderedExpandedContent === 'string' ? (jsx(AccordionDetails, Object.assign({ className: expanding.className, expanded: expanded }, { children: renderedExpandedContent }), void 0)) : (jsx(Fragment$1, { children: renderedExpandedContent.dataSource.length > 0 ? (jsx(AccordionDetails, Object.assign({ className: cx(expanding.className, tableClasses.bodyRowExpandedTableWrapper), expanded: expanded }, { children: jsx(TableExpandedTable, { renderedExpandedContent: renderedExpandedContent }, void 0) }), void 0)) : null }, void 0)) }, void 0)) : null] }, void 0));
 });
 var TableBodyRow$1 = TableBodyRow;
 

package/Table/TableExpandedTable.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { TableDataSource, ExpandedTableColumn } from '@mezzanine-ui/core/table';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface TableExpandedTableProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    renderedExpandedContent: {
+        dataSource: TableDataSource[];
+        columns?: ExpandedTableColumn[];
+    };
+}
+declare const TableExpandedTable: import("react").ForwardRefExoticComponent<TableExpandedTableProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TableExpandedTable;

package/Table/TableExpandedTable.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { tableClasses, getColumnStyle, getCellStyle } from '@mezzanine-ui/core/table';
+import get from 'lodash/get';
+import { TableDataContext } from './TableContext.js';
+import TableCell from './TableCell.js';
+import TableExpandable from './expandable/TableExpandable.js';
+import cx from 'clsx';
+
+const TableExpandedTable = forwardRef(function TableExpandedTable(props, ref) {
+    const { renderedExpandedContent, } = props;
+    const { columns, } = useContext(TableDataContext) || {};
+    return (jsx("div", Object.assign({ className: tableClasses.bodyRowExpandedTable }, { children: renderedExpandedContent.dataSource.map((source) => {
+            var _a;
+            return (jsxs("div", Object.assign({ ref: ref, className: cx(tableClasses.bodyRow, tableClasses.bodyRowExpandedTableRow), role: "row" }, { children: [jsx(TableExpandable, { showIcon: false }, void 0),
+                    ((_a = (renderedExpandedContent.columns || columns)) !== null && _a !== void 0 ? _a : [])
+                        .map((column, index) => {
+                        var _a, _b, _c, _d;
+                        const ellipsis = !!(get(source, column.dataIndex)) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
+                        const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, source)) !== null && _c !== void 0 ? _c : get(source, column.dataIndex));
+                        return (jsx("div", Object.assign({ className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle((columns !== null && columns !== void 0 ? columns : [])[index]) }, { children: jsx(TableCell, Object.assign({ ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle((columns !== null && columns !== void 0 ? columns : [])[index]), tooltipTitle: tooltipTitle || '' }, { children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, column, source, index)) || get(source, column.dataIndex) }), void 0) }), `${column.dataIndex}-${index}`));
+                    })] }), (source.key || source.id)));
+        }) }), void 0));
+});
+var TableExpandedTable$1 = TableExpandedTable;
+
+export { TableExpandedTable$1 as default };

package/Table/TableHeader.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useCallback } from 'react';
-import { tableClasses } from '@mezzanine-ui/core/table';
+import { forwardRef, useContext } from 'react';
+import { tableClasses, getColumnStyle, getCellStyle } from '@mezzanine-ui/core/table';
 import { TableContext, TableDataContext } from './TableContext.js';
 import { SELECTED_ALL_KEY } from './rowSelection/useTableRowSelection.js';
 import TableCell from './TableCell.js';
@@ -13,34 +13,12 @@ const TableHeader = forwardRef(function TableHeader(props, ref) {
     const { className, ...rest } = props;
     const { rowSelection, expanding, } = useContext(TableContext) || {};
     const { columns, } = useContext(TableDataContext) || {};
-    /** styling */
-    const getColumnStyle = useCallback((column) => {
-        let style = {};
-        if (column.width) {
-            style = {
-                ...style,
-                width: column.width,
-                maxWidth: column.width,
-            };
-        }
-        return style;
-    }, []);
-    const getCellStyle = useCallback((column) => {
-        let style = {};
-        if (column.align) {
-            style = {
-                ...style,
-                justifyContent: column.align === 'center' ? column.align : `flex-${column.align}`,
-            };
-        }
-        return style;
-    }, []);
     return (jsxs("div", Object.assign({ ref: ref }, rest, { className: cx(tableClasses.header, className), role: "rowgroup" }, { children: [rowSelection ? (jsx(TableRowSelection, { rowKey: SELECTED_ALL_KEY, showDropdownIcon: true }, void 0)) : null,
             expanding && !rowSelection ? (jsx(TableExpandable, { showIcon: false }, void 0)) : null,
             (columns !== null && columns !== void 0 ? columns : []).map((column) => {
                 var _a;
                 return (jsx("div", Object.assign({ className: cx(tableClasses.headerCellWrapper, column.headerClassName), style: getColumnStyle(column) }, { children: jsxs(TableCell, Object.assign({ ellipsis: false, role: "columnheader", style: getCellStyle(column) }, { children: [((_a = column.renderTitle) === null || _a === void 0 ? void 0 : _a.call(column, tableClasses)) || column.title,
-                            typeof column.sorter === 'function' ? (jsx(TableSortingIcon, { column: column }, void 0)) : null] }), void 0) }), `${column.dataIndex}-${column.title}`));
+                            typeof column.sorter === 'function' || typeof column.onSorted === 'function' ? (jsx(TableSortingIcon, { column: column }, void 0)) : null] }), void 0) }), `${column.dataIndex}-${column.title}`));
             })] }), void 0));
 });
 var TableHeader$1 = TableHeader;

package/Table/expandable/TableExpandable.d.ts

@@ -10,6 +10,10 @@ export interface TableExpandableProps extends NativeElementPropsWithoutKeyAndRef
      * whether is expanded or not
      */
     expanded?: boolean;
+    /**
+     * Invoked by expanded status changed.
+     */
+    onExpand?(status: boolean): void;
     /**
      * toggle expanded
      */

package/Table/expandable/TableExpandable.js

@@ -6,10 +6,19 @@ import Icon from '../../Icon/Icon.js';
 import cx from 'clsx';
 
 const TableExpandable = forwardRef(function TableExpandable(props, ref) {
-    const { className, expandable = true, expanded, setExpanded, showIcon = true, ...rest } = props;
+    const { className, expandable = true, expanded, onExpand, setExpanded, showIcon = true, ...rest } = props;
+    const onClick = () => {
+        if (expandable) {
+            const nextStatus = !expanded;
+            setExpanded === null || setExpanded === void 0 ? void 0 : setExpanded(nextStatus);
+            if (onExpand) {
+                onExpand(nextStatus);
+            }
+        }
+    };
     return (jsx("div", Object.assign({}, rest, { ref: ref, className: cx(tableClasses.collapseAction, className) }, { children: jsx("div", Object.assign({ className: tableClasses.icon }, { children: showIcon ? (jsx(Icon, { className: cx(tableClasses.icon, {
                     [tableClasses.iconClickable]: expandable,
-                }), color: expandable ? 'primary' : 'disabled', icon: ChevronDownIcon, onClick: () => expandable && (setExpanded === null || setExpanded === void 0 ? void 0 : setExpanded(!expanded)), style: { transform: `rotate(${expanded ? '180deg' : '0'})` } }, void 0)) : null }), void 0) }), void 0));
+                }), color: expandable ? 'primary' : 'disabled', icon: ChevronDownIcon, onClick: onClick, style: { transform: `rotate(${expanded ? '180deg' : '0'})` } }, void 0)) : null }), void 0) }), void 0));
 });
 var TableExpandable$1 = TableExpandable;
 

package/Table/sorting/useTableSorting.js

@@ -1,5 +1,6 @@
 import { useState, useCallback } from 'react';
 import isEqual from 'lodash/isEqual';
+import get from 'lodash/get';
 import { useControlValueState } from '../../Form/useControlValueState.js';
 import { useLastCallback } from '../../hooks/useLastCallback.js';
 
@@ -50,15 +51,15 @@ function useTableSorting(props) {
     }, []);
     const onChange = useLastCallback((opts) => {
         const { dataIndex, sorter, onSorted } = opts;
+        const isChosenFromOneToAnother = sortedOn && dataIndex !== sortedOn;
+        const nextSortedType = getNextSortedType(isChosenFromOneToAnother ? 'none' : sortedType);
         const onMappingSources = (sources) => {
             setDataSource(sources);
-            onSorted === null || onSorted === void 0 ? void 0 : onSorted(sources);
+            onSorted === null || onSorted === void 0 ? void 0 : onSorted(dataIndex, nextSortedType);
         };
         // only apply changes when column sorter is given
-        if (typeof sorter === 'function') {
+        if (typeof sorter === 'function' || typeof onSorted === 'function') {
             // should update next sorted type first
-            const isChosenFromOneToAnother = sortedOn && dataIndex !== sortedOn;
-            const nextSortedType = getNextSortedType(isChosenFromOneToAnother ? 'none' : sortedType);
             setSortedType(nextSortedType);
             switch (nextSortedType) {
                 case 'desc':
@@ -67,10 +68,12 @@ function useTableSorting(props) {
                     setSortedOn(dataIndex);
                     // getting new source instance (when switch between sorter, should use origin dataSource)
                     let newSource = (isChosenFromOneToAnother ? dataSourceProp : dataSource).slice(0);
-                    // sort by given sorter
-                    newSource = newSource.sort((a, b) => (
-                    // reverse result when sorted type is ascending
-                    (sorter(a[dataIndex], b[dataIndex])) * (nextSortedType === 'asc' ? -1 : 1)));
+                    if (typeof sorter === 'function') {
+                        // sort by given sorter
+                        newSource = newSource.sort((a, b) => (
+                        // reverse result when sorted type is ascending
+                        (sorter(get(a, dataIndex), get(b, dataIndex))) * (nextSortedType === 'asc' ? -1 : 1)));
+                    }
                     // map back the data source
                     onMappingSources(newSource);
                     break;

package/Tabs/useTabsOverflow.js

@@ -1,26 +1,10 @@
 import { useState, useEffect } from 'react';
-import { useWindowWidth } from '../hooks/useWindowWidth.js';
 
 function useTabsOverflow(tabsRef) {
     const [isOverflowing, setIsOverflowing] = useState(false);
     const [scrollState, setScrollState] = useState('begin');
     const isScrollToBegin = scrollState === 'begin';
     const isScrollToEnd = scrollState === 'end';
-    const windowWidth = useWindowWidth();
-    function handleScrollState() {
-        if (tabsRef.current) {
-            const offsetRight = tabsRef.current.scrollWidth - tabsRef.current.clientWidth;
-            if (tabsRef.current.scrollLeft === 0) {
-                setScrollState('begin');
-            }
-            else if (tabsRef.current.scrollLeft >= offsetRight) {
-                setScrollState('end');
-            }
-            else {
-                setScrollState('middle');
-            }
-        }
-    }
     function scrollToLeft() {
         if (tabsRef.current) {
             tabsRef.current.scrollTo(0, 0);
@@ -34,16 +18,35 @@ function useTabsOverflow(tabsRef) {
     }
     useEffect(() => {
         if (tabsRef.current) {
-            const isXOverflowing = tabsRef.current.scrollWidth > tabsRef.current.clientWidth;
-            if (isOverflowing !== isXOverflowing) {
-                setIsOverflowing(isXOverflowing);
-            }
-        }
-    }, [isOverflowing, windowWidth]);
-    useEffect(() => {
-        if (tabsRef.current) {
+            const handleOverflowingState = () => {
+                if (tabsRef.current) {
+                    setIsOverflowing(tabsRef.current.scrollWidth > tabsRef.current.clientWidth);
+                }
+            };
+            const handleScrollState = () => {
+                if (tabsRef.current) {
+                    const offsetRight = tabsRef.current.scrollWidth - tabsRef.current.clientWidth;
+                    if (tabsRef.current.scrollLeft === 0) {
+                        setScrollState('begin');
+                    }
+                    else if (tabsRef.current.scrollLeft >= offsetRight) {
+                        setScrollState('end');
+                    }
+                    else {
+                        setScrollState('middle');
+                    }
+                }
+            };
+            // init isOverflowing when mounting
+            handleOverflowingState();
+            window.addEventListener('resize', handleOverflowingState);
             tabsRef.current.addEventListener('scroll', handleScrollState);
-            return () => { var _a; return (_a = tabsRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', handleScrollState); };
+            return () => {
+                if (tabsRef.current) {
+                    window.removeEventListener('resize', handleOverflowingState);
+                    tabsRef.current.removeEventListener('scroll', handleScrollState);
+                }
+            };
         }
     }, [tabsRef.current]);
     return {

package/TimePanel/TimePanelColumn.js

@@ -20,12 +20,13 @@ const TimePanelColumn = forwardRef(function TimePanelColumn(props, ref) {
     };
     const prevetSmoothScrollTo = useRef(true);
     useEffect(() => {
-        var _a;
         const activeIndex = units.findIndex(({ value }) => value === activeUnit);
-        (_a = cellsRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-            top: activeIndex * cellHeight,
-            behavior: prevetSmoothScrollTo.current ? 'auto' : 'smooth',
-        });
+        if (cellsRef.current) {
+            cellsRef.current.scrollTo({
+                top: activeIndex * cellHeight,
+                behavior: prevetSmoothScrollTo.current ? 'auto' : 'smooth',
+            });
+        }
         prevetSmoothScrollTo.current = false;
     }, [activeUnit, cellHeight, units]);
     return (jsxs("div", Object.assign({ ref: ref, className: timePanelClasses.column }, { children: [prefix && jsx("div", Object.assign({ className: timePanelClasses.columnPrefix }, { children: prefix }), void 0),

package/TimePicker/TimePicker.js

@@ -17,7 +17,7 @@ import { FormControlContext } from '../Form/FormControlContext.js';
 const TimePicker = forwardRef(function TimePicker(props, ref) {
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
     const { defaultTimeFormat, } = useCalendarContext();
-    const { className, clearable, confirmText, defaultValue, disabled = disabledFromFormControl, error = severity === 'error' || false, format = defaultTimeFormat, fullWidth = fullWidthFromFormControl, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, inputProps, minutePrefix, minuteStep, onChange: onChangeProp, onPanelToggle: onPanelToggleProp, placeholder, popperProps, prefix, readOnly, required = requiredFromFormControl, secondPrefix, secondStep, size: sizeProp, value: valueProp, } = props;
+    const { className, clearable = true, confirmText, defaultValue, disabled = disabledFromFormControl, error = severity === 'error' || false, format = defaultTimeFormat, fullWidth = fullWidthFromFormControl, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, inputProps, minutePrefix, minuteStep, onChange: onChangeProp, onPanelToggle: onPanelToggleProp, placeholder, popperProps, prefix, readOnly, required = requiredFromFormControl, secondPrefix, secondStep, size: sizeProp, value: valueProp, } = props;
     const { onBlur: onBlurProp, onKeyDown: onKeyDownProp, onFocus: onFocusProp, size: inputSize = format.length + 2, ...restInputProp } = inputProps || {};
     const formats = useMemo(() => [format], [format]);
     /** Panel open control */

package/index.d.ts

@@ -43,8 +43,7 @@ export { DropdownProps, default as Dropdown, } from './Dropdown';
 export { NavigationItem, NavigationItemProps, NavigationSubMenu, NavigationSubMenuProps, NavigationSubMenuChild, NavigationSubMenuChildren, NavigationChild, NavigationChildren, NavigationProps, default as Navigation, } from './Navigation';
 export { AppBarChild, AppBarChildren, AppBarBrand, AppBarBrandProps, AppBarMain, AppBarMainProps, AppBarSupport, AppBarSupportProps, default as AppBar, } from './AppBar';
 export { PageFooterProps, default as PageFooter, } from './PageFooter';
-export { StepProps, default as Step, } from './Stepper';
-export { StepperProps, default as Stepper, } from './Stepper';
+export { StepProps, StepperProps, Step, default as Stepper, } from './Stepper';
 /**
  * Data Display
  */

package/index.js

@@ -45,7 +45,8 @@ export { default as AppBarMain } from './AppBar/AppBarMain.js';
 export { default as AppBarSupport } from './AppBar/AppBarSupport.js';
 export { default as AppBar } from './AppBar/AppBar.js';
 export { default as PageFooter } from './PageFooter/PageFooter.js';
-export { default as Step, default as Stepper } from './Stepper/Stepper.js';
+export { default as Step } from './Stepper/Step.js';
+export { default as Stepper } from './Stepper/Stepper.js';
 export { default as AccordionSummary } from './Accordion/AccordionSummary.js';
 export { default as AccordionDetails } from './Accordion/AccordionDetails.js';
 export { default as Accordion } from './Accordion/Accordion.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "0.7.3",
+  "version": "0.9.0",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -32,7 +32,7 @@
     "react-dom": "^17.0.1"
   },
   "dependencies": {
-    "@mezzanine-ui/core": "^0.7.3",
+    "@mezzanine-ui/core": "^0.9.0",
     "@mezzanine-ui/icons": "^0.7.3",
     "@mezzanine-ui/system": "^0.7.0",
     "@popperjs/core": "^2.9.2",