@rio-cloud/rio-uikit 1.10.1 → 1.12.0

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

@@ -0,0 +1,169 @@
+"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/src/components/onboarding/OnboardingTip.d.ts

@@ -0,0 +1,147 @@
+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/src/components/onboarding/OnboardingTip.js

@@ -0,0 +1,51 @@
+"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/src/components/overlay/OverlayTrigger.d.ts

@@ -0,0 +1,114 @@
+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/src/components/overlay/OverlayTrigger.js

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