@mezzanine-ui/react 0.15.2 → 0.16.0

package/Table/useTableScroll.d.ts

@@ -5,12 +5,12 @@ interface TableScrollProps {
     scrollBarSize?: number;
 }
 export default function useTableScroll(props: TableScrollProps): readonly [{
-    ref: import("react").RefObject<HTMLDivElement>;
-    target: import("react").RefObject<HTMLTableElement>;
+    ref: import("react").RefObject<HTMLDivElement | null>;
+    target: import("react").RefObject<HTMLTableElement | null>;
     onScroll: UIEventHandler<HTMLDivElement>;
 }, {
-    ref: import("react").RefObject<HTMLDivElement>;
-    trackRef: import("react").RefObject<HTMLDivElement>;
+    ref: import("react").RefObject<HTMLDivElement | null>;
+    trackRef: import("react").RefObject<HTMLDivElement | null>;
     scrollBarSize: number;
     onMouseDown: ({ clientY }: {
         clientY: number;
@@ -20,19 +20,21 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
     onMouseLeave: () => void;
     style: {
         height: string;
-        ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
+        ref?: import("react").Ref<HTMLDivElement> | undefined;
         key?: import("react").Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
         autoFocus?: boolean | undefined;
         className?: string | undefined;
         contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "false" | "true") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
@@ -56,7 +58,6 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         rev?: string | undefined;
         typeof?: string | undefined;
         vocab?: string | undefined;
-        autoCapitalize?: string | undefined;
         autoCorrect?: string | undefined;
         autoSave?: string | undefined;
         color?: string | undefined;
@@ -68,8 +69,14 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
+        popover?: "" | "auto" | "manual" | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+        popoverTarget?: string | undefined;
+        inert?: boolean | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
+        exportparts?: string | undefined;
+        part?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "false" | "true") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
@@ -277,6 +284,8 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
         onScroll?: UIEventHandler<HTMLDivElement> | undefined;
         onScrollCapture?: UIEventHandler<HTMLDivElement> | undefined;
+        onScrollEnd?: UIEventHandler<HTMLDivElement> | undefined;
+        onScrollEndCapture?: UIEventHandler<HTMLDivElement> | undefined;
         onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
         onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
         onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
@@ -285,24 +294,34 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
         onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
+        onBeforeToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
+        onTransitionCancel?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionRun?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionStart?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     };
     trackStyle: {
         height: string;
-        ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
+        ref?: import("react").Ref<HTMLDivElement> | undefined;
         key?: import("react").Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
         autoFocus?: boolean | undefined;
         className?: string | undefined;
         contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "false" | "true") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
@@ -326,7 +345,6 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         rev?: string | undefined;
         typeof?: string | undefined;
         vocab?: string | undefined;
-        autoCapitalize?: string | undefined;
         autoCorrect?: string | undefined;
         autoSave?: string | undefined;
         color?: string | undefined;
@@ -338,8 +356,14 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
+        popover?: "" | "auto" | "manual" | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+        popoverTarget?: string | undefined;
+        inert?: boolean | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
+        exportparts?: string | undefined;
+        part?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "false" | "true") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
@@ -547,6 +571,8 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
         onScroll?: UIEventHandler<HTMLDivElement> | undefined;
         onScrollCapture?: UIEventHandler<HTMLDivElement> | undefined;
+        onScrollEnd?: UIEventHandler<HTMLDivElement> | undefined;
+        onScrollEndCapture?: UIEventHandler<HTMLDivElement> | undefined;
         onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
         onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
         onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
@@ -555,8 +581,16 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
         onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
+        onBeforeToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
+        onTransitionCancel?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionRun?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionStart?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     };
 }, boolean];
 export {};

package/Table/useTableScroll.js

