@mezzanine-ui/react 0.9.2 → 0.10.2

package/Navigation/NavigationItem.js

@@ -16,7 +16,7 @@ const NavigationItem = forwardRef((props, ref) => {
             onClick(eventKey);
         }
     }, [eventKey, onClick, orientation]);
-    return (jsxs("li", Object.assign({}, rest, { ref: ref, className: cx(navigationItemClasses.host, active && navigationItemClasses.active, className), role: "menuitem", onClick: handleClick, onKeyDown: () => { } }, { children: [icon && (jsx(Icon, { className: navigationItemClasses.icon, icon: icon }, void 0)), children] }), void 0));
+    return (jsxs("li", { ...rest, ref: ref, className: cx(navigationItemClasses.host, active && navigationItemClasses.active, className), role: "menuitem", onClick: handleClick, onKeyDown: () => { }, children: [icon && (jsx(Icon, { className: navigationItemClasses.icon, icon: icon })), children] }));
 });
 var NavigationItem$1 = NavigationItem;
 

package/Navigation/NavigationSubMenu.js

@@ -54,12 +54,10 @@ const NavigationSubMenu = forwardRef((props, ref) => {
         open,
         orientation,
     ]);
-    const WrapChildren = (jsx("ul", Object.assign({ className: navigationSubMenuClasses.group }, { children: children }), void 0));
-    return (jsxs(NavigationItem, Object.assign({}, rest, { ref: composedNodeRef, className: cx(navigationSubMenuClasses.host, active && navigationSubMenuClasses.active, open && navigationSubMenuClasses.open, (icon && orientation === 'vertical') && navigationSubMenuClasses.indent, className), onClick: () => setOpen(!open) }, { children: [jsxs("div", Object.assign({ className: navigationSubMenuClasses.title }, { children: [icon && (jsx(Icon, { className: navigationSubMenuClasses.icon, icon: icon }, void 0)), title, jsx(Icon, { className: navigationSubMenuClasses.toggleIcon, icon: GroupToggleIcon }, void 0)] }), void 0),
-            orientation === 'horizontal' && (jsx(Popper, Object.assign({ anchor: nodeRef, disablePortal: true, open: !!open, options: popperOptions }, { children: WrapChildren }), void 0)),
-            orientation === 'vertical' && (jsx(Collapse, Object.assign({ style: {
+    const WrapChildren = (jsx("ul", { className: navigationSubMenuClasses.group, children: children }));
+    return (jsxs(NavigationItem, { ...rest, ref: composedNodeRef, className: cx(navigationSubMenuClasses.host, active && navigationSubMenuClasses.active, open && navigationSubMenuClasses.open, (icon && orientation === 'vertical') && navigationSubMenuClasses.indent, className), onClick: () => setOpen(!open), children: [jsxs("div", { className: navigationSubMenuClasses.title, children: [icon && (jsx(Icon, { className: navigationSubMenuClasses.icon, icon: icon })), title, jsx(Icon, { className: navigationSubMenuClasses.toggleIcon, icon: GroupToggleIcon })] }), orientation === 'horizontal' && (jsx(Popper, { anchor: nodeRef, disablePortal: true, open: !!open, options: popperOptions, children: WrapChildren })), orientation === 'vertical' && (jsx(Collapse, { style: {
                     width: '100%',
-                }, in: !!open }, { children: WrapChildren }), void 0))] }), void 0));
+                }, in: !!open, children: WrapChildren }))] }));
 });
 var NavigationSubMenu$1 = NavigationSubMenu;
 

package/Notification/Notification.js

@@ -50,16 +50,11 @@ const Notification = ((props) => {
         }
         Notification.remove(reference);
     };
