@frontify/fondue 12.0.0-beta.1 → 12.0.0-beta.2

package/dist/components/TextInput/TextInput.es.js

@@ -4,8 +4,8 @@ import { useMemoizedId as H } from "../../hooks/useMemoizedId.es.js";
 import { useFocusRing as a } from "@react-aria/focus";
 import { FOCUS_STYLE as n } from "../../utilities/focusStyle.es.js";
 import { merge as i } from "../../utilities/merge.es.js";
-import { validationClassMap as J, Validation as h } from "../../utilities/validation.es.js";
-import t, { useRef as Q, useState as W, useEffect as C } from "react";
+import { validationClassMap as J, Validation as C } from "../../utilities/validation.es.js";
+import t, { useRef as Q, useState as W, useEffect as v } from "react";
 import "../../foundation/Icon/Generated/IconAdobeCreativeCloud.es.js";
 import "../../foundation/Icon/Generated/IconAdobeCreativeCloud12.es.js";
 import "../../foundation/Icon/Generated/IconAdobeCreativeCloud16.es.js";
@@ -1644,48 +1644,50 @@ import "../../foundation/Icon/Generated/IconWorkflowShapes24.es.js";
 import "../../foundation/Icon/Generated/IconWorkflowShapes32.es.js";
 import "../../foundation/Icon/IconsMap.es.js";
 var mt = /* @__PURE__ */ ((m) => (m.Text = "text", m.Password = "password", m.Number = "number", m))(mt || {});
