@frontify/fondue 12.0.0-beta.337 → 12.0.0-beta.339

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

@@ -14,8 +14,8 @@ import { LoadingCircle as lt, LoadingCircleSize as ut } from "../LoadingCircle/L
 import wt from "../../foundation/Icon/Generated/IconExclamationMarkTriangle.es.js";
 import pt from "../../foundation/Icon/Generated/IconCrossCircle.es.js";
 import ft from "../../foundation/Icon/Generated/IconClipboard.es.js";
-import bt from "../../foundation/Icon/Generated/IconCheckMark.es.js";
-var mt = /* @__PURE__ */ ((o) => (o.Text = "text", o.Password = "password", o.Number = "number", o))(mt || {});
+import mt from "../../foundation/Icon/Generated/IconCheckMark.es.js";
+var bt = /* @__PURE__ */ ((o) => (o.Text = "text", o.Password = "password", o.Number = "number", o))(bt || {});
 const dt = ({ extraAction: o, disabled: n, isFocusVisible: f, focusProps: i }, x) => {
   if (!o)
     return null;
@@ -53,7 +53,7 @@ const dt = ({ extraAction: o, disabled: n, isFocusVisible: f, focusProps: i }, x
   dotted: M = !1,
   value: k = "",
   copyable: W = !1,
-  onChange: b,
+  onChange: m,
   onEnterPressed: C,
   onBlur: $,
   onClear: F,
@@ -65,7 +65,7 @@ const dt = ({ extraAction: o, disabled: n, isFocusVisible: f, focusProps: i }, x
   selectable: U = !1,
   extraActions: g
 }) => {
-  const { isFocusVisible: Y, focusProps: _ } = w({ within: !0, isTextInput: !0 }), { isFocusVisible: E, focusProps: q } = w(), { isFocusVisible: P, focusProps: G } = w(), { isFocusVisible: V, focusProps: H } = w(), { isFocusVisible: B, focusProps: j } = w(), { copy: J, status: y } = A(), u = rt(null), [m, T] = st(
+  const { isFocusVisible: Y, focusProps: _ } = w({ within: !0, isTextInput: !0 }), { isFocusVisible: E, focusProps: q } = w(), { isFocusVisible: P, focusProps: G } = w(), { isFocusVisible: V, focusProps: H } = w(), { isFocusVisible: B, focusProps: j } = w(), { copy: J, status: y } = A(), u = rt(null), [b, T] = st(
     typeof l == "boolean" ? l : n === "password"
     /* Password */
   );
@@ -79,7 +79,7 @@ const dt = ({ extraAction: o, disabled: n, isFocusVisible: f, focusProps: i }, x
   }, [l]);
   const Q = (t) => {
     t.key === "Enter" && C && C(t);
-  }, X = () => n === "password" ? m ? "password" : "text" : n, Z = typeof v == "boolean" ? { spellCheck: v } : null;
+  }, X = () => n === "password" ? b ? "password" : "text" : n, Z = typeof v == "boolean" ? { spellCheck: v } : null;
   return /* @__PURE__ */ S(
     "div",
     {
@@ -88,7 +88,7 @@ const dt = ({ extraAction: o, disabled: n, isFocusVisible: f, focusProps: i }, x
         "tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-3 tw-border tw-transition tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent",
         M ? "tw-border-dashed" : "tw-border-solid",
         r || h ? "tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90" : s([
-          "focus-within:tw-border-black-90 hover:tw-border-black-90",
+          "focus-within:tw-border-black-90 hover:tw-border-line-x-strong",
           et[i],
           Y && !E && !P && !V && p
         ])
@@ -119,7 +119,7 @@ const dt = ({ extraAction: o, disabled: n, isFocusVisible: f, focusProps: i }, x
               var t;
               return (t = u.current) == null ? void 0 : t.focus();
             },
-            onChange: (t) => b && b(t.currentTarget.value),
+            onChange: (t) => m && m(t.currentTarget.value),
             onBlur: $,
             onKeyDown: Q,
             placeholder: a,
@@ -175,7 +175,7 @@ const dt = ({ extraAction: o, disabled: n, isFocusVisible: f, focusProps: i }, x
             ]),
             onClick: () => {
               var t, d;
-              (t = u.current) == null || t.focus(), (d = u.current) == null || d.setAttribute("value", ""), b && b(""), F && F();
+              (t = u.current) == null || t.focus(), (d = u.current) == null || d.setAttribute("value", ""), m && m(""), F && F();
             },
             "data-test-id": "clear-icon",
             title: "Clear text input",
@@ -194,14 +194,14 @@ const dt = ({ extraAction: o, disabled: n, isFocusVisible: f, focusProps: i }, x
               r ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60 hover:tw-text-black-100",
               P && p
             ]),
-            onClick: () => T(!m),
+            onClick: () => T(!b),
             "data-test-id": "visibility-icon",
             title: "Toggle text visibility",
             type: "button",
-            "aria-label": `${m ? "unveil" : "obfuscate"} text input`,
+            "aria-label": `${b ? "unveil" : "obfuscate"} text input`,
             disabled: r,
             ...G,
-            children: m ? /* @__PURE__ */ e(ct, {}) : /* @__PURE__ */ e(at, {})
+            children: b ? /* @__PURE__ */ e(ct, {}) : /* @__PURE__ */ e(at, {})
           }
         ),
         i === c.Loading && /* @__PURE__ */ e("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", children: /* @__PURE__ */ e(lt, { size: ut.ExtraSmall }) }),
