@mezzanine-ui/react 0.13.10 → 0.13.12

package/Transition/Collapse.d.ts

@@ -1,15 +1,15 @@
-/// <reference types="react" />
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-import { TransitionImplementationProps } from './Transition';
-export interface CollapseProps extends TransitionImplementationProps, Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
-    /**
-     * The height of the container while collapsed.
-     * @default 0
-     */
-    collapsedHeight?: string | number;
-}
-/**
- * The react component for `mezzanine` transition collapse.
- */
-declare const Collapse: import("react").ForwardRefExoticComponent<CollapseProps & import("react").RefAttributes<HTMLElement>>;
-export default Collapse;
+/// <reference types="react" />
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { TransitionImplementationProps } from './Transition';
+export interface CollapseProps extends TransitionImplementationProps, Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
+    /**
+     * The height of the container while collapsed.
+     * @default 0
+     */
+    collapsedHeight?: string | number;
+}
+/**
+ * The react component for `mezzanine` transition collapse.
+ */
+declare const Collapse: import("react").ForwardRefExoticComponent<CollapseProps & import("react").RefAttributes<HTMLElement>>;
+export default Collapse;

package/Transition/Collapse.js

@@ -8,102 +8,102 @@ import { reflow } from './reflow.js';
 import { useAutoTransitionDuration } from './useAutoTransitionDuration.js';
 import { useSetNodeTransition } from './useSetNodeTransition.js';
 
