@mezzanine-ui/react 0.16.0 → 1.0.0-alpha.0

package/Toggle/Toggle.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { toggleClasses } from '@mezzanine-ui/core/toggle';
+import { useSwitchControlValue } from '../Form/useSwitchControlValue.js';
+import Typography from '../Typography/Typography.js';
+import { FormControlContext } from '../Form/FormControlContext.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` toggle.
+ */
+const Toggle = forwardRef(function Toggle(props, ref) {
+    const { disabled: disabledFromFormControl } = useContext(FormControlContext) || {};
+    const { checked: checkedProp, className, defaultChecked, disabled = disabledFromFormControl, inputProps, label, onChange: onChangeProp, size = 'main', supportingText, ...rest } = props;
+    const [checked, onChange] = useSwitchControlValue({
+        checked: checkedProp,
+        defaultChecked,
+        onChange: onChangeProp,
+    });
+    return (jsxs("div", { ref: ref, ...rest, className: cx(toggleClasses.host, {
+            [toggleClasses.checked]: checked,
+            [toggleClasses.disabled]: disabled,
+            [toggleClasses.main]: size === 'main',
+            [toggleClasses.sub]: size === 'sub',
+        }, className), children: [jsxs("div", { className: toggleClasses.inputContainer, children: [jsx("span", { className: toggleClasses.knob }), jsx("input", { ...inputProps, "aria-checked": checked, "aria-disabled": disabled, checked: checked, className: toggleClasses.input, disabled: disabled, onChange: onChange, type: "checkbox" })] }), label && (jsxs("div", { className: toggleClasses.textContainer, children: [jsx(Typography, { color: "text-neutral-solid", variant: "label-primary", children: label }), supportingText && (jsx(Typography, { color: "text-neutral", variant: "caption", children: supportingText }))] }))] }));
+});
+
+export { Toggle as default };

package/Toggle/index.d.ts

@@ -0,0 +1,3 @@
+export type { ToggleSize } from '@mezzanine-ui/core/toggle';
+export type { ToggleProps } from './Toggle';
+export { default } from './Toggle';

package/Toggle/index.js

@@ -0,0 +1 @@
+export { default } from './Toggle.js';

package/Tooltip/Tooltip.d.ts

@@ -1,13 +1,24 @@
 import { ReactElement, MouseEventHandler, ReactNode } from 'react';
 import { PopperProps } from '../Popper';
