@quadrats/react 1.1.8 → 1.1.10

package/components/Notifier/NotifierManager.js

@@ -0,0 +1,24 @@
+import React, { useState, useMemo, useImperativeHandle, Fragment } from 'react';
+
+function NotifierManager(props) {
+    const { controllerRef, defaultNotifiers = [], maxCount, render } = props;
+    const [notifiers, setNotifiers] = useState(defaultNotifiers);
+    const notifiersShouldRendered = typeof maxCount === 'number' && notifiers.length > maxCount ? notifiers.slice(0, maxCount) : notifiers;
+    const controller = useMemo(() => ({
+        add(notifier) {
+            setNotifiers((prev) => {
+                const notifierIndex = prev.findIndex(({ key }) => key === notifier.key);
+                return ~notifierIndex
+                    ? [...prev.slice(0, notifierIndex), notifier, ...prev.slice(notifierIndex + 1, prev.length)]
+                    : [...prev, notifier];
+            });
+        },
+        remove(key) {
+            setNotifiers((prev) => prev.filter((m) => m.key !== key));
+        },
+    }), []);
+    useImperativeHandle(controllerRef, () => controller, [controller]);
+    return (React.createElement(React.Fragment, null, notifiersShouldRendered.map((notifier) => (React.createElement(Fragment, { key: notifier.key }, render(notifier))))));
+}
+
+export { NotifierManager as default };

package/components/Notifier/createNotifier.d.ts

@@ -0,0 +1,21 @@
+import { Notifier, NotifierConfig, NotifierData, RenderNotifier } from './typings';
+export interface CreateNotifierProps<N extends NotifierData, C extends NotifierConfig> extends NotifierConfig {
+    /**
+     * Customizable config for notifier. The given values should be retrivable from your notification carrier.
+     */
+    config?: C;
+    /**
+     * The render props for notification carrier(UI component).
+     */
+    render: RenderNotifier<N>;
+    /**
+     * The method to set attributes or listeners to root.
+     */
+    setRoot?: (root: HTMLDivElement) => void;
+}
+/**
+ * The utility factory for `mezzanine` to create a notifier.
+ *
+ * When APIs are called, Notifier will dynamically render a new react instance by `ReactDOM.render` method.
+ */
+export declare function createNotifier<N extends NotifierData, C extends NotifierConfig = NotifierConfig>(props: CreateNotifierProps<N, C>): Notifier<N, C>;

package/components/Notifier/createNotifier.js

