@mezzanine-ui/react 0.6.4

package/Transition/Grow.d.ts

@@ -0,0 +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;

package/Transition/Grow.js

@@ -0,0 +1,112 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, cloneElement } from 'react';
+import { MOTION_EASING } from '@mezzanine-ui/system/motion';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import Transition from './Transition.js';
+import { getAutoSizeDuration } from './getAutoSizeDuration.js';
+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);
+            }
+        },
+    };
+    return (jsx(Transition, Object.assign({}, transitionProps, { children: children && ((state) => cloneElement(children, {
+            ...children.props,
+            ref: composedNodeRef,
+            style: {
+                visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
+                ...getStyle(state),
+                transformOrigin,
+                ...children.props.style,
+            },
+        })) }), void 0));
+});
+
+export default Grow;

package/Transition/SlideFade.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { TransitionImplementationProps } from './Transition';
+export declare type SlideFadeDirection = 'left' | 'right' | 'up' | 'down';
+export interface SlideFadeProps extends TransitionImplementationProps {
+    /**
+     * The direction of child element will enter to.
+     * @default 'down'
+     */
+    direction?: SlideFadeDirection;
+}
+/**
+ * The react component for `mezzanine` transition slide fade.
+ */
+declare const SlideFade: import("react").ForwardRefExoticComponent<SlideFadeProps & import("react").RefAttributes<HTMLElement>>;
+export default SlideFade;

package/Transition/SlideFade.js

@@ -0,0 +1,93 @@
+import { jsx } from 'react/jsx-runtime';
+import { MOTION_DURATION, MOTION_EASING } from '@mezzanine-ui/system/motion';
+import { forwardRef, useRef, cloneElement } from 'react';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import Transition from './Transition.js';
+import { reflow } from './reflow.js';
+import { useSetNodeTransition } from './useSetNodeTransition.js';
+
+function getStyle(state, inProp, direction) {
+    if (state === 'entering' || state === 'entered') {
+        return {
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)',
+        };
+    }
+    const style = {
+        opacity: 0,
+        transform: {
+            up: 'translate3d(0, 100%, 0)',
+            right: 'translate3d(-100%, 0, 0)',
+            down: 'translate3d(0, -100%, 0)',
+            left: 'translate3d(100%, 0, 0)',
+        }[direction],
+    };
+    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 slide fade.
+ */
+const SlideFade = forwardRef(function SlideFade(props, ref) {
+    const { children, direction = 'down', delay = 0, duration: durationProp = defaultDuration, easing = defaultEasing, in: inProp = false, 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', 'transform'],
+    }, 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, Object.assign({}, transitionProps, { children: children && ((state) => cloneElement(children, {
+            ...children.props,
+            ref: composedNodeRef,
+            style: {
+                ...getStyle(state, inProp, direction),
+                ...children.props.style,
+            },
+        })) }), void 0));
+});
+
+export default SlideFade;

package/Transition/Transition.d.ts

@@ -0,0 +1,98 @@
+import { RefObject, CSSProperties, ReactElement, JSXElementConstructor, Ref } from 'react';
+import { TransitionStatus as TransitionState, TransitionChildren } from 'react-transition-group/Transition';
+import { NativeElementTag } from '../utils/jsx-types';
+export { TransitionState };
+export declare type TransitionMode = 'enter' | 'exit';
+export declare type TransitionDuration = 'auto' | number | {
+    [mode in TransitionMode]?: number;
+};
+export declare type TransitionEasing = string | {
+    [mode in TransitionMode]?: string;
+};
+export declare type TransitionDelay = number | {
+    [mode in TransitionMode]?: number;
+};
+export declare type TransitionEnterHandler = (node: HTMLElement, isAppearing: boolean) => void;
+export declare type TransitionExitHandler = (node: HTMLElement) => void;
+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
+     */
+    addEndListener?: (node: HTMLElement, next: VoidFunction) => void;
+    /**
+     * Whether to perform the enter transition if `in` is true while it first mount
+     * @true
+     */
+    appear?: boolean;
+    /**
+     * A react node or a render props called with transition state
+     */
+    children?: TransitionChildren;
+    /**
+     * The duration of the transition, in milliseconds
+     */
+    duration?: TransitionDuration;
+    /**
+     * The flag to trigger toggling transition between `enter` and `exit` state
+     * @default false
+     */
+    in?: boolean;
+    /**
+     * Whether to keeping mounting the child if exited.
+     * @default false
+     */
+    keepMount?: boolean;
+    /**
+     * Whether to mount the child at the first time entering.
+     * @default true
+     */
+    lazyMount?: boolean;
+    /**
+     * A ref of DOM element need to transition
+     */
+    nodeRef: RefObject<HTMLElement>;
+    /**
+     * Callback fired before the `entering` state applied
+     */
+    onEnter?: TransitionEnterHandler;
+    /**
+     * Callback fired after the `entering` state applied
+     */
+    onEntering?: TransitionEnterHandler;
+    /**
+     * Callback fired after the `entered` state applied
+     */
+    onEntered?: TransitionEnterHandler;
+    /**
+     * Callback fired before the `exiting` state applied.
+     */
+    onExit?: TransitionExitHandler;
+    /**
+     * Callback fired after the `exiting` state applied.
+     */
+    onExiting?: TransitionExitHandler;
+    /**
+     * Callback fired after the `exited` state applied.
+     */
+    onExited?: TransitionExitHandler;
+}
+/**
+ * The react component for `mezzanine` transition.
+ */
+declare function Transition(props: TransitionProps): JSX.Element;
+export default Transition;

