@adam-milo/ui 1.0.32 → 1.0.34
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.
- package/dist/index.cjs +1 -1
- package/dist/index.js +58 -22
- package/dist/index10.cjs +1 -1
- package/dist/index10.js +94 -56
- package/dist/index11.cjs +1 -1
- package/dist/index11.js +199 -40
- package/dist/index12.cjs +1 -1
- package/dist/index12.js +305 -105
- package/dist/index13.cjs +1 -1
- package/dist/index13.js +260 -74
- package/dist/index14.cjs +1 -1
- package/dist/index14.js +135 -27
- package/dist/index15.cjs +1 -1
- package/dist/index15.js +52 -469
- package/dist/index16.cjs +1 -1
- package/dist/index16.js +57 -111
- package/dist/index17.cjs +1 -1
- package/dist/index17.js +101 -20
- package/dist/index18.cjs +1 -1
- package/dist/index18.js +76 -21
- package/dist/index19.cjs +1 -1
- package/dist/index19.js +25 -29
- package/dist/index2.cjs +1 -1
- package/dist/index2.js +6 -4
- package/dist/index20.cjs +1 -1
- package/dist/index20.js +468 -31
- package/dist/index21.cjs +1 -1
- package/dist/index21.js +155 -41
- package/dist/index22.cjs +1 -1
- package/dist/index22.js +42 -12
- package/dist/index23.cjs +1 -0
- package/dist/index23.js +38 -0
- package/dist/index24.cjs +1 -1
- package/dist/index24.js +32 -287
- package/dist/index25.cjs +1 -1
- package/dist/index25.js +115 -13
- package/dist/index26.cjs +1 -0
- package/dist/index26.js +55 -0
- package/dist/index27.cjs +1 -0
- package/dist/index27.js +45 -0
- package/dist/index28.cjs +1 -0
- package/dist/index28.js +53 -0
- package/dist/index29.cjs +1 -0
- package/dist/index29.js +55 -0
- package/dist/index3.cjs +1 -1
- package/dist/index3.js +33 -33
- package/dist/index30.cjs +1 -0
- package/dist/index30.js +72 -0
- package/dist/index31.cjs +1 -0
- package/dist/index31.js +14 -0
- package/dist/index32.cjs +1 -0
- package/dist/index32.js +332 -0
- package/dist/index36.cjs +1 -0
- package/dist/index36.js +386 -0
- package/dist/index37.cjs +1 -0
- package/dist/index37.js +16 -0
- package/dist/index4.cjs +1 -1
- package/dist/index4.js +59 -11
- package/dist/index5.cjs +1 -1
- package/dist/index5.js +19 -35
- package/dist/index6.cjs +1 -1
- package/dist/index6.js +11 -101
- package/dist/index62.cjs +1 -0
- package/dist/index62.js +502 -0
- package/dist/index64.cjs +1 -0
- package/dist/index64.js +11 -0
- package/dist/index65.cjs +1 -0
- package/dist/index65.js +39 -0
- package/dist/index66.cjs +1 -0
- package/dist/index66.js +64 -0
- package/dist/index67.cjs +1 -0
- package/dist/index67.js +212 -0
- package/dist/index68.cjs +1 -0
- package/dist/index68.js +14 -0
- package/dist/index69.cjs +1 -0
- package/dist/index69.js +293 -0
- package/dist/index7.cjs +1 -1
- package/dist/index7.js +46 -97
- package/dist/index70.cjs +1 -0
- package/dist/index70.js +18 -0
- package/dist/index71.cjs +1 -0
- package/dist/index71.js +129 -0
- package/dist/index72.cjs +1 -0
- package/dist/index72.js +43 -0
- package/dist/index73.cjs +1 -0
- package/dist/index73.js +99 -0
- package/dist/index74.cjs +1 -0
- package/dist/index74.js +71 -0
- package/dist/index75.cjs +1 -0
- package/dist/index75.js +36 -0
- package/dist/index76.cjs +1 -0
- package/dist/index76.js +14 -0
- package/dist/index77.cjs +1 -0
- package/dist/index77.js +17 -0
- package/dist/index78.cjs +1 -0
- package/dist/index78.js +6 -0
- package/dist/index79.cjs +1 -0
- package/dist/index79.js +297 -0
- package/dist/index8.cjs +1 -1
- package/dist/index8.js +97 -88
- package/dist/index80.cjs +1 -0
- package/dist/index80.js +25 -0
- package/dist/index81.cjs +1 -0
- package/dist/index81.js +39 -0
- package/dist/index82.cjs +1 -0
- package/dist/index82.js +625 -0
- package/dist/index83.cjs +1 -0
- package/dist/index83.js +721 -0
- package/dist/index84.cjs +1 -0
- package/dist/index84.js +154 -0
- package/dist/index85.cjs +1 -0
- package/dist/index85.js +173 -0
- package/dist/index9.cjs +1 -1
- package/dist/index9.js +55 -197
- package/dist/src/components/core/button/Button.component.d.ts +13 -7
- package/dist/src/components/core/button/Button.component.d.ts.map +1 -1
- package/dist/src/components/core/icon/Icon.component.d.ts +1 -1
- package/dist/src/components/core/icon/Icon.component.d.ts.map +1 -1
- package/dist/src/components/core/icon-button/IconButton.component.d.ts +36 -0
- package/dist/src/components/core/icon-button/IconButton.component.d.ts.map +1 -0
- package/dist/src/components/core/menu-icon-button/MenuIconButton.component.d.ts +79 -0
- package/dist/src/components/core/menu-icon-button/MenuIconButton.component.d.ts.map +1 -0
- package/dist/src/components/feedback/spinner/Spinner.component.d.ts +62 -0
- package/dist/src/components/feedback/spinner/Spinner.component.d.ts.map +1 -0
- package/dist/src/components/forms/input/Input.component.d.ts +5 -0
- package/dist/src/components/forms/input/Input.component.d.ts.map +1 -1
- package/dist/src/components/forms/otp-input/OTPInput.component.d.ts +82 -0
- package/dist/src/components/forms/otp-input/OTPInput.component.d.ts.map +1 -0
- package/dist/src/components/forms/phone-input/PhoneInput.component.d.ts +96 -0
- package/dist/src/components/forms/phone-input/PhoneInput.component.d.ts.map +1 -0
- package/dist/src/components/forms/phone-input/countries.d.ts +93 -0
- package/dist/src/components/forms/phone-input/countries.d.ts.map +1 -0
- package/dist/src/components/forms/select/Select.component.d.ts +5 -1
- package/dist/src/components/forms/select/Select.component.d.ts.map +1 -1
- package/dist/src/components/forms/toggle/Toggle.component.d.ts +80 -0
- package/dist/src/components/forms/toggle/Toggle.component.d.ts.map +1 -0
- package/dist/src/components/layout/auth-layout/AuthLayout.component.d.ts +86 -0
- package/dist/src/components/layout/auth-layout/AuthLayout.component.d.ts.map +1 -0
- package/dist/src/components/overlays/dialog/Dialog.component.d.ts +36 -2
- package/dist/src/components/overlays/dialog/Dialog.component.d.ts.map +1 -1
- package/dist/src/components/typography/heading/Heading.component.d.ts +92 -0
- package/dist/src/components/typography/heading/Heading.component.d.ts.map +1 -0
- package/dist/src/components/typography/link/Link.component.d.ts +80 -0
- package/dist/src/components/typography/link/Link.component.d.ts.map +1 -0
- package/dist/src/index.d.ts +24 -5
- package/dist/src/index.d.ts.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +2 -1
- /package/dist/{index35.cjs → index50.cjs} +0 -0
- /package/dist/{index35.js → index50.js} +0 -0
- /package/dist/{index42.cjs → index61.cjs} +0 -0
- /package/dist/{index42.js → index61.js} +0 -0
package/dist/index36.js
ADDED
|
@@ -0,0 +1,386 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useState, useRef, useId, useMemo, useEffect } from "react";
|
|
3
|
+
import { Provider, Root as Root3, Trigger, Portal, Content as Content2, Arrow as Arrow2 } from "./index62.js";
|
|
4
|
+
import { cn } from "./index31.js";
|
|
5
|
+
/* empty css */
|
|
6
|
+
import { useMergedRef } from "./index37.js";
|
|
7
|
+
import { debounce } from "./index61.js";
|
|
8
|
+
const Input = forwardRef(
|
|
9
|
+
({
|
|
10
|
+
type = "text",
|
|
11
|
+
label,
|
|
12
|
+
tooltip,
|
|
13
|
+
error: externalError,
|
|
14
|
+
helperText,
|
|
15
|
+
fullWidth = false,
|
|
16
|
+
showPasswordToggle = true,
|
|
17
|
+
showLastChar = true,
|
|
18
|
+
lastCharDelay = 500,
|
|
19
|
+
validate,
|
|
20
|
+
onValidationChange,
|
|
21
|
+
className,
|
|
22
|
+
id: providedId,
|
|
23
|
+
onChange,
|
|
24
|
+
onBlur,
|
|
25
|
+
required,
|
|
26
|
+
value: controlledValue,
|
|
27
|
+
"data-cy": dataCy,
|
|
28
|
+
"data-testid": dataTestId,
|
|
29
|
+
...props
|
|
30
|
+
}, ref) => {
|
|
31
|
+
const [isPasswordVisible, setIsPasswordVisible] = useState(false);
|
|
32
|
+
const [internalError, setInternalError] = useState();
|
|
33
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
34
|
+
const [isHovered, setIsHovered] = useState(false);
|
|
35
|
+
const touchedRef = useRef(false);
|
|
36
|
+
const [displayPassword, setDisplayPassword] = useState("");
|
|
37
|
+
const actualPasswordRef = useRef("");
|
|
38
|
+
const timeoutRef = useRef(null);
|
|
39
|
+
const inputRef = useRef(null);
|
|
40
|
+
const mergedRef = useMergedRef(ref, inputRef);
|
|
41
|
+
const generatedId = useId();
|
|
42
|
+
const id = providedId || generatedId;
|
|
43
|
+
const errorId = `${id}-error`;
|
|
44
|
+
const helperId = `${id}-helper`;
|
|
45
|
+
const finalDataCy = dataCy || "input";
|
|
46
|
+
const finalTestId = dataTestId || "input";
|
|
47
|
+
const isPasswordType = type === "password";
|
|
48
|
+
const showToggle = isPasswordType && showPasswordToggle;
|
|
49
|
+
const shouldEnableLastCharPreview = isPasswordType && showLastChar && !isPasswordVisible && controlledValue === void 0;
|
|
50
|
+
const inputType = isPasswordType && (isPasswordVisible || shouldEnableLastCharPreview && actualPasswordRef.current.length > 0) ? "text" : type;
|
|
51
|
+
const displayLabel = label && required && !label.includes("*") ? `${label} *` : label;
|
|
52
|
+
const togglePasswordVisibility = () => {
|
|
53
|
+
setIsPasswordVisible((prev) => !prev);
|
|
54
|
+
setTimeout(() => {
|
|
55
|
+
var _a;
|
|
56
|
+
return (_a = inputRef.current) == null ? void 0 : _a.focus();
|
|
57
|
+
}, 0);
|
|
58
|
+
};
|
|
59
|
+
const debouncedValidate = useMemo(
|
|
60
|
+
() => debounce((value) => {
|
|
61
|
+
if (validate && touchedRef.current) {
|
|
62
|
+
const validationError = validate(value);
|
|
63
|
+
setInternalError(validationError);
|
|
64
|
+
onValidationChange == null ? void 0 : onValidationChange(!validationError);
|
|
65
|
+
}
|
|
66
|
+
}, 300),
|
|
67
|
+
[validate, onValidationChange]
|
|
68
|
+
);
|
|
69
|
+
const debouncedValidateRef = useRef(debouncedValidate);
|
|
70
|
+
useEffect(() => {
|
|
71
|
+
debouncedValidateRef.current = debouncedValidate;
|
|
72
|
+
}, [debouncedValidate]);
|
|
73
|
+
useEffect(() => {
|
|
74
|
+
if (process.env.NODE_ENV === "development") {
|
|
75
|
+
if (isPasswordType && showLastChar && controlledValue !== void 0) {
|
|
76
|
+
console.warn(
|
|
77
|
+
"[Input] Password last character preview (showLastChar) only works in uncontrolled mode. Remove the value prop to use this feature, or set showLastChar={false}."
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}, [isPasswordType, showLastChar, controlledValue]);
|
|
82
|
+
useEffect(() => {
|
|
83
|
+
return () => {
|
|
84
|
+
if (timeoutRef.current) {
|
|
85
|
+
clearTimeout(timeoutRef.current);
|
|
86
|
+
}
|
|
87
|
+
debouncedValidateRef.current.cancel();
|
|
88
|
+
};
|
|
89
|
+
}, []);
|
|
90
|
+
const inputValue = shouldEnableLastCharPreview && controlledValue === void 0 ? displayPassword : isPasswordVisible && isPasswordType && controlledValue === void 0 ? actualPasswordRef.current || "" : controlledValue;
|
|
91
|
+
const handleChange = (e) => {
|
|
92
|
+
let value = e.target.value;
|
|
93
|
+
if (shouldEnableLastCharPreview) {
|
|
94
|
+
const inputValue2 = e.target.value;
|
|
95
|
+
const prevActualPassword = actualPasswordRef.current;
|
|
96
|
+
const prevDisplayLength = displayPassword.length;
|
|
97
|
+
let newActualPassword;
|
|
98
|
+
if (inputValue2.length === 0) {
|
|
99
|
+
newActualPassword = "";
|
|
100
|
+
} else if (inputValue2.length > prevDisplayLength) {
|
|
101
|
+
const addedChars = inputValue2.slice(prevDisplayLength);
|
|
102
|
+
newActualPassword = prevActualPassword + addedChars;
|
|
103
|
+
} else if (inputValue2.length < prevDisplayLength) {
|
|
104
|
+
newActualPassword = prevActualPassword.slice(0, inputValue2.length);
|
|
105
|
+
} else {
|
|
106
|
+
const lastChar = inputValue2.slice(-1);
|
|
107
|
+
newActualPassword = prevActualPassword.slice(0, -1) + lastChar;
|
|
108
|
+
}
|
|
109
|
+
actualPasswordRef.current = newActualPassword;
|
|
110
|
+
const masked = newActualPassword ? "•".repeat(newActualPassword.length - 1) + newActualPassword.slice(-1) : "";
|
|
111
|
+
setDisplayPassword(masked);
|
|
112
|
+
value = newActualPassword;
|
|
113
|
+
if (onChange) {
|
|
114
|
+
const syntheticEvent = {
|
|
115
|
+
...e,
|
|
116
|
+
target: { ...e.target, value: newActualPassword },
|
|
117
|
+
currentTarget: { ...e.currentTarget, value: newActualPassword }
|
|
118
|
+
};
|
|
119
|
+
onChange(syntheticEvent);
|
|
120
|
+
}
|
|
121
|
+
if (timeoutRef.current) {
|
|
122
|
+
clearTimeout(timeoutRef.current);
|
|
123
|
+
}
|
|
124
|
+
timeoutRef.current = setTimeout(() => {
|
|
125
|
+
setDisplayPassword("•".repeat(newActualPassword.length));
|
|
126
|
+
}, lastCharDelay);
|
|
127
|
+
} else {
|
|
128
|
+
onChange == null ? void 0 : onChange(e);
|
|
129
|
+
}
|
|
130
|
+
if (touchedRef.current) {
|
|
131
|
+
debouncedValidate(value);
|
|
132
|
+
}
|
|
133
|
+
};
|
|
134
|
+
const handleFocus = (e) => {
|
|
135
|
+
var _a;
|
|
136
|
+
setIsFocused(true);
|
|
137
|
+
(_a = props.onFocus) == null ? void 0 : _a.call(props, e);
|
|
138
|
+
};
|
|
139
|
+
const handleBlur = (e) => {
|
|
140
|
+
setIsFocused(false);
|
|
141
|
+
touchedRef.current = true;
|
|
142
|
+
if (validate) {
|
|
143
|
+
const valueToValidate = shouldEnableLastCharPreview ? actualPasswordRef.current : e.target.value;
|
|
144
|
+
const validationError = validate(valueToValidate);
|
|
145
|
+
setInternalError(validationError);
|
|
146
|
+
onValidationChange == null ? void 0 : onValidationChange(!validationError);
|
|
147
|
+
}
|
|
148
|
+
onBlur == null ? void 0 : onBlur(e);
|
|
149
|
+
};
|
|
150
|
+
const handleMouseEnter = () => {
|
|
151
|
+
setIsHovered(true);
|
|
152
|
+
};
|
|
153
|
+
const handleMouseLeave = () => {
|
|
154
|
+
setIsHovered(false);
|
|
155
|
+
};
|
|
156
|
+
const displayError = externalError || internalError;
|
|
157
|
+
const inputState = props.disabled ? "disabled" : displayError ? "error" : isFocused ? "focus" : isHovered ? "hover" : "idle";
|
|
158
|
+
return /* @__PURE__ */ jsxs(
|
|
159
|
+
"div",
|
|
160
|
+
{
|
|
161
|
+
className: cn("input-wrapper", fullWidth && "input-wrapper--full-width"),
|
|
162
|
+
"data-cy": `${finalDataCy}-wrapper`,
|
|
163
|
+
"data-testid": `${finalTestId}-wrapper`,
|
|
164
|
+
children: [
|
|
165
|
+
(label || tooltip) && /* @__PURE__ */ jsxs("div", { className: "input__label-row", children: [
|
|
166
|
+
label && /* @__PURE__ */ jsx(
|
|
167
|
+
"label",
|
|
168
|
+
{
|
|
169
|
+
htmlFor: id,
|
|
170
|
+
className: "input__label",
|
|
171
|
+
"data-cy": `${finalDataCy}-label`,
|
|
172
|
+
"data-testid": `${finalTestId}-label`,
|
|
173
|
+
children: displayLabel
|
|
174
|
+
}
|
|
175
|
+
),
|
|
176
|
+
tooltip && /* @__PURE__ */ jsx(Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxs(Root3, { children: [
|
|
177
|
+
/* @__PURE__ */ jsx(Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
|
|
178
|
+
"button",
|
|
179
|
+
{
|
|
180
|
+
type: "button",
|
|
181
|
+
className: "input__tooltip-trigger",
|
|
182
|
+
"aria-label": "More information",
|
|
183
|
+
"data-cy": `${finalDataCy}-tooltip-trigger`,
|
|
184
|
+
"data-testid": `${finalTestId}-tooltip-trigger`,
|
|
185
|
+
children: /* @__PURE__ */ jsxs(
|
|
186
|
+
"svg",
|
|
187
|
+
{
|
|
188
|
+
width: "12",
|
|
189
|
+
height: "12",
|
|
190
|
+
viewBox: "0 0 12 12",
|
|
191
|
+
fill: "none",
|
|
192
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
193
|
+
"aria-hidden": "true",
|
|
194
|
+
children: [
|
|
195
|
+
/* @__PURE__ */ jsx(
|
|
196
|
+
"circle",
|
|
197
|
+
{
|
|
198
|
+
cx: "6",
|
|
199
|
+
cy: "6",
|
|
200
|
+
r: "5.5",
|
|
201
|
+
stroke: "currentColor",
|
|
202
|
+
strokeWidth: "1",
|
|
203
|
+
fill: "none"
|
|
204
|
+
}
|
|
205
|
+
),
|
|
206
|
+
/* @__PURE__ */ jsx(
|
|
207
|
+
"path",
|
|
208
|
+
{
|
|
209
|
+
d: "M6 5.5V8.5",
|
|
210
|
+
stroke: "currentColor",
|
|
211
|
+
strokeWidth: "1",
|
|
212
|
+
strokeLinecap: "round"
|
|
213
|
+
}
|
|
214
|
+
),
|
|
215
|
+
/* @__PURE__ */ jsx("circle", { cx: "6", cy: "4", r: "0.5", fill: "currentColor" })
|
|
216
|
+
]
|
|
217
|
+
}
|
|
218
|
+
)
|
|
219
|
+
}
|
|
220
|
+
) }),
|
|
221
|
+
/* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(
|
|
222
|
+
Content2,
|
|
223
|
+
{
|
|
224
|
+
className: "input__tooltip-content",
|
|
225
|
+
side: "top",
|
|
226
|
+
sideOffset: 4,
|
|
227
|
+
"data-cy": `${finalDataCy}-tooltip-content`,
|
|
228
|
+
"data-testid": `${finalTestId}-tooltip-content`,
|
|
229
|
+
children: [
|
|
230
|
+
tooltip,
|
|
231
|
+
/* @__PURE__ */ jsx(Arrow2, { className: "input__tooltip-arrow" })
|
|
232
|
+
]
|
|
233
|
+
}
|
|
234
|
+
) })
|
|
235
|
+
] }) })
|
|
236
|
+
] }),
|
|
237
|
+
/* @__PURE__ */ jsxs("div", { className: "input__field-container", children: [
|
|
238
|
+
/* @__PURE__ */ jsx(
|
|
239
|
+
"input",
|
|
240
|
+
{
|
|
241
|
+
ref: mergedRef,
|
|
242
|
+
id,
|
|
243
|
+
type: inputType,
|
|
244
|
+
value: inputValue,
|
|
245
|
+
className: cn(
|
|
246
|
+
"input",
|
|
247
|
+
displayError && "input--error",
|
|
248
|
+
fullWidth && "input--full-width",
|
|
249
|
+
showToggle && "input--with-toggle",
|
|
250
|
+
className
|
|
251
|
+
),
|
|
252
|
+
"aria-invalid": displayError ? "true" : "false",
|
|
253
|
+
"aria-required": required ? "true" : void 0,
|
|
254
|
+
"aria-describedby": displayError ? errorId : helperText ? helperId : void 0,
|
|
255
|
+
"data-cy": finalDataCy,
|
|
256
|
+
"data-testid": finalTestId,
|
|
257
|
+
"data-state": inputState,
|
|
258
|
+
onChange: handleChange,
|
|
259
|
+
onFocus: handleFocus,
|
|
260
|
+
onBlur: handleBlur,
|
|
261
|
+
onMouseEnter: handleMouseEnter,
|
|
262
|
+
onMouseLeave: handleMouseLeave,
|
|
263
|
+
required,
|
|
264
|
+
...props
|
|
265
|
+
}
|
|
266
|
+
),
|
|
267
|
+
showToggle && /* @__PURE__ */ jsx(
|
|
268
|
+
"button",
|
|
269
|
+
{
|
|
270
|
+
type: "button",
|
|
271
|
+
className: "input__toggle",
|
|
272
|
+
onClick: togglePasswordVisibility,
|
|
273
|
+
"aria-label": isPasswordVisible ? "Hide password" : "Show password",
|
|
274
|
+
"data-cy": `${finalDataCy}-toggle`,
|
|
275
|
+
"data-testid": `${finalTestId}-toggle`,
|
|
276
|
+
children: isPasswordVisible ? /* @__PURE__ */ jsxs(
|
|
277
|
+
"svg",
|
|
278
|
+
{
|
|
279
|
+
width: "20",
|
|
280
|
+
height: "20",
|
|
281
|
+
viewBox: "0 0 20 20",
|
|
282
|
+
fill: "none",
|
|
283
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
284
|
+
"aria-hidden": "true",
|
|
285
|
+
children: [
|
|
286
|
+
/* @__PURE__ */ jsx(
|
|
287
|
+
"path",
|
|
288
|
+
{
|
|
289
|
+
d: "M10 4C5.5 4 2 10 2 10s3.5 6 8 6 8-6 8-6-3.5-6-8-6z",
|
|
290
|
+
stroke: "currentColor",
|
|
291
|
+
strokeWidth: "1.5",
|
|
292
|
+
strokeLinecap: "round",
|
|
293
|
+
strokeLinejoin: "round",
|
|
294
|
+
fill: "none"
|
|
295
|
+
}
|
|
296
|
+
),
|
|
297
|
+
/* @__PURE__ */ jsx(
|
|
298
|
+
"circle",
|
|
299
|
+
{
|
|
300
|
+
cx: "10",
|
|
301
|
+
cy: "10",
|
|
302
|
+
r: "2.5",
|
|
303
|
+
stroke: "currentColor",
|
|
304
|
+
strokeWidth: "1.5",
|
|
305
|
+
fill: "none"
|
|
306
|
+
}
|
|
307
|
+
)
|
|
308
|
+
]
|
|
309
|
+
}
|
|
310
|
+
) : /* @__PURE__ */ jsxs(
|
|
311
|
+
"svg",
|
|
312
|
+
{
|
|
313
|
+
width: "20",
|
|
314
|
+
height: "20",
|
|
315
|
+
viewBox: "0 0 20 20",
|
|
316
|
+
fill: "none",
|
|
317
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
318
|
+
"aria-hidden": "true",
|
|
319
|
+
children: [
|
|
320
|
+
/* @__PURE__ */ jsx(
|
|
321
|
+
"path",
|
|
322
|
+
{
|
|
323
|
+
d: "M10 4C5.5 4 2 10 2 10s3.5 6 8 6 8-6 8-6-3.5-6-8-6z",
|
|
324
|
+
stroke: "currentColor",
|
|
325
|
+
strokeWidth: "1.5",
|
|
326
|
+
strokeLinecap: "round",
|
|
327
|
+
strokeLinejoin: "round",
|
|
328
|
+
fill: "none"
|
|
329
|
+
}
|
|
330
|
+
),
|
|
331
|
+
/* @__PURE__ */ jsx(
|
|
332
|
+
"circle",
|
|
333
|
+
{
|
|
334
|
+
cx: "10",
|
|
335
|
+
cy: "10",
|
|
336
|
+
r: "2.5",
|
|
337
|
+
stroke: "currentColor",
|
|
338
|
+
strokeWidth: "1.5",
|
|
339
|
+
fill: "none"
|
|
340
|
+
}
|
|
341
|
+
),
|
|
342
|
+
/* @__PURE__ */ jsx(
|
|
343
|
+
"path",
|
|
344
|
+
{
|
|
345
|
+
d: "M3 3l14 14",
|
|
346
|
+
stroke: "currentColor",
|
|
347
|
+
strokeWidth: "1.5",
|
|
348
|
+
strokeLinecap: "round"
|
|
349
|
+
}
|
|
350
|
+
)
|
|
351
|
+
]
|
|
352
|
+
}
|
|
353
|
+
)
|
|
354
|
+
}
|
|
355
|
+
)
|
|
356
|
+
] }),
|
|
357
|
+
displayError && /* @__PURE__ */ jsx(
|
|
358
|
+
"span",
|
|
359
|
+
{
|
|
360
|
+
id: errorId,
|
|
361
|
+
className: "input__error",
|
|
362
|
+
role: "alert",
|
|
363
|
+
"data-cy": `${finalDataCy}-error`,
|
|
364
|
+
"data-testid": `${finalTestId}-error`,
|
|
365
|
+
children: displayError
|
|
366
|
+
}
|
|
367
|
+
),
|
|
368
|
+
helperText && !displayError && /* @__PURE__ */ jsx(
|
|
369
|
+
"span",
|
|
370
|
+
{
|
|
371
|
+
id: helperId,
|
|
372
|
+
className: "input__helper",
|
|
373
|
+
"data-cy": `${finalDataCy}-helper`,
|
|
374
|
+
"data-testid": `${finalTestId}-helper`,
|
|
375
|
+
children: helperText
|
|
376
|
+
}
|
|
377
|
+
)
|
|
378
|
+
]
|
|
379
|
+
}
|
|
380
|
+
);
|
|
381
|
+
}
|
|
382
|
+
);
|
|
383
|
+
Input.displayName = "Input";
|
|
384
|
+
export {
|
|
385
|
+
Input
|
|
386
|
+
};
|
package/dist/index37.cjs
ADDED
|
@@ -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)};
|
package/dist/index37.js
ADDED
|
@@ -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
|
+
};
|
package/dist/index4.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),n=require("./index31.cjs"),a=require("@adam-milo/icons");;/* empty css */const i={settings:"GearIcon",user:"PersonIcon"},s=t.forwardRef(({variant:t,selected:s=!1,initials:c,disabled:r,"aria-label":o,"data-testid":d,"data-cy":u,...l},m)=>{const b=u||`menu-icon-button-${t}`,p=d||`menu-icon-button-${t}`,x=n.cn("menu-icon-btn",`menu-icon-btn--${t}`,s&&"menu-icon-btn--selected");return e.jsx("button",{ref:m,type:"button",disabled:r,className:x,"aria-label":o,"aria-pressed":s,"data-testid":p,"data-cy":b,...l,children:"user"===t&&c?e.jsx("span",{className:"menu-icon-btn__initials","data-cy":`${b}-initials`,"data-testid":`${p}-initials`,children:c.slice(0,2).toUpperCase()}):e.jsx("span",{className:"menu-icon-btn__icon","data-cy":`${b}-icon`,"data-testid":`${p}-icon`,children:e.jsx(a.Icon,{name:i[t],size:"md",decorative:!0})})})});s.displayName="MenuIconButton",exports.MenuIconButton=s;
|
package/dist/index4.js
CHANGED
|
@@ -1,22 +1,70 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
import { cn } from "./index31.js";
|
|
4
|
+
import { Icon } from "@adam-milo/icons";
|
|
5
|
+
/* empty css */
|
|
6
|
+
const variantIconMap = {
|
|
7
|
+
settings: "GearIcon",
|
|
8
|
+
user: "PersonIcon"
|
|
9
|
+
};
|
|
10
|
+
const MenuIconButton = forwardRef(
|
|
11
|
+
({
|
|
12
|
+
variant,
|
|
13
|
+
selected = false,
|
|
14
|
+
initials,
|
|
15
|
+
disabled,
|
|
16
|
+
"aria-label": ariaLabel,
|
|
17
|
+
"data-testid": dataTestId,
|
|
18
|
+
"data-cy": dataCy,
|
|
19
|
+
...props
|
|
20
|
+
}, ref) => {
|
|
21
|
+
const finalDataCy = dataCy || `menu-icon-button-${variant}`;
|
|
22
|
+
const finalTestId = dataTestId || `menu-icon-button-${variant}`;
|
|
23
|
+
const classes = cn(
|
|
24
|
+
"menu-icon-btn",
|
|
25
|
+
`menu-icon-btn--${variant}`,
|
|
26
|
+
selected && "menu-icon-btn--selected"
|
|
27
|
+
);
|
|
28
|
+
const renderContent = () => {
|
|
29
|
+
if (variant === "user" && initials) {
|
|
30
|
+
return /* @__PURE__ */ jsx(
|
|
31
|
+
"span",
|
|
32
|
+
{
|
|
33
|
+
className: "menu-icon-btn__initials",
|
|
34
|
+
"data-cy": `${finalDataCy}-initials`,
|
|
35
|
+
"data-testid": `${finalTestId}-initials`,
|
|
36
|
+
children: initials.slice(0, 2).toUpperCase()
|
|
37
|
+
}
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
return /* @__PURE__ */ jsx(
|
|
41
|
+
"span",
|
|
42
|
+
{
|
|
43
|
+
className: "menu-icon-btn__icon",
|
|
44
|
+
"data-cy": `${finalDataCy}-icon`,
|
|
45
|
+
"data-testid": `${finalTestId}-icon`,
|
|
46
|
+
children: /* @__PURE__ */ jsx(Icon, { name: variantIconMap[variant], size: "md", decorative: true })
|
|
47
|
+
}
|
|
48
|
+
);
|
|
49
|
+
};
|
|
6
50
|
return /* @__PURE__ */ jsx(
|
|
7
|
-
|
|
51
|
+
"button",
|
|
8
52
|
{
|
|
9
53
|
ref,
|
|
10
|
-
type: "
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
"
|
|
14
|
-
|
|
54
|
+
type: "button",
|
|
55
|
+
disabled,
|
|
56
|
+
className: classes,
|
|
57
|
+
"aria-label": ariaLabel,
|
|
58
|
+
"aria-pressed": selected,
|
|
59
|
+
"data-testid": finalTestId,
|
|
60
|
+
"data-cy": finalDataCy,
|
|
61
|
+
...props,
|
|
62
|
+
children: renderContent()
|
|
15
63
|
}
|
|
16
64
|
);
|
|
17
65
|
}
|
|
18
66
|
);
|
|
19
|
-
|
|
67
|
+
MenuIconButton.displayName = "MenuIconButton";
|
|
20
68
|
export {
|
|
21
|
-
|
|
69
|
+
MenuIconButton
|
|
22
70
|
};
|
package/dist/index5.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("react"),t=require("email-validator"),i=require("./index36.cjs"),l=e.forwardRef(({validateEmail:l=!0,invalidEmailMessage:r="Not a valid email address",validate:d,"data-cy":s,"data-testid":u,...n},o)=>{const m=e.useCallback(a=>{if(a)return t.validate(a)?void 0:r},[r]),c=e.useCallback(a=>l?d?m(a)||d(a):m(a):null==d?void 0:d(a),[l,d,m]);return a.jsx(i.Input,{ref:o,type:"email",validate:c,"data-cy":s||"email-input","data-testid":u||"email-input",...n})});l.displayName="EmailInput",exports.EmailInput=l;
|
package/dist/index5.js
CHANGED
|
@@ -1,61 +1,45 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useCallback } from "react";
|
|
3
|
-
import {
|
|
4
|
-
|
|
3
|
+
import { validate } from "email-validator";
|
|
4
|
+
import { Input } from "./index36.js";
|
|
5
|
+
const EmailInput = forwardRef(
|
|
5
6
|
({
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
allowDecimals = false,
|
|
10
|
-
validate,
|
|
7
|
+
validateEmail = true,
|
|
8
|
+
invalidEmailMessage = "Not a valid email address",
|
|
9
|
+
validate: validate$1,
|
|
11
10
|
"data-cy": dataCy,
|
|
12
11
|
"data-testid": dataTestId,
|
|
13
12
|
...props
|
|
14
13
|
}, ref) => {
|
|
15
|
-
const
|
|
14
|
+
const emailValidation = useCallback(
|
|
16
15
|
(value) => {
|
|
17
16
|
if (!value) return void 0;
|
|
18
|
-
|
|
19
|
-
if (isNaN(numValue)) {
|
|
20
|
-
return "Please enter a valid number";
|
|
21
|
-
}
|
|
22
|
-
if (!allowDecimals && !Number.isInteger(numValue)) {
|
|
23
|
-
return "Decimals are not allowed";
|
|
24
|
-
}
|
|
25
|
-
if (min !== void 0 && numValue < min) {
|
|
26
|
-
return `Must be at least ${min}`;
|
|
27
|
-
}
|
|
28
|
-
if (max !== void 0 && numValue > max) {
|
|
29
|
-
return `Must be at most ${max}`;
|
|
30
|
-
}
|
|
31
|
-
return void 0;
|
|
17
|
+
return validate(value) ? void 0 : invalidEmailMessage;
|
|
32
18
|
},
|
|
33
|
-
[
|
|
19
|
+
[invalidEmailMessage]
|
|
34
20
|
);
|
|
35
21
|
const combinedValidation = useCallback(
|
|
36
22
|
(value) => {
|
|
37
|
-
if (!
|
|
38
|
-
|
|
23
|
+
if (!validateEmail) return validate$1 == null ? void 0 : validate$1(value);
|
|
24
|
+
if (!validate$1) return emailValidation(value);
|
|
25
|
+
return emailValidation(value) || validate$1(value);
|
|
39
26
|
},
|
|
40
|
-
[
|
|
27
|
+
[validateEmail, validate$1, emailValidation]
|
|
41
28
|
);
|
|
42
29
|
return /* @__PURE__ */ jsx(
|
|
43
30
|
Input,
|
|
44
31
|
{
|
|
45
32
|
ref,
|
|
46
|
-
type: "
|
|
47
|
-
min,
|
|
48
|
-
max,
|
|
33
|
+
type: "email",
|
|
49
34
|
validate: combinedValidation,
|
|
50
|
-
"data-cy": dataCy || "
|
|
51
|
-
"data-testid": dataTestId || "
|
|
52
|
-
...props
|
|
53
|
-
step: allowDecimals ? "any" : step
|
|
35
|
+
"data-cy": dataCy || "email-input",
|
|
36
|
+
"data-testid": dataTestId || "email-input",
|
|
37
|
+
...props
|
|
54
38
|
}
|
|
55
39
|
);
|
|
56
40
|
}
|
|
57
41
|
);
|
|
58
|
-
|
|
42
|
+
EmailInput.displayName = "EmailInput";
|
|
59
43
|
export {
|
|
60
|
-
|
|
44
|
+
EmailInput
|
|
61
45
|
};
|
package/dist/index6.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),s=require("./index36.cjs"),r=t.forwardRef(({showToggle:t=!0,"data-cy":r,"data-testid":a,...o},d)=>e.jsx(s.Input,{ref:d,type:"password",showPasswordToggle:t,"data-cy":r||"password-input","data-testid":a||"password-input",...o}));r.displayName="PasswordInput",exports.PasswordInput=r;
|