@@ -37,7 +37,7 @@ function useTableScroll(props) {
     const tableRef = useRef(null);
     const scrollBarTrackRef = useRef(null);
     const scrollBarRef = useRef(null);
-    const scrollBarDisplayTimer = useRef();
+    const scrollBarDisplayTimer = useRef(undefined);
     const [scrollBarHeight, setScrollBarHeight] = useState(0);
     const [pointerOffset, setPointerOffset] = useState(0);
     const [isHorizontalScrolling, toggleIsHorizontalScrolling] = useState(false);

package/Tabs/Tab.js

@@ -12,6 +12,5 @@ const Tab = forwardRef(function Tab(props, ref) {
             [tabsClasses.tabActive]: active,
         }, className), disabled: disabled, children: children }));
 });
-var Tab$1 = Tab;
 
-export { Tab$1 as default };
+export { Tab as default };

package/Tabs/TabPane.js

@@ -14,6 +14,5 @@ const TabPane = forwardRef(function TabPane(props, ref) {
     tab, ...rest } = props;
     return (jsx("div", { ...rest, ref: ref, className: cx(tabsClasses.pane, className), children: children }));
 });
-var TabPane$1 = TabPane;
 
-export { TabPane$1 as default };
+export { TabPane as default };

package/Tabs/Tabs.js

@@ -43,6 +43,5 @@ const Tabs = forwardRef(function Tabs(props, ref) {
     const { isOverflowing, isScrollToBegin, isScrollToEnd, scrollToLeft, scrollToRight, } = useTabsOverflow(tabsRef);
     return (jsxs("div", { ...rest, ref: ref, className: cx(tabsClasses.host, className), children: [jsxs("div", { className: cx(tabsClasses.tabBar, tabBarClassName), children: [jsxs("div", { className: tabsClasses.overflow, children: [isOverflowing && !isScrollToBegin && (jsx("button", { "aria-label": "scrollToLeft", className: tabsClasses.scrollBtn, onClick: () => scrollToLeft(), type: "button", children: jsx(Icon, { icon: ChevronLeftIcon }) })), jsx("div", { ref: tabsRef, className: tabsClasses.tabs, children: tabs }), isOverflowing && !isScrollToEnd && (jsx("button", { "aria-label": "scrollToRight", className: tabsClasses.scrollBtn, onClick: () => scrollToRight(), type: "button", children: jsx(Icon, { icon: ChevronRightIcon }) }))] }), actions] }), pane] }));
 });
-var Tabs$1 = Tabs;
 
-export { Tabs$1 as default };
+export { Tabs as default };

package/Tabs/useTabsOverflow.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-export default function useTabsOverflow(tabsRef: RefObject<HTMLElement>): {
+export default function useTabsOverflow(tabsRef: RefObject<HTMLElement | null>): {
     isOverflowing: boolean;
     isScrollToBegin: boolean;
     isScrollToEnd: boolean;

package/Tag/Tag.js

@@ -20,6 +20,5 @@ const Tag = forwardRef(function Tag(props, ref) {
                     }
                 }, tabIndex: -1 }))] }));
 });
-var Tag$1 = Tag;
 
-export { Tag$1 as default };
+export { Tag as default };

package/TextField/TextField.d.ts

@@ -6,7 +6,6 @@ export interface TextFieldProps extends Omit<NativeElementPropsWithoutKeyAndRef<
      * Whether the field is active.
      */
     active?: boolean;
-    children?: ReactNode;
     className?: string;
     /**
      * Whether to show the clear button.
@@ -45,7 +44,7 @@ export interface TextFieldProps extends Omit<NativeElementPropsWithoutKeyAndRef<
      * The suffix addon of the field.
      */
     suffix?: ReactNode;
