@adam-milo/ui 1.0.28 → 1.0.29

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 (160) hide show
  1. package/dist/index.cjs +1 -1
  2. package/dist/index.js +3 -1
  3. package/dist/index10.cjs +1 -1
  4. package/dist/index10.js +1 -1
  5. package/dist/index11.cjs +1 -1
  6. package/dist/index11.js +1 -1
  7. package/dist/index12.cjs +1 -1
  8. package/dist/index12.js +1 -1
  9. package/dist/index13.cjs +1 -1
  10. package/dist/index13.js +1 -1
  11. package/dist/index14.cjs +1 -1
  12. package/dist/index14.js +1 -1
  13. package/dist/index15.cjs +1 -1
  14. package/dist/index15.js +2 -2
  15. package/dist/index16.cjs +1 -1
  16. package/dist/index16.js +1 -1
  17. package/dist/index17.cjs +1 -1
  18. package/dist/index17.js +1 -1
  19. package/dist/index18.cjs +1 -1
  20. package/dist/index18.js +1 -1
  21. package/dist/index19.cjs +1 -1
  22. package/dist/index19.js +43 -12
  23. package/dist/index2.cjs +1 -1
  24. package/dist/index2.js +1 -1
  25. package/dist/index20.cjs +1 -0
  26. package/dist/index20.js +14 -0
  27. package/dist/index22.cjs +1 -1
  28. package/dist/index22.js +20 -299
  29. package/dist/index23.cjs +1 -1
  30. package/dist/index23.js +298 -13
  31. package/dist/index24.cjs +1 -0
  32. package/dist/index24.js +16 -0
  33. package/dist/{index26.cjs → index27.cjs} +1 -1
  34. package/dist/{index26.js → index27.js} +21 -21
  35. package/dist/index3.cjs +1 -1
  36. package/dist/index3.js +2 -2
  37. package/dist/index4.cjs +1 -1
  38. package/dist/index4.js +1 -1
  39. package/dist/index40.cjs +1 -1
  40. package/dist/index40.js +18 -3
  41. package/dist/index41.cjs +1 -1
  42. package/dist/index41.js +3 -8
  43. package/dist/index42.cjs +1 -1
  44. package/dist/index42.js +7 -66
  45. package/dist/index43.cjs +1 -1
  46. package/dist/index43.js +66 -35
  47. package/dist/index44.cjs +1 -1
  48. package/dist/index44.js +31 -56
  49. package/dist/index45.cjs +1 -1
  50. package/dist/index45.js +60 -6
  51. package/dist/index46.cjs +1 -1
  52. package/dist/index46.js +6 -208
  53. package/dist/index47.cjs +1 -1
  54. package/dist/index47.js +203 -20
  55. package/dist/index48.cjs +1 -1
  56. package/dist/index48.js +23 -202
  57. package/dist/index49.cjs +1 -1
  58. package/dist/index49.js +204 -10
  59. package/dist/index5.cjs +1 -1
  60. package/dist/index5.js +1 -1
  61. package/dist/index50.cjs +1 -1
  62. package/dist/index50.js +10 -289
  63. package/dist/index51.cjs +1 -1
  64. package/dist/index51.js +288 -13
  65. package/dist/index52.cjs +1 -1
  66. package/dist/index52.js +14 -39
  67. package/dist/index53.cjs +1 -1
  68. package/dist/index53.js +36 -82
  69. package/dist/index54.cjs +1 -1
  70. package/dist/index54.js +84 -9
  71. package/dist/index55.cjs +1 -1
  72. package/dist/index55.js +8 -65
  73. package/dist/index56.cjs +1 -1
  74. package/dist/index56.js +68 -3
  75. package/dist/index57.cjs +1 -1
  76. package/dist/index57.js +3 -11
  77. package/dist/index58.cjs +1 -1
  78. package/dist/index58.js +11 -31
  79. package/dist/index59.cjs +1 -1
  80. package/dist/index59.js +30 -118
  81. package/dist/index6.cjs +1 -1
  82. package/dist/index6.js +2 -2
  83. package/dist/index60.cjs +1 -1
  84. package/dist/index60.js +120 -9
  85. package/dist/index61.cjs +1 -1
  86. package/dist/index61.js +8 -14
  87. package/dist/index63.cjs +1 -1
  88. package/dist/index63.js +14 -22
  89. package/dist/index64.cjs +1 -1
  90. package/dist/index64.js +291 -33
  91. package/dist/index65.cjs +1 -1
  92. package/dist/index65.js +22 -622
  93. package/dist/index66.cjs +1 -1
  94. package/dist/index66.js +35 -35
  95. package/dist/index67.cjs +1 -1
  96. package/dist/index67.js +620 -33
  97. package/dist/index68.cjs +1 -1
  98. package/dist/index68.js +37 -5
  99. package/dist/index69.cjs +1 -1
  100. package/dist/index69.js +36 -8
  101. package/dist/index7.cjs +1 -1
  102. package/dist/index7.js +1 -1
  103. package/dist/index70.cjs +1 -1
  104. package/dist/index70.js +5 -3
  105. package/dist/index71.cjs +1 -1
  106. package/dist/index71.js +8 -33
  107. package/dist/index72.cjs +1 -1
  108. package/dist/index72.js +3 -178
  109. package/dist/index73.cjs +1 -1
  110. package/dist/index73.js +31 -17
  111. package/dist/index74.cjs +1 -1
  112. package/dist/index74.js +165 -706
  113. package/dist/index75.cjs +1 -1
  114. package/dist/index75.js +16 -149
  115. package/dist/index76.cjs +1 -1
  116. package/dist/index76.js +697 -149
  117. package/dist/index77.cjs +1 -1
  118. package/dist/index77.js +150 -43
  119. package/dist/index78.cjs +1 -1
  120. package/dist/index78.js +170 -10
  121. package/dist/index79.cjs +1 -1
  122. package/dist/index79.js +83 -14
  123. package/dist/index8.cjs +1 -1
  124. package/dist/index8.js +1 -1
  125. package/dist/index80.cjs +1 -1
  126. package/dist/index80.js +41 -96
  127. package/dist/index81.cjs +1 -1
  128. package/dist/index81.js +10 -85
  129. package/dist/index82.cjs +1 -1
  130. package/dist/index82.js +15 -7
  131. package/dist/index83.cjs +1 -1
  132. package/dist/index83.js +99 -26
  133. package/dist/index84.cjs +1 -1
  134. package/dist/index84.js +8 -34
  135. package/dist/index85.cjs +1 -1
  136. package/dist/index85.js +27 -14
  137. package/dist/index86.cjs +1 -1
  138. package/dist/index86.js +30 -41
  139. package/dist/index87.cjs +1 -1
  140. package/dist/index87.js +13 -6
  141. package/dist/index88.cjs +1 -0
  142. package/dist/index88.js +48 -0
  143. package/dist/index89.cjs +1 -0
  144. package/dist/index89.js +9 -0
  145. package/dist/index9.cjs +1 -1
  146. package/dist/index9.js +2 -2
  147. package/dist/src/components/typography/text/Text.component.d.ts +93 -0
  148. package/dist/src/components/typography/text/Text.component.d.ts.map +1 -0
  149. package/dist/src/index.d.ts +2 -0
  150. package/dist/src/index.d.ts.map +1 -1
  151. package/dist/style.css +1 -1
  152. package/package.json +1 -1
  153. package/dist/index21.cjs +0 -1
  154. package/dist/index21.js +0 -22
  155. package/dist/index38.cjs +0 -1
  156. package/dist/index38.js +0 -21
  157. package/dist/index62.cjs +0 -1
  158. package/dist/index62.js +0 -297
  159. /package/dist/{index34.cjs → index35.cjs} +0 -0
  160. /package/dist/{index34.js → index35.js} +0 -0