@@ -0,0 +1,60 @@
+import { __rest } from 'tslib';
+import React, { createRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import NotifierManager from './NotifierManager.js';
+
+/**
+ * The utility factory for `mezzanine` to create a notifier.
+ *
+ * When APIs are called, Notifier will dynamically render a new react instance by `ReactDOM.render` method.
+ */
+function createNotifier(props) {
+    const { config: configProp, render: renderNotifier, setRoot, duration, maxCount } = props, restNotifierProps = __rest(props, ["config", "render", "setRoot", "duration", "maxCount"]);
+    const container = typeof document === 'undefined' ? null : document.createElement('div');
+    const root = container ? createRoot(container) : null;
+    const controllerRef = createRef();
+    let currentConfig = Object.assign({ duration,
+        maxCount }, configProp);
+    if (setRoot && container) {
+        setRoot(container);
+    }
+    return {
+        add(notifier) {
+            var _a, _b;
+            if (container === null)
+                return 'NOT_SET';
+            document.body.appendChild(container);
+            const key = (_a = notifier.key) !== null && _a !== void 0 ? _a : Date.now();
+            const resolvedNotifier = Object.assign(Object.assign(Object.assign(Object.assign({}, restNotifierProps), notifier), currentConfig), { duration: (_b = notifier.duration) !== null && _b !== void 0 ? _b : currentConfig.duration, key, instanceKey: key });
+            if (controllerRef.current) {
+                controllerRef.current.add(resolvedNotifier);
+            }
+            else {
+                root === null || root === void 0 ? void 0 : root.render(React.createElement(NotifierManager, { controllerRef: controllerRef, defaultNotifiers: [resolvedNotifier], maxCount: currentConfig.maxCount, render: renderNotifier }));
+            }
+            return resolvedNotifier.key;
+        },
+        remove(key) {
+            if (controllerRef.current) {
+                controllerRef.current.remove(key);
+            }
+        },
+        destroy() {
+            if (container === null)
+                return;
+            // when useEffect(() => () => { root.unmount() }, []), will be show "Rendered more hooks than during the previous render." issue.
+            root === null || root === void 0 ? void 0 : root.render(null);
+            if (container.parentNode) {
+                container.parentNode.removeChild(container);
+            }
+        },
+        config(config) {
+            currentConfig = Object.assign(Object.assign({}, currentConfig), config);
+        },
+        getConfig() {
+            return currentConfig;
+        },
+    };
+}
+
+export { createNotifier };

package/components/Notifier/typings.d.ts

@@ -0,0 +1,28 @@
+import { Key, ReactNode } from 'react';
+export interface NotifierConfig {
+    /**
+     * If passed as number, the notification will be closed after the amount of time.
+     */
+    duration?: number | false;
+    maxCount?: number;
+}
+export interface NotifierData extends Pick<NotifierConfig, 'duration'> {
+    /**
+     * The notification content.
+     */
+    children?: ReactNode;
+    /**
+     * Close Handler
+     */
+    onClose?: (key: Key) => void;
+}
+export type RenderNotifier<N extends NotifierData> = (notifier: N) => ReactNode;
+export interface Notifier<N extends NotifierData, C extends NotifierConfig = NotifierConfig> {
+    add: (notifier: N & {
+        key?: Key;
+    }) => Key;
+    config: (configs: C) => void;
+    destroy: VoidFunction;
+    remove: (key: Key) => void;
+    getConfig: () => C;
+}

package/components/Portal/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export interface PortalProps {
+    getContainer?: () => HTMLElement;
+    children?: React.ReactNode;
+}
+declare const Portal: FC<PortalProps>;
+export default Portal;

package/components/Portal/index.js

@@ -0,0 +1,8 @@
+import ReactDOM from 'react-dom';
+
+const Portal = ({ getContainer, children }) => {
+    const container = getContainer ? getContainer() : document.body;
+    return ReactDOM.createPortal(children, container);
+};
+
+export { Portal as default };

package/components/Progress/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ProgressProps {
+    className?: string;
+    percentage?: number;
+}
+declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+export default Progress;

package/components/Progress/index.js

@@ -0,0 +1,20 @@
+import React, { forwardRef } from 'react';
+import clsx from 'clsx';
+
+const Progress = forwardRef(function Progress(props, ref) {
+    const { className, percentage = 0 } = props;
+    const size = 16;
+    const strokeWidth = 2;
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference * (1 - percentage / 100);
+    return (React.createElement("div", { ref: ref, className: clsx('qdr-progress', className) },
+        React.createElement("div", { className: "qdr-progress__wrapper" },
+            React.createElement("div", { className: "qdr-progress__spinner-wrapper" },
+                React.createElement("svg", { width: size, height: size },
+                    React.createElement("circle", { className: "qdr-progress__backdrop", cx: size / 2, cy: size / 2, r: radius, strokeWidth: strokeWidth, fill: "none" }),
+                    React.createElement("circle", { className: "qdr-progress__track", cx: size / 2, cy: size / 2, r: radius, strokeWidth: strokeWidth, fill: "none", strokeDasharray: circumference, strokeDashoffset: offset }))),
+            React.createElement("p", { className: "qdr-progress__percentage" }, `${percentage}%`))));
+});
+
+export { Progress as default };

package/components/SegmentedControl/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface SegmentedControlProps {
+    options: {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }[];
+    value: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+}
+declare const SegmentedControl: ({ options, value, onChange, disabled }: SegmentedControlProps) => React.JSX.Element;
+export default SegmentedControl;

package/components/SegmentedControl/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import clsx from 'clsx';
+
+const SegmentedControl = ({ options, value, onChange, disabled }) => {
+    return (React.createElement("div", { className: clsx('qdr-segmented-control', {
+            'qdr-segmented-control--disabled': disabled || options.filter((o) => o.disabled).length === options.length,
+        }) }, options.map((option) => (React.createElement("button", { key: option.value, type: "button", disabled: disabled || option.disabled, className: clsx('qdr-segmented-control__button', {
+            'qdr-segmented-control__button--active': value === option.value,
+        }), onClick: () => {
+            onChange(option.value);
+        } }, option.label)))));
+};
+
+export { SegmentedControl as default };

package/components/Textarea/index.d.ts

@@ -0,0 +1,15 @@
+import React, { Ref } from 'react';
+import { BaseFieldProps } from '../BaseField';
+export interface TextareaProps extends Omit<BaseFieldProps, 'children'> {
+    value?: string;
+    onChange?: (value: string) => void;
+    textareaRef?: Ref<HTMLTextAreaElement>;
+    placeholder?: string;
+    height?: number;
+    disabled?: boolean;
+    isError?: boolean;
+    hint?: string;
+    maxLength?: number;
+}
+declare const Textarea: ({ label, className, width, value, onChange, textareaRef, placeholder, height, disabled, isError, hint, maxLength, errorMessage, required, }: TextareaProps) => React.JSX.Element;
+export default Textarea;

package/components/Textarea/index.js

@@ -0,0 +1,24 @@
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import BaseField from '../BaseField/index.js';
+
+const Textarea = ({ label, className, width, value = '', onChange, textareaRef, placeholder, height, disabled, isError, hint, maxLength, errorMessage, required = false, }) => {
+    const isLimited = useMemo(() => maxLength && value && value.length >= maxLength, [maxLength, value]);
+    return (React.createElement(BaseField, { className: className, label: label, required: required, width: width, errorMessage: errorMessage },
+        React.createElement("div", { className: "qdr-textarea" },
+            React.createElement("textarea", { ref: textareaRef, style: { height }, className: clsx('qdr-textarea__textarea', {
+                    'qdr-textarea__textarea--error': isError,
+                }), value: value, onChange: (e) => {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
+                }, maxLength: maxLength, placeholder: placeholder, disabled: disabled }),
+            hint && (React.createElement("div", { className: "qdr-textarea__hint-wrapper" },
+                React.createElement("span", { className: "qdr-textarea__hint" }, hint))),
+            maxLength && (React.createElement("span", { className: clsx('qdr-textarea__counter', {
+                    'qdr-textarea__counter--have-hint': hint,
+                    'qdr-textarea__counter--limited': isLimited,
+                    'qdr-textarea__counter--error': isError,
+                    'qdr-textarea__counter--disabled': disabled,
+                }) }, `${value ? value.length : 0}/${maxLength}`)))));
+};
+
+export { Textarea as default };

package/components/Toggle/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ToggleProps {
+    onChange: (status: boolean) => void;
+    checked: boolean;
+    disabled?: boolean;
+}
+declare const Toggle: ({ onChange, checked, disabled }: ToggleProps) => React.JSX.Element;
+export default Toggle;

package/components/Toggle/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import clsx from 'clsx';
+
+const Toggle = ({ onChange, checked, disabled }) => {
+    return (React.createElement("div", { className: clsx('qdr-toggle', {
+            'qdr-toggle--checked': checked,
+            'qdr-toggle--disabled': disabled,
+        }) },
+        React.createElement("div", { className: "qdr-toggle__control" }),
+        React.createElement("input", { "aria-checked": checked, "aria-disabled": disabled, checked: checked, className: "qdr-toggle__input", disabled: disabled, onChange: (e) => {
+                onChange(e.target.checked);
+            }, type: "checkbox" })));
+};
+
+export { Toggle as default };

package/components/Tooltip/calculatePosition.d.ts

@@ -0,0 +1,5 @@
+import { TooltipProps } from './typings';
+export declare function calculatePosition(props: Required<Pick<TooltipProps, 'placement' | 'getContainer' | 'horizontalOffset' | 'verticalOffset'>>, triggerEl: HTMLElement, popupEl: HTMLElement): {
+    top: number;
+    left: number;
+};

package/components/Tooltip/calculatePosition.js

@@ -0,0 +1,69 @@
+function isContainerAsDocument(container) {
+    return container === document.documentElement || container === document.body;
+}
+function getTargetRect(container, targetEl) {
+    const triggerRect = targetEl.getBoundingClientRect();
+    if (isContainerAsDocument(container)) {
+        return triggerRect;
+    }
+    const containerRect = container.getBoundingClientRect();
+    const { width, height } = triggerRect;
+    const top = triggerRect.top - containerRect.top;
+    const left = triggerRect.left - containerRect.left;
+    return {
+        width,
+        height,
+        top,
+        bottom: top + height,
+        left,
+        right: left + width,
+    };
+}
+function getScrollLeftAndTop(container) {
+    const isAsDocument = isContainerAsDocument(container);
+    return {
+        scrollTop: isAsDocument ? document.documentElement.scrollTop + document.body.scrollTop : container.scrollTop,
+        scrollLeft: isAsDocument ? document.documentElement.scrollLeft + document.body.scrollLeft : container.scrollLeft,
+    };
+}
+function calculatePosition(props, triggerEl, popupEl) {
+    const { placement, getContainer, horizontalOffset, verticalOffset, } = props;
+    const isTop = placement.includes('top');
+    const isBottom = placement.includes('bottom');
+    const isLeft = placement.includes('left');
+    const isRight = placement.includes('right');
+    const container = getContainer();
+    const triggerRect = getTargetRect(container, triggerEl);
+    const { width: popupWidth, height: popupHeight } = popupEl.getBoundingClientRect();
+    let { scrollTop: top, scrollLeft: left } = getScrollLeftAndTop(container);
+    /**
+     * position
+     */
+    if (isLeft) {
+        left += triggerRect.left;
+    }
+    else if (isRight) {
+        left += triggerRect.right - popupWidth;
+    }
+    else {
+        left += triggerRect.left + (triggerRect.width - popupWidth) / 2;
+    }
+    if (isTop) {
+        top += triggerRect.top - popupHeight;
+    }
+    else if (isBottom) {
+        top += triggerRect.bottom;
+    }
+    else {
+        top += triggerRect.top + (triggerRect.height - popupHeight) / 2;
+        left += isLeft ? -popupWidth : popupWidth;
+    }
+    /**
+     * offset
+     */
+    top += isTop ? -verticalOffset : verticalOffset;
+    left += isLeft ? -horizontalOffset : horizontalOffset;
+    return { top, left };
+}
+
+export { calculatePosition };

package/components/Tooltip/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TooltipProps } from './typings';
+/**
+ * @todo
+ * To implement all placement.
+ * Extract Popup from Tooltip.
+ */
+declare function Tooltip({ children, triggers, popup, getContainer, placement, horizontalOffset, verticalOffset, transitionClassNames, mouseEnterDelay, mouseLeaveDelay, }: TooltipProps): React.JSX.Element;
+export default Tooltip;
+export { TooltipProps };