-    return (jsx(SlideFade, Object.assign({ in: open, appear: true, onExited: onExited, direction: direction }, restTransitionProps, { children: jsxs("div", Object.assign({ className: cx(notificationClasses.host, severity ? notificationClasses.severity(severity) : undefined) }, { children: [targetIcon ? (jsx("div", Object.assign({ className: notificationClasses.iconContainer }, { children: jsx(Icon, { icon: targetIcon, className: notificationClasses.severityIcon }, void 0) }), void 0)) : null,
-                jsxs("div", Object.assign({ className: notificationClasses.body }, { children: [jsx("h4", Object.assign({ className: notificationClasses.title }, { children: title }), void 0),
-                        jsx("div", Object.assign({ className: notificationClasses.content }, { children: children }), void 0),
-                        onConfirm && !severity ? (jsxs(ButtonGroup, Object.assign({ className: notificationClasses.action }, { children: [jsx(Button, Object.assign({ variant: "contained", onClick: onConfirm }, { children: confirmText }), void 0),
-                                jsx(Button, Object.assign({ variant: "outlined", onClick: onCancel || onClose }, { children: cancelText }), void 0)] }), void 0)) : null] }), void 0),
-                jsx(Icon, { icon: TimesIcon, className: notificationClasses.closeIcon, onClick: onClose }, void 0)] }), void 0) }), void 0));
+    return (jsx(SlideFade, { in: open, appear: true, onExited: onExited, direction: direction, ...restTransitionProps, children: jsxs("div", { className: cx(notificationClasses.host, severity ? notificationClasses.severity(severity) : undefined), children: [targetIcon ? (jsx("div", { className: notificationClasses.iconContainer, children: jsx(Icon, { icon: targetIcon, className: notificationClasses.severityIcon }) })) : null, jsxs("div", { className: notificationClasses.body, children: [jsx("h4", { className: notificationClasses.title, children: title }), jsx("div", { className: notificationClasses.content, children: children }), onConfirm && !severity ? (jsxs(ButtonGroup, { className: notificationClasses.action, children: [jsx(Button, { variant: "contained", onClick: onConfirm, children: confirmText }), jsx(Button, { variant: "outlined", onClick: onCancel || onClose, children: cancelText })] })) : null] }), jsx(Icon, { icon: TimesIcon, className: notificationClasses.closeIcon, onClick: onClose })] }) }));
 });
 const { add, config, destroy, remove, } = createNotifier({
     duration: false,
-    render: (notif) => jsx(Notification, Object.assign({}, notif), void 0),
+    render: (notif) => jsx(Notification, { ...notif }),
     setRoot: (root) => {
         root.setAttribute('class', notificationClasses.root);
     },

package/Notifier/NotifierManager.js

@@ -25,7 +25,7 @@ function NotifierManager(props) {
         },
     }), []);
     useImperativeHandle(controllerRef, () => controller, [controller]);
-    return (jsx(Fragment, { children: notifiersShouldRendered.map((notifier) => (jsx(Fragment$1, { children: render(notifier) }, notifier.key))) }, void 0));
+    return (jsx(Fragment, { children: notifiersShouldRendered.map((notifier) => (jsx(Fragment$1, { children: render(notifier) }, notifier.key))) }));
 }
 
 export { NotifierManager as default };

package/Notifier/createNotifier.js

@@ -37,7 +37,7 @@ function createNotifier(props) {
                 controllerRef.current.add(resolvedNotifier);
             }
             else {
-                render((jsx(NotifierManager, { controllerRef: controllerRef, defaultNotifiers: [resolvedNotifier], maxCount: currentConfig.maxCount, render: renderNotifier }, void 0)), root);
+                render((jsx(NotifierManager, { controllerRef: controllerRef, defaultNotifiers: [resolvedNotifier], maxCount: currentConfig.maxCount, render: renderNotifier })), root);
             }
             return resolvedNotifier.key;
         },

package/Overlay/Overlay.js