-    suffixActionIcon?: ReactElement;
+    suffixActionIcon?: ReactElement<HTMLElement>;
 }
 /**
  * The react component for `mezzanine` input.

package/TextField/TextField.js

@@ -41,6 +41,5 @@ const TextField = forwardRef(function TextField(props, ref) {
                     }
                 }, onMouseDown: (event) => event.preventDefault(), role: "button", tabIndex: -1 }))] }));
 });
-var TextField$1 = TextField;
 
-export { TextField$1 as default };
+export { TextField as default };

package/Textarea/Textarea.js

@@ -30,6 +30,5 @@ const Textarea = forwardRef(function Textarea(props, ref) {
             [textareaClasses.upperLimit]: upperLimit,
         }, className), clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, onClear: onClear, size: size, children: [jsx("textarea", { ...textareaProps, ref: composedTextareaRef, "aria-disabled": disabled, "aria-multiline": true, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, maxLength: maxLength, onChange: onChange, placeholder: placeholder, readOnly: readOnly, required: required, rows: rows, value: value }), typeof maxLength === 'number' && (jsxs("span", { className: textareaClasses.count, children: [value.length, "/", maxLength] }))] }));
 });
-var Textarea$1 = Textarea;
 
-export { Textarea$1 as default };
+export { Textarea as default };

package/TimePanel/TimePanel.js

@@ -60,6 +60,5 @@ const TimePanel = forwardRef(function TimePanel(props, ref) {
     }
     return (jsxs("div", { ...restHostProps, ref: ref, className: cx(timePanelClasses.host, className), children: [jsxs("div", { className: timePanelClasses.columns, children: [!hideHour && hourUnits && (jsx(TimePanelColumn, { prefix: hourPrefix, units: hourUnits, activeUnit: activeHour, onChange: getChangeHandle('hour'), onNext: getControlHandle('hour', hourUnits, hourStep), onPrev: getControlHandle('hour', hourUnits, -hourStep) })), !hideMinute && minuteUnits && (jsx(TimePanelColumn, { prefix: minutePrefix, units: minuteUnits, activeUnit: activeMinute, onChange: getChangeHandle('minute'), onNext: getControlHandle('minute', minuteUnits, minuteStep), onPrev: getControlHandle('minute', minuteUnits, -minuteStep) })), !hideSecond && secondUnits && (jsx(TimePanelColumn, { prefix: secondPrefix, units: secondUnits, activeUnit: activeSecond, onChange: getChangeHandle('second'), onNext: getControlHandle('second', secondUnits, secondStep), onPrev: getControlHandle('second', secondUnits, -secondStep) }))] }), !withoutAction && (jsx(TimePanelAction, { onConfirm: onConfirm, confirmText: confirmText }))] }));
 });
-var TimePanel$1 = TimePanel;
 
-export { TimePanel$1 as default };
+export { TimePanel as default };

package/TimePanel/TimePanelAction.js

@@ -11,6 +11,5 @@ const TimePanelAction = forwardRef(function TimePanelAction(props, ref) {
     const { className, confirmText = 'OK', onConfirm, ...rest } = props;
     return (jsx("div", { ...rest, ref: ref, className: cx(timePanelClasses.action, className), children: jsx(Button, { variant: "contained", size: "small", onClick: onConfirm, children: confirmText }) }));
 });
-var TimePanelAction$1 = TimePanelAction;
 
-export { TimePanelAction$1 as default };
+export { TimePanelAction as default };

package/TimePanel/TimePanelColumn.js

@@ -33,6 +33,5 @@ const TimePanelColumn = forwardRef(function TimePanelColumn(props, ref) {
                         [timePanelClasses.buttonActive]: unit.value === activeUnit,
                     }), onClick: getChangeHandler(unit), children: unit.label }, unit.value))) }), jsx("button", { type: "button", className: cx(timePanelClasses.button, timePanelClasses.columnControlButton), onClick: onNext, children: jsx(Icon, { icon: ChevronDownIcon }) })] }));
 });
-var TimePanelColumn$1 = TimePanelColumn;
 
-export { TimePanelColumn$1 as default };
+export { TimePanelColumn as default };

package/TimePicker/TimePicker.js

@@ -109,6 +109,5 @@ const TimePicker = forwardRef(function TimePicker(props, ref) {
     const suffixActionIcon = jsx(Icon, { icon: ClockIcon, onClick: onIconClick });
     return (jsxs(Fragment, { children: [jsx(PickerTrigger, { ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputProps: resolvedInputProps, inputRef: inputRef, onChange: onInputChange, onClear: onClear, placeholder: placeholder, prefix: prefix, readOnly: readOnly, required: required, size: sizeProp, suffixActionIcon: suffixActionIcon, value: inputValue }), jsx(TimePickerPanel, { ref: panelRef, anchor: anchorRef, confirmText: confirmText, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourPrefix: hourPrefix, hourStep: hourStep, minutePrefix: minutePrefix, minuteStep: minuteStep, onChange: onChange, onConfirm: onConfirm, open: open, popperProps: popperProps, secondPrefix: secondPrefix, secondStep: secondStep, value: internalValue })] }));
 });
-var TimePicker$1 = TimePicker;
 
-export { TimePicker$1 as default };
+export { TimePicker as default };

package/TimePicker/TimePickerPanel.js

@@ -10,6 +10,5 @@ const TimePickerPanel = forwardRef(function TimePickerPanel(props, ref) {
     const { anchor, confirmText, fadeProps, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, minutePrefix, minuteStep, onChange, onConfirm, open, popperProps, secondPrefix, secondStep, value, ...restHostProps } = props;
     return (jsx(InputTriggerPopper, { ...popperProps, ref: ref, anchor: anchor, open: open, fadeProps: fadeProps, children: jsx(TimePanel, { ...restHostProps, hideHour: hideHour, hourStep: hourStep, hideMinute: hideMinute, minuteStep: minuteStep, hideSecond: hideSecond, secondStep: secondStep, hourPrefix: hourPrefix, minutePrefix: minutePrefix, secondPrefix: secondPrefix, onChange: onChange, value: value, onConfirm: onConfirm, confirmText: confirmText }) }));
 });
-var TimePickerPanel$1 = TimePickerPanel;
 
-export { TimePickerPanel$1 as default };
+export { TimePickerPanel as default };

package/Tooltip/Tooltip.d.ts

@@ -7,7 +7,7 @@ export interface TooltipProps extends Omit<PopperProps, 'children' | 'title'> {
     children(opt: {
         onMouseEnter: MouseEventHandler;
         onMouseLeave: MouseEventHandler;
-    }): ReactElement;
+    }): ReactElement<any>;
     /**
      * delay time to hide when mouse leave. unit: s.
      * @default 0.1

package/Tooltip/Tooltip.js

@@ -8,9 +8,7 @@ import cx from 'clsx';
 
 const offsetModifier = {
     name: 'offset',
-    options: {
-        offset: [0, 8],
-    },
+    options: { offset: [0, 8] },
 };
 /**
  * The react component for `mezzanine` tooltip.
@@ -20,20 +18,11 @@ const Tooltip = forwardRef(function Tooltip(props, ref) {
     const { modifiers = [] } = options;
     const tooltipRef = useRef(null);
     const composedRef = useComposeRefs([ref, tooltipRef]);
-    const { anchor, onLeave, onPopperEnter, onTargetEnter, visible } = useDelayMouseEnterLeave({
-        mouseLeaveDelay,
-    });
+    const { anchor, onLeave, onPopperEnter, onTargetEnter, visible } = useDelayMouseEnterLeave({ mouseLeaveDelay });
     /** tooltip shown only when title existed && visible is true */
     const isTooltipVisible = open || (visible && Boolean(title));