-export interface TooltipProps extends Omit<PopperProps, 'children' | 'title'> {
+export interface TooltipProps extends Omit<PopperProps, 'arrow' | 'children' | 'disablePortal' | 'title'> {
     /**
-     * child function that can receive events
+     * show arrow or not
+     * @default true
+     */
+    arrow?: boolean;
+    /**
+     * child function that can receive events and ref
      */
     children(opt: {
         onMouseEnter: MouseEventHandler;
         onMouseLeave: MouseEventHandler;
+        ref: React.RefCallback<HTMLElement>;
     }): ReactElement<any>;
+    /**
+     * Whether to disable portal. If true, it will be a normal component.
+     * @default true
+     */
+    disablePortal?: boolean;
     /**
      * delay time to hide when mouse leave. unit: s.
      * @default 0.1

package/Tooltip/Tooltip.js

@@ -1,28 +1,74 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef } from 'react';
+import { forwardRef, useRef, useState, useCallback } from 'react';
 import { tooltipClasses } from '@mezzanine-ui/core/tooltip';
+import { offset, flip, shift } from '@floating-ui/react-dom';
+import { spacingPrefix } from '@mezzanine-ui/system/spacing';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import { useDelayMouseEnterLeave } from './useDelayMouseEnterLeave.js';
+import { getCSSVariableValue } from '../utils/get-css-variable-value.js';
+import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
+import Fade from '../Transition/Fade.js';
 import Popper from '../Popper/Popper.js';
 import cx from 'clsx';
 
-const offsetModifier = {
-    name: 'offset',
-    options: { offset: [0, 8] },
-};
 /**
  * The react component for `mezzanine` tooltip.
  */
 const Tooltip = forwardRef(function Tooltip(props, ref) {
-    const { anchor: anchorProp, children, className, mouseLeaveDelay = 0.1, open = false, options = {}, title, ...rest } = props;
-    const { modifiers = [] } = options;
+    const { anchor: anchorProp, arrow: showArrow = true, children, className, disablePortal = true, mouseLeaveDelay = 0.1, open = false, options = {}, title, ...rest } = props;
+    const { middleware: middlewareProp = [] } = options;
     const tooltipRef = useRef(null);
+    const [targetRef, _setTargetRef] = useState({
+        current: null,
+    });
     const composedRef = useComposeRefs([ref, tooltipRef]);
-    const { anchor, onLeave, onPopperEnter, onTargetEnter, visible } = useDelayMouseEnterLeave({ mouseLeaveDelay });
+    const { 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 })] }));
+    const offsetValue = Number(getCSSVariableValue(`--${spacingPrefix}-gap-base`).replace('rem', '')) * 16;
+    const placement = options.placement || 'top';
+    const isPlacementAtEdge = placement.endsWith('-start') || placement.endsWith('-end');
+    // 設置 target element，並重新渲染
+    const setTargetRef = useCallback((element) => {
+        _setTargetRef({ current: element });
+    }, []);
+    // middleware (shift, flip 會衝突，所以依照官方推薦設定 https://floating-ui.com/docs/flip#combining-with-shift)
+    const middleware = [offset({ mainAxis: offsetValue })];
+    const flipMiddleware = flip({
+        crossAxis: 'alignment',
+        fallbackAxisSideDirection: 'end',
+    });
+    const shiftMiddleware = shift();
+    if (placement.includes('-')) {
+        middleware.push(flipMiddleware, shiftMiddleware);
+    }
+    else {
+        middleware.push(shiftMiddleware, flipMiddleware);
+    }
+    return (jsxs(Fragment, { children: [jsx(Fade, { in: isTooltipVisible, duration: {
+                    enter: MOTION_DURATION.fast,
+                    exit: MOTION_DURATION.fast,
+                }, easing: {
+                    enter: MOTION_EASING.standard,
+                    exit: MOTION_EASING.standard,
+                }, children: jsx(Popper, { ...rest, ref: composedRef, anchor: anchorProp || targetRef.current, arrow: showArrow
+                        ? {
+                            className: tooltipClasses.arrow,
+                            enabled: true,
+                            padding: isPlacementAtEdge
+                                ? Number(getCSSVariableValue(`--${spacingPrefix}-padding-horizontal-comfort`).replace('rem', '')) * 16
+                                : 0,
+                        }
+                        : undefined, className: cx(tooltipClasses.host, className), disablePortal: disablePortal, onMouseEnter: onPopperEnter, onMouseLeave: onLeave, open: isTooltipVisible, options: {
+                        ...options,
+                        placement,
+                        middleware: [...middleware, ...middlewareProp],
+                    }, children: title }) }), typeof children === 'function' &&
+                children({
+                    onMouseEnter: onTargetEnter,
+                    onMouseLeave: onLeave,
+                    ref: setTargetRef,
+                })] }));
 });
 
 export { Tooltip as default };

package/Tooltip/index.d.ts

@@ -1 +1,2 @@
-export { default, TooltipProps } from './Tooltip';
+export type { TooltipProps } from './Tooltip';
+export { default } from './Tooltip';

package/Tooltip/useDelayMouseEnterLeave.d.ts

