@clicktap/ui 0.17.1 → 0.17.3

package/components/PinInput/PinInput.js

@@ -1 +1 @@
-import{jsxs as $,jsx as m}from"react/jsx-runtime";import{useState as j,useRef as S,useEffect as W}from"react";import{Group as B,Label as F,TextField as J,Input as G,Text as N}from"react-aria-components";import{cn as f}from"../../utils/cn.js";function M({description:V,errorMessage:h,isDisabled:y=!1,isInvalid:g=!1,isMasked:T=!1,isRequired:D=!0,label:k,length:p=6,name:U,onChange:s,value:z="",type:A="numeric",validationBehavior:I="native",className:K,classNames:d,...P}){const[,b]=j(z),[u,w]=j(Array(p).fill("")),c=S([]);W(()=>{c.current=c.current.slice(0,p)},[p]);const E=t=>{const e=t.target.value,a=Number(t.target.getAttribute("data-pin-input-index"));e!==""&&a<u.length-1&&c.current?.[a+1]?.focus();const l=u.map((n,o)=>o===a?e:n);w(l);const r=l.join("");b(r),s&&s(r)},L=t=>{const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));if(t.ctrlKey||t.metaKey)return;const a=["Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Control","Alt","Meta","Shift","Tab","Enter","Escape"],l={alpha:/^[a-z]$/i,alphanumeric:/^[a-z0-9]$/i,numeric:/^[0-9]$/i};if(!t.key.match(l[A])&&!a.includes(t.key)&&t.preventDefault(),u[e]===""&&e>0&&t.key==="Backspace"){const r=u.map((o,x)=>x===e-1?"":o);w(r),c.current?.[e-1]?.focus(),t.preventDefault();const n=r.join("");b(n),s&&s(n)}if(u[e]===""&&e<u.length-1&&t.key==="Delete"){const r=u.map((o,x)=>x===e+1?"":o);w(r),c.current?.[e+1]?.focus(),t.preventDefault();const n=r.join("");b(n),s&&s(n)}},R=t=>{const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));t.preventDefault();const a=t.clipboardData?.getData("text");if(!a)return;const l=a.split("").filter(i=>{switch(A){case"alpha":return/^[a-zA-Z]$/.test(i);case"alphanumeric":return/^[a-z0-9]$/i.test(i);default:return/^[0-9]$/.test(i)}});if(l.length===0)return;const r=[...u];let n=e;for(let i=0;i<l.length&&e+i<p;i++)r[e+i]=l[i],n=e+i;w(r);const o=r.join("");b(o),s&&s(o);const x=n+1<p?n+1:p-1;c.current[x]?.focus()};return $(B,{className:f("flex flex-wrap gap-2",K),"aria-label":k,...P,children:[m(F,{className:f("flex text-slate-500 text-sm grow shrink-0 basis-full",d?.label),children:k}),u.map((t,e)=>m(J,{className:f("flex flex-col w-full flex-1 text-slate-900",d?.inputWrap),"aria-label":`Pin Input Digit ${e+1}`,isDisabled:y,isInvalid:g,isRequired:D,validationBehavior:I,children:m(G,{className:f("border-solid border border-slate-300 rounded-md","text-sm text-slate-900 placeholder-slate-400 text-center","h-10 px-2 py-0 m-0 w-full","bg-white","transition-all duration-200 ease-in-out","hover:border-slate-400","focus:outline-2 focus:outline focus:outline-slate-200 focus:border-slate-400","disabled:border-slate-200 disabled:bg-slate-100","invalid:border-red-500 invalid:bg-red-100 invalid:text-red-600","invalid:hover:border-red-600 invalid:focus:border-red-600 invalid:focus:outline-red-200",d?.input),onChange:E,onKeyDown:L,onPaste:R,type:T?"password":"text",autoComplete:"one-time-code",ref:a=>{a&&(c.current[e]=a)},value:t,maxLength:1,"data-pin-input-index":e})},`pin-input-${e}`)),$(J,{className:f("flex flex-row flex-wrap grow shrink-0 basis-full",d?.textWrap),"aria-label":"Pin Input",isDisabled:y,isInvalid:g,isRequired:D,validationBehavior:I,children:[V&&m(N,{className:f("flex text-slate-500 text-sm grow shrink-0 basis-full",d?.description),slot:"description",children:V}),g&&h&&typeof h=="string"&&m(N,{className:f("flex text-red-500 text-sm grow shrink-0 basis-full",d?.error),slot:"errorMessage",children:h})]})]})}export{M as PinInput,M as default};
+import{jsxs as A,jsx as m}from"react/jsx-runtime";import{useState as K,useRef as E,useEffect as L,useCallback as g}from"react";import{Group as P,Label as R}from"react-aria-components";import{cn as p}from"../../utils/cn.js";function U({description:k,errorMessage:b,isDisabled:y=!1,isInvalid:w=!1,isMasked:$=!1,isRequired:j=!0,label:V,length:n=6,name:T,onChange:o,value:S="",type:h="numeric",validationBehavior:W,className:I,classNames:f,...N}){const[r,D]=K(()=>Array(n).fill("")),c=E([]);L(()=>{c.current=c.current.slice(0,n)},[n]);const z=g(t=>{const e=t.target.value,u=Number(t.target.getAttribute("data-pin-input-index"));e!==""&&u<n-1&&c.current?.[u+1]?.focus();const l=r.map((s,d)=>d===u?e:s);D(l);const a=l.join("");o?.(a)},[r,n,o]),B=g(t=>{const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));if(t.ctrlKey||t.metaKey)return;const u=["Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Control","Alt","Meta","Shift","Tab","Enter","Escape"],l={alpha:/^[a-z]$/i,alphanumeric:/^[a-z0-9]$/i,numeric:/^[0-9]$/i};if(!t.key.match(l[h])&&!u.includes(t.key)&&t.preventDefault(),r[e]===""&&e>0&&t.key==="Backspace"){const a=r.map((d,x)=>x===e-1?"":d);D(a),c.current?.[e-1]?.focus(),t.preventDefault();const s=a.join("");o?.(s)}if(r[e]===""&&e<r.length-1&&t.key==="Delete"){const a=r.map((d,x)=>x===e+1?"":d);D(a),c.current?.[e+1]?.focus(),t.preventDefault();const s=a.join("");o?.(s)}},[r,h,o]),J=g(t=>{const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));t.preventDefault();const u=t.clipboardData?.getData("text");if(!u)return;const l=u.split("").filter(i=>{switch(h){case"alpha":return/^[a-zA-Z]$/.test(i);case"alphanumeric":return/^[a-z0-9]$/i.test(i);default:return/^[0-9]$/.test(i)}});if(l.length===0)return;const a=[...r];let s=e;for(let i=0;i<l.length&&e+i<n;i++)a[e+i]=l[i],s=e+i;D(a);const d=a.join("");o?.(d);const x=s+1<n?s+1:n-1;c.current[x]?.focus()},[r,h,n,o]);return A(P,{className:p("flex flex-wrap gap-2",I),"aria-label":V,...N,children:[V&&m(R,{className:p("flex text-slate-500 text-sm grow shrink-0 basis-full",f?.label),children:V}),r.map((t,e)=>m("div",{className:p("flex flex-col w-full flex-1 text-slate-900",f?.inputWrap),children:m("input",{className:p("border-solid border border-slate-300 rounded-md","text-sm text-slate-900 placeholder-slate-400 text-center","h-10 px-2 py-0 m-0 w-full","bg-white","transition-all duration-200 ease-in-out","hover:border-slate-400","focus:outline-2 focus:outline focus:outline-slate-200 focus:border-slate-400","disabled:border-slate-200 disabled:bg-slate-100",w&&"border-red-500 bg-red-100 text-red-600",w&&"hover:border-red-600 focus:border-red-600 focus:outline-red-200",f?.input),onChange:z,onKeyDown:B,onPaste:J,type:$?"password":"text",autoComplete:"one-time-code",ref:u=>{c.current[e]=u},value:t,maxLength:1,"data-pin-input-index":e,disabled:y,required:j,"aria-label":`Pin Input Digit ${e+1}`})},`pin-input-${e}`)),(k||w&&b)&&A("div",{className:p("flex flex-row flex-wrap grow shrink-0 basis-full",f?.textWrap),children:[k&&m("p",{className:p("flex text-slate-500 text-sm grow shrink-0 basis-full",f?.description),children:k}),w&&b&&typeof b=="string"&&m("p",{className:p("flex text-red-500 text-sm grow shrink-0 basis-full",f?.error),children:b})]})]})}export{U as PinInput,U as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "0.17.1",
+  "version": "0.17.3",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",