-    return (jsxs(Fragment, { children: [jsx(Popper, { ...rest, ref: composedRef, anchor: anchorProp || anchor, className: cx(tooltipClasses.host, className), onMouseEnter: onPopperEnter, onMouseLeave: onLeave, open: isTooltipVisible, options: {
-                    ...options,
-                    modifiers: [...modifiers, offsetModifier],
-                }, children: title }), typeof children === 'function' &&
-                children({
-                    onMouseEnter: onTargetEnter,
-                    onMouseLeave: onLeave,
-                })] }));
+    return (jsxs(Fragment, { children: [jsx(Popper, { ...rest, ref: composedRef, anchor: anchorProp || anchor, className: cx(tooltipClasses.host, className), onMouseEnter: onPopperEnter, onMouseLeave: onLeave, open: isTooltipVisible, options: { ...options, modifiers: [...modifiers, offsetModifier] }, children: title }), typeof children === 'function' &&
+                children({ onMouseEnter: onTargetEnter, onMouseLeave: onLeave })] }));
 });
-var Tooltip$1 = Tooltip;
 
-export { Tooltip$1 as default };
+export { Tooltip as default };

package/Transition/Collapse.js

@@ -101,11 +101,7 @@ const Collapse = forwardRef(function Collapse(props, ref) {
         },
         /* eslint-enable no-param-reassign */
     };
