@adam-milo/ui 1.0.21 → 1.0.23
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/index14.cjs +1 -1
- package/dist/index14.js +1 -1
- package/dist/index19.cjs +1 -0
- package/dist/index19.js +22 -0
- package/dist/index20.cjs +1 -0
- package/dist/index20.js +301 -0
- package/dist/index21.cjs +1 -0
- package/dist/index21.js +16 -0
- package/dist/index3.cjs +1 -1
- package/dist/index3.js +28 -104
- package/dist/index33.cjs +1 -0
- package/dist/index33.js +21 -0
- package/dist/index4.cjs +1 -1
- package/dist/index4.js +15 -178
- package/dist/index5.cjs +1 -1
- package/dist/index5.js +42 -172
- package/dist/index6.cjs +1 -1
- package/dist/index6.js +85 -171
- package/dist/src/components/forms/alphanumeric-input/AlphanumericInput.component.d.ts +23 -38
- package/dist/src/components/forms/alphanumeric-input/AlphanumericInput.component.d.ts.map +1 -1
- package/dist/src/components/forms/email-input/EmailInput.component.d.ts +17 -20
- package/dist/src/components/forms/email-input/EmailInput.component.d.ts.map +1 -1
- package/dist/src/components/forms/input/Input.component.d.ts +105 -0
- package/dist/src/components/forms/input/Input.component.d.ts.map +1 -0
- package/dist/src/components/forms/numeric-input/NumericInput.component.d.ts +30 -48
- package/dist/src/components/forms/numeric-input/NumericInput.component.d.ts.map +1 -1
- package/dist/src/components/forms/password-input/PasswordInput.component.d.ts +19 -16
- package/dist/src/components/forms/password-input/PasswordInput.component.d.ts.map +1 -1
- package/dist/src/lib/debounce.d.ts +12 -0
- package/dist/src/lib/debounce.d.ts.map +1 -0
- package/dist/src/lib/debounce.spec.d.ts +2 -0
- package/dist/src/lib/debounce.spec.d.ts.map +1 -0
- package/dist/src/lib/index.d.ts +2 -0
- package/dist/src/lib/index.d.ts.map +1 -1
- package/dist/src/lib/useMergedRef.d.ts +19 -0
- package/dist/src/lib/useMergedRef.d.ts.map +1 -0
- package/dist/style.css +1 -1
- package/package.json +2 -1
- /package/dist/{index31.cjs → index30.cjs} +0 -0
- /package/dist/{index31.js → index30.js} +0 -0
package/dist/index14.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),r=require("./index17.cjs"),a=require("./index13.cjs");;/* empty css */const i=require("./
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),r=require("./index17.cjs"),a=require("./index13.cjs");;/* empty css */const i=require("./index30.cjs"),n=require("@adam-milo/icons"),l=(e,r,a,i,n)=>{const[l,o]=t.useState(e.length),u=t.useCallback(()=>{if(void 0!==n)return void o(Math.min(n,e.length));const t=r.current;if(!t)return;const l=t.clientWidth,u=parseFloat(getComputedStyle(document.documentElement).fontSize)||16,s=window.getComputedStyle(t),c=((e,t,r)=>{if(!e)return.5*t;const a=e.match(/^([\d.]+)(px|rem|em)?/);if(!a)return.5*t;const i=parseFloat(a[1]);switch(a[2]||"px"){case"px":return i;case"rem":return i*t;case"em":return i*r;default:return.5*t}})(s.gap,u,parseFloat(s.fontSize)||16),d=3.75*u;for(let r=0;r<e.length;r++){const t=e[r],n=a.current[r];n&&i.current.set(t.value,n.offsetWidth)}const p=((e,t,r,a,i)=>{let n=0,l=0;for(let o=0;o<e.length;o++){const u=e[o],s=t.get(u.value)||0;if(0===s){l++;break}const c=n+(o>0?a:0)+s;if(o<e.length-1){if(c+a+i>r&&l>0)break}else if(c>r&&l>0)break;n=c,l++}return Math.max(1,l)})(e,i.current,l,c,d);o(p)},[e,n,r,a,i]),s=((e,r)=>{const a=t.useRef();return t.useEffect(()=>()=>{a.current&&clearTimeout(a.current)},[]),t.useCallback((...t)=>{a.current&&clearTimeout(a.current),a.current=setTimeout(()=>e(...t),r)},[e,r])})(u,100);t.useEffect(()=>{a.current.length>e.length&&(a.current=a.current.slice(0,e.length));const t=new Set(e.map(e=>e.value));if(i.current.forEach((e,r)=>{t.has(r)||i.current.delete(r)}),void 0===n){e.some(e=>!i.current.has(e.value))?o(e.length):setTimeout(u,0)}},[e,n,u,a,i]),t.useEffect(()=>{const e=r.current;if(!e)return;const t=new ResizeObserver(()=>{s()});return t.observe(e),setTimeout(u,0),()=>{t.disconnect()}},[u,s,r]);const c=e.slice(0,l),d=e.slice(l);return{visibleCount:l,visibleItems:c,hiddenItems:d,hasOverflow:d.length>0}},o=t.forwardRef(({items:o,selectedValue:u,onSelectionChange:s,removable:c=!1,onRemove:d,variant:p="primary",disabled:h=!1,maxVisible:v,className:m,"data-testid":f,"data-cy":g,...b},y)=>{const w=(o&&Array.isArray(o)?o:[]).filter(e=>null!=e&&"object"==typeof e),x=t.useRef(null),k=t.useRef([]),_=t.useRef(new Map),C=t.useRef(null),[E,j]=t.useState(!1),[N,$]=t.useState(!1),D=t.useRef([]),{visibleItems:S,hiddenItems:R,hasOverflow:I}=l(w,x,k,_,v),q=t.useCallback((e,t,r)=>{if(!h&&!t&&s){s(u===e?null:e,r)}},[h,u,s]),A=t.useCallback((e,t)=>{e.stopPropagation(),h||d&&d(t,e)},[h,d]),M=t.useCallback((e,t,r)=>{h||r||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),q(t,r,e))},[h,q]),P=t.useCallback(e=>{e.stopPropagation(),$(e=>!e),j(!1)},[]),T=t.useCallback((e,t)=>{var r,a,i,n;switch(e.key){case"ArrowDown":e.preventDefault(),t<R.length-1&&(null==(r=D.current[t+1])||r.focus());break;case"ArrowUp":e.preventDefault(),t>0&&(null==(a=D.current[t-1])||a.focus());break;case"Home":e.preventDefault(),null==(i=D.current[0])||i.focus();break;case"End":e.preventDefault(),null==(n=D.current[R.length-1])||n.focus()}},[R.length]),z=t.useRef(),L=t.useRef();return t.useEffect(()=>{z.current=e=>{C.current&&!C.current.contains(e.target)&&$(!1)},L.current=e=>{"Escape"===e.key&&$(!1)}}),t.useEffect(()=>{if(!N)return;const e=e=>{var t;return null==(t=z.current)?void 0:t.call(z,e)},t=e=>{var t;return null==(t=L.current)?void 0:t.call(L,e)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",t),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",t)}},[N]),t.useEffect(()=>{if("development"===process.env.NODE_ENV&&w.length>0){const e=w.map(e=>e.value),t=new Set(e);e.length!==t.size&&i.devWarn("[ChipGroup] Duplicate values detected in items array. Each item should have a unique value.")}},[w]),t.useEffect(()=>{D.current.length>R.length&&(D.current=D.current.slice(0,R.length))},[R]),o&&Array.isArray(o)?e.jsxs("div",{ref:y,className:r.cn("chip-group",h&&"chip-group--disabled",m),role:"group","aria-label":"Chip group","data-testid":f||"chip-group","data-cy":g||"chip-group",...b,children:[I&&e.jsxs("div",{className:"sr-only",role:"status","aria-live":"polite","aria-atomic":"true","data-testid":"chip-group-live-region","data-cy":"chip-group-live-region",children:[R.length," additional ",1===R.length?"chip":"chips"," hidden"]}),e.jsxs("div",{ref:x,className:"chip-group__container",children:[S.map(t=>{const r=u===t.value,i=t.variant||p,l=h||t.disabled||!1,o=w.findIndex(e=>e.value===t.value);return e.jsx("div",{ref:e=>{k.current[o]=e||null},className:"chip-group__item-wrapper","data-cy":`chip-group-item-wrapper-${t.value}`,"data-testid":`chip-group-item-wrapper-${t.value}`,children:e.jsxs("div",{className:"chip-group__item",onClick:e=>q(t.value,l,e),onKeyDown:e=>M(e,t.value,l),tabIndex:l?-1:0,role:"button","aria-pressed":r?"true":"false","aria-disabled":l?"true":"false","data-cy":`chip-group-item-${t.value}`,"data-testid":`chip-group-item-${t.value}`,children:[e.jsx(a.Chip,{variant:i,selected:r,disabled:l,"data-cy":`chip-${t.value}`,"data-testid":`chip-${t.value}`,children:t.label}),c&&!h&&!l&&e.jsx("button",{className:"chip-group__remove",onClick:e=>A(e,t.value),"aria-label":`Remove ${t.label}`,"data-cy":`chip-remove-${t.value}`,"data-testid":`chip-remove-${t.value}`,type:"button",children:e.jsx(n.Icon,{name:"Cross2Icon",size:"sm",decorative:!0})})]})},t.value)}),I&&e.jsxs("div",{ref:C,className:"chip-group__overflow",role:"button",tabIndex:0,"aria-expanded":N?"true":"false","aria-haspopup":"menu","aria-label":`Show ${R.length} more ${1===R.length?"chip":"chips"}`,onMouseEnter:()=>!N&&j(!0),onMouseLeave:()=>j(!1),onClick:P,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.stopPropagation(),$(!N),j(!1))},"data-cy":"chip-group-overflow","data-testid":"chip-group-overflow",children:[e.jsxs(a.Chip,{variant:p,"data-cy":"chip-overflow","data-testid":"chip-overflow",children:["+",R.length]}),E&&!N&&e.jsx("div",{className:"chip-group__tooltip chip-group__tooltip--hover",role:"tooltip","data-cy":"chip-group-tooltip","data-testid":"chip-group-tooltip",children:R.map(t=>e.jsx("div",{className:"chip-group__tooltip-item","data-cy":`chip-group-tooltip-item-${t.value}`,"data-testid":`chip-group-tooltip-item-${t.value}`,children:t.label},t.value))}),N&&e.jsx("div",{className:"chip-group__dropdown",role:"menu","data-cy":"chip-group-dropdown","data-testid":"chip-group-dropdown",children:R.map((t,a)=>e.jsx("div",{ref:e=>{D.current[a]=e||null},className:r.cn("chip-group__dropdown-item",t.disabled&&"chip-group__dropdown-item--disabled"),role:"menuitem",tabIndex:t.disabled?-1:0,"aria-disabled":t.disabled?"true":"false",onClick:e=>{e.stopPropagation(),t.disabled||(q(t.value,!1,e),$(!1))},onKeyDown:e=>{T(e,a),"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.stopPropagation(),t.disabled||(q(t.value,!1,e),$(!1)))},"data-cy":`chip-group-dropdown-item-${t.value}`,"data-testid":`chip-group-dropdown-item-${t.value}`,children:t.label},t.value))})]})]})]}):null});o.displayName="ChipGroup",exports.ChipGroup=o;
|
package/dist/index14.js
CHANGED
|
@@ -3,7 +3,7 @@ import { forwardRef, useRef, useState, useCallback, useEffect } from "react";
|
|
|
3
3
|
import { cn } from "./index17.js";
|
|
4
4
|
import { Chip } from "./index13.js";
|
|
5
5
|
/* empty css */
|
|
6
|
-
import { devWarn } from "./
|
|
6
|
+
import { devWarn } from "./index30.js";
|
|
7
7
|
import { Icon } from "@adam-milo/icons";
|
|
8
8
|
const parseGapValue = (gapString, rootFontSize, containerFontSize) => {
|
|
9
9
|
if (!gapString) return 0.5 * rootFontSize;
|
package/dist/index19.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var t=/^[-!#$%&'*+\/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])+$/;exports.validate=function(e){if(!e)return!1;if(e.length>254)return!1;if(!t.test(e))return!1;var r=e.split("@");return!(r[0].length>64)&&!r[1].split(".").some(function(t){return t.length>63})};
|
package/dist/index19.js
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
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
|
+
};
|
|
20
|
+
export {
|
|
21
|
+
validate
|
|
22
|
+
};
|
package/dist/index20.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("./index17.cjs");;/* empty css */const a=require("./index21.cjs"),s=require("./index33.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/index20.js
ADDED
|
@@ -0,0 +1,301 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useState, useRef, useId, useMemo, useEffect } from "react";
|
|
3
|
+
import { cn } from "./index17.js";
|
|
4
|
+
/* empty css */
|
|
5
|
+
import { useMergedRef } from "./index21.js";
|
|
6
|
+
import { debounce } from "./index33.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";
|
|
299
|
+
export {
|
|
300
|
+
Input
|
|
301
|
+
};
|
package/dist/index21.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/index21.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/index3.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),t=require("./
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),t=require("./index19.cjs"),i=require("./index20.cjs"),r=a.forwardRef(({validateEmail:r=!0,invalidEmailMessage:l="Not a valid email address",validate:d,"data-cy":s,"data-testid":u,...n},c)=>{const o=a.useCallback(e=>{if(e)return t.validate(e)?void 0:l},[l]),m=a.useCallback(e=>r?d?o(e)||d(e):o(e):null==d?void 0:d(e),[r,d,o]);return e.jsx(i.Input,{ref:c,type:"email",validate:m,"data-cy":s||"email-input","data-testid":u||"email-input",...n})});r.displayName="EmailInput",exports.EmailInput=r;
|
package/dist/index3.js
CHANGED
|
@@ -1,116 +1,40 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { forwardRef,
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useCallback } from "react";
|
|
3
|
+
import { validate } from "./index19.js";
|
|
4
|
+
import { Input } from "./index20.js";
|
|
6
5
|
const EmailInput = forwardRef(
|
|
7
6
|
({
|
|
8
7
|
validateEmail = true,
|
|
9
8
|
invalidEmailMessage = "Not a valid email address",
|
|
10
|
-
|
|
11
|
-
error: externalError,
|
|
12
|
-
onChange,
|
|
13
|
-
label,
|
|
14
|
-
helperText,
|
|
15
|
-
fullWidth = false,
|
|
16
|
-
className,
|
|
17
|
-
id: providedId,
|
|
9
|
+
validate: validate$1,
|
|
18
10
|
"data-cy": dataCy,
|
|
19
11
|
"data-testid": dataTestId,
|
|
20
12
|
...props
|
|
21
13
|
}, ref) => {
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
onValidationChange == null ? void 0 : onValidationChange(isValid);
|
|
40
|
-
}
|
|
41
|
-
onChange == null ? void 0 : onChange(e);
|
|
42
|
-
};
|
|
43
|
-
const handleBlur = (e) => {
|
|
44
|
-
var _a;
|
|
45
|
-
setTouched(true);
|
|
46
|
-
if (validateEmail) {
|
|
47
|
-
const isValid = validateEmailFormat(e.target.value);
|
|
48
|
-
setInternalError(isValid ? void 0 : invalidEmailMessage);
|
|
49
|
-
onValidationChange == null ? void 0 : onValidationChange(isValid);
|
|
50
|
-
}
|
|
51
|
-
(_a = props.onBlur) == null ? void 0 : _a.call(props, e);
|
|
52
|
-
};
|
|
53
|
-
const displayError = externalError || internalError;
|
|
54
|
-
return /* @__PURE__ */ jsxs(
|
|
55
|
-
"div",
|
|
14
|
+
const emailValidation = useCallback(
|
|
15
|
+
(value) => {
|
|
16
|
+
if (!value) return void 0;
|
|
17
|
+
return validate(value) ? void 0 : invalidEmailMessage;
|
|
18
|
+
},
|
|
19
|
+
[invalidEmailMessage]
|
|
20
|
+
);
|
|
21
|
+
const combinedValidation = useCallback(
|
|
22
|
+
(value) => {
|
|
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);
|
|
26
|
+
},
|
|
27
|
+
[validateEmail, validate$1, emailValidation]
|
|
28
|
+
);
|
|
29
|
+
return /* @__PURE__ */ jsx(
|
|
30
|
+
Input,
|
|
56
31
|
{
|
|
57
|
-
|
|
58
|
-
"
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
{
|
|
64
|
-
htmlFor: id,
|
|
65
|
-
className: "input__label",
|
|
66
|
-
"data-cy": `${finalDataCy}-label`,
|
|
67
|
-
"data-testid": `${finalTestId}-label`,
|
|
68
|
-
children: label
|
|
69
|
-
}
|
|
70
|
-
),
|
|
71
|
-
/* @__PURE__ */ jsx(
|
|
72
|
-
"input",
|
|
73
|
-
{
|
|
74
|
-
ref,
|
|
75
|
-
id,
|
|
76
|
-
type: "email",
|
|
77
|
-
className: cn(
|
|
78
|
-
"input",
|
|
79
|
-
displayError && "input--error",
|
|
80
|
-
fullWidth && "input--full-width",
|
|
81
|
-
className
|
|
82
|
-
),
|
|
83
|
-
"aria-invalid": displayError ? "true" : "false",
|
|
84
|
-
"aria-describedby": displayError ? errorId : helperText ? helperId : void 0,
|
|
85
|
-
"data-cy": finalDataCy,
|
|
86
|
-
"data-testid": finalTestId,
|
|
87
|
-
onChange: handleChange,
|
|
88
|
-
onBlur: handleBlur,
|
|
89
|
-
...props
|
|
90
|
-
}
|
|
91
|
-
),
|
|
92
|
-
displayError && /* @__PURE__ */ jsx(
|
|
93
|
-
"span",
|
|
94
|
-
{
|
|
95
|
-
id: errorId,
|
|
96
|
-
className: "input__error",
|
|
97
|
-
role: "alert",
|
|
98
|
-
"data-cy": `${finalDataCy}-error`,
|
|
99
|
-
"data-testid": `${finalTestId}-error`,
|
|
100
|
-
children: displayError
|
|
101
|
-
}
|
|
102
|
-
),
|
|
103
|
-
helperText && !displayError && /* @__PURE__ */ jsx(
|
|
104
|
-
"span",
|
|
105
|
-
{
|
|
106
|
-
id: helperId,
|
|
107
|
-
className: "input__helper",
|
|
108
|
-
"data-cy": `${finalDataCy}-helper`,
|
|
109
|
-
"data-testid": `${finalTestId}-helper`,
|
|
110
|
-
children: helperText
|
|
111
|
-
}
|
|
112
|
-
)
|
|
113
|
-
]
|
|
32
|
+
ref,
|
|
33
|
+
type: "email",
|
|
34
|
+
validate: combinedValidation,
|
|
35
|
+
"data-cy": dataCy || "email-input",
|
|
36
|
+
"data-testid": dataTestId || "email-input",
|
|
37
|
+
...props
|
|
114
38
|
}
|
|
115
39
|
);
|
|
116
40
|
}
|
package/dist/index33.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),exports.debounce=function(e,t){let l=null;const n=function(...n){l&&clearTimeout(l);const o=this;l=setTimeout(()=>{e.apply(o,n),l=null},t)};return n.cancel=()=>{l&&(clearTimeout(l),l=null)},n};
|
package/dist/index33.js
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
function debounce(func, wait) {
|
|
2
|
+
let timeoutId = null;
|
|
3
|
+
const debounced = function(...args) {
|
|
4
|
+
if (timeoutId) clearTimeout(timeoutId);
|
|
5
|
+
const context = this;
|
|
6
|
+
timeoutId = setTimeout(() => {
|
|
7
|
+
func.apply(context, args);
|
|
8
|
+
timeoutId = null;
|
|
9
|
+
}, wait);
|
|
10
|
+
};
|
|
11
|
+
debounced.cancel = () => {
|
|
12
|
+
if (timeoutId) {
|
|
13
|
+
clearTimeout(timeoutId);
|
|
14
|
+
timeoutId = null;
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
return debounced;
|
|
18
|
+
}
|
|
19
|
+
export {
|
|
20
|
+
debounce
|
|
21
|
+
};
|
package/dist/index4.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),s=require("./index20.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;
|