@mezzanine-ui/react 0.6.4

package/TimePanel/TimePanelAction.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface TimePanelActionProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
+    /**
+     * Display name of the confirm button.
+     * @default 'OK'
+     */
+    confirmText?: ReactNode;
+    /**
+     * Click handler for the confirm button.
+     */
+    onConfirm?: VoidFunction;
+}
+/**
+ * The react component for `mezzanine` time panel action.
+ */
+declare const TimePanelAction: import("react").ForwardRefExoticComponent<TimePanelActionProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TimePanelAction;

package/TimePanel/TimePanelAction.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { timePanelClasses } from '@mezzanine-ui/core/time-panel';
+import { forwardRef } from 'react';
+import Button from '../Button/Button.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` time panel action.
+ */
+const TimePanelAction = forwardRef(function TimePanelAction(props, ref) {
+    const { className, confirmText = 'OK', onConfirm, ...rest } = props;
+    return (jsx("div", Object.assign({}, rest, { ref: ref, className: cx(timePanelClasses.action, className) }, { children: jsx(Button, Object.assign({ variant: "contained", size: "small", onClick: onConfirm }, { children: confirmText }), void 0) }), void 0));
+});
+
+export default TimePanelAction;

package/TimePanel/TimePanelColumn.d.ts

@@ -0,0 +1,37 @@
+import { TimePanelUnit } from '@mezzanine-ui/core/time-panel';
+import { ReactNode } from 'react';
+export interface TimePanelColumnProps {
+    /**
+     * The active unit of time.
+     */
+    activeUnit?: TimePanelUnit['value'];
+    /**
+     * `cellHeight` controls the scroll positioning. This should meet the value of the computed cell height.
+     */
+    cellHeight?: number;
+    /**
+     * Change handler. Takes `TimePanelUnit` as its argument.
+     */
+    onChange?: (unit: TimePanelUnit) => void;
+    /**
+     * Click handler for the next button.
+     */
+    onNext?: VoidFunction;
+    /**
+     * Click handler for the prev button.
+     */
+    onPrev?: VoidFunction;
+    /**
+     * The prefix of the column.
+     */
+    prefix?: ReactNode;
+    /**
+     * Display units inside the column.
+     */
+    units: TimePanelUnit[];
+}
+/**
+ * The react component for `mezzanine` time panel column.
+ */
+declare const TimePanelColumn: import("react").ForwardRefExoticComponent<TimePanelColumnProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TimePanelColumn;

