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

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 (13) hide show
  1. package/dist/components/TextInput/TextInput.es.js +61 -56
  2. package/dist/components/TextInput/TextInput.es.js.map +1 -1
  3. package/dist/components/Tooltip/Tooltip.es.js +122 -116
  4. package/dist/components/Tooltip/Tooltip.es.js.map +1 -1
  5. package/dist/index.cjs.js +18 -18
  6. package/dist/index.cjs.js.map +1 -1
  7. package/dist/index.umd.js +18 -18
  8. package/dist/index.umd.js.map +1 -1
  9. package/dist/styles.css +1 -1
  10. package/dist/utilities/validation.d.ts +2 -1
  11. package/dist/utilities/validation.es.js +8 -7
  12. package/dist/utilities/validation.es.js.map +1 -1
  13. package/package.json +1 -1
package/dist/components/TextInput/TextInput.es.js CHANGED
@@ -1,10 +1,10 @@
1
- import { useCopy as G } from "../../hooks/useCopy.es.js";
2
- import { useMemoizedId as H } from "../../hooks/useMemoizedId.es.js";
3
- import { useFocusRing as w } from "@react-aria/focus";
4
- import { FOCUS_STYLE as u } from "../../utilities/focusStyle.es.js";
1
+ import { useCopy as q } from "../../hooks/useCopy.es.js";
2
+ import { useMemoizedId as G } from "../../hooks/useMemoizedId.es.js";
3
+ import { useFocusRing as m } from "@react-aria/focus";
4
+ import { FOCUS_STYLE as p } from "../../utilities/focusStyle.es.js";
5
5
  import { merge as o } from "../../utilities/merge.es.js";
6
- import { validationClassMap as J, Validation as d } from "../../utilities/validation.es.js";
7
- import t, { useRef as Q, useState as W, useEffect as P } from "react";
6
+ import { validationClassMap as H, Validation as n } from "../../utilities/validation.es.js";
7
+ import t, { useRef as J, useState as Q, useEffect as P } from "react";
8
8
  import X from "../../foundation/Icon/Generated/IconCross.es.js";
9
9
  import Z from "../../foundation/Icon/Generated/IconEye.es.js";
10
10
  import tt from "../../foundation/Icon/Generated/IconEyeOff.es.js";
@@ -12,35 +12,35 @@ import { LoadingCircle as et, LoadingCircleSize as rt } from "../LoadingCircle/L
12
12
  import ot from "../../foundation/Icon/Generated/IconExclamationMarkTriangle.es.js";
13
13
  import st from "../../foundation/Icon/Generated/IconCrossCircle.es.js";
14
14
  import at from "../../foundation/Icon/Generated/IconClipboard.es.js";
15
- import lt from "../../foundation/Icon/Generated/IconCheckMark.es.js";
15
+ import nt from "../../foundation/Icon/Generated/IconCheckMark.es.js";
16
16
  var ct = /* @__PURE__ */ ((s) => (s.Text = "text", s.Password = "password", s.Number = "number", s))(ct || {});
