npm - @frontify/fondue - Versions diffs - 12.0.0-beta.124 → 12.0.0-beta.126 - Mend

@frontify/fondue 12.0.0-beta.124 → 12.0.0-beta.126

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/dist/components/Checkbox/Checkbox.es.js +30 -31
package/dist/components/Checkbox/Checkbox.es.js.map +1 -1
package/dist/components/TextInput/TextInput.es.js +61 -56
package/dist/components/TextInput/TextInput.es.js.map +1 -1
package/dist/components/Tooltip/Tooltip.es.js +122 -116
package/dist/components/Tooltip/Tooltip.es.js.map +1 -1
package/dist/index.cjs.js +18 -18
package/dist/index.cjs.js.map +1 -1
package/dist/index.umd.js +18 -18
package/dist/index.umd.js.map +1 -1
package/dist/styles.css +1 -1
package/dist/utilities/validation.d.ts +2 -1
package/dist/utilities/validation.es.js +8 -7
package/dist/utilities/validation.es.js.map +1 -1
package/package.json +1 -1

package/dist/components/Checkbox/Checkbox.es.js CHANGED Viewed

@@ -6,19 +6,19 @@ import { useFocusRing as Y } from "@react-aria/focus";
 import { mergeProps as _ } from "@react-aria/utils";
 import { useToggleState as z } from "@react-stately/toggle";
 import { FOCUS_STYLE as A } from "../../utilities/focusStyle.es.js";