@@ -2,10 +2,9 @@ export interface UseDelayMouseEnterLeave {
     mouseLeaveDelay?: number;
 }
 export interface DelayMouseEnterLeave {
-    anchor: HTMLButtonElement | null;
     onLeave(v: any): void;
     onPopperEnter(v: any): void;
-    onTargetEnter(v: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
+    onTargetEnter(v: React.MouseEvent<HTMLElement, MouseEvent>): void;
     visible: boolean;
 }
 export declare function useDelayMouseEnterLeave(opt: UseDelayMouseEnterLeave): DelayMouseEnterLeave;

package/Tooltip/useDelayMouseEnterLeave.js

@@ -1,36 +1,33 @@
-import { useState, useCallback } from 'react';
+import { useState, useRef, useCallback } from 'react';
 
 function useDelayMouseEnterLeave(opt) {
     const { mouseLeaveDelay = 0.1 } = opt || {};
     /** state that control tooltip visible/invisible */
     const [visible, setVisible] = useState(false);
-    /** tooltip reference anchor */
-    const [anchor, setAnchor] = useState(null);
-    /** timer for mouse leaving delay */
-    let timer;
+    /** timer for mouse leaving delay - use ref to persist across renders */
+    const timerRef = useRef(null);
     const clearVisibilityDelayTimeout = useCallback(() => {
-        if (timer) {
-            clearTimeout(timer);
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
         }
     }, []);
     const onLeave = useCallback(() => {
-        timer = setTimeout(() => {
+        timerRef.current = setTimeout(() => {
             setVisible(false);
             clearVisibilityDelayTimeout();
         }, mouseLeaveDelay * 1000);
-    }, [mouseLeaveDelay]);
+    }, [mouseLeaveDelay, clearVisibilityDelayTimeout]);
     const onPopperEnter = useCallback(() => {
         clearVisibilityDelayTimeout();
         setVisible(true);
-    }, []);
+    }, [clearVisibilityDelayTimeout]);
     const onTargetEnter = useCallback((event) => {
         event.stopPropagation();
-        setAnchor(event.currentTarget);
         clearVisibilityDelayTimeout();
         setVisible(true);
-    }, []);
+    }, [clearVisibilityDelayTimeout]);
     return {
-        anchor,
         onLeave,
         onPopperEnter,
         onTargetEnter,

package/Transition/Collapse.d.ts

@@ -1,5 +1,6 @@
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { TransitionImplementationProps } from './Transition';
+/** @deprecated 設計師未定義，暫時標記為 deprecated */
 export interface CollapseProps extends TransitionImplementationProps, Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
     /**
      * The height of the container while collapsed.
@@ -9,6 +10,7 @@ export interface CollapseProps extends TransitionImplementationProps, Omit<Nativ
 }
 /**
  * The react component for `mezzanine` transition collapse.
+ * @deprecated 設計師未定義，暫時標記為 deprecated
  */
 declare const Collapse: import("react").ForwardRefExoticComponent<CollapseProps & import("react").RefAttributes<HTMLElement>>;
 export default Collapse;

package/Transition/Collapse.js

@@ -22,15 +22,16 @@ function getStyle(state, inProp, collapsedHeight) {
     return style;
 }
 const defaultEasing = {
-    enter: MOTION_EASING.decelerated,
-    exit: MOTION_EASING.accelerated,
+    enter: MOTION_EASING.entrance,
+    exit: MOTION_EASING.exit,
 };
 /**
  * The react component for `mezzanine` transition collapse.
+ * @deprecated 設計師未定義，暫時標記為 deprecated
  */
 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 { autoTransitionDurationRef, addEndListener } = useAutoTransitionDuration(duration);
     const nodeRef = useRef(null);
     const wrapperRef = useRef(null);
     const collapsedHeight = typeof collapsedHeightProp === 'number'
@@ -44,7 +45,7 @@ const Collapse = forwardRef(function Collapse(props, ref) {
         properties: ['height'],
         resolveAutoDuration: () => {
             const autoSizeDuration = getAutoSizeDuration(getWrapperHeight());
-            autoTransitionDuration.current = autoSizeDuration;
+            autoTransitionDurationRef.current = autoSizeDuration;
             return autoSizeDuration;
         },
     }, style);
@@ -57,7 +58,6 @@ const Collapse = forwardRef(function Collapse(props, ref) {
         lazyMount,
         keepMount: collapsedHeight !== '0px' ? true : keepMount,
         nodeRef,
-        /* eslint-disable no-param-reassign */
         onEnter(node, isAppearing) {
             node.style.height = collapsedHeight;
             reflow(node);
@@ -99,7 +99,6 @@ const Collapse = forwardRef(function Collapse(props, ref) {
                 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 }) }) })) }));
 });

package/Transition/Fade.js

@@ -19,12 +19,12 @@ function getStyle(state, inProp) {
     return style;
 }
 const defaultDuration = {
-    enter: MOTION_DURATION.short,
-    exit: MOTION_DURATION.shorter,
+    enter: MOTION_DURATION.moderate,
+    exit: MOTION_DURATION.moderate,
 };
 const defaultEasing = {
-    enter: MOTION_EASING.decelerated,
-    exit: MOTION_EASING.accelerated,
+    enter: MOTION_EASING.entrance,
+    exit: MOTION_EASING.exit,
 };
 /**
  * The react component for `mezzanine` transition fade.

package/Transition/Rotate.d.ts

@@ -0,0 +1,42 @@
+import { ReactElement } from 'react';
+export interface RotateProps {
+    /**
+     * The child element to rotate.
+     */
+    children: ReactElement;
+    /**
+     * The rotation degrees when `open` is true.
+     * Common use case: arrow indicators in Select, Accordion, etc.
+     * @default 180
+     */
+    degrees?: number;
+    /**
+     * The duration of the rotation transition in milliseconds.
+     * @default MOTION_DURATION.fast (150ms)
+     */
+    duration?: number;
+    /**
+     * The easing function for the rotation transition.
+     * @default MOTION_EASING.standard
+     */
+    easing?: string;
+    /**
+     * Whether the element should be in the rotated state.
+     * @default false
+     */
+    in?: boolean;
+    /**
+     * The transform origin for child element.
+     * @default 'center'
+     */
+    transformOrigin?: string;
+}
+/**
+ * The react component for `mezzanine` transition rotate.
+ * Unlike other transition components, Rotate does not unmount the element.
+ * It simply rotates the element based on the `in` state.
+ *
+ * Common use case: arrow indicators that rotate to indicate expand/collapse state.
+ */
+declare const Rotate: import("react").ForwardRefExoticComponent<RotateProps & import("react").RefAttributes<HTMLElement>>;
+export default Rotate;