@@ -234,7 +234,7 @@ const dt = ({ extraAction: o, disabled: n, isFocusVisible: f, focusProps: i }, x
             children: [
               y === "error" && /* @__PURE__ */ e("span", { className: "tw-text-box-negative-strong", children: /* @__PURE__ */ e(pt, {}) }),
               y === "idle" && /* @__PURE__ */ e(ft, {}),
-              y === "success" && /* @__PURE__ */ e("span", { className: "tw-text-box-positive-strong", children: /* @__PURE__ */ e(bt, {}) })
+              y === "success" && /* @__PURE__ */ e("span", { className: "tw-text-box-positive-strong", children: /* @__PURE__ */ e(mt, {}) })
             ]
           }
         )
@@ -245,6 +245,6 @@ const dt = ({ extraAction: o, disabled: n, isFocusVisible: f, focusProps: i }, x
 xt.displayName = "FondueTextInput";
 export {
   xt as TextInput,
-  mt as TextInputType
+  bt 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 {\n    DOMAttributes,\n    FocusEvent,\n    ForwardRefRenderFunction,\n    KeyboardEvent,\n    ReactElement,\n    ReactNode,\n    forwardRef,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport {\n    IconCheckMark,\n    IconClipboard,\n    IconCross,\n    IconCrossCircle,\n    IconExclamationMarkTriangle,\n    IconEye,\n    IconEyeOff,\n} from '@foundation/Icon/Generated';\nimport { LegacyTooltip, LegacyTooltipProps } from '../LegacyTooltip';\nimport { FocusableElement } from '@react-types/shared';\n\nexport enum TextInputType {\n    Text = 'text',\n    Password = 'password',\n    Number = 'number',\n}\n\nexport type TextInputExtraAction = {\n    onClick: () => void;\n    icon: ReactElement;\n    title: string;\n    tooltip?: Omit<LegacyTooltipProps, 'triggerElement'>;\n    disabled?: boolean;\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    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n    onClear?: () => void;\n    size?: number;\n    spellcheck?: boolean;\n    focusOnMount?: boolean;\n    selectable?: boolean;\n    extraActions?: TextInputExtraAction[];\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\ntype ExtraActionButtonProps = {\n    extraAction: TextInputExtraAction;\n    disabled: boolean;\n    isFocusVisible: boolean;\n    focusProps: DOMAttributes<FocusableElement>;\n};\n\nconst ExtraActionButton: ForwardRefRenderFunction<HTMLButtonElement | null, ExtraActionButtonProps> = (\n    { extraAction, disabled, isFocusVisible, focusProps },\n    ref,\n): ReactElement | null => {\n    if (!extraAction) {\n        return null;\n    }\n    const isDisabled = disabled || extraAction.disabled;\n    return (\n        <button\n            className={merge([\n                'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded tw-p-1 -tw-mr-2',\n                isDisabled\n                    ? 'tw-cursor-default tw-text-text-disabled'\n                    : 'tw-text-text-weak hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n                isFocusVisible && FOCUS_STYLE,\n            ])}\n            onClick={extraAction.onClick}\n            data-test-id=\"fondue-extra-action-icon\"\n            aria-label={extraAction.title.toLowerCase()}\n            disabled={isDisabled}\n            aria-disabled={isDisabled}\n            type=\"button\"\n            ref={ref}\n            {...focusProps}\n        >\n            {extraAction.icon}\n        </button>\n    );\n};\nconst ExtraActionButtonWithRef = forwardRef(ExtraActionButton);\n\nexport const TextInput = ({\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    onFocus,\n    size,\n    spellcheck,\n    readonly,\n    focusOnMount,\n    selectable = false,\n    extraActions,\n}: TextInputProps): ReactElement => {\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    const { isFocusVisible: extraActionButtonIsFocusVisible, focusProps: extraActionButtonFocusProps } = 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 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 hover:tw-border-black-90',\n                          validationClassMap[validation],\n                          isFocusVisible &&\n                              !clearButtonIsFocusVisible &&\n                              !passwordButtonIsFocusVisible &&\n                              !copyButtonIsFocusVisible &&\n                              FOCUS_STYLE,\n                      ]),\n            ])}\n            data-test-id=\"fondue-text-input-component\"\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                onFocus={(e) => {\n                    if (selectable) {\n                        e.target.select();\n                    }\n                    if (onFocus) {\n                        onFocus(e);\n                    }\n                }}\n                autoComplete={autocomplete ? 'on' : 'off'}\n                size={size}\n                data-test-id=\"text-input\"\n                {...spellcheckProp}\n            />\n            {extraActions &&\n                extraActions.length > 0 &&\n                extraActions.map((extraAction: TextInputExtraAction, index: number) => {\n                    const key = `text-input-extra-action-${index}`;\n                    if (extraAction.tooltip) {\n                        return (\n                            <LegacyTooltip\n                                key={key}\n                                {...extraAction.tooltip}\n                                triggerElement={\n                                    <ExtraActionButtonWithRef\n                                        extraAction={extraAction}\n                                        disabled={disabled}\n                                        isFocusVisible={extraActionButtonIsFocusVisible}\n                                        focusProps={extraActionButtonFocusProps}\n                                    />\n                                }\n                            />\n                        );\n                    }\n                    return (\n                        <ExtraActionButtonWithRef\n                            key={key}\n                            extraAction={extraAction}\n                            disabled={disabled}\n                            isFocusVisible={extraActionButtonIsFocusVisible}\n                            focusProps={extraActionButtonFocusProps}\n                        />\n                    );\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            {(validation === Validation.Error || validation === Validation.Warning) && (\n                <span\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center',\n                        validation === Validation.Error && 'tw-text-text-negative',\n                        validation === Validation.Warning && 'tw-text-text-warning',\n                    ])}\n                    data-test-id=\"error-state-exclamation-mark-icon\"\n                >\n                    <IconExclamationMarkTriangle />\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};\nTextInput.displayName = 'FondueTextInput';\n"],"names":["TextInputType","ExtraActionButton","extraAction","disabled","isFocusVisible","focusProps","ref","isDisabled","jsx","merge","FOCUS_STYLE","ExtraActionButtonWithRef","forwardRef","TextInput","propId","type","decorator","validation","Validation","clearable","placeholder","required","obfuscated","autocomplete","dotted","value","copyable","onChange","onEnterPressed","onBlur","onClear","onFocus","size","spellcheck","readonly","focusOnMount","selectable","extraActions","useFocusRing","clearButtonIsFocusVisible","clearButtonFocusProps","passwordButtonIsFocusVisible","passwordButtonFocusProps","copyButtonIsFocusVisible","copyButtonFocusProps","extraActionButtonIsFocusVisible","extraActionButtonFocusProps","copy","status","useCopy","inputElement","useRef","isObfuscated","setIsObfuscated","useState","useEffect","_a","onKeyDown","event","getInputType","spellcheckProp","jsxs","validationClassMap","useMemoizedId","e","index","key","LegacyTooltip","_b","IconCross","IconEye","IconEyeOff","LoadingCircle","LoadingCircleSize","IconExclamationMarkTriangle","IconCrossCircle","IconClipboard","IconCheckMark"],"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 {\n    DOMAttributes,\n    FocusEvent,\n    ForwardRefRenderFunction,\n    KeyboardEvent,\n    ReactElement,\n    ReactNode,\n    forwardRef,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport {\n    IconCheckMark,\n    IconClipboard,\n    IconCross,\n    IconCrossCircle,\n    IconExclamationMarkTriangle,\n    IconEye,\n    IconEyeOff,\n} from '@foundation/Icon/Generated';\nimport { LegacyTooltip, LegacyTooltipProps } from '../LegacyTooltip';\nimport { FocusableElement } from '@react-types/shared';\n\nexport enum TextInputType {\n    Text = 'text',\n    Password = 'password',\n    Number = 'number',\n}\n\nexport type TextInputExtraAction = {\n    onClick: () => void;\n    icon: ReactElement;\n    title: string;\n    tooltip?: Omit<LegacyTooltipProps, 'triggerElement'>;\n    disabled?: boolean;\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    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n    onClear?: () => void;\n    size?: number;\n    spellcheck?: boolean;\n    focusOnMount?: boolean;\n    selectable?: boolean;\n    extraActions?: TextInputExtraAction[];\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\ntype ExtraActionButtonProps = {\n    extraAction: TextInputExtraAction;\n    disabled: boolean;\n    isFocusVisible: boolean;\n    focusProps: DOMAttributes<FocusableElement>;\n};\n\nconst ExtraActionButton: ForwardRefRenderFunction<HTMLButtonElement | null, ExtraActionButtonProps> = (\n    { extraAction, disabled, isFocusVisible, focusProps },\n    ref,\n): ReactElement | null => {\n    if (!extraAction) {\n        return null;\n    }\n    const isDisabled = disabled || extraAction.disabled;\n    return (\n        <button\n            className={merge([\n                'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded tw-p-1 -tw-mr-2',\n                isDisabled\n                    ? 'tw-cursor-default tw-text-text-disabled'\n                    : 'tw-text-text-weak hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n                isFocusVisible && FOCUS_STYLE,\n            ])}\n            onClick={extraAction.onClick}\n            data-test-id=\"fondue-extra-action-icon\"\n            aria-label={extraAction.title.toLowerCase()}\n            disabled={isDisabled}\n            aria-disabled={isDisabled}\n            type=\"button\"\n            ref={ref}\n            {...focusProps}\n        >\n            {extraAction.icon}\n        </button>\n    );\n};\nconst ExtraActionButtonWithRef = forwardRef(ExtraActionButton);\n\nexport const TextInput = ({\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    onFocus,\n    size,\n    spellcheck,\n    readonly,\n    focusOnMount,\n    selectable = false,\n    extraActions,\n}: TextInputProps): ReactElement => {\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    const { isFocusVisible: extraActionButtonIsFocusVisible, focusProps: extraActionButtonFocusProps } = 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 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 hover:tw-border-line-x-strong',\n                          validationClassMap[validation],\n                          isFocusVisible &&\n                              !clearButtonIsFocusVisible &&\n                              !passwordButtonIsFocusVisible &&\n                              !copyButtonIsFocusVisible &&\n                              FOCUS_STYLE,\n                      ]),\n            ])}\n            data-test-id=\"fondue-text-input-component\"\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                onFocus={(e) => {\n                    if (selectable) {\n                        e.target.select();\n                    }\n                    if (onFocus) {\n                        onFocus(e);\n                    }\n                }}\n                autoComplete={autocomplete ? 'on' : 'off'}\n                size={size}\n                data-test-id=\"text-input\"\n                {...spellcheckProp}\n            />\n            {extraActions &&\n                extraActions.length > 0 &&\n                extraActions.map((extraAction: TextInputExtraAction, index: number) => {\n                    const key = `text-input-extra-action-${index}`;\n                    if (extraAction.tooltip) {\n                        return (\n                            <LegacyTooltip\n                                key={key}\n                                {...extraAction.tooltip}\n                                triggerElement={\n                                    <ExtraActionButtonWithRef\n                                        extraAction={extraAction}\n                                        disabled={disabled}\n                                        isFocusVisible={extraActionButtonIsFocusVisible}\n                                        focusProps={extraActionButtonFocusProps}\n                                    />\n                                }\n                            />\n                        );\n                    }\n                    return (\n                        <ExtraActionButtonWithRef\n                            key={key}\n                            extraAction={extraAction}\n                            disabled={disabled}\n                            isFocusVisible={extraActionButtonIsFocusVisible}\n                            focusProps={extraActionButtonFocusProps}\n                        />\n                    );\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            {(validation === Validation.Error || validation === Validation.Warning) && (\n                <span\n                    className={merge([\n                        'tw-flex tw-items-center tw-justify-center',\n                        validation === Validation.Error && 'tw-text-text-negative',\n                        validation === Validation.Warning && 'tw-text-text-warning',\n                    ])}\n                    data-test-id=\"error-state-exclamation-mark-icon\"\n                >\n                    <IconExclamationMarkTriangle />\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};\nTextInput.displayName = 'FondueTextInput';\n"],"names":["TextInputType","ExtraActionButton","extraAction","disabled","isFocusVisible","focusProps","ref","isDisabled","jsx","merge","FOCUS_STYLE","ExtraActionButtonWithRef","forwardRef","TextInput","propId","type","decorator","validation","Validation","clearable","placeholder","required","obfuscated","autocomplete","dotted","value","copyable","onChange","onEnterPressed","onBlur","onClear","onFocus","size","spellcheck","readonly","focusOnMount","selectable","extraActions","useFocusRing","clearButtonIsFocusVisible","clearButtonFocusProps","passwordButtonIsFocusVisible","passwordButtonFocusProps","copyButtonIsFocusVisible","copyButtonFocusProps","extraActionButtonIsFocusVisible","extraActionButtonFocusProps","copy","status","useCopy","inputElement","useRef","isObfuscated","setIsObfuscated","useState","useEffect","_a","onKeyDown","event","getInputType","spellcheckProp","jsxs","validationClassMap","useMemoizedId","e","index","key","LegacyTooltip","_b","IconCross","IconEye","IconEyeOff","LoadingCircle","LoadingCircleSize","IconExclamationMarkTriangle","IconCrossCircle","IconClipboard","IconCheckMark"],"mappings":"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"}

package/dist/components/Textarea/Textarea.es.js

@@ -21,14 +21,14 @@ const R = ({
   validation: e = r.Default,
   minRows: w,
   maxRows: k,
-  autosize: c = !1,
+  autosize: n = !1,
   resizeable: h = !0,
-  onFocus: n,
+  onFocus: c,
   selectable: N = !1,
   focusOnMount: p,
   onEnterPressed: i
 }) => {
-  const T = c ? W : "textarea", f = M(null);
+  const T = n ? W : "textarea", f = M(null);
   V(() => {
     var t;
     p && ((t = f.current) == null || t.focus());
@@ -52,7 +52,7 @@ const R = ({
           onBlur: (t) => m && m(t.target.value),
           onInput: (t) => s && s(t.target.value)
         }),
-        ...c ? F : { rows: w },
+        ...n ? F : { rows: w },
         id: S(x),
         ref: f,
         value: d,
@@ -61,7 +61,7 @@ const R = ({
         className: u([
           "tw-w-full tw-p-2 tw-border tw-rounded tw-text-s tw-outline-none tw-transition tw-placeholder-black-60",
           !!o && "tw-pl-7 ",
-          l ? "tw-border-black-5 tw-bg-black-5 tw-text-black-40" : "tw-text-black tw-border-black-20 hover:tw-border-black-90",
+          l ? "tw-border-black-5 tw-bg-black-5 tw-text-black-40" : "tw-text-black tw-border-black-20 hover:tw-border-line-x-strong",
           C && j,
           D[e],
           !h && "tw-resize-none",
@@ -69,7 +69,7 @@ const R = ({
         ]),
         disabled: l,
         onFocus: (t) => {
-          N && t.target.select(), n && n(t);
+          N && t.target.select(), c && c(t);
         },
         onKeyDown: z,
         "data-test-id": "textarea"

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.es.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { FocusEvent, FormEvent, KeyboardEvent, ReactElement, ReactNode, useEffect, useRef } from 'react';\nimport TextareaAutosize, { TextareaAutosizeProps } from 'react-textarea-autosize';\nimport { IconExclamationMarkTriangle } from '@foundation/Icon/Generated';\n\nexport type TextareaProps = {\n    id?: string;\n    value?: string;\n    required?: boolean;\n    decorator?: ReactNode;\n    placeholder?: string;\n    disabled?: boolean;\n    onInput?: (value: string) => void;\n    onBlur?: (value: string) => void;\n    onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;\n    validation?: Validation;\n    /** When autosize if false, this is used as 'rows' property for standard textarea */\n    minRows?: number;\n    /** When autosize if false, this property is ignored */\n    maxRows?: number;\n    autosize?: boolean;\n    resizeable?: boolean;\n    selectable?: boolean;\n    focusOnMount?: boolean;\n    onEnterPressed?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;\n};\n\nexport const Textarea = ({\n    id: propId,\n    value,\n    required = false,\n    decorator,\n    placeholder,\n    disabled = false,\n    onInput,\n    onBlur,\n    validation = Validation.Default,\n    minRows,\n    maxRows,\n    autosize = false,\n    resizeable = true,\n    onFocus,\n    selectable = false,\n    focusOnMount,\n    onEnterPressed,\n}: TextareaProps): ReactElement => {\n    const Component = autosize ? TextareaAutosize : 'textarea';\n\n    const textareaElement = useRef<HTMLTextAreaElement | null>(null);\n\n    useEffect(() => {\n        focusOnMount && textareaElement.current?.focus();\n    }, [focusOnMount]);\n\n    const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n        if (event.key === 'Enter') {\n            onEnterPressed?.(event);\n        }\n    };\n\n    const { isFocusVisible, focusProps } = useFocusRing({ isTextInput: true });\n\n    const autosizeProps = { maxRows, minRows };\n\n    return (\n        <div className=\"tw-relative\">\n            {decorator && (\n                <div\n                    className=\"tw-absolute tw-top-2 tw-left-2 tw-inline-flex tw-items-end tw-text-black-80\"\n                    data-test-id=\"decorator\"\n                >\n                    {decorator}\n                </div>\n            )}\n            <Component\n                {...(mergeProps(focusProps, {\n                    onBlur: (event: FocusEvent<HTMLTextAreaElement>) => onBlur && onBlur(event.target.value),\n                    onInput: (event: FormEvent<HTMLTextAreaElement>) =>\n                        onInput && onInput((event.target as HTMLTextAreaElement).value),\n                }) as TextareaAutosizeProps)}\n                {...(autosize ? autosizeProps : { rows: minRows })}\n                id={useMemoizedId(propId)}\n                ref={textareaElement}\n                value={value}\n                placeholder={placeholder}\n                required={required}\n                className={merge([\n                    'tw-w-full tw-p-2 tw-border tw-rounded tw-text-s tw-outline-none tw-transition tw-placeholder-black-60',\n                    !!decorator && 'tw-pl-7 ',\n                    disabled\n                        ? 'tw-border-black-5 tw-bg-black-5 tw-text-black-40'\n                        : 'tw-text-black tw-border-black-20 hover:tw-border-black-90',\n                    isFocusVisible && FOCUS_STYLE,\n                    validationClassMap[validation],\n                    !resizeable && 'tw-resize-none',\n                    validation === Validation.Error && 'tw-pr-8',\n                ])}\n                disabled={disabled}\n                onFocus={(e) => {\n                    if (selectable) {\n                        e.target.select();\n                    }\n                    if (onFocus) {\n                        onFocus(e);\n                    }\n                }}\n                onKeyDown={onKeyDown}\n                data-test-id=\"textarea\"\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            {(validation === Validation.Error || validation === Validation.Warning) && (\n                <span\n                    className={merge([\n                        'tw-absolute tw-top-[0.6rem] tw-right-[0.6rem]',\n                        validation === Validation.Error && 'tw-text-text-negative',\n                        validation === Validation.Warning && 'tw-text-text-warning',\n                    ])}\n                    data-test-id=\"error-state-exclamation-mark-icon\"\n                >\n                    <IconExclamationMarkTriangle />\n                </span>\n            )}\n        </div>\n    );\n};\nTextarea.displayName = 'FondueTextarea';\n"],"names":["Textarea","propId","value","required","decorator","placeholder","disabled","onInput","onBlur","validation","Validation","minRows","maxRows","autosize","resizeable","onFocus","selectable","focusOnMount","onEnterPressed","Component","TextareaAutosize","textareaElement","useRef","useEffect","_a","onKeyDown","event","isFocusVisible","focusProps","useFocusRing","autosizeProps","jsxs","jsx","mergeProps","useMemoizedId","merge","FOCUS_STYLE","validationClassMap","e","LoadingCircle","LoadingCircleSize","IconExclamationMarkTriangle"],"mappings":";;;;;;;;;;;AAmCO,MAAMA,IAAW,CAAC;AAAA,EACrB,IAAIC;AAAA,EACJ,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC,IAAaC,EAAW;AAAA,EACxB,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,SAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,cAAAC;AAAA,EACA,gBAAAC;AACJ,MAAmC;AACzB,QAAAC,IAAYN,IAAWO,IAAmB,YAE1CC,IAAkBC,EAAmC,IAAI;AAE/D,EAAAC,EAAU,MAAM;;AACI,IAAAN,OAAAO,IAAAH,EAAgB,YAAhB,QAAAG,EAAyB;AAAA,EAAM,GAChD,CAACP,CAAY,CAAC;AAEX,QAAAQ,IAAY,CAACC,MAA8C;AACzD,IAAAA,EAAM,QAAQ,YACdR,KAAA,QAAAA,EAAiBQ;AAAA,EACrB,GAGE,EAAE,gBAAAC,GAAgB,YAAAC,EAAW,IAAIC,EAAa,EAAE,aAAa,IAAM,GAEnEC,IAAgB,EAAE,SAAAlB,GAAS,SAAAD;AAG7B,SAAA,gBAAAoB,EAAC,OAAI,EAAA,WAAU,eACV,UAAA;AAAA,IACG3B,KAAA,gBAAA4B;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,gBAAa;AAAA,QAEZ,UAAA5B;AAAA,MAAA;AAAA,IACL;AAAA,IAEJ,gBAAA4B;AAAA,MAACb;AAAA,MAAA;AAAA,QACI,GAAIc,EAAWL,GAAY;AAAA,UACxB,QAAQ,CAACF,MAA2ClB,KAAUA,EAAOkB,EAAM,OAAO,KAAK;AAAA,UACvF,SAAS,CAACA,MACNnB,KAAWA,EAASmB,EAAM,OAA+B,KAAK;AAAA,QAAA,CACrE;AAAA,QACA,GAAIb,IAAWiB,IAAgB,EAAE,MAAMnB,EAAQ;AAAA,QAChD,IAAIuB,EAAcjC,CAAM;AAAA,QACxB,KAAKoB;AAAA,QACL,OAAAnB;AAAA,QACA,aAAAG;AAAA,QACA,UAAAF;AAAA,QACA,WAAWgC,EAAM;AAAA,UACb;AAAA,UACA,CAAC,CAAC/B,KAAa;AAAA,UACfE,IACM,qDACA;AAAA,UACNqB,KAAkBS;AAAA,UAClBC,EAAmB5B,CAAU;AAAA,UAC7B,CAACK,KAAc;AAAA,UACfL,MAAeC,EAAW,SAAS;AAAA,QAAA,CACtC;AAAA,QACD,UAAAJ;AAAA,QACA,SAAS,CAACgC,MAAM;AACZ,UAAItB,KACAsB,EAAE,OAAO,UAETvB,KACAA,EAAQuB,CAAC;AAAA,QAEjB;AAAA,QACA,WAAAb;AAAA,QACA,gBAAa;AAAA,MAAA;AAAA,IACjB;AAAA,IACChB,MAAeC,EAAW,WACvB,gBAAAsB,EAAC,QAAK,EAAA,WAAU,yHACZ,UAAA,gBAAAA,EAACO,GAAc,EAAA,MAAMC,EAAkB,WAAY,CAAA,GACvD;AAAA,KAEF/B,MAAeC,EAAW,SAASD,MAAeC,EAAW,YAC3D,gBAAAsB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWG,EAAM;AAAA,UACb;AAAA,UACA1B,MAAeC,EAAW,SAAS;AAAA,UACnCD,MAAeC,EAAW,WAAW;AAAA,QAAA,CACxC;AAAA,QACD,gBAAa;AAAA,QAEb,4BAAC+B,GAA4B,EAAA;AAAA,MAAA;AAAA,IACjC;AAAA,EAER,EAAA,CAAA;AAER;AACAzC,EAAS,cAAc;"}
+{"version":3,"file":"Textarea.es.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { FocusEvent, FormEvent, KeyboardEvent, ReactElement, ReactNode, useEffect, useRef } from 'react';\nimport TextareaAutosize, { TextareaAutosizeProps } from 'react-textarea-autosize';\nimport { IconExclamationMarkTriangle } from '@foundation/Icon/Generated';\n\nexport type TextareaProps = {\n    id?: string;\n    value?: string;\n    required?: boolean;\n    decorator?: ReactNode;\n    placeholder?: string;\n    disabled?: boolean;\n    onInput?: (value: string) => void;\n    onBlur?: (value: string) => void;\n    onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;\n    validation?: Validation;\n    /** When autosize if false, this is used as 'rows' property for standard textarea */\n    minRows?: number;\n    /** When autosize if false, this property is ignored */\n    maxRows?: number;\n    autosize?: boolean;\n    resizeable?: boolean;\n    selectable?: boolean;\n    focusOnMount?: boolean;\n    onEnterPressed?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;\n};\n\nexport const Textarea = ({\n    id: propId,\n    value,\n    required = false,\n    decorator,\n    placeholder,\n    disabled = false,\n    onInput,\n    onBlur,\n    validation = Validation.Default,\n    minRows,\n    maxRows,\n    autosize = false,\n    resizeable = true,\n    onFocus,\n    selectable = false,\n    focusOnMount,\n    onEnterPressed,\n}: TextareaProps): ReactElement => {\n    const Component = autosize ? TextareaAutosize : 'textarea';\n\n    const textareaElement = useRef<HTMLTextAreaElement | null>(null);\n\n    useEffect(() => {\n        focusOnMount && textareaElement.current?.focus();\n    }, [focusOnMount]);\n\n    const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n        if (event.key === 'Enter') {\n            onEnterPressed?.(event);\n        }\n    };\n\n    const { isFocusVisible, focusProps } = useFocusRing({ isTextInput: true });\n\n    const autosizeProps = { maxRows, minRows };\n\n    return (\n        <div className=\"tw-relative\">\n            {decorator && (\n                <div\n                    className=\"tw-absolute tw-top-2 tw-left-2 tw-inline-flex tw-items-end tw-text-black-80\"\n                    data-test-id=\"decorator\"\n                >\n                    {decorator}\n                </div>\n            )}\n            <Component\n                {...(mergeProps(focusProps, {\n                    onBlur: (event: FocusEvent<HTMLTextAreaElement>) => onBlur && onBlur(event.target.value),\n                    onInput: (event: FormEvent<HTMLTextAreaElement>) =>\n                        onInput && onInput((event.target as HTMLTextAreaElement).value),\n                }) as TextareaAutosizeProps)}\n                {...(autosize ? autosizeProps : { rows: minRows })}\n                id={useMemoizedId(propId)}\n                ref={textareaElement}\n                value={value}\n                placeholder={placeholder}\n                required={required}\n                className={merge([\n                    'tw-w-full tw-p-2 tw-border tw-rounded tw-text-s tw-outline-none tw-transition tw-placeholder-black-60',\n                    !!decorator && 'tw-pl-7 ',\n                    disabled\n                        ? 'tw-border-black-5 tw-bg-black-5 tw-text-black-40'\n                        : 'tw-text-black tw-border-black-20 hover:tw-border-line-x-strong',\n                    isFocusVisible && FOCUS_STYLE,\n                    validationClassMap[validation],\n                    !resizeable && 'tw-resize-none',\n                    validation === Validation.Error && 'tw-pr-8',\n                ])}\n                disabled={disabled}\n                onFocus={(e) => {\n                    if (selectable) {\n                        e.target.select();\n                    }\n                    if (onFocus) {\n                        onFocus(e);\n                    }\n                }}\n                onKeyDown={onKeyDown}\n                data-test-id=\"textarea\"\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            {(validation === Validation.Error || validation === Validation.Warning) && (\n                <span\n                    className={merge([\n                        'tw-absolute tw-top-[0.6rem] tw-right-[0.6rem]',\n                        validation === Validation.Error && 'tw-text-text-negative',\n                        validation === Validation.Warning && 'tw-text-text-warning',\n                    ])}\n                    data-test-id=\"error-state-exclamation-mark-icon\"\n                >\n                    <IconExclamationMarkTriangle />\n                </span>\n            )}\n        </div>\n    );\n};\nTextarea.displayName = 'FondueTextarea';\n"],"names":["Textarea","propId","value","required","decorator","placeholder","disabled","onInput","onBlur","validation","Validation","minRows","maxRows","autosize","resizeable","onFocus","selectable","focusOnMount","onEnterPressed","Component","TextareaAutosize","textareaElement","useRef","useEffect","_a","onKeyDown","event","isFocusVisible","focusProps","useFocusRing","autosizeProps","jsxs","jsx","mergeProps","useMemoizedId","merge","FOCUS_STYLE","validationClassMap","e","LoadingCircle","LoadingCircleSize","IconExclamationMarkTriangle"],"mappings":";;;;;;;;;;;AAmCO,MAAMA,IAAW,CAAC;AAAA,EACrB,IAAIC;AAAA,EACJ,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC,IAAaC,EAAW;AAAA,EACxB,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,SAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,cAAAC;AAAA,EACA,gBAAAC;AACJ,MAAmC;AACzB,QAAAC,IAAYN,IAAWO,IAAmB,YAE1CC,IAAkBC,EAAmC,IAAI;AAE/D,EAAAC,EAAU,MAAM;;AACI,IAAAN,OAAAO,IAAAH,EAAgB,YAAhB,QAAAG,EAAyB;AAAA,EAAM,GAChD,CAACP,CAAY,CAAC;AAEX,QAAAQ,IAAY,CAACC,MAA8C;AACzD,IAAAA,EAAM,QAAQ,YACdR,KAAA,QAAAA,EAAiBQ;AAAA,EACrB,GAGE,EAAE,gBAAAC,GAAgB,YAAAC,EAAW,IAAIC,EAAa,EAAE,aAAa,IAAM,GAEnEC,IAAgB,EAAE,SAAAlB,GAAS,SAAAD;AAG7B,SAAA,gBAAAoB,EAAC,OAAI,EAAA,WAAU,eACV,UAAA;AAAA,IACG3B,KAAA,gBAAA4B;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,gBAAa;AAAA,QAEZ,UAAA5B;AAAA,MAAA;AAAA,IACL;AAAA,IAEJ,gBAAA4B;AAAA,MAACb;AAAA,MAAA;AAAA,QACI,GAAIc,EAAWL,GAAY;AAAA,UACxB,QAAQ,CAACF,MAA2ClB,KAAUA,EAAOkB,EAAM,OAAO,KAAK;AAAA,UACvF,SAAS,CAACA,MACNnB,KAAWA,EAASmB,EAAM,OAA+B,KAAK;AAAA,QAAA,CACrE;AAAA,QACA,GAAIb,IAAWiB,IAAgB,EAAE,MAAMnB,EAAQ;AAAA,QAChD,IAAIuB,EAAcjC,CAAM;AAAA,QACxB,KAAKoB;AAAA,QACL,OAAAnB;AAAA,QACA,aAAAG;AAAA,QACA,UAAAF;AAAA,QACA,WAAWgC,EAAM;AAAA,UACb;AAAA,UACA,CAAC,CAAC/B,KAAa;AAAA,UACfE,IACM,qDACA;AAAA,UACNqB,KAAkBS;AAAA,UAClBC,EAAmB5B,CAAU;AAAA,UAC7B,CAACK,KAAc;AAAA,UACfL,MAAeC,EAAW,SAAS;AAAA,QAAA,CACtC;AAAA,QACD,UAAAJ;AAAA,QACA,SAAS,CAACgC,MAAM;AACZ,UAAItB,KACAsB,EAAE,OAAO,UAETvB,KACAA,EAAQuB,CAAC;AAAA,QAEjB;AAAA,QACA,WAAAb;AAAA,QACA,gBAAa;AAAA,MAAA;AAAA,IACjB;AAAA,IACChB,MAAeC,EAAW,WACvB,gBAAAsB,EAAC,QAAK,EAAA,WAAU,yHACZ,UAAA,gBAAAA,EAACO,GAAc,EAAA,MAAMC,EAAkB,WAAY,CAAA,GACvD;AAAA,KAEF/B,MAAeC,EAAW,SAASD,MAAeC,EAAW,YAC3D,gBAAAsB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWG,EAAM;AAAA,UACb;AAAA,UACA1B,MAAeC,EAAW,SAAS;AAAA,UACnCD,MAAeC,EAAW,WAAW;AAAA,QAAA,CACxC;AAAA,QACD,gBAAa;AAAA,QAEb,4BAAC+B,GAA4B,EAAA;AAAA,MAAA;AAAA,IACjC;AAAA,EAER,EAAA,CAAA;AAER;AACAzC,EAAS,cAAc;"}

package/dist/hooks/useToggleOverlay.es.js

@@ -1,18 +1,18 @@
-import { useState as d, useCallback as r, useEffect as f } from "react";
-const u = (a = !1, { isBlockingModal: e } = { isBlockingModal: !1 }) => {
-  const [n, o] = d(a), t = r(
-    (s) => {
-      n && !e && s.key === "Escape" && o(!1);
+import { useState as f, useCallback as r, useEffect as d } from "react";
+const i = (a = !1, { isBlockingModal: n } = { isBlockingModal: !1 }) => {
+  const [e, s] = f(a), o = r(
+    (t) => {
+      e && t.stopPropagation(), e && !n && t.key === "Escape" && s(!1);
     },
-    [e, n]
+    [n, e]
   );
-  f(() => (window.addEventListener("keydown", t), () => {
-    window.removeEventListener("keydown", t);
-  }), [t, e]);
-  const c = r((s) => o(s), []);
-  return [n, c];
+  d(() => (window.addEventListener("keydown", o), () => {
+    window.removeEventListener("keydown", o);
+  }), [o, n]);
+  const c = r((t) => s(t), []);
+  return [e, c];
 };
 export {
-  u as useToggleOverlay
+  i as useToggleOverlay
 };
 //# sourceMappingURL=useToggleOverlay.es.js.map

package/dist/hooks/useToggleOverlay.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToggleOverlay.es.js","sources":["../../src/hooks/useToggleOverlay.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCallback, useEffect, useState } from 'react';\n\nexport const useToggleOverlay = (\n    initialState = false,\n    { isBlockingModal }: { isBlockingModal?: boolean } = { isBlockingModal: false },\n): [boolean, (value: boolean) => void] => {\n    const [open, setOpen] = useState<boolean>(initialState);\n    const checkKeyboardEvent = useCallback(\n        (event: KeyboardEvent) => {\n            if (open && !isBlockingModal && event.key === 'Escape') {\n                setOpen(false);\n            }\n        },\n        [isBlockingModal, open],\n    );\n\n    useEffect(() => {\n        window.addEventListener('keydown', checkKeyboardEvent);\n\n        return () => {\n            window.removeEventListener('keydown', checkKeyboardEvent);\n        };\n    }, [checkKeyboardEvent, isBlockingModal]);\n\n    const handler = useCallback((value: boolean): void => setOpen(value), []);\n    return [open, handler];\n};\n"],"names":["useToggleOverlay","initialState","isBlockingModal","open","setOpen","useState","checkKeyboardEvent","useCallback","event","useEffect","handler","value"],"mappings":";AAIa,MAAAA,IAAmB,CAC5BC,IAAe,IACf,EAAE,iBAAAC,MAAmD,EAAE,iBAAiB,SAClC;AACtC,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAkBJ,CAAY,GAChDK,IAAqBC;AAAA,IACvB,CAACC,MAAyB;AACtB,MAAIL,KAAQ,CAACD,KAAmBM,EAAM,QAAQ,YAC1CJ,EAAQ,EAAK;AAAA,IAErB;AAAA,IACA,CAACF,GAAiBC,CAAI;AAAA,EAAA;AAG1B,EAAAM,EAAU,OACC,OAAA,iBAAiB,WAAWH,CAAkB,GAE9C,MAAM;AACF,WAAA,oBAAoB,WAAWA,CAAkB;AAAA,EAAA,IAE7D,CAACA,GAAoBJ,CAAe,CAAC;AAElC,QAAAQ,IAAUH,EAAY,CAACI,MAAyBP,EAAQO,CAAK,GAAG,CAAA,CAAE;AACjE,SAAA,CAACR,GAAMO,CAAO;AACzB;"}
+{"version":3,"file":"useToggleOverlay.es.js","sources":["../../src/hooks/useToggleOverlay.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCallback, useEffect, useState } from 'react';\n\nexport const useToggleOverlay = (\n    initialState = false,\n    { isBlockingModal }: { isBlockingModal?: boolean } = { isBlockingModal: false },\n): [boolean, (value: boolean) => void] => {\n    const [open, setOpen] = useState<boolean>(initialState);\n    const checkKeyboardEvent = useCallback(\n        (event: KeyboardEvent) => {\n            if (open) {\n                event.stopPropagation();\n            }\n            if (open && !isBlockingModal && event.key === 'Escape') {\n                setOpen(false);\n            }\n        },\n        [isBlockingModal, open],\n    );\n\n    useEffect(() => {\n        window.addEventListener('keydown', checkKeyboardEvent);\n\n        return () => {\n            window.removeEventListener('keydown', checkKeyboardEvent);\n        };\n    }, [checkKeyboardEvent, isBlockingModal]);\n\n    const handler = useCallback((value: boolean): void => setOpen(value), []);\n    return [open, handler];\n};\n"],"names":["useToggleOverlay","initialState","isBlockingModal","open","setOpen","useState","checkKeyboardEvent","useCallback","event","useEffect","handler","value"],"mappings":";AAIa,MAAAA,IAAmB,CAC5BC,IAAe,IACf,EAAE,iBAAAC,MAAmD,EAAE,iBAAiB,SAClC;AACtC,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAkBJ,CAAY,GAChDK,IAAqBC;AAAA,IACvB,CAACC,MAAyB;AACtB,MAAIL,KACAK,EAAM,gBAAgB,GAEtBL,KAAQ,CAACD,KAAmBM,EAAM,QAAQ,YAC1CJ,EAAQ,EAAK;AAAA,IAErB;AAAA,IACA,CAACF,GAAiBC,CAAI;AAAA,EAAA;AAG1B,EAAAM,EAAU,OACC,OAAA,iBAAiB,WAAWH,CAAkB,GAE9C,MAAM;AACF,WAAA,oBAAoB,WAAWA,CAAkB;AAAA,EAAA,IAE7D,CAACA,GAAoBJ,CAAe,CAAC;AAElC,QAAAQ,IAAUH,EAAY,CAACI,MAAyBP,EAAQO,CAAK,GAAG,CAAA,CAAE;AACjE,SAAA,CAACR,GAAMO,CAAO;AACzB;"}