-import { merge as a } from "../../utilities/merge.es.js";
+import { merge as s } from "../../utilities/merge.es.js";
 import { useForwardedRef as B } from "../../utilities/useForwardedRef.es.js";
 import G from "../../foundation/Icon/Generated/IconCheckMark.es.js";
 import H from "../../foundation/Icon/Generated/IconMinus.es.js";
 var J = /* @__PURE__ */ ((e) => (e.Checked = "Checked", e.Unchecked = "Unchecked", e.Mixed = "Mixed", e))(J || {}), Q = /* @__PURE__ */ ((e) => (e.Default = "Default", e.Weak = "Weak", e))(Q || {}), V = /* @__PURE__ */ ((e) => (e.Default = "Default", e.Large = "Large", e))(V || {});
 const n = (e) => e === "Checked" || e === "Mixed", X = ({
   id: e,
-  emphasis: w = "Default",
+  emphasis: d = "Default",
   size: C = "Default",
-  disabled: s,
-  required: c,
+  disabled: a,
+  required: l,
   label: i,
-  hideLabel: d,
+  hideLabel: w,
   tooltip: F,
   helperText: m,
   "aria-label": x = "Checkbox",
@@ -28,23 +28,23 @@ const n = (e) => e === "Checked" || e === "Mixed", X = ({
   state: o = "Unchecked"
   /* Unchecked */
 }, M) => {
-  const b = T(e), t = B(M), { focusProps: y } = Y(), I = z({
-    onChange: s ? void 0 : L,
+  const u = T(e), t = B(M), { focusProps: y } = Y(), I = z({
+    onChange: a ? void 0 : L,
     isSelected: o === "Checked"
     /* Checked */
-  }), [S, u] = E(), [f, U] = E(), g = (l) => {
-    l.key === "Tab" && u(!0);
+  }), [S, b] = E(), [f, U] = E(), g = (c) => {
+    c.key === "Tab" && b(!0);
   }, h = () => {
-    u(!1);
+    b(!1);
   };
   K(() => {
-    var l, v, k, p;
-    f || ((l = t == null ? void 0 : t.current) == null || l.removeEventListener("keyup", g), (v = t == null ? void 0 : t.current) == null || v.addEventListener("keyup", g), (k = t == null ? void 0 : t.current) == null || k.removeEventListener("blur", h), (p = t == null ? void 0 : t.current) == null || p.addEventListener("blur", h), U(!0));
+    var c, v, k, p;
+    f || ((c = t == null ? void 0 : t.current) == null || c.removeEventListener("keyup", g), (v = t == null ? void 0 : t.current) == null || v.addEventListener("keyup", g), (k = t == null ? void 0 : t.current) == null || k.removeEventListener("blur", h), (p = t == null ? void 0 : t.current) == null || p.addEventListener("blur", h), U(!0));
   }, [f, t]);
   const { inputProps: P } = j(
     {
-      isDisabled: s,
-      isRequired: c,
+      isDisabled: a,
+      isRequired: l,
       isIndeterminate: o === "Mixed",
       "aria-label": x || i,
       value: N
@@ -52,66 +52,65 @@ const n = (e) => e === "Checked" || e === "Mixed", X = ({
     I,
     t
   );
-  return /* @__PURE__ */ r.createElement("div", { className: "tw-flex tw-flex-col tw-gap-1 tw-transition-colors", "data-test-id": "checkbox" }, /* @__PURE__ */ r.createElement("div", { className: "tw-inline-flex tw-flex-row" }, /* @__PURE__ */ r.createElement(
+  return /* @__PURE__ */ r.createElement("div", { className: "tw-gap-1 tw-transition-colors", "data-test-id": "checkbox" }, /* @__PURE__ */ r.createElement("div", { className: s(["tw-inline-flex tw-flex-row tw-rounded", S ? A : ""]) }, /* @__PURE__ */ r.createElement(
     O,
     {
-      disabled: s,
+      disabled: a,
       clickable: !0,
-      htmlFor: b,
+      htmlFor: u,
       tooltip: F ?? void 0,
-      required: c,
+      required: l,
       bold: n(o)
     },
     /* @__PURE__ */ r.createElement("span", { className: "tw-flex tw-items-center" }, /* @__PURE__ */ r.createElement("span", { className: "tw-inline-flex tw-mr-1.5" }, /* @__PURE__ */ r.createElement(
       "input",
       {
         ..._(D || P, y),
-        id: b,
+        id: u,
         ref: t,
         className: "tw-sr-only",
         "data-test-id": "checkbox-input",
         "aria-label": x,
-        required: c
+        required: l
       }
     ), /* @__PURE__ */ r.createElement(
       "span",
       {
         "data-test-id": "checkbox-icon-box",
         "aria-hidden": "true",
-        className: a([
+        className: s([
           "tw-leading-3  tw-p-2 tw-relative tw-flex tw-items-center tw-justify-center tw-rounded tw-border tw-shrink-0 tw-flex-none",
           C === "Default" ? "tw-h-4 tw-w-4" : "tw-h-5 tw-w-5",
-          S ? A : "",
-          s ? a([
+          a ? s([
             "tw-bg-box-disabled tw-pointer-events-none",
             !n(o) && "tw-bg-box-disabled tw-text-box-disabled-inverse tw-border-line-strong",
             n(o) && "tw-bg-box-disabled tw-text-box-disabled-inverse tw-border-line-strong"
-          ]) : a([
+          ]) : s([
             !n(o) && "tw-bg-base tw-border-line-xx-strong hover:tw-bg-box-neutral",
-            n(o) && w === "Weak" && "tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover",
-            n(o) && w === "Default" && "tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover"
+            n(o) && d === "Weak" && "tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover",
+            n(o) && d === "Default" && "tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover"
           ])
         ])
       },
       o === "Checked" && /* @__PURE__ */ r.createElement(G, null),
       o === "Mixed" && /* @__PURE__ */ r.createElement(H, null)
-    )), /* @__PURE__ */ r.createElement("span", { className: "tw-inline-flex tw-flex-col" }, i && !d && /* @__PURE__ */ r.createElement(
+    )), /* @__PURE__ */ r.createElement("span", { className: "tw-inline-flex tw-flex-col" }, i && !w && /* @__PURE__ */ r.createElement(
       "span",
       {
         "data-test-id": "checkbox-label",
-        className: a([
+        className: s([
           "tw-text-xs tw-select-none hover:tw-cursor-pointer hover:tw-text-black dark:hover:tw-text-white group-hover:tw-text-black dark:group-hover:tw-text-white",
           n(o) ? "tw-font-medium" : ""
         ])
       },
       i
-    ), m && !d && /* @__PURE__ */ r.createElement(
+    ), m && !w && /* @__PURE__ */ r.createElement(
       "span",
       {
         "data-test-id": "checkbox-helper-text",
-        className: a([
+        className: s([
           "tw-font-sans tw-text-xs tw-font-normal",
-          s ? "text-disabled" : "tw-text-text-x-weak"
+          a ? "text-disabled" : "tw-text-text-x-weak"
         ])
       },
       m

package/dist/components/Checkbox/Checkbox.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.es.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useState } from 'react';\nimport { IconCheckMark, IconMinus } from '@foundation/Icon/Generated';\nimport { InputLabel, InputLabelTooltipProps } from '@components/InputLabel/InputLabel';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useCheckbox } from '@react-aria/checkbox';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { useToggleState } from '@react-stately/toggle';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { useForwardedRef } from '@utilities/useForwardedRef';\nimport React, { ForwardRefRenderFunction, HTMLAttributes, forwardRef } from 'react';\n\nexport enum CheckboxState {\n Checked = 'Checked',\n Unchecked = 'Unchecked',\n Mixed = 'Mixed',\n}\n\nexport enum CheckboxEmphasis {\n Default = 'Default',\n Weak = 'Weak',\n}\n\nexport enum CheckboxSize {\n Default = 'Default',\n Large = 'Large',\n}\n\nexport type CheckboxProps = {\n id?: string;\n state?: CheckboxState;\n emphasis?: CheckboxEmphasis;\n size?: CheckboxSize;\n disabled?: boolean;\n required?: boolean;\n value?: string;\n onChange?: (isChecked: boolean) => void;\n label?: string;\n hideLabel?: boolean;\n tooltip?: InputLabelTooltipProps;\n helperText?: string;\n 'aria-label'?: string;\n groupInputProps?: HTMLAttributes<HTMLElement>;\n};\n\nconst isCheckedOrMixed = (checked: CheckboxState): boolean => {\n return checked === CheckboxState.Checked \|\| checked === CheckboxState.Mixed;\n};\n\nconst CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, CheckboxProps> = (\n {\n id: propId,\n emphasis = CheckboxEmphasis.Default,\n size = CheckboxSize.Default,\n disabled,\n required,\n label,\n hideLabel,\n tooltip,\n helperText,\n 'aria-label': ariaLabel = 'Checkbox',\n value,\n groupInputProps,\n onChange,\n state = CheckboxState.Unchecked,\n },\n ref,\n) => {\n const id = useMemoizedId(propId);\n const inputRef = useForwardedRef<HTMLInputElement \| null>(ref);\n const { focusProps } = useFocusRing();\n const toggleState = useToggleState({\n onChange: disabled ? undefined : onChange,\n isSelected: state === CheckboxState.Checked,\n });\n const [showFocus, setShowFocus] = useState<Nullable<boolean>>();\n const [listeningForKeyboardEvents, setListeningForKeyboardEvents] = useState<Nullable<boolean>>();\n\n const tabFocusListener = (event: KeyboardEvent) => {\n if (event.key === 'Tab') {\n setShowFocus(true);\n }\n };\n\n const blurListener = () => {\n setShowFocus(false);\n };\n\n useEffect(() => {\n if (!listeningForKeyboardEvents) {\n inputRef?.current?.removeEventListener('keyup', tabFocusListener);\n inputRef?.current?.addEventListener('keyup', tabFocusListener);\n inputRef?.current?.removeEventListener('blur', blurListener);\n inputRef?.current?.addEventListener('blur', blurListener);\n\n setListeningForKeyboardEvents(true);\n }\n }, [listeningForKeyboardEvents, inputRef]);\n\n const { inputProps } = useCheckbox(\n {\n isDisabled: disabled,\n isRequired: required,\n isIndeterminate: state === CheckboxState.Mixed,\n 'aria-label': ariaLabel \|\| label,\n value,\n },\n toggleState,\n inputRef,\n );\n\n return (\n <div className=\"tw-flex tw-flex-col tw-gap-1 tw-transition-colors\" data-test-id=\"checkbox\">\n <div className=\"tw-inline-flex tw-flex-row\">\n <InputLabel\n disabled={disabled}\n clickable\n htmlFor={id}\n tooltip={tooltip ?? undefined}\n required={required}\n bold={isCheckedOrMixed(state)}\n >\n <span className=\"tw-flex tw-items-center\">\n <span className=\"tw-inline-flex tw-mr-1.5\">\n <input\n {...mergeProps(groupInputProps \|\| inputProps, focusProps)}\n id={id}\n ref={inputRef}\n className=\"tw-sr-only\"\n data-test-id=\"checkbox-input\"\n aria-label={ariaLabel}\n required={required}\n />\n <span\n data-test-id=\"checkbox-icon-box\"\n aria-hidden=\"true\"\n className={merge([\n 'tw-leading-3 tw-p-2 tw-relative tw-flex tw-items-center tw-justify-center tw-rounded tw-border tw-shrink-0 tw-flex-none',\n size === 'Default' ? 'tw-h-4 tw-w-4' : 'tw-h-5 tw-w-5',\n showFocus ? FOCUS_STYLE : '',\n disabled\n ? merge([\n 'tw-bg-box-disabled tw-pointer-events-none',\n !isCheckedOrMixed(state) &&\n 'tw-bg-box-disabled tw-text-box-disabled-inverse tw-border-line-strong',\n isCheckedOrMixed(state) &&\n 'tw-bg-box-disabled tw-text-box-disabled-inverse tw-border-line-strong',\n ])\n : merge([\n !isCheckedOrMixed(state) &&\n 'tw-bg-base tw-border-line-xx-strong hover:tw-bg-box-neutral',\n isCheckedOrMixed(state) &&\n emphasis === CheckboxEmphasis.Weak &&\n 'tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover',\n isCheckedOrMixed(state) &&\n emphasis === CheckboxEmphasis.Default &&\n 'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover',\n ]),\n ])}\n >\n {state === CheckboxState.Checked && <IconCheckMark />}\n {state === CheckboxState.Mixed && <IconMinus />}\n </span>\n </span>\n <span className=\"tw-inline-flex tw-flex-col\">\n {label && !hideLabel && (\n <span\n data-test-id=\"checkbox-label\"\n className={merge([\n 'tw-text-xs tw-select-none hover:tw-cursor-pointer hover:tw-text-black dark:hover:tw-text-white group-hover:tw-text-black dark:group-hover:tw-text-white',\n isCheckedOrMixed(state) ? 'tw-font-medium' : '',\n ])}\n >\n {label}\n </span>\n )}\n {helperText && !hideLabel && (\n <span\n data-test-id=\"checkbox-helper-text\"\n className={merge([\n 'tw-font-sans tw-text-xs tw-font-normal',\n disabled ? 'text-disabled' : 'tw-text-text-x-weak',\n ])}\n >\n {helperText}\n </span>\n )}\n </span>\n </span>\n </InputLabel>\n </div>\n </div>\n );\n};\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(CheckboxComponent);\nCheckbox.displayName = 'FondueCheckbox';\n"],"names":["CheckboxState","CheckboxEmphasis","CheckboxSize","isCheckedOrMixed","checked","CheckboxComponent","propId","emphasis","size","disabled","required","label","hideLabel","tooltip","helperText","ariaLabel","value","groupInputProps","onChange","state","ref","id","useMemoizedId","inputRef","useForwardedRef","focusProps","useFocusRing","toggleState","useToggleState","showFocus","setShowFocus","useState","listeningForKeyboardEvents","setListeningForKeyboardEvents","tabFocusListener","event","blurListener","useEffect","_a","_b","_c","_d","inputProps","useCheckbox","React","InputLabel","mergeProps","merge","FOCUS_STYLE","IconCheckMark","IconMinus","Checkbox","forwardRef"],"mappings":"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"}
1	+ {"version":3,"file":"Checkbox.es.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useState } from 'react';\nimport { IconCheckMark, IconMinus } from '@foundation/Icon/Generated';\nimport { InputLabel, InputLabelTooltipProps } from '@components/InputLabel/InputLabel';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useCheckbox } from '@react-aria/checkbox';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { useToggleState } from '@react-stately/toggle';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { useForwardedRef } from '@utilities/useForwardedRef';\nimport React, { ForwardRefRenderFunction, HTMLAttributes, forwardRef } from 'react';\n\nexport enum CheckboxState {\n Checked = 'Checked',\n Unchecked = 'Unchecked',\n Mixed = 'Mixed',\n}\n\nexport enum CheckboxEmphasis {\n Default = 'Default',\n Weak = 'Weak',\n}\n\nexport enum CheckboxSize {\n Default = 'Default',\n Large = 'Large',\n}\n\nexport type CheckboxProps = {\n id?: string;\n state?: CheckboxState;\n emphasis?: CheckboxEmphasis;\n size?: CheckboxSize;\n disabled?: boolean;\n required?: boolean;\n value?: string;\n onChange?: (isChecked: boolean) => void;\n label?: string;\n hideLabel?: boolean;\n tooltip?: InputLabelTooltipProps;\n helperText?: string;\n 'aria-label'?: string;\n groupInputProps?: HTMLAttributes<HTMLElement>;\n};\n\nconst isCheckedOrMixed = (checked: CheckboxState): boolean => {\n return checked === CheckboxState.Checked \|\| checked === CheckboxState.Mixed;\n};\n\nconst CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, CheckboxProps> = (\n {\n id: propId,\n emphasis = CheckboxEmphasis.Default,\n size = CheckboxSize.Default,\n disabled,\n required,\n label,\n hideLabel,\n tooltip,\n helperText,\n 'aria-label': ariaLabel = 'Checkbox',\n value,\n groupInputProps,\n onChange,\n state = CheckboxState.Unchecked,\n },\n ref,\n) => {\n const id = useMemoizedId(propId);\n const inputRef = useForwardedRef<HTMLInputElement \| null>(ref);\n const { focusProps } = useFocusRing();\n const toggleState = useToggleState({\n onChange: disabled ? undefined : onChange,\n isSelected: state === CheckboxState.Checked,\n });\n const [showFocus, setShowFocus] = useState<Nullable<boolean>>();\n const [listeningForKeyboardEvents, setListeningForKeyboardEvents] = useState<Nullable<boolean>>();\n\n const tabFocusListener = (event: KeyboardEvent) => {\n if (event.key === 'Tab') {\n setShowFocus(true);\n }\n };\n\n const blurListener = () => {\n setShowFocus(false);\n };\n\n useEffect(() => {\n if (!listeningForKeyboardEvents) {\n inputRef?.current?.removeEventListener('keyup', tabFocusListener);\n inputRef?.current?.addEventListener('keyup', tabFocusListener);\n inputRef?.current?.removeEventListener('blur', blurListener);\n inputRef?.current?.addEventListener('blur', blurListener);\n\n setListeningForKeyboardEvents(true);\n }\n }, [listeningForKeyboardEvents, inputRef]);\n\n const { inputProps } = useCheckbox(\n {\n isDisabled: disabled,\n isRequired: required,\n isIndeterminate: state === CheckboxState.Mixed,\n 'aria-label': ariaLabel \|\| label,\n value,\n },\n toggleState,\n inputRef,\n );\n\n return (\n <div className=\"tw-gap-1 tw-transition-colors\" data-test-id=\"checkbox\">\n <div className={merge(['tw-inline-flex tw-flex-row tw-rounded', showFocus ? FOCUS_STYLE : ''])}>\n <InputLabel\n disabled={disabled}\n clickable\n htmlFor={id}\n tooltip={tooltip ?? undefined}\n required={required}\n bold={isCheckedOrMixed(state)}\n >\n <span className=\"tw-flex tw-items-center\">\n <span className=\"tw-inline-flex tw-mr-1.5\">\n <input\n {...mergeProps(groupInputProps \|\| inputProps, focusProps)}\n id={id}\n ref={inputRef}\n className=\"tw-sr-only\"\n data-test-id=\"checkbox-input\"\n aria-label={ariaLabel}\n required={required}\n />\n <span\n data-test-id=\"checkbox-icon-box\"\n aria-hidden=\"true\"\n className={merge([\n 'tw-leading-3 tw-p-2 tw-relative tw-flex tw-items-center tw-justify-center tw-rounded tw-border tw-shrink-0 tw-flex-none',\n size === 'Default' ? 'tw-h-4 tw-w-4' : 'tw-h-5 tw-w-5',\n disabled\n ? merge([\n 'tw-bg-box-disabled tw-pointer-events-none',\n !isCheckedOrMixed(state) &&\n 'tw-bg-box-disabled tw-text-box-disabled-inverse tw-border-line-strong',\n isCheckedOrMixed(state) &&\n 'tw-bg-box-disabled tw-text-box-disabled-inverse tw-border-line-strong',\n ])\n : merge([\n !isCheckedOrMixed(state) &&\n 'tw-bg-base tw-border-line-xx-strong hover:tw-bg-box-neutral',\n isCheckedOrMixed(state) &&\n emphasis === CheckboxEmphasis.Weak &&\n 'tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover',\n isCheckedOrMixed(state) &&\n emphasis === CheckboxEmphasis.Default &&\n 'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover',\n ]),\n ])}\n >\n {state === CheckboxState.Checked && <IconCheckMark />}\n {state === CheckboxState.Mixed && <IconMinus />}\n </span>\n </span>\n <span className=\"tw-inline-flex tw-flex-col\">\n {label && !hideLabel && (\n <span\n data-test-id=\"checkbox-label\"\n className={merge([\n 'tw-text-xs tw-select-none hover:tw-cursor-pointer hover:tw-text-black dark:hover:tw-text-white group-hover:tw-text-black dark:group-hover:tw-text-white',\n isCheckedOrMixed(state) ? 'tw-font-medium' : '',\n ])}\n >\n {label}\n </span>\n )}\n {helperText && !hideLabel && (\n <span\n data-test-id=\"checkbox-helper-text\"\n className={merge([\n 'tw-font-sans tw-text-xs tw-font-normal',\n disabled ? 'text-disabled' : 'tw-text-text-x-weak',\n ])}\n >\n {helperText}\n </span>\n )}\n </span>\n </span>\n </InputLabel>\n </div>\n </div>\n );\n};\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(CheckboxComponent);\nCheckbox.displayName = 'FondueCheckbox';\n"],"names":["CheckboxState","CheckboxEmphasis","CheckboxSize","isCheckedOrMixed","checked","CheckboxComponent","propId","emphasis","size","disabled","required","label","hideLabel","tooltip","helperText","ariaLabel","value","groupInputProps","onChange","state","ref","id","useMemoizedId","inputRef","useForwardedRef","focusProps","useFocusRing","toggleState","useToggleState","showFocus","setShowFocus","useState","listeningForKeyboardEvents","setListeningForKeyboardEvents","tabFocusListener","event","blurListener","useEffect","_a","_b","_c","_d","inputProps","useCheckbox","React","merge","FOCUS_STYLE","InputLabel","mergeProps","IconCheckMark","IconMinus","Checkbox","forwardRef"],"mappings":"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"}

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

@@ -1,10 +1,10 @@
-import { useCopy as G } from "../../hooks/useCopy.es.js";
-import { useMemoizedId as H } from "../../hooks/useMemoizedId.es.js";
-import { useFocusRing as w } from "@react-aria/focus";
-import { FOCUS_STYLE as u } from "../../utilities/focusStyle.es.js";
+import { useCopy as q } from "../../hooks/useCopy.es.js";
+import { useMemoizedId as G } from "../../hooks/useMemoizedId.es.js";
+import { useFocusRing as m } from "@react-aria/focus";
+import { FOCUS_STYLE as p } from "../../utilities/focusStyle.es.js";
 import { merge as o } from "../../utilities/merge.es.js";
-import { validationClassMap as J, Validation as d } from "../../utilities/validation.es.js";
-import t, { useRef as Q, useState as W, useEffect as P } from "react";
+import { validationClassMap as H, Validation as n } from "../../utilities/validation.es.js";
+import t, { useRef as J, useState as Q, useEffect as P } from "react";
 import X from "../../foundation/Icon/Generated/IconCross.es.js";
 import Z from "../../foundation/Icon/Generated/IconEye.es.js";
 import tt from "../../foundation/Icon/Generated/IconEyeOff.es.js";
@@ -12,35 +12,35 @@ import { LoadingCircle as et, LoadingCircleSize as rt } from "../LoadingCircle/L
 import ot from "../../foundation/Icon/Generated/IconExclamationMarkTriangle.es.js";
 import st from "../../foundation/Icon/Generated/IconCrossCircle.es.js";
 import at from "../../foundation/Icon/Generated/IconClipboard.es.js";
-import lt from "../../foundation/Icon/Generated/IconCheckMark.es.js";
+import nt from "../../foundation/Icon/Generated/IconCheckMark.es.js";
 var ct = /* @__PURE__ */ ((s) => (s.Text = "text", s.Password = "password", s.Number = "number", s))(ct || {});
-const nt = ({
+const lt = ({
   id: s,
-  type: c = "text",
-  decorator: x,
-  validation: m = d.Default,
+  type: i = "text",
+  decorator: d,
+  validation: a = n.Default,
   clearable: V = !1,
   placeholder: B,
   required: T,
-  obfuscated: a,
+  obfuscated: c,
   disabled: r = !1,
   autocomplete: j = !1,
   dotted: S = !1,
-  value: p = "",
+  value: f = "",
   copyable: L = !1,
-  onChange: n,
+  onChange: w,
   onEnterPressed: k,
   onBlur: O,
   onClear: E,
   onFocus: g,
   size: z,
   spellcheck: y,
-  readonly: f,
+  readonly: b,
   focusOnMount: h,
   selectable: M = !1
 }) => {
-  const { isFocusVisible: R, focusProps: D } = w({ within: !0, isTextInput: !0 }), { isFocusVisible: C, focusProps: $ } = w(), { isFocusVisible: I, focusProps: A } = w(), { isFocusVisible: F, focusProps: K } = w(), { copy: U, status: b } = G(), l = Q(null), [i, N] = W(
-    typeof a == "boolean" ? a : c === "password"
+  const { isFocusVisible: R, focusProps: D } = m({ within: !0, isTextInput: !0 }), { isFocusVisible: C, focusProps: W } = m(), { isFocusVisible: I, focusProps: $ } = m(), { isFocusVisible: F, focusProps: A } = m(), { copy: K, status: x } = q(), l = J(null), [u, N] = Q(
+    typeof c == "boolean" ? c : i === "password"
     /* Password */
   );
   P(() => {
@@ -49,11 +49,11 @@ const nt = ({
       h && ((e = l.current) == null || e.focus());
     }, 0);
   }, [h]), P(() => {
-    typeof a == "boolean" && N(a);
-  }, [a]);
-  const Y = (e) => {
+    typeof c == "boolean" && N(c);
+  }, [c]);
+  const U = (e) => {
     e.key === "Enter" && k && k(e);
-  }, _ = () => c === "password" ? i ? "password" : "text" : c, q = typeof y == "boolean" ? { spellCheck: y } : null;
+  }, Y = () => i === "password" ? u ? "password" : "text" : i, _ = typeof y == "boolean" ? { spellCheck: y } : null;
   return /* @__PURE__ */ t.createElement(
     "div",
     {
@@ -61,14 +61,15 @@ const nt = ({
       className: o([
         "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",
         S ? "tw-border-dashed" : "tw-border-solid",
-        r || f ? "tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90" : o([
+        r || b ? "tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90" : o([
           "focus-within:tw-border-black-90 hover:tw-border-black-90",
-          J[m],
-          R && !C && !I && !F && u
+          H[a],
+          R && !C && !I && !F && p
         ])
-      ])
+      ]),
+      "data-test-id": "fondue-text-input-component"
     },
-    x && /* @__PURE__ */ t.createElement(
+    d && /* @__PURE__ */ t.createElement(
       "div",
       {
         className: o([
@@ -77,29 +78,29 @@ const nt = ({
         ]),
         "data-test-id": "decorator"
       },
-      x
+      d
     ),
     /* @__PURE__ */ t.createElement(
       "input",
       {
-        id: H(s),
+        id: G(s),
         ref: l,
         className: o([
           "tw-w-full tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows",
-          r || f ? "tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40" : "tw-text-black tw-placeholder-black-60 dark:tw-text-white"
+          r || b ? "tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40" : "tw-text-black tw-placeholder-black-60 dark:tw-text-white"
         ]),
         onClick: () => {
           var e;
           return (e = l.current) == null ? void 0 : e.focus();
         },
-        onChange: (e) => n && n(e.currentTarget.value),
+        onChange: (e) => w && w(e.currentTarget.value),
         onBlur: O,
-        onKeyDown: Y,
+        onKeyDown: U,
         placeholder: B,
-        value: p,
-        type: _(),
+        value: f,
+        type: Y(),
         required: T,
-        readOnly: f,
+        readOnly: b,
         disabled: r,
         onFocus: (e) => {
           M && e.target.select(), g && g(e);
@@ -107,53 +108,57 @@ const nt = ({
         autoComplete: j ? "on" : "off",
         size: z,
         "data-test-id": "text-input",
-        ...q
+        ..._
       }
     ),
-    `${p}`.length > 0 && V && /* @__PURE__ */ t.createElement(
+    `${f}`.length > 0 && V && /* @__PURE__ */ t.createElement(
       "button",
       {
         className: o([
           "tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded",
           r ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60  hover:tw-text-black-100",
-          C && u
+          C && p
         ]),
         onClick: () => {
           var e, v;
-          (e = l.current) == null || e.focus(), (v = l.current) == null || v.setAttribute("value", ""), n && n(""), E && E();
+          (e = l.current) == null || e.focus(), (v = l.current) == null || v.setAttribute("value", ""), w && w(""), E && E();
         },
         "data-test-id": "clear-icon",
         title: "Clear text input",
         "aria-label": "clear text input",
         disabled: r,
         type: "button",
-        ...$
+        ...W
       },
       /* @__PURE__ */ t.createElement(X, null)
     ),
-    c === "password" && /* @__PURE__ */ t.createElement(
+    i === "password" && /* @__PURE__ */ t.createElement(
       "button",
       {
         className: o([
           "tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded",
           r ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60 hover:tw-text-black-100",
-          I && u
+          I && p
         ]),
-        onClick: () => N(!i),
+        onClick: () => N(!u),
         "data-test-id": "visibility-icon",
         title: "Toggle text visibility",
         type: "button",
-        "aria-label": `${i ? "unveil" : "obfuscate"} text input`,
+        "aria-label": `${u ? "unveil" : "obfuscate"} text input`,
         disabled: r,
-        ...A
+        ...$
       },
-      i ? /* @__PURE__ */ t.createElement(Z, null) : /* @__PURE__ */ t.createElement(tt, null)
+      u ? /* @__PURE__ */ t.createElement(Z, null) : /* @__PURE__ */ t.createElement(tt, null)
     ),
-    m === d.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(et, { size: rt.ExtraSmall })),
-    m === d.Error && /* @__PURE__ */ t.createElement(
+    a === n.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(et, { size: rt.ExtraSmall })),
+    (a === n.Error || a === n.Warning) && /* @__PURE__ */ t.createElement(
       "span",
       {
-        className: "tw-flex tw-items-center tw-justify-center tw-text-red-60",
+        className: o([
+          "tw-flex tw-items-center tw-justify-center",
+          a === n.Error && "tw-text-text-negative",
+          a === n.Warning && "tw-text-text-warning"
+        ]),
         "data-test-id": "error-state-exclamation-mark-icon"
       },
       /* @__PURE__ */ t.createElement(ot, null)
@@ -164,24 +169,24 @@ const nt = ({
         className: o([
           "tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded",
           r ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60 hover:tw-text-black-100",
-          F && u
+          F && p
         ]),
-        onClick: () => U(p),
+        onClick: () => K(f),
         "data-test-id": "copy-icon",
         title: "Copy input text",
         disabled: r,
         type: "button",
-        ...K
+        ...A
       },
-      b === "error" && /* @__PURE__ */ t.createElement("span", { className: "tw-text-box-negative-strong" }, /* @__PURE__ */ t.createElement(st, null)),
-      b === "idle" && /* @__PURE__ */ t.createElement(at, null),
-      b === "success" && /* @__PURE__ */ t.createElement("span", { className: "tw-text-box-positive-strong" }, /* @__PURE__ */ t.createElement(lt, null))
+      x === "error" && /* @__PURE__ */ t.createElement("span", { className: "tw-text-box-negative-strong" }, /* @__PURE__ */ t.createElement(st, null)),
+      x === "idle" && /* @__PURE__ */ t.createElement(at, null),
+      x === "success" && /* @__PURE__ */ t.createElement("span", { className: "tw-text-box-positive-strong" }, /* @__PURE__ */ t.createElement(nt, null))
     )
   );
 };
-nt.displayName = "FondueTextInput";
+lt.displayName = "FondueTextInput";
 export {
-  nt as TextInput,
+  lt as TextInput,
   ct as TextInputType
 };
 //# sourceMappingURL=TextInput.es.js.map

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

	@@ -1 +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 {\n IconCheckMark,\n IconClipboard,\n IconCross,\n IconCrossCircle,\n IconExclamationMarkTriangle,\n IconEye,\n IconEyeOff,\n} from '@foundation/Icon/Generated';\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 onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n onClear?: () => void;\n size?: number;\n spellcheck?: boolean;\n focusOnMount?: boolean;\n selectable?: 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 onFocus,\n size,\n spellcheck,\n readonly,\n focusOnMount,\n selectable = false,\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 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 >\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 {`${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 && (\n <span\n className=\"tw-flex tw-items-center tw-justify-center tw-text-red-60\"\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","TextInput","propId","type","decorator","validation","Validation","clearable","placeholder","required","obfuscated","disabled","autocomplete","dotted","value","copyable","onChange","onEnterPressed","onBlur","onClear","onFocus","size","spellcheck","readonly","focusOnMount","selectable","isFocusVisible","focusProps","useFocusRing","clearButtonIsFocusVisible","clearButtonFocusProps","passwordButtonIsFocusVisible","passwordButtonFocusProps","copyButtonIsFocusVisible","copyButtonFocusProps","copy","status","useCopy","inputElement","useRef","isObfuscated","setIsObfuscated","useState","useEffect","_a","onKeyDown","event","getInputType","spellcheckProp","React","merge","validationClassMap","FOCUS_STYLE","useMemoizedId","_b","IconCross","IconEye","IconEyeOff","LoadingCircle","LoadingCircleSize","IconExclamationMarkTriangle","IconCrossCircle","IconClipboard","IconCheckMark"],"mappings":"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"}
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 {\n IconCheckMark,\n IconClipboard,\n IconCross,\n IconCrossCircle,\n IconExclamationMarkTriangle,\n IconEye,\n IconEyeOff,\n} from '@foundation/Icon/Generated';\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 onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n onClear?: () => void;\n size?: number;\n spellcheck?: boolean;\n focusOnMount?: boolean;\n selectable?: 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 onFocus,\n size,\n spellcheck,\n readonly,\n focusOnMount,\n selectable = false,\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 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 {`${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","TextInput","propId","type","decorator","validation","Validation","clearable","placeholder","required","obfuscated","disabled","autocomplete","dotted","value","copyable","onChange","onEnterPressed","onBlur","onClear","onFocus","size","spellcheck","readonly","focusOnMount","selectable","isFocusVisible","focusProps","useFocusRing","clearButtonIsFocusVisible","clearButtonFocusProps","passwordButtonIsFocusVisible","passwordButtonFocusProps","copyButtonIsFocusVisible","copyButtonFocusProps","copy","status","useCopy","inputElement","useRef","isObfuscated","setIsObfuscated","useState","useEffect","_a","onKeyDown","event","getInputType","spellcheckProp","React","merge","validationClassMap","FOCUS_STYLE","useMemoizedId","_b","IconCross","IconEye","IconEyeOff","LoadingCircle","LoadingCircleSize","IconExclamationMarkTriangle","IconCrossCircle","IconClipboard","IconCheckMark"],"mappings":"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"}