package/Transition/Rotate.js

@@ -0,0 +1,30 @@
+import { MOTION_DURATION, MOTION_EASING } from '@mezzanine-ui/system/motion';
+import { forwardRef, cloneElement } from 'react';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+
+/**
+ * The react component for `mezzanine` transition rotate.
+ * Unlike other transition components, Rotate does not unmount the element.
+ * It simply rotates the element based on the `in` state.
+ *
+ * Common use case: arrow indicators that rotate to indicate expand/collapse state.
+ */
+const Rotate = forwardRef(function Rotate(props, ref) {
+    const { children, degrees = 180, duration = MOTION_DURATION.fast, easing = MOTION_EASING.standard, in: inProp = false, transformOrigin = 'center', } = props;
+    const childRef = 'ref' in children ? children.ref : undefined;
+    const composedRef = useComposeRefs([ref, childRef]);
+    const childProps = children.props;
+    const style = {
+        transform: inProp ? `rotate(${degrees}deg)` : 'rotate(0deg)',
+        transformOrigin,
+        transition: `transform ${duration}ms ${easing}`,
+        ...(childProps.style || {}),
+    };
+    return cloneElement(children, {
+        ...childProps,
+        ref: composedRef,
+        style,
+    });
+});
+
+export { Rotate as default };

package/Transition/Scale.d.ts

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

package/Transition/{Grow.js → Scale.js}

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, cloneElement } from 'react';
-import { MOTION_EASING } from '@mezzanine-ui/system/motion';
+import { MOTION_DURATION, MOTION_EASING } from '@mezzanine-ui/system/motion';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import Transition from './Transition.js';
 import { getAutoSizeDuration } from './getAutoSizeDuration.js';