package/Transition/Transition.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import ReactTransition from 'react-transition-group/Transition';
+
+/**
+ * The react component for `mezzanine` transition.
+ */
+function Transition(props) {
+    const { addEndListener, appear = true, children, duration, in: inProp = false, keepMount = false, lazyMount = true, nodeRef, onEnter, onEntering, onEntered, onExit, onExiting, onExited, } = props;
+    const addNodeToCallback = (callback) => {
+        if (!callback) {
+            return;
+        }
+        return (...args) => {
+            const node = nodeRef.current;
+            if (node) {
+                callback(node, ...args);
+            }
+        };
+    };
+    return (jsx(ReactTransition
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    , Object.assign({ 
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        addEndListener: addNodeToCallback(addEndListener), appear: appear, in: inProp, mountOnEnter: lazyMount, nodeRef: nodeRef, onEnter: addNodeToCallback(onEnter), onEntering: addNodeToCallback(onEntering), onEntered: addNodeToCallback(onEntered), onExit: addNodeToCallback(onExit), onExiting: addNodeToCallback(onExiting), onExited: addNodeToCallback(onExited), timeout: duration === 'auto' ? undefined : duration, unmountOnExit: !keepMount }, { children: children }), void 0));
+}
+
+export default Transition;

package/Transition/Zoom.d.ts

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

package/Transition/Zoom.js

@@ -0,0 +1,84 @@
+import { jsx } from 'react/jsx-runtime';
+import { MOTION_DURATION, MOTION_EASING } from '@mezzanine-ui/system/motion';
+import { forwardRef, useRef, cloneElement } from 'react';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import Transition from './Transition.js';
+import { reflow } from './reflow.js';
+import { useSetNodeTransition } from './useSetNodeTransition.js';
+
+function getStyle(state, inProp) {
+    const style = {
+        transform: 'scale(0)',
+    };
+    if (state === 'entering' || state === 'entered') {
+        style.transform = 'none';
+    }
+    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 zoom.
+ */
+const Zoom = forwardRef(function Zoom(props, ref) {
+    const { children, delay = 0, duration: durationProp = defaultDuration, easing = defaultEasing, in: inProp = false, 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: ['transform'],
+    }, 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, Object.assign({}, transitionProps, { children: children && ((state) => cloneElement(children, {
+            ...children.props,
+            ref: composedNodeRef,
+            style: {
+                ...getStyle(state, inProp),
+                ...children.props.style,
+            },
+        })) }), void 0));
+});
+
+export default Zoom;

package/Transition/getAutoSizeDuration.d.ts

@@ -0,0 +1 @@
+export declare function getAutoSizeDuration(size?: number): number;

package/Transition/getAutoSizeDuration.js

@@ -0,0 +1,10 @@
+function getAutoSizeDuration(size) {
+    if (!size) {
+        return 0;
+    }
+    const constant = size / 36;
+    // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
+    return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
+}
+
+export { getAutoSizeDuration };

package/Transition/getTransitionStyleProps.d.ts

@@ -0,0 +1,16 @@
+import { TransitionDelay, TransitionDuration, TransitionEasing, TransitionMode } from './Transition';
+export declare function getTransitionDuration(mode: TransitionMode, duration: TransitionDuration, resolveAuto?: number | ((mode: TransitionMode) => number)): number;
+export declare function getTransitionTimingFunction(mode: TransitionMode, easing: TransitionEasing): string;
+export declare function getTransitionDelay(mode: TransitionMode, delay: TransitionDelay): number;
+export interface GetTransitionStyleProps {
+    delay: TransitionDelay;
+    duration: TransitionDuration;
+    easing: TransitionEasing;
+    resolveAutoDuration?: Parameters<typeof getTransitionDuration>[2];
+}
+export interface TransitionStyleProps {
+    delay: number;
+    duration: number;
+    timingFunction: string;
+}
+export declare function getTransitionStyleProps(mode: TransitionMode, props: GetTransitionStyleProps): TransitionStyleProps;

package/Transition/getTransitionStyleProps.js

