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

package/components/timepicker/TimePicker.js

@@ -1,166 +1,142 @@
-import { jsxs as d, jsx as n, Fragment as se } from "react/jsx-runtime";
-import { useState as V, useRef as y, useEffect as P } from "react";
-import { IMaskInput as te, IMask as O } from "react-imask";
-import { noop as ne } from "es-toolkit/compat";
-import { isNil as oe } from "es-toolkit/predicate";
-import I from "moment";
-import re from "tiny-invariant";
-import ae from "../selects/BaseSelectDropdown.js";
-import ie from "../../hooks/useClickOutside.js";
-import ce from "../../hooks/useMergeRefs.js";
-import T from "../../utils/classNames.js";
-const b = 15, le = /^(?:\d|[01]\d|2[0-3]):[0-5]\d$/, C = (e) => e >= 10 ? `${e}` : `0${e}`, p = (e, t) => `${C(e)}:${C(t)}`, D = (e, t = b) => Math.floor(e.minutes() / t) * t, me = (e) => Number.isInteger(e) && e > 0 && e <= 60, de = (e) => me(e) ? e : b, ue = (e) => {
-  const t = [];
-  for (let a = 0; a < 1440; a += e) {
-    const f = Math.floor(a / 60), i = a % 60;
-    t.push(p(f, i));
-  }
-  return t;
-}, pe = () => {
-  const e = /* @__PURE__ */ new Date(), t = e.getHours(), r = e.getMinutes();
-  return p(t, r);
-}, S = (e) => le.test(e), R = (e) => {
-  if (!!oe(e))
-    return !1;
-  const r = e === "" || S(e);
-  return r || re(!1, 'Wrong time format. Please pass in value with the following format: "hh:mm".'), r;
-}, xe = (e) => {
-  const {
-    value: t,
-    onChange: r = ne,
-    alwaysShowMask: a = !0,
-    showIcon: f = !1,
-    dropdown: i = !1,
-    maskOverwrite: $ = "shift",
-    minuteOffset: F = b,
-    disabled: E = !1,
-    errorMessage: h,
-    warningMessage: g,
-    messageWhiteSpace: H = "normal",
-    className: A = "",
-    inputProps: k = {},
-    ...W
-  } = e, j = R(t) ? t : pe(), [c, l] = V(j), [x, w] = V(!1), m = de(F), u = E || !!k.disabled, B = y(null), N = y(!1), M = y(!1), L = ie(() => {
-    i && w(!1);
-  }), U = ce(B, L);
-  P(() => {
-    R(t) && l(t);
-  }, [t]), P(() => (N.current = !0, () => {
-    N.current = !1;
-  }), []);
-  const z = (s) => {
-    const o = s.target;
-    (!o.value || o.value.startsWith("-")) && setTimeout(() => {
-      o.setSelectionRange(0, 0);
-    }, 0), k.onFocus?.(s), i && !u && w(!0);
-  }, _ = (s, o) => {
-    if (M.current) {
-      M.current = !1;
-      return;
-    }
-    if (l(s), !!N.current) {
-      if (o.masked.isComplete) {
-        r(s);
-        return;
-      }
-      o.unmaskedValue === "" && r("");
-    }
-  }, q = S(c), G = () => {
-    const s = I(`2020-01-01 ${c}`), o = D(s, m);
-    s.minute(o).second(0), s.add(m, "minutes");
-    const v = p(s.hours(), s.minutes());
-    l(v);
-  }, J = () => {
-    const s = I(`2020-01-01 ${c}`), o = D(s, m);
-    s.minute(o).second(0), s.subtract(m, "minutes");
-    const v = p(s.hours(), s.minutes());
-    l(v);
-  }, { className: K, ...Q } = k, X = ue(m).map((s) => ({
-    id: s,
-    label: s,
-    selected: s === c
-  })), Y = (s) => {
-    !s || u || (M.current = !0, l(s.id), r(s.id), w(!1));
-  }, Z = h || g, ee = T("TimePicker", i && "dropdown", x && "open", A);
-  return /* @__PURE__ */ d("div", { ...W, className: ee, ref: U, children: [
-    /* @__PURE__ */ d("div", { className: "input-group", children: [
-      f && /* @__PURE__ */ n("span", { className: "input-group-addon", children: /* @__PURE__ */ n("span", { className: "rioglyph rioglyph-time-alt" }) }),
-      /* @__PURE__ */ d("div", { className: "form-control-feedback-wrapper", children: [
-        /* @__PURE__ */ n(
-          te,
-          {
-            ...Q,
-            className: T("TimePickerInput", "form-control", K),
-            disabled: u,
-            mask: "HH:MM",
-            blocks: {
-              HH: {
-                mask: O.MaskedRange,
-                from: 0,
-                to: 23,
-                maxLength: 2
-              },
-              MM: {
-                mask: O.MaskedRange,
-                from: 0,
-                to: 59,
-                maxLength: 2
-              }
-            },
-            value: c,
-            onAccept: _,
-            onFocus: z,
-            lazy: !a,
-            placeholderChar: "-",
-            overwrite: $
-          }
-        ),
-        Z && /* @__PURE__ */ d(se, { children: [
-          h && /* @__PURE__ */ n("span", { className: "form-control-feedback rioglyph rioglyph-error-sign" }),
-          g && /* @__PURE__ */ n("span", { className: "form-control-feedback rioglyph rioglyph-warning-sign" }),
-          /* @__PURE__ */ n("span", { className: `help-block white-space-${H}`, children: /* @__PURE__ */ n("span", { children: h || g }) })
-        ] })
-      ] }),
-      q && /* @__PURE__ */ d(
-        "div",
-        {
-          className: T(
-            "TimePickerIncreaseButton input-group-addon",
-            u && "pointer-events-none bg-lightest"
-          ),
-          children: [
-            /* @__PURE__ */ n(
-              "div",
-              {
-                className: "text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer",
-                onClick: J,
-                children: /* @__PURE__ */ n("div", { className: "rioglyph rioglyph-chevron-left scale-90" })
-              }
-            ),
-            /* @__PURE__ */ n(
-              "div",
-              {
-                className: "text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer",
-                onClick: G,
-                children: /* @__PURE__ */ n("div", { className: "rioglyph rioglyph-chevron-right scale-90" })
-              }
-            )
-          ]
-        }
-      )
-    ] }),
-    i && /* @__PURE__ */ n(
-      ae,
-      {
-        isOpen: x,
-        options: X,
-        onSelect: Y,
-        dropdownClassName: "max-height-200 overflow-auto width-100pct"
-      }
-    )
-  ] });
+import e from "../../hooks/useClickOutside.js";
+import "../../useClickOutside.js";
+import t from "../../utils/classNames.js";
+import n from "../../hooks/useMergeRefs.js";
+import r from "../selects/BaseSelectDropdown.js";
+import { useEffect as i, useRef as a, useState as o } from "react";
+import { noop as s } from "es-toolkit/compat";
+import { isNil as c } from "es-toolkit/predicate";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { IMask as f, IMaskInput as p } from "react-imask";
+import m from "tiny-invariant";
+import h from "moment";
+//#region src/components/timepicker/TimePicker.tsx
+var g = 15, _ = /^(?:\d|[01]\d|2[0-3]):[0-5]\d$/, v = (e) => e >= 10 ? `${e}` : `0${e}`, y = (e, t) => `${v(e)}:${v(t)}`, b = (e, t = g) => Math.floor(e.minutes() / t) * t, x = (e) => Number.isInteger(e) && e > 0 && e <= 60, S = (e) => x(e) ? e : g, C = (e) => {
+	let t = [];
+	for (let n = 0; n < 1440; n += e) {
+		let e = Math.floor(n / 60), r = n % 60;
+		t.push(y(e, r));
+	}
+	return t;
+}, w = () => {
+	let e = /* @__PURE__ */ new Date();
+	return y(e.getHours(), e.getMinutes());
+}, T = (e) => _.test(e), E = (e) => {
+	if (c(e)) return !1;
+	let t = e === "" || T(e);
+	return t || m(!1, "Wrong time format. Please pass in value with the following format: \"hh:mm\"."), t;
+}, D = (c) => {
+	let { value: m, onChange: _ = s, alwaysShowMask: v = !0, showIcon: x = !1, dropdown: D = !1, maskOverwrite: O = "shift", minuteOffset: k = g, disabled: A = !1, errorMessage: j, warningMessage: M, messageWhiteSpace: N = "normal", className: P = "", inputProps: F = {}, ...I } = c, [L, R] = o(E(m) ? m : w()), [z, B] = o(!1), V = S(k), H = A || !!F.disabled, U = a(null), W = a(!1), G = a(!1), K = n(U, e(() => {
+		D && B(!1);
+	}));
+	i(() => {
+		E(m) && R(m);
+	}, [m]), i(() => (W.current = !0, () => {
+		W.current = !1;
+	}), []);
+	let q = (e) => {
+		let t = e.target;
+		(!t.value || t.value.startsWith("-")) && setTimeout(() => {
+			t.setSelectionRange(0, 0);
+		}, 0), F.onFocus?.(e), D && !H && B(!0);
+	}, J = (e, t) => {
+		if (G.current) {
+			G.current = !1;
+			return;
+		}
+		if (R(e), W.current) {
+			if (t.masked.isComplete) {
+				_(e);
+				return;
+			}
+			t.unmaskedValue === "" && _("");
+		}
+	}, Y = T(L), X = () => {
+		let e = h(`2020-01-01 ${L}`), t = b(e, V);
+		e.minute(t).second(0), e.add(V, "minutes");
+		let n = y(e.hours(), e.minutes());
+		R(n);
+	}, Z = () => {
+		let e = h(`2020-01-01 ${L}`), t = b(e, V);
+		e.minute(t).second(0), e.subtract(V, "minutes");
+		let n = y(e.hours(), e.minutes());
+		R(n);
+	}, { className: Q, ...$ } = F, ee = C(V).map((e) => ({
+		id: e,
+		label: e,
+		selected: e === L
+	})), te = (e) => {
+		!e || H || (G.current = !0, R(e.id), _(e.id), B(!1));
+	}, ne = j || M, re = t("TimePicker", D && "dropdown", z && "open", P);
+	return /* @__PURE__ */ d("div", {
+		...I,
+		className: re,
+		ref: K,
+		children: [/* @__PURE__ */ d("div", {
+			className: "input-group",
+			children: [
+				x && /* @__PURE__ */ u("span", {
+					className: "input-group-addon",
+					children: /* @__PURE__ */ u("span", { className: "uikit-icon icon-time-alt" })
+				}),
+				/* @__PURE__ */ d("div", {
+					className: "form-control-feedback-wrapper",
+					children: [/* @__PURE__ */ u(p, {
+						...$,
+						className: t("TimePickerInput", "form-control", Q),
+						disabled: H,
+						mask: "HH:MM",
+						blocks: {
+							HH: {
+								mask: f.MaskedRange,
+								from: 0,
+								to: 23,
+								maxLength: 2
+							},
+							MM: {
+								mask: f.MaskedRange,
+								from: 0,
+								to: 59,
+								maxLength: 2
+							}
+						},
+						value: L,
+						onAccept: J,
+						onFocus: q,
+						lazy: !v,
+						placeholderChar: "-",
+						overwrite: O
+					}), ne && /* @__PURE__ */ d(l, { children: [
+						j && /* @__PURE__ */ u("span", { className: "form-control-feedback uikit-icon icon-error-sign" }),
+						M && /* @__PURE__ */ u("span", { className: "form-control-feedback uikit-icon icon-warning-sign" }),
+						/* @__PURE__ */ u("span", {
+							className: `help-block white-space-${N}`,
+							children: /* @__PURE__ */ u("span", { children: j || M })
+						})
+					] })]
+				}),
+				Y && /* @__PURE__ */ d("div", {
+					className: t("TimePickerIncreaseButton input-group-addon", H && "pointer-events-none bg-lightest"),
+					children: [/* @__PURE__ */ u("div", {
+						className: "text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer",
+						onClick: Z,
+						children: /* @__PURE__ */ u("div", { className: "uikit-icon icon-chevron-left scale-90" })
+					}), /* @__PURE__ */ u("div", {
+						className: "text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer",
+						onClick: X,
+						children: /* @__PURE__ */ u("div", { className: "uikit-icon icon-chevron-right scale-90" })
+					})]
+				})
+			]
+		}), D && /* @__PURE__ */ u(r, {
+			isOpen: z,
+			options: ee,
+			onSelect: te,
+			dropdownClassName: "max-height-200 overflow-auto width-100pct"
+		})]
+	});
 };
-export {
-  xe as default
-};
-//# sourceMappingURL=TimePicker.js.map
+//#endregion
+export { D as default };
+
+//# sourceMappingURL=TimePicker.js.map

package/components/timepicker/TimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.js","sources":["../../../src/components/timepicker/TimePicker.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport { IMask, IMaskInput } from 'react-imask';\nimport type { InputMask } from 'imask';\nimport { noop } from 'es-toolkit/compat';\nimport { isNil } from 'es-toolkit/predicate';\nimport moment, { type Moment } from 'moment';\nimport invariant from 'tiny-invariant';\n\nimport BaseSelectDropdown, { type SelectOption } from '../selects/BaseSelectDropdown';\nimport useClickOutside from '../../useClickOutside';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport classNames from '../../utils/classNames';\n\nconst MINUTES_OFFSET = 15;\n\nconst mask = '00:00';\nconst fullRegexp = /^(?:\\d|[01]\\d|2[0-3]):[0-5]\\d$/;\n\nconst getPadded = (value: number) => (value >= 10 ? `${value}` : `0${value}`);\nconst formatTimeString = (hours: number, minutes: number) => `${getPadded(hours)}:${getPadded(minutes)}`;\n\nconst roundedUp = (time: Moment, offset = MINUTES_OFFSET) => Math.floor(time.minutes() / offset) * offset;\nconst isValidMinuteOffset = (offset: number) => Number.isInteger(offset) && offset > 0 && offset <= 60;\nconst getEffectiveMinuteOffset = (offset: number) => (isValidMinuteOffset(offset) ? offset : MINUTES_OFFSET);\nconst getDropdownTimeValues = (offset: number) => {\n    const values: string[] = [];\n    const minutesPerDay = 24 * 60;\n    for (let totalMinutes = 0; totalMinutes < minutesPerDay; totalMinutes += offset) {\n        const hours = Math.floor(totalMinutes / 60);\n        const minutes = totalMinutes % 60;\n        values.push(formatTimeString(hours, minutes));\n    }\n    return values;\n};\n\nconst getInitialTime = () => {\n    const date = new Date();\n    const hours = date.getHours();\n    const minutes = date.getMinutes();\n    return formatTimeString(hours, minutes);\n};\n\nconst isTimeValid = (value: string) => fullRegexp.test(value);\n\nconst isControlledAndValid = (value: string | undefined): value is string => {\n    const hasExternalValue = !isNil(value);\n    if (!hasExternalValue) {\n        return false;\n    }\n\n    const isValid = value === '' || isTimeValid(value);\n    if (!isValid) {\n        invariant(false, 'Wrong time format. Please pass in value with the following format: \"hh:mm\".');\n    }\n    return isValid;\n};\n\nexport type TimePickerProps = {\n    /**\n     * Value of the time as string. Note, when value is given the component is treated as controlled.\n     */\n    value?: string;\n\n    /**\n     * Callback function when the value changes and is a valid time format.\n     * It also emits an empty string when the input is cleared.\n     *\n     * If not it handles the state internally until the time is valid and filled.\n     */\n    onChange?: (value: string) => void;\n\n    /**\n     * Defines whether to always show the input mask placeholder.\n     *\n     * @default true\n     */\n    alwaysShowMask?: boolean;\n\n    /**\n     * Defines whether to show the input icon.\n     *\n     * @default false\n     */\n    showIcon?: boolean;\n\n    /**\n     * Defines whether to show a dropdown with pre-defined time values.\n     *\n     * @default false\n     */\n    dropdown?: boolean;\n\n    /**\n     * Configures IMask overwrite behavior for manual input editing.\n     *\n     * @default 'shift'\n     */\n    maskOverwrite?: boolean | 'shift';\n\n    /**\n     * Defines the minute interval for time controls and dropdown values.\n     * Invalid values fallback to 15.\n     *\n     * @default 15\n     */\n    minuteOffset?: number;\n\n    /**\n     * Defines whether the component is disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\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     * Additional properties to be set on the input element.\n     */\n    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nconst TimePicker = (props: TimePickerProps) => {\n    const {\n        value,\n        onChange = noop,\n        alwaysShowMask = true,\n        showIcon = false,\n        dropdown = false,\n        maskOverwrite = 'shift',\n        minuteOffset = MINUTES_OFFSET,\n        disabled = false,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace = 'normal',\n        className = '',\n        inputProps = {},\n        ...remainingProps\n    } = props;\n\n    const initialTime = isControlledAndValid(value) ? value : getInitialTime();\n\n    const [timeValue, setTimeValue] = useState(initialTime);\n\n    const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n    const effectiveMinuteOffset = getEffectiveMinuteOffset(minuteOffset);\n\n    const isInputDisabled = disabled || !!inputProps.disabled;\n    const timePickerRef = useRef<HTMLDivElement>(null);\n    const hasMountedRef = useRef(false);\n    const suppressNextAcceptRef = useRef(false);\n\n    const clickOutsideRef = useClickOutside(() => {\n        if (dropdown) {\n            setIsDropdownOpen(false);\n        }\n    });\n\n    const mergedTimePickerRefs = useMergeRefs(timePickerRef, clickOutsideRef);\n\n    // Update internal time value from outside when used as a controlled component\n    useEffect(() => {\n        if (isControlledAndValid(value)) {\n            setTimeValue(value);\n        }\n    }, [value]);\n\n    useEffect(() => {\n        hasMountedRef.current = true;\n\n        return () => {\n            hasMountedRef.current = false;\n        };\n    }, []);\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        const input = event.target;\n        // Check if value is empty or partially filled\n        if (!input.value || input.value.startsWith('-')) {\n            // Move cursor to the first empty position (usually 0)\n            // Timeout needed to wait for IMask internal focus handling\n            setTimeout(() => {\n                input.setSelectionRange(0, 0);\n            }, 0);\n        }\n\n        // If you want to preserve custom onFocus from props\n        inputProps.onFocus?.(event);\n\n        if (dropdown && !isInputDisabled) {\n            setIsDropdownOpen(true);\n        }\n    };\n\n    const handleAcceptTime = (val: string, maskRef: InputMask<{ [x: string]: unknown }>) => {\n        if (suppressNextAcceptRef.current) {\n            suppressNextAcceptRef.current = false;\n            return;\n        }\n\n        setTimeValue(val);\n\n        if (!hasMountedRef.current) {\n            return;\n        }\n\n        if (maskRef.masked.isComplete) {\n            onChange(val);\n            return;\n        }\n\n        if (maskRef.unmaskedValue === '') {\n            onChange('');\n        }\n    };\n\n    const isValid = isTimeValid(timeValue);\n\n    const handleIncrease = () => {\n        const time = moment(`2020-01-01 ${timeValue}`);\n        const rounded = roundedUp(time, effectiveMinuteOffset);\n        time.minute(rounded).second(0);\n        time.add(effectiveMinuteOffset, 'minutes');\n        const updatedTimeValue = formatTimeString(time.hours(), time.minutes());\n\n        setTimeValue(updatedTimeValue);\n    };\n\n    const handleDecrease = () => {\n        const time = moment(`2020-01-01 ${timeValue}`);\n        const rounded = roundedUp(time, effectiveMinuteOffset);\n        time.minute(rounded).second(0);\n        time.subtract(effectiveMinuteOffset, 'minutes');\n        const updatedTimeValue = formatTimeString(time.hours(), time.minutes());\n\n        setTimeValue(updatedTimeValue);\n    };\n\n    const { className: inputClassName, ...otherInputProps } = inputProps;\n\n    const dropdownOptions: SelectOption[] = getDropdownTimeValues(effectiveMinuteOffset).map(option => ({\n        id: option,\n        label: option,\n        selected: option === timeValue,\n    }));\n\n    const handleSelectDropdownValue = (selectedItem: SelectOption | undefined) => {\n        if (!selectedItem || isInputDisabled) {\n            return;\n        }\n\n        suppressNextAcceptRef.current = true;\n        setTimeValue(selectedItem.id);\n        onChange(selectedItem.id);\n        setIsDropdownOpen(false);\n    };\n\n    const hasFeedback = errorMessage || warningMessage;\n\n    const wrapperClassName = classNames('TimePicker', dropdown && 'dropdown', isDropdownOpen && 'open', className);\n\n    return (\n        <div {...remainingProps} className={wrapperClassName} ref={mergedTimePickerRefs}>\n            <div className='input-group'>\n                {showIcon && (\n                    <span className='input-group-addon'>\n                        <span className='rioglyph rioglyph-time-alt' />\n                    </span>\n                )}\n                <div className='form-control-feedback-wrapper'>\n                    <IMaskInput\n                        {...otherInputProps}\n                        className={classNames('TimePickerInput', 'form-control', inputClassName)}\n                        disabled={isInputDisabled}\n                        mask='HH:MM'\n                        blocks={{\n                            HH: {\n                                mask: IMask.MaskedRange,\n                                from: 0,\n                                to: 23,\n                                maxLength: 2,\n                            },\n                            MM: {\n                                mask: IMask.MaskedRange,\n                                from: 0,\n                                to: 59,\n                                maxLength: 2,\n                            },\n                        }}\n                        value={timeValue}\n                        onAccept={handleAcceptTime}\n                        onFocus={handleFocus}\n                        lazy={!alwaysShowMask}\n                        placeholderChar='-'\n                        overwrite={maskOverwrite}\n                    />\n                    {hasFeedback && (\n                        <>\n                            {errorMessage && <span className='form-control-feedback rioglyph rioglyph-error-sign' />}\n                            {warningMessage && (\n                                <span className='form-control-feedback rioglyph rioglyph-warning-sign' />\n                            )}\n                            <span className={`help-block white-space-${messageWhiteSpace}`}>\n                                <span>{errorMessage || warningMessage}</span>\n                            </span>\n                        </>\n                    )}\n                </div>\n                {isValid && (\n                    <div\n                        className={classNames(\n                            'TimePickerIncreaseButton input-group-addon',\n                            isInputDisabled && 'pointer-events-none bg-lightest'\n                        )}\n                    >\n                        <div\n                            className='text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer'\n                            onClick={handleDecrease}\n                        >\n                            <div className='rioglyph rioglyph-chevron-left scale-90' />\n                        </div>\n                        <div\n                            className='text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer'\n                            onClick={handleIncrease}\n                        >\n                            <div className='rioglyph rioglyph-chevron-right scale-90' />\n                        </div>\n                    </div>\n                )}\n            </div>\n            {dropdown && (\n                <BaseSelectDropdown\n                    isOpen={isDropdownOpen}\n                    options={dropdownOptions}\n                    onSelect={handleSelectDropdownValue}\n                    dropdownClassName='max-height-200 overflow-auto width-100pct'\n                />\n            )}\n        </div>\n    );\n};\n\nexport default TimePicker;\n"],"names":["MINUTES_OFFSET","fullRegexp","getPadded","value","formatTimeString","hours","minutes","roundedUp","time","offset","isValidMinuteOffset","getEffectiveMinuteOffset","getDropdownTimeValues","values","totalMinutes","getInitialTime","date","isTimeValid","isControlledAndValid","isNil","isValid","invariant","TimePicker","props","onChange","noop","alwaysShowMask","showIcon","dropdown","maskOverwrite","minuteOffset","disabled","errorMessage","warningMessage","messageWhiteSpace","className","inputProps","remainingProps","initialTime","timeValue","setTimeValue","useState","isDropdownOpen","setIsDropdownOpen","effectiveMinuteOffset","isInputDisabled","timePickerRef","useRef","hasMountedRef","suppressNextAcceptRef","clickOutsideRef","useClickOutside","mergedTimePickerRefs","useMergeRefs","useEffect","handleFocus","event","input","handleAcceptTime","val","maskRef","handleIncrease","moment","rounded","updatedTimeValue","handleDecrease","inputClassName","otherInputProps","dropdownOptions","option","handleSelectDropdownValue","selectedItem","hasFeedback","wrapperClassName","classNames","jsxs","jsx","IMaskInput","IMask","Fragment","BaseSelectDropdown"],"mappings":"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"}
+{"version":3,"file":"TimePicker.js","names":[],"sources":["../../../src/components/timepicker/TimePicker.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport { IMask, IMaskInput } from 'react-imask';\nimport type { InputMask } from 'imask';\nimport { noop } from 'es-toolkit/compat';\nimport { isNil } from 'es-toolkit/predicate';\nimport moment, { type Moment } from 'moment';\nimport invariant from 'tiny-invariant';\n\nimport BaseSelectDropdown, { type SelectOption } from '../selects/BaseSelectDropdown';\nimport useClickOutside from '../../useClickOutside';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport classNames from '../../utils/classNames';\n\nconst MINUTES_OFFSET = 15;\n\nconst mask = '00:00';\nconst fullRegexp = /^(?:\\d|[01]\\d|2[0-3]):[0-5]\\d$/;\n\nconst getPadded = (value: number) => (value >= 10 ? `${value}` : `0${value}`);\nconst formatTimeString = (hours: number, minutes: number) => `${getPadded(hours)}:${getPadded(minutes)}`;\n\nconst roundedUp = (time: Moment, offset = MINUTES_OFFSET) => Math.floor(time.minutes() / offset) * offset;\nconst isValidMinuteOffset = (offset: number) => Number.isInteger(offset) && offset > 0 && offset <= 60;\nconst getEffectiveMinuteOffset = (offset: number) => (isValidMinuteOffset(offset) ? offset : MINUTES_OFFSET);\nconst getDropdownTimeValues = (offset: number) => {\n    const values: string[] = [];\n    const minutesPerDay = 24 * 60;\n    for (let totalMinutes = 0; totalMinutes < minutesPerDay; totalMinutes += offset) {\n        const hours = Math.floor(totalMinutes / 60);\n        const minutes = totalMinutes % 60;\n        values.push(formatTimeString(hours, minutes));\n    }\n    return values;\n};\n\nconst getInitialTime = () => {\n    const date = new Date();\n    const hours = date.getHours();\n    const minutes = date.getMinutes();\n    return formatTimeString(hours, minutes);\n};\n\nconst isTimeValid = (value: string) => fullRegexp.test(value);\n\nconst isControlledAndValid = (value: string | undefined): value is string => {\n    const hasExternalValue = !isNil(value);\n    if (!hasExternalValue) {\n        return false;\n    }\n\n    const isValid = value === '' || isTimeValid(value);\n    if (!isValid) {\n        invariant(false, 'Wrong time format. Please pass in value with the following format: \"hh:mm\".');\n    }\n    return isValid;\n};\n\nexport type TimePickerProps = {\n    /**\n     * Value of the time as string. Note, when value is given the component is treated as controlled.\n     */\n    value?: string;\n\n    /**\n     * Callback function when the value changes and is a valid time format.\n     * It also emits an empty string when the input is cleared.\n     *\n     * If not it handles the state internally until the time is valid and filled.\n     */\n    onChange?: (value: string) => void;\n\n    /**\n     * Defines whether to always show the input mask placeholder.\n     *\n     * @default true\n     */\n    alwaysShowMask?: boolean;\n\n    /**\n     * Defines whether to show the input icon.\n     *\n     * @default false\n     */\n    showIcon?: boolean;\n\n    /**\n     * Defines whether to show a dropdown with pre-defined time values.\n     *\n     * @default false\n     */\n    dropdown?: boolean;\n\n    /**\n     * Configures IMask overwrite behavior for manual input editing.\n     *\n     * @default 'shift'\n     */\n    maskOverwrite?: boolean | 'shift';\n\n    /**\n     * Defines the minute interval for time controls and dropdown values.\n     * Invalid values fallback to 15.\n     *\n     * @default 15\n     */\n    minuteOffset?: number;\n\n    /**\n     * Defines whether the component is disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\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     * Additional properties to be set on the input element.\n     */\n    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nconst TimePicker = (props: TimePickerProps) => {\n    const {\n        value,\n        onChange = noop,\n        alwaysShowMask = true,\n        showIcon = false,\n        dropdown = false,\n        maskOverwrite = 'shift',\n        minuteOffset = MINUTES_OFFSET,\n        disabled = false,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace = 'normal',\n        className = '',\n        inputProps = {},\n        ...remainingProps\n    } = props;\n\n    const initialTime = isControlledAndValid(value) ? value : getInitialTime();\n\n    const [timeValue, setTimeValue] = useState(initialTime);\n\n    const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n    const effectiveMinuteOffset = getEffectiveMinuteOffset(minuteOffset);\n\n    const isInputDisabled = disabled || !!inputProps.disabled;\n    const timePickerRef = useRef<HTMLDivElement>(null);\n    const hasMountedRef = useRef(false);\n    const suppressNextAcceptRef = useRef(false);\n\n    const clickOutsideRef = useClickOutside(() => {\n        if (dropdown) {\n            setIsDropdownOpen(false);\n        }\n    });\n\n    const mergedTimePickerRefs = useMergeRefs(timePickerRef, clickOutsideRef);\n\n    // Update internal time value from outside when used as a controlled component\n    useEffect(() => {\n        if (isControlledAndValid(value)) {\n            setTimeValue(value);\n        }\n    }, [value]);\n\n    useEffect(() => {\n        hasMountedRef.current = true;\n\n        return () => {\n            hasMountedRef.current = false;\n        };\n    }, []);\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        const input = event.target;\n        // Check if value is empty or partially filled\n        if (!input.value || input.value.startsWith('-')) {\n            // Move cursor to the first empty position (usually 0)\n            // Timeout needed to wait for IMask internal focus handling\n            setTimeout(() => {\n                input.setSelectionRange(0, 0);\n            }, 0);\n        }\n\n        // If you want to preserve custom onFocus from props\n        inputProps.onFocus?.(event);\n\n        if (dropdown && !isInputDisabled) {\n            setIsDropdownOpen(true);\n        }\n    };\n\n    const handleAcceptTime = (val: string, maskRef: InputMask<{ [x: string]: unknown }>) => {\n        if (suppressNextAcceptRef.current) {\n            suppressNextAcceptRef.current = false;\n            return;\n        }\n\n        setTimeValue(val);\n\n        if (!hasMountedRef.current) {\n            return;\n        }\n\n        if (maskRef.masked.isComplete) {\n            onChange(val);\n            return;\n        }\n\n        if (maskRef.unmaskedValue === '') {\n            onChange('');\n        }\n    };\n\n    const isValid = isTimeValid(timeValue);\n\n    const handleIncrease = () => {\n        const time = moment(`2020-01-01 ${timeValue}`);\n        const rounded = roundedUp(time, effectiveMinuteOffset);\n        time.minute(rounded).second(0);\n        time.add(effectiveMinuteOffset, 'minutes');\n        const updatedTimeValue = formatTimeString(time.hours(), time.minutes());\n\n        setTimeValue(updatedTimeValue);\n    };\n\n    const handleDecrease = () => {\n        const time = moment(`2020-01-01 ${timeValue}`);\n        const rounded = roundedUp(time, effectiveMinuteOffset);\n        time.minute(rounded).second(0);\n        time.subtract(effectiveMinuteOffset, 'minutes');\n        const updatedTimeValue = formatTimeString(time.hours(), time.minutes());\n\n        setTimeValue(updatedTimeValue);\n    };\n\n    const { className: inputClassName, ...otherInputProps } = inputProps;\n\n    const dropdownOptions: SelectOption[] = getDropdownTimeValues(effectiveMinuteOffset).map(option => ({\n        id: option,\n        label: option,\n        selected: option === timeValue,\n    }));\n\n    const handleSelectDropdownValue = (selectedItem: SelectOption | undefined) => {\n        if (!selectedItem || isInputDisabled) {\n            return;\n        }\n\n        suppressNextAcceptRef.current = true;\n        setTimeValue(selectedItem.id);\n        onChange(selectedItem.id);\n        setIsDropdownOpen(false);\n    };\n\n    const hasFeedback = errorMessage || warningMessage;\n\n    const wrapperClassName = classNames('TimePicker', dropdown && 'dropdown', isDropdownOpen && 'open', className);\n\n    return (\n        <div {...remainingProps} className={wrapperClassName} ref={mergedTimePickerRefs}>\n            <div className='input-group'>\n                {showIcon && (\n                    <span className='input-group-addon'>\n                        <span className='uikit-icon icon-time-alt' />\n                    </span>\n                )}\n                <div className='form-control-feedback-wrapper'>\n                    <IMaskInput\n                        {...otherInputProps}\n                        className={classNames('TimePickerInput', 'form-control', inputClassName)}\n                        disabled={isInputDisabled}\n                        mask='HH:MM'\n                        blocks={{\n                            HH: {\n                                mask: IMask.MaskedRange,\n                                from: 0,\n                                to: 23,\n                                maxLength: 2,\n                            },\n                            MM: {\n                                mask: IMask.MaskedRange,\n                                from: 0,\n                                to: 59,\n                                maxLength: 2,\n                            },\n                        }}\n                        value={timeValue}\n                        onAccept={handleAcceptTime}\n                        onFocus={handleFocus}\n                        lazy={!alwaysShowMask}\n                        placeholderChar='-'\n                        overwrite={maskOverwrite}\n                    />\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                {isValid && (\n                    <div\n                        className={classNames(\n                            'TimePickerIncreaseButton input-group-addon',\n                            isInputDisabled && 'pointer-events-none bg-lightest'\n                        )}\n                    >\n                        <div\n                            className='text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer'\n                            onClick={handleDecrease}\n                        >\n                            <div className='uikit-icon icon-chevron-left scale-90' />\n                        </div>\n                        <div\n                            className='text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer'\n                            onClick={handleIncrease}\n                        >\n                            <div className='uikit-icon icon-chevron-right scale-90' />\n                        </div>\n                    </div>\n                )}\n            </div>\n            {dropdown && (\n                <BaseSelectDropdown\n                    isOpen={isDropdownOpen}\n                    options={dropdownOptions}\n                    onSelect={handleSelectDropdownValue}\n                    dropdownClassName='max-height-200 overflow-auto width-100pct'\n                />\n            )}\n        </div>\n    );\n};\n\nexport default TimePicker;\n"],"mappings":"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"}

package/components/tooltip/SimpleTooltip.d.ts

@@ -43,10 +43,6 @@ export type SimpleTooltipProps = Omit<TooltipProps, 'content'> & {
      * }
      */
     delay?: number | DelayProp;
-    /**
-     * A Popper.js config object passed to the the underlying popper instance.
-     */
-    popperConfig?: object;
 };
 declare const SimpleTooltip: {
     (props: PropsWithChildren<SimpleTooltipProps>): import("react/jsx-runtime").JSX.Element;

package/components/tooltip/SimpleTooltip.js

@@ -1,35 +1,25 @@
-import { jsx as e } from "react/jsx-runtime";
-import a from "./Tooltip.js";
-import C from "../overlay/OverlayTrigger.js";
-import { PLACEMENT as E } from "../../values/Placement.js";
-import { TRIGGER as r } from "../../values/Trigger.js";
-const o = (t) => {
-  const {
-    children: i,
-    placement: p = E.AUTO,
-    trigger: m,
-    content: n,
-    delay: R,
-    popperConfig: l,
-    targetRef: f,
-    ...T
-  } = t;
-  return /* @__PURE__ */ e(
-    C,
-    {
-      placement: p,
-      trigger: m,
-      overlay: /* @__PURE__ */ e(a, { ...T, ref: f, children: n }),
-      delay: R,
-      popperConfig: l,
-      children: i
-    }
-  );
+import { PLACEMENT as e } from "../../values/Placement.js";
+import t from "./Tooltip.js";
+import { TRIGGER as n } from "../../values/Trigger.js";
+import r from "../overlay/OverlayTrigger.js";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/tooltip/SimpleTooltip.tsx
+var a = (n) => {
+	let { children: a, placement: o = e.BOTTOM, trigger: s, content: c, delay: l, targetRef: u, ...d } = n;
+	return /* @__PURE__ */ i(r, {
+		placement: o,
+		trigger: s,
+		overlay: /* @__PURE__ */ i(t, {
+			...d,
+			ref: u,
+			children: c
+		}),
+		delay: l,
+		children: a
+	});
 };
-o.TRIGGER_CLICK = r.CLICK;
-o.TRIGGER_HOVER = r.HOVER;
-o.TRIGGER_FOCUS = r.FOCUS;
-export {
-  o as default
-};
-//# sourceMappingURL=SimpleTooltip.js.map
+a.TRIGGER_CLICK = n.CLICK, a.TRIGGER_HOVER = n.HOVER, a.TRIGGER_FOCUS = n.FOCUS;
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=SimpleTooltip.js.map

package/components/tooltip/SimpleTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleTooltip.js","sources":["../../../src/components/tooltip/SimpleTooltip.tsx"],"sourcesContent":["import type { MutableRefObject, PropsWithChildren } from 'react';\n\nimport Tooltip, { type TooltipProps } from './Tooltip';\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport { PLACEMENT } from '../../values/Placement';\nimport { TRIGGER, type TriggerType } from '../../values/Trigger';\n\nexport type DelayProp = {\n    /**\n     * A millisecond delay amount before showing the Overlay once triggered.\n     */\n    show: number;\n\n    /**\n     * A millisecond delay amount before hiding the Overlay once triggered.\n     */\n    hide: number;\n};\n\nexport type SimpleTooltipProps = Omit<TooltipProps, 'content'> & {\n    /**\n     * The tooltip content.\n     */\n    content: string | React.ReactNode;\n\n    /**\n     * Specify which action or actions trigger Overlay visibility.\n     *\n     * Possible values are:\n     *\n     * - `'hover'`\n     * - `'click'`\n     * - `'focus'`\n     *\n     * @default 'hover'\n     */\n    trigger?: TriggerType;\n\n    /**\n     * The react ref object assigned to the target of the tooltip.\n     */\n    targetRef?: MutableRefObject<HTMLDivElement>;\n\n    /**\n     * A millisecond delay amount to show the Overlay once triggered.\n     * If passed an Object, you can control the show and hide timeouts individually.\n     *\n     * @example\n     * {\n     *     show: 1_000,\n     *     delay: 500,\n     * }\n     */\n    delay?: number | DelayProp;\n\n    /**\n     * A Popper.js config object passed to the the underlying popper instance.\n     */\n    popperConfig?: object;\n};\n\nconst SimpleTooltip = (props: PropsWithChildren<SimpleTooltipProps>) => {\n    const {\n        children,\n        placement = PLACEMENT.AUTO,\n        trigger,\n        content,\n        delay,\n        popperConfig,\n        targetRef,\n        ...remainingProps\n    } = props;\n\n    return (\n        <OverlayTrigger\n            placement={placement}\n            trigger={trigger}\n            overlay={\n                <Tooltip {...remainingProps} ref={targetRef}>\n                    {content}\n                </Tooltip>\n            }\n            delay={delay}\n            popperConfig={popperConfig}\n        >\n            {children}\n        </OverlayTrigger>\n    );\n};\n\nSimpleTooltip.TRIGGER_CLICK = TRIGGER.CLICK;\nSimpleTooltip.TRIGGER_HOVER = TRIGGER.HOVER;\nSimpleTooltip.TRIGGER_FOCUS = TRIGGER.FOCUS;\n\nexport default SimpleTooltip;\n"],"names":["SimpleTooltip","props","children","placement","PLACEMENT","trigger","content","delay","popperConfig","targetRef","remainingProps","jsx","OverlayTrigger","Tooltip","TRIGGER"],"mappings":";;;;;AA6DA,MAAMA,IAAgB,CAACC,MAAiD;AACpE,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,WAAAC,IAAYC,EAAU;AAAA,IACtB,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHT;AAEJ,SACI,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAAT;AAAA,MACA,SAAAE;AAAA,MACA,SACI,gBAAAM,EAACE,GAAA,EAAS,GAAGH,GAAgB,KAAKD,GAC7B,UAAAH,GACL;AAAA,MAEJ,OAAAC;AAAA,MACA,cAAAC;AAAA,MAEC,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGb;AAEAF,EAAc,gBAAgBc,EAAQ;AACtCd,EAAc,gBAAgBc,EAAQ;AACtCd,EAAc,gBAAgBc,EAAQ;"}
+{"version":3,"file":"SimpleTooltip.js","names":[],"sources":["../../../src/components/tooltip/SimpleTooltip.tsx"],"sourcesContent":["import type { MutableRefObject, PropsWithChildren } from 'react';\n\nimport Tooltip, { type TooltipProps } from './Tooltip';\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport { PLACEMENT } from '../../values/Placement';\nimport { TRIGGER, type TriggerType } from '../../values/Trigger';\n\nexport type DelayProp = {\n    /**\n     * A millisecond delay amount before showing the Overlay once triggered.\n     */\n    show: number;\n\n    /**\n     * A millisecond delay amount before hiding the Overlay once triggered.\n     */\n    hide: number;\n};\n\nexport type SimpleTooltipProps = Omit<TooltipProps, 'content'> & {\n    /**\n     * The tooltip content.\n     */\n    content: string | React.ReactNode;\n\n    /**\n     * Specify which action or actions trigger Overlay visibility.\n     *\n     * Possible values are:\n     *\n     * - `'hover'`\n     * - `'click'`\n     * - `'focus'`\n     *\n     * @default 'hover'\n     */\n    trigger?: TriggerType;\n\n    /**\n     * The react ref object assigned to the target of the tooltip.\n     */\n    targetRef?: MutableRefObject<HTMLDivElement>;\n\n    /**\n     * A millisecond delay amount to show the Overlay once triggered.\n     * If passed an Object, you can control the show and hide timeouts individually.\n     *\n     * @example\n     * {\n     *     show: 1_000,\n     *     delay: 500,\n     * }\n     */\n    delay?: number | DelayProp;\n};\n\nconst SimpleTooltip = (props: PropsWithChildren<SimpleTooltipProps>) => {\n    const { children, placement = PLACEMENT.BOTTOM, trigger, content, delay, targetRef, ...remainingProps } = props;\n\n    return (\n        <OverlayTrigger\n            placement={placement}\n            trigger={trigger}\n            overlay={\n                <Tooltip {...remainingProps} ref={targetRef}>\n                    {content}\n                </Tooltip>\n            }\n            delay={delay}\n        >\n            {children}\n        </OverlayTrigger>\n    );\n};\n\nSimpleTooltip.TRIGGER_CLICK = TRIGGER.CLICK;\nSimpleTooltip.TRIGGER_HOVER = TRIGGER.HOVER;\nSimpleTooltip.TRIGGER_FOCUS = TRIGGER.FOCUS;\n\nexport default SimpleTooltip;\n"],"mappings":";;;;;;AAwDA,IAAM,KAAiB,MAAiD;CACpE,IAAM,EAAE,aAAU,eAAY,EAAU,QAAQ,YAAS,YAAS,UAAO,cAAW,GAAG,MAAmB;CAE1G,OACI,kBAAC,GAAD;EACe;EACF;EACT,SACI,kBAAC,GAAD;GAAS,GAAI;GAAgB,KAAK;aAC7B;EACI,CAAA;EAEN;EAEN;CACW,CAAA;AAExB;AAEA,EAAc,gBAAgB,EAAQ,OACtC,EAAc,gBAAgB,EAAQ,OACtC,EAAc,gBAAgB,EAAQ"}

package/components/tooltip/Tooltip.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, PropsWithChildren, HTMLAttributes } from 'react';
-import { PLACEMENT } from '../../values/Placement';
+import { PLACEMENT, Placement } from '../../values/Placement';
 import { TEXT_ALIGNMENT } from '../../values/TextAlignment';
 import { ObjectValues } from '../../utils/ObjectValues';
 import { RefComponent } from '../../utils/RefComponent';
@@ -24,7 +24,7 @@ export type TooltipProps = {
      *
      * @default 'bottom'
      */
-    placement?: ObjectValues<typeof PLACEMENT>;
+    placement?: Placement;
     /**
      * Defines the position of the text content.
      *

package/components/tooltip/Tooltip.js

@@ -1,67 +1,40 @@
-import { jsx as t, jsxs as M } from "react/jsx-runtime";
-import { forwardRef as I, useState as w, useEffect as G } from "react";
-import { omit as g } from "es-toolkit/compat";
-import l from "../../utils/classNames.js";
-import { isDesktop as h } from "../../utils/deviceUtils.js";
-import { PLACEMENT as x } from "../../values/Placement.js";
-import { TEXT_ALIGNMENT as o } from "../../values/TextAlignment.js";
-const C = {
-  STYLE_DEFAULT: "default",
-  STYLE_ONBOARDING: "onboarding"
-}, O = {
-  TEXT_ALIGNMENT_LEFT: o.LEFT,
-  TEXT_ALIGNMENT_CENTER: o.CENTER,
-  TEXT_ALIGNMENT_RIGHT: o.RIGHT
-}, s = I((p, T) => {
-  const {
-    allowOnTouch: m = !1,
-    arrowProps: c,
-    children: E,
-    className: N = "",
-    innerClassName: e = "",
-    placement: a = "bottom",
-    style: f,
-    textAlignment: i = "center",
-    tooltipStyle: r = "default",
-    width: n = "auto",
-    ...d
-  } = g(p, ["popper", "positionLeft", "positionTop"]), [L, u] = w(!1);
-  if (G(() => u(!0), []), !h() && !m)
-    return /* @__PURE__ */ t("span", { className: "display-none" });
-  const _ = l(
-    "tooltip",
-    r && `tooltip-${r}`,
-    a,
-    "fade",
-    L && "show",
-    N
-  ), A = l(
-    "tooltip-inner",
-    i && `text-${i}`,
-    n && `width-${n}`,
-    e && e
-  );
-  return /* @__PURE__ */ M(
-    "div",
-    {
-      ...d,
-      role: "tooltip",
-      "x-placement": a,
-      ref: T,
-      className: _,
-      style: { ...f },
-      "data-offset": 20,
-      children: [
-        /* @__PURE__ */ t("div", { className: "tooltip-arrow", ...c }),
-        /* @__PURE__ */ t("div", { className: A, children: E })
-      ]
-    }
-  );
+import { isDesktop as e } from "../../utils/deviceUtils.js";
+import t from "../../utils/classNames.js";
+import { PLACEMENT as n } from "../../values/Placement.js";
+import { TEXT_ALIGNMENT as r } from "../../values/TextAlignment.js";
+import { forwardRef as i, useEffect as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/tooltip/Tooltip.tsx
+var l = {
+	STYLE_DEFAULT: "default",
+	STYLE_ONBOARDING: "onboarding"
+}, u = {
+	TEXT_ALIGNMENT_LEFT: r.LEFT,
+	TEXT_ALIGNMENT_CENTER: r.CENTER,
+	TEXT_ALIGNMENT_RIGHT: r.RIGHT
+}, d = i((n, r) => {
+	let { allowOnTouch: i = !1, arrowProps: l, children: u, className: d = "", innerClassName: f = "", placement: p = "bottom", style: m, textAlignment: h = "center", tooltipStyle: g = "default", width: _ = "auto", ...v } = n, [y, b] = o(!1);
+	if (a(() => b(!0), []), !e() && !i) return /* @__PURE__ */ s("span", { className: "display-none" });
+	let x = t("tooltip", g && `tooltip-${g}`, p, "fade", y && "show", d), S = t("tooltip-inner", h && `text-${h}`, _ && `width-${_}`, f && f), C = { popover: "manual" };
+	return /* @__PURE__ */ c("div", {
+		"data-overlay-arrow-placement": p,
+		...v,
+		...C,
+		role: "tooltip",
+		ref: r,
+		className: x,
+		style: { ...m },
+		children: [/* @__PURE__ */ s("div", {
+			className: "tooltip-arrow",
+			...l
+		}), /* @__PURE__ */ s("div", {
+			className: S,
+			children: u
+		})]
+	});
 });
-Object.assign(s, C);
-Object.assign(s, x);
-Object.assign(s, O);
-export {
-  s as default
-};
-//# sourceMappingURL=Tooltip.js.map
+Object.assign(d, l), Object.assign(d, n), Object.assign(d, u);
+//#endregion
+export { d as default };
+
+//# sourceMappingURL=Tooltip.js.map