@rio-cloud/rio-uikit 1.13.1 → 2.0.0-beta.1

package/lib/es/components/numberInput/NumberInput.js

@@ -1,169 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertNonIntegerToDefault = exports.DEFAULT_MAX = exports.DEFAULT_MIN = exports.DEFAULT_STEP = exports.DEFAULT_VALUE = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-const useAfterMount_1 = tslib_1.__importDefault(require("../../hooks/useAfterMount"));
-const DEFAULT_DIGIT_PRECISION = 3;
-exports.DEFAULT_VALUE = 0;
-exports.DEFAULT_STEP = 1;
-exports.DEFAULT_MIN = 0;
-exports.DEFAULT_MAX = Number.MAX_VALUE;
-const validKeys = [
-    '0',
-    '1',
-    '2',
-    '3',
-    '4',
-    '5',
-    '6',
-    '7',
-    '8',
-    '9',
-    '.',
-    ',',
-    '-',
-    'Backspace',
-    'Tab',
-    'ArrowLeft',
-    'ArrowRight',
-    'ArrowDown',
-    'ArrowUp',
-];
-// Note: even if limits are set and input type is number, many browsers allow to enter invalid data
-// like entering characters or values outside the boundaries, hence we have to check the input here
-// See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
-const getValueFromProps = (val, min, max, placeholder, noDefault) => {
-    // Show placeholder or nothing if given instead of 0 if requested for
-    if (val === undefined && (placeholder || noDefault)) {
-        return '';
-    }
-    return clampNumber(Number(val), min, max) || exports.DEFAULT_VALUE;
-};
-const clampNumber = (value, min, max) => {
-    if (value < min) {
-        return min;
-    }
-    if (value > max) {
-        return max;
-    }
-    return value;
-};
-const convertNonIntegerToDefault = (value, fallback) => {
-    return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
-};
-exports.convertNonIntegerToDefault = convertNonIntegerToDefault;
-const isMultipleKeyInput = (key, event, previousKeyRef) => {
-    return event.key === key && previousKeyRef.current.includes(key);
-};
-const isInvalidAfter = (key, possiblePreviousKeys, event, previousKeyRef) => {
-    return event.key === key && possiblePreviousKeys.includes(previousKeyRef.current);
-};
-const NumberInput = (0, react_1.forwardRef)((props, ref) => {
-    const { id, min: propMin, max: propMax, value: propValue, step = exports.DEFAULT_STEP, disabled = false, noDefault = false, onChange, onValueChanged = noop_1.default, onKeyDown = noop_1.default, bsSize = 'md', unit, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', controls, placeholder, digitPrecision = DEFAULT_DIGIT_PRECISION, className = '', ...remainingProps } = props;
-    const previousKeyRef = (0, react_1.useRef)('');
-    const callback = onChange || onValueChanged;
-    const min = (0, exports.convertNonIntegerToDefault)(propMin, exports.DEFAULT_MIN);
-    const max = (0, exports.convertNonIntegerToDefault)(propMax, exports.DEFAULT_MAX);
-    const value = getValueFromProps(propValue, min, max, placeholder, noDefault);
-    // Define local state and define initial values
-    const [state, setState] = (0, react_1.useState)({
-        value,
-        enteredValue: value,
-        isValid: true,
-    });
-    // Update internal value whenever the value prop from outside changes
-    (0, useAfterMount_1.default)(() => {
-        setState({
-            value: getValueFromProps(propValue, min, max, placeholder, noDefault),
-            enteredValue: value,
-            isValid: true,
-        });
-    }, [propValue, min, max, placeholder, noDefault, value]);
-    const applyValue = (newValue) => {
-        if (newValue === '-' || newValue === '') {
-            setState({
-                value: newValue,
-                enteredValue: newValue,
-                isValid: true,
-            });
-            return;
-        }
-        const enteredValue = Number(newValue);
-        const isValid = !isNaN(enteredValue) && enteredValue >= min && enteredValue <= max;
-        const newValidValue = clampNumber(enteredValue, min, max);
-        setState({
-            value: newValidValue,
-            enteredValue,
-            isValid,
-        });
-        // Only call back the caller for valid values
-        isValid && callback(newValidValue);
-    };
-    const handleOnChange = (event) => {
-        applyValue(event.target.value);
-    };
-    // Prevent entering exponent to avoid side effects
-    // See https://bugzilla.mozilla.org/show_bug.cgi?id=1398528
-    // Also preventing letter inputs or multiple consecutive characters
-    // that is possible by Firefox and Safari
-    const handleKeyDown = (event) => {
-        // Allow for key combination like "ctrl + a"
-        if (event.ctrlKey || event.altKey || event.metaKey) {
-            return;
-        }
-        // Check for multiple dots, commas or dashes (consecutive)
-        if (isMultipleKeyInput('.', event, previousKeyRef) ||
-            isMultipleKeyInput(',', event, previousKeyRef) ||
-            isMultipleKeyInput('-', event, previousKeyRef) ||
-            isInvalidAfter(',', ['.', '-'], event, previousKeyRef) ||
-            isInvalidAfter('.', [',', '-'], event, previousKeyRef) ||
-            isInvalidAfter('-', ['.', ','], event, previousKeyRef) ||
-            event.key === 'Process' ||
-            event.key === 'Dead') {
-            event.preventDefault();
-        }
-        // Filter out everything that is not a number
-        if (!validKeys.includes(event.key)) {
-            event.preventDefault();
-        }
-        previousKeyRef.current = event.key;
-        onKeyDown(event);
-    };
-    const handleBlur = () => {
-        // When the value is removed, keep the input empty but trigger the outside callback
-        // since the user has finished his input
-        const lastEnteredValue = state.enteredValue;
-        if (lastEnteredValue === '') {
-            callback();
-            return;
-        }
-        // If there is no value defined and a placeholder is given or the default is not wanted,
-        // keep the input empty
-        if (!state.value && (noDefault || placeholder)) {
-            return;
-        }
-        // Otherwise, validate the input, round it according to digitPrecision,
-        // and clamp the value if the entered value exceeds the limitations
-        const convertedEnteredValue = (0, exports.convertNonIntegerToDefault)(Number(lastEnteredValue), exports.DEFAULT_VALUE);
-        const validNumber = clampNumber(Number(convertedEnteredValue.toFixed(digitPrecision)), min, max);
-        applyValue(validNumber);
-    };
-    const handleWheel = (event) => {
-        const target = event.target;
-        if (target instanceof HTMLInputElement) {
-            target.blur();
-        }
-    };
-    const inputGroupClassNames = (0, classnames_1.default)('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
-    const inputClassNames = (0, classnames_1.default)('form-control', 'no-controls', bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', className);
-    const hasFeedback = errorMessage || warningMessage;
-    const input = ((0, jsx_runtime_1.jsx)("input", { ...remainingProps, id: id, type: 'number', step: step, min: min, max: max, value: state.isValid ? state.value : state.enteredValue, className: inputClassNames, disabled: disabled, onBlur: handleBlur, 
-        // onChange={state.value ? handleOnChange : undefined}
-        onChange: handleOnChange, onKeyDown: handleKeyDown, ref: ref, "aria-label": 'number-input', placeholder: placeholder, onWheel: handleWheel }));
-    return ((0, jsx_runtime_1.jsxs)("div", { className: inputGroupClassNames, children: [inputAddon && ((0, jsx_runtime_1.jsx)("div", { className: 'input-group-addon', children: (0, jsx_runtime_1.jsx)("span", { className: inputAddon }) })), (0, jsx_runtime_1.jsxs)("div", { className: 'form-control-feedback-wrapper', children: [input, hasFeedback && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [errorMessage && (0, jsx_runtime_1.jsx)("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && (0, jsx_runtime_1.jsx)("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' }), (0, jsx_runtime_1.jsx)("span", { className: `help-block white-space-${messageWhiteSpace}`, children: (0, jsx_runtime_1.jsx)("span", { children: errorMessage || warningMessage }) })] }))] }), (unit || controls) && ((0, jsx_runtime_1.jsxs)("div", { className: `input-group-addon ${disabled ? 'disabled pointer-events-none' : ''}`, children: [unit && unit, controls && controls] }))] }));
-});
-exports.default = NumberInput;

package/lib/es/components/onboarding/OnboardingTip.d.ts

@@ -1,147 +0,0 @@
-import React, { type PropsWithChildren, type ReactNode } from 'react';
-import type { Options } from '@popperjs/core';
-import { type TooltipWidth } from '../tooltip/Tooltip';
-import { type TextAlignment } from '../../values/TextAlignment';
-import { type Placement } from '../../values/Placement';
-export type OnboardingButton = {
-    text: string | React.ReactNode;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    iconName?: string;
-};
-type PopperConfig = Partial<Options>;
-export type OnboardingTipProps = {
-    /**
-     * The ID of the DOM element.
-     */
-    id?: string;
-    /**
-     * Indicates whether the onboarding tip is shown.
-     *
-     * @default false
-     */
-    show: boolean;
-    /**
-     * Defines whether to show a close icon.
-     *
-     * @default true
-     */
-    showCloseIcon?: boolean;
-    /**
-     * Define how the text should be aligned.
-     *
-     * Possible values are: `left`, `center` or `right`.
-     *
-     * @default 'left'
-     */
-    textAlignment?: TextAlignment;
-    /**
-     * The tooltip's width.
-     *
-     * Possible values are:
-     * - `auto`
-     * - 100
-     * - 150
-     * - 200
-     * - 250
-     * - 300
-     * - 350
-     * - 400
-     * - 450
-     * - 500
-     */
-    width?: TooltipWidth;
-    /**
-     * Callback function for when the component shall be hidden.
-     *
-     * @default noop
-     */
-    onHide: VoidFunction;
-    /**
-     * Defines whether to have a clickflow journey.
-     *
-     * @default false
-     * @deprecated Please use the "useOnboardingTour" hook instead.
-     */
-    clickflow?: boolean;
-    /**
-     * Adds a button to navigate to the previous onboarding tip when using the click flow onboarding.
-     */
-    previousButton?: OnboardingButton;
-    /**
-     * Adds a button to navigate to the next onboarding tip when using the click flow onboarding.
-     */
-    nextButton?: OnboardingButton;
-    /**
-     * Changes the z-index.
-     *
-     * @default false
-     */
-    useInDialog?: boolean;
-    /**
-     * Additional classes to be set on the wrapper element.
-     */
-    className?: string;
-    /**
-     * The title of the onboarding tip.
-     */
-    title?: string | ReactNode;
-    /**
-     * The content of the onboarding tip.
-     */
-    content?: string | ReactNode;
-    /**
-     * Prevents onboarding tips from being cut off horizontally at screen borders.
-     *
-     * @default true
-     */
-    preventOverflow?: boolean;
-    /**
-     * A Popper.js config object passed to the underlying popper instance.
-     */
-    popperConfig?: PopperConfig;
-    /**
-     * Define how the component should be placed.
-     *
-     * Possible values are:
-     * - `auto-start`
-     * - `auto`
-     * - `auto-end`
-     * - `top-start`
-     * - `top`
-     * - `top-end`
-     * - `right-start`
-     * - `right`
-     * - `right-end`
-     * - `bottom-start`
-     * - `bottom`
-     * - `bottom-end`
-     * - `left-start`
-     * - `left`
-     * - `left-end`
-     *
-     * @default 'bottom'
-     */
-    placement?: Placement;
-};
-declare const OnboardingTip: {
-    (props: PropsWithChildren<OnboardingTipProps>): import("react/jsx-runtime").JSX.Element;
-    AUTO_START: "auto-start";
-    AUTO: "auto";
-    AUTO_END: "auto-end";
-    TOP_START: "top-start";
-    TOP: "top";
-    TOP_END: "top-end";
-    BOTTOM_START: "bottom-start";
-    BOTTOM: "bottom";
-    BOTTOM_END: "bottom-end";
-    RIGHT_START: "right-start";
-    RIGHT: "right";
-    RIGHT_END: "right-end";
-    LEFT_START: "left-start";
-    LEFT: "left";
-    LEFT_END: "left-end";
-    TEXT_ALIGNMENT_LEFT: "left";
-    TEXT_ALIGNMENT_CENTER: "center";
-    TEXT_ALIGNMENT_RIGHT: "right";
-};
-export default OnboardingTip;

package/lib/es/components/onboarding/OnboardingTip.js

@@ -1,51 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
-const Button_1 = tslib_1.__importDefault(require("../button/Button"));
-const OverlayTrigger_1 = tslib_1.__importDefault(require("../overlay/OverlayTrigger"));
-const Tooltip_1 = tslib_1.__importDefault(require("../tooltip/Tooltip"));
-const TextAlignment_1 = require("../../values/TextAlignment");
-const Placement_1 = require("../../values/Placement");
-const OnboardingTip = (props) => {
-    const { id, show = false, placement = Placement_1.PLACEMENT.BOTTOM, title, content, onHide = noop_1.default, children, textAlignment = TextAlignment_1.TEXT_ALIGNMENT.LEFT, useInDialog = false, showCloseIcon = true, clickflow = false, previousButton, nextButton, className = '', width, preventOverflow = true, popperConfig, } = props;
-    // DEPRECATED in favor of driver.js - see useOnboardingTour hook
-    const clickFlowWithButtons = ((0, jsx_runtime_1.jsxs)("div", { className: 'display-flex flex-column gap-25', children: [(0, jsx_runtime_1.jsx)("div", { children: content }), (0, jsx_runtime_1.jsxs)("div", { className: `btn-toolbar justify-content-between ${showCloseIcon ? 'margin-right--25' : ''}`, children: [previousButton ? ((0, jsx_runtime_1.jsxs)("div", { className: 'position-relative', children: [(0, jsx_runtime_1.jsx)("div", { className: 'bg-black opacity-10 rounded display-absolute inset-0' }), (0, jsx_runtime_1.jsxs)(Button_1.default, { bsStyle: Button_1.default.SECONDARY, variant: Button_1.default.VARIANT_OUTLINE, className: 'border-none text-color-white', onClick: previousButton.onClick, children: [previousButton.iconName && ((0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${previousButton.iconName} text-color-white` })), (0, jsx_runtime_1.jsx)("span", { children: previousButton.text })] })] })) : ((0, jsx_runtime_1.jsx)("div", {})), nextButton ? ((0, jsx_runtime_1.jsxs)(Button_1.default, { bsStyle: Button_1.default.SECONDARY, variant: Button_1.default.VARIANT_OUTLINE, className: 'border-color-white text-color-white', onClick: nextButton.onClick, iconRight: true, children: [(0, jsx_runtime_1.jsx)("span", { children: nextButton.text }), nextButton.iconName && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${nextButton.iconName} text-color-white` })] })) : ((0, jsx_runtime_1.jsx)("div", {}))] })] }));
-    const tooltipWrapperClasses = (0, classnames_1.default)(useInDialog && 'z-index-max', className && className, clickflow && 'onboarding-clickflow');
-    const overlay = ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { className: tooltipWrapperClasses, tooltipStyle: Tooltip_1.default.STYLE_ONBOARDING, id: id, onClick: onHide, width: width, textAlignment: textAlignment, allowOnTouch: true, children: (0, jsx_runtime_1.jsxs)("div", { className: 'display-flex', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'display-flex flex-column flex-1-1', children: [title && (0, jsx_runtime_1.jsx)("div", { className: 'tooltip-title', children: title }), content && (0, jsx_runtime_1.jsx)("div", { className: 'tooltip-content', children: clickflow ? clickFlowWithButtons : content })] }), showCloseIcon && (0, jsx_runtime_1.jsx)("span", { className: 'tooltip-close rioglyph rioglyph-remove' })] }) }));
-    const actualPopperConfig = popperConfig || {
-        strategy: 'fixed',
-        modifiers: [
-            {
-                name: 'preventOverflow',
-                // Popper.js default is false but we enable it by default
-                options: { altAxis: preventOverflow },
-            },
-            // Use an arrow modifier, the arrow ref will be injected in OverlayTrigger with the right props
-            { name: 'arrow', options: {} },
-        ],
-    };
-    const trigger = ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, { placement: placement, trigger: 'click', overlay: overlay, onToggle: onHide, show: show, rootClose: false, popperConfig: actualPopperConfig, children: children }));
-    return show ? trigger : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
-};
-OnboardingTip.AUTO_START = Placement_1.PLACEMENT.AUTO_START;
-OnboardingTip.AUTO = Placement_1.PLACEMENT.AUTO;
-OnboardingTip.AUTO_END = Placement_1.PLACEMENT.AUTO_END;
-OnboardingTip.TOP_START = Placement_1.PLACEMENT.TOP_START;
-OnboardingTip.TOP = Placement_1.PLACEMENT.TOP;
-OnboardingTip.TOP_END = Placement_1.PLACEMENT.TOP_END;
-OnboardingTip.BOTTOM_START = Placement_1.PLACEMENT.BOTTOM_START;
-OnboardingTip.BOTTOM = Placement_1.PLACEMENT.BOTTOM;
-OnboardingTip.BOTTOM_END = Placement_1.PLACEMENT.BOTTOM_END;
-OnboardingTip.RIGHT_START = Placement_1.PLACEMENT.RIGHT_START;
-OnboardingTip.RIGHT = Placement_1.PLACEMENT.RIGHT;
-OnboardingTip.RIGHT_END = Placement_1.PLACEMENT.RIGHT_END;
-OnboardingTip.LEFT_START = Placement_1.PLACEMENT.LEFT_START;
-OnboardingTip.LEFT = Placement_1.PLACEMENT.LEFT;
-OnboardingTip.LEFT_END = Placement_1.PLACEMENT.LEFT_END;
-OnboardingTip.TEXT_ALIGNMENT_LEFT = TextAlignment_1.TEXT_ALIGNMENT.LEFT;
-OnboardingTip.TEXT_ALIGNMENT_CENTER = TextAlignment_1.TEXT_ALIGNMENT.CENTER;
-OnboardingTip.TEXT_ALIGNMENT_RIGHT = TextAlignment_1.TEXT_ALIGNMENT.RIGHT;
-exports.default = OnboardingTip;

package/lib/es/components/overlay/OverlayTrigger.d.ts

@@ -1,114 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import type { Options } from '@popperjs/core';
-import { type Placement } from '../../values/Placement';
-import { type TriggerType } from '../../values/Trigger';
-type PopperConfig = Partial<Options>;
-export type OverlayTriggerProps = {
-    /**
-     * The visibility of the Overlay. `show` is a _controlled_ prop so should be paired
-     * with `onToggle` to avoid breaking user interactions.
-     *
-     * Manually toggling `show` does **not** wait for `delay` to change the visibility.
-     *
-     * @controllable onToggle
-     * @default: false
-     */
-    show?: boolean;
-    /**
-     * The initial visibility state of the Overlay.
-     *
-     * @default false
-     */
-    defaultShow?: boolean;
-    /**
-     * Defines the usage of React Portal.
-     *
-     * @default true
-     */
-    enablePortal?: boolean;
-    /**
-     * Specify which action or actions trigger Overlay visibility
-     *
-     * The `click` trigger ignores the configured `delay`.
-     *
-     * @default 'hover'
-     */
-    trigger?: TriggerType;
-    /**
-     * A millisecond delay amount to show and hide the Overlay once triggered
-     */
-    delay?: number | {
-        show?: number;
-        hide?: number;
-    };
-    /**
-     * An element or text to overlay next to the target.
-     */
-    overlay: React.ReactElement;
-    /**
-     * The placement of the Overlay in relation to it's `target`.
-     *
-     * @default 'top'
-     */
-    placement?: Placement;
-    /**
-     * A Popper.js config object passed to the underlying popper instance.
-     * If no custom config is provided, a default config will be used. This default config
-     * includes an arrow element. In case you want to use a custom config and an arrow, include the arrow
-     * modifier so the correct arrow element can be injected for the arrow modifier.
-     *
-     * @example
-     * popperConfig={{
-     *     modifiers: [
-     *          {
-     *              name: 'offset',
-     *              options: {
-     *                  offset: [0, 5],
-     *              },
-     *          },
-     *          {
-     *              name: 'arrow',
-     *              options: {},
-     *          },
-     *      ],
-     *  }}
-     */
-    popperConfig?: PopperConfig;
-    /**
-     * Specify whether the overlay should trigger onHide when the user clicks outside the overlay.
-     *
-     * @default true
-     */
-    rootClose?: boolean;
-    /**
-     * A callback that fires when the user triggers a change in tooltip visibility.
-     *
-     * `onToggle` is called with the desired next `show`, and generally should be passed
-     * back to the `show` prop. `onToggle` fires _after_ the configured `delay`
-     *
-     * @controllable `show`
-     */
-    onToggle?: (show: boolean) => void;
-};
-declare const OverlayTrigger: {
-    (props: PropsWithChildren<OverlayTriggerProps>): import("react/jsx-runtime").JSX.Element;
-    TRIGGER_CLICK: "click";
-    TRIGGER_HOVER: "hover";
-    TRIGGER_FOCUS: "focus";
-    AUTO_START: "auto-start";
-    AUTO: "auto";
-    AUTO_END: "auto-end";
-    TOP_START: "top-start";
-    TOP: "top";
-    TOP_END: "top-end";
-    RIGHT_START: "right-start";
-    RIGHT: "right";
-    RIGHT_END: "right-end";
-    BOTTOM_START: "bottom-start";
-    BOTTOM: "bottom";
-    BOTTOM_END: "bottom-end";
-    LEFT_START: "left-start";
-    LEFT: "left";
-    LEFT_END: "left-end";
-};
-export default OverlayTrigger;

package/lib/es/components/overlay/OverlayTrigger.js

@@ -1,183 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
-const react_1 = tslib_1.__importStar(require("react"));
-const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
-const react_popper_1 = require("react-popper");
-const Placement_1 = require("../../values/Placement");
-const Trigger_1 = require("../../values/Trigger");
-const mergeRefs_1 = tslib_1.__importDefault(require("../../utils/mergeRefs"));
-const useClickOutside_1 = require("../../hooks/useClickOutside");
-const useTimeout_1 = require("../../hooks/useTimeout");
-const useUncontrollable_1 = require("../../hooks/useUncontrollable");
-const OverlayTrigger = (props) => {
-    const { show: propsShow, defaultShow = false, enablePortal = true, trigger = Trigger_1.TRIGGER.HOVER, delay, overlay, placement = 'top', popperConfig, onToggle = () => { }, rootClose = true, children, } = props;
-    // Use a hook to handle controlled props that work in pairs like in this case the "show"  and "onToggle"
-    // props. It returns a setter function that automatically triggers the callback.
-    const [show, setShow] = (0, useUncontrollable_1.useUncontrolledProp)(propsShow, defaultShow, onToggle);
-    const hoverStateRef = (0, react_1.useRef)('');
-    const timeout = (0, useTimeout_1.useChainedTimeout)();
-    const { onFocus, onBlur, onClick } = typeof children !== 'function' ? react_1.default.Children.only(children).props : {};
-    // Simple implementation of mouseEnter and mouseLeave.
-    // React's built version is broken: https://github.com/facebook/react/issues/4251
-    // for cases when the trigger is disabled and mouseOut/Over can cause flicker
-    // moving from one child element to another.
-    const handleMouseOverOut = (handler, args, relatedNative) => {
-        const [event] = args;
-        const target = event.currentTarget;
-        const related = event.relatedTarget;
-        if ((!related || related !== target) && !target.contains(related)) {
-            handler(...args);
-        }
-    };
-    const handleShow = () => {
-        timeout.clear();
-        hoverStateRef.current = 'show';
-        if (delay === 0 || (typeof delay !== 'number' && !delay?.show)) {
-            setShow(true);
-            return;
-        }
-        timeout.set(() => {
-            if (hoverStateRef.current === 'show') {
-                setShow(true);
-            }
-        }, typeof delay === 'number' ? delay : delay?.show);
-    };
-    const handleHide = () => {
-        timeout.clear();
-        hoverStateRef.current = 'hide';
-        if (typeof delay === 'number' || !delay?.hide) {
-            setShow(false);
-            return;
-        }
-        timeout.set(() => {
-            if (hoverStateRef.current === 'hide') {
-                setShow(false);
-            }
-        }, delay?.hide);
-    };
-    const handleFocus = (0, react_1.useCallback)((...args) => {
-        handleShow();
-        onFocus?.(...args);
-    }, [handleShow, onFocus]);
-    const handleBlur = (0, react_1.useCallback)((...args) => {
-        handleHide();
-        onBlur?.(...args);
-    }, [handleHide, onBlur]);
-    const handleClick = (0, react_1.useCallback)((...args) => {
-        setShow(!show);
-        onClick?.(...args);
-    }, [onClick, setShow, show]);
-    const handleMouseOver = (0, react_1.useCallback)((...args) => {
-        handleMouseOverOut(handleShow, args, 'fromElement');
-    }, [handleShow]);
-    const handleMouseOut = (0, react_1.useCallback)((...args) => {
-        handleMouseOverOut(handleHide, args, 'toElement');
-    }, [handleHide]);
-    const [triggerNode, setTriggerNode] = (0, react_1.useState)(null);
-    const [popperElement, setPopperElement] = (0, react_1.useState)(null);
-    const [arrowElement, setArrowElement] = (0, react_1.useState)(null);
-    const [arrowPlacement, setArrowPlacement] = (0, react_1.useState)(placement);
-    const handleClickOutside = (0, react_1.useCallback)((event) => {
-        const isToggleTarget = triggerNode?.contains(event.target);
-        const isOverlayTarget = popperElement?.contains(event.target);
-        // Check if the click occurred outside the trigger element. Clicking on the trigger
-        // itself is handled by the onClick handler
-        if (show && rootClose && !isToggleTarget && !isOverlayTarget) {
-            handleHide();
-        }
-    }, [triggerNode, popperElement, rootClose, handleHide]);
-    (0, useClickOutside_1.useClickOutsideWithRef)(triggerNode, handleClickOutside);
-    const triggerProps = {
-        ref: (0, mergeRefs_1.default)([children.ref, setTriggerNode]),
-    };
-    if (trigger === 'click') {
-        triggerProps.onClick = handleClick;
-    }
-    else if (trigger === 'focus') {
-        triggerProps.onFocus = handleFocus;
-        triggerProps.onBlur = handleBlur;
-    }
-    else if (trigger === 'hover') {
-        triggerProps.onMouseOver = handleMouseOver;
-        triggerProps.onMouseOut = handleMouseOut;
-    }
-    const defaultPopperConfig = {
-        placement,
-        modifiers: [
-            {
-                name: 'arrow',
-                options: {
-                    element: arrowElement,
-                },
-            },
-            {
-                name: 'flip',
-                options: {
-                    fallbackPlacements: ['right', 'left', 'top'],
-                },
-            },
-        ],
-    };
-    if (popperConfig) {
-        popperConfig.placement = placement;
-        // if it has an arrow modifier, inject the arrow element
-        const updatedModifiers = [];
-        popperConfig.modifiers?.forEach((mod) => {
-            if (mod.name !== 'arrow') {
-                return updatedModifiers.push(mod);
-            }
-            return updatedModifiers.push({
-                ...mod,
-                options: {
-                    ...mod.options,
-                    element: arrowElement,
-                },
-            });
-        });
-        popperConfig.modifiers = updatedModifiers;
-    }
-    const popper = (0, react_popper_1.usePopper)(triggerNode, popperElement, popperConfig || defaultPopperConfig);
-    // In case the overlay causes an overflow and the "flip" modifier
-    // changes the overlays placement, we nee to update the arrow placement as well
-    (0, react_1.useEffect)(() => {
-        if (popper.state) {
-            // Adjust arrow styles based on placement if necessary
-            setArrowPlacement(popper.state.placement);
-        }
-    }, [popper.state?.placement]);
-    const overlayElement = react_1.default.cloneElement(overlay, {
-        ...popper.attributes.popper,
-        ref: setPopperElement,
-        placement: arrowPlacement,
-        style: { ...popper.styles.popper },
-        arrowProps: {
-            ...popper.attributes.arrow,
-            style: popper.styles.arrow,
-            ref: setArrowElement,
-        },
-    });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [show && (enablePortal ? react_dom_1.default.createPortal(overlayElement, document.body) : overlayElement), react_1.default.cloneElement(children, triggerProps)] }));
-};
-OverlayTrigger.TRIGGER_CLICK = Trigger_1.TRIGGER.CLICK;
-OverlayTrigger.TRIGGER_HOVER = Trigger_1.TRIGGER.HOVER;
-OverlayTrigger.TRIGGER_FOCUS = Trigger_1.TRIGGER.FOCUS;
-// placement
-OverlayTrigger.AUTO_START = Placement_1.PLACEMENT.AUTO_START;
-OverlayTrigger.AUTO = Placement_1.PLACEMENT.AUTO;
-OverlayTrigger.AUTO_END = Placement_1.PLACEMENT.AUTO_END;
-OverlayTrigger.TOP_START = Placement_1.PLACEMENT.TOP_START;
-OverlayTrigger.TOP = Placement_1.PLACEMENT.TOP;
-OverlayTrigger.TOP_END = Placement_1.PLACEMENT.TOP_END;
-OverlayTrigger.RIGHT_START = Placement_1.PLACEMENT.RIGHT_START;
-OverlayTrigger.RIGHT = Placement_1.PLACEMENT.RIGHT;
-OverlayTrigger.RIGHT_END = Placement_1.PLACEMENT.RIGHT_END;
-OverlayTrigger.BOTTOM_START = Placement_1.PLACEMENT.BOTTOM_START;
-OverlayTrigger.BOTTOM = Placement_1.PLACEMENT.BOTTOM;
-OverlayTrigger.BOTTOM_END = Placement_1.PLACEMENT.BOTTOM_END;
-OverlayTrigger.LEFT_START = Placement_1.PLACEMENT.LEFT_START;
-OverlayTrigger.LEFT = Placement_1.PLACEMENT.LEFT;
-OverlayTrigger.LEFT_END = Placement_1.PLACEMENT.LEFT_END;
-exports.default = OverlayTrigger;