@@ -0,0 +1,25 @@
+function getTransitionDuration(mode, duration, resolveAuto) {
+    if (duration !== 'auto') {
+        return typeof duration === 'number' ? duration : duration[mode] || 0;
+    }
+    if (typeof resolveAuto === 'function') {
+        return resolveAuto(mode);
+    }
+    return resolveAuto !== null && resolveAuto !== void 0 ? resolveAuto : 0;
+}
+function getTransitionTimingFunction(mode, easing) {
+    return typeof easing === 'string' ? easing : easing[mode] || 'ease';
+}
+function getTransitionDelay(mode, delay) {
+    return typeof delay === 'number' ? delay : delay[mode] || 0;
+}
+function getTransitionStyleProps(mode, props) {
+    const { delay, duration, easing, resolveAutoDuration, } = props;
+    return {
+        delay: getTransitionDelay(mode, delay),
+        duration: getTransitionDuration(mode, duration, resolveAutoDuration),
+        timingFunction: getTransitionTimingFunction(mode, easing),
+    };
+}
+
+export { getTransitionDelay, getTransitionDuration, getTransitionStyleProps, getTransitionTimingFunction };

package/Transition/index.d.ts

@@ -0,0 +1,6 @@
+export { TransitionState, TransitionMode, TransitionDelay, TransitionDuration, TransitionEasing, TransitionImplementationChildProps, TransitionImplementationProps, TransitionProps, default, } from './Transition';
+export { CollapseProps, default as Collapse, } from './Collapse';
+export { FadeProps, default as Fade, } from './Fade';
+export { GrowProps, default as Grow, } from './Grow';
+export { SlideFadeDirection, SlideFadeProps, default as SlideFade, } from './SlideFade';
+export { ZoomProps, default as Zoom, } from './Zoom';

package/Transition/index.js

@@ -0,0 +1,6 @@
+export { default } from './Transition.js';
+export { default as Collapse } from './Collapse.js';
+export { default as Fade } from './Fade.js';
+export { default as Grow } from './Grow.js';
+export { default as SlideFade } from './SlideFade.js';
+export { default as Zoom } from './Zoom.js';

package/Transition/reflow.d.ts

@@ -0,0 +1,4 @@
+/**
+ * weird hack about element appearing.
+ */
+export declare function reflow(node: HTMLElement): void;

package/Transition/reflow.js

@@ -0,0 +1,9 @@
+/**
+ * weird hack about element appearing.
+ */
+function reflow(node) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    node.scrollTop;
+}
+
+export { reflow };

package/Transition/useAutoTransitionDuration.d.ts

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

package/Transition/useAutoTransitionDuration.js

@@ -0,0 +1,15 @@
+import { useRef, useEffect } from 'react';
+
+function useAutoTransitionDuration(duration) {
+    const timer = useRef(NaN);
+    const autoTransitionDuration = useRef(NaN);
+    const addEndListener = (_, next) => {
+        if (duration === 'auto') {
+            timer.current = window.setTimeout(() => next(), autoTransitionDuration.current || 0);
+        }
+    };
+    useEffect(() => () => window.clearTimeout(timer.current), []);
+    return { autoTransitionDuration, addEndListener };
+}
+
+export { useAutoTransitionDuration };

package/Transition/useSetNodeTransition.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties } from 'react';
+import { TransitionMode } from './Transition';
+import { GetTransitionStyleProps, TransitionStyleProps } from './getTransitionStyleProps';
+export interface UseSetNodeTransitionProps extends GetTransitionStyleProps {
+    properties: (string | [string, (props: TransitionStyleProps, mode: TransitionMode) => TransitionStyleProps])[];
+}
+export declare function useSetNodeTransition(props: UseSetNodeTransitionProps, style?: CSSProperties): readonly [(node: HTMLElement, mode: TransitionMode) => void, (node: HTMLElement) => void];

package/Transition/useSetNodeTransition.js

@@ -0,0 +1,35 @@
+import { getTransitionStyleProps } from './getTransitionStyleProps.js';
+
+function useSetNodeTransition(props, style) {
+    /* eslint-disable no-param-reassign */
+    const setNodeTransition = (node, mode) => {
+        const transitionProps = getTransitionStyleProps(mode, props);
+        const { properties } = props;
+        node.style.transition = properties
+            .map((propertyOrConfig) => {
+            let property;
+            let resolvedTransitionProps = transitionProps;
+            if (typeof propertyOrConfig === 'string') {
+                property = propertyOrConfig;
+            }
+            else {
+                const [, overrideTransitionProps] = propertyOrConfig;
+                [property] = propertyOrConfig;
+                resolvedTransitionProps = overrideTransitionProps(resolvedTransitionProps, mode);
+            }
+            const { delay, duration, timingFunction, } = resolvedTransitionProps;
+            return `${property} ${duration}ms ${timingFunction} ${delay}ms`;
+        })
+            .join(',');
+    };
+    const resetNodeTransition = (node) => {
+        const { transition } = style || {};
+        if (transition) {
+            node.style.transition = transition;
+        }
+    };
+    /* eslint-enable no-param-reassign */
+    return [setNodeTransition, resetNodeTransition];
+}
+
+export { useSetNodeTransition };