-    return (jsx(Transition, { ...transitionProps, children: (state) => (jsx("div", { ...rest, ref: composedNodeRef, style: {
-                ...getStyle(state, inProp, collapsedHeight),
-                ...style,
-            }, children: jsx("div", { ref: wrapperRef, style: { display: 'flex', width: '100%' }, children: jsx("div", { style: { width: '100%' }, children: children }) }) })) }));
+    return (jsx(Transition, { ...transitionProps, children: (state) => (jsx("div", { ...rest, ref: composedNodeRef, style: { ...getStyle(state, inProp, collapsedHeight), ...style }, children: jsx("div", { ref: wrapperRef, style: { display: 'flex', width: '100%' }, children: jsx("div", { style: { width: '100%' }, children: children }) }) })) }));
 });
-var Collapse$1 = Collapse;
 
-export { Collapse$1 as default };
+export { Collapse as default };

package/Transition/Fade.js

@@ -81,6 +81,5 @@ const Fade = forwardRef(function Fade(props, ref) {
                 },
             })) }));
 });
-var Fade$1 = Fade;
 
-export { Fade$1 as default };
+export { Fade as default };

package/Transition/Grow.js

@@ -113,6 +113,5 @@ const Grow = forwardRef(function Grow(props, ref) {
                 },
             })) }));
 });
-var Grow$1 = Grow;
 
-export { Grow$1 as default };
+export { Grow as default };

package/Transition/SlideFade.js

@@ -90,6 +90,5 @@ const SlideFade = forwardRef(function SlideFade(props, ref) {
                 },
             })) }));
 });
-var SlideFade$1 = SlideFade;
 
-export { SlideFade$1 as default };
+export { SlideFade as default };

package/Transition/Transition.d.ts

@@ -54,7 +54,7 @@ export interface TransitionProps {
     /**
      * A ref of DOM element need to transition
      */
-    nodeRef: RefObject<HTMLElement>;
+    nodeRef: RefObject<HTMLElement | null>;
     /**
      * Callback fired before the `entering` state applied
      */

package/Transition/Zoom.js

@@ -81,6 +81,5 @@ const Zoom = forwardRef(function Zoom(props, ref) {
                 },
             })) }));
 });
-var Zoom$1 = Zoom;
 
-export { Zoom$1 as default };
+export { Zoom as default };

package/Transition/useAutoTransitionDuration.d.ts

@@ -1,5 +1,5 @@
 import { TransitionDuration } from './Transition';
 export declare function useAutoTransitionDuration(duration?: TransitionDuration): {
-    autoTransitionDuration: import("react").MutableRefObject<number>;
+    autoTransitionDuration: import("react").RefObject<number>;
     addEndListener: (node: HTMLElement, next: VoidFunction) => void;
 };

package/Tree/Tree.js