-const jV = ({
+const LV = ({
   id: m,
   type: s = "text",
   decorator: f,
-  validation: d = h.Default,
-  clearable: v = !1,
-  placeholder: F,
-  required: I,
+  validation: d = C.Default,
+  clearable: F = !1,
+  placeholder: I,
+  required: N,
   obfuscated: p,
   disabled: o = !1,
-  autocomplete: N = !1,
-  dotted: P = !1,
+  autocomplete: P = !1,
+  dotted: V = !1,
   value: w = "",
-  copyable: V = !1,
+  copyable: B = !1,
   onChange: c,
   onEnterPressed: x,
-  onBlur: B,
+  onBlur: S,
   onClear: k,
-  size: O,
+  size: j,
   spellcheck: E,
   readonly: u,
-  focusOnMount: S
+  focusOnMount: g
 }) => {
-  const { isFocusVisible: j, focusProps: L } = a({ within: !0, isTextInput: !0 }), { isFocusVisible: z, focusProps: M } = a(), { isFocusVisible: R, focusProps: T } = a(), { isFocusVisible: D, focusProps: $ } = a(), { copy: A, status: b } = G(), e = Q(null), [l, g] = W(typeof p == "boolean" ? p : s === "password");
-  C(() => {
-    var r;
-    S && ((r = e.current) == null || r.focus());
-  }, []), C(() => {
-    typeof p == "boolean" && g(p);
+  const { isFocusVisible: L, focusProps: O } = a({ within: !0, isTextInput: !0 }), { isFocusVisible: T, focusProps: z } = a(), { isFocusVisible: R, focusProps: D } = a(), { isFocusVisible: M, focusProps: $ } = a(), { copy: A, status: b } = G(), e = Q(null), [l, y] = W(typeof p == "boolean" ? p : s === "password");
+  v(() => {
+    setTimeout(() => {
+      var r;
+      g && ((r = e.current) == null || r.focus());
+    }, 0);
+  }, [g]), v(() => {
+    typeof p == "boolean" && y(p);
   }, [p]);
   const K = (r) => {
     r.key === "Enter" && x && x(r);
   }, U = () => s === "password" ? l ? "password" : "text" : s, Y = typeof E == "boolean" ? { spellCheck: E } : null;
   return /* @__PURE__ */ t.createElement("div", {
-    ...L,
+    ...O,
     className: i([
       "tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-3 tw-border hover:tw-border-black-90 tw-transition tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent",
-      P ? "tw-border-dashed" : "tw-border-solid",
+      V ? "tw-border-dashed" : "tw-border-solid",
       o || u ? "tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90" : i([
         "focus-within:tw-border-black-90",
         J[d],
-        j && n
+        L && n
       ])
     ])
   }, f && /* @__PURE__ */ t.createElement("div", {
@@ -1706,56 +1708,56 @@ const jV = ({
       return (r = e.current) == null ? void 0 : r.focus();
     },
     onChange: (r) => c && c(r.currentTarget.value),
-    onBlur: B,
+    onBlur: S,
     onKeyDown: K,
-    placeholder: F,
+    placeholder: I,
     value: w,
     type: U(),
-    required: I,
+    required: N,
     readOnly: u,
     disabled: o,
-    autoComplete: N ? "on" : "off",
-    size: O,
+    autoComplete: P ? "on" : "off",
+    size: j,
     "data-test-id": "text-input",
     ...Y
-  }), `${w}`.length > 0 && v && /* @__PURE__ */ t.createElement("button", {
+  }), `${w}`.length > 0 && F && /* @__PURE__ */ t.createElement("button", {
     className: i([
       "tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded",
       o ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60  hover:tw-text-black-100",
-      z && n
+      T && n
     ]),
     onClick: () => {
-      var r, y;
-      (r = e.current) == null || r.focus(), (y = e.current) == null || y.setAttribute("value", ""), c && c(""), k && k();
+      var r, h;
+      (r = e.current) == null || r.focus(), (h = e.current) == null || h.setAttribute("value", ""), c && c(""), k && k();
     },
     "data-test-id": "clear-icon",
     title: "Clear text input",
     "aria-label": "clear text input",
     disabled: o,
     type: "button",
-    ...M
+    ...z
   }, /* @__PURE__ */ t.createElement(tt, null)), s === "password" && /* @__PURE__ */ t.createElement("button", {
     className: i([
       "tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded",
       o ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60 hover:tw-text-black-100",
       R && n
     ]),
-    onClick: () => g(!l),
+    onClick: () => y(!l),
     "data-test-id": "visibility-icon",
     title: "Toggle text visibility",
     type: "button",
     "aria-label": `${l ? "unveil" : "obfuscate"} text input`,
     disabled: o,
-    ...T
-  }, l ? /* @__PURE__ */ t.createElement(ot, null) : /* @__PURE__ */ t.createElement(it, null)), d === h.Loading && /* @__PURE__ */ t.createElement("span", {
+    ...D
+  }, l ? /* @__PURE__ */ t.createElement(ot, null) : /* @__PURE__ */ t.createElement(it, null)), d === C.Loading && /* @__PURE__ */ t.createElement("span", {
     className: "tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10"
   }, /* @__PURE__ */ t.createElement(_, {
     size: q.ExtraSmall
-  })), V && /* @__PURE__ */ t.createElement("button", {
+  })), B && /* @__PURE__ */ t.createElement("button", {
     className: i([
       "tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded",
       o ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60 hover:tw-text-black-100",
-      D && n
+      M && n
     ]),
     onClick: () => A(w),
     "data-test-id": "copy-icon",
@@ -1770,7 +1772,7 @@ const jV = ({
   }, /* @__PURE__ */ t.createElement(X, null))));
 };
 export {
-  jV as TextInput,
+  LV as TextInput,
   mt as TextInputType
 };
 //# sourceMappingURL=TextInput.es.js.map

package/dist/components/TextInput/TextInput.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.es.js","sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { useCopy } from '@hooks/useCopy';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport React, { FC, FocusEvent, KeyboardEvent, ReactNode, useEffect, useRef, useState } from 'react';\nimport { IconCheckMark, IconClipboard, IconCross, IconCrossCircle, IconEye, IconEyeOff } from '@foundation/Icon';\n\nexport enum TextInputType {\n    Text = 'text',\n    Password = 'password',\n    Number = 'number',\n}\n\nexport type TextInputBaseProps = {\n    id?: string;\n    type?: TextInputType;\n    decorator?: ReactNode;\n    dotted?: boolean;\n    clearable?: boolean;\n    placeholder?: string;\n    required?: boolean;\n    disabled?: boolean;\n    autocomplete?: boolean;\n    readonly?: boolean;\n    validation?: Validation;\n    copyable?: boolean;\n    value?: string;\n    onChange?: (value: string) => void;\n    onEnterPressed?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n    onClear?: () => void;\n    size?: number;\n    spellcheck?: boolean;\n    focusOnMount?: boolean;\n};\n\nexport type TextInputProps =\n    | ({\n          type?: TextInputType.Text;\n          obfuscated?: false;\n      } & TextInputBaseProps)\n    | ({\n          type?: TextInputType.Number;\n          obfuscated?: false;\n          min?: number;\n          max?: number;\n      } & TextInputBaseProps)\n    | ({\n          type: TextInputType.Password;\n          obfuscated?: boolean;\n      } & TextInputBaseProps);\n\nexport const TextInput: FC<TextInputProps> = ({\n    id: propId,\n    type = TextInputType.Text,\n    decorator,\n    validation = Validation.Default,\n    clearable = false,\n    placeholder,\n    required,\n    obfuscated,\n    disabled = false,\n    autocomplete = false,\n    dotted = false,\n    value = '',\n    copyable = false,\n    onChange,\n    onEnterPressed,\n    onBlur,\n    onClear,\n    size,\n    spellcheck,\n    readonly,\n    focusOnMount,\n}) => {\n    const { isFocusVisible, focusProps } = useFocusRing({ within: true, isTextInput: true });\n    const { isFocusVisible: clearButtonIsFocusVisible, focusProps: clearButtonFocusProps } = useFocusRing();\n    const { isFocusVisible: passwordButtonIsFocusVisible, focusProps: passwordButtonFocusProps } = useFocusRing();\n    const { isFocusVisible: copyButtonIsFocusVisible, focusProps: copyButtonFocusProps } = useFocusRing();\n\n    const { copy, status } = useCopy();\n\n    const inputElement = useRef<HTMLInputElement | null>(null);\n    const [isObfuscated, setIsObfuscated] = useState(\n        typeof obfuscated === 'boolean' ? obfuscated : type === TextInputType.Password,\n    );\n\n    useEffect(() => {\n        focusOnMount && inputElement.current?.focus();\n    }, []);\n\n    useEffect(() => {\n        if (typeof obfuscated === 'boolean') {\n            setIsObfuscated(obfuscated);\n        }\n    }, [obfuscated]);\n\n    const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            onEnterPressed && onEnterPressed(event);\n        }\n    };\n\n    const getInputType = () => {\n        if (type === TextInputType.Password) {\n            return isObfuscated ? TextInputType.Password : TextInputType.Text;\n        }\n        return type;\n    };\n\n    const spellcheckProp = typeof spellcheck === 'boolean' ? { spellCheck: spellcheck } : null;\n\n    return (\n        <div\n            {...focusProps}\n            className={merge([\n                'tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-3 tw-border hover:tw-border-black-90 tw-transition tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent',\n                dotted ? 'tw-border-dashed' : 'tw-border-solid',\n                disabled || readonly\n                    ? 'tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90'\n                    : merge([\n                          'focus-within:tw-border-black-90',\n                          validationClassMap[validation],\n                          isFocusVisible && FOCUS_STYLE,\n                      ]),\n            ])}\n        >\n            {decorator && (\n                <div\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-pl-1',\n                        disabled ? 'tw-text-black-60' : 'tw-text-black-80',\n                    ])}\n                    data-test-id=\"decorator\"\n                >\n                    {decorator}\n                </div>\n            )}\n            <input\n                id={useMemoizedId(propId)}\n                ref={inputElement}\n                className={merge([\n                    'tw-w-full tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows',\n                    disabled || readonly\n                        ? 'tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40'\n                        : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n                ])}\n                onClick={() => inputElement.current?.focus()}\n                onChange={(event) => onChange && onChange(event.currentTarget.value)}\n                onBlur={onBlur}\n                onKeyDown={onKeyDown}\n                placeholder={placeholder}\n                value={value}\n                type={getInputType()}\n                required={required}\n                readOnly={readonly}\n                disabled={disabled}\n                autoComplete={autocomplete ? 'on' : 'off'}\n                size={size}\n                data-test-id=\"text-input\"\n                {...spellcheckProp}\n            />\n            {`${value}`.length > 0 && clearable && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60  hover:tw-text-black-100',\n                        clearButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => {\n                        inputElement.current?.focus();\n                        inputElement.current?.setAttribute('value', '');\n\n                        onChange && onChange('');\n                        onClear && onClear();\n                    }}\n                    data-test-id=\"clear-icon\"\n                    title=\"Clear text input\"\n                    aria-label=\"clear text input\"\n                    disabled={disabled}\n                    type=\"button\"\n                    {...clearButtonFocusProps}\n                >\n                    <IconCross />\n                </button>\n            )}\n            {type === TextInputType.Password && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n                        passwordButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => setIsObfuscated(!isObfuscated)}\n                    data-test-id=\"visibility-icon\"\n                    title=\"Toggle text visibility\"\n                    type=\"button\"\n                    aria-label={`${isObfuscated ? 'unveil' : 'obfuscate'} text input`}\n                    disabled={disabled}\n                    {...passwordButtonFocusProps}\n                >\n                    {isObfuscated ? <IconEye /> : <IconEyeOff />}\n                </button>\n            )}\n            {validation === Validation.Loading && (\n                <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10\">\n                    <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n                </span>\n            )}\n            {copyable && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n                        copyButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => copy(value)}\n                    data-test-id=\"copy-icon\"\n                    title=\"Copy input text\"\n                    disabled={disabled}\n                    type=\"button\"\n                    {...copyButtonFocusProps}\n                >\n                    {status === 'error' && (\n                        <span className=\"tw-text-box-negative-strong\">\n                            <IconCrossCircle />\n                        </span>\n                    )}\n                    {status === 'idle' && <IconClipboard />}\n                    {status === 'success' && (\n                        <span className=\"tw-text-box-positive-strong\">\n                            <IconCheckMark />\n                        </span>\n                    )}\n                </button>\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"version":3,"file":"TextInput.es.js","sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { useCopy } from '@hooks/useCopy';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport React, { FC, FocusEvent, KeyboardEvent, ReactNode, useEffect, useRef, useState } from 'react';\nimport { IconCheckMark, IconClipboard, IconCross, IconCrossCircle, IconEye, IconEyeOff } from '@foundation/Icon';\n\nexport enum TextInputType {\n    Text = 'text',\n    Password = 'password',\n    Number = 'number',\n}\n\nexport type TextInputBaseProps = {\n    id?: string;\n    type?: TextInputType;\n    decorator?: ReactNode;\n    dotted?: boolean;\n    clearable?: boolean;\n    placeholder?: string;\n    required?: boolean;\n    disabled?: boolean;\n    autocomplete?: boolean;\n    readonly?: boolean;\n    validation?: Validation;\n    copyable?: boolean;\n    value?: string;\n    onChange?: (value: string) => void;\n    onEnterPressed?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n    onClear?: () => void;\n    size?: number;\n    spellcheck?: boolean;\n    focusOnMount?: boolean;\n};\n\nexport type TextInputProps =\n    | ({\n          type?: TextInputType.Text;\n          obfuscated?: false;\n      } & TextInputBaseProps)\n    | ({\n          type?: TextInputType.Number;\n          obfuscated?: false;\n          min?: number;\n          max?: number;\n      } & TextInputBaseProps)\n    | ({\n          type: TextInputType.Password;\n          obfuscated?: boolean;\n      } & TextInputBaseProps);\n\nexport const TextInput: FC<TextInputProps> = ({\n    id: propId,\n    type = TextInputType.Text,\n    decorator,\n    validation = Validation.Default,\n    clearable = false,\n    placeholder,\n    required,\n    obfuscated,\n    disabled = false,\n    autocomplete = false,\n    dotted = false,\n    value = '',\n    copyable = false,\n    onChange,\n    onEnterPressed,\n    onBlur,\n    onClear,\n    size,\n    spellcheck,\n    readonly,\n    focusOnMount,\n}) => {\n    const { isFocusVisible, focusProps } = useFocusRing({ within: true, isTextInput: true });\n    const { isFocusVisible: clearButtonIsFocusVisible, focusProps: clearButtonFocusProps } = useFocusRing();\n    const { isFocusVisible: passwordButtonIsFocusVisible, focusProps: passwordButtonFocusProps } = useFocusRing();\n    const { isFocusVisible: copyButtonIsFocusVisible, focusProps: copyButtonFocusProps } = useFocusRing();\n\n    const { copy, status } = useCopy();\n\n    const inputElement = useRef<HTMLInputElement | null>(null);\n    const [isObfuscated, setIsObfuscated] = useState(\n        typeof obfuscated === 'boolean' ? obfuscated : type === TextInputType.Password,\n    );\n\n    useEffect(() => {\n        setTimeout(() => {\n            focusOnMount && inputElement.current?.focus();\n        }, 0);\n    }, [focusOnMount]);\n\n    useEffect(() => {\n        if (typeof obfuscated === 'boolean') {\n            setIsObfuscated(obfuscated);\n        }\n    }, [obfuscated]);\n\n    const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            onEnterPressed && onEnterPressed(event);\n        }\n    };\n\n    const getInputType = () => {\n        if (type === TextInputType.Password) {\n            return isObfuscated ? TextInputType.Password : TextInputType.Text;\n        }\n        return type;\n    };\n\n    const spellcheckProp = typeof spellcheck === 'boolean' ? { spellCheck: spellcheck } : null;\n\n    return (\n        <div\n            {...focusProps}\n            className={merge([\n                'tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-3 tw-border hover:tw-border-black-90 tw-transition tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent',\n                dotted ? 'tw-border-dashed' : 'tw-border-solid',\n                disabled || readonly\n                    ? 'tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90'\n                    : merge([\n                          'focus-within:tw-border-black-90',\n                          validationClassMap[validation],\n                          isFocusVisible && FOCUS_STYLE,\n                      ]),\n            ])}\n        >\n            {decorator && (\n                <div\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-pl-1',\n                        disabled ? 'tw-text-black-60' : 'tw-text-black-80',\n                    ])}\n                    data-test-id=\"decorator\"\n                >\n                    {decorator}\n                </div>\n            )}\n            <input\n                id={useMemoizedId(propId)}\n                ref={inputElement}\n                className={merge([\n                    'tw-w-full tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows',\n                    disabled || readonly\n                        ? 'tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40'\n                        : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n                ])}\n                onClick={() => inputElement.current?.focus()}\n                onChange={(event) => onChange && onChange(event.currentTarget.value)}\n                onBlur={onBlur}\n                onKeyDown={onKeyDown}\n                placeholder={placeholder}\n                value={value}\n                type={getInputType()}\n                required={required}\n                readOnly={readonly}\n                disabled={disabled}\n                autoComplete={autocomplete ? 'on' : 'off'}\n                size={size}\n                data-test-id=\"text-input\"\n                {...spellcheckProp}\n            />\n            {`${value}`.length > 0 && clearable && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60  hover:tw-text-black-100',\n                        clearButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => {\n                        inputElement.current?.focus();\n                        inputElement.current?.setAttribute('value', '');\n\n                        onChange && onChange('');\n                        onClear && onClear();\n                    }}\n                    data-test-id=\"clear-icon\"\n                    title=\"Clear text input\"\n                    aria-label=\"clear text input\"\n                    disabled={disabled}\n                    type=\"button\"\n                    {...clearButtonFocusProps}\n                >\n                    <IconCross />\n                </button>\n            )}\n            {type === TextInputType.Password && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n                        passwordButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => setIsObfuscated(!isObfuscated)}\n                    data-test-id=\"visibility-icon\"\n                    title=\"Toggle text visibility\"\n                    type=\"button\"\n                    aria-label={`${isObfuscated ? 'unveil' : 'obfuscate'} text input`}\n                    disabled={disabled}\n                    {...passwordButtonFocusProps}\n                >\n                    {isObfuscated ? <IconEye /> : <IconEyeOff />}\n                </button>\n            )}\n            {validation === Validation.Loading && (\n                <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10\">\n                    <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n                </span>\n            )}\n            {copyable && (\n                <button\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded',\n                        disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-60 hover:tw-text-black-100',\n                        copyButtonIsFocusVisible && FOCUS_STYLE,\n                    ])}\n                    onClick={() => copy(value)}\n                    data-test-id=\"copy-icon\"\n                    title=\"Copy input text\"\n                    disabled={disabled}\n                    type=\"button\"\n                    {...copyButtonFocusProps}\n                >\n                    {status === 'error' && (\n                        <span className=\"tw-text-box-negative-strong\">\n                            <IconCrossCircle />\n                        </span>\n                    )}\n                    {status === 'idle' && <IconClipboard />}\n                    {status === 'success' && (\n                        <span className=\"tw-text-box-positive-strong\">\n                            <IconCheckMark />\n                        </span>\n                    )}\n                </button>\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYY,IAAA,uBAAA,MACD,GAAA,OAAA,QACI,EAAA,WAAA,YACF,EAAA,SAAA,UAHD,IAAA,MAAA,CAAA,CAAA;AA6CL,MAAM,KAAgC,CAAC;AAAA,EAC1C,IAAI;AAAA,EACJ,UAAO;AAAA,EACP;AAAA,EACA,gBAAa,EAAW;AAAA,EACxB,eAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAW;AAAA,EACX,kBAAe;AAAA,EACf,YAAS;AAAA,EACT,WAAQ;AAAA,EACR,cAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACE;AACI,QAAA,EAAE,mBAAgB,kBAAe,EAAa,EAAE,QAAQ,IAAM,aAAa,GAAA,CAAM,GACjF,EAAE,gBAAgB,GAA2B,YAAY,MAA0B,KACnF,EAAE,gBAAgB,GAA8B,YAAY,MAA6B,KACzF,EAAE,gBAAgB,GAA0B,YAAY,MAAyB,KAEjF,EAAE,SAAM,cAAW,EAAQ,GAE3B,IAAe,EAAgC,IAAI,GACnD,CAAC,GAAc,KAAmB,EACpC,OAAO,KAAe,YAAY,IAAa,MAAS;AAG5D,IAAU,MAAM;AACZ,eAAW,MAAM;;AACG,WAAA,QAAa,YAAb,UAAsB;AAAA,OACvC,CAAC;AAAA,EAAA,GACL,CAAC,CAAY,CAAC,GAEjB,EAAU,MAAM;AACR,IAAA,OAAO,KAAe,aACtB,EAAgB,CAAU;AAAA,EAC9B,GACD,CAAC,CAAU,CAAC;AAET,QAAA,IAAY,CAAC,MAA2C;AACtD,IAAA,EAAM,QAAQ,WACd,KAAkB,EAAe,CAAK;AAAA,EAC1C,GAGE,IAAe,MACb,MAAS,aACF,IAAe,aAAyB,SAE5C,GAGL,IAAiB,OAAO,KAAe,YAAY,EAAE,YAAY,EAAe,IAAA;AAEtF,SACK,kBAAA,cAAA,OAAA;AAAA,IACI,GAAG;AAAA,IACJ,WAAW,EAAM;AAAA,MACb;AAAA,MACA,IAAS,qBAAqB;AAAA,MAC9B,KAAY,IACN,gFACA,EAAM;AAAA,QACF;AAAA,QACA,EAAmB;AAAA,QACnB,KAAkB;AAAA,MAAA,CACrB;AAAA,IAAA,CACV;AAAA,EAAA,GAEA,KACI,kBAAA,cAAA,OAAA;AAAA,IACG,WAAW,EAAM;AAAA,MACb;AAAA,MACA,IAAW,qBAAqB;AAAA,IAAA,CACnC;AAAA,IACD,gBAAa;AAAA,EAEZ,GAAA,CACL,GAEH,kBAAA,cAAA,SAAA;AAAA,IACG,IAAI,EAAc,CAAM;AAAA,IACxB,KAAK;AAAA,IACL,WAAW,EAAM;AAAA,MACb;AAAA,MACA,KAAY,IACN,gGACA;AAAA,IAAA,CACT;AAAA,IACD,SAAS,MAAM;;AAAA,oBAAa,YAAb,kBAAsB;AAAA;AAAA,IACrC,UAAU,CAAC,MAAU,KAAY,EAAS,EAAM,cAAc,KAAK;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM,EAAa;AAAA,IACnB;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,cAAc,IAAe,OAAO;AAAA,IACpC;AAAA,IACA,gBAAa;AAAA,IACZ,GAAG;AAAA,EAAA,CACR,GACC,GAAG,IAAQ,SAAS,KAAK,KACrB,kBAAA,cAAA,UAAA;AAAA,IACG,WAAW,EAAM;AAAA,MACb;AAAA,MACA,IAAW,uCAAuC;AAAA,MAClD,KAA6B;AAAA,IAAA,CAChC;AAAA,IACD,SAAS,MAAM;;AACX,aAAa,YAAb,UAAsB,SACT,OAAA,YAAA,UAAS,aAAa,SAAS,KAE5C,KAAY,EAAS,EAAE,GACvB,KAAW,EAAQ;AAAA,IACvB;AAAA,IACA,gBAAa;AAAA,IACb,OAAM;AAAA,IACN,cAAW;AAAA,IACX;AAAA,IACA,MAAK;AAAA,IACJ,GAAG;AAAA,EAAA,mCAEH,IAAU,IAAA,CACf,GAEH,MAAS,cACL,kBAAA,cAAA,UAAA;AAAA,IACG,WAAW,EAAM;AAAA,MACb;AAAA,MACA,IAAW,uCAAuC;AAAA,MAClD,KAAgC;AAAA,IAAA,CACnC;AAAA,IACD,SAAS,MAAM,EAAgB,CAAC,CAAY;AAAA,IAC5C,gBAAa;AAAA,IACb,OAAM;AAAA,IACN,MAAK;AAAA,IACL,cAAY,GAAG,IAAe,WAAW;AAAA,IACzC;AAAA,IACC,GAAG;AAAA,EAAA,GAEH,IAAgB,kBAAA,cAAA,IAAA,IAAQ,IAAK,kBAAA,cAAC,IAAW,IAAA,CAC9C,GAEH,MAAe,EAAW,WACtB,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EAAA,GACX,kBAAA,cAAA,GAAA;AAAA,IAAc,MAAM,EAAkB;AAAA,EAAY,CAAA,CACvD,GAEH,KACI,kBAAA,cAAA,UAAA;AAAA,IACG,WAAW,EAAM;AAAA,MACb;AAAA,MACA,IAAW,uCAAuC;AAAA,MAClD,KAA4B;AAAA,IAAA,CAC/B;AAAA,IACD,SAAS,MAAM,EAAK,CAAK;AAAA,IACzB,gBAAa;AAAA,IACb,OAAM;AAAA,IACN;AAAA,IACA,MAAK;AAAA,IACJ,GAAG;AAAA,EAEH,GAAA,MAAW,WACP,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EAAA,GACZ,kBAAA,cAAC,IAAgB,IAAA,CACrB,GAEH,MAAW,UAAU,kBAAA,cAAC,GAAc,IAAA,GACpC,MAAW,aACP,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EAAA,GACX,kBAAA,cAAA,GAAA,IAAc,CACnB,CAER,CAER;AAER;"}

package/dist/components/Tooltip/Tooltip.es.js

@@ -63,14 +63,14 @@ const fe = {
   children: G,
   position: k = "Bottom",
   alignment: g = "Middle",
-  withArrow: i,
+  withArrow: b,
   flip: J = !0,
   triggerElement: M,
   hoverDelay: K = 200,
   open: L = !1
 }) => {
   var T, O;
-  const o = f(null), y = f(null), { linkProps: Q } = ae({}, y), W = le(() => c || d || r || w || u, [c, d, r, w, u]), X = fe[`${k}-${g}`], s = f(null), p = f(null), [Z, R] = Y(null), A = i ? 10 : 5, b = we(o == null ? void 0 : o.current, s.current, {
+  const o = f(null), y = f(null), { linkProps: Q } = ae({}, y), W = le(() => c || d || r || w || u, [c, d, r, w, u]), X = fe[`${k}-${g}`], s = f(null), p = f(null), [Z, R] = Y(null), A = b ? 10 : 5, i = we(o == null ? void 0 : o.current, s.current, {
     placement: X,
     strategy: "fixed",
     modifiers: [
@@ -91,7 +91,7 @@ const fe = {
         enabled: J
       }
     ]
-  }), H = (O = (T = b.state) == null ? void 0 : T.placement) != null ? O : k, U = ue(H, d, g), [ee, l] = Y(!1), S = f(null), te = E(() => {
+  }), H = (O = (T = i.state) == null ? void 0 : T.placement) != null ? O : k, U = ue(H, d, g), [ee, l] = Y(!1), S = f(null), te = E(() => {
     S.current && clearTimeout(S.current), l(!0);
   }, [o == null ? void 0 : o.current]), N = E(() => {
     S.current = setTimeout(() => l(!1), K);
@@ -112,13 +112,13 @@ const fe = {
     ref: p
   }, M && x(M, {
     ref: o
-  })), me(/* @__PURE__ */ e.createElement("div", null, ee && /* @__PURE__ */ e.createElement("div", {
+  })), ee && me(/* @__PURE__ */ e.createElement("div", {
     ref: s,
     className: "tw-popper-container tw-inline-block tw-max-w-[200px] tw-bg-black-100 dark:tw-bg-white tw-rounded-md tw-shadow-mid tw-text-white dark:tw-text-black-100 tw-z-[120000]",
     "data-test-id": "tooltip",
     role: "tooltip",
-    style: b.styles.popper,
-    ...b.attributes.popper,
+    style: i.styles.popper,
+    ...i.attributes.popper,
     onFocus: () => l(!0),
     onMouseOver: (n) => z(n.nativeEvent),
     onMouseLeave: N
@@ -172,14 +172,14 @@ const fe = {
     inverted: !0
   }, r[1].label))), /* @__PURE__ */ e.createElement("div", {
     "data-test-id": "popover-arrow",
-    "data-popper-arrow": i,
+    "data-popper-arrow": b,
     ref: R,
-    style: b.styles.arrow,
+    style: i.styles.arrow,
     className: m([
-      i && "tw-popper-arrow tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border before:tw-border-line",
-      i && U
+      b && "tw-popper-arrow tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border before:tw-border-line",
+      b && U
     ])
-  })), G)), document.body));
+  })), G), document.body));
 };
 export {
   Le as Tooltip,

package/dist/components/Tooltip/Tooltip.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useLink } from '@react-aria/link';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, {\n    HTMLAttributes,\n    PropsWithChildren,\n    ReactChild,\n    ReactElement,\n    ReactNode,\n    cloneElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { BrightHeader, BrightHeaderStyle, brightHeaderArrowBackgroundColors } from './BrightHeader';\nimport { usePopper } from 'react-popper';\nimport { createPortal } from 'react-dom';\nimport { Placement } from '@popperjs/core';\n\nexport type TooltipButton = {\n    label: string;\n    action: () => void;\n};\n\nexport type TooltipProps = PropsWithChildren<{\n    triggerElement?: ReactElement;\n    content: ReactNode;\n    tooltipIcon?: ReactElement;\n    heading?: ReactNode;\n    headingIcon?: ReactElement;\n    linkUrl?: string;\n    linkLabel?: string;\n    brightHeader?: BrightHeaderStyle;\n    buttons?: [TooltipButton, TooltipButton] | [TooltipButton];\n    children?: ReactChild;\n    position?: TooltipPosition;\n    alignment?: TooltipAlignment;\n    flip?: boolean;\n    withArrow?: boolean;\n    hoverDelay?: number;\n    open?: boolean;\n}>;\n\n/**\n * This is a temporary workaround because for some yet unknown reasons `tailwindcss` in clarify purges the `tw-pb-3.5` and `tw-pt-3.5` class.\n */\nconst paddingsTop = {\n    small: 'tw-pt-3.5',\n    large: 'tw-pt-4',\n};\n\nconst paddingsBottom = {\n    small: 'tw-pb-3.5',\n    large: 'tw-pb-4',\n};\n\nexport enum TooltipPosition {\n    Top = 'Top',\n    Right = 'Right',\n    Bottom = 'Bottom',\n    Left = 'Left',\n}\n\nexport enum TooltipAlignment {\n    Start = 'Start',\n    Middle = 'Middle',\n    End = 'End',\n}\n\nconst placementMap: Record<`${TooltipPosition}-${TooltipAlignment}`, Placement> = {\n    ['Top-Start']: 'top-start',\n    ['Top-End']: 'top-end',\n    ['Bottom-Start']: 'bottom-start',\n    ['Bottom-End']: 'bottom-end',\n    ['Left-Start']: 'left-start',\n    ['Left-End']: 'left-end',\n    ['Right-Start']: 'right-start',\n    ['Right-End']: 'right-end',\n    ['Top-Middle']: 'top',\n    ['Right-Middle']: 'right',\n    ['Bottom-Middle']: 'bottom',\n    ['Left-Middle']: 'left',\n};\n\nconst getArrowClasses = (currentPlacement: string, brightHeader: BrightHeaderStyle | undefined, alignment: string) => {\n    switch (true) {\n        case currentPlacement.toString().includes(TooltipPosition.Top.toLowerCase()):\n            return 'before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-bg-black-100 before:dark:tw-bg-white';\n        case currentPlacement.toString().includes(TooltipPosition.Right.toLowerCase()):\n            return merge([\n                'before:tw-border-t-0 before:tw-border-r-0 tw-left-[-6px]',\n                brightHeader && alignment === TooltipAlignment.Start\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-bg-black-100 before:dark:tw-bg-white',\n            ]);\n        case currentPlacement.toString().includes(TooltipPosition.Bottom.toLowerCase()):\n            return merge([\n                'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]',\n                brightHeader\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-bg-black-100 before:dark:tw-bg-white',\n            ]);\n        case currentPlacement.toString().includes(TooltipPosition.Left.toLowerCase()):\n            return merge([\n                'before:tw-border-b-0 before:tw-border-l-0 tw-right-[-6px]',\n                brightHeader && alignment === TooltipAlignment.Start\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-bg-black-100 before:dark:tw-bg-white',\n            ]);\n        default:\n            return 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-bg-black-100 before:dark:tw-bg-white';\n    }\n};\n\nexport const Tooltip = ({\n    content,\n    tooltipIcon,\n    heading,\n    headingIcon,\n    linkUrl,\n    linkLabel,\n    brightHeader,\n    buttons,\n    children,\n    position = TooltipPosition.Bottom,\n    alignment = TooltipAlignment.Middle,\n    withArrow,\n    flip = true,\n    triggerElement,\n    hoverDelay = 200,\n    open = false,\n}: TooltipProps) => {\n    const triggerRefElement = useRef<HTMLElement | HTMLDivElement | HTMLButtonElement | null>(null);\n    const linkRef = useRef<HTMLAnchorElement | null>(null);\n    const { linkProps } = useLink({}, linkRef);\n    const hasLargePaddingTop = useMemo(\n        () => linkUrl || brightHeader || buttons || heading || headingIcon,\n        [linkUrl, brightHeader, buttons, heading, headingIcon],\n    );\n\n    const placement = placementMap[`${position}-${alignment}`];\n    const tooltipContainerRef = useRef<HTMLDivElement | null>(null);\n    const triggerElementContainerRef = useRef<HTMLDivElement | null>(null);\n    const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n\n    const tooltipOffset = withArrow ? 10 : 5;\n    const popperInstance = usePopper(triggerRefElement?.current, tooltipContainerRef.current, {\n        placement,\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'arrow',\n                options: {\n                    element: arrowElement,\n                },\n            },\n            {\n                name: 'offset',\n                options: {\n                    offset: [0, tooltipOffset],\n                },\n            },\n            {\n                name: 'flip',\n                enabled: flip,\n            },\n        ],\n    });\n\n    const currentPlacement = popperInstance.state?.placement ?? position;\n    const arrowStyling = getArrowClasses(currentPlacement, brightHeader, alignment);\n    const [isOpen, setIsOpen] = useState(false);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const handleShowTooltipOnHover = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n        setIsOpen(true);\n    }, [triggerRefElement?.current]);\n\n    const handleHideTooltipOnHover = useCallback(() => {\n        timeoutRef.current = setTimeout(() => setIsOpen(false), hoverDelay);\n    }, [triggerRefElement?.current, tooltipContainerRef?.current]);\n\n    const checkIfHovered = useCallback(\n        (event) => {\n            const hoveredElement = event.path ?? event.composedPath?.();\n            const hoverSources = [triggerRefElement, triggerElementContainerRef, tooltipContainerRef];\n\n            if (hoveredElement && hoverSources.some((el) => hoveredElement.includes(el?.current))) {\n                handleShowTooltipOnHover();\n            }\n        },\n        [triggerRefElement?.current, tooltipContainerRef?.current, triggerElementContainerRef?.current],\n    );\n\n    const hasInteractiveElements = !!(buttons?.length || linkUrl?.length);\n    const triggerProps: HTMLAttributes<HTMLElement> = {\n        onMouseOver: (event) => checkIfHovered(event.nativeEvent),\n        onMouseLeave: handleHideTooltipOnHover,\n        onFocus: () => setIsOpen(true),\n        onBlur: () => (!hasInteractiveElements ? setIsOpen(false) : null),\n    };\n\n    useEffect(() => {\n        setIsOpen(open);\n    }, [open]);\n\n    return (\n        <>\n            <div {...triggerProps} ref={triggerElementContainerRef}>\n                {triggerElement &&\n                    cloneElement(triggerElement, {\n                        ref: triggerRefElement,\n                    })}\n            </div>\n            {createPortal(\n                <div>\n                    {isOpen && (\n                        <div\n                            ref={tooltipContainerRef}\n                            className=\"tw-popper-container tw-inline-block tw-max-w-[200px] tw-bg-black-100 dark:tw-bg-white tw-rounded-md tw-shadow-mid tw-text-white dark:tw-text-black-100 tw-z-[120000]\"\n                            data-test-id=\"tooltip\"\n                            role=\"tooltip\"\n                            style={popperInstance.styles.popper}\n                            {...popperInstance.attributes.popper}\n                            onFocus={() => setIsOpen(true)}\n                            onMouseOver={(event) => checkIfHovered(event.nativeEvent)}\n                            onMouseLeave={handleHideTooltipOnHover}\n                        >\n                            {brightHeader && <BrightHeader headerStyle={brightHeader} />}\n                            <div\n                                className={merge([\n                                    'tw-px-4',\n                                    hasLargePaddingTop ? paddingsTop.small : paddingsTop.large,\n                                    linkUrl ? paddingsBottom.small : paddingsBottom.large,\n                                ])}\n                            >\n                                {heading && (\n                                    <h4 className=\"tw-flex tw-text-m tw-font-bold tw-mb-1\">\n                                        {headingIcon && (\n                                            <span className=\"tw-mr-1.5\">\n                                                {cloneElement(headingIcon, { size: IconSize.Size20 })}\n                                            </span>\n                                        )}\n                                        {heading}\n                                    </h4>\n                                )}\n                                <div className=\"tw-flex\">\n                                    {tooltipIcon && (\n                                        <span className=\"tw-shrink-0 tw-mr-1\">\n                                            {cloneElement(tooltipIcon, { size: IconSize.Size16 })}\n                                        </span>\n                                    )}\n                                    <p className=\"tw-text-s tw-min-w-0 tw-break-words\">{content}</p>\n                                </div>\n                                {linkUrl && (\n                                    <a\n                                        {...linkProps}\n                                        data-test-id=\"tooltip-link\"\n                                        ref={linkRef}\n                                        href={linkUrl}\n                                        target=\"_blank\"\n                                        rel=\"noopener noreferrer\"\n                                        className={merge([\n                                            'tw-text-xs tw-text-black-40 dark:tw-text-black-80 tw-underline tw-mt-1',\n                                            FOCUS_VISIBLE_STYLE,\n                                        ])}\n                                        onBlur={() => (buttons && buttons.length > 0 ? null : setIsOpen(false))}\n                                    >\n                                        {linkLabel ?? 'Click here to learn more.'}\n                                    </a>\n                                )}\n                                {buttons && (\n                                    <div className=\"tw-flex tw-flex-row-reverse tw-gap-x-1 tw-mt-4\">\n                                        {buttons.length > 0 && (\n                                            <div\n                                                onBlur={() => (buttons && buttons.length < 2 ? setIsOpen(false) : null)}\n                                            >\n                                                <Button\n                                                    style={ButtonStyle.Default}\n                                                    emphasis={ButtonEmphasis.Strong}\n                                                    size={ButtonSize.Small}\n                                                    onClick={buttons[0].action}\n                                                    inverted\n                                                >\n                                                    {buttons[0].label}\n                                                </Button>\n                                            </div>\n                                        )}\n                                        {buttons.length === 2 && (\n                                            <div onBlur={() => setIsOpen(false)}>\n                                                <Button\n                                                    style={ButtonStyle.Default}\n                                                    emphasis={ButtonEmphasis.Default}\n                                                    size={ButtonSize.Small}\n                                                    onClick={buttons[1].action}\n                                                    inverted\n                                                >\n                                                    {buttons[1].label}\n                                                </Button>\n                                            </div>\n                                        )}\n                                    </div>\n                                )}\n                                <div\n                                    data-test-id=\"popover-arrow\"\n                                    data-popper-arrow={withArrow}\n                                    ref={setArrowElement}\n                                    style={popperInstance.styles.arrow}\n                                    className={merge([\n                                        withArrow &&\n                                            'tw-popper-arrow tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border before:tw-border-line',\n                                        withArrow && arrowStyling,\n                                    ])}\n                                />\n                            </div>\n                            {children}\n                        </div>\n                    )}\n                </div>,\n                document.body,\n            )}\n        </>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useLink } from '@react-aria/link';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, {\n    HTMLAttributes,\n    PropsWithChildren,\n    ReactChild,\n    ReactElement,\n    ReactNode,\n    cloneElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { BrightHeader, BrightHeaderStyle, brightHeaderArrowBackgroundColors } from './BrightHeader';\nimport { usePopper } from 'react-popper';\nimport { createPortal } from 'react-dom';\nimport { Placement } from '@popperjs/core';\n\nexport type TooltipButton = {\n    label: string;\n    action: () => void;\n};\n\nexport type TooltipProps = PropsWithChildren<{\n    triggerElement?: ReactElement;\n    content: ReactNode;\n    tooltipIcon?: ReactElement;\n    heading?: ReactNode;\n    headingIcon?: ReactElement;\n    linkUrl?: string;\n    linkLabel?: string;\n    brightHeader?: BrightHeaderStyle;\n    buttons?: [TooltipButton, TooltipButton] | [TooltipButton];\n    children?: ReactChild;\n    position?: TooltipPosition;\n    alignment?: TooltipAlignment;\n    flip?: boolean;\n    withArrow?: boolean;\n    hoverDelay?: number;\n    open?: boolean;\n}>;\n\n/**\n * This is a temporary workaround because for some yet unknown reasons `tailwindcss` in clarify purges the `tw-pb-3.5` and `tw-pt-3.5` class.\n */\nconst paddingsTop = {\n    small: 'tw-pt-3.5',\n    large: 'tw-pt-4',\n};\n\nconst paddingsBottom = {\n    small: 'tw-pb-3.5',\n    large: 'tw-pb-4',\n};\n\nexport enum TooltipPosition {\n    Top = 'Top',\n    Right = 'Right',\n    Bottom = 'Bottom',\n    Left = 'Left',\n}\n\nexport enum TooltipAlignment {\n    Start = 'Start',\n    Middle = 'Middle',\n    End = 'End',\n}\n\nconst placementMap: Record<`${TooltipPosition}-${TooltipAlignment}`, Placement> = {\n    ['Top-Start']: 'top-start',\n    ['Top-End']: 'top-end',\n    ['Bottom-Start']: 'bottom-start',\n    ['Bottom-End']: 'bottom-end',\n    ['Left-Start']: 'left-start',\n    ['Left-End']: 'left-end',\n    ['Right-Start']: 'right-start',\n    ['Right-End']: 'right-end',\n    ['Top-Middle']: 'top',\n    ['Right-Middle']: 'right',\n    ['Bottom-Middle']: 'bottom',\n    ['Left-Middle']: 'left',\n};\n\nconst getArrowClasses = (currentPlacement: string, brightHeader: BrightHeaderStyle | undefined, alignment: string) => {\n    switch (true) {\n        case currentPlacement.toString().includes(TooltipPosition.Top.toLowerCase()):\n            return 'before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-bg-black-100 before:dark:tw-bg-white';\n        case currentPlacement.toString().includes(TooltipPosition.Right.toLowerCase()):\n            return merge([\n                'before:tw-border-t-0 before:tw-border-r-0 tw-left-[-6px]',\n                brightHeader && alignment === TooltipAlignment.Start\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-bg-black-100 before:dark:tw-bg-white',\n            ]);\n        case currentPlacement.toString().includes(TooltipPosition.Bottom.toLowerCase()):\n            return merge([\n                'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]',\n                brightHeader\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-bg-black-100 before:dark:tw-bg-white',\n            ]);\n        case currentPlacement.toString().includes(TooltipPosition.Left.toLowerCase()):\n            return merge([\n                'before:tw-border-b-0 before:tw-border-l-0 tw-right-[-6px]',\n                brightHeader && alignment === TooltipAlignment.Start\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-bg-black-100 before:dark:tw-bg-white',\n            ]);\n        default:\n            return 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-bg-black-100 before:dark:tw-bg-white';\n    }\n};\n\nexport const Tooltip = ({\n    content,\n    tooltipIcon,\n    heading,\n    headingIcon,\n    linkUrl,\n    linkLabel,\n    brightHeader,\n    buttons,\n    children,\n    position = TooltipPosition.Bottom,\n    alignment = TooltipAlignment.Middle,\n    withArrow,\n    flip = true,\n    triggerElement,\n    hoverDelay = 200,\n    open = false,\n}: TooltipProps) => {\n    const triggerRefElement = useRef<HTMLElement | HTMLDivElement | HTMLButtonElement | null>(null);\n    const linkRef = useRef<HTMLAnchorElement | null>(null);\n    const { linkProps } = useLink({}, linkRef);\n    const hasLargePaddingTop = useMemo(\n        () => linkUrl || brightHeader || buttons || heading || headingIcon,\n        [linkUrl, brightHeader, buttons, heading, headingIcon],\n    );\n\n    const placement = placementMap[`${position}-${alignment}`];\n    const tooltipContainerRef = useRef<HTMLDivElement | null>(null);\n    const triggerElementContainerRef = useRef<HTMLDivElement | null>(null);\n    const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n\n    const tooltipOffset = withArrow ? 10 : 5;\n    const popperInstance = usePopper(triggerRefElement?.current, tooltipContainerRef.current, {\n        placement,\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'arrow',\n                options: {\n                    element: arrowElement,\n                },\n            },\n            {\n                name: 'offset',\n                options: {\n                    offset: [0, tooltipOffset],\n                },\n            },\n            {\n                name: 'flip',\n                enabled: flip,\n            },\n        ],\n    });\n\n    const currentPlacement = popperInstance.state?.placement ?? position;\n    const arrowStyling = getArrowClasses(currentPlacement, brightHeader, alignment);\n    const [isOpen, setIsOpen] = useState(false);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const handleShowTooltipOnHover = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n        setIsOpen(true);\n    }, [triggerRefElement?.current]);\n\n    const handleHideTooltipOnHover = useCallback(() => {\n        timeoutRef.current = setTimeout(() => setIsOpen(false), hoverDelay);\n    }, [triggerRefElement?.current, tooltipContainerRef?.current]);\n\n    const checkIfHovered = useCallback(\n        (event) => {\n            const hoveredElement = event.path ?? event.composedPath?.();\n            const hoverSources = [triggerRefElement, triggerElementContainerRef, tooltipContainerRef];\n\n            if (hoveredElement && hoverSources.some((el) => hoveredElement.includes(el?.current))) {\n                handleShowTooltipOnHover();\n            }\n        },\n        [triggerRefElement?.current, tooltipContainerRef?.current, triggerElementContainerRef?.current],\n    );\n\n    const hasInteractiveElements = !!(buttons?.length || linkUrl?.length);\n    const triggerProps: HTMLAttributes<HTMLElement> = {\n        onMouseOver: (event) => checkIfHovered(event.nativeEvent),\n        onMouseLeave: handleHideTooltipOnHover,\n        onFocus: () => setIsOpen(true),\n        onBlur: () => (!hasInteractiveElements ? setIsOpen(false) : null),\n    };\n\n    useEffect(() => {\n        setIsOpen(open);\n    }, [open]);\n\n    return (\n        <>\n            <div {...triggerProps} ref={triggerElementContainerRef}>\n                {triggerElement &&\n                    cloneElement(triggerElement, {\n                        ref: triggerRefElement,\n                    })}\n            </div>\n            {isOpen &&\n                createPortal(\n                    <div\n                        ref={tooltipContainerRef}\n                        className=\"tw-popper-container tw-inline-block tw-max-w-[200px] tw-bg-black-100 dark:tw-bg-white tw-rounded-md tw-shadow-mid tw-text-white dark:tw-text-black-100 tw-z-[120000]\"\n                        data-test-id=\"tooltip\"\n                        role=\"tooltip\"\n                        style={popperInstance.styles.popper}\n                        {...popperInstance.attributes.popper}\n                        onFocus={() => setIsOpen(true)}\n                        onMouseOver={(event) => checkIfHovered(event.nativeEvent)}\n                        onMouseLeave={handleHideTooltipOnHover}\n                    >\n                        {brightHeader && <BrightHeader headerStyle={brightHeader} />}\n                        <div\n                            className={merge([\n                                'tw-px-4',\n                                hasLargePaddingTop ? paddingsTop.small : paddingsTop.large,\n                                linkUrl ? paddingsBottom.small : paddingsBottom.large,\n                            ])}\n                        >\n                            {heading && (\n                                <h4 className=\"tw-flex tw-text-m tw-font-bold tw-mb-1\">\n                                    {headingIcon && (\n                                        <span className=\"tw-mr-1.5\">\n                                            {cloneElement(headingIcon, { size: IconSize.Size20 })}\n                                        </span>\n                                    )}\n                                    {heading}\n                                </h4>\n                            )}\n                            <div className=\"tw-flex\">\n                                {tooltipIcon && (\n                                    <span className=\"tw-shrink-0 tw-mr-1\">\n                                        {cloneElement(tooltipIcon, { size: IconSize.Size16 })}\n                                    </span>\n                                )}\n                                <p className=\"tw-text-s tw-min-w-0 tw-break-words\">{content}</p>\n                            </div>\n                            {linkUrl && (\n                                <a\n                                    {...linkProps}\n                                    data-test-id=\"tooltip-link\"\n                                    ref={linkRef}\n                                    href={linkUrl}\n                                    target=\"_blank\"\n                                    rel=\"noopener noreferrer\"\n                                    className={merge([\n                                        'tw-text-xs tw-text-black-40 dark:tw-text-black-80 tw-underline tw-mt-1',\n                                        FOCUS_VISIBLE_STYLE,\n                                    ])}\n                                    onBlur={() => (buttons && buttons.length > 0 ? null : setIsOpen(false))}\n                                >\n                                    {linkLabel ?? 'Click here to learn more.'}\n                                </a>\n                            )}\n                            {buttons && (\n                                <div className=\"tw-flex tw-flex-row-reverse tw-gap-x-1 tw-mt-4\">\n                                    {buttons.length > 0 && (\n                                        <div onBlur={() => (buttons && buttons.length < 2 ? setIsOpen(false) : null)}>\n                                            <Button\n                                                style={ButtonStyle.Default}\n                                                emphasis={ButtonEmphasis.Strong}\n                                                size={ButtonSize.Small}\n                                                onClick={buttons[0].action}\n                                                inverted\n                                            >\n                                                {buttons[0].label}\n                                            </Button>\n                                        </div>\n                                    )}\n                                    {buttons.length === 2 && (\n                                        <div onBlur={() => setIsOpen(false)}>\n                                            <Button\n                                                style={ButtonStyle.Default}\n                                                emphasis={ButtonEmphasis.Default}\n                                                size={ButtonSize.Small}\n                                                onClick={buttons[1].action}\n                                                inverted\n                                            >\n                                                {buttons[1].label}\n                                            </Button>\n                                        </div>\n                                    )}\n                                </div>\n                            )}\n                            <div\n                                data-test-id=\"popover-arrow\"\n                                data-popper-arrow={withArrow}\n                                ref={setArrowElement}\n                                style={popperInstance.styles.arrow}\n                                className={merge([\n                                    withArrow &&\n                                        'tw-popper-arrow tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border before:tw-border-line',\n                                    withArrow && arrowStyling,\n                                ])}\n                            />\n                        </div>\n                        {children}\n                    </div>,\n                    document.body,\n                )}\n        </>\n    );\n};\n"],"names":[],"mappings":"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"}