@mezzanine-ui/react 0.10.3 → 0.11.0

package/Accordion/AccordionSummary.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import { IconDefinition } from '@mezzanine-ui/icons';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export interface AccordionSummaryProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
     /**
@@ -7,9 +6,9 @@ export interface AccordionSummaryProps extends NativeElementPropsWithoutKeyAndRe
      */
     iconClassName?: string;
     /**
-     * custom prefix icon when `suffixActions` prop is given
+     * custom prefix icon element when `suffixActions` prop is given
      */
-    prefixIcon?: IconDefinition;
+    prefixIcon?: JSX.Element;
     /**
      * custom suffix actions
      */

package/Accordion/AccordionSummary.js

@@ -1,5 +1,5 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useContext, useCallback, useMemo } from 'react';
 import { ChevronDownIcon } from '@mezzanine-ui/icons';
 import { accordionClasses } from '@mezzanine-ui/core/accordion';
 import { AccordionControlContext } from './AccordionControlContext.js';
@@ -9,12 +9,12 @@ import cx from 'clsx';
 const AccordionSummary = forwardRef(function AccordionSummary(props, ref) {
     const { className, children, iconClassName: iconClassNameProp, prefixIcon, suffixActions, ...rest } = props;
     const { detailsId, disabled, expanded, toggleExpanded, } = useContext(AccordionControlContext) || {};
-    const onToggle = (e) => {
+    const onToggle = useCallback((e) => {
         e.stopPropagation();
         if (typeof toggleExpanded === 'function' && !disabled) {
             toggleExpanded(!expanded);
         }
-    };
+    }, [disabled, expanded, toggleExpanded]);
     const onKeyDown = (e) => {
         switch (e.code) {
             case 'Enter':
@@ -34,13 +34,13 @@ const AccordionSummary = forwardRef(function AccordionSummary(props, ref) {
         }
         return result;
     }, [detailsId, expanded]);
-    const DefaultIcon = (iconProps) => {
+    const DefaultIcon = useCallback((iconProps) => {
         const { className: iconClassNames = '' } = iconProps;
         return (jsx(Icon, { color: disabled ? 'disabled' : 'primary', className: cx(accordionClasses.summaryIcon, {
                 [accordionClasses.summaryIconExpanded]: expanded,
                 [accordionClasses.summaryIconDisabled]: disabled,
             }, iconClassNames, iconClassNameProp), icon: ChevronDownIcon, onClick: onToggle, onMouseDown: (evt) => evt.preventDefault(), role: "button" }));
-    };
+    }, [disabled, expanded, iconClassNameProp, onToggle]);
     return (jsxs("div", { ...rest, ...ariaProps, ref: ref, className: cx(accordionClasses.summary, {
             [accordionClasses.summaryDisabled]: disabled,
         }, className), onClick: onToggle, onKeyDown: onKeyDown, role: "button", tabIndex: 0, children: [jsxs("div", { className: accordionClasses.summaryMainPart, children: [suffixActions ? (prefixIcon || (jsx(DefaultIcon, { className: accordionClasses.summaryMainPartPrefix }))) : null, children] }), suffixActions || (jsx(DefaultIcon, {}))] }));

package/AppBar/AppBar.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, NamedExoticComponent } from 'react';
+import { ReactElement, NamedExoticComponent, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { AppBarOrientation } from '@mezzanine-ui/core/app-bar';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { AppBarBrandProps } from './AppBarBrand';
@@ -10,5 +10,5 @@ export interface AppBarProps extends NativeElementPropsWithoutKeyAndRef<'header'
     orientation?: AppBarOrientation;
     children?: AppBarChildren;
 }
-declare const AppBar: import("react").ForwardRefExoticComponent<AppBarProps & import("react").RefAttributes<HTMLElement>>;
+declare const AppBar: ForwardRefExoticComponent<AppBarProps & RefAttributes<HTMLElement>>;
 export default AppBar;

package/DateRangePicker/useDateRangePickerValue.d.ts

@@ -1,3 +1,4 @@
+import { DateType } from '@mezzanine-ui/core/calendar';
 import { RangePickerPickingValue, RangePickerValue } from '@mezzanine-ui/core/picker';
 import { ChangeEventHandler, KeyboardEventHandler } from 'react';
 import { UseRangePickerValueProps } from '../Picker/useRangePickerValue';
@@ -8,7 +9,7 @@ export declare function useDateRangePickerValue({ format, formats, inputFromRef,
     calendarValue: string[] | undefined;
     inputFromValue: string;
     inputToValue: string;
-    onCalendarChange: (val?: string | undefined) => void;
+    onCalendarChange: (val?: DateType) => void;
     onCalendarHover: import("react").Dispatch<import("react").SetStateAction<string | undefined>> | undefined;
     onChange: (target?: RangePickerPickingValue<string> | undefined) => RangePickerPickingValue<string> | undefined;
     onClear: () => void;

package/Message/Message.js

@@ -38,7 +38,7 @@ const { add, config, destroy, remove, } = createNotifier({
     duration: 3000,
     render: (message) => jsx(Message, { ...message }),
     setRoot: (root) => {
-        root.setAttribute('class', messageClasses.root);
+        root === null || root === void 0 ? void 0 : root.setAttribute('class', messageClasses.root);
     },
 });
 Message.add = add;

package/Notification/Notification.d.ts

@@ -50,5 +50,5 @@ export interface Notification extends FC<NotificationData>, Notifier<Notificatio
  * Use the API from the Notification instance such as `Notification.success` and `Notification.error`
  * to display a notification globally.
  */
-declare const Notification: Notification;
-export default Notification;
+declare const NotificationElement: Notification;
+export default NotificationElement;

package/Notification/Notification.js

@@ -16,9 +16,9 @@ import { createNotifier } from '../Notifier/createNotifier.js';
  * to display a notification globally.
  */
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-const Notification = ((props) => {
+const NotificationElement = ((props) => {
     const { cancelText, children, confirmText, direction = 'left', duration, onCancel: onCancelProp, onClose: onCloseProp, onConfirm: onConfirmProp, onExited: onExitedProp, reference, severity, title, ...restTransitionProps } = props;
-    const targetIcon = severity ? notificationIcons[severity] : severity;
+    const targetIcon = severity ? (notificationIcons[severity]) : undefined;
     const [open, setOpen] = useState(true);
     useEffect(() => {
         if (open && duration) {
@@ -48,27 +48,27 @@ const Notification = ((props) => {
         if (onExitedProp) {
             onExitedProp(node);
         }
-        Notification.remove(reference);
+        NotificationElement.remove(reference);
     };
     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, { ...notif }),
+    render: (notif) => jsx(NotificationElement, { ...notif }),
     setRoot: (root) => {
-        root.setAttribute('class', notificationClasses.root);
+        root === null || root === void 0 ? void 0 : root.setAttribute('class', notificationClasses.root);
     },
 });
-Notification.add = add;
-Notification.config = config;
-Notification.destroy = destroy;
-Notification.remove = remove;
+NotificationElement.add = add;
+NotificationElement.config = config;
+NotificationElement.destroy = destroy;
+NotificationElement.remove = remove;
 ['success', 'warning', 'error', 'info'].forEach((severity) => {
-    Notification[severity] = (props) => Notification.add({
+    NotificationElement[severity] = (props) => NotificationElement.add({
         ...props,
         severity,
     });
 });
-var Notification$1 = Notification;
+var NotificationElement$1 = NotificationElement;
 
-export { Notification$1 as default };
+export { NotificationElement$1 as default };

package/Notifier/createNotifier.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { createRef } from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import NotifierManager from './NotifierManager.js';
 
 /**
@@ -10,20 +10,23 @@ import NotifierManager from './NotifierManager.js';
  */
 function createNotifier(props) {
     const { config: configProp, render: renderNotifier, setRoot, duration, maxCount, ...restNotifierProps } = props;
-    const root = document.createElement('div');
+    const container = typeof document === 'undefined' ? null : document.createElement('div');
+    const root = container ? createRoot(container) : null;
     const controllerRef = createRef();
     let currentConfig = {
         duration,
         maxCount,
         ...configProp,
     };
-    if (setRoot) {
-        setRoot(root);
+    if (setRoot && container) {
+        setRoot(container);
     }
     return {
         add(notifier) {
             var _a, _b;
-            document.body.appendChild(root);
+            if (container === null)
+                return 'NOT_SET';
+            document.body.appendChild(container);
             const key = (_a = notifier.key) !== null && _a !== void 0 ? _a : Date.now();
             const resolvedNotifier = {
                 ...restNotifierProps,
@@ -37,7 +40,7 @@ function createNotifier(props) {
                 controllerRef.current.add(resolvedNotifier);
             }
             else {
-                render((jsx(NotifierManager, { controllerRef: controllerRef, defaultNotifiers: [resolvedNotifier], maxCount: currentConfig.maxCount, render: renderNotifier })), root);
+                root === null || root === void 0 ? void 0 : root.render(jsx(NotifierManager, { controllerRef: controllerRef, defaultNotifiers: [resolvedNotifier], maxCount: currentConfig.maxCount, render: renderNotifier }));
             }
             return resolvedNotifier.key;
         },
@@ -47,9 +50,12 @@ function createNotifier(props) {
             }
         },
         destroy() {
-            unmountComponentAtNode(root);
-            if (root.parentNode) {
-                root.parentNode.removeChild(root);
+            if (container === null)
+                return;
+            // when useEffect(() => () => { root.unmount() }, []), will be show "Rendered more hooks than during the previous render." issue.
+            root === null || root === void 0 ? void 0 : root.render(null);
+            if (container.parentNode) {
+                container.parentNode.removeChild(container);
             }
         },
         config(config) {

package/Picker/usePickerValue.d.ts

@@ -13,7 +13,7 @@ export declare type UsePickerValueProps = {
 export declare function usePickerValue({ defaultValue, format, formats, inputRef, value: valueProp, }: UsePickerValueProps): {
     inputValue: string;
     onBlur: FocusEventHandler<HTMLInputElement>;
-    onChange: (val?: string | undefined) => void;
+    onChange: (val?: DateType) => void;
     onInputChange: import("react").ChangeEventHandler<HTMLInputElement>;
     onKeyDown: KeyboardEventHandler<HTMLInputElement>;
     value: string | undefined;

package/Picker/useRangePickerValue.d.ts

@@ -9,7 +9,7 @@ export interface UseRangePickerValueProps extends Pick<UsePickerValueProps, 'for
 export declare function useRangePickerValue({ format, formats, inputFromRef, inputToRef, value: valueProp, }: UseRangePickerValueProps): {
     inputFromValue: string;
     inputToValue: string;
-    onChange: (target?: RangePickerPickingValue<string> | undefined) => RangePickerPickingValue | undefined;
+    onChange: (target?: RangePickerPickingValue) => RangePickerPickingValue | undefined;
     onFromBlur: import("react").FocusEventHandler<HTMLInputElement>;
     onFromKeyDown: KeyboardEventHandler<HTMLInputElement>;
     onInputFromChange: ChangeEventHandler<HTMLInputElement>;

package/Select/Select.d.ts

@@ -10,8 +10,9 @@ export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'in
     maxHeight: 'menuMaxHeight';
     role: 'menuRole';
     size: 'menuSize';
-}>, PickRenameMulti<Pick<PopperProps, 'options'>, {
+}>, PickRenameMulti<Pick<PopperProps, 'options' | 'disablePortal'>, {
     options: 'popperOptions';
+    disablePortal: 'disablePortal';
 }>, Pick<MenuProps, 'children'> {
     /**
      * The other native props for input element.

package/Select/Select.js

@@ -16,7 +16,7 @@ const MENU_ID = 'mzn-select-menu-id';
 const Select = forwardRef(function Select(props, ref) {
     var _a, _b;
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { children, className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, itemsInView = 4, menuMaxHeight, menuRole = 'listbox', menuSize, mode = 'single', onBlur, onChange: onChangeProp, onClear: onClearProp, onFocus, placeholder = '', popperOptions = {}, prefix, renderValue, required = requiredFromFormControl || false, size, suffixActionIcon, value: valueProp, } = props;
+    const { children, className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, disablePortal = false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, itemsInView = 4, menuMaxHeight, menuRole = 'listbox', menuSize, mode = 'single', onBlur, onChange: onChangeProp, onClear: onClearProp, onFocus, placeholder = '', popperOptions = {}, prefix, renderValue, required = requiredFromFormControl || false, size, suffixActionIcon, value: valueProp, } = props;
     const [open, toggleOpen] = useState(false);
     const onOpen = () => {
         onFocus === null || onFocus === void 0 ? void 0 : onFocus();
@@ -110,7 +110,7 @@ const Select = forwardRef(function Select(props, ref) {
         onChange,
         value,
     }), [onChange, value]);
-    return (jsx(SelectControlContext.Provider, { value: context, children: jsxs("div", { 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: true, renderValue: renderValue, required: required, inputProps: resolvedInputProps, size: size, suffixActionIcon: suffixActionIcon, value: value }), jsx(InputTriggerPopper, { ref: popperRef, anchor: controlRef, className: selectClasses.popper, open: open, sameWidth: true, options: popperOptions, children: jsx(Menu, { id: MENU_ID, "aria-activedescendant": Array.isArray(value) ? (_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '' : value === null || value === void 0 ? void 0 : value.id, itemsInView: itemsInView, maxHeight: menuMaxHeight, role: menuRole, size: menuSize, style: { border: 0 }, children: children }) })] }) }));
+    return (jsx(SelectControlContext.Provider, { value: context, children: jsxs("div", { 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: true, renderValue: renderValue, required: required, inputProps: resolvedInputProps, size: size, suffixActionIcon: suffixActionIcon, value: value }), jsx(InputTriggerPopper, { ref: popperRef, anchor: controlRef, className: selectClasses.popper, disablePortal: disablePortal, open: open, options: popperOptions, sameWidth: true, children: jsx(Menu, { id: MENU_ID, "aria-activedescendant": Array.isArray(value) ? (_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '' : value === null || value === void 0 ? void 0 : value.id, itemsInView: itemsInView, maxHeight: menuMaxHeight, role: menuRole, size: menuSize, style: { border: 0 }, children: children }) })] }) }));
 });
 var Select$1 = Select;
 

package/Select/useSelectTriggerTags.js

@@ -9,7 +9,7 @@ function calcTakeCount({ tagsWidths, maxWidth, ellipsisTagWidth, setTakeCount, }
         const prevTotal = take(tagsWidths, count).reduce((prev, curr) => prev + curr, 0);
         const nowTotal = take(tagsWidths, count + 1).reduce((prev, curr) => prev + curr, 0);
         targetCount = count;
-        if (prevTotal < maxWidth && nowTotal > maxWidth) {
+        if (prevTotal <= maxWidth && nowTotal >= maxWidth && maxWidth > 0) {
             if (prevTotal + ellipsisTagWidth > maxWidth) {
                 targetCount -= 1;
             }

package/Table/useTableScroll.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import { MouseEvent } from 'react';
 export default function useTableScroll(): readonly [{
     ref: import("react").RefObject<HTMLDivElement>;
     onScroll: () => void;
 }, {
     ref: import("react").RefObject<HTMLDivElement>;
-    onMouseDown: ({ target, clientY }: any) => void;
+    onMouseDown: ({ target, clientY }: MouseEvent<HTMLDivElement>) => void;
     onMouseUp: () => void;
     onMouseEnter: () => void;
     onMouseLeave: () => void;

package/Tooltip/Tooltip.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement, MouseEventHandler } from 'react';
 import { PopperProps } from '../Popper';
-export interface TooltipProps extends PopperProps {
+export interface TooltipProps extends Omit<PopperProps, 'children'> {
     /**
      * child function that can receive events
      */

package/Transition/Transition.d.ts

@@ -18,17 +18,6 @@ export interface TransitionImplementationChildProps {
     ref?: Ref<HTMLElement>;
     style?: CSSProperties;
 }
-export interface TransitionImplementationProps extends Omit<TransitionProps, 'addEndListener' | 'children' | 'nodeRef'> {
-    children: ReactElement<TransitionImplementationChildProps, NativeElementTag | JSXElementConstructor<TransitionImplementationChildProps>>;
-    /**
-     * The delay of the transition, in milliseconds
-     */
-    delay?: TransitionDelay;
-    /**
-     * The timing function of the transition
-     */
-    easing?: TransitionEasing;
-}
 export interface TransitionProps {
     /**
      * A custom callback for adding custom transition end handler
@@ -91,6 +80,17 @@ export interface TransitionProps {
      */
     onExited?: TransitionExitHandler;
 }
+export interface TransitionImplementationProps extends Omit<TransitionProps, 'addEndListener' | 'children' | 'nodeRef'> {
+    children: ReactElement<TransitionImplementationChildProps, NativeElementTag | JSXElementConstructor<TransitionImplementationChildProps>>;
+    /**
+     * The delay of the transition, in milliseconds
+     */
+    delay?: TransitionDelay;
+    /**
+     * The timing function of the transition
+     */
+    easing?: TransitionEasing;
+}
 /**
  * The react component for `mezzanine` transition.
  */

package/Upload/UploadPictureBlock.js

@@ -73,7 +73,9 @@ const UploadPictureBlock = forwardRef(function UploadPictureBlock(props, ref) {
             [uploadPictureBlockClasses.loading]: isLoading,
             [uploadPictureBlockClasses.error]: isError,
             [uploadPictureBlockClasses.disabled]: disabled,
-        }), style: style, children: [jsx(UploadInput, { ref: inputRef, accept: accept, disabled: disabled, multiple: multiple, onUpload: onUpload }), isError ? (jsxs("div", { className: uploadPictureBlockClasses.group, children: [jsx(Icon, { icon: TimesIcon }), jsx("span", { className: uploadPictureBlockClasses.status, children: "\u4E0A\u50B3\u932F\u8AA4" })] })) : (jsx(Fragment, { children: showImage ? (jsxs(Fragment, { children: [jsx("img", { alt: "", src: (value || previewImage), className: uploadPictureBlockClasses.preview }), isLoading ? (jsxs("div", { className: uploadPictureBlockClasses.group, children: [jsx(Icon, { icon: SpinnerIcon, spin: true }), jsx("span", { className: uploadPictureBlockClasses.status, children: "\u4E0A\u50B3\u4E2D..." })] })) : null] })) : (jsxs("div", { className: uploadPictureBlockClasses.group, children: [jsx(Icon, { icon: UploadIcon }), jsx("span", { className: uploadPictureBlockClasses.status, children: "\u4E0A\u50B3\u5F71\u50CF" })] })) })), !disabled && canDeleteImage && (jsx("div", { className: uploadPictureBlockClasses.delete, children: jsx(Icon, { icon: TrashIcon }) }))] }));
+        }), style: style, children: [jsx(UploadInput, { ref: inputRef, accept: accept, disabled: disabled, multiple: multiple, onUpload: onUpload }), isError ? (jsxs("div", { className: uploadPictureBlockClasses.group, children: [jsx(Icon, { icon: TimesIcon }), jsx("span", { className: uploadPictureBlockClasses.status, children: "\u4E0A\u50B3\u932F\u8AA4" })] })) : (
+            // eslint-disable-next-line react/jsx-no-useless-fragment
+            jsx(Fragment, { children: showImage ? (jsxs(Fragment, { children: [jsx("img", { alt: "", src: (value || previewImage), className: uploadPictureBlockClasses.preview }), isLoading ? (jsxs("div", { className: uploadPictureBlockClasses.group, children: [jsx(Icon, { icon: SpinnerIcon, spin: true }), jsx("span", { className: uploadPictureBlockClasses.status, children: "\u4E0A\u50B3\u4E2D..." })] })) : null] })) : (jsxs("div", { className: uploadPictureBlockClasses.group, children: [jsx(Icon, { icon: UploadIcon }), jsx("span", { className: uploadPictureBlockClasses.status, children: "\u4E0A\u50B3\u5F71\u50CF" })] })) })), !disabled && canDeleteImage && (jsx("div", { className: uploadPictureBlockClasses.delete, children: jsx(Icon, { icon: TrashIcon }) }))] }));
 });
 var UploadPictureBlock$1 = UploadPictureBlock;
 

package/hooks/useIsomorphicLayoutEffect.js

@@ -1,6 +1,6 @@
 import { useLayoutEffect, useEffect } from 'react';
 
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' && window.document && window.document.createElement
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' && window.document && !!window.document.createElement
     ? useLayoutEffect
     : useEffect;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "0.10.3",
+  "version": "0.11.0",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -27,35 +27,36 @@
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@mezzanine-ui/core": "^0.10.2",
+    "@mezzanine-ui/core": "^0.10.5",
     "@mezzanine-ui/icons": "^0.10.2",
     "@mezzanine-ui/system": "^0.7.0",
-    "@popperjs/core": "^2.9.2",
-    "@types/react-transition-group": "4.4.1",
+    "@popperjs/core": "^2.11.5",
+    "@types/react-transition-group": "^4.4.5",
     "clsx": "^1.1.1",
-    "react-popper": "^2.2.5",
-    "react-transition-group": "4.4.1",
+    "lodash": "^4.17.21",
+    "react-popper": "^2.3.0",
+    "react-transition-group": "^4.4.2",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@storybook/react": "^6.4.19",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/react-hooks": "^5.1.0",
-    "@types/lodash": "^4.14.168",
+    "@storybook/react": "^6.5.9",
+    "@testing-library/react": "^13.2.0",
+    "@testing-library/react-hooks": "^8.0.0",
+    "@types/lodash": "^4.14.182",
     "@types/moment": "^2.13.0",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
-    "@types/react-test-renderer": "^17.0.1",
-    "chromatic": "^5.10.1",
-    "dayjs": "^1.10.7",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
+    "@types/react-test-renderer": "^18.0.0",
+    "chromatic": "^6.6.4",
+    "dayjs": "^1.11.3",
     "lodash": "^4.17.21",
-    "moment": "^2.29.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-test-renderer": "^17.0.2"
+    "moment": "^2.29.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0"
   }
 }