@mezzanine-ui/react 0.13.10 → 0.13.11

package/TimePanel/TimePanelColumn.js

@@ -5,34 +5,34 @@ 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(() => {
-        const activeIndex = units.findIndex(({ value }) => value === activeUnit);
-        if (cellsRef.current) {
-            cellsRef.current.scrollTo({
-                top: activeIndex * cellHeight,
-                behavior: prevetSmoothScrollTo.current ? 'auto' : 'smooth',
-            });
-        }
-        prevetSmoothScrollTo.current = false;
-    }, [activeUnit, cellHeight, units]);
-    return (jsxs("div", { ref: ref, className: timePanelClasses.column, children: [prefix && jsx("div", { className: timePanelClasses.columnPrefix, children: prefix }), jsx("button", { type: "button", className: cx(timePanelClasses.button, timePanelClasses.columnControlButton), onClick: onPrev, children: jsx(Icon, { icon: ChevronUpIcon }) }), jsx("div", { ref: cellsRef, className: timePanelClasses.columnCells, children: units.map((unit) => (jsx("button", { type: "button", className: cx(timePanelClasses.button, timePanelClasses.columnButton, {
-                        [timePanelClasses.buttonActive]: unit.value === activeUnit,
-                    }), onClick: getChangeHandler(unit), children: unit.label }, unit.value))) }), jsx("button", { type: "button", className: cx(timePanelClasses.button, timePanelClasses.columnControlButton), onClick: onNext, children: jsx(Icon, { icon: ChevronDownIcon }) })] }));
-});
+/**
+ * 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(() => {
+        const activeIndex = units.findIndex(({ value }) => value === activeUnit);
+        if (cellsRef.current) {
+            cellsRef.current.scrollTo({
+                top: activeIndex * cellHeight,
+                behavior: prevetSmoothScrollTo.current ? 'auto' : 'smooth',
+            });
+        }
+        prevetSmoothScrollTo.current = false;
+    }, [activeUnit, cellHeight, units]);
+    return (jsxs("div", { ref: ref, className: timePanelClasses.column, children: [prefix && jsx("div", { className: timePanelClasses.columnPrefix, children: prefix }), jsx("button", { type: "button", className: cx(timePanelClasses.button, timePanelClasses.columnControlButton), onClick: onPrev, children: jsx(Icon, { icon: ChevronUpIcon }) }), jsx("div", { ref: cellsRef, className: timePanelClasses.columnCells, children: units.map((unit) => (jsx("button", { type: "button", className: cx(timePanelClasses.button, timePanelClasses.columnButton, {
+                        [timePanelClasses.buttonActive]: unit.value === activeUnit,
+                    }), onClick: getChangeHandler(unit), children: unit.label }, unit.value))) }), jsx("button", { type: "button", className: cx(timePanelClasses.button, timePanelClasses.columnControlButton), onClick: onNext, children: jsx(Icon, { icon: ChevronDownIcon }) })] }));
+});
 var TimePanelColumn$1 = TimePanelColumn;
 
 export { TimePanelColumn$1 as default };

package/TimePanel/index.d.ts

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

package/TimePicker/TimePicker.d.ts

@@ -1,24 +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;
+/// <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

@@ -10,105 +10,105 @@ import Icon from '../Icon/Icon.js';
 import PickerTrigger from '../Picker/PickerTrigger.js';
 import { FormControlContext } from '../Form/FormControlContext.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 = 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]);
-    /** 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 }));
-    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 })] }));
-});
+/**
+ * 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 = 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]);
+    /** 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 }));
+    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 })] }));
+});
 var TimePicker$1 = TimePicker;
 
 export { TimePicker$1 as default };

package/TimePicker/TimePickerPanel.d.ts

@@ -1,24 +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;
+/// <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

@@ -3,13 +3,13 @@ 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, { ...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 }) }));
-});
+/**
+ * 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 }) }));
+});
 var TimePickerPanel$1 = TimePickerPanel;
 
 export { TimePickerPanel$1 as default };

package/TimePicker/index.d.ts

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

package/Tooltip/Tooltip.d.ts

@@ -1,25 +1,25 @@
-import { ReactElement, MouseEventHandler } from 'react';
-import { PopperProps } from '../Popper';
-export interface TooltipProps extends Omit<PopperProps, 'children'> {
-    /**
-     * 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;
+import { ReactElement, MouseEventHandler } from 'react';
+import { PopperProps } from '../Popper';
+export interface TooltipProps extends Omit<PopperProps, 'children'> {
+    /**
+     * 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

@@ -6,33 +6,33 @@ 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, { ...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 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, { ...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,
+            })] }));
+});
 var Tooltip$1 = Tooltip;
 
 export { Tooltip$1 as default };

package/Tooltip/index.d.ts

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

package/Tooltip/useDelayMouseEnterLeave.d.ts

@@ -1,12 +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;
+/// <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

@@ -1,41 +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,
-    };
+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 };