@@ -9,7 +9,7 @@ import { useAutoTransitionDuration } from './useAutoTransitionDuration.js';
 import { useSetNodeTransition } from './useSetNodeTransition.js';
 
 function getScale(value) {
-    return `scale(${value}, ${value ** 2})`;
+    return `scale(${value})`;
 }
 function getStyle(state) {
     if (state === 'entering') {
@@ -26,19 +26,24 @@ function getStyle(state) {
     }
     return {
         opacity: 0,
-        transform: getScale(0.75),
+        transform: getScale(0.95),
     };
 }
+const defaultDuration = {
+    enter: MOTION_DURATION.moderate,
+    exit: MOTION_DURATION.moderate,
+};
 const defaultEasing = {
-    enter: MOTION_EASING.decelerated,
-    exit: MOTION_EASING.accelerated,
+    enter: MOTION_EASING.entrance,
+    exit: MOTION_EASING.exit,
 };
 /**
- * The react component for `mezzanine` transition grow.
+ * The react component for `mezzanine` transition scale.
  */
-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 Scale = forwardRef(function Scale(props, ref) {
+    const { appear, children, delay = 0, duration: durationProp = defaultDuration, easing = defaultEasing, in: inProp, onEnter, onEntered, onExit, onExited, transformOrigin = 'center', ...rest } = props;
+    const duration = durationProp === 'auto' ? defaultDuration : durationProp;
+    const { autoTransitionDurationRef, addEndListener } = useAutoTransitionDuration(duration);
     const nodeRef = useRef(null);
     const [setNodeTransition, resetNodeTransition] = useSetNodeTransition({
         delay,
@@ -48,12 +53,12 @@ const Grow = forwardRef(function Grow(props, ref) {
             'opacity',
             [
                 'transform',
-                (transitionProps, mode) => {
+                (transitionProps) => {
                     const { delay: delayProp, duration: durationProp } = transitionProps;
                     return {
                         ...transitionProps,
-                        delay: mode === 'exit' ? delayProp || durationProp * 0.333 : delayProp,
-                        duration: durationProp * 0.666,
+                        delay: delayProp,
+                        duration: durationProp,
                     };
                 },
             ],
@@ -61,7 +66,7 @@ const Grow = forwardRef(function Grow(props, ref) {
         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;
+            autoTransitionDurationRef.current = autoSizeDuration;
             return autoSizeDuration;
         },
     }, children === null || children === void 0 ? void 0 : children.props.style);
@@ -73,7 +78,6 @@ const Grow = forwardRef(function Grow(props, ref) {
         duration,
         in: inProp,
         nodeRef,
-        /* eslint-disable no-param-reassign */
         onEnter(node, isAppearing) {
             setNodeTransition(node, 'enter');
             reflow(node);
@@ -99,7 +103,6 @@ const Grow = forwardRef(function Grow(props, ref) {
                 onExited(node);
             }
         },
-        /* eslint-enable no-param-reassign */
     };
     return (jsx(Transition, { ...transitionProps, children: children &&
             ((state) => cloneElement(children, {
@@ -114,4 +117,4 @@ const Grow = forwardRef(function Grow(props, ref) {
             })) }));
 });
 
-export { Grow as default };
+export { Scale as default };

package/Transition/Slide.d.ts

@@ -0,0 +1,7 @@
+import { TransitionImplementationProps } from './Transition';
+export type SlideProps = TransitionImplementationProps;
+/**
+ * The react component for `mezzanine` transition slide in/out.
+ */
+declare const Slide: import("react").ForwardRefExoticComponent<TransitionImplementationProps & import("react").RefAttributes<HTMLElement>>;
+export default Slide;

package/Transition/{Zoom.js → Slide.js}

@@ -7,29 +7,31 @@ 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';
+        return {
+            transform: 'translate3d(0, 0, 0)',
+        };
     }
-    else if (state === 'exited' && !inProp) {
+    const style = {
+        transform: 'translate3d(100%, 0, 0)',
+    };
+    if (state === 'exited' && !inProp) {
         style.visibility = 'hidden';
     }
     return style;
 }
 const defaultDuration = {
-    enter: MOTION_DURATION.short,
-    exit: MOTION_DURATION.shorter,
+    enter: MOTION_DURATION.slow,
+    exit: MOTION_DURATION.slow,
 };
 const defaultEasing = {
-    enter: MOTION_EASING.decelerated,
-    exit: MOTION_EASING.accelerated,
+    enter: MOTION_EASING.standard,
+    exit: MOTION_EASING.standard,
 };
 /**
- * The react component for `mezzanine` transition zoom.
+ * The react component for `mezzanine` transition slide in/out.
  */
-const Zoom = forwardRef(function Zoom(props, ref) {
+const Slide = forwardRef(function Slide(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);
@@ -82,4 +84,4 @@ const Zoom = forwardRef(function Zoom(props, ref) {
             })) }));
 });
 
-export { Zoom as default };
+export { Slide as default };

package/Transition/SlideFade.d.ts

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

package/Transition/SlideFade.js

@@ -28,15 +28,16 @@ function getStyle(state, inProp, direction) {
     return style;
 }
 const defaultDuration = {
-    enter: MOTION_DURATION.short,
-    exit: MOTION_DURATION.shorter,
+    enter: MOTION_DURATION.moderate,
+    exit: MOTION_DURATION.moderate,
 };
 const defaultEasing = {
-    enter: MOTION_EASING.decelerated,
-    exit: MOTION_EASING.accelerated,
+    enter: MOTION_EASING.standard,
+    exit: MOTION_EASING.standard,
 };
 /**
  * The react component for `mezzanine` transition slide fade.
+ * @deprecated use Translate instead
  */
 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;

package/Transition/Transition.d.ts

@@ -1,7 +1,7 @@
 import { RefObject, CSSProperties, ReactElement, JSXElementConstructor, Ref } from 'react';
-import { TransitionStatus as TransitionState, TransitionChildren } from 'react-transition-group/Transition';
+import type { TransitionStatus as TransitionState, TransitionChildren } from 'react-transition-group/Transition';
 import { NativeElementTag } from '../utils/jsx-types';
-export { TransitionState };
+export type { TransitionState };
 export type TransitionMode = 'enter' | 'exit';
 export type TransitionDuration = 'auto' | number | {
     [mode in TransitionMode]?: number;

package/Transition/Translate.d.ts

@@ -0,0 +1,14 @@
+import { TransitionImplementationProps } from './Transition';
+export type TranslateFrom = 'top' | 'bottom' | 'left' | 'right';
+export interface TranslateProps extends TransitionImplementationProps {
+    /**
+     * The position of child element will enter from.
+     * @default 'top'
+     */
+    from?: TranslateFrom;
+}
+/**
+ * The react component for `mezzanine` transition translate in/out.
+ */
+declare const Translate: import("react").ForwardRefExoticComponent<TranslateProps & import("react").RefAttributes<HTMLElement>>;
+export default Translate;