@clicktap/ui 0.40.3 → 0.40.5

package/components/PinInput/PinInput.d.ts

@@ -1,4 +1,4 @@
 import { PinInputProps } from './PinInput.types';
 /** based on https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/src/pin-input/use-pin-input.ts */
-export declare function PinInput({ autoFocus, description, errorMessage, isDisabled, isInvalid, isMasked, isRequired, label, length, name: _name, onChange: controlledOnChange, value: _value, type, validationBehavior: _validationBehavior, className, classNames, ...props }: PinInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function PinInput({ autoFocus, description, errorMessage, isDisabled, isInvalid, isMasked, isRequired, label, length, name: _name, onChange: controlledOnChange, value: _value, type, validationBehavior: _validationBehavior, className, classNames, inputProps, ...props }: PinInputProps): import("react/jsx-runtime").JSX.Element;
 export default PinInput;

package/components/PinInput/PinInput.js

@@ -1 +1 @@
-"use client";import{jsxs as y,jsx as m}from"react/jsx-runtime";import{useState as E,useRef as L,useEffect as $,useCallback as g}from"react";import{Group as P,Label as R}from"react-aria-components";import{cn as f}from"../../utils/cn.js";function Z({autoFocus:A=!1,description:k,errorMessage:b,isDisabled:j=!1,isInvalid:w=!1,isMasked:I=!1,isRequired:N=!0,label:V,length:n=6,name:T,onChange:c,value:_="",type:h="numeric",validationBehavior:S,className:z,classNames:p,...B}){const[r,D]=E(()=>Array(n).fill("")),l=L([]);$(()=>{l.current=l.current.slice(0,n)},[n]),$(()=>{A&&l.current[0]?.focus()},[A]);const J=g(t=>{const e=t.target.value,u=Number(t.target.getAttribute("data-pin-input-index"));e!==""&&u<n-1&&l.current?.[u+1]?.focus();const o=r.map((s,d)=>d===u?e:s);D(o);const a=o.join("");c?.(a)},[r,n,c]),K=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"],o={alpha:/^[a-z]$/i,alphanumeric:/^[a-z0-9]$/i,numeric:/^[0-9]$/i};if(!t.key.match(o[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),l.current?.[e-1]?.focus(),t.preventDefault();const s=a.join("");c?.(s)}if(r[e]===""&&e<r.length-1&&t.key==="Delete"){const a=r.map((d,x)=>x===e+1?"":d);D(a),l.current?.[e+1]?.focus(),t.preventDefault();const s=a.join("");c?.(s)}},[r,h,c]),v=g(t=>{const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));t.preventDefault();const u=t.clipboardData?.getData("text");if(!u)return;const o=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(o.length===0)return;const a=[...r];let s=e;for(let i=0;i<o.length&&e+i<n;i++)a[e+i]=o[i],s=e+i;D(a);const d=a.join("");c?.(d);const x=s+1<n?s+1:n-1;l.current[x]?.focus()},[r,h,n,c]);return y(P,{className:f("flex flex-wrap gap-2",z),"aria-label":V,...B,children:[V&&m(R,{className:f("flex text-slate-500 text-sm grow shrink-0 basis-full",p?.label),children:V}),r.map((t,e)=>m("div",{className:f("flex flex-col w-full flex-1 text-slate-900",p?.inputWrap),children:m("input",{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","[&::-ms-reveal]:hidden [&::-ms-clear]:hidden","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",p?.input),onChange:J,onKeyDown:K,onPaste:v,type:I?"password":"text",autoComplete:"one-time-code",ref:u=>{l.current[e]=u},value:t,maxLength:1,"data-pin-input-index":e,disabled:j,required:N,"aria-label":`Pin Input Digit ${e+1}`})},`pin-input-${e}`)),(k||w&&b)&&y("div",{className:f("flex flex-row flex-wrap grow shrink-0 basis-full",p?.textWrap),children:[k&&m("p",{className:f("flex text-slate-500 text-sm grow shrink-0 basis-full",p?.description),children:k}),w&&b&&typeof b=="string"&&m("p",{className:f("flex text-red-500 text-sm grow shrink-0 basis-full",p?.error),children:b})]})]})}export{Z as PinInput,Z as default};
+"use client";import{jsxs as $,jsx as m}from"react/jsx-runtime";import{useState as L,useRef as R,useEffect as j,useCallback as V}from"react";import{Group as T,Label as _}from"react-aria-components";import{cn as f}from"../../utils/cn.js";function C({autoFocus:y=!1,description:D,errorMessage:b,isDisabled:I=!1,isInvalid:w=!1,isMasked:N=!1,isRequired:z=!0,label:k,length:n=6,name:P,onChange:c,value:S="",type:h="numeric",validationBehavior:W,className:B,classNames:p,inputProps:A,...J}){const[a,g]=L(()=>Array(n).fill("")),l=R([]);j(()=>{l.current=l.current.slice(0,n)},[n]),j(()=>{y&&l.current[0]?.focus()},[y]);const K=V(t=>{const e=t.target.value,u=Number(t.target.getAttribute("data-pin-input-index"));e!==""&&u<n-1&&l.current?.[u+1]?.focus();const o=a.map((s,d)=>d===u?e:s);g(o);const r=o.join("");c?.(r)},[a,n,c]),v=V(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"],o={alpha:/^[a-z]$/i,alphanumeric:/^[a-z0-9]$/i,numeric:/^[0-9]$/i};if(!t.key.match(o[h])&&!u.includes(t.key)&&t.preventDefault(),a[e]===""&&e>0&&t.key==="Backspace"){const r=a.map((d,x)=>x===e-1?"":d);g(r),l.current?.[e-1]?.focus(),t.preventDefault();const s=r.join("");c?.(s)}if(a[e]===""&&e<a.length-1&&t.key==="Delete"){const r=a.map((d,x)=>x===e+1?"":d);g(r),l.current?.[e+1]?.focus(),t.preventDefault();const s=r.join("");c?.(s)}},[a,h,c]),E=V(t=>{const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));t.preventDefault();const u=t.clipboardData?.getData("text");if(!u)return;const o=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(o.length===0)return;const r=[...a];let s=e;for(let i=0;i<o.length&&e+i<n;i++)r[e+i]=o[i],s=e+i;g(r);const d=r.join("");c?.(d);const x=s+1<n?s+1:n-1;l.current[x]?.focus()},[a,h,n,c]);return $(T,{className:f("flex flex-wrap gap-2",B),"aria-label":k,...J,children:[k&&m(_,{className:f("flex text-slate-500 text-sm grow shrink-0 basis-full",p?.label),children:k}),a.map((t,e)=>m("div",{className:f("flex flex-col w-full flex-1 text-slate-900",p?.inputWrap),children:m("input",{type:N?"password":"text",autoComplete:"one-time-code","data-1p-ignore":"true","data-lpignore":"true","data-bwignore":"true","data-form-type":"other",...A,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","[&::-ms-reveal]:hidden [&::-ms-clear]:hidden","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",p?.input,A?.className),onChange:K,onKeyDown:v,onPaste:E,ref:u=>{l.current[e]=u},value:t,maxLength:1,"data-pin-input-index":e,disabled:I,required:z,"aria-label":`Pin Input Digit ${e+1}`})},`pin-input-${e}`)),(D||w&&b)&&$("div",{className:f("flex flex-row flex-wrap grow shrink-0 basis-full",p?.textWrap),children:[D&&m("p",{className:f("flex text-slate-500 text-sm grow shrink-0 basis-full",p?.description),children:D}),w&&b&&typeof b=="string"&&m("p",{className:f("flex text-red-500 text-sm grow shrink-0 basis-full",p?.error),children:b})]})]})}export{C as PinInput,C as default};