package/components/Tooltip/index.js

@@ -0,0 +1,124 @@
+import React, { useContext, useState, useRef, useCallback, Children, cloneElement, useLayoutEffect } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import clsx from 'clsx';
+import { composeRefs } from '@quadrats/react/utils';
+import { ThemeContext } from '@quadrats/react/configs';
+import Portal from '../Portal/index.js';
+import { calculatePosition } from './calculatePosition.js';
+
+const clsPrefix = 'qdr-tooltip';
+const defaultTriggers = ['hover'];
+const defaultGetContainer = () => document.body;
+const defaultTransitionClassNames = {
+    enter: `${clsPrefix}__fade--enter`,
+    enterActive: `${clsPrefix}__fade--enter-active`,
+    exit: `${clsPrefix}__fade--exit`,
+    exitActive: `${clsPrefix}__fade--exit-active`,
+};
+/**
+ * @todo
+ * To implement all placement.
+ * Extract Popup from Tooltip.
+ */
+function Tooltip({ children, triggers = defaultTriggers, popup, getContainer = defaultGetContainer, placement = 'top', horizontalOffset = 0, verticalOffset = 0, transitionClassNames = defaultTransitionClassNames, mouseEnterDelay = 0, mouseLeaveDelay = 0.1, }) {
+    const { props: themeProps } = useContext(ThemeContext);
+    const [visible, setVisible] = useState(false);
+    const delayTimer = useRef(NaN);
+    const nodeRef = useRef(null);
+    const clearDelayTimer = useCallback(() => {
+        if (delayTimer.current) {
+            window.clearTimeout(delayTimer.current);
+            delayTimer.current = NaN;
+        }
+    }, []);
+    const delaySetVisible = useCallback((setVisibleAction, delay) => {
+        clearDelayTimer();
+        if (delay) {
+            delayTimer.current = window.setTimeout(() => {
+                setVisible(setVisibleAction);
+                clearDelayTimer();
+            }, delay * 1000);
+        }
+        else {
+            setVisible(setVisibleAction);
+        }
+    }, [clearDelayTimer]);
+    const triggerRef = useRef(null);
+    const popupRef = useRef(null);
+    const [firstPlacement, secondPlacement] = placement.split('-');
+    const child = Children.only(children);
+    const triggerProps = {};
+    const popupProps = {};
+    if (triggers.includes('click')) {
+        triggerProps.onClick = (event) => {
+            var _a, _b;
+            delaySetVisible((prevVisible) => !prevVisible, 0);
+            (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        };
+    }
+    if (triggers.includes('hover')) {
+        popupProps.onMouseEnter = clearDelayTimer;
+        popupProps.onMouseLeave = (event) => {
+            var _a;
+            if (!(event.relatedTarget instanceof Node && ((_a = popupRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)))) {
+                delaySetVisible(false, mouseLeaveDelay);
+            }
+        };
+        triggerProps.onMouseEnter = (event) => {
+            var _a, _b;
+            delaySetVisible(true, mouseEnterDelay);
+            (_b = (_a = child.props).onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        };
+        triggerProps.onMouseLeave = (event) => {
+            var _a, _b;
+            delaySetVisible(false, mouseLeaveDelay);
+            (_b = (_a = child.props).onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        };
+    }
+    const trigger = cloneElement(child, Object.assign(Object.assign({}, triggerProps), { ref: composeRefs([triggerRef, child.ref]) }));
+    useLayoutEffect(() => {
+        const triggerEl = triggerRef.current;
+        const popupEl = popupRef.current;
+        if (!(visible && triggerEl && popupEl)) {
+            return;
+        }
+        const { top, left } = calculatePosition({
+            placement,
+            getContainer,
+            horizontalOffset,
+            verticalOffset,
+        }, triggerEl, popupEl);
+        popupEl.style.top = `${top}px`;
+        popupEl.style.left = `${left}px`;
+    }, [visible, placement, getContainer, horizontalOffset, verticalOffset]);
+    useLayoutEffect(() => {
+        if (!visible) {
+            return;
+        }
+        function clickOutSideHandler(event) {
+            event.preventDefault();
+            const popupEl = popupRef.current;
+            const targetEl = event.target;
+            const targetUnmount = targetEl.offsetParent === null;
+            if (!((popupEl === null || popupEl === void 0 ? void 0 : popupEl.contains(targetEl)) || targetUnmount)) {
+                setVisible(false);
+            }
+        }
+        document.addEventListener('click', clickOutSideHandler);
+        return () => {
+            document.removeEventListener('click', clickOutSideHandler);
+        };
+    }, [visible]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Portal, { getContainer: getContainer },
+            React.createElement(CSSTransition, { nodeRef: nodeRef, in: visible, classNames: transitionClassNames, timeout: 200, unmountOnExit: true },
+                React.createElement("div", { ref: nodeRef, className: `${clsPrefix}__mask` },
+                    React.createElement("div", Object.assign({ className: clsx(themeProps.className, `${clsPrefix}__popup`, `${clsPrefix}__popup--${firstPlacement}`), ref: popupRef, style: themeProps.style }, popupProps),
+                        React.createElement("div", { className: clsx(`${clsPrefix}__arrow`, `${clsPrefix}__arrow--${firstPlacement}`, {
+                                [`${clsPrefix}__arrow--${placement}`]: secondPlacement,
+                            }) }),
+                        React.createElement("div", { className: `${clsPrefix}__content` }, popup))))),
+        trigger));
+}
+
+export { Tooltip as default };

package/components/Tooltip/typings.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { CSSTransitionClassNames } from 'react-transition-group/CSSTransition';
+import { PortalProps } from '../Portal';
+export type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'right-top' | 'right-bottom';
+export type TooltipTrigger = 'hover' | 'click';
+export interface TooltipProps {
+    children?: React.ReactNode;
+    triggers?: TooltipTrigger[];
+    popup?: ReactNode;
+    getContainer?: PortalProps['getContainer'];
+    /**
+     * Placement of popup.
+     */
+    placement?: TooltipPlacement;
+    /**
+     * Horizontal offset of popup between trigger.
+     */
+    horizontalOffset?: number;
+    /**
+     * Vertical offset of popup between trigger.
+     */
+    verticalOffset?: number;
+    /**
+     * classNames props of CSSTransition in react-transition-group.
+     */
+    transitionClassNames?: string | CSSTransitionClassNames;
+    mouseEnterDelay?: number;
+    mouseLeaveDelay?: number;
+}

package/components/Transition/SlideFade.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TransitionImplementationProps } from './Transition';
+export type MotionDurationType = 'shortest' | 'shorter' | 'short' | 'standard' | 'long';
+export declare const MOTION_DURATION: Readonly<Record<MotionDurationType, number>>;
+export type MotionEasingType = 'standard' | 'emphasized' | 'decelerated' | 'accelerated';
+export declare const MOTION_EASING: Readonly<Record<MotionEasingType, string>>;
+export declare function reflow(node: HTMLElement): void;
+export 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: React.ForwardRefExoticComponent<SlideFadeProps & React.RefAttributes<HTMLElement>>;
+export default SlideFade;