@@ -135,6 +135,5 @@ const Tree = forwardRef(function Tree(props, ref) {
     const onSelect = selectable ? selectHandler : undefined;
     return (jsx("div", { ref: ref, className: cx(treeClasses.host, className), ...restRootProp, children: jsx(TreeNodeList, { ...treeNodeListProps, multiple: multiple, nodes: displayNodes, onExpand: onExpand, onSelect: onSelect, selectable: selectable, size: size, treeNodeProps: treeNodeProps, treeNodeRefs: treeNodeRefs }) }));
 });
-var Tree$1 = Tree;
 
-export { Tree$1 as default };
+export { Tree as default };

package/Tree/TreeNode.js

@@ -45,6 +45,5 @@ const TreeNode = forwardRef(function TreeNode(props, ref) {
                             [treeClasses.nodeLabelDisabled]: disabled,
                         }), children: label }))] }), mayHaveChildren && (jsx(Collapse, { in: expanded, appear: false, children: children || jsx(Loading, { loading: true, iconProps: { size: 16 } }) }))] }));
 });
-var TreeNode$1 = TreeNode;
 
-export { TreeNode$1 as default };
+export { TreeNode as default };

package/Tree/TreeNodeList.js

@@ -24,6 +24,5 @@ const TreeNodeList = forwardRef((props, ref) => {
             return (jsx(TreeNode, { ref: getNodeRefHandler === null || getNodeRefHandler === void 0 ? void 0 : getNodeRefHandler(value), ...treeNodeProps, multiple: multiple, onExpand: onExpand, onSelect: onSelect, selectable: selectable, size: size, value: value, ...restNodeProps, children: (siblingNodes === null || siblingNodes === void 0 ? void 0 : siblingNodes.length) ? (jsx(TreeNodeList, { ...restRootProp, className: className, multiple: multiple, nodes: siblingNodes, onExpand: onExpand, onSelect: onSelect, selectable: selectable, size: size, treeNodeRefs: treeNodeRefs })) : undefined }, value));
         }) }));
 });
-var TreeNodeList$1 = TreeNodeList;
 
-export { TreeNodeList$1 as default };
+export { TreeNodeList as default };

package/Tree/typings.d.ts

@@ -1,11 +1,11 @@
-import { MutableRefObject, ReactNode } from 'react';
+import { RefObject, ReactNode } from 'react';
 import { TreeNodeDataShape, TreeNodeEntityShape, TreeNodePropShape, TreeNodeValue } from '@mezzanine-ui/core/tree';
 export type TreeNodeProp = TreeNodePropShape<ReactNode>;
 export type TreeNodeData = TreeNodeDataShape<ReactNode>;
 export type TreeNodeEntity = TreeNodeEntityShape<ReactNode>;
 export type TreeNodeEntities = Map<TreeNodeValue, TreeNodeEntity>;
 export type TreeNodeRefsShape = Record<TreeNodeValue, HTMLLIElement>;
-export type TreeNodeRefs = MutableRefObject<TreeNodeRefsShape | undefined>;
+export type TreeNodeRefs = RefObject<TreeNodeRefsShape | undefined>;
 export type TreeExpandControl = {
     collapse: (value: TreeNodeValue) => void;
     collapseAll: () => void;

package/Typography/index.d.ts

@@ -1,4 +1,4 @@
-import { ElementRef, PropsWithoutRef, ReactElement, RefAttributes } from 'react';
+import { PropsWithoutRef, ReactElement, RefAttributes } from 'react';
 import { TypographyComponent, TypographyProps } from './Typography';
 export type { TypographyAlign, TypographyColor, TypographyDisplay, TypographyVariant, TypographyWeight, } from '@mezzanine-ui/core/typography';
 export type { TypographyComponent, TypographyProps };
@@ -6,6 +6,6 @@ export type { TypographyComponent, TypographyProps };
  * @remark
  * Add type alias here for parsable to react docgen typescript.
  */
-type GenericTypography = <C extends TypographyComponent = 'p'>(props: PropsWithoutRef<TypographyProps<C>> & RefAttributes<ElementRef<C>>) => ReactElement;
+type GenericTypography = <C extends TypographyComponent = 'p'>(props: PropsWithoutRef<TypographyProps<C>> & RefAttributes<HTMLElement>) => ReactElement<any>;
 declare const _default: GenericTypography;
 export default _default;

package/Upload/UploadButton.js

@@ -19,6 +19,5 @@ const UploadButton = forwardRef(function UploadButton(props, ref) {
             }
         }, prefix: jsx(Icon, { icon: UploadIcon }), children: [jsx(UploadInput, { ref: inputRef, accept: accept, disabled: disabled, multiple: multiple, onUpload: onUpload }), children] }));
 });
