@rio-cloud/rio-uikit 0.16.4-beta.2 → 0.16.4-beta.20

package/components/numberInput/NumberInput.js

@@ -1,126 +1,158 @@
-import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import useAfterMount from '../../hooks/useAfterMount';
-const DEFAULT_DIGIT_PRECISION = 3;
-const DEFAULT_VALUE = 0;
-const DEFAULT_STEP = 1;
-// 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
-export const defaultProps = {
-    min: 0,
-    max: Number.MAX_VALUE,
-    step: DEFAULT_STEP,
-};
-const getValueFromProps = (val, min, max, placeholder) => {
-    // Show placeholders if given instead of 0
-    if (val === undefined && placeholder) {
-        return '';
-    }
-    return clampNumber(Number(val), min, max) || DEFAULT_VALUE;
-};
-const clampNumber = (value, min, max) => {
-    if (value < min) {
-        return min;
-    }
-    else if (value > max) {
-        return max;
-    }
-    return value;
-};
-export const convertNonIntegerToDefault = value => {
-    let currentValue = value;
-    if (!Number.isFinite(currentValue)) {
-        currentValue = DEFAULT_VALUE;
-    }
-    return currentValue;
-};
-const NumberInput = React.forwardRef((props, ref) => {
-    const { unit, inputAddon, className, bsSize, disabled, onChange, onValueChanged = () => { }, min: propMin, max: propMax, value: propValue, step = DEFAULT_STEP, digitPrecision = DEFAULT_DIGIT_PRECISION, placeholder } = props, remainingProps = __rest(props, ["unit", "inputAddon", "className", "bsSize", "disabled", "onChange", "onValueChanged", "min", "max", "value", "step", "digitPrecision", "placeholder"]);
-    // Note, "onChange" should replace "onValueChanged" in the future but it's widely used
-    const callback = onChange || onValueChanged;
-    const min = Number.isFinite(propMin) ? propMin : defaultProps.min;
-    const max = Number.isFinite(propMax) ? propMax : defaultProps.max;
-    const value = getValueFromProps(propValue, min, max, placeholder);
-    // Define local state and define initial values
-    const [state, setState] = useState({
-        value,
-        enteredValue: value,
-        isValid: true,
-    });
-    // Update internal value whenever the value prop from outside changes
-    useAfterMount(() => {
-        setState({
-            value: getValueFromProps(propValue, min, max, placeholder),
-            enteredValue: value,
-            isValid: true,
-        });
-    }, [propValue, clampNumber]);
-    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 avoide side effects
-    // See https://bugzilla.mozilla.org/show_bug.cgi?id=1398528
-    const handleKeyDown = event => {
-        if (event.key === 'e' || event.key === 'E') {
-            event.preventDefault();
-        }
-    };
-    const handleBlur = event => {
-        // 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(lastEnteredValue);
-            return;
-        }
-        // Otherwise, validate the input, round it according to digitPrecision,
-        // and clamp the value if the entered value exeeds the limitations
-        const convertedEnteredValue = convertNonIntegerToDefault(Number(lastEnteredValue));
-        const validNumber = clampNumber(Number(convertedEnteredValue).toFixed(digitPrecision), min, max);
-        applyValue(validNumber);
-    };
-    const inputGroupClassNames = classNames('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
-    const inputClassNames = classNames('form-control', 'no-controls', bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', className);
-    const input = (_jsx("input", Object.assign({}, remainingProps, { type: 'number', step: step, min: min, max: max, value: state.isValid ? state.value : state.enteredValue, className: inputClassNames, disabled: disabled, onBlur: handleBlur, onChange: handleOnChange, onKeyDown: handleKeyDown, ref: ref, "aria-label": 'number-input', placeholder: placeholder, onWheel: event => event.target.blur() })));
-    return unit || inputAddon ? (_jsxs("div", Object.assign({ className: inputGroupClassNames }, { children: [inputAddon && (_jsx("span", Object.assign({ className: 'input-group-addon' }, { children: _jsx("span", { className: inputAddon }) }))), input, unit && _jsx("span", Object.assign({ className: 'input-group-addon' }, { children: unit }))] }))) : (input);
-});
-NumberInput.propTypes = {
-    min: PropTypes.number,
-    max: PropTypes.number,
-    value: PropTypes.number,
-    step: PropTypes.number,
-    disabled: PropTypes.bool,
-    onChange: PropTypes.func,
-    onValueChanged: PropTypes.func,
-    bsSize: PropTypes.oneOf(['sm', 'lg', 'small', 'large']),
-    className: PropTypes.string,
-    unit: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    inputAddon: PropTypes.string,
-    digitPrecision: PropTypes.number,
-    placeholder: PropTypes.string,
-};
-export default NumberInput;
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, forwardRef } from 'react';
+import classNames from 'classnames';
+import noop from 'lodash/fp/noop';
+import useAfterMount from '../../hooks/useAfterMount';
+const DEFAULT_DIGIT_PRECISION = 3;
+export const DEFAULT_VALUE = 0;
+export const DEFAULT_STEP = 1;
+export const DEFAULT_MIN = 0;
+export const 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) => {
+    // Show placeholders if given instead of 0
+    if (val === undefined && placeholder) {
+        return '';
+    }
+    return clampNumber(Number(val), min, max) || DEFAULT_VALUE;
+};
+const clampNumber = (value, min, max) => {
+    if (value < min) {
+        return min;
+    }
+    else if (value > max) {
+        return max;
+    }
+    return value;
+};
+export const convertNonIntegerToDefault = (value, fallback) => {
+    return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+};
+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 = forwardRef((props, ref) => {
+    const { id, min: propMin, max: propMax, value: propValue, step = DEFAULT_STEP, disabled = false, onChange, onValueChanged = noop, bsSize = 'md', unit, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', controls, placeholder, digitPrecision = DEFAULT_DIGIT_PRECISION, className = '' } = props, remainingProps = __rest(props, ["id", "min", "max", "value", "step", "disabled", "onChange", "onValueChanged", "bsSize", "unit", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace", "controls", "placeholder", "digitPrecision", "className"]);
+    const previousKeyRef = useRef('');
+    // Note, "onChange" should replace "onValueChanged" in the future but it's widely used
+    const callback = onChange || onValueChanged;
+    const min = convertNonIntegerToDefault(propMin, DEFAULT_MIN);
+    const max = convertNonIntegerToDefault(propMax, DEFAULT_MAX);
+    const value = getValueFromProps(propValue, min, max, placeholder);
+    // Define local state and define initial values
+    const [state, setState] = useState({
+        value,
+        enteredValue: value,
+        isValid: true,
+    });
+    // Update internal value whenever the value prop from outside changes
+    useAfterMount(() => {
+        setState({
+            value: getValueFromProps(propValue, min, max, placeholder),
+            enteredValue: value,
+            isValid: true,
+        });
+    }, [propValue, clampNumber]);
+    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;
+    };
+    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;
+        }
+        // Otherwise, validate the input, round it according to digitPrecision,
+        // and clamp the value if the entered value exceeds the limitations
+        const convertedEnteredValue = convertNonIntegerToDefault(Number(lastEnteredValue), 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 = classNames('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
+    const inputClassNames = classNames('form-control', 'no-controls', bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', className);
+    const hasFeedback = errorMessage || warningMessage;
+    const input = (_jsx("input", Object.assign({}, 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: handleOnChange, onKeyDown: handleKeyDown, ref: ref, "aria-label": 'number-input', placeholder: placeholder, onWheel: handleWheel })));
+    return (_jsxs("div", Object.assign({ className: inputGroupClassNames }, { children: [inputAddon && (_jsx("div", Object.assign({ className: 'input-group-addon' }, { children: _jsx("span", { className: inputAddon }) }))), _jsxs("div", Object.assign({ className: 'form-control-feedback-wrapper' }, { children: [input, hasFeedback && (_jsxs(_Fragment, { children: [errorMessage && _jsx("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && _jsx("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' }), _jsx("span", Object.assign({ className: `help-block white-space-${messageWhiteSpace}` }, { children: _jsx("span", { children: errorMessage || warningMessage }) }))] }))] })), (unit || controls) && (_jsxs("div", Object.assign({ className: `input-group-addon ${disabled ? 'disabled' : ''}` }, { children: [unit && unit, controls && controls] })))] })));
+});
+export default NumberInput;

package/components/onboarding/OnboardingTip.d.ts

@@ -1,63 +1,63 @@
-declare function OnboardingTip(props: any): any;
-declare namespace OnboardingTip {
-    const AUTO_START: "auto-start";
-    const AUTO: "auto";
-    const AUTO_END: "auto-end";
-    const TOP_START: "top-start";
-    const TOP: "top";
-    const TOP_END: "top-end";
-    const BOTTOM_START: "bottom-start";
-    const BOTTOM: "bottom";
-    const BOTTOM_END: "bottom-end";
-    const RIGHT_START: "right-start";
-    const RIGHT: "right";
-    const RIGHT_END: "right-end";
-    const LEFT_START: "left-start";
-    const LEFT: "left";
-    const LEFT_END: "left-end";
-    const TEXT_ALIGNMENT_LEFT: "left";
-    const TEXT_ALIGNMENT_CENTER: "center";
-    const TEXT_ALIGNMENT_RIGHT: "right";
-    namespace defaultProps {
-        export const show: boolean;
-        export function onHide(): void;
-        export const showCloseIcon: boolean;
-        import textAlignment = OnboardingTip.TEXT_ALIGNMENT_LEFT;
-        export { textAlignment };
-        export const useInDialog: boolean;
-        export const className: string;
-        export const clickflow: boolean;
-        import placement = OnboardingTip.BOTTOM;
-        export { placement };
-        export const width: null;
-        export const preventOverflow: boolean;
-    }
-    namespace propTypes {
-        export const id: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        const show_1: PropTypes.Validator<boolean>;
-        export { show_1 as show };
-        const showCloseIcon_1: PropTypes.Requireable<boolean>;
-        export { showCloseIcon_1 as showCloseIcon };
-        const textAlignment_1: PropTypes.Requireable<"right" | "left" | "center">;
-        export { textAlignment_1 as textAlignment };
-        const onHide_1: PropTypes.Validator<(...args: any[]) => any>;
-        export { onHide_1 as onHide };
-        const useInDialog_1: PropTypes.Requireable<boolean>;
-        export { useInDialog_1 as useInDialog };
-        export const title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        export const content: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const clickflow_1: PropTypes.Requireable<boolean>;
-        export { clickflow_1 as clickflow };
-        export { OnboardingTipPlacementType as placement };
-        const width_1: PropTypes.Requireable<string | number>;
-        export { width_1 as width };
-        const preventOverflow_1: PropTypes.Requireable<boolean>;
-        export { preventOverflow_1 as preventOverflow };
-        export const popperConfig: PropTypes.Requireable<object>;
-    }
-}
-export default OnboardingTip;
-export const OnboardingTipPlacementType: PropTypes.Requireable<"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">;
-import PropTypes from "prop-types";
+declare function OnboardingTip(props: any): any;
+declare namespace OnboardingTip {
+    const AUTO_START: "auto-start";
+    const AUTO: "auto";
+    const AUTO_END: "auto-end";
+    const TOP_START: "top-start";
+    const TOP: "top";
+    const TOP_END: "top-end";
+    const BOTTOM_START: "bottom-start";
+    const BOTTOM: "bottom";
+    const BOTTOM_END: "bottom-end";
+    const RIGHT_START: "right-start";
+    const RIGHT: "right";
+    const RIGHT_END: "right-end";
+    const LEFT_START: "left-start";
+    const LEFT: "left";
+    const LEFT_END: "left-end";
+    const TEXT_ALIGNMENT_LEFT: "left";
+    const TEXT_ALIGNMENT_CENTER: "center";
+    const TEXT_ALIGNMENT_RIGHT: "right";
+    namespace defaultProps {
+        export const show: boolean;
+        export function onHide(): void;
+        export const showCloseIcon: boolean;
+        import textAlignment = OnboardingTip.TEXT_ALIGNMENT_LEFT;
+        export { textAlignment };
+        export const useInDialog: boolean;
+        export const className: string;
+        export const clickflow: boolean;
+        import placement = OnboardingTip.BOTTOM;
+        export { placement };
+        export const width: null;
+        export const preventOverflow: boolean;
+    }
+    namespace propTypes {
+        export const id: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        const show_1: PropTypes.Validator<boolean>;
+        export { show_1 as show };
+        const showCloseIcon_1: PropTypes.Requireable<boolean>;
+        export { showCloseIcon_1 as showCloseIcon };
+        const textAlignment_1: PropTypes.Requireable<"right" | "left" | "center">;
+        export { textAlignment_1 as textAlignment };
+        const onHide_1: PropTypes.Validator<(...args: any[]) => any>;
+        export { onHide_1 as onHide };
+        const useInDialog_1: PropTypes.Requireable<boolean>;
+        export { useInDialog_1 as useInDialog };
+        export const title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        export const content: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        const className_1: PropTypes.Requireable<string>;
+        export { className_1 as className };
+        const clickflow_1: PropTypes.Requireable<boolean>;
+        export { clickflow_1 as clickflow };
+        export { OnboardingTipPlacementType as placement };
+        const width_1: PropTypes.Requireable<string | number>;
+        export { width_1 as width };
+        const preventOverflow_1: PropTypes.Requireable<boolean>;
+        export { preventOverflow_1 as preventOverflow };
+        export const popperConfig: PropTypes.Requireable<object>;
+    }
+}
+export default OnboardingTip;
+export const OnboardingTipPlacementType: PropTypes.Requireable<"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">;
+import PropTypes from "prop-types";

package/components/onboarding/OnboardingTip.js

@@ -1,99 +1,99 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import OverlayTrigger from '../overlay/OverlayTrigger';
-import Tooltip from '../tooltip/Tooltip';
-import { TEXT_ALIGNMENT } from '../../values/TextAlignment';
-const DELAY_SHOW = 500;
-const DELAY_HIDE = 300;
-export default function OnboardingTip(props) {
-    const { id, show, placement, title, content, onHide, children, textAlignment, useInDialog, clickflow, 
-    // clickflowBackdrop,
-    showCloseIcon, className, width, preventOverflow, popperConfig, } = props;
-    const tooltipWrapperClasses = classNames(useInDialog && 'z-index-max', className && className, clickflow && 'onboarding-clickflow'
-    // clickflowBackdrop && 'onboarding-clickflow-backdrop'
-    );
-    const overlay = (_jsx(Tooltip, Object.assign({ className: tooltipWrapperClasses, tooltipStyle: Tooltip.STYLE_ONBOARDING, id: id, onClick: onHide, width: width, textAlignment: textAlignment, allowOnTouch: true }, { children: _jsxs("div", Object.assign({ className: 'display-flex' }, { children: [_jsxs("div", Object.assign({ className: 'display-flex flex-column flex-1-1' }, { children: [title && _jsx("div", Object.assign({ className: 'tooltip-title' }, { children: title })), content && _jsx("div", Object.assign({ className: 'tooltip-content' }, { children: content }))] })), showCloseIcon && _jsx("span", { className: 'tooltip-close rioglyph rioglyph-remove' })] })) })));
-    const trigger = (_jsx(OverlayTrigger, Object.assign({ placement: placement, trigger: 'click', overlay: overlay, delayShow: DELAY_SHOW, delayHide: DELAY_HIDE, onToggle: onHide, show: show, rootClose: false, popperConfig: popperConfig || {
-            modifiers: [
-                {
-                    name: 'preventOverflow',
-                    options: {
-                        // Popper.js default is: false but we enable it by default
-                        altAxis: preventOverflow,
-                    },
-                },
-            ],
-        } }, { children: children })));
-    return show ? trigger : children;
-}
-OnboardingTip.AUTO_START = Tooltip.AUTO_START;
-OnboardingTip.AUTO = Tooltip.AUTO;
-OnboardingTip.AUTO_END = Tooltip.AUTO_END;
-OnboardingTip.TOP_START = Tooltip.TOP_START;
-OnboardingTip.TOP = Tooltip.TOP;
-OnboardingTip.TOP_END = Tooltip.TOP_END;
-OnboardingTip.BOTTOM_START = Tooltip.BOTTOM_START;
-OnboardingTip.BOTTOM = Tooltip.BOTTOM;
-OnboardingTip.BOTTOM_END = Tooltip.BOTTOM_END;
-OnboardingTip.RIGHT_START = Tooltip.RIGHT_START;
-OnboardingTip.RIGHT = Tooltip.RIGHT;
-OnboardingTip.RIGHT_END = Tooltip.RIGHT_END;
-OnboardingTip.LEFT_START = Tooltip.LEFT_START;
-OnboardingTip.LEFT = Tooltip.LEFT;
-OnboardingTip.LEFT_END = Tooltip.LEFT_END;
-export const OnboardingTipPlacementType = PropTypes.oneOf([
-    OnboardingTip.AUTO_START,
-    OnboardingTip.AUTO,
-    OnboardingTip.AUTO_END,
-    OnboardingTip.TOP_START,
-    OnboardingTip.TOP,
-    OnboardingTip.TOP_END,
-    OnboardingTip.BOTTOM_START,
-    OnboardingTip.BOTTOM,
-    OnboardingTip.BOTTOM_END,
-    OnboardingTip.RIGHT_START,
-    OnboardingTip.RIGHT,
-    OnboardingTip.RIGHT_END,
-    OnboardingTip.LEFT_START,
-    OnboardingTip.LEFT,
-    OnboardingTip.LEFT_END,
-]);
-OnboardingTip.TEXT_ALIGNMENT_LEFT = TEXT_ALIGNMENT.LEFT;
-OnboardingTip.TEXT_ALIGNMENT_CENTER = TEXT_ALIGNMENT.CENTER;
-OnboardingTip.TEXT_ALIGNMENT_RIGHT = TEXT_ALIGNMENT.RIGHT;
-OnboardingTip.defaultProps = {
-    show: false,
-    onHide: () => { },
-    showCloseIcon: true,
-    textAlignment: OnboardingTip.TEXT_ALIGNMENT_LEFT,
-    useInDialog: false,
-    className: '',
-    clickflow: false,
-    // clickflowBackdrop: false,
-    placement: OnboardingTip.BOTTOM,
-    width: null,
-    preventOverflow: true,
-};
-OnboardingTip.propTypes = {
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    show: PropTypes.bool.isRequired,
-    showCloseIcon: PropTypes.bool,
-    textAlignment: PropTypes.oneOf([
-        OnboardingTip.TEXT_ALIGNMENT_LEFT,
-        OnboardingTip.TEXT_ALIGNMENT_CENTER,
-        OnboardingTip.TEXT_ALIGNMENT_RIGHT,
-    ]),
-    onHide: PropTypes.func.isRequired,
-    useInDialog: PropTypes.bool,
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    className: PropTypes.string,
-    clickflow: PropTypes.bool,
-    // clickflowBackdrop: PropTypes.bool,
-    placement: OnboardingTipPlacementType,
-    width: PropTypes.oneOf(['auto', 100, 150, 200, 250, 300, 350, 400, 450, 500]),
-    preventOverflow: PropTypes.bool,
-    popperConfig: PropTypes.object,
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import OverlayTrigger from '../overlay/OverlayTrigger';
+import Tooltip from '../tooltip/Tooltip';
+import { TEXT_ALIGNMENT } from '../../values/TextAlignment';
+const DELAY_SHOW = 500;
+const DELAY_HIDE = 300;
+export default function OnboardingTip(props) {
+    const { id, show, placement, title, content, onHide, children, textAlignment, useInDialog, clickflow, 
+    // clickflowBackdrop,
+    showCloseIcon, className, width, preventOverflow, popperConfig, } = props;
+    const tooltipWrapperClasses = classNames(useInDialog && 'z-index-max', className && className, clickflow && 'onboarding-clickflow'
+    // clickflowBackdrop && 'onboarding-clickflow-backdrop'
+    );
+    const overlay = (_jsx(Tooltip, Object.assign({ className: tooltipWrapperClasses, tooltipStyle: Tooltip.STYLE_ONBOARDING, id: id, onClick: onHide, width: width, textAlignment: textAlignment, allowOnTouch: true }, { children: _jsxs("div", Object.assign({ className: 'display-flex' }, { children: [_jsxs("div", Object.assign({ className: 'display-flex flex-column flex-1-1' }, { children: [title && _jsx("div", Object.assign({ className: 'tooltip-title' }, { children: title })), content && _jsx("div", Object.assign({ className: 'tooltip-content' }, { children: content }))] })), showCloseIcon && _jsx("span", { className: 'tooltip-close rioglyph rioglyph-remove' })] })) })));
+    const trigger = (_jsx(OverlayTrigger, Object.assign({ placement: placement, trigger: 'click', overlay: overlay, delayShow: DELAY_SHOW, delayHide: DELAY_HIDE, onToggle: onHide, show: show, rootClose: false, popperConfig: popperConfig || {
+            modifiers: [
+                {
+                    name: 'preventOverflow',
+                    options: {
+                        // Popper.js default is: false but we enable it by default
+                        altAxis: preventOverflow,
+                    },
+                },
+            ],
+        } }, { children: children })));
+    return show ? trigger : children;
+}
+OnboardingTip.AUTO_START = Tooltip.AUTO_START;
+OnboardingTip.AUTO = Tooltip.AUTO;
+OnboardingTip.AUTO_END = Tooltip.AUTO_END;
+OnboardingTip.TOP_START = Tooltip.TOP_START;
+OnboardingTip.TOP = Tooltip.TOP;
+OnboardingTip.TOP_END = Tooltip.TOP_END;
+OnboardingTip.BOTTOM_START = Tooltip.BOTTOM_START;
+OnboardingTip.BOTTOM = Tooltip.BOTTOM;
+OnboardingTip.BOTTOM_END = Tooltip.BOTTOM_END;
+OnboardingTip.RIGHT_START = Tooltip.RIGHT_START;
+OnboardingTip.RIGHT = Tooltip.RIGHT;
+OnboardingTip.RIGHT_END = Tooltip.RIGHT_END;
+OnboardingTip.LEFT_START = Tooltip.LEFT_START;
+OnboardingTip.LEFT = Tooltip.LEFT;
+OnboardingTip.LEFT_END = Tooltip.LEFT_END;
+export const OnboardingTipPlacementType = PropTypes.oneOf([
+    OnboardingTip.AUTO_START,
+    OnboardingTip.AUTO,
+    OnboardingTip.AUTO_END,
+    OnboardingTip.TOP_START,
+    OnboardingTip.TOP,
+    OnboardingTip.TOP_END,
+    OnboardingTip.BOTTOM_START,
+    OnboardingTip.BOTTOM,
+    OnboardingTip.BOTTOM_END,
+    OnboardingTip.RIGHT_START,
+    OnboardingTip.RIGHT,
+    OnboardingTip.RIGHT_END,
+    OnboardingTip.LEFT_START,
+    OnboardingTip.LEFT,
+    OnboardingTip.LEFT_END,
+]);
+OnboardingTip.TEXT_ALIGNMENT_LEFT = TEXT_ALIGNMENT.LEFT;
+OnboardingTip.TEXT_ALIGNMENT_CENTER = TEXT_ALIGNMENT.CENTER;
+OnboardingTip.TEXT_ALIGNMENT_RIGHT = TEXT_ALIGNMENT.RIGHT;
+OnboardingTip.defaultProps = {
+    show: false,
+    onHide: () => { },
+    showCloseIcon: true,
+    textAlignment: OnboardingTip.TEXT_ALIGNMENT_LEFT,
+    useInDialog: false,
+    className: '',
+    clickflow: false,
+    // clickflowBackdrop: false,
+    placement: OnboardingTip.BOTTOM,
+    width: null,
+    preventOverflow: true,
+};
+OnboardingTip.propTypes = {
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    show: PropTypes.bool.isRequired,
+    showCloseIcon: PropTypes.bool,
+    textAlignment: PropTypes.oneOf([
+        OnboardingTip.TEXT_ALIGNMENT_LEFT,
+        OnboardingTip.TEXT_ALIGNMENT_CENTER,
+        OnboardingTip.TEXT_ALIGNMENT_RIGHT,
+    ]),
+    onHide: PropTypes.func.isRequired,
+    useInDialog: PropTypes.bool,
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    className: PropTypes.string,
+    clickflow: PropTypes.bool,
+    // clickflowBackdrop: PropTypes.bool,
+    placement: OnboardingTipPlacementType,
+    width: PropTypes.oneOf(['auto', 100, 150, 200, 250, 300, 350, 400, 450, 500]),
+    preventOverflow: PropTypes.bool,
+    popperConfig: PropTypes.object,
+};