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

package/TimePicker/TimePicker.d.ts

@@ -1,19 +1,28 @@
 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'> {
+export interface TimePickerProps extends Omit<TimePickerPanelProps, 'anchor' | 'onChange' | 'open' | 'value'>, Omit<PickerTriggerProps, 'format' | 'inputRef' | 'onChange' | 'onClear' | 'suffix' | 'value'> {
     /**
      * Default value for time picker.
      */
     defaultValue?: DateType;
     /**
      * The format for displaying time.
+     * @default 'HH:mm:ss' or 'HH:mm' based on hideSecond
      */
     format?: string;
+    /**
+     * Change handler. Takes your declared `DateType` as argument.
+     */
+    onChange?: (target?: DateType) => void;
     /**
      * A function that fires when panel toggled. Receive open status in boolean format as props.
      */
     onPanelToggle?: (open: boolean) => void;
+    /**
+     * Current value of time picker.
+     */
+    value?: DateType;
 }
 /**
  * The react component for `mezzanine` time picker.

package/TimePicker/TimePicker.js

@@ -1,6 +1,7 @@
+'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useCallback, useState, useMemo, useRef } from 'react';
 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 { useCalendarContext } from '../Calendar/CalendarContext.js';
@@ -8,18 +9,56 @@ import { usePickerValue } from '../Picker/usePickerValue.js';
 import { usePickerDocumentEventClose } from '../Picker/usePickerDocumentEventClose.js';
 import Icon from '../Icon/Icon.js';
 import PickerTrigger from '../Picker/PickerTrigger.js';
-import { FormControlContext } from '../Form/FormControlContext.js';
 
+/**
+ * Validate if a time value matches the step constraint.
+ */
+function isValidStep(value, step) {
+    if (step <= 1)
+        return true;
+    return value % step === 0;
+}
 /**
  * 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) || {};
+    var _a;
     const { defaultTimeFormat } = useCalendarContext();
-    const { className, clearable = true, 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]);
+    const { className, clearable = true, defaultValue, disabled = false, error = false, fadeProps, fullWidth = false, hideHour, hideMinute, hideSecond, hourStep, inputProps, minuteStep, onChange: onChangeProp, onPanelToggle: onPanelToggleProp, placeholder, popperProps, prefix, readOnly, required = false, secondStep, size, value: valueProp, ...restTriggerProps } = props;
+    // Determine default format based on hideSecond
+    const resolvedFormat = (_a = props.format) !== null && _a !== void 0 ? _a : (hideSecond ? 'HH:mm' : defaultTimeFormat);
+    const { getHour, getMinute, getSecond } = useCalendarContext();
+    /**
+     * Validate time value against step constraints.
+     * Returns true if valid, false if the time doesn't match the step.
+     */
+    const validateTimeStep = useCallback((isoDate) => {
+        const hour = getHour(isoDate);
+        const minute = getMinute(isoDate);
+        const second = getSecond(isoDate);
+        if (!hideHour && hourStep && !isValidStep(hour, hourStep)) {
+            return false;
+        }
+        if (!hideMinute && minuteStep && !isValidStep(minute, minuteStep)) {
+            return false;
+        }
+        if (!hideSecond && secondStep && !isValidStep(second, secondStep)) {
+            return false;
+        }
+        return true;
+    }, [
+        getHour,
+        getMinute,
+        getSecond,
+        hideHour,
+        hideMinute,
+        hideSecond,
+        hourStep,
+        minuteStep,
+        secondStep,
+    ]);
+    const { onBlur: onBlurProp, onKeyDown: onKeyDownProp, onFocus: onFocusProp, ...restInputProp } = inputProps || {};
     /** Panel open control */
     const [open, setOpen] = useState(false);
     const preventOpen = readOnly;
@@ -31,38 +70,43 @@ const TimePicker = forwardRef(function TimePicker(props, ref) {
             }
         }
     }, [onPanelToggleProp, preventOpen]);