-function getStyle(state, inProp, collapsedHeight) {
-    const style = {
-        minHeight: collapsedHeight,
-        overflow: 'hidden',
-    };
-    if (state === 'entered') {
-        style.overflow = 'visible';
-    }
-    else if (state === 'exited' && !inProp && collapsedHeight === '0px') {
-        style.visibility = 'hidden';
-    }
-    return style;
-}
-const defaultEasing = {
-    enter: MOTION_EASING.decelerated,
-    exit: MOTION_EASING.accelerated,
-};
-/**
- * The react component for `mezzanine` transition collapse.
- */
-const Collapse = forwardRef(function Collapse(props, ref) {
-    const { appear, children, collapsedHeight: collapsedHeightProp = 0, delay = 0, duration = 'auto', easing = defaultEasing, in: inProp = false, lazyMount, keepMount, onEnter, onEntered, onEntering, onExit, onExiting, onExited, style, ...rest } = props;
-    const { autoTransitionDuration, addEndListener } = useAutoTransitionDuration(duration);
-    const nodeRef = useRef(null);
-    const wrapperRef = useRef(null);
-    const collapsedHeight = typeof collapsedHeightProp === 'number' ? `${collapsedHeightProp}px` : collapsedHeightProp;
-    const getWrapperHeight = () => { var _a; return ((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0; };
-    const [setNodeTransition, resetNodeTransition] = useSetNodeTransition({
-        delay,
-        duration,
-        easing,
-        properties: ['height'],
-        resolveAutoDuration: () => {
-            const autoSizeDuration = getAutoSizeDuration(getWrapperHeight());
-            autoTransitionDuration.current = autoSizeDuration;
-            return autoSizeDuration;
-        },
-    }, style);
-    const composedNodeRef = useComposeRefs([ref, nodeRef]);
-    const transitionProps = {
-        addEndListener,
-        appear,
-        duration,
-        in: inProp,
-        lazyMount,
-        keepMount: collapsedHeight !== '0px' ? true : keepMount,
-        nodeRef,
-        /* eslint-disable no-param-reassign */
-        onEnter(node, isAppearing) {
-            node.style.height = collapsedHeight;
-            reflow(node);
-            if (onEnter) {
-                onEnter(node, isAppearing);
-            }
-        },
-        onEntering(node, isAppearing) {
-            setNodeTransition(node, 'enter');
-            node.style.height = `${getWrapperHeight()}px`;
-            if (onEntering) {
-                onEntering(node, isAppearing);
-            }
-        },
-        onEntered(node, isAppearing) {
-            node.style.height = 'auto';
-            resetNodeTransition(node);
-            if (onEntered) {
-                onEntered(node, isAppearing);
-            }
-        },
-        onExit(node) {
-            node.style.height = `${getWrapperHeight()}px`;
-            reflow(node);
-            if (onExit) {
-                onExit(node);
-            }
-        },
-        onExiting(node) {
-            setNodeTransition(node, 'exit');
-            node.style.height = collapsedHeight;
-            if (onExiting) {
-                onExiting(node);
-            }
-        },
-        onExited(node) {
-            resetNodeTransition(node);
-            if (onExited) {
-                onExited(node);
-            }
-        },
-        /* 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 }) }) })) }));
-});
+function getStyle(state, inProp, collapsedHeight) {
+    const style = {
+        minHeight: collapsedHeight,
+        overflow: 'hidden',
+    };
+    if (state === 'entered') {
+        style.overflow = 'visible';
+    }
+    else if (state === 'exited' && !inProp && collapsedHeight === '0px') {
+        style.visibility = 'hidden';
+    }
+    return style;
+}
+const defaultEasing = {
+    enter: MOTION_EASING.decelerated,
+    exit: MOTION_EASING.accelerated,
+};
+/**
+ * The react component for `mezzanine` transition collapse.
+ */
+const Collapse = forwardRef(function Collapse(props, ref) {
+    const { appear, children, collapsedHeight: collapsedHeightProp = 0, delay = 0, duration = 'auto', easing = defaultEasing, in: inProp = false, lazyMount, keepMount, onEnter, onEntered, onEntering, onExit, onExiting, onExited, style, ...rest } = props;
+    const { autoTransitionDuration, addEndListener } = useAutoTransitionDuration(duration);
+    const nodeRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const collapsedHeight = typeof collapsedHeightProp === 'number' ? `${collapsedHeightProp}px` : collapsedHeightProp;
+    const getWrapperHeight = () => { var _a; return ((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0; };
+    const [setNodeTransition, resetNodeTransition] = useSetNodeTransition({
+        delay,
+        duration,
+        easing,
+        properties: ['height'],
+        resolveAutoDuration: () => {
+            const autoSizeDuration = getAutoSizeDuration(getWrapperHeight());
+            autoTransitionDuration.current = autoSizeDuration;
+            return autoSizeDuration;
+        },
+    }, style);
+    const composedNodeRef = useComposeRefs([ref, nodeRef]);
+    const transitionProps = {
+        addEndListener,
+        appear,
+        duration,
+        in: inProp,
+        lazyMount,
+        keepMount: collapsedHeight !== '0px' ? true : keepMount,
+        nodeRef,
+        /* eslint-disable no-param-reassign */
+        onEnter(node, isAppearing) {
+            node.style.height = collapsedHeight;
+            reflow(node);
+            if (onEnter) {
+                onEnter(node, isAppearing);
+            }
+        },
+        onEntering(node, isAppearing) {
+            setNodeTransition(node, 'enter');
+            node.style.height = `${getWrapperHeight()}px`;
+            if (onEntering) {
+                onEntering(node, isAppearing);
+            }
+        },
+        onEntered(node, isAppearing) {
+            node.style.height = 'auto';
+            resetNodeTransition(node);
+            if (onEntered) {
+                onEntered(node, isAppearing);
+            }
+        },
+        onExit(node) {
+            node.style.height = `${getWrapperHeight()}px`;
+            reflow(node);
+            if (onExit) {
+                onExit(node);
+            }
+        },
+        onExiting(node) {
+            setNodeTransition(node, 'exit');
+            node.style.height = collapsedHeight;
+            if (onExiting) {
+                onExiting(node);
+            }
+        },
+        onExited(node) {
+            resetNodeTransition(node);
+            if (onExited) {
+                onExited(node);
+            }
+        },
+        /* 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 }) }) })) }));
+});
 var Collapse$1 = Collapse;
 
 export { Collapse$1 as default };

package/Transition/Fade.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { TransitionImplementationProps } from './Transition';
-export declare type FadeProps = TransitionImplementationProps;
-/**
- * The react component for `mezzanine` transition fade.
- */
-declare const Fade: import("react").ForwardRefExoticComponent<TransitionImplementationProps & import("react").RefAttributes<HTMLElement>>;
-export default Fade;
+/// <reference types="react" />
+import { TransitionImplementationProps } from './Transition';
+export type FadeProps = TransitionImplementationProps;
+/**
+ * The react component for `mezzanine` transition fade.
+ */
+declare const Fade: import("react").ForwardRefExoticComponent<TransitionImplementationProps & import("react").RefAttributes<HTMLElement>>;
+export default Fade;

package/Transition/Fade.js

@@ -6,80 +6,80 @@ import Transition from './Transition.js';
 import { reflow } from './reflow.js';
 import { useSetNodeTransition } from './useSetNodeTransition.js';
 
-function getStyle(state, inProp) {
-    const style = {
-        opacity: 0,
-    };
-    if (state === 'entering' || state === 'entered') {
-        style.opacity = 1;
-    }
-    else if (state === 'exited' && !inProp) {
-        style.visibility = 'hidden';
-    }
-    return style;
-}
-const defaultDuration = {
-    enter: MOTION_DURATION.short,
-    exit: MOTION_DURATION.shorter,
-};
-const defaultEasing = {
-    enter: MOTION_EASING.decelerated,
-    exit: MOTION_EASING.accelerated,
-};
-/**
- * The react component for `mezzanine` transition fade.
- */
-const Fade = forwardRef(function Fade(props, ref) {
-    const { children, in: inProp = false, delay = 0, duration: durationProp = defaultDuration, easing = defaultEasing, onEnter, onEntered, onExit, onExited, ...rest } = props;
-    const duration = durationProp === 'auto' ? defaultDuration : durationProp;
-    const nodeRef = useRef(null);
-    const composedNodeRef = useComposeRefs([ref, nodeRef]);
-    const [setNodeTransition, resetNodeTransition] = useSetNodeTransition({
-        delay,
-        duration,
-        easing,
-        properties: ['opacity'],
-    }, children === null || children === void 0 ? void 0 : children.props.style);
-    const transitionProps = {
-        ...rest,
-        duration,
-        in: inProp,
-        nodeRef,
-        onEnter(node, isAppearing) {
-            setNodeTransition(node, 'enter');
-            reflow(node);
-            if (onEnter) {
-                onEnter(node, isAppearing);
-            }
-        },
-        onEntered(node, isAppearing) {
-            resetNodeTransition(node);
-            if (onEntered) {
-                onEntered(node, isAppearing);
-            }
-        },
-        onExit(node) {
-            setNodeTransition(node, 'exit');
-            if (onExit) {
-                onExit(node);
-            }
-        },
-        onExited(node) {
-            resetNodeTransition(node);
-            if (onExited) {
-                onExited(node);
-            }
-        },
-    };
-    return (jsx(Transition, { ...transitionProps, children: children && ((state) => cloneElement(children, {
-            ...children.props,
-            ref: composedNodeRef,
-            style: {
-                ...getStyle(state, inProp),
-                ...children.props.style,
-            },
-        })) }));
-});
+function getStyle(state, inProp) {
+    const style = {
+        opacity: 0,
+    };
+    if (state === 'entering' || state === 'entered') {
+        style.opacity = 1;
+    }
+    else if (state === 'exited' && !inProp) {
+        style.visibility = 'hidden';
+    }
+    return style;
+}
+const defaultDuration = {
+    enter: MOTION_DURATION.short,
+    exit: MOTION_DURATION.shorter,
+};
+const defaultEasing = {
+    enter: MOTION_EASING.decelerated,
+    exit: MOTION_EASING.accelerated,
+};
+/**
+ * The react component for `mezzanine` transition fade.
+ */
+const Fade = forwardRef(function Fade(props, ref) {
+    const { children, in: inProp = false, delay = 0, duration: durationProp = defaultDuration, easing = defaultEasing, onEnter, onEntered, onExit, onExited, ...rest } = props;
+    const duration = durationProp === 'auto' ? defaultDuration : durationProp;
+    const nodeRef = useRef(null);
+    const composedNodeRef = useComposeRefs([ref, nodeRef]);
+    const [setNodeTransition, resetNodeTransition] = useSetNodeTransition({
+        delay,
+        duration,
+        easing,
+        properties: ['opacity'],
+    }, children === null || children === void 0 ? void 0 : children.props.style);
+    const transitionProps = {
+        ...rest,
+        duration,
+        in: inProp,
+        nodeRef,
+        onEnter(node, isAppearing) {
+            setNodeTransition(node, 'enter');
+            reflow(node);
+            if (onEnter) {
+                onEnter(node, isAppearing);
+            }
+        },
+        onEntered(node, isAppearing) {
+            resetNodeTransition(node);
+            if (onEntered) {
+                onEntered(node, isAppearing);
+            }
+        },
+        onExit(node) {
+            setNodeTransition(node, 'exit');
+            if (onExit) {
+                onExit(node);
+            }
+        },
+        onExited(node) {
+            resetNodeTransition(node);
+            if (onExited) {
+                onExited(node);
+            }
+        },
+    };
+    return (jsx(Transition, { ...transitionProps, children: children && ((state) => cloneElement(children, {
+            ...children.props,
+            ref: composedNodeRef,
+            style: {
+                ...getStyle(state, inProp),
+                ...children.props.style,
+            },
+        })) }));
+});
 var Fade$1 = Fade;
 
 export { Fade$1 as default };

package/Transition/Grow.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
-import { TransitionImplementationProps } from './Transition';
-export interface GrowProps extends TransitionImplementationProps {
-    /**
-     * The transform origin for child element.
-     */
-    transformOrigin?: string;
-}
-/**
- * The react component for `mezzanine` transition grow.
- */
-declare const Grow: import("react").ForwardRefExoticComponent<GrowProps & import("react").RefAttributes<HTMLElement>>;
-export default Grow;
+/// <reference types="react" />
+import { TransitionImplementationProps } from './Transition';
+export interface GrowProps extends TransitionImplementationProps {
+    /**
+     * The transform origin for child element.
+     */
+    transformOrigin?: string;
+}
+/**
+ * The react component for `mezzanine` transition grow.
+ */
+declare const Grow: import("react").ForwardRefExoticComponent<GrowProps & import("react").RefAttributes<HTMLElement>>;
+export default Grow;

package/Transition/Grow.js

@@ -8,107 +8,107 @@ import { reflow } from './reflow.js';
 import { useAutoTransitionDuration } from './useAutoTransitionDuration.js';
 import { useSetNodeTransition } from './useSetNodeTransition.js';
 
-function getScale(value) {
-    return `scale(${value}, ${value ** 2})`;
-}
-function getStyle(state) {
-    if (state === 'entering') {
-        return {
-            opacity: 1,
-            transform: getScale(1),
-        };
-    }
-    if (state === 'entered') {
-        return {
-            opacity: 1,
-            transform: 'none',
-        };
-    }
-    return {
-        opacity: 0,
-        transform: getScale(0.75),
-    };
-}
-const defaultEasing = {
-    enter: MOTION_EASING.decelerated,
-    exit: MOTION_EASING.accelerated,
-};
-/**
- * The react component for `mezzanine` transition grow.
- */
-const Grow = forwardRef(function Grow(props, ref) {
-    const { appear, children, delay = 0, duration = 'auto', easing = defaultEasing, in: inProp, onEnter, onEntered, onExit, onExited, transformOrigin, ...rest } = props;
-    const { autoTransitionDuration, addEndListener } = useAutoTransitionDuration(duration);
-    const nodeRef = useRef(null);
-    const [setNodeTransition, resetNodeTransition] = useSetNodeTransition({
-        delay,
-        duration,
-        easing,
-        properties: [
-            'opacity',
-            ['transform', (transitionProps, mode) => {
-                    const { delay: delayProp, duration: durationProp } = transitionProps;
-                    return {
-                        ...transitionProps,
-                        delay: mode === 'exit' ? delayProp || durationProp * 0.333 : delayProp,
-                        duration: durationProp * 0.666,
-                    };
-                }],
-        ],
-        resolveAutoDuration: () => {
-            var _a, _b;
-            const autoSizeDuration = getAutoSizeDuration((_b = (_a = nodeRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0);
-            autoTransitionDuration.current = autoSizeDuration;
-            return autoSizeDuration;
-        },
-    }, children === null || children === void 0 ? void 0 : children.props.style);
-    const composedNodeRef = useComposeRefs([ref, nodeRef]);
-    const transitionProps = {
-        ...rest,
-        addEndListener,
-        appear,
-        duration,
-        in: inProp,
-        nodeRef,
-        /* eslint-disable no-param-reassign */
-        onEnter(node, isAppearing) {
-            setNodeTransition(node, 'enter');
-            reflow(node);
-            if (onEnter) {
-                onEnter(node, isAppearing);
-            }
-        },
-        onEntered(node, isAppearing) {
-            resetNodeTransition(node);
-            if (onEntered) {
-                onEntered(node, isAppearing);
-            }
-        },
-        onExit(node) {
-            setNodeTransition(node, 'exit');
-            if (onExit) {
-                onExit(node);
-            }
-        },
-        onExited(node) {
-            resetNodeTransition(node);
-            if (onExited) {
-                onExited(node);
-            }
-        },
-        /* eslint-enable no-param-reassign */
-    };
-    return (jsx(Transition, { ...transitionProps, children: children && ((state) => cloneElement(children, {
-            ...children.props,
-            ref: composedNodeRef,
-            style: {
-                visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
-                ...getStyle(state),
-                transformOrigin,
-                ...children.props.style,
-            },
-        })) }));
-});
+function getScale(value) {
+    return `scale(${value}, ${value ** 2})`;
+}
+function getStyle(state) {
+    if (state === 'entering') {
+        return {
+            opacity: 1,
+            transform: getScale(1),
+        };
+    }
+    if (state === 'entered') {
+        return {
+            opacity: 1,
+            transform: 'none',
+        };
+    }
+    return {
+        opacity: 0,
+        transform: getScale(0.75),
+    };
+}
+const defaultEasing = {
+    enter: MOTION_EASING.decelerated,
+    exit: MOTION_EASING.accelerated,
+};
+/**
+ * The react component for `mezzanine` transition grow.
+ */
+const Grow = forwardRef(function Grow(props, ref) {
+    const { appear, children, delay = 0, duration = 'auto', easing = defaultEasing, in: inProp, onEnter, onEntered, onExit, onExited, transformOrigin, ...rest } = props;
+    const { autoTransitionDuration, addEndListener } = useAutoTransitionDuration(duration);
+    const nodeRef = useRef(null);
+    const [setNodeTransition, resetNodeTransition] = useSetNodeTransition({
+        delay,
+        duration,
+        easing,
+        properties: [
+            'opacity',
+            ['transform', (transitionProps, mode) => {
+                    const { delay: delayProp, duration: durationProp } = transitionProps;
+                    return {
+                        ...transitionProps,
+                        delay: mode === 'exit' ? delayProp || durationProp * 0.333 : delayProp,
+                        duration: durationProp * 0.666,
+                    };
+                }],
+        ],
+        resolveAutoDuration: () => {
+            var _a, _b;
+            const autoSizeDuration = getAutoSizeDuration((_b = (_a = nodeRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0);
+            autoTransitionDuration.current = autoSizeDuration;
+            return autoSizeDuration;
+        },
+    }, children === null || children === void 0 ? void 0 : children.props.style);
+    const composedNodeRef = useComposeRefs([ref, nodeRef]);
+    const transitionProps = {
+        ...rest,
+        addEndListener,
+        appear,
+        duration,
+        in: inProp,
+        nodeRef,
+        /* eslint-disable no-param-reassign */
+        onEnter(node, isAppearing) {
+            setNodeTransition(node, 'enter');
+            reflow(node);
+            if (onEnter) {
+                onEnter(node, isAppearing);
+            }
+        },
+        onEntered(node, isAppearing) {
+            resetNodeTransition(node);
+            if (onEntered) {
+                onEntered(node, isAppearing);
+            }
+        },
+        onExit(node) {
+            setNodeTransition(node, 'exit');
+            if (onExit) {
+                onExit(node);
+            }
+        },
+        onExited(node) {
+            resetNodeTransition(node);
+            if (onExited) {
+                onExited(node);
+            }
+        },
+        /* eslint-enable no-param-reassign */
+    };
+    return (jsx(Transition, { ...transitionProps, children: children && ((state) => cloneElement(children, {
+            ...children.props,
+            ref: composedNodeRef,
+            style: {
+                visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
+                ...getStyle(state),
+                transformOrigin,
+                ...children.props.style,
+            },
+        })) }));
+});
 var Grow$1 = Grow;
 
 export { Grow$1 as default };