-var UploadButton$1 = UploadButton;
 
-export { UploadButton$1 as default };
+export { UploadButton as default };

package/Upload/UploadPicture.js

@@ -47,6 +47,5 @@ const UploadPicture = forwardRef(function UploadPicture(props, ref) {
     }));
     return (jsx("div", { ref: ref, className: cx(uploadPictureClasses.host, className), style: style, children: jsx(UploadPictureBlock, { accept: accept, defaultUploadErrorLabel: defaultUploadErrorLabel, defaultUploadingLabel: defaultUploadingLabel, defaultUploadLabel: defaultUploadLabel, disabled: disabled, imageLoader: uploadPictureImageLoader.current, multiple: false, onDelete: onImageDelete, onUpload: onImageUpload, onValueChange: onChange }) }));
 });
-var UploadPicture$1 = UploadPicture;
 
-export { UploadPicture$1 as default };
+export { UploadPicture as default };

package/Upload/UploadPictureBlock.js

@@ -77,6 +77,5 @@ const UploadPictureBlock = forwardRef(function UploadPictureBlock(props, ref) {
             // eslint-disable-next-line react/jsx-no-useless-fragment
             jsx(Fragment, { children: showImage ? (jsxs(Fragment, { children: [jsx("img", { alt: "", src: (value ? `${fileHost || ''}${value}` : previewImage), className: uploadPictureBlockClasses.preview }), isLoading ? (jsxs("div", { className: uploadPictureBlockClasses.group, children: [jsx(Icon, { icon: SpinnerIcon, spin: true }), jsx("span", { className: uploadPictureBlockClasses.status, children: defaultUploadingLabel })] })) : null] })) : (jsxs("div", { className: uploadPictureBlockClasses.group, children: [jsx(Icon, { icon: UploadIcon }), jsx("span", { className: uploadPictureBlockClasses.status, children: defaultUploadLabel })] })) })), !disabled && canDeleteImage && (jsx("div", { className: uploadPictureBlockClasses.delete, children: jsx(Icon, { icon: TrashIcon }) }))] }));
 });
-var UploadPictureBlock$1 = UploadPictureBlock;
 
-export { UploadPictureBlock$1 as default };
+export { UploadPictureBlock as default };

package/Upload/UploadPictureWall.js

@@ -164,6 +164,5 @@ const UploadPictureWall = forwardRef(function UploadPictureWall(props, ref) {
     }));
     return (jsxs("div", { ref: ref, className: cx(uploadPictureWallClasses.host, className), style: style, children: [loaderList.map((up) => (jsx(UploadPictureWallItem, { accept: accept, defaultUploadErrorLabel: defaultUploadErrorLabel, defaultUploadingLabel: defaultUploadingLabel, defaultUploadLabel: defaultUploadLabel, disabled: disabled, imageLoader: up, multiple: multiple, onDelete: () => onImageDelete(up.getUid()), fileHost: fileHost }, up.getUid()))), maxLength && loaderList.length >= maxLength ? null : (jsx(UploadPictureWallItem, { accept: accept, defaultUploadErrorLabel: defaultUploadErrorLabel, defaultUploadingLabel: defaultUploadingLabel, defaultUploadLabel: defaultUploadLabel, disabled: disabled, imageLoader: new ImageUploader(), multiple: multiple, onUpload: onImagesUpload, fileHost: fileHost }))] }));
 });