-    const onFocus = useCallback((event) => {
-        if (onFocusProp) {
-            onFocusProp(event);
+    const onFocus = useMemo(() => {
+        if (readOnly) {
+            return undefined;
         }
-        onPanelToggle(true);
-    }, [onFocusProp, onPanelToggle]);
+        return (event) => {
+            if (onFocusProp) {
+                onFocusProp(event);
+            }
+            onPanelToggle(true);
+        };
+    }, [onPanelToggle, onFocusProp, readOnly]);
     /** Controlling input value and bind change handler */
     const inputRef = useRef(null);
     const { inputValue, onBlur, onChange, onInputChange, onKeyDown, value: internalValue, } = usePickerValue({
         defaultValue,
-        format,
-        formats,
+        format: resolvedFormat,
         inputRef,
         value: valueProp,
     });
-    /** Panel confirm handler */
-    const onConfirm = useCallback(() => {
-        if (onChangeProp) {
-            onChangeProp(internalValue);
+    /** Bind close control to handlers */
+    const onPanelChange = (val) => {
+        if (val) {
+            onChange(val);
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(val);
         }
-        onPanelToggle(false);
-    }, [internalValue, onChangeProp, onPanelToggle]);
-    /** Bind input props */
-    const onResolvedKeyDown = useCallback((event) => {
+    };
+    const onKeyDownWithCloseControl = useCallback((event) => {
+        onKeyDown(event);
         if (onKeyDownProp) {
             onKeyDownProp(event);
         }
-        onKeyDown(event);
         if (event.key === 'Enter') {
-            onConfirm();
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(internalValue);
+            onPanelToggle(false);
         }
-    }, [onConfirm, onKeyDown, onKeyDownProp]);
+    }, [internalValue, onPanelToggle, onChangeProp, onKeyDown, onKeyDownProp]);
+    /** Resolve input props */
     const onResolvedBlur = useCallback((event) => {
         if (onBlurProp) {
             onBlurProp(event);
@@ -71,33 +115,36 @@ const TimePicker = forwardRef(function TimePicker(props, ref) {
     }, [onBlur, onBlurProp]);
     const resolvedInputProps = {
         ...restInputProp,
-        size: inputSize,
         onFocus,
-        onKeyDown: onResolvedKeyDown,
+        onKeyDown: onKeyDownWithCloseControl,
         onBlur: onResolvedBlur,
     };
     /** Popper positioning */
     const anchorRef = useRef(null);
+    const triggerComposedRef = useComposeRefs([ref, anchorRef]);
     const panelRef = useRef(null);
-    const triggerComposedRef = useComposeRefs([anchorRef, ref]);
+    /** Clear handler */
+    const onClear = useCallback(() => {
+        onChange(undefined);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(undefined);
+    }, [onChange, onChangeProp]);
     /** Blur, click away and key down close */
     const onClose = () => {
         onChange(valueProp);
         onPanelToggle(false);
     };
+    const onChangeClose = () => {
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(internalValue);
+        onPanelToggle(false);
+    };
     usePickerDocumentEventClose({
         open,
         anchorRef,
         popperRef: panelRef,
         lastElementRefInFlow: inputRef,
         onClose,
-        onChangeClose: onClose,
+        onChangeClose,
     });
-    /** 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();
@@ -106,8 +153,12 @@ const TimePicker = forwardRef(function TimePicker(props, ref) {
         }
         onPanelToggle(!open);
     };
-    const suffixActionIcon = jsx(Icon, { icon: ClockIcon, onClick: onIconClick });
-    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 }), 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 })] }));
+    const suffixIcon = (jsx(Icon, { "aria-label": "Open time picker", icon: ClockIcon, onClick: readOnly ? undefined : onIconClick }));
+    return (jsxs(Fragment, { children: [jsx(PickerTrigger, { ...restTriggerProps, ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, format: resolvedFormat, fullWidth: fullWidth, inputProps: resolvedInputProps, inputRef: inputRef, onChange: (e) => {
+                    onInputChange(e);
+                    onPanelChange(e.target.value);
+                    onPanelToggle(true);
+                }, onClear: onClear, onFocus: () => onPanelToggle(true), placeholder: placeholder, prefix: prefix, readOnly: readOnly, required: required, size: size, suffix: suffixIcon, validate: validateTimeStep, value: inputValue }), jsx(TimePickerPanel, { ref: panelRef, anchor: anchorRef, fadeProps: fadeProps, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourStep: hourStep, minuteStep: minuteStep, onChange: onPanelChange, open: open, popperProps: popperProps, secondStep: secondStep, value: internalValue })] }));
 });
 
 export { TimePicker as default };

package/TimePicker/TimePickerPanel.d.ts

@@ -1,8 +1,7 @@
 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'> {
+export interface TimePickerPanelProps extends Pick<TimePanelProps, 'className' | 'hideHour' | 'hideMinute' | 'hideSecond' | 'hourStep' | 'minuteStep' | 'secondStep' | 'style'>, Pick<InputTriggerPopperProps, 'anchor' | 'fadeProps' | 'open'> {
     /**
      * Change Handler. Receive `DateType` as props.
      */

package/TimePicker/TimePickerPanel.js

@@ -7,8 +7,8 @@ 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, { ...popperProps, ref: ref, anchor: anchor, open: open, fadeProps: fadeProps, children: jsx(TimePanel, { ...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 }) }));
+    const { anchor, className, fadeProps, hideHour, hideMinute, hideSecond, hourStep, minuteStep, onChange, open, popperProps, secondStep, style, value, } = props;
+    return (jsx(InputTriggerPopper, { ...popperProps, ref: ref, anchor: anchor, open: open, fadeProps: fadeProps, children: jsx(TimePanel, { className: className, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourStep: hourStep, minuteStep: minuteStep, onChange: onChange, secondStep: secondStep, style: style, value: value }) }));
 });
 
 export { TimePickerPanel as default };

package/TimePicker/index.d.ts

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

package/Toggle/Toggle.d.ts

@@ -0,0 +1,46 @@
+import { ChangeEventHandler } from 'react';
+import { ToggleSize } from '@mezzanine-ui/core/toggle';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface ToggleProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onChange'> {
+    /**
+     * Whether the toggle is checked.
+     */
+    checked?: boolean;
+    /**
+     * Whether the toggle is checked by default.
+     * Only used for uncontrolled.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Whether the toggle is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Since at Mezzanine we use a host element to wrap our input, most derived props will be passed to the host element.
+     * If you need direct control to the input element, use this prop to provide to it.
+     */
+    inputProps?: Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'placeholder' | 'type' | 'value' | `aria-${'disabled' | 'checked'}`>;
+    /**
+     * The label text displayed beside the toggle.
+     */
+    label?: string;
+    /**
+     * Invoked by input change event.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * The size of toggle.
+     * @default 'main'
+     */
+    size?: ToggleSize;
+    /**
+     * Supporting text displayed below the label.
+     */
+    supportingText?: string;
+}
+/**
+ * The react component for `mezzanine` toggle.
+ */
+declare const Toggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Toggle;

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;