package/TimePanel/TimePanelColumn.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { timePanelClasses } from '@mezzanine-ui/core/time-panel';
+import { ChevronUpIcon, ChevronDownIcon } from '@mezzanine-ui/icons';
+import { forwardRef, useRef, useEffect } from 'react';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` time panel column.
+ */
+const TimePanelColumn = forwardRef(function TimePanelColumn(props, ref) {
+    const { activeUnit, cellHeight = 32, onChange, onNext, onPrev, prefix, units, } = props;
+    const cellsRef = useRef(null);
+    const getChangeHandler = (unit) => {
+        if (!onChange)
+            return undefined;
+        return () => {
+            onChange(unit);
+        };
+    };
+    const prevetSmoothScrollTo = useRef(true);
+    useEffect(() => {
+        var _a;
+        const activeIndex = units.findIndex(({ value }) => value === activeUnit);
+        (_a = cellsRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+            top: activeIndex * cellHeight,
+            behavior: prevetSmoothScrollTo.current ? 'auto' : 'smooth',
+        });
+        prevetSmoothScrollTo.current = false;
+    }, [activeUnit, cellHeight, units]);
+    return (jsxs("div", Object.assign({ ref: ref, className: timePanelClasses.column }, { children: [prefix && jsx("div", Object.assign({ className: timePanelClasses.columnPrefix }, { children: prefix }), void 0),
+            jsx("button", Object.assign({ type: "button", className: cx(timePanelClasses.button, timePanelClasses.columnControlButton), onClick: onPrev }, { children: jsx(Icon, { icon: ChevronUpIcon }, void 0) }), void 0),
+            jsx("div", Object.assign({ ref: cellsRef, className: timePanelClasses.columnCells }, { children: units.map((unit) => (jsx("button", Object.assign({ type: "button", className: cx(timePanelClasses.button, timePanelClasses.columnButton, {
+                        [timePanelClasses.buttonActive]: unit.value === activeUnit,
+                    }), onClick: getChangeHandler(unit) }, { children: unit.label }), unit.value))) }), void 0),
+            jsx("button", Object.assign({ type: "button", className: cx(timePanelClasses.button, timePanelClasses.columnControlButton), onClick: onNext }, { children: jsx(Icon, { icon: ChevronDownIcon }, void 0) }), void 0)] }), void 0));
+});
+
+export default TimePanelColumn;

package/TimePanel/index.d.ts

@@ -0,0 +1,3 @@
+export { TimePanelActionProps, default as TimePanelAction, } from './TimePanelAction';
+export { TimePanelColumnProps, default as TimePanelColumn, } from './TimePanelColumn';
+export { TimePanelProps, default, } from './TimePanel';

package/TimePanel/index.js

@@ -0,0 +1,3 @@
+export { default as TimePanelAction } from './TimePanelAction.js';
+export { default as TimePanelColumn } from './TimePanelColumn.js';
+export { default } from './TimePanel.js';

package/TimePicker/TimePicker.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { DateType } from '@mezzanine-ui/core/calendar';
+import { PickerTriggerProps } from '../Picker';
+import { TimePickerPanelProps } from './TimePickerPanel';
+export interface TimePickerProps extends Omit<TimePickerPanelProps, 'onConfirm'>, Omit<PickerTriggerProps, 'anchor' | 'defaultValue' | 'inputRef' | 'onChange' | 'onClear' | 'onClick' | 'onIconClick' | 'onKeyDown' | 'open' | 'suffixActionIcon' | 'value'> {
+    /**
+     * Default value for time picker.
+     */
+    defaultValue?: DateType;
+    /**
+     * The format for displaying time.
+     */
+    format?: string;
+    /**
+     * A function that fires when panel toggled. Receive open status in boolean format as props.
+     */
+    onPanelToggle?: (open: boolean) => void;
+}
+/**
+ * The react component for `mezzanine` time picker.
+ * Notice that any component related to time-picker should be used along with `CalendarContext`.
+ */
+declare const TimePicker: import("react").ForwardRefExoticComponent<TimePickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TimePicker;

package/TimePicker/TimePicker.js

@@ -0,0 +1,114 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ClockIcon } from '@mezzanine-ui/icons';
+import { forwardRef, useContext, useMemo, useState, useCallback, useRef } from 'react';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import TimePickerPanel from './TimePickerPanel.js';
+import { FormControlContext } from '../Form/FormControlContext.js';
+import { useCalendarContext } from '../Calendar/CalendarContext.js';
+import { usePickerValue } from '../Picker/usePickerValue.js';
+import { usePickerDocumentEventClose } from '../Picker/usePickerDocumentEventClose.js';
+import Icon from '../Icon/Icon.js';
+import PickerTrigger from '../Picker/PickerTrigger.js';
+
+/**
+ * The react component for `mezzanine` time picker.
+ * Notice that any component related to time-picker should be used along with `CalendarContext`.
+ */
+const TimePicker = forwardRef(function TimePicker(props, ref) {
+    const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
+    const { defaultTimeFormat, } = useCalendarContext();
+    const { className, clearable, confirmText, defaultValue, disabled = disabledFromFormControl, error = severity === 'error' || false, format = defaultTimeFormat, fullWidth = fullWidthFromFormControl, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, inputProps, minutePrefix, minuteStep, onChange: onChangeProp, onPanelToggle: onPanelToggleProp, placeholder, popperProps, prefix, readOnly, required = requiredFromFormControl, secondPrefix, secondStep, size: sizeProp, value: valueProp, } = props;
+    const { onBlur: onBlurProp, onKeyDown: onKeyDownProp, onFocus: onFocusProp, size: inputSize = format.length + 2, ...restInputProp } = inputProps || {};
+    const formats = useMemo(() => [format], [format]);
+    /** Panel open control */
+    const [open, setOpen] = useState(false);
+    const preventOpen = readOnly;
+    const onPanelToggle = useCallback((nextOpen) => {
+        if (!preventOpen) {
+            setOpen(nextOpen);
+            if (onPanelToggleProp) {
+                onPanelToggleProp(nextOpen);
+            }
+        }
+    }, [onPanelToggleProp, preventOpen]);
+    const onFocus = useCallback((event) => {
+        if (onFocusProp) {
+            onFocusProp(event);
+        }
+        onPanelToggle(true);
+    }, [onFocusProp, onPanelToggle]);
+    /** Controlling input value and bind change handler */
+    const inputRef = useRef(null);
+    const { inputValue, onBlur, onChange, onInputChange, onKeyDown, value: internalValue, } = usePickerValue({
+        defaultValue,
+        format,
+        formats,
+        inputRef,
+        value: valueProp,
+    });
+    /** Panel confirm handler */
+    const onConfirm = useCallback(() => {
+        if (onChangeProp) {
+            onChangeProp(internalValue);
+        }
+        onPanelToggle(false);
+    }, [internalValue, onChangeProp, onPanelToggle]);
+    /** Bind input props */
+    const onResolvedKeyDown = useCallback((event) => {
+        if (onKeyDownProp) {
+            onKeyDownProp(event);
+        }
+        onKeyDown(event);
+        if (event.key === 'Enter') {
+            onConfirm();
+        }
+    }, [onConfirm, onKeyDown, onKeyDownProp]);
+    const onResolvedBlur = useCallback((event) => {
+        if (onBlurProp) {
+            onBlurProp(event);
+        }
+        onBlur(event);
+    }, [onBlur, onBlurProp]);
+    const resolvedInputProps = {
+        ...restInputProp,
+        size: inputSize,
+        onFocus,
+        onKeyDown: onResolvedKeyDown,
+        onBlur: onResolvedBlur,
+    };
+    /** Popper positioning */
+    const anchorRef = useRef(null);
+    const panelRef = useRef(null);
+    const triggerComposedRef = useComposeRefs([anchorRef, ref]);
+    /** Blur, click away and key down close */
+    const onClose = () => {
+        onChange(valueProp);
+        onPanelToggle(false);
+    };
+    usePickerDocumentEventClose({
+        open,
+        anchorRef,
+        popperRef: panelRef,
+        lastElementRefInFlow: inputRef,
+        onClose,
+        onChangeClose: onClose,
+    });
+    /** Bind on change to on clear */
+    const onClear = () => {
+        onChange(undefined);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(undefined);
+    };
+    /** Icon */
+    const onIconClick = (e) => {
+        e.stopPropagation();
+        if (open) {
+            onChange(valueProp);
+        }
+        onPanelToggle(!open);
+    };
+    const suffixActionIcon = (jsx(Icon, { icon: ClockIcon, onClick: onIconClick }, void 0));
+    return (jsxs(Fragment, { children: [jsx(PickerTrigger, { ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputProps: resolvedInputProps, inputRef: inputRef, onChange: onInputChange, onClear: onClear, placeholder: placeholder, prefix: prefix, readOnly: readOnly, required: required, size: sizeProp, suffixActionIcon: suffixActionIcon, value: inputValue }, void 0),
+            jsx(TimePickerPanel, { ref: panelRef, anchor: anchorRef, confirmText: confirmText, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourPrefix: hourPrefix, hourStep: hourStep, minutePrefix: minutePrefix, minuteStep: minuteStep, onChange: onChange, onConfirm: onConfirm, open: open, popperProps: popperProps, secondPrefix: secondPrefix, secondStep: secondStep, value: internalValue }, void 0)] }, void 0));
+});
+
+export default TimePicker;

package/TimePicker/TimePickerPanel.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { DateType } from '@mezzanine-ui/core/calendar';
+import { TimePanelProps } from '../TimePanel';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { InputTriggerPopperProps } from '../_internal/InputTriggerPopper';
+export interface TimePickerPanelProps extends Omit<TimePanelProps, Exclude<keyof NativeElementPropsWithoutKeyAndRef<'div'>, 'className' | 'style' | 'id'> | 'withoutAction' | 'onChange' | 'value'>, Pick<InputTriggerPopperProps, 'anchor' | 'fadeProps' | 'open'> {
+    /**
+     * Change Handler. Receive `DateType` as props.
+     */
+    onChange?: (value?: DateType) => void;
+    /**
+     * Other props you may provide to `Popper` component
+     */
+    popperProps?: Omit<InputTriggerPopperProps, 'anchor' | 'children' | 'fadeProps' | 'open'>;
+    /**
+     * Display value of the panel.
+     */
+    value?: DateType;
+}
+/**
+ * The react component for `mezzanine` time picker panel.
+ */
+declare const TimePickerPanel: import("react").ForwardRefExoticComponent<TimePickerPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TimePickerPanel;

package/TimePicker/TimePickerPanel.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import InputTriggerPopper from '../_internal/InputTriggerPopper/InputTriggerPopper.js';
+import TimePanel from '../TimePanel/TimePanel.js';
+
+/**
+ * The react component for `mezzanine` time picker panel.
+ */
+const TimePickerPanel = forwardRef(function TimePickerPanel(props, ref) {
+    const { anchor, confirmText, fadeProps, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, minutePrefix, minuteStep, onChange, onConfirm, open, popperProps, secondPrefix, secondStep, value, ...restHostProps } = props;
+    return (jsx(InputTriggerPopper, Object.assign({}, popperProps, { ref: ref, anchor: anchor, open: open, fadeProps: fadeProps }, { children: jsx(TimePanel, Object.assign({}, restHostProps, { hideHour: hideHour, hourStep: hourStep, hideMinute: hideMinute, minuteStep: minuteStep, hideSecond: hideSecond, secondStep: secondStep, hourPrefix: hourPrefix, minutePrefix: minutePrefix, secondPrefix: secondPrefix, onChange: onChange, value: value, onConfirm: onConfirm, confirmText: confirmText }), void 0) }), void 0));
+});
+
+export default TimePickerPanel;

package/TimePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { TimePickerPanelProps, default as TimePickerPanel, } from './TimePickerPanel';
+export { TimePickerProps, default, } from './TimePicker';

package/TimePicker/index.js

@@ -0,0 +1,2 @@
+export { default as TimePickerPanel } from './TimePickerPanel.js';
+export { default } from './TimePicker.js';

package/Tooltip/Tooltip.d.ts

@@ -0,0 +1,25 @@
+import { ReactElement, MouseEventHandler } from 'react';
+import { PopperProps } from '../Popper';
+export interface TooltipProps extends PopperProps {
+    /**
+     * child function that can receive events
+     */
+    children(opt: {
+        onMouseEnter: MouseEventHandler;
+        onMouseLeave: MouseEventHandler;
+    }): ReactElement;
+    /**
+     * delay time to hide when mouse leave. unit: s.
+     * @default 0.1
+     */
+    mouseLeaveDelay?: number;
+    /**
+     * title of tooltip
+    */
+    title?: string;
+}
+/**
+ * The react component for `mezzanine` tooltip.
+ */
+declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Tooltip;

package/Tooltip/Tooltip.js

@@ -0,0 +1,37 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { tooltipClasses } from '@mezzanine-ui/core/tooltip';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import { useDelayMouseEnterLeave } from './useDelayMouseEnterLeave.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 tooltipRef = useRef(null);
+    const composedRef = useComposeRefs([ref, tooltipRef]);
+    const { anchor, onLeave, onPopperEnter, onTargetEnter, visible, } = useDelayMouseEnterLeave({
+        mouseLeaveDelay,
+    });
+    /** tooltip shown only when title existed && visible is true */
+    const isTooltipVisible = open || (visible && Boolean(title));
+    return (jsxs(Fragment, { children: [jsx(Popper, Object.assign({}, rest, { ref: composedRef, anchor: anchorProp || anchor, className: cx(tooltipClasses.host, className), onMouseEnter: onPopperEnter, onMouseLeave: onLeave, open: isTooltipVisible, options: {
+                    ...options,
+                    modifiers: [...modifiers, offsetModifier],
+                } }, { children: title }), void 0), typeof children === 'function' && children({
+                onMouseEnter: onTargetEnter,
+                onMouseLeave: onLeave,
+            })] }, void 0));
+});
+
+export default Tooltip;

package/Tooltip/index.d.ts

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

package/Tooltip/index.js

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

package/Tooltip/useDelayMouseEnterLeave.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+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;
+    visible: boolean;
+}
+export declare function useDelayMouseEnterLeave(opt: UseDelayMouseEnterLeave): DelayMouseEnterLeave;

package/Tooltip/useDelayMouseEnterLeave.js

@@ -0,0 +1,41 @@
+import { useState, 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;
+    const clearVisibilityDelayTimeout = useCallback(() => {
+        if (timer) {
+            clearTimeout(timer);
+        }
+    }, []);
+    const onLeave = useCallback(() => {
+        timer = setTimeout(() => {
+            setVisible(false);
+            clearVisibilityDelayTimeout();
+        }, mouseLeaveDelay * 1000);
+    }, [mouseLeaveDelay]);
+    const onPopperEnter = useCallback(() => {
+        clearVisibilityDelayTimeout();
+        setVisible(true);
+    }, []);
+    const onTargetEnter = useCallback((event) => {
+        event.stopPropagation();
+        setAnchor(event.currentTarget);
+        clearVisibilityDelayTimeout();
+        setVisible(true);
+    }, []);
+    return {
+        anchor,
+        onLeave,
+        onPopperEnter,
+        onTargetEnter,
+        visible,
+    };
+}
+
+export { useDelayMouseEnterLeave };

package/Transition/Collapse.d.ts

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

package/Transition/Collapse.js

@@ -0,0 +1,107 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } 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 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);
+            }
+        },
+    };
+    return (jsx(Transition, Object.assign({}, transitionProps, { children: (state) => (jsx("div", Object.assign({}, rest, { ref: composedNodeRef, style: {
+                ...getStyle(state, inProp, collapsedHeight),
+                ...style,
+            } }, { children: jsx("div", Object.assign({ ref: wrapperRef, style: { display: 'flex', width: '100%' } }, { children: jsx("div", Object.assign({ style: { width: '100%' } }, { children: children }), void 0) }), void 0) }), void 0)) }), void 0));
+});
+
+export default Collapse;

package/Transition/Fade.d.ts

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

package/Transition/Fade.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 = {
+        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, Object.assign({}, transitionProps, { children: children && ((state) => cloneElement(children, {
+            ...children.props,
+            ref: composedNodeRef,
+            style: {
+                ...getStyle(state, inProp),
+                ...children.props.style,
+            },
+        })) }), void 0));
+});
+
+export default Fade;