@rio-cloud/rio-uikit 2.5.0 → 3.0.0-beta.1

package/components/numberInput/NumberInput.js

@@ -1,148 +1,124 @@
-import { jsx as l, jsxs as b, Fragment as J } from "react/jsx-runtime";
-import { forwardRef as Q, useRef as Y, useState as Z } from "react";
-import { noop as ee } from "es-toolkit/function";
-import x from "../../utils/classNames.js";
-import re from "../../hooks/useAfterMount.js";
-const ne = 3, P = 0, se = 1, te = 0, oe = Number.MAX_VALUE, ae = [
-  "0",
-  "1",
-  "2",
-  "3",
-  "4",
-  "5",
-  "6",
-  "7",
-  "8",
-  "9",
-  ".",
-  ",",
-  "-",
-  "Backspace",
-  "Tab",
-  "ArrowLeft",
-  "ArrowRight",
-  "ArrowDown",
-  "ArrowUp"
-], C = (r, n, s, u, y) => r === void 0 && (u || y) ? "" : M(Number(r), n, s) || P, M = (r, n, s) => r < n ? n : r > s ? s : r, w = (r, n) => typeof r == "number" && Number.isFinite(r) ? r : n, F = (r, n, s) => n.key === r && s.current.includes(r), I = (r, n, s, u) => s.key === r && n.includes(u.current), de = Q((r, n) => {
-  const {
-    id: s,
-    min: u,
-    max: y,
-    value: A,
-    step: S = se,
-    disabled: T = !1,
-    noDefault: d = !1,
-    onChange: V,
-    onKeyDown: R = ee,
-    bsSize: m = "md",
-    unit: f,
-    inputAddon: K,
-    errorMessage: D,
-    warningMessage: E,
-    messageWhiteSpace: v = "normal",
-    controls: g,
-    placeholder: c,
-    digitPrecision: B = ne,
-    className: W = "",
-    ...j
-  } = r, o = Y(""), a = w(u, te), i = w(y, oe), N = C(A, a, i, c, d), [p, k] = Z({
-    value: N,
-    enteredValue: N,
-    isValid: !0
-  });
-  re(() => {
-    k({
-      value: C(A, a, i, c, d),
-      enteredValue: N,
-      isValid: !0
-    });
-  }, [A, a, i, c, d, N]);
-  const L = (e) => {
-    if (e === "-" || e === "") {
-      k({
-        value: e,
-        enteredValue: e,
-        isValid: !0
-      });
-      return;
-    }
-    const t = Number(e), h = !Number.isNaN(t) && t >= a && t <= i, _ = M(t, a, i);
-    k({
-      value: _,
-      enteredValue: t,
-      isValid: h
-    }), h && V && V(_);
-  }, G = (e) => {
-    L(e.target.value);
-  }, O = (e) => {
-    e.ctrlKey || e.altKey || e.metaKey || ((F(".", e, o) || F(",", e, o) || F("-", e, o) || I(",", [".", "-"], e, o) || I(".", [",", "-"], e, o) || I("-", [".", ","], e, o) || e.key === "Process" || e.key === "Dead") && e.preventDefault(), ae.includes(e.key) || e.preventDefault(), o.current = e.key, R(e));
-  }, X = () => {
-    const e = p.enteredValue;
-    if (e === "") {
-      V?.();
-      return;
-    }
-    if (!p.value && (d || c))
-      return;
-    const t = w(Number(e), P), h = M(Number(t.toFixed(B)), a, i);
-    L(h);
-  }, $ = (e) => {
-    const t = e.target;
-    t instanceof HTMLInputElement && t.blur();
-  }, U = D || E, z = x(
-    "input-group",
-    m === "sm" && "input-group-sm",
-    m === "lg" && "input-group-lg"
-  ), H = x(
-    "form-control",
-    "no-controls",
-    m === "sm" && "input-sm",
-    m === "lg" && "input-lg",
-    (f || g) && !U && "padding-right-5",
-    W
-  ), q = /* @__PURE__ */ l(
-    "input",
-    {
-      ...j,
-      id: s,
-      type: "number",
-      step: S,
-      min: a,
-      max: i,
-      value: p.isValid ? p.value : p.enteredValue,
-      className: H,
-      disabled: T,
-      onBlur: X,
-      onChange: G,
-      onKeyDown: O,
-      ref: n,
-      "aria-label": "number-input",
-      placeholder: c,
-      onWheel: $
-    }
-  );
-  return /* @__PURE__ */ b("div", { className: z, children: [
-    K && /* @__PURE__ */ l("div", { className: "input-group-addon", children: /* @__PURE__ */ l("span", { className: K }) }),
-    /* @__PURE__ */ b("div", { className: "form-control-feedback-wrapper", children: [
-      q,
-      U && /* @__PURE__ */ b(J, { children: [
-        D && /* @__PURE__ */ l("span", { className: "form-control-feedback rioglyph rioglyph-error-sign" }),
-        E && /* @__PURE__ */ l("span", { className: "form-control-feedback rioglyph rioglyph-warning-sign" }),
-        /* @__PURE__ */ l("span", { className: `help-block white-space-${v}`, children: /* @__PURE__ */ l("span", { children: D || E }) })
-      ] })
-    ] }),
-    (f || g) && /* @__PURE__ */ b("div", { className: `input-group-addon ${T ? "disabled pointer-events-none" : ""}`, children: [
-      f && f,
-      g && g
-    ] })
-  ] });
+import e from "../../hooks/useAfterMount.js";
+import t from "../../utils/classNames.js";
+import { forwardRef as n, useRef as r, useState as i } from "react";
+import { noop as a } from "es-toolkit/function";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/numberInput/NumberInput.tsx
+var l = 3, u = 0, d = 1, f = 0, p = Number.MAX_VALUE, m = [
+	"0",
+	"1",
+	"2",
+	"3",
+	"4",
+	"5",
+	"6",
+	"7",
+	"8",
+	"9",
+	".",
+	",",
+	"-",
+	"Backspace",
+	"Tab",
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowDown",
+	"ArrowUp"
+], h = (e, t, n, r, i) => e === void 0 && (r || i) ? "" : g(Number(e), t, n) || 0, g = (e, t, n) => e < t ? t : e > n ? n : e, _ = (e, t) => typeof e == "number" && Number.isFinite(e) ? e : t, v = (e, t, n) => t.key === e && n.current.includes(e), y = (e, t, n, r) => n.key === e && t.includes(r.current), b = n((n, u) => {
+	let { id: d, min: f, max: b, value: x, step: S = 1, disabled: C = !1, noDefault: w = !1, onChange: T, onKeyDown: E = a, bsSize: D = "md", unit: O, inputAddon: k, errorMessage: A, warningMessage: j, messageWhiteSpace: M = "normal", controls: N, placeholder: P, digitPrecision: F = l, className: I = "", ...L } = n, R = r(""), z = _(f, 0), B = _(b, p), V = h(x, z, B, P, w), [H, U] = i({
+		value: V,
+		enteredValue: V,
+		isValid: !0
+	});
+	e(() => {
+		U({
+			value: h(x, z, B, P, w),
+			enteredValue: V,
+			isValid: !0
+		});
+	}, [
+		x,
+		z,
+		B,
+		P,
+		w,
+		V
+	]);
+	let W = (e) => {
+		if (e === "-" || e === "") {
+			U({
+				value: e,
+				enteredValue: e,
+				isValid: !0
+			});
+			return;
+		}
+		let t = Number(e), n = !Number.isNaN(t) && t >= z && t <= B, r = g(t, z, B);
+		U({
+			value: r,
+			enteredValue: t,
+			isValid: n
+		}), n && T && T(r);
+	}, G = (e) => {
+		W(e.target.value);
+	}, K = (e) => {
+		e.ctrlKey || e.altKey || e.metaKey || ((v(".", e, R) || v(",", e, R) || v("-", e, R) || y(",", [".", "-"], e, R) || y(".", [",", "-"], e, R) || y("-", [".", ","], e, R) || e.key === "Process" || e.key === "Dead") && e.preventDefault(), m.includes(e.key) || e.preventDefault(), R.current = e.key, E(e));
+	}, q = () => {
+		let e = H.enteredValue;
+		if (e === "") {
+			T?.();
+			return;
+		}
+		if (!H.value && (w || P)) return;
+		let t = _(Number(e), 0), n = g(Number(t.toFixed(F)), z, B);
+		W(n);
+	}, J = (e) => {
+		let t = e.target;
+		t instanceof HTMLInputElement && t.blur();
+	}, Y = A || j, X = t("input-group", D === "sm" && "input-group-sm", D === "lg" && "input-group-lg"), Z = t("form-control", "no-controls", D === "sm" && "input-sm", D === "lg" && "input-lg", !!(O || N) && !Y && "padding-right-5", I), Q = /* @__PURE__ */ s("input", {
+		...L,
+		id: d,
+		type: "number",
+		step: S,
+		min: z,
+		max: B,
+		value: H.isValid ? H.value : H.enteredValue,
+		className: Z,
+		disabled: C,
+		onBlur: q,
+		onChange: G,
+		onKeyDown: K,
+		ref: u,
+		"aria-label": "number-input",
+		placeholder: P,
+		onWheel: J
+	});
+	return /* @__PURE__ */ c("div", {
+		className: X,
+		children: [
+			k && /* @__PURE__ */ s("div", {
+				className: "input-group-addon",
+				children: /* @__PURE__ */ s("span", { className: k })
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "form-control-feedback-wrapper",
+				children: [Q, Y && /* @__PURE__ */ c(o, { children: [
+					A && /* @__PURE__ */ s("span", { className: "form-control-feedback uikit-icon icon-error-sign" }),
+					j && /* @__PURE__ */ s("span", { className: "form-control-feedback uikit-icon icon-warning-sign" }),
+					/* @__PURE__ */ s("span", {
+						className: `help-block white-space-${M}`,
+						children: /* @__PURE__ */ s("span", { children: A || j })
+					})
+				] })]
+			}),
+			(O || N) && /* @__PURE__ */ c("div", {
+				className: `input-group-addon ${C ? "disabled pointer-events-none" : ""}`,
+				children: [O && O, N && N]
+			})
+		]
+	});
 });
-export {
-  oe as DEFAULT_MAX,
-  te as DEFAULT_MIN,
-  se as DEFAULT_STEP,
-  P as DEFAULT_VALUE,
-  w as convertNonIntegerToDefault,
-  de as default
-};
-//# sourceMappingURL=NumberInput.js.map
+//#endregion
+export { p as DEFAULT_MAX, f as DEFAULT_MIN, d as DEFAULT_STEP, u as DEFAULT_VALUE, _ as convertNonIntegerToDefault, b as default };
+
+//# sourceMappingURL=NumberInput.js.map

package/components/numberInput/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","sources":["../../../src/components/numberInput/NumberInput.tsx"],"sourcesContent":["import React, { useState, useRef, forwardRef, type ForwardedRef } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport useAfterMount from '../../hooks/useAfterMount';\n\nconst DEFAULT_DIGIT_PRECISION = 3;\nexport const DEFAULT_VALUE = 0;\nexport const DEFAULT_STEP = 1;\nexport const DEFAULT_MIN = 0;\nexport const DEFAULT_MAX = Number.MAX_VALUE;\n\nconst validKeys = [\n    '0',\n    '1',\n    '2',\n    '3',\n    '4',\n    '5',\n    '6',\n    '7',\n    '8',\n    '9',\n    '.',\n    ',',\n    '-',\n    'Backspace',\n    'Tab',\n    'ArrowLeft',\n    'ArrowRight',\n    'ArrowDown',\n    'ArrowUp',\n];\n\n// Note: even if limits are set and input type is number, many browsers allow to enter invalid data\n// like entering characters or values outside the boundaries, hence we have to check the input here\n// See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number\n\nconst getValueFromProps = (\n    val: number | undefined,\n    min: number,\n    max: number,\n    placeholder: string | undefined,\n    noDefault: boolean\n) => {\n    // Show placeholder or nothing if given instead of 0 if requested for\n    if (val === undefined && (placeholder || noDefault)) {\n        return '';\n    }\n    return clampNumber(Number(val), min, max) || DEFAULT_VALUE;\n};\n\nconst clampNumber = (value: number, min: number, max: number) => {\n    if (value < min) {\n        return min;\n    }\n    if (value > max) {\n        return max;\n    }\n    return value;\n};\n\nexport const convertNonIntegerToDefault = (value: number | undefined, fallback: number) =>\n    typeof value === 'number' && Number.isFinite(value) ? value : fallback;\n\nconst isMultipleKeyInput = (\n    key: string,\n    event: React.KeyboardEvent<HTMLInputElement>,\n    previousKeyRef: React.MutableRefObject<string>\n) => event.key === key && previousKeyRef.current.includes(key);\n\nconst isInvalidAfter = (\n    key: string,\n    possiblePreviousKeys: string[],\n    event: React.KeyboardEvent<HTMLInputElement>,\n    previousKeyRef: React.MutableRefObject<string>\n) => event.key === key && possiblePreviousKeys.includes(previousKeyRef.current);\n\nexport type NumberInputProps = Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'controls'> & {\n    /**\n     * A native input id attribute.\n     *\n     * Passed through as HTML attribute to the input element.\n     */\n    id?: string;\n\n    /**\n     * The minimum value of the input.\n     *\n     * @default 0\n     */\n    min?: number;\n\n    /**\n     * The maximum value of the input.\n     *\n     * @default Number.MAX_VALUE\n     */\n    max?: number;\n\n    /**\n     * The initial value of the input.\n     *\n     * Used to control the component from the outside.\n     *\n     * @default 0\n     */\n    value?: number;\n\n    /**\n     * Lets you omit the default value of \"0\" when the vale is not defined.\n     *\n     * The input will be empty in this case.\n     *\n     * @default false\n     */\n    noDefault?: boolean;\n\n    /**\n     * The size of increment or decrement (only works with number type).\n     *\n     * @default 1\n     */\n    step?: number;\n\n    /**\n     * Enables or disabled the input.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback function triggered when the input value changes.\n     *\n     * When the value is removed by the user, the input is kept empty, but it triggers the callback without any value\n     * since the user has finished his input.\n     *\n     * @param value The new value of the input.\n     */\n    onChange?: (value?: number) => void;\n\n    /**\n     * Callback function that gets triggered after filtering out invalid keystrokes.\n     *\n     * @param event The keyboard event.\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n\n    /**\n     * Defines the size of the input to be rendered.\n     *\n     * @default 'md'\n     */\n    bsSize?: 'sm' | 'md' | 'lg';\n\n    /**\n     * A unit for this value.\n     *\n     * This will be shown in a dedicated input addon.\n     */\n    unit?: string | React.ReactNode;\n\n    /**\n     * A rioglyph icon tio be shown in front of the input.\n     */\n    inputAddon?: string;\n\n    /**\n     * Input error message.\n     */\n    errorMessage?: string | React.ReactNode;\n\n    /**\n     * Input warning message.\n     */\n    warningMessage?: string | React.ReactNode;\n\n    /**\n     * Feedback message width.\n     *\n     * @default 'normal'\n     */\n    messageWhiteSpace?: 'normal' | 'nowrap' | 'pre-line';\n\n    /**\n     * This prop is used by the NumberControl component to pass on the +/- spinner controls.\n     *\n     * @internal\n     */\n    controls?: React.ReactNode;\n\n    /**\n     * The input placeholder if no value is given.\n     */\n    placeholder?: string;\n\n    /**\n     * Number of digits after the comma the value should be fixed to.\n     *\n     * @default 3\n     */\n    digitPrecision?: number;\n\n    /**\n     * Additional classes to be set on the component.\n     */\n    className?: string;\n};\n\nconst NumberInput = forwardRef((props: NumberInputProps, ref: ForwardedRef<HTMLInputElement>) => {\n    const {\n        id,\n        min: propMin,\n        max: propMax,\n        value: propValue,\n        step = DEFAULT_STEP,\n        disabled = false,\n        noDefault = false,\n        onChange,\n        onKeyDown = noop,\n        bsSize = 'md',\n        unit,\n        inputAddon,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace = 'normal',\n        controls,\n        placeholder,\n        digitPrecision = DEFAULT_DIGIT_PRECISION,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const previousKeyRef = useRef<string>('');\n\n    const min = convertNonIntegerToDefault(propMin, DEFAULT_MIN);\n    const max = convertNonIntegerToDefault(propMax, DEFAULT_MAX);\n\n    const value = getValueFromProps(propValue, min, max, placeholder, noDefault);\n\n    // Define local state and define initial values\n    const [state, setState] = useState({\n        value,\n        enteredValue: value,\n        isValid: true,\n    });\n\n    // Update internal value whenever the value prop from outside changes\n    useAfterMount(() => {\n        setState({\n            value: getValueFromProps(propValue, min, max, placeholder, noDefault),\n            enteredValue: value,\n            isValid: true,\n        });\n    }, [propValue, min, max, placeholder, noDefault, value]);\n\n    const applyValue = (newValue: string | number) => {\n        if (newValue === '-' || newValue === '') {\n            setState({\n                value: newValue,\n                enteredValue: newValue,\n                isValid: true,\n            });\n            return;\n        }\n\n        const enteredValue = Number(newValue);\n        const isValid = !Number.isNaN(enteredValue) && enteredValue >= min && enteredValue <= max;\n        const newValidValue = clampNumber(enteredValue, min, max);\n\n        setState({\n            value: newValidValue,\n            enteredValue,\n            isValid,\n        });\n\n        // Only call back the caller for valid values\n        isValid && onChange && onChange(newValidValue);\n    };\n\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        applyValue(event.target.value);\n    };\n\n    // Prevent entering exponent to avoid side effects\n    // See https://bugzilla.mozilla.org/show_bug.cgi?id=1398528\n    // Also preventing letter inputs or multiple consecutive characters\n    // that is possible by Firefox and Safari\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        // Allow for key combination like \"ctrl + a\"\n        if (event.ctrlKey || event.altKey || event.metaKey) {\n            return;\n        }\n\n        // Check for multiple dots, commas or dashes (consecutive)\n        if (\n            isMultipleKeyInput('.', event, previousKeyRef) ||\n            isMultipleKeyInput(',', event, previousKeyRef) ||\n            isMultipleKeyInput('-', event, previousKeyRef) ||\n            isInvalidAfter(',', ['.', '-'], event, previousKeyRef) ||\n            isInvalidAfter('.', [',', '-'], event, previousKeyRef) ||\n            isInvalidAfter('-', ['.', ','], event, previousKeyRef) ||\n            event.key === 'Process' ||\n            event.key === 'Dead'\n        ) {\n            event.preventDefault();\n        }\n\n        // Filter out everything that is not a number\n        if (!validKeys.includes(event.key)) {\n            event.preventDefault();\n        }\n\n        previousKeyRef.current = event.key;\n\n        onKeyDown(event);\n    };\n\n    const handleBlur = () => {\n        // When the value is removed, keep the input empty but trigger the outside callback\n        // since the user has finished his input\n        const lastEnteredValue = state.enteredValue;\n        if (lastEnteredValue === '') {\n            onChange?.();\n            return;\n        }\n\n        // If there is no value defined and a placeholder is given or the default is not wanted,\n        // keep the input empty\n        if (!state.value && (noDefault || placeholder)) {\n            return;\n        }\n\n        // Otherwise, validate the input, round it according to digitPrecision,\n        // and clamp the value if the entered value exceeds the limitations\n        const convertedEnteredValue = convertNonIntegerToDefault(Number(lastEnteredValue), DEFAULT_VALUE);\n        const validNumber = clampNumber(Number(convertedEnteredValue.toFixed(digitPrecision)), min, max);\n        applyValue(validNumber);\n    };\n\n    const handleWheel = (event: React.WheelEvent<HTMLInputElement>) => {\n        const target = event.target;\n        if (target instanceof HTMLInputElement) {\n            target.blur();\n        }\n    };\n\n    const hasFeedback = errorMessage || warningMessage;\n\n    const inputGroupClassNames = classNames(\n        'input-group',\n        bsSize === 'sm' && 'input-group-sm',\n        bsSize === 'lg' && 'input-group-lg'\n    );\n\n    const inputClassNames = classNames(\n        'form-control',\n        'no-controls',\n        bsSize === 'sm' && 'input-sm',\n        bsSize === 'lg' && 'input-lg',\n        (unit || controls) && !hasFeedback && 'padding-right-5',\n        className\n    );\n\n    const input = (\n        <input\n            {...remainingProps}\n            id={id}\n            type='number'\n            step={step}\n            min={min}\n            max={max}\n            value={state.isValid ? state.value : state.enteredValue}\n            className={inputClassNames}\n            disabled={disabled}\n            onBlur={handleBlur}\n            // onChange={state.value ? handleOnChange : undefined}\n            onChange={handleOnChange}\n            onKeyDown={handleKeyDown}\n            ref={ref}\n            aria-label='number-input'\n            placeholder={placeholder}\n            onWheel={handleWheel}\n        />\n    );\n\n    return (\n        <div className={inputGroupClassNames}>\n            {inputAddon && (\n                <div className='input-group-addon'>\n                    <span className={inputAddon} />\n                </div>\n            )}\n            <div className='form-control-feedback-wrapper'>\n                {input}\n                {hasFeedback && (\n                    <>\n                        {errorMessage && <span className='form-control-feedback rioglyph rioglyph-error-sign' />}\n                        {warningMessage && <span className='form-control-feedback rioglyph rioglyph-warning-sign' />}\n                        <span className={`help-block white-space-${messageWhiteSpace}`}>\n                            <span>{errorMessage || warningMessage}</span>\n                        </span>\n                    </>\n                )}\n            </div>\n            {(unit || controls) && (\n                <div className={`input-group-addon ${disabled ? 'disabled pointer-events-none' : ''}`}>\n                    {unit && unit}\n                    {controls && controls}\n                </div>\n            )}\n        </div>\n    );\n});\n\nexport default NumberInput;\n"],"names":["DEFAULT_DIGIT_PRECISION","DEFAULT_VALUE","DEFAULT_STEP","DEFAULT_MIN","DEFAULT_MAX","validKeys","getValueFromProps","val","min","max","placeholder","noDefault","clampNumber","value","convertNonIntegerToDefault","fallback","isMultipleKeyInput","key","event","previousKeyRef","isInvalidAfter","possiblePreviousKeys","NumberInput","forwardRef","props","ref","id","propMin","propMax","propValue","step","disabled","onChange","onKeyDown","noop","bsSize","unit","inputAddon","errorMessage","warningMessage","messageWhiteSpace","controls","digitPrecision","className","remainingProps","useRef","state","setState","useState","useAfterMount","applyValue","newValue","enteredValue","isValid","newValidValue","handleOnChange","handleKeyDown","handleBlur","lastEnteredValue","convertedEnteredValue","validNumber","handleWheel","target","hasFeedback","inputGroupClassNames","classNames","inputClassNames","input","jsx","jsxs","Fragment"],"mappings":"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"}
+{"version":3,"file":"NumberInput.js","names":[],"sources":["../../../src/components/numberInput/NumberInput.tsx"],"sourcesContent":["import React, { useState, useRef, forwardRef, type ForwardedRef } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport useAfterMount from '../../hooks/useAfterMount';\n\nconst DEFAULT_DIGIT_PRECISION = 3;\nexport const DEFAULT_VALUE = 0;\nexport const DEFAULT_STEP = 1;\nexport const DEFAULT_MIN = 0;\nexport const DEFAULT_MAX = Number.MAX_VALUE;\n\nconst validKeys = [\n    '0',\n    '1',\n    '2',\n    '3',\n    '4',\n    '5',\n    '6',\n    '7',\n    '8',\n    '9',\n    '.',\n    ',',\n    '-',\n    'Backspace',\n    'Tab',\n    'ArrowLeft',\n    'ArrowRight',\n    'ArrowDown',\n    'ArrowUp',\n];\n\n// Note: even if limits are set and input type is number, many browsers allow to enter invalid data\n// like entering characters or values outside the boundaries, hence we have to check the input here\n// See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number\n\nconst getValueFromProps = (\n    val: number | undefined,\n    min: number,\n    max: number,\n    placeholder: string | undefined,\n    noDefault: boolean\n) => {\n    // Show placeholder or nothing if given instead of 0 if requested for\n    if (val === undefined && (placeholder || noDefault)) {\n        return '';\n    }\n    return clampNumber(Number(val), min, max) || DEFAULT_VALUE;\n};\n\nconst clampNumber = (value: number, min: number, max: number) => {\n    if (value < min) {\n        return min;\n    }\n    if (value > max) {\n        return max;\n    }\n    return value;\n};\n\nexport const convertNonIntegerToDefault = (value: number | undefined, fallback: number) =>\n    typeof value === 'number' && Number.isFinite(value) ? value : fallback;\n\nconst isMultipleKeyInput = (\n    key: string,\n    event: React.KeyboardEvent<HTMLInputElement>,\n    previousKeyRef: React.MutableRefObject<string>\n) => event.key === key && previousKeyRef.current.includes(key);\n\nconst isInvalidAfter = (\n    key: string,\n    possiblePreviousKeys: string[],\n    event: React.KeyboardEvent<HTMLInputElement>,\n    previousKeyRef: React.MutableRefObject<string>\n) => event.key === key && possiblePreviousKeys.includes(previousKeyRef.current);\n\nexport type NumberInputProps = Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'controls'> & {\n    /**\n     * A native input id attribute.\n     *\n     * Passed through as HTML attribute to the input element.\n     */\n    id?: string;\n\n    /**\n     * The minimum value of the input.\n     *\n     * @default 0\n     */\n    min?: number;\n\n    /**\n     * The maximum value of the input.\n     *\n     * @default Number.MAX_VALUE\n     */\n    max?: number;\n\n    /**\n     * The initial value of the input.\n     *\n     * Used to control the component from the outside.\n     *\n     * @default 0\n     */\n    value?: number;\n\n    /**\n     * Lets you omit the default value of \"0\" when the vale is not defined.\n     *\n     * The input will be empty in this case.\n     *\n     * @default false\n     */\n    noDefault?: boolean;\n\n    /**\n     * The size of increment or decrement (only works with number type).\n     *\n     * @default 1\n     */\n    step?: number;\n\n    /**\n     * Enables or disabled the input.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback function triggered when the input value changes.\n     *\n     * When the value is removed by the user, the input is kept empty, but it triggers the callback without any value\n     * since the user has finished his input.\n     *\n     * @param value The new value of the input.\n     */\n    onChange?: (value?: number) => void;\n\n    /**\n     * Callback function that gets triggered after filtering out invalid keystrokes.\n     *\n     * @param event The keyboard event.\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n\n    /**\n     * Defines the size of the input to be rendered.\n     *\n     * @default 'md'\n     */\n    bsSize?: 'sm' | 'md' | 'lg';\n\n    /**\n     * A unit for this value.\n     *\n     * This will be shown in a dedicated input addon.\n     */\n    unit?: string | React.ReactNode;\n\n    /**\n     * A uikit-icon icon tio be shown in front of the input.\n     */\n    inputAddon?: string;\n\n    /**\n     * Input error message.\n     */\n    errorMessage?: string | React.ReactNode;\n\n    /**\n     * Input warning message.\n     */\n    warningMessage?: string | React.ReactNode;\n\n    /**\n     * Feedback message width.\n     *\n     * @default 'normal'\n     */\n    messageWhiteSpace?: 'normal' | 'nowrap' | 'pre-line';\n\n    /**\n     * This prop is used by the NumberControl component to pass on the +/- spinner controls.\n     *\n     * @internal\n     */\n    controls?: React.ReactNode;\n\n    /**\n     * The input placeholder if no value is given.\n     */\n    placeholder?: string;\n\n    /**\n     * Number of digits after the comma the value should be fixed to.\n     *\n     * @default 3\n     */\n    digitPrecision?: number;\n\n    /**\n     * Additional classes to be set on the component.\n     */\n    className?: string;\n};\n\nconst NumberInput = forwardRef((props: NumberInputProps, ref: ForwardedRef<HTMLInputElement>) => {\n    const {\n        id,\n        min: propMin,\n        max: propMax,\n        value: propValue,\n        step = DEFAULT_STEP,\n        disabled = false,\n        noDefault = false,\n        onChange,\n        onKeyDown = noop,\n        bsSize = 'md',\n        unit,\n        inputAddon,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace = 'normal',\n        controls,\n        placeholder,\n        digitPrecision = DEFAULT_DIGIT_PRECISION,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const previousKeyRef = useRef<string>('');\n\n    const min = convertNonIntegerToDefault(propMin, DEFAULT_MIN);\n    const max = convertNonIntegerToDefault(propMax, DEFAULT_MAX);\n\n    const value = getValueFromProps(propValue, min, max, placeholder, noDefault);\n\n    // Define local state and define initial values\n    const [state, setState] = useState({\n        value,\n        enteredValue: value,\n        isValid: true,\n    });\n\n    // Update internal value whenever the value prop from outside changes\n    useAfterMount(() => {\n        setState({\n            value: getValueFromProps(propValue, min, max, placeholder, noDefault),\n            enteredValue: value,\n            isValid: true,\n        });\n    }, [propValue, min, max, placeholder, noDefault, value]);\n\n    const applyValue = (newValue: string | number) => {\n        if (newValue === '-' || newValue === '') {\n            setState({\n                value: newValue,\n                enteredValue: newValue,\n                isValid: true,\n            });\n            return;\n        }\n\n        const enteredValue = Number(newValue);\n        const isValid = !Number.isNaN(enteredValue) && enteredValue >= min && enteredValue <= max;\n        const newValidValue = clampNumber(enteredValue, min, max);\n\n        setState({\n            value: newValidValue,\n            enteredValue,\n            isValid,\n        });\n\n        // Only call back the caller for valid values\n        isValid && onChange && onChange(newValidValue);\n    };\n\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        applyValue(event.target.value);\n    };\n\n    // Prevent entering exponent to avoid side effects\n    // See https://bugzilla.mozilla.org/show_bug.cgi?id=1398528\n    // Also preventing letter inputs or multiple consecutive characters\n    // that is possible by Firefox and Safari\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        // Allow for key combination like \"ctrl + a\"\n        if (event.ctrlKey || event.altKey || event.metaKey) {\n            return;\n        }\n\n        // Check for multiple dots, commas or dashes (consecutive)\n        if (\n            isMultipleKeyInput('.', event, previousKeyRef) ||\n            isMultipleKeyInput(',', event, previousKeyRef) ||\n            isMultipleKeyInput('-', event, previousKeyRef) ||\n            isInvalidAfter(',', ['.', '-'], event, previousKeyRef) ||\n            isInvalidAfter('.', [',', '-'], event, previousKeyRef) ||\n            isInvalidAfter('-', ['.', ','], event, previousKeyRef) ||\n            event.key === 'Process' ||\n            event.key === 'Dead'\n        ) {\n            event.preventDefault();\n        }\n\n        // Filter out everything that is not a number\n        if (!validKeys.includes(event.key)) {\n            event.preventDefault();\n        }\n\n        previousKeyRef.current = event.key;\n\n        onKeyDown(event);\n    };\n\n    const handleBlur = () => {\n        // When the value is removed, keep the input empty but trigger the outside callback\n        // since the user has finished his input\n        const lastEnteredValue = state.enteredValue;\n        if (lastEnteredValue === '') {\n            onChange?.();\n            return;\n        }\n\n        // If there is no value defined and a placeholder is given or the default is not wanted,\n        // keep the input empty\n        if (!state.value && (noDefault || placeholder)) {\n            return;\n        }\n\n        // Otherwise, validate the input, round it according to digitPrecision,\n        // and clamp the value if the entered value exceeds the limitations\n        const convertedEnteredValue = convertNonIntegerToDefault(Number(lastEnteredValue), DEFAULT_VALUE);\n        const validNumber = clampNumber(Number(convertedEnteredValue.toFixed(digitPrecision)), min, max);\n        applyValue(validNumber);\n    };\n\n    const handleWheel = (event: React.WheelEvent<HTMLInputElement>) => {\n        const target = event.target;\n        if (target instanceof HTMLInputElement) {\n            target.blur();\n        }\n    };\n\n    const hasFeedback = errorMessage || warningMessage;\n\n    const inputGroupClassNames = classNames(\n        'input-group',\n        bsSize === 'sm' && 'input-group-sm',\n        bsSize === 'lg' && 'input-group-lg'\n    );\n\n    const inputClassNames = classNames(\n        'form-control',\n        'no-controls',\n        bsSize === 'sm' && 'input-sm',\n        bsSize === 'lg' && 'input-lg',\n        Boolean(unit || controls) && !hasFeedback && 'padding-right-5',\n        className\n    );\n\n    const input = (\n        <input\n            {...remainingProps}\n            id={id}\n            type='number'\n            step={step}\n            min={min}\n            max={max}\n            value={state.isValid ? state.value : state.enteredValue}\n            className={inputClassNames}\n            disabled={disabled}\n            onBlur={handleBlur}\n            // onChange={state.value ? handleOnChange : undefined}\n            onChange={handleOnChange}\n            onKeyDown={handleKeyDown}\n            ref={ref}\n            aria-label='number-input'\n            placeholder={placeholder}\n            onWheel={handleWheel}\n        />\n    );\n\n    return (\n        <div className={inputGroupClassNames}>\n            {inputAddon && (\n                <div className='input-group-addon'>\n                    <span className={inputAddon} />\n                </div>\n            )}\n            <div className='form-control-feedback-wrapper'>\n                {input}\n                {hasFeedback && (\n                    <>\n                        {errorMessage && <span className='form-control-feedback uikit-icon icon-error-sign' />}\n                        {warningMessage && <span className='form-control-feedback uikit-icon icon-warning-sign' />}\n                        <span className={`help-block white-space-${messageWhiteSpace}`}>\n                            <span>{errorMessage || warningMessage}</span>\n                        </span>\n                    </>\n                )}\n            </div>\n            {(unit || controls) && (\n                <div className={`input-group-addon ${disabled ? 'disabled pointer-events-none' : ''}`}>\n                    {unit && unit}\n                    {controls && controls}\n                </div>\n            )}\n        </div>\n    );\n});\n\nexport default NumberInput;\n"],"mappings":"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"}

package/components/onboarding/OnboardingTip.d.ts

@@ -1,14 +1,13 @@
 import { PropsWithChildren, ReactNode } from 'react';
-import { Options } from '@popperjs/core';
 import { TooltipWidth } from '../tooltip/Tooltip';
 import { TextAlignment } from '../../values/TextAlignment';
 import { Placement } from '../../values/Placement';
+import { IconType } from '../icon/Icon';
 export type OnboardingButton = {
     text: string | React.ReactNode;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    iconName?: string;
+    iconName?: IconType;
 };
-type PopperConfig = Partial<Options>;
 export type OnboardingTipProps = {
     /**
      * The ID of the DOM element.
@@ -85,18 +84,11 @@ export type OnboardingTipProps = {
      * @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`
@@ -116,9 +108,6 @@ export type OnboardingTipProps = {
 };
 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";

package/components/onboarding/OnboardingTip.js

@@ -1,89 +1,46 @@
-import { jsx as e, jsxs as p, Fragment as L } from "react/jsx-runtime";
-import { noop as G } from "es-toolkit/compat";
-import h from "../../utils/classNames.js";
-import x from "../overlay/OverlayTrigger.js";
-import E from "../tooltip/Tooltip.js";
-import { TEXT_ALIGNMENT as t } from "../../values/TextAlignment.js";
-import { PLACEMENT as o } from "../../values/Placement.js";
-const T = (O) => {
-  const {
-    id: c,
-    show: r = !1,
-    placement: m = o.BOTTOM,
-    title: l,
-    content: i,
-    onHide: s = G,
-    children: a,
-    textAlignment: N = t.LEFT,
-    useInDialog: _ = !1,
-    showCloseIcon: A = !0,
-    className: n = "",
-    width: f,
-    preventOverflow: g = !0,
-    popperConfig: R
-  } = O, d = h(_ && "z-index-max", n && n), I = /* @__PURE__ */ e(
-    E,
-    {
-      className: d,
-      tooltipStyle: E.STYLE_ONBOARDING,
-      id: c,
-      onClick: s,
-      width: f,
-      textAlignment: N,
-      allowOnTouch: !0,
-      children: /* @__PURE__ */ p("div", { className: "display-flex", children: [
-        /* @__PURE__ */ p("div", { className: "display-flex flex-column flex-1-1", children: [
-          l && /* @__PURE__ */ e("div", { className: "tooltip-title", children: l }),
-          i && /* @__PURE__ */ e("div", { className: "tooltip-content", children: i })
-        ] }),
-        A && /* @__PURE__ */ e("span", { className: "tooltip-close rioglyph rioglyph-remove" })
-      ] })
-    }
-  );
-  return r ? /* @__PURE__ */ e(
-    x,
-    {
-      placement: m,
-      trigger: "click",
-      overlay: I,
-      onToggle: s,
-      show: r,
-      rootClose: !1,
-      popperConfig: R || {
-        strategy: "fixed",
-        modifiers: [
-          {
-            name: "preventOverflow",
-            // Popper.js default is false but we enable it by default
-            options: { altAxis: g }
-          },
-          // Use an arrow modifier, the arrow ref will be injected in OverlayTrigger with the right props
-          { name: "arrow", options: {} }
-        ]
-      },
-      children: a
-    }
-  ) : /* @__PURE__ */ e(L, { children: a });
+import e from "../../utils/classNames.js";
+import { PLACEMENT as t } from "../../values/Placement.js";
+import { TEXT_ALIGNMENT as n } from "../../values/TextAlignment.js";
+import r from "../tooltip/Tooltip.js";
+import i from "../overlay/OverlayTrigger.js";
+import { noop as a } from "es-toolkit/compat";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/onboarding/OnboardingTip.tsx
+var l = (l) => {
+	let { id: u, show: d = !1, placement: f = t.BOTTOM, title: p, content: m, onHide: h = a, children: g, textAlignment: _ = n.LEFT, useInDialog: v = !1, showCloseIcon: y = !0, className: b = "", width: x } = l, S = /* @__PURE__ */ s(i, {
+		placement: f,
+		trigger: "click",
+		overlay: /* @__PURE__ */ s(r, {
+			className: e(v && "z-index-max", b && b),
+			tooltipStyle: r.STYLE_ONBOARDING,
+			id: u,
+			onClick: h,
+			width: x,
+			textAlignment: _,
+			allowOnTouch: !0,
+			children: /* @__PURE__ */ c("div", {
+				className: "display-flex",
+				children: [/* @__PURE__ */ c("div", {
+					className: "display-flex flex-column flex-1-1",
+					children: [p && /* @__PURE__ */ s("div", {
+						className: "tooltip-title",
+						children: p
+					}), m && /* @__PURE__ */ s("div", {
+						className: "tooltip-content",
+						children: m
+					})]
+				}), y && /* @__PURE__ */ s("span", { className: "tooltip-close uikit-icon icon-remove" })]
+			})
+		}),
+		onToggle: h,
+		show: d,
+		rootClose: !1,
+		children: g
+	});
+	return d ? S : /* @__PURE__ */ s(o, { children: g });
 };
-T.AUTO_START = o.AUTO_START;
-T.AUTO = o.AUTO;
-T.AUTO_END = o.AUTO_END;
-T.TOP_START = o.TOP_START;
-T.TOP = o.TOP;
-T.TOP_END = o.TOP_END;
-T.BOTTOM_START = o.BOTTOM_START;
-T.BOTTOM = o.BOTTOM;
-T.BOTTOM_END = o.BOTTOM_END;
-T.RIGHT_START = o.RIGHT_START;
-T.RIGHT = o.RIGHT;
-T.RIGHT_END = o.RIGHT_END;
-T.LEFT_START = o.LEFT_START;
-T.LEFT = o.LEFT;
-T.LEFT_END = o.LEFT_END;
-T.TEXT_ALIGNMENT_LEFT = t.LEFT;
-T.TEXT_ALIGNMENT_CENTER = t.CENTER;
-T.TEXT_ALIGNMENT_RIGHT = t.RIGHT;
-export {
-  T as default
-};
-//# sourceMappingURL=OnboardingTip.js.map
+l.TOP_START = t.TOP_START, l.TOP = t.TOP, l.TOP_END = t.TOP_END, l.BOTTOM_START = t.BOTTOM_START, l.BOTTOM = t.BOTTOM, l.BOTTOM_END = t.BOTTOM_END, l.RIGHT_START = t.RIGHT_START, l.RIGHT = t.RIGHT, l.RIGHT_END = t.RIGHT_END, l.LEFT_START = t.LEFT_START, l.LEFT = t.LEFT, l.LEFT_END = t.LEFT_END, l.TEXT_ALIGNMENT_LEFT = n.LEFT, l.TEXT_ALIGNMENT_CENTER = n.CENTER, l.TEXT_ALIGNMENT_RIGHT = n.RIGHT;
+//#endregion
+export { l as default };
+
+//# sourceMappingURL=OnboardingTip.js.map

package/components/onboarding/OnboardingTip.js.map

@@ -1 +1 @@
-{"version":3,"file":"OnboardingTip.js","sources":["../../../src/components/onboarding/OnboardingTip.tsx"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react';\nimport { noop } from 'es-toolkit/compat';\nimport type { Options } from '@popperjs/core';\n\nimport classNames from '../../utils/classNames';\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport Tooltip, { type TooltipWidth } from '../tooltip/Tooltip';\nimport { TEXT_ALIGNMENT, type TextAlignment } from '../../values/TextAlignment';\nimport { PLACEMENT, type Placement } from '../../values/Placement';\n\nexport type OnboardingButton = {\n    text: string | React.ReactNode;\n    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    iconName?: string;\n};\n\ntype PopperConfig = Partial<Options>;\n\nexport type OnboardingTipProps = {\n    /**\n     * The ID of the DOM element.\n     */\n    id?: string;\n\n    /**\n     * Indicates whether the onboarding tip is shown.\n     *\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * Defines whether to show a close icon.\n     *\n     * @default true\n     */\n    showCloseIcon?: boolean;\n\n    /**\n     * Define how the text should be aligned.\n     *\n     * Possible values are:\n     *\n     * - `left`\n     * - `center`\n     * - `right`\n     *\n     * @default 'left'\n     */\n    textAlignment?: TextAlignment;\n\n    /**\n     * The tooltip's width.\n     *\n     * Possible values are:\n     *\n     * - `auto`\n     * - `100`\n     * - `150`\n     * - `200`\n     * - `250`\n     * - `300`\n     * - `350`\n     * - `400`\n     * - `450`\n     * - `500`\n     */\n    width?: TooltipWidth;\n\n    /**\n     * Callback function for when the component shall be hidden.\n     *\n     * @default () => {}\n     */\n    onHide: VoidFunction;\n\n    /**\n     * Changes the z-index.\n     *\n     * @default false\n     */\n    useInDialog?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * The title of the onboarding tip.\n     */\n    title?: string | ReactNode;\n\n    /**\n     * The content of the onboarding tip.\n     */\n    content?: string | ReactNode;\n\n    /**\n     * Prevents onboarding tips from being cut off horizontally at screen borders.\n     *\n     * @default true\n     */\n    preventOverflow?: boolean;\n\n    /**\n     * A Popper.js config object passed to the underlying popper instance.\n     */\n    popperConfig?: PopperConfig;\n\n    /**\n     * Define how the component should be placed.\n     *\n     * Possible values are:\n     *\n     * - `auto-start`\n     * - `auto`\n     * - `auto-end`\n     * - `top-start`\n     * - `top`\n     * - `top-end`\n     * - `right-start`\n     * - `right`\n     * - `right-end`\n     * - `bottom-start`\n     * - `bottom`\n     * - `bottom-end`\n     * - `left-start`\n     * - `left`\n     * - `left-end`\n     *\n     * @default 'bottom'\n     */\n    placement?: Placement;\n};\n\nconst OnboardingTip = (props: PropsWithChildren<OnboardingTipProps>) => {\n    const {\n        id,\n        show = false,\n        placement = PLACEMENT.BOTTOM,\n        title,\n        content,\n        onHide = noop,\n        children,\n        textAlignment = TEXT_ALIGNMENT.LEFT,\n        useInDialog = false,\n        showCloseIcon = true,\n        className = '',\n        width,\n        preventOverflow = true,\n        popperConfig,\n    } = props;\n\n    const tooltipWrapperClasses = classNames(useInDialog && 'z-index-max', className && className);\n\n    const overlay = (\n        <Tooltip\n            className={tooltipWrapperClasses}\n            tooltipStyle={Tooltip.STYLE_ONBOARDING}\n            id={id}\n            onClick={onHide}\n            width={width}\n            textAlignment={textAlignment}\n            allowOnTouch\n        >\n            <div className='display-flex'>\n                <div className='display-flex flex-column flex-1-1'>\n                    {title && <div className='tooltip-title'>{title}</div>}\n                    {content && <div className='tooltip-content'>{content}</div>}\n                </div>\n                {showCloseIcon && <span className='tooltip-close rioglyph rioglyph-remove' />}\n            </div>\n        </Tooltip>\n    );\n\n    const actualPopperConfig: PopperConfig = popperConfig || {\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'preventOverflow',\n                // Popper.js default is false but we enable it by default\n                options: { altAxis: preventOverflow },\n            },\n            // Use an arrow modifier, the arrow ref will be injected in OverlayTrigger with the right props\n            { name: 'arrow', options: {} },\n        ],\n    };\n\n    const trigger = (\n        <OverlayTrigger\n            placement={placement}\n            trigger='click'\n            overlay={overlay}\n            onToggle={onHide}\n            show={show}\n            rootClose={false}\n            popperConfig={actualPopperConfig}\n        >\n            {children}\n        </OverlayTrigger>\n    );\n\n    // biome-ignore lint/complexity/noUselessFragments: fragment required\n    return show ? trigger : <>{children}</>;\n};\n\nOnboardingTip.AUTO_START = PLACEMENT.AUTO_START;\nOnboardingTip.AUTO = PLACEMENT.AUTO;\nOnboardingTip.AUTO_END = PLACEMENT.AUTO_END;\nOnboardingTip.TOP_START = PLACEMENT.TOP_START;\nOnboardingTip.TOP = PLACEMENT.TOP;\nOnboardingTip.TOP_END = PLACEMENT.TOP_END;\nOnboardingTip.BOTTOM_START = PLACEMENT.BOTTOM_START;\nOnboardingTip.BOTTOM = PLACEMENT.BOTTOM;\nOnboardingTip.BOTTOM_END = PLACEMENT.BOTTOM_END;\nOnboardingTip.RIGHT_START = PLACEMENT.RIGHT_START;\nOnboardingTip.RIGHT = PLACEMENT.RIGHT;\nOnboardingTip.RIGHT_END = PLACEMENT.RIGHT_END;\nOnboardingTip.LEFT_START = PLACEMENT.LEFT_START;\nOnboardingTip.LEFT = PLACEMENT.LEFT;\nOnboardingTip.LEFT_END = PLACEMENT.LEFT_END;\n\nOnboardingTip.TEXT_ALIGNMENT_LEFT = TEXT_ALIGNMENT.LEFT;\nOnboardingTip.TEXT_ALIGNMENT_CENTER = TEXT_ALIGNMENT.CENTER;\nOnboardingTip.TEXT_ALIGNMENT_RIGHT = TEXT_ALIGNMENT.RIGHT;\n\nexport default OnboardingTip;\n"],"names":["OnboardingTip","props","id","show","placement","PLACEMENT","title","content","onHide","noop","children","textAlignment","TEXT_ALIGNMENT","useInDialog","showCloseIcon","className","width","preventOverflow","popperConfig","tooltipWrapperClasses","classNames","overlay","jsx","Tooltip","jsxs","OverlayTrigger","Fragment"],"mappings":";;;;;;;AAwIA,MAAMA,IAAgB,CAACC,MAAiD;AACpE,QAAM;AAAA,IACF,IAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAYC,EAAU;AAAA,IACtB,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC,IAASC;AAAA,IACT,UAAAC;AAAA,IACA,eAAAC,IAAgBC,EAAe;AAAA,IAC/B,aAAAC,IAAc;AAAA,IACd,eAAAC,IAAgB;AAAA,IAChB,WAAAC,IAAY;AAAA,IACZ,OAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,cAAAC;AAAA,EAAA,IACAjB,GAEEkB,IAAwBC,EAAWP,KAAe,eAAeE,KAAaA,CAAS,GAEvFM,IACF,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAWJ;AAAA,MACX,cAAcI,EAAQ;AAAA,MACtB,IAAArB;AAAA,MACA,SAASM;AAAA,MACT,OAAAQ;AAAA,MACA,eAAAL;AAAA,MACA,cAAY;AAAA,MAEZ,UAAA,gBAAAa,EAAC,OAAA,EAAI,WAAU,gBACX,UAAA;AAAA,QAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,qCACV,UAAA;AAAA,UAAAlB,KAAS,gBAAAgB,EAAC,OAAA,EAAI,WAAU,iBAAiB,UAAAhB,GAAM;AAAA,UAC/CC,KAAW,gBAAAe,EAAC,OAAA,EAAI,WAAU,mBAAmB,UAAAf,EAAA,CAAQ;AAAA,QAAA,GAC1D;AAAA,QACCO,KAAiB,gBAAAQ,EAAC,QAAA,EAAK,WAAU,yCAAA,CAAyC;AAAA,MAAA,EAAA,CAC/E;AAAA,IAAA;AAAA,EAAA;AAgCR,SAAOnB,IAdH,gBAAAmB;AAAA,IAACG;AAAA,IAAA;AAAA,MACG,WAAArB;AAAA,MACA,SAAQ;AAAA,MACR,SAAAiB;AAAA,MACA,UAAUb;AAAA,MACV,MAAAL;AAAA,MACA,WAAW;AAAA,MACX,cArBiCe,KAAgB;AAAA,QACrD,UAAU;AAAA,QACV,WAAW;AAAA,UACP;AAAA,YACI,MAAM;AAAA;AAAA,YAEN,SAAS,EAAE,SAASD,EAAA;AAAA,UAAgB;AAAA;AAAA,UAGxC,EAAE,MAAM,SAAS,SAAS,CAAA,EAAC;AAAA,QAAE;AAAA,MACjC;AAAA,MAaK,UAAAP;AAAA,IAAA;AAAA,EAAA,IAKe,gBAAAY,EAAAI,GAAA,EAAG,UAAAhB,EAAA,CAAS;AACxC;AAEAV,EAAc,aAAaK,EAAU;AACrCL,EAAc,OAAOK,EAAU;AAC/BL,EAAc,WAAWK,EAAU;AACnCL,EAAc,YAAYK,EAAU;AACpCL,EAAc,MAAMK,EAAU;AAC9BL,EAAc,UAAUK,EAAU;AAClCL,EAAc,eAAeK,EAAU;AACvCL,EAAc,SAASK,EAAU;AACjCL,EAAc,aAAaK,EAAU;AACrCL,EAAc,cAAcK,EAAU;AACtCL,EAAc,QAAQK,EAAU;AAChCL,EAAc,YAAYK,EAAU;AACpCL,EAAc,aAAaK,EAAU;AACrCL,EAAc,OAAOK,EAAU;AAC/BL,EAAc,WAAWK,EAAU;AAEnCL,EAAc,sBAAsBY,EAAe;AACnDZ,EAAc,wBAAwBY,EAAe;AACrDZ,EAAc,uBAAuBY,EAAe;"}
+{"version":3,"file":"OnboardingTip.js","names":[],"sources":["../../../src/components/onboarding/OnboardingTip.tsx"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport Tooltip, { type TooltipWidth } from '../tooltip/Tooltip';\nimport { TEXT_ALIGNMENT, type TextAlignment } from '../../values/TextAlignment';\nimport { PLACEMENT, type Placement } from '../../values/Placement';\nimport type { IconType } from '../icon/Icon';\n\nexport type OnboardingButton = {\n    text: string | React.ReactNode;\n    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    iconName?: IconType;\n};\n\nexport type OnboardingTipProps = {\n    /**\n     * The ID of the DOM element.\n     */\n    id?: string;\n\n    /**\n     * Indicates whether the onboarding tip is shown.\n     *\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * Defines whether to show a close icon.\n     *\n     * @default true\n     */\n    showCloseIcon?: boolean;\n\n    /**\n     * Define how the text should be aligned.\n     *\n     * Possible values are:\n     *\n     * - `left`\n     * - `center`\n     * - `right`\n     *\n     * @default 'left'\n     */\n    textAlignment?: TextAlignment;\n\n    /**\n     * The tooltip's width.\n     *\n     * Possible values are:\n     *\n     * - `auto`\n     * - `100`\n     * - `150`\n     * - `200`\n     * - `250`\n     * - `300`\n     * - `350`\n     * - `400`\n     * - `450`\n     * - `500`\n     */\n    width?: TooltipWidth;\n\n    /**\n     * Callback function for when the component shall be hidden.\n     *\n     * @default () => {}\n     */\n    onHide: VoidFunction;\n\n    /**\n     * Changes the z-index.\n     *\n     * @default false\n     */\n    useInDialog?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * The title of the onboarding tip.\n     */\n    title?: string | ReactNode;\n\n    /**\n     * The content of the onboarding tip.\n     */\n    content?: string | ReactNode;\n\n    /**\n     * Prevents onboarding tips from being cut off horizontally at screen borders.\n     *\n     * @default true\n     */\n    preventOverflow?: boolean;\n\n    /**\n     * Define how the component should be placed.\n     *\n     * Possible values are:\n     *\n     * - `top-start`\n     * - `top`\n     * - `top-end`\n     * - `right-start`\n     * - `right`\n     * - `right-end`\n     * - `bottom-start`\n     * - `bottom`\n     * - `bottom-end`\n     * - `left-start`\n     * - `left`\n     * - `left-end`\n     *\n     * @default 'bottom'\n     */\n    placement?: Placement;\n};\n\nconst OnboardingTip = (props: PropsWithChildren<OnboardingTipProps>) => {\n    const {\n        id,\n        show = false,\n        placement = PLACEMENT.BOTTOM,\n        title,\n        content,\n        onHide = noop,\n        children,\n        textAlignment = TEXT_ALIGNMENT.LEFT,\n        useInDialog = false,\n        showCloseIcon = true,\n        className = '',\n        width,\n    } = props;\n\n    const tooltipWrapperClasses = classNames(useInDialog && 'z-index-max', className && className);\n\n    const overlay = (\n        <Tooltip\n            className={tooltipWrapperClasses}\n            tooltipStyle={Tooltip.STYLE_ONBOARDING}\n            id={id}\n            onClick={onHide}\n            width={width}\n            textAlignment={textAlignment}\n            allowOnTouch\n        >\n            <div className='display-flex'>\n                <div className='display-flex flex-column flex-1-1'>\n                    {title && <div className='tooltip-title'>{title}</div>}\n                    {content && <div className='tooltip-content'>{content}</div>}\n                </div>\n                {showCloseIcon && <span className='tooltip-close uikit-icon icon-remove' />}\n            </div>\n        </Tooltip>\n    );\n\n    const trigger = (\n        <OverlayTrigger\n            placement={placement}\n            trigger='click'\n            overlay={overlay}\n            onToggle={onHide}\n            show={show}\n            rootClose={false}\n        >\n            {children}\n        </OverlayTrigger>\n    );\n\n    // biome-ignore lint/complexity/noUselessFragments: fragment required\n    return show ? trigger : <>{children}</>;\n};\n\nOnboardingTip.TOP_START = PLACEMENT.TOP_START;\nOnboardingTip.TOP = PLACEMENT.TOP;\nOnboardingTip.TOP_END = PLACEMENT.TOP_END;\nOnboardingTip.BOTTOM_START = PLACEMENT.BOTTOM_START;\nOnboardingTip.BOTTOM = PLACEMENT.BOTTOM;\nOnboardingTip.BOTTOM_END = PLACEMENT.BOTTOM_END;\nOnboardingTip.RIGHT_START = PLACEMENT.RIGHT_START;\nOnboardingTip.RIGHT = PLACEMENT.RIGHT;\nOnboardingTip.RIGHT_END = PLACEMENT.RIGHT_END;\nOnboardingTip.LEFT_START = PLACEMENT.LEFT_START;\nOnboardingTip.LEFT = PLACEMENT.LEFT;\nOnboardingTip.LEFT_END = PLACEMENT.LEFT_END;\n\nOnboardingTip.TEXT_ALIGNMENT_LEFT = TEXT_ALIGNMENT.LEFT;\nOnboardingTip.TEXT_ALIGNMENT_CENTER = TEXT_ALIGNMENT.CENTER;\nOnboardingTip.TEXT_ALIGNMENT_RIGHT = TEXT_ALIGNMENT.RIGHT;\n\nexport default OnboardingTip;\n"],"mappings":";;;;;;;;AA8HA,IAAM,KAAiB,MAAiD;CACpE,IAAM,EACF,OACA,UAAO,IACP,eAAY,EAAU,QACtB,UACA,YACA,YAAS,GACT,aACA,mBAAgB,EAAe,MAC/B,iBAAc,IACd,mBAAgB,IAChB,eAAY,IACZ,aACA,GAwBE,IACF,kBAAC,GAAD;EACe;EACX,SAAQ;EACC,SAvBb,kBAAC,GAAD;GACI,WAJsB,EAAW,KAAe,eAAe,KAAa,CAIjE;GACX,cAAc,EAAQ;GAClB;GACJ,SAAS;GACF;GACQ;GACf,cAAA;aAEA,kBAAC,OAAD;IAAK,WAAU;cAAf,CACI,kBAAC,OAAD;KAAK,WAAU;eAAf,CACK,KAAS,kBAAC,OAAD;MAAK,WAAU;gBAAiB;KAAW,CAAA,GACpD,KAAW,kBAAC,OAAD;MAAK,WAAU;gBAAmB;KAAa,CAAA,CAC1D;QACJ,KAAiB,kBAAC,QAAD,EAAM,WAAU,uCAAwC,CAAA,CACzE;;EACA,CAOI;EACT,UAAU;EACJ;EACN,WAAW;EAEV;CACW,CAAA;CAIpB,OAAO,IAAO,IAAU,kBAAA,GAAA,EAAG,YAAW,CAAA;AAC1C;AAEA,EAAc,YAAY,EAAU,WACpC,EAAc,MAAM,EAAU,KAC9B,EAAc,UAAU,EAAU,SAClC,EAAc,eAAe,EAAU,cACvC,EAAc,SAAS,EAAU,QACjC,EAAc,aAAa,EAAU,YACrC,EAAc,cAAc,EAAU,aACtC,EAAc,QAAQ,EAAU,OAChC,EAAc,YAAY,EAAU,WACpC,EAAc,aAAa,EAAU,YACrC,EAAc,OAAO,EAAU,MAC/B,EAAc,WAAW,EAAU,UAEnC,EAAc,sBAAsB,EAAe,MACnD,EAAc,wBAAwB,EAAe,QACrD,EAAc,uBAAuB,EAAe"}