17
- const nt = ({
17
+ const lt = ({
18
18
  id: s,
19
- type: c = "text",
20
- decorator: x,
21
- validation: m = d.Default,
19
+ type: i = "text",
20
+ decorator: d,
21
+ validation: a = n.Default,
22
22
  clearable: V = !1,
23
23
  placeholder: B,
24
24
  required: T,
25
- obfuscated: a,
25
+ obfuscated: c,
26
26
  disabled: r = !1,
27
27
  autocomplete: j = !1,
28
28
  dotted: S = !1,
29
- value: p = "",
29
+ value: f = "",
30
30
  copyable: L = !1,
31
- onChange: n,
31
+ onChange: w,
32
32
  onEnterPressed: k,
33
33
  onBlur: O,
34
34
  onClear: E,
35
35
  onFocus: g,
36
36
  size: z,
37
37
  spellcheck: y,
38
- readonly: f,
38
+ readonly: b,
39
39
  focusOnMount: h,
40
40
  selectable: M = !1
41
41
  }) => {
42
- 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(
43
- typeof a == "boolean" ? a : c === "password"
42
+ 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(
43
+ typeof c == "boolean" ? c : i === "password"
44
44
  /* Password */
45
45
  );
46
46
  P(() => {
@@ -49,11 +49,11 @@ const nt = ({
49
49
  h && ((e = l.current) == null || e.focus());
50
50
  }, 0);
51
51
  }, [h]), P(() => {
52
- typeof a == "boolean" && N(a);
53
- }, [a]);
54
- const Y = (e) => {
52
+ typeof c == "boolean" && N(c);
53
+ }, [c]);
54
+ const U = (e) => {
55
55
  e.key === "Enter" && k && k(e);
56
- }, _ = () => c === "password" ? i ? "password" : "text" : c, q = typeof y == "boolean" ? { spellCheck: y } : null;
56
+ }, Y = () => i === "password" ? u ? "password" : "text" : i, _ = typeof y == "boolean" ? { spellCheck: y } : null;
57
57
  return /* @__PURE__ */ t.createElement(
58
58
  "div",
59
59
  {
@@ -61,14 +61,15 @@ const nt = ({
61
61
  className: o([
62
62
  "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",
63
63
  S ? "tw-border-dashed" : "tw-border-solid",
64
- r || f ? "tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90" : o([
64
+ r || b ? "tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90" : o([
65
65
  "focus-within:tw-border-black-90 hover:tw-border-black-90",
66
- J[m],
67
- R && !C && !I && !F && u
66
+ H[a],
67
+ R && !C && !I && !F && p
68
68
  ])
69
- ])
69
+ ]),
70
+ "data-test-id": "fondue-text-input-component"
70
71
  },
71
- x && /* @__PURE__ */ t.createElement(
72
+ d && /* @__PURE__ */ t.createElement(
72
73
  "div",
73
74
  {
74
75
  className: o([
@@ -77,29 +78,29 @@ const nt = ({
77
78
  ]),
78
79
  "data-test-id": "decorator"
79
80
  },
80
- x
81
+ d
81
82
  ),
82
83
  /* @__PURE__ */ t.createElement(
83
84
  "input",
84
85
  {
85
- id: H(s),
86
+ id: G(s),
86
87
  ref: l,
87
88
  className: o([
88
89
  "tw-w-full tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows",
89
- 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"
90
+ 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"
90
91
  ]),
91
92
  onClick: () => {
92
93
  var e;
93
94
  return (e = l.current) == null ? void 0 : e.focus();
94
95
  },
95
- onChange: (e) => n && n(e.currentTarget.value),
96
+ onChange: (e) => w && w(e.currentTarget.value),
96
97
  onBlur: O,
97
- onKeyDown: Y,
98
+ onKeyDown: U,
98
99
  placeholder: B,
99
- value: p,
100
- type: _(),
100
+ value: f,
101
+ type: Y(),
101
102
  required: T,
102
- readOnly: f,
103
+ readOnly: b,
103
104
  disabled: r,
104
105
  onFocus: (e) => {
105
106
  M && e.target.select(), g && g(e);
@@ -107,53 +108,57 @@ const nt = ({
107
108
  autoComplete: j ? "on" : "off",
108
109
  size: z,
109
110
  "data-test-id": "text-input",
110
- ...q
111
+ ..._
111
112
  }
112
113
  ),
113
- `${p}`.length > 0 && V && /* @__PURE__ */ t.createElement(
114
+ `${f}`.length > 0 && V && /* @__PURE__ */ t.createElement(
114
115
  "button",
115
116
  {
116
117
  className: o([
117
118
  "tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded",
118
119
  r ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60 hover:tw-text-black-100",
119
- C && u
120
+ C && p
120
121
  ]),
121
122
  onClick: () => {
122
123
  var e, v;
123
- (e = l.current) == null || e.focus(), (v = l.current) == null || v.setAttribute("value", ""), n && n(""), E && E();
124
+ (e = l.current) == null || e.focus(), (v = l.current) == null || v.setAttribute("value", ""), w && w(""), E && E();
124
125
  },
125
126
  "data-test-id": "clear-icon",
126
127
  title: "Clear text input",
127
128
  "aria-label": "clear text input",
128
129
  disabled: r,
129
130
  type: "button",
130
- ...$
131
+ ...W
131
132
  },
132
133
  /* @__PURE__ */ t.createElement(X, null)
133
134
  ),
134
- c === "password" && /* @__PURE__ */ t.createElement(
135
+ i === "password" && /* @__PURE__ */ t.createElement(
135
136
  "button",
136
137
  {
137
138
  className: o([
138
139
  "tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded",
139
140
  r ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60 hover:tw-text-black-100",
140
- I && u
141
+ I && p
141
142
  ]),
142
- onClick: () => N(!i),
143
+ onClick: () => N(!u),
143
144
  "data-test-id": "visibility-icon",
144
145
  title: "Toggle text visibility",
145
146
  type: "button",
146
- "aria-label": `${i ? "unveil" : "obfuscate"} text input`,
147
+ "aria-label": `${u ? "unveil" : "obfuscate"} text input`,
147
148
  disabled: r,
148
- ...A
149
+ ...$
149
150
  },
150
- i ? /* @__PURE__ */ t.createElement(Z, null) : /* @__PURE__ */ t.createElement(tt, null)
151
+ u ? /* @__PURE__ */ t.createElement(Z, null) : /* @__PURE__ */ t.createElement(tt, null)
151
152
  ),
152
- 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 })),
153
- m === d.Error && /* @__PURE__ */ t.createElement(
153
+ 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 })),
154
+ (a === n.Error || a === n.Warning) && /* @__PURE__ */ t.createElement(
154
155
  "span",
155
156
  {
156
- className: "tw-flex tw-items-center tw-justify-center tw-text-red-60",
157
+ className: o([
158
+ "tw-flex tw-items-center tw-justify-center",
159
+ a === n.Error && "tw-text-text-negative",
160
+ a === n.Warning && "tw-text-text-warning"
161
+ ]),
157
162
  "data-test-id": "error-state-exclamation-mark-icon"
158
163
  },
159
164
  /* @__PURE__ */ t.createElement(ot, null)
@@ -164,24 +169,24 @@ const nt = ({
164
169
  className: o([
165
170
  "tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded",
166
171
  r ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60 hover:tw-text-black-100",
167
- F && u
172
+ F && p
168
173
  ]),
169
- onClick: () => U(p),
174
+ onClick: () => K(f),
170
175
  "data-test-id": "copy-icon",
171
176
  title: "Copy input text",
172
177
  disabled: r,
173
178
  type: "button",
174
- ...K
179
+ ...A
175
180
  },
176
- b === "error" && /* @__PURE__ */ t.createElement("span", { className: "tw-text-box-negative-strong" }, /* @__PURE__ */ t.createElement(st, null)),
177
- b === "idle" && /* @__PURE__ */ t.createElement(at, null),
178
- b === "success" && /* @__PURE__ */ t.createElement("span", { className: "tw-text-box-positive-strong" }, /* @__PURE__ */ t.createElement(lt, null))
181
+ x === "error" && /* @__PURE__ */ t.createElement("span", { className: "tw-text-box-negative-strong" }, /* @__PURE__ */ t.createElement(st, null)),
182
+ x === "idle" && /* @__PURE__ */ t.createElement(at, null),
183
+ x === "success" && /* @__PURE__ */ t.createElement("span", { className: "tw-text-box-positive-strong" }, /* @__PURE__ */ t.createElement(nt, null))
179
184
  )
180
185
  );
181
186
  };
182
- nt.displayName = "FondueTextInput";
187
+ lt.displayName = "FondueTextInput";
183
188
  export {
184
- nt as TextInput,
189
+ lt as TextInput,
185
190
  ct as TextInputType
186
191
  };
187
192
  //# sourceMappingURL=TextInput.es.js.map
package/dist/components/TextInput/TextInput.es.js.map CHANGED
@@ -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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"}