@mezzanine-ui/react 0.10.4 → 0.11.1

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

@@ -3,7 +3,7 @@ import { NavigationOrientation } from '@mezzanine-ui/core/navigation';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { NavigationItemProps } from './NavigationItem';
 import { NavigationSubMenuProps } from './NavigationSubMenu';
-export declare type NavigationChild = ReactElement<NavigationItemProps | NavigationSubMenuProps>;
+export declare type NavigationChild = ReactElement<NavigationItemProps | NavigationSubMenuProps> | null;
 export declare type NavigationChildren = NavigationChild | NavigationChild[];
 export interface NavigationProps extends Omit<NativeElementPropsWithoutKeyAndRef<'ul'>, 'onClick'> {
     /**

package/Navigation/Navigation.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, Children, cloneElement } from 'react';
+import { forwardRef, useCallback, Children, cloneElement, useMemo } from 'react';
 import { navigationClasses } from '@mezzanine-ui/core/navigation';
 import NavigationItem from './NavigationItem.js';
 import NavigationSubMenu from './NavigationSubMenu.js';
@@ -8,41 +8,48 @@ import cx from 'clsx';
 
 const Navigation = forwardRef((props, ref) => {
     const { activeKey, children = [], className, onClick, orientation = 'horizontal', ...rest } = props;
-    const ItemChildren = Children.map(children, (child) => {
-        switch (child.type) {
-            case NavigationItem: {
-                const itemChild = child;
-                return cloneElement(itemChild, {
-                    active: itemChild.props.active || activeKey === itemChild.key,
-                    eventKey: itemChild.key,
-                    onClick: itemChild.props.onClick || onClick,
-                });
-            }
-            case NavigationSubMenu: {
-                const subMenuChild = child;
-                const subMenuChildren = child.props.children;
-                let subMenuActive = false;
-                const groupChildren = Children
-                    .map(subMenuChildren, (groupChild) => {
-                    const active = activeKey === groupChild.key || groupChild.props.active;
-                    if (active) {
-                        subMenuActive = true;
-                    }
-                    return cloneElement(groupChild, {
-                        active,
-                        eventKey: groupChild.key,
-                        onClick: groupChild.props.onClick || onClick,
+    const renderItemChildren = useCallback((parsedChildren) => (Children.map(parsedChildren, (child) => {
+        var _a, _b;
+        if (child) {
+            switch (child.type) {
+                case NavigationItem: {
+                    const itemChild = child;
+                    return cloneElement(itemChild, {
+                        active: itemChild.props.active || activeKey === itemChild.key,
+                        eventKey: itemChild.key,
+                        onClick: itemChild.props.onClick || onClick,
+                    });
+                }
+                case NavigationSubMenu: {
+                    const subMenuChild = child;
+                    const subMenuChildren = child.props.children;
+                    let subMenuActive = false;
+                    const groupChildren = Children
+                        .map(subMenuChildren, (groupChild) => {
+                        const active = activeKey === groupChild.key || groupChild.props.active;
+                        if (active) {
+                            subMenuActive = true;
+                        }
+                        return cloneElement(groupChild, {
+                            active,
+                            eventKey: groupChild.key,
+                            onClick: groupChild.props.onClick || onClick,
+                        });
                     });
-                });
-                return cloneElement(subMenuChild, {
-                    active: subMenuChild.props.active || subMenuActive,
-                }, groupChildren);
+                    return cloneElement(subMenuChild, {
+                        active: subMenuChild.props.active || subMenuActive,
+                    }, groupChildren);
+                }
+                default:
+                    return renderItemChildren(((_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : []));
             }
         }
-    });
-    return (jsx("ul", { ...rest, ref: ref, className: cx(navigationClasses.host, navigationClasses[orientation], className), children: jsx(NavigationContext.Provider, { value: {
-                orientation,
-            }, children: ItemChildren }) }));
+        return null;
+    })), [activeKey, onClick]);
+    const context = useMemo(() => ({
+        orientation,
+    }), [orientation]);
+    return (jsx("ul", { ...rest, ref: ref, className: cx(navigationClasses.host, navigationClasses[orientation], className), children: jsx(NavigationContext.Provider, { value: context, children: renderItemChildren(children) }) }));
 });
 var Navigation$1 = Navigation;
 

package/Notification/Notification.js

@@ -18,7 +18,7 @@ import { createNotifier } from '../Notifier/createNotifier.js';
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 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) {

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,22 +10,23 @@ import NotifierManager from './NotifierManager.js';
  */
 function createNotifier(props) {
     const { config: configProp, render: renderNotifier, setRoot, duration, maxCount, ...restNotifierProps } = props;
-    const root = typeof document === 'undefined' ? null : 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 && root) {
-        setRoot(root);
+    if (setRoot && container) {
+        setRoot(container);
     }
     return {
         add(notifier) {
             var _a, _b;
-            if (root === null)
+            if (container === null)
                 return 'NOT_SET';
-            document.body.appendChild(root);
+            document.body.appendChild(container);
             const key = (_a = notifier.key) !== null && _a !== void 0 ? _a : Date.now();
             const resolvedNotifier = {
                 ...restNotifierProps,
@@ -39,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;
         },
@@ -49,11 +50,12 @@ function createNotifier(props) {
             }
         },
         destroy() {
-            if (root === null)
+            if (container === null)
                 return;
-            unmountComponentAtNode(root);
-            if (root.parentNode) {
-                root.parentNode.removeChild(root);
+            // 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.4",
+  "version": "0.11.1",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -27,36 +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.4",
-    "@mezzanine-ui/icons": "^0.10.2",
-    "@mezzanine-ui/system": "^0.7.0",
-    "@popperjs/core": "^2.9.2",
-    "@types/react-transition-group": "4.4.1",
+    "@mezzanine-ui/core": "^0.11.1",
+    "@mezzanine-ui/icons": "^0.11.1",
+    "@mezzanine-ui/system": "^0.11.1",
+    "@popperjs/core": "^2.11.5",
+    "@types/react-transition-group": "^4.4.5",
     "clsx": "^1.1.1",
     "lodash": "^4.17.21",
-    "react-popper": "^2.2.5",
-    "react-transition-group": "4.4.1",
+    "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"
   }
 }