package/components/PinInput/PinInput.types.d.ts

@@ -1,7 +1,22 @@
+import { InputHTMLAttributes } from 'react';
 import { GroupProps, ValidationResult } from 'react-aria-components';
 import { SlotsToClasses } from '../../types/SlotsToClasses';
+/**
+ * Props the component owns on each digit `<input>`. A consumer cannot override these through
+ * `inputProps` — they are the component's wiring, and overriding them breaks it.
+ */
+type OwnedInputProps = 'value' | 'onChange' | 'onKeyDown' | 'onPaste' | 'ref' | 'maxLength' | 'disabled' | 'required';
 /** @todo extend certain textfield props like name, validationBehavior and isRequired */
 export interface PinInputProps extends GroupProps {
+    /**
+     * Extra props for each digit `<input>` — the escape hatch for anything the component does not
+     * model, so the next unanticipated attribute does not need a release (CTAP-942).
+     *
+     * Applied AFTER the component's defaults (so `autoComplete` and the password-manager opt-outs can
+     * be overridden) and BEFORE its wiring (which cannot). `className` is merged with the component's
+     * own classes rather than replacing them; prefer `classNames.input` for styling.
+     */
+    inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, OwnedInputProps>;
     autoFocus?: boolean;
     description?: string;
     errorMessage?: string | ((validation: ValidationResult) => string);
@@ -16,3 +31,4 @@ export interface PinInputProps extends GroupProps {
     validationBehavior?: 'native' | 'aria';
     classNames?: SlotsToClasses<'label' | 'input' | 'description' | 'error' | 'inputWrap' | 'textWrap'>;
 }
+export {};

package/package.json

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