@@ -11,10 +11,10 @@ import cx from 'clsx';
 const Overlay = forwardRef(function Overlay(props, ref) {
     const { children, className, container, disableCloseOnBackdropClick = false, disablePortal, hideBackdrop = false, invisibleBackdrop = false, onBackdropClick, onClose, onSurface, open = false, ...rest } = props;
     const fixedAtBody = Boolean(!container);
-    return (jsx(Portal, Object.assign({ container: container, disablePortal: disablePortal }, { children: jsxs("div", Object.assign({}, rest, { ref: ref, className: cx(overlayClasses.host, {
+    return (jsx(Portal, { container: container, disablePortal: disablePortal, children: jsxs("div", { ...rest, ref: ref, className: cx(overlayClasses.host, {
                 [overlayClasses.hostFixed]: fixedAtBody,
                 [overlayClasses.hostOpen]: open,
-            }, className) }, { children: [hideBackdrop ? null : (jsx(Fade, Object.assign({ in: open }, { children: jsx("div", { "aria-hidden": true, className: cx(overlayClasses.backdrop, {
+            }, className), children: [hideBackdrop ? null : (jsx(Fade, { in: open, children: jsx("div", { "aria-hidden": true, className: cx(overlayClasses.backdrop, {
                             [overlayClasses.backdropFixed]: fixedAtBody,
                             [overlayClasses.invisible]: invisibleBackdrop,
                             [overlayClasses.backdropOnSurface]: onSurface,
@@ -25,7 +25,7 @@ const Overlay = forwardRef(function Overlay(props, ref) {
                             if (onBackdropClick) {
                                 onBackdropClick(event);
                             }
-                        } }, void 0) }), void 0)), children] }), void 0) }), void 0));
+                        } }) })), children] }) }));
 });
 var Overlay$1 = Overlay;
 

package/PageFooter/PageFooter.js

@@ -6,8 +6,7 @@ import cx from 'clsx';
 
 const PageFooter = forwardRef(function PageFooter(props, ref) {
     const { className, actionClassName, cancelButtonProps, cancelText, children, danger, loading, confirmButtonProps, confirmText, hideCancelButton, hideConfirmButton, onCancel, onConfirm, ...rest } = props;
-    return (jsxs("footer", Object.assign({ ref: ref }, rest, { className: cx(pageFooterClasses.host, className) }, { children: [jsx("div", Object.assign({ className: actionClassName }, { children: children }), void 0),
-            jsx(ConfirmActions, { cancelText: cancelText, confirmText: confirmText, cancelButtonProps: cancelButtonProps, confirmButtonProps: confirmButtonProps, danger: danger, hideCancelButton: hideCancelButton, hideConfirmButton: hideConfirmButton, loading: loading, onCancel: onCancel, onConfirm: onConfirm }, void 0)] }), void 0));
+    return (jsxs("footer", { ref: ref, ...rest, className: cx(pageFooterClasses.host, className), children: [jsx("div", { className: actionClassName, children: children }), jsx(ConfirmActions, { cancelText: cancelText, confirmText: confirmText, cancelButtonProps: cancelButtonProps, confirmButtonProps: confirmButtonProps, danger: danger, hideCancelButton: hideCancelButton, hideConfirmButton: hideConfirmButton, loading: loading, onCancel: onCancel, onConfirm: onConfirm })] }));
 });
 var PageFooter$1 = PageFooter;
 

package/Pagination/Pagination.js

@@ -10,7 +10,7 @@ import cx from 'clsx';
  * The react component for `mezzanine` pagination.
  */
 const Pagination = forwardRef((props, ref) => {
-    const { className, boundaryCount = 1, buttonText, current = 1, disabled = false, hideNextButton = false, hidePreviousButton = false, hintText, inputPlaceholder, itemRender = (item) => jsx(PaginationItem, Object.assign({}, item), void 0), onChange, pageSize = 5, showJumper = false, siblingCount = 1, total = 0, ...rest } = props;
+    const { className, boundaryCount = 1, buttonText, current = 1, disabled = false, hideNextButton = false, hidePreviousButton = false, hintText, inputPlaceholder, itemRender = (item) => jsx(PaginationItem, { ...item }), onChange, pageSize = 5, showJumper = false, siblingCount = 1, total = 0, ...rest } = props;
     const { items } = usePagination({
         boundaryCount,
         current,
@@ -22,8 +22,7 @@ const Pagination = forwardRef((props, ref) => {
         siblingCount,
         total,
     });
-    return (jsx("nav", Object.assign({}, rest, { ref: ref, "aria-label": "pagination navigation", className: cx(paginationClasses.host, className) }, { children: jsxs("ul", Object.assign({ className: paginationClasses.container }, { children: [items.map((item, index) => (jsx("li", Object.assign({ className: paginationClasses.item }, { children: itemRender(item) }), index))),
-                showJumper && (jsx("li", Object.assign({ className: paginationClasses.jumper }, { children: jsx(PaginationJumper, { buttonText: buttonText, disabled: disabled, hintText: hintText, inputPlaceholder: inputPlaceholder, onChange: onChange, pageSize: pageSize, total: total }, void 0) }), void 0))] }), void 0) }), void 0));
+    return (jsx("nav", { ...rest, ref: ref, "aria-label": "pagination navigation", className: cx(paginationClasses.host, className), children: jsxs("ul", { className: paginationClasses.container, children: [items.map((item, index) => (jsx("li", { className: paginationClasses.item, children: itemRender(item) }, index))), showJumper && (jsx("li", { className: paginationClasses.jumper, children: jsx(PaginationJumper, { buttonText: buttonText, disabled: disabled, hintText: hintText, inputPlaceholder: inputPlaceholder, onChange: onChange, pageSize: pageSize, total: total }) }))] }) }));
 });
 var Pagination$1 = Pagination;
 

package/Pagination/PaginationItem.js

@@ -12,13 +12,13 @@ const PaginationItem = forwardRef((props, ref) => {
         previous: ChevronLeftIcon,
     };
     const ButtonIcon = icons[type];
-    return type === 'ellipsis' ? (jsx("div", Object.assign({}, rest, { ref: ref, className: cx(paginationItemClasses.host, paginationItemClasses.ellipsis, {
+    return type === 'ellipsis' ? (jsx("div", { ...rest, ref: ref, className: cx(paginationItemClasses.host, paginationItemClasses.ellipsis, {
             [paginationItemClasses.disabled]: disabled,
-        }, className) }, { children: "..." }), void 0)) : (createElement("button", Object.assign({}, rest, { ref: ref, key: page, disabled: disabled, className: cx(paginationItemClasses.host, paginationItemClasses.button, {
+        }, className), children: "..." })) : (createElement("button", { ...rest, ref: ref, key: page, disabled: disabled, className: cx(paginationItemClasses.host, paginationItemClasses.button, {
             [paginationItemClasses.active]: active,
             [paginationItemClasses.disabled]: disabled,
-        }, className), type: "button" }),
-        ButtonIcon && jsx(Icon, { icon: ButtonIcon }, void 0),
+        }, className), type: "button" },
+        ButtonIcon && jsx(Icon, { icon: ButtonIcon }),
         type === 'page' && page));
 });
 var PaginationItem$1 = PaginationItem;

package/Pagination/PaginationJumper.js

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

package/Picker/PickerTrigger.d.ts

@@ -1,7 +1,7 @@
 import { ChangeEventHandler, RefObject } from 'react';
 import { TextFieldProps } from '../TextField';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface PickerTriggerProps extends Omit<TextFieldProps, 'active' | 'children' | 'suffix' | 'defualtChecked'> {
+export interface PickerTriggerProps extends Omit<TextFieldProps, 'active' | 'children' | 'suffix' | 'defaultChecked'> {
     /**
      * React ref for the input element.
      */

package/Picker/PickerTrigger.js

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

package/Picker/RangePickerTrigger.d.ts

@@ -1,7 +1,7 @@
 import { ChangeEventHandler, MouseEventHandler, RefObject } from 'react';
 import { TextFieldProps } from '../TextField';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface RangePickerTriggerProps extends Omit<TextFieldProps, 'active' | 'children' | 'suffix' | 'defualtChecked' | 'placeholder'> {
+export interface RangePickerTriggerProps extends Omit<TextFieldProps, 'active' | 'children' | 'suffix' | 'defaultChecked' | 'placeholder'> {
     /**
      * Placeholder for the 'from' input element.
      */

package/Picker/RangePickerTrigger.js

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

package/Picker/usePickerInputValue.d.ts

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

package/Picker/usePickerValue.d.ts

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

package/Picker/useRangePickerValue.d.ts

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

package/Popconfirm/Popconfirm.js

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

package/Popover/Popover.js

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

package/Popper/Popper.js

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

package/Portal/Portal.js

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

package/Progress/Progress.js

@@ -1,8 +1,9 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
 import { ProgressStatuses, ProgressTypes, progressClasses } from '@mezzanine-ui/core/progress';
 import { CheckCircleFilledIcon, CheckIcon, TimesCircleFilledIcon, TimesIcon } from '@mezzanine-ui/icons';
 import Typography from '../Typography/Typography.js';
+import { MezzanineConfig } from '../Provider/context.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
@@ -10,23 +11,22 @@ import cx from 'clsx';
  * The react component for `mezzanine` progress.
  */
 const Progress = forwardRef(function Progress(props, ref) {
-    const { circleProps, className, errorIconProps, percent = 0, percentProps, showInfo = true, size = 'medium', status = percent < 100 ? ProgressStatuses.normal : ProgressStatuses.success, successIconProps, type = ProgressTypes.line, ...rest } = props;
+    const { size: globalSize, } = useContext(MezzanineConfig);
+    const { circleProps, className, errorIconProps, percent = 0, percentProps, showInfo = true, size = globalSize, status = percent < 100 ? ProgressStatuses.normal : ProgressStatuses.success, successIconProps, type = ProgressTypes.line, ...rest } = props;
     const percentLimited = Math.max(0, Math.min(100, percent));
     const defaultSuccessIcon = type === ProgressTypes.line ? CheckCircleFilledIcon : CheckIcon;
     const defaultErrorIcon = type === ProgressTypes.line ? TimesCircleFilledIcon : TimesIcon;
-    const renderInfo = (variant) => (jsx("div", Object.assign({ className: progressClasses.info }, { children: status === ProgressStatuses.normal
-            ? /** percent text */ (jsx(Typography, Object.assign({ className: progressClasses.infoPercent, variant: variant }, percentProps, { children: `${percentLimited}%` }), void 0)) : (jsxs(Fragment, { children: [status === ProgressStatuses.success && (jsx(Icon, Object.assign({ className: progressClasses.infoIcon, icon: defaultSuccessIcon }, successIconProps), void 0)),
-                status === ProgressStatuses.error && (jsx(Icon, Object.assign({ className: progressClasses.infoIcon, icon: defaultErrorIcon }, errorIconProps), void 0))] }, void 0)) }), void 0));
-    const renderLine = () => (jsxs(Fragment, { children: [jsx("div", Object.assign({ className: progressClasses.lineBg }, { children: jsx("div", { style: { width: `${percentLimited}%` } }, void 0) }), void 0), showInfo && renderInfo('input3')] }, void 0));
+    const renderInfo = (variant) => (jsx("div", { className: progressClasses.info, children: status === ProgressStatuses.normal
+            ? /** percent text */ (jsx(Typography, { className: progressClasses.infoPercent, variant: variant, ...percentProps, children: `${percentLimited}%` })) : (jsxs(Fragment, { children: [status === ProgressStatuses.success && (jsx(Icon, { className: progressClasses.infoIcon, icon: defaultSuccessIcon, ...successIconProps })), status === ProgressStatuses.error && (jsx(Icon, { className: progressClasses.infoIcon, icon: defaultErrorIcon, ...errorIconProps }))] })) }));
+    const renderLine = () => (jsxs(Fragment, { children: [jsx("div", { className: progressClasses.lineBg, children: jsx("div", { style: { width: `${percentLimited}%` } }) }), showInfo && renderInfo('input3')] }));
     const renderCircle = () => {
         const { size: circleSize = 80, strokeWidth = 8, } = circleProps || {};
         const radius = (circleSize - strokeWidth) / 2;
         const progressLength = percent > 0 ? percent * radius * Math.PI * 0.02 : 0.00001;
         const circleXY = circleSize / 2;
-        return (jsxs(Fragment, { children: [jsxs("svg", Object.assign({ style: { boxSizing: 'border-box' }, height: circleSize, width: circleSize }, { children: [jsx("circle", { className: progressClasses.circleBg, cx: circleXY, cy: circleXY, r: radius, strokeWidth: strokeWidth }, void 0),
-                        jsx("circle", { className: progressClasses.circleFiller, cx: circleXY, cy: circleXY, r: radius, strokeWidth: strokeWidth, strokeDasharray: `${progressLength.toString()} 999` }, void 0)] }), void 0), showInfo && renderInfo('button3')] }, void 0));
+        return (jsxs(Fragment, { children: [jsxs("svg", { style: { boxSizing: 'border-box' }, height: circleSize, width: circleSize, children: [jsx("circle", { className: progressClasses.circleBg, cx: circleXY, cy: circleXY, r: radius, strokeWidth: strokeWidth }), jsx("circle", { className: progressClasses.circleFiller, cx: circleXY, cy: circleXY, r: radius, strokeWidth: strokeWidth, strokeDasharray: `${progressLength.toString()} 999` })] }), showInfo && renderInfo('button3')] }));
     };
-    return (jsxs("div", Object.assign({ ref: ref, className: cx(progressClasses.host, className, status === ProgressStatuses.success && progressClasses.success, status === ProgressStatuses.error && progressClasses.error, type === ProgressTypes.line && progressClasses.lineVariant, type === ProgressTypes.circle && progressClasses.circleVariant, progressClasses.size(size)) }, rest, { children: [type === ProgressTypes.line && renderLine(), type === ProgressTypes.circle && renderCircle()] }), void 0));
+    return (jsxs("div", { ref: ref, className: cx(progressClasses.host, className, status === ProgressStatuses.success && progressClasses.success, status === ProgressStatuses.error && progressClasses.error, type === ProgressTypes.line && progressClasses.lineVariant, type === ProgressTypes.circle && progressClasses.circleVariant, progressClasses.size(size)), ...rest, children: [type === ProgressTypes.line && renderLine(), type === ProgressTypes.circle && renderCircle()] }));
 });
 var Progress$1 = Progress;
 

package/Provider/ConfigProvider.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { MezzanineConfigContext } from './context';
+export interface ConfigProviderProps {
+    children?: ReactNode;
+    size?: MezzanineConfigContext['size'];
+}
+declare function ConfigProvider(props: ConfigProviderProps): JSX.Element;
+export default ConfigProvider;

package/Provider/ConfigProvider.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { MezzanineConfig } from './context.js';
+
+function ConfigProvider(props) {
+    const { children, size, } = props;
+    const context = useMemo(() => ({
+        size: size || 'medium',
+    }), [size]);
+    return (jsx(MezzanineConfig.Provider, { value: context, children: children }));
+}
+
+export { ConfigProvider as default };

package/Provider/context.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Size } from '@mezzanine-ui/system/size';
+export interface MezzanineConfigContext {
+    size: Size;
+}
+export declare const MezzanineConfig: import("react").Context<MezzanineConfigContext>;

package/Provider/context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const MezzanineConfig = createContext({
+    size: 'medium',
+});
+
+export { MezzanineConfig };

package/Provider/index.d.ts

@@ -0,0 +1,4 @@
+export { default, } from './ConfigProvider';
+export type { ConfigProviderProps, } from './ConfigProvider';
+export { MezzanineConfig, } from './context';
+export type { MezzanineConfigContext, } from './context';

package/Provider/index.js

@@ -0,0 +1,2 @@
+export { default } from './ConfigProvider.js';
+export { MezzanineConfig } from './context.js';

package/Radio/Radio.js

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

package/Radio/RadioGroup.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { useInputControlValue } from '../Form/useInputControlValue.js';
 import { RadioGroupContext } from './RadioGroupContext.js';
 import Radio from './Radio.js';
@@ -15,15 +15,15 @@ const RadioGroup = forwardRef(function RadioGroup(props, ref) {
         onChange: onChangeProp,
         value: valueProp,
     });
-    const context = {
+    const context = useMemo(() => ({
         disabled,
         name,
         onChange,
         size,
         value,
-    };
-    const children = childrenProp || options.map((option) => (jsx(Radio, Object.assign({ disabled: option.disabled, value: option.value }, { children: option.label }), option.value)));
-    return (jsx(RadioGroupContext.Provider, Object.assign({ value: context }, { children: jsx(InputCheckGroup, Object.assign({}, rest, { ref: ref, role: "radiogroup" }, { children: children }), void 0) }), void 0));
+    }), [disabled, name, onChange, size, value]);
+    const children = childrenProp || options.map((option) => (jsx(Radio, { disabled: option.disabled, value: option.value, children: option.label }, option.value)));
+    return (jsx(RadioGroupContext.Provider, { value: context, children: jsx(InputCheckGroup, { ...rest, ref: ref, role: "radiogroup", children: children }) }));
 });
 var RadioGroup$1 = RadioGroup;
 

package/Select/AutoComplete.d.ts

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