-var UploadPictureWall$1 = UploadPictureWall;
 
-export { UploadPictureWall$1 as default };
+export { UploadPictureWall as default };

package/Upload/UploadResult.js

@@ -25,6 +25,5 @@ const UploadResult = forwardRef(function UploadResult(props, ref) {
             [uploadResultClasses.loading]: loading,
         }, className), style: style, children: [jsx("span", { className: uploadResultClasses.name, children: name }), jsxs("div", { className: uploadResultClasses.actions, children: [loading && jsx(Icon, { icon: SpinnerIcon, spin: true }), done && (jsx(Icon, { icon: DownloadIcon, onClick: onDownload, role: "button" })), (done || error) && (jsx(Icon, { icon: TimesIcon, onClick: onDelete, role: "button" }))] })] }));
 });
-var UploadResult$1 = UploadResult;
 
-export { UploadResult$1 as default };
+export { UploadResult as default };

package/_internal/InputCheck/InputCheck.js

@@ -14,6 +14,5 @@ const InputCheck = forwardRef(function InputCheck(props, ref) {
             [inputCheckClasses.withLabel]: !!children,
         }, className), htmlFor: htmlFor, children: [jsx("span", { className: inputCheckClasses.control, children: control }), children && jsx("span", { className: inputCheckClasses.label, children: children })] }));
 });
-var InputCheck$1 = InputCheck;
 
-export { InputCheck$1 as default };
+export { InputCheck as default };

package/_internal/InputCheck/InputCheckGroup.js

@@ -10,6 +10,5 @@ const InputCheckGroup = forwardRef(function InputCheckGroup(props, ref) {
     const { children, className, orientation = 'horizontal', ...rest } = props;
     return (jsx("div", { ...rest, ref: ref, "aria-orientation": orientation, className: cx(inputCheckGroupClasses.host, inputCheckGroupClasses.orientation(orientation), className), children: children }));
 });
-var InputCheckGroup$1 = InputCheckGroup;
 
-export { InputCheckGroup$1 as default };
+export { InputCheckGroup as default };

package/_internal/InputTriggerPopper/InputTriggerPopper.js

@@ -42,6 +42,5 @@ const InputTriggerPopper = forwardRef(function InputTriggerPopper(props, ref) {
                 ],
             }, children: children }) }));
 });
-var InputTriggerPopper$1 = InputTriggerPopper;
 
-export { InputTriggerPopper$1 as default };
+export { InputTriggerPopper as default };

package/_internal/SlideFadeOverlay/SlideFadeOverlay.js

@@ -56,6 +56,5 @@ const SlideFadeOverlay = forwardRef(function SlideFadeOverlay(props, ref) {
     }
     return (jsx(Overlay, { className: cx(overlayWithSlideFadeClasses.host, className), container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, role: "presentation", children: jsx(SlideFade, { ref: ref, in: open, direction: direction, onEntered: () => setExited(false), onExited: () => setExited(true), children: children }) }));
 });
-var SlideFadeOverlay$1 = SlideFadeOverlay;
 
-export { SlideFadeOverlay$1 as default };
+export { SlideFadeOverlay as default };

package/hooks/useClickAway.d.ts

@@ -2,4 +2,4 @@ import { RefObject, DependencyList } from 'react';
 export type ClickAwayEvent = MouseEvent | TouchEvent | PointerEvent;
 export type ClickAwayHandler = (event: ClickAwayEvent) => void;
 export type ClickAwayHandlerFactory = () => ClickAwayHandler | undefined;
-export declare function useClickAway(factory: ClickAwayHandlerFactory, containerRef: RefObject<HTMLElement>, deps?: DependencyList): void;
+export declare function useClickAway(factory: ClickAwayHandlerFactory, containerRef: RefObject<HTMLElement | null>, deps?: DependencyList): void;