package/dist/index22.js CHANGED
@@ -1,301 +1,22 @@
1
- import { jsxs, jsx } from "react/jsx-runtime";
2
- import { forwardRef, useState, useRef, useId, useMemo, useEffect } from "react";
3
- import { cn } from "./index19.js";
4
- /* empty css */
5
- import { useMergedRef } from "./index23.js";
6
- import { debounce } from "./index38.js";
7
- const Input = forwardRef(
8
- ({
9
- type = "text",
10
- label,
11
- error: externalError,
12
- helperText,
13
- fullWidth = false,
14
- showPasswordToggle = true,
15
- showLastChar = true,
16
- lastCharDelay = 500,
17
- validate,
18
- onValidationChange,
19
- className,
20
- id: providedId,
21
- onChange,
22
- onBlur,
23
- required,
24
- value: controlledValue,
25
- "data-cy": dataCy,
26
- "data-testid": dataTestId,
27
- ...props
28
- }, ref) => {
29
- const [isPasswordVisible, setIsPasswordVisible] = useState(false);
30
- const [internalError, setInternalError] = useState();
31
- const [isFocused, setIsFocused] = useState(false);
32
- const [isHovered, setIsHovered] = useState(false);
33
- const touchedRef = useRef(false);
34
- const [displayPassword, setDisplayPassword] = useState("");
35
- const actualPasswordRef = useRef("");
36
- const timeoutRef = useRef(null);
37
- const inputRef = useRef(null);
38
- const mergedRef = useMergedRef(ref, inputRef);
39
- const generatedId = useId();
40
- const id = providedId || generatedId;
41
- const errorId = `${id}-error`;
42
- const helperId = `${id}-helper`;
43
- const finalDataCy = dataCy || "input";
44
- const finalTestId = dataTestId || "input";
45
- const isPasswordType = type === "password";
46
- const showToggle = isPasswordType && showPasswordToggle;
47
- const shouldEnableLastCharPreview = isPasswordType && showLastChar && !isPasswordVisible;
48
- const inputType = isPasswordType && (isPasswordVisible || shouldEnableLastCharPreview && actualPasswordRef.current.length > 0) ? "text" : type;
49
- const displayLabel = label && required && !label.includes("*") ? `${label} *` : label;
50
- const togglePasswordVisibility = () => {
51
- setIsPasswordVisible((prev) => !prev);
52
- setTimeout(() => {
53
- var _a;
54
- return (_a = inputRef.current) == null ? void 0 : _a.focus();
55
- }, 0);
56
- };
57
- const debouncedValidate = useMemo(
58
- () => debounce((value) => {
59
- if (validate && touchedRef.current) {
60
- const validationError = validate(value);
61
- setInternalError(validationError);
62
- onValidationChange == null ? void 0 : onValidationChange(!validationError);
63
- }
64
- }, 300),
65
- [validate, onValidationChange]
66
- );
67
- const debouncedValidateRef = useRef(debouncedValidate);
68
- useEffect(() => {
69
- debouncedValidateRef.current = debouncedValidate;
70
- }, [debouncedValidate]);
71
- useEffect(() => {
72
- if (process.env.NODE_ENV === "development") {
73
- if (isPasswordType && showLastChar && controlledValue !== void 0) {
74
- console.warn(
75
- "[Input] Password last character preview (showLastChar) only works in uncontrolled mode. Remove the value prop to use this feature, or set showLastChar={false}."
76
- );
77
- }
78
- }
79
- }, [isPasswordType, showLastChar, controlledValue]);
80
- useEffect(() => {
81
- return () => {
82
- if (timeoutRef.current) {
83
- clearTimeout(timeoutRef.current);
84
- }
85
- debouncedValidateRef.current.cancel();
86
- };
87
- }, []);
88
- const inputValue = shouldEnableLastCharPreview && controlledValue === void 0 ? displayPassword : isPasswordVisible && isPasswordType && controlledValue === void 0 ? actualPasswordRef.current || "" : controlledValue;
89
- const handleChange = (e) => {
90
- onChange == null ? void 0 : onChange(e);
91
- let value = e.target.value;
92
- if (shouldEnableLastCharPreview) {
93
- const input = e.target;
94
- const newValue = input.value;
95
- actualPasswordRef.current = newValue;
96
- const masked = newValue ? "•".repeat(newValue.length - 1) + newValue.slice(-1) : "";
97
- setDisplayPassword(masked);
98
- input.value = masked;
99
- value = newValue;
100
- if (timeoutRef.current) {
101
- clearTimeout(timeoutRef.current);
102
- }
103
- timeoutRef.current = setTimeout(() => {
104
- setDisplayPassword("•".repeat(newValue.length));
105
- }, lastCharDelay);
106
- }
107
- if (touchedRef.current) {
108
- debouncedValidate(value);
109
- }
110
- };
111
- const handleFocus = (e) => {
112
- var _a;
113
- setIsFocused(true);
114
- (_a = props.onFocus) == null ? void 0 : _a.call(props, e);
115
- };
116
- const handleBlur = (e) => {
117
- setIsFocused(false);
118
- touchedRef.current = true;
119
- if (validate) {
120
- const valueToValidate = shouldEnableLastCharPreview ? actualPasswordRef.current : e.target.value;
121
- const validationError = validate(valueToValidate);
122
- setInternalError(validationError);
123
- onValidationChange == null ? void 0 : onValidationChange(!validationError);
124
- }
125
- onBlur == null ? void 0 : onBlur(e);
126
- };
127
- const handleMouseEnter = () => {
128
- setIsHovered(true);
129
- };
130
- const handleMouseLeave = () => {
131
- setIsHovered(false);
132
- };
133
- const displayError = externalError || internalError;
134
- const inputState = props.disabled ? "disabled" : displayError ? "error" : isFocused ? "focus" : isHovered ? "hover" : "idle";
135
- return /* @__PURE__ */ jsxs(
136
- "div",
137
- {
138
- className: cn("input-wrapper", fullWidth && "input-wrapper--full-width"),
139
- "data-cy": `${finalDataCy}-wrapper`,
140
- "data-testid": `${finalTestId}-wrapper`,
141
- children: [
142
- label && /* @__PURE__ */ jsx(
143
- "label",
144
- {
145
- htmlFor: id,
146
- className: "input__label",
147
- "data-cy": `${finalDataCy}-label`,
148
- "data-testid": `${finalTestId}-label`,
149
- children: displayLabel
150
- }
151
- ),
152
- /* @__PURE__ */ jsxs("div", { className: "input__field-container", children: [
153
- /* @__PURE__ */ jsx(
154
- "input",
155
- {
156
- ref: mergedRef,
157
- id,
158
- type: inputType,
159
- value: inputValue,
160
- className: cn(
161
- "input",
162
- displayError && "input--error",
163
- fullWidth && "input--full-width",
164
- showToggle && "input--with-toggle",
165
- className
166
- ),
167
- "aria-invalid": displayError ? "true" : "false",
168
- "aria-required": required ? "true" : void 0,
169
- "aria-describedby": displayError ? errorId : helperText ? helperId : void 0,
170
- "data-cy": finalDataCy,
171
- "data-testid": finalTestId,
172
- "data-state": inputState,
173
- onChange: handleChange,
174
- onFocus: handleFocus,
175
- onBlur: handleBlur,
176
- onMouseEnter: handleMouseEnter,
177
- onMouseLeave: handleMouseLeave,
178
- required,
179
- ...props
180
- }
181
- ),
182
- showToggle && /* @__PURE__ */ jsx(
183
- "button",
184
- {
185
- type: "button",
186
- className: "input__toggle",
187
- onClick: togglePasswordVisibility,
188
- "aria-label": isPasswordVisible ? "Hide password" : "Show password",
189
- "data-cy": `${finalDataCy}-toggle`,
190
- "data-testid": `${finalTestId}-toggle`,
191
- children: isPasswordVisible ? /* @__PURE__ */ jsxs(
192
- "svg",
193
- {
194
- width: "20",
195
- height: "20",
196
- viewBox: "0 0 20 20",
197
- fill: "none",
198
- xmlns: "http://www.w3.org/2000/svg",
199
- "aria-hidden": "true",
200
- children: [
201
- /* @__PURE__ */ jsx(
202
- "path",
203
- {
204
- d: "M10 4C5.5 4 2 10 2 10s3.5 6 8 6 8-6 8-6-3.5-6-8-6z",
205
- stroke: "currentColor",
206
- strokeWidth: "1.5",
207
- strokeLinecap: "round",
208
- strokeLinejoin: "round",
209
- fill: "none"
210
- }
211
- ),
212
- /* @__PURE__ */ jsx(
213
- "circle",
214
- {
215
- cx: "10",
216
- cy: "10",
217
- r: "2.5",
218
- stroke: "currentColor",
219
- strokeWidth: "1.5",
220
- fill: "none"
221
- }
222
- )
223
- ]
224
- }
225
- ) : /* @__PURE__ */ jsxs(
226
- "svg",
227
- {
228
- width: "20",
229
- height: "20",
230
- viewBox: "0 0 20 20",
231
- fill: "none",
232
- xmlns: "http://www.w3.org/2000/svg",
233
- "aria-hidden": "true",
234
- children: [
235
- /* @__PURE__ */ jsx(
236
- "path",
237
- {
238
- d: "M10 4C5.5 4 2 10 2 10s3.5 6 8 6 8-6 8-6-3.5-6-8-6z",
239
- stroke: "currentColor",
240
- strokeWidth: "1.5",
241
- strokeLinecap: "round",
242
- strokeLinejoin: "round",
243
- fill: "none"
244
- }
245
- ),
246
- /* @__PURE__ */ jsx(
247
- "circle",
248
- {
249
- cx: "10",
250
- cy: "10",
251
- r: "2.5",
252
- stroke: "currentColor",
253
- strokeWidth: "1.5",
254
- fill: "none"
255
- }
256
- ),
257
- /* @__PURE__ */ jsx(
258
- "path",
259
- {
260
- d: "M3 3l14 14",
261
- stroke: "currentColor",
262
- strokeWidth: "1.5",
263
- strokeLinecap: "round"
264
- }
265
- )
266
- ]
267
- }
268
- )
269
- }
270
- )
271
- ] }),
272
- displayError && /* @__PURE__ */ jsx(
273
- "span",
274
- {
275
- id: errorId,
276
- className: "input__error",
277
- role: "alert",
278
- "data-cy": `${finalDataCy}-error`,
279
- "data-testid": `${finalTestId}-error`,
280
- children: displayError
281
- }
282
- ),
283
- helperText && !displayError && /* @__PURE__ */ jsx(
284
- "span",
285
- {
286
- id: helperId,
287
- className: "input__helper",
288
- "data-cy": `${finalDataCy}-helper`,
289
- "data-testid": `${finalTestId}-helper`,
290
- children: helperText
291
- }
292
- )
293
- ]
294
- }
295
- );
296
- }
297
- );
298
- Input.displayName = "Input";
1
+ var tester = /^[-!#$%&'*+\/0-9=?A-Z^_a-z{|}~](\.?[-!#$%&'*+\/0-9=?A-Z^_a-z`{|}~])*@[a-zA-Z0-9](-*\.?[a-zA-Z0-9])*\.[a-zA-Z](-?[a-zA-Z0-9])+$/;
2
+ var validate = function(email) {
3
+ if (!email)
4
+ return false;
5
+ if (email.length > 254)
6
+ return false;
7
+ var valid = tester.test(email);
8
+ if (!valid)
9
+ return false;
10
+ var parts = email.split("@");
11
+ if (parts[0].length > 64)
12
+ return false;
13
+ var domainParts = parts[1].split(".");
14
+ if (domainParts.some(function(part) {
15
+ return part.length > 63;
16
+ }))
17
+ return false;
18
+ return true;
19
+ };
299
20
  export {
300
- Input
21
+ validate
301
22
  };
package/dist/index23.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useMergedRef=function(...r){return e.useCallback(e=>{r.forEach(r=>{r&&("function"==typeof r?r(e):r.current=e)})},r)};
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("./index20.cjs");;/* empty css */const a=require("./index24.cjs"),s=require("./index40.cjs"),n=r.forwardRef(({type:n="text",label:l,error:i,helperText:o,fullWidth:u=!1,showPasswordToggle:d=!0,showLastChar:c=!0,lastCharDelay:p=500,validate:h,onValidationChange:f,className:g,id:x,onChange:v,onBlur:w,required:j,value:m,"data-cy":y,"data-testid":k,...b},C)=>{const[$,N]=r.useState(!1),[_,q]=r.useState(),[M,S]=r.useState(!1),[L,R]=r.useState(!1),T=r.useRef(!1),[E,W]=r.useState(""),B=r.useRef(""),F=r.useRef(null),I=r.useRef(null),z=a.useMergedRef(C,I),D=r.useId(),O=x||D,P=`${O}-error`,V=`${O}-helper`,H=y||"input",A=k||"input",G="password"===n,J=G&&d,K=G&&c&&!$,Q=G&&($||K&&B.current.length>0)?"text":n,U=l&&j&&!l.includes("*")?`${l} *`:l,X=r.useMemo(()=>s.debounce(e=>{if(h&&T.current){const r=h(e);q(r),null==f||f(!r)}},300),[h,f]),Y=r.useRef(X);r.useEffect(()=>{Y.current=X},[X]),r.useEffect(()=>{process.env.NODE_ENV},[G,c,m]),r.useEffect(()=>()=>{F.current&&clearTimeout(F.current),Y.current.cancel()},[]);const Z=K&&void 0===m?E:$&&G&&void 0===m?B.current||"":m,ee=i||_,re=b.disabled?"disabled":ee?"error":M?"focus":L?"hover":"idle";return e.jsxs("div",{className:t.cn("input-wrapper",u&&"input-wrapper--full-width"),"data-cy":`${H}-wrapper`,"data-testid":`${A}-wrapper`,children:[l&&e.jsx("label",{htmlFor:O,className:"input__label","data-cy":`${H}-label`,"data-testid":`${A}-label`,children:U}),e.jsxs("div",{className:"input__field-container",children:[e.jsx("input",{ref:z,id:O,type:Q,value:Z,className:t.cn("input",ee&&"input--error",u&&"input--full-width",J&&"input--with-toggle",g),"aria-invalid":ee?"true":"false","aria-required":j?"true":void 0,"aria-describedby":ee?P:o?V:void 0,"data-cy":H,"data-testid":A,"data-state":re,onChange:e=>{null==v||v(e);let r=e.target.value;if(K){const t=e.target,a=t.value;B.current=a;const s=a?"•".repeat(a.length-1)+a.slice(-1):"";W(s),t.value=s,r=a,F.current&&clearTimeout(F.current),F.current=setTimeout(()=>{W("•".repeat(a.length))},p)}T.current&&X(r)},onFocus:e=>{var r;S(!0),null==(r=b.onFocus)||r.call(b,e)},onBlur:e=>{if(S(!1),T.current=!0,h){const r=K?B.current:e.target.value,t=h(r);q(t),null==f||f(!t)}null==w||w(e)},onMouseEnter:()=>{R(!0)},onMouseLeave:()=>{R(!1)},required:j,...b}),J&&e.jsx("button",{type:"button",className:"input__toggle",onClick:()=>{N(e=>!e),setTimeout(()=>{var e;return null==(e=I.current)?void 0:e.focus()},0)},"aria-label":$?"Hide password":"Show password","data-cy":`${H}-toggle`,"data-testid":`${A}-toggle`,children:$?e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[e.jsx("path",{d:"M10 4C5.5 4 2 10 2 10s3.5 6 8 6 8-6 8-6-3.5-6-8-6z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"}),e.jsx("circle",{cx:"10",cy:"10",r:"2.5",stroke:"currentColor",strokeWidth:"1.5",fill:"none"})]}):e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[e.jsx("path",{d:"M10 4C5.5 4 2 10 2 10s3.5 6 8 6 8-6 8-6-3.5-6-8-6z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"}),e.jsx("circle",{cx:"10",cy:"10",r:"2.5",stroke:"currentColor",strokeWidth:"1.5",fill:"none"}),e.jsx("path",{d:"M3 3l14 14",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})})]}),ee&&e.jsx("span",{id:P,className:"input__error",role:"alert","data-cy":`${H}-error`,"data-testid":`${A}-error`,children:ee}),o&&!ee&&e.jsx("span",{id:V,className:"input__helper","data-cy":`${H}-helper`,"data-testid":`${A}-helper`,children:o})]})});n.displayName="Input",exports.Input=n;
package/dist/index23.js CHANGED
@@ -1,16 +1,301 @@
1
- import { useCallback } from "react";
2
- function useMergedRef(...refs) {
3
- return useCallback((element) => {
4
- refs.forEach((ref) => {
5
- if (!ref) return;
6
- if (typeof ref === "function") {
7
- ref(element);
8
- } else {
9
- ref.current = element;
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { forwardRef, useState, useRef, useId, useMemo, useEffect } from "react";
3
+ import { cn } from "./index20.js";
4
+ /* empty css */
5
+ import { useMergedRef } from "./index24.js";
6
+ import { debounce } from "./index40.js";
7
+ const Input = forwardRef(
8
+ ({
9
+ type = "text",
10
+ label,
11
+ error: externalError,
12
+ helperText,
13
+ fullWidth = false,
14
+ showPasswordToggle = true,
15
+ showLastChar = true,
16
+ lastCharDelay = 500,
17
+ validate,
18
+ onValidationChange,
19
+ className,
20
+ id: providedId,
21
+ onChange,
22
+ onBlur,
23
+ required,
24
+ value: controlledValue,
25
+ "data-cy": dataCy,
26
+ "data-testid": dataTestId,
27
+ ...props
28
+ }, ref) => {
29
+ const [isPasswordVisible, setIsPasswordVisible] = useState(false);
30
+ const [internalError, setInternalError] = useState();
31
+ const [isFocused, setIsFocused] = useState(false);
32
+ const [isHovered, setIsHovered] = useState(false);
33
+ const touchedRef = useRef(false);
34
+ const [displayPassword, setDisplayPassword] = useState("");
35
+ const actualPasswordRef = useRef("");
36
+ const timeoutRef = useRef(null);
37
+ const inputRef = useRef(null);
38
+ const mergedRef = useMergedRef(ref, inputRef);
39
+ const generatedId = useId();
40
+ const id = providedId || generatedId;
41
+ const errorId = `${id}-error`;
42
+ const helperId = `${id}-helper`;
43
+ const finalDataCy = dataCy || "input";
44
+ const finalTestId = dataTestId || "input";
45
+ const isPasswordType = type === "password";
46
+ const showToggle = isPasswordType && showPasswordToggle;
47
+ const shouldEnableLastCharPreview = isPasswordType && showLastChar && !isPasswordVisible;
48
+ const inputType = isPasswordType && (isPasswordVisible || shouldEnableLastCharPreview && actualPasswordRef.current.length > 0) ? "text" : type;
49
+ const displayLabel = label && required && !label.includes("*") ? `${label} *` : label;
50
+ const togglePasswordVisibility = () => {
51
+ setIsPasswordVisible((prev) => !prev);
52
+ setTimeout(() => {
53
+ var _a;
54
+ return (_a = inputRef.current) == null ? void 0 : _a.focus();
55
+ }, 0);
56
+ };
57
+ const debouncedValidate = useMemo(
58
+ () => debounce((value) => {
59
+ if (validate && touchedRef.current) {
60
+ const validationError = validate(value);
61
+ setInternalError(validationError);
62
+ onValidationChange == null ? void 0 : onValidationChange(!validationError);
63
+ }
64
+ }, 300),
65
+ [validate, onValidationChange]
66
+ );
67
+ const debouncedValidateRef = useRef(debouncedValidate);
68
+ useEffect(() => {
69
+ debouncedValidateRef.current = debouncedValidate;
70
+ }, [debouncedValidate]);
71
+ useEffect(() => {
72
+ if (process.env.NODE_ENV === "development") {
73
+ if (isPasswordType && showLastChar && controlledValue !== void 0) {
74
+ console.warn(
75
+ "[Input] Password last character preview (showLastChar) only works in uncontrolled mode. Remove the value prop to use this feature, or set showLastChar={false}."
76
+ );
77
+ }
10
78
  }
11
- });
12
- }, refs);
13
- }
79
+ }, [isPasswordType, showLastChar, controlledValue]);
80
+ useEffect(() => {
81
+ return () => {
82
+ if (timeoutRef.current) {
83
+ clearTimeout(timeoutRef.current);
84
+ }
85
+ debouncedValidateRef.current.cancel();
86
+ };
87
+ }, []);
88
+ const inputValue = shouldEnableLastCharPreview && controlledValue === void 0 ? displayPassword : isPasswordVisible && isPasswordType && controlledValue === void 0 ? actualPasswordRef.current || "" : controlledValue;
89
+ const handleChange = (e) => {
90
+ onChange == null ? void 0 : onChange(e);
91
+ let value = e.target.value;
92
+ if (shouldEnableLastCharPreview) {
93
+ const input = e.target;
94
+ const newValue = input.value;
95
+ actualPasswordRef.current = newValue;
96
+ const masked = newValue ? "•".repeat(newValue.length - 1) + newValue.slice(-1) : "";
97
+ setDisplayPassword(masked);
98
+ input.value = masked;
99
+ value = newValue;
100
+ if (timeoutRef.current) {
101
+ clearTimeout(timeoutRef.current);
102
+ }
103
+ timeoutRef.current = setTimeout(() => {
104
+ setDisplayPassword("•".repeat(newValue.length));
105
+ }, lastCharDelay);
106
+ }
107
+ if (touchedRef.current) {
108
+ debouncedValidate(value);
109
+ }
110
+ };
111
+ const handleFocus = (e) => {
112
+ var _a;
113
+ setIsFocused(true);
114
+ (_a = props.onFocus) == null ? void 0 : _a.call(props, e);
115
+ };
116
+ const handleBlur = (e) => {
117
+ setIsFocused(false);
118
+ touchedRef.current = true;
119
+ if (validate) {
120
+ const valueToValidate = shouldEnableLastCharPreview ? actualPasswordRef.current : e.target.value;
121
+ const validationError = validate(valueToValidate);
122
+ setInternalError(validationError);
123
+ onValidationChange == null ? void 0 : onValidationChange(!validationError);
124
+ }
125
+ onBlur == null ? void 0 : onBlur(e);
126
+ };
127
+ const handleMouseEnter = () => {
128
+ setIsHovered(true);
129
+ };
130
+ const handleMouseLeave = () => {
131
+ setIsHovered(false);
132
+ };
133
+ const displayError = externalError || internalError;
134
+ const inputState = props.disabled ? "disabled" : displayError ? "error" : isFocused ? "focus" : isHovered ? "hover" : "idle";
135
+ return /* @__PURE__ */ jsxs(
136
+ "div",
137
+ {
138
+ className: cn("input-wrapper", fullWidth && "input-wrapper--full-width"),
139
+ "data-cy": `${finalDataCy}-wrapper`,
140
+ "data-testid": `${finalTestId}-wrapper`,
141
+ children: [
142
+ label && /* @__PURE__ */ jsx(
143
+ "label",
144
+ {
145
+ htmlFor: id,
146
+ className: "input__label",
147
+ "data-cy": `${finalDataCy}-label`,
148
+ "data-testid": `${finalTestId}-label`,
149
+ children: displayLabel
150
+ }
151
+ ),
152
+ /* @__PURE__ */ jsxs("div", { className: "input__field-container", children: [
153
+ /* @__PURE__ */ jsx(
154
+ "input",
155
+ {
156
+ ref: mergedRef,
157
+ id,
158
+ type: inputType,
159
+ value: inputValue,
160
+ className: cn(
161
+ "input",
162
+ displayError && "input--error",
163
+ fullWidth && "input--full-width",
164
+ showToggle && "input--with-toggle",
165
+ className
166
+ ),
167
+ "aria-invalid": displayError ? "true" : "false",
168
+ "aria-required": required ? "true" : void 0,
169
+ "aria-describedby": displayError ? errorId : helperText ? helperId : void 0,
170
+ "data-cy": finalDataCy,
171
+ "data-testid": finalTestId,
172
+ "data-state": inputState,
173
+ onChange: handleChange,
174
+ onFocus: handleFocus,
175
+ onBlur: handleBlur,
176
+ onMouseEnter: handleMouseEnter,
177
+ onMouseLeave: handleMouseLeave,
178
+ required,
179
+ ...props
180
+ }
181
+ ),
182
+ showToggle && /* @__PURE__ */ jsx(
183
+ "button",
184
+ {
185
+ type: "button",
186
+ className: "input__toggle",
187
+ onClick: togglePasswordVisibility,
188
+ "aria-label": isPasswordVisible ? "Hide password" : "Show password",
189
+ "data-cy": `${finalDataCy}-toggle`,
190
+ "data-testid": `${finalTestId}-toggle`,
191
+ children: isPasswordVisible ? /* @__PURE__ */ jsxs(
192
+ "svg",
193
+ {
194
+ width: "20",
195
+ height: "20",
196
+ viewBox: "0 0 20 20",
197
+ fill: "none",
198
+ xmlns: "http://www.w3.org/2000/svg",
199
+ "aria-hidden": "true",
200
+ children: [
201
+ /* @__PURE__ */ jsx(
202
+ "path",
203
+ {
204
+ d: "M10 4C5.5 4 2 10 2 10s3.5 6 8 6 8-6 8-6-3.5-6-8-6z",
205
+ stroke: "currentColor",
206
+ strokeWidth: "1.5",
207
+ strokeLinecap: "round",
208
+ strokeLinejoin: "round",
209
+ fill: "none"
210
+ }
211
+ ),
212
+ /* @__PURE__ */ jsx(
213
+ "circle",
214
+ {
215
+ cx: "10",
216
+ cy: "10",
217
+ r: "2.5",
218
+ stroke: "currentColor",
219
+ strokeWidth: "1.5",
220
+ fill: "none"
221
+ }
222
+ )
223
+ ]
224
+ }
225
+ ) : /* @__PURE__ */ jsxs(
226
+ "svg",
227
+ {
228
+ width: "20",
229
+ height: "20",
230
+ viewBox: "0 0 20 20",
231
+ fill: "none",
232
+ xmlns: "http://www.w3.org/2000/svg",
233
+ "aria-hidden": "true",
234
+ children: [
235
+ /* @__PURE__ */ jsx(
236
+ "path",
237
+ {
238
+ d: "M10 4C5.5 4 2 10 2 10s3.5 6 8 6 8-6 8-6-3.5-6-8-6z",
239
+ stroke: "currentColor",
240
+ strokeWidth: "1.5",
241
+ strokeLinecap: "round",
242
+ strokeLinejoin: "round",
243
+ fill: "none"
244
+ }
245
+ ),
246
+ /* @__PURE__ */ jsx(
247
+ "circle",
248
+ {
249
+ cx: "10",
250
+ cy: "10",
251
+ r: "2.5",
252
+ stroke: "currentColor",
253
+ strokeWidth: "1.5",
254
+ fill: "none"
255
+ }
256
+ ),
257
+ /* @__PURE__ */ jsx(
258
+ "path",
259
+ {
260
+ d: "M3 3l14 14",
261
+ stroke: "currentColor",
262
+ strokeWidth: "1.5",
263
+ strokeLinecap: "round"
264
+ }
265
+ )
266
+ ]
267
+ }
268
+ )
269
+ }
270
+ )
271
+ ] }),
272
+ displayError && /* @__PURE__ */ jsx(
273
+ "span",
274
+ {
275
+ id: errorId,
276
+ className: "input__error",
277
+ role: "alert",
278
+ "data-cy": `${finalDataCy}-error`,
279
+ "data-testid": `${finalTestId}-error`,
280
+ children: displayError
281
+ }
282
+ ),
283
+ helperText && !displayError && /* @__PURE__ */ jsx(
284
+ "span",
285
+ {
286
+ id: helperId,
287
+ className: "input__helper",
288
+ "data-cy": `${finalDataCy}-helper`,
289
+ "data-testid": `${finalTestId}-helper`,
290
+ children: helperText
291
+ }
292
+ )
293
+ ]
294
+ }
295
+ );
296
+ }
297
+ );
298
+ Input.displayName = "Input";
14
299
  export {
15
- useMergedRef
300
+ Input
16
301
  };
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useMergedRef=function(...r){return e.useCallback(e=>{r.forEach(r=>{r&&("function"==typeof r?r(e):r.current=e)})},r)};
@@ -0,0 +1,16 @@
1
+ import { useCallback } from "react";
2
+ function useMergedRef(...refs) {
3
+ return useCallback((element) => {
4
+ refs.forEach((ref) => {
5
+ if (!ref) return;
6
+ if (typeof ref === "function") {
7
+ ref(element);
8
+ } else {
9
+ ref.current = element;
10
+ }
11
+ });
12
+ }, refs);
13
+ }
14
+ export {
15
+ useMergedRef
16
+ };