package/components/Transition/SlideFade.js

@@ -0,0 +1,91 @@
+import { __rest } from 'tslib';
+import React, { forwardRef, useRef, cloneElement } from 'react';
+import { composeRefs } from '@quadrats/react/utils';
+import Transition from './Transition.js';
+import { useSetNodeTransition } from './useSetNodeTransition.js';
+
+const MOTION_DURATION = {
+    shorter: 200,
+    short: 250};
+const MOTION_EASING = {
+    decelerated: 'cubic-bezier(0, 0, 0.3, 1)',
+    accelerated: 'cubic-bezier(0.32, 0, 0.67, 0)',
+};
+function reflow(node) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    node.scrollTop;
+}
+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 } = props, rest = __rest(props, ["children", "direction", "delay", "duration", "easing", "in", "onEnter", "onEntered", "onExit", "onExited"]);
+    const duration = durationProp === 'auto' ? defaultDuration : durationProp;
+    const nodeRef = useRef(null);
+    const composedNodeRef = composeRefs([ref, nodeRef]);
+    const [setNodeTransition, resetNodeTransition] = useSetNodeTransition({
+        delay,
+        duration,
+        easing,
+        properties: ['opacity', 'transform'],
+    }, children === null || children === void 0 ? void 0 : children.props.style);
+    const transitionProps = Object.assign(Object.assign({}, 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 (React.createElement(Transition, Object.assign({}, transitionProps), children &&
+        ((state) => cloneElement(children, Object.assign(Object.assign({}, children.props), { ref: composedNodeRef, style: Object.assign(Object.assign({}, getStyle(state, inProp, direction)), children.props.style) })))));
+});
+
+export { MOTION_DURATION, MOTION_EASING, SlideFade as default, reflow };