@clicktap/ui 2.2.0 → 2.3.0

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, inputProps, ...props }: PinInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function PinInput({ autoFocus, description, errorMessage, isDisabled, isInvalid, isMasked, isRequired, label, length, name, onChange: controlledOnChange, 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 $,jsx as x}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:g=!1,isMasked:N=!1,isRequired:z=!0,label:k,length:i=6,name:P,onChange:d,value:S="",type:w="numeric",validationBehavior:W,className:B,classNames:p,inputProps:A,...J}){const[r,h]=L(()=>Array(i).fill("")),o=R([]);j(()=>{o.current=o.current.slice(0,i)},[i]),j(()=>{y&&o.current[0]?.focus()},[y]);const K=V(t=>{const e=t.target.value,u=Number(t.target.getAttribute("data-pin-input-index"));e!==""&&u<i-1&&o.current?.[u+1]?.focus();const l=r.map((s,c)=>c===u?e:s);h(l);const a=l.join("");d?.(a)},[r,i,d]),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"],l={alpha:/^[a-z]$/i,alphanumeric:/^[a-z0-9]$/i,numeric:/^[0-9]$/i};if(!t.key.match(l[w])&&!u.includes(t.key)&&t.preventDefault(),r[e]===""&&e>0&&t.key==="Backspace"){const a=r.map((c,m)=>m===e-1?"":c);h(a),o.current?.[e-1]?.focus(),t.preventDefault();const s=a.join("");d?.(s)}if(r[e]===""&&e<r.length-1&&t.key==="Delete"){const a=r.map((c,m)=>m===e+1?"":c);h(a),o.current?.[e+1]?.focus(),t.preventDefault();const s=a.join("");d?.(s)}},[r,w,d]),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 l=u.split("").filter(n=>{switch(w){case"alpha":return/^[a-zA-Z]$/.test(n);case"alphanumeric":return/^[a-z0-9]$/i.test(n);default:return/^[0-9]$/.test(n)}});if(l.length===0)return;const a=[...r];let s=e;for(let n=0;n<l.length&&e+n<i;n++)a[e+n]=l[n],s=e+n;h(a);const c=a.join("");d?.(c);const m=s+1<i?s+1:i-1;o.current[m]?.focus()},[r,w,i,d]);return $(T,{className:f("flex flex-wrap gap-2",B),"aria-label":k,...J,children:[k&&x(_,{className:f("flex text-fg-muted text-sm grow shrink-0 basis-full",p?.label),children:k}),r.map((t,e)=>x("div",{className:f("flex flex-col w-full flex-1 text-fg",p?.inputWrap),children:x("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 rounded-md","text-sm text-fg placeholder-fg-subtle 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-border-emphasis","focus:outline-2 focus:outline focus:outline-border-subtle focus:border-border-emphasis","disabled:border-border-subtle disabled:bg-surface-subtle",g&&"border-danger-soft bg-danger-surface text-danger",g&&"hover:border-danger-soft focus:border-danger-soft focus:outline-border-subtle",p?.input,A?.className),onChange:K,onKeyDown:v,onPaste:E,ref:u=>{o.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||g&&b)&&$("div",{className:f("flex flex-row flex-wrap grow shrink-0 basis-full",p?.textWrap),children:[D&&x("p",{className:f("flex text-fg-muted text-sm grow shrink-0 basis-full",p?.description),children:D}),g&&b&&typeof b=="string"&&x("p",{className:f("flex text-danger text-sm grow shrink-0 basis-full",p?.error),children:b})]})]})}export{C as PinInput,C as default};
+"use client";import{jsxs as L,jsx as m}from"react/jsx-runtime";import{useState as G,useRef as H,useCallback as b,useEffect as $}from"react";import{Group as U,Label as J}from"react-aria-components";import{cn as u}from"../../utils/cn.js";const j={alpha:/^[a-z]$/i,alphanumeric:/^[a-z0-9]$/i,numeric:/^[0-9]$/};function E(g,x){const c=g.split("");return Array.from({length:x},(k,f)=>c[f]??"")}function Z({autoFocus:g=!1,description:x,errorMessage:c,isDisabled:k=!1,isInvalid:f=!1,isMasked:I=!1,isRequired:K=!0,label:D,length:o=6,name:y,onChange:C,value:A,type:d="numeric",validationBehavior:M,className:R,classNames:p,inputProps:N,...W}){const v=A!==void 0,[T,_]=G(()=>E(A??"",o)),r=v?E(A,o):T,s=H([]),l=b(e=>{_(e),C?.(e.join(""))},[C]),h=b(e=>j[d].test(e),[d]),w=b((e,t)=>{const n=[...r];let a=e;for(let i=0;i<t.length&&e+i<o;i++)n[e+i]=t[i],a=e+i;l(n),s.current[Math.min(a+1,o-1)]?.focus()},[r,o,l]);$(()=>{s.current=s.current.slice(0,o)},[o]),$(()=>{g&&s.current[0]?.focus()},[g]);const z=b(e=>{const t=e.target.value,n=Number(e.target.getAttribute("data-pin-input-index"));if(t===""){l(r.map((V,q)=>q===n?"":V));return}const a=r[n],B=(a!==""&&t.startsWith(a)?t.slice(a.length):t).split("").filter(h);B.length!==0&&w(n,B)},[r,l,h,w]),P=b(e=>{const t=Number(e.currentTarget.getAttribute("data-pin-input-index"));if(e.ctrlKey||e.metaKey)return;const n=["Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Control","Alt","Meta","Shift","Tab","Enter","Escape"];!j[d].test(e.key)&&!n.includes(e.key)&&e.preventDefault(),r[t]===""&&t>0&&e.key==="Backspace"&&(l(r.map((a,i)=>i===t-1?"":a)),s.current?.[t-1]?.focus(),e.preventDefault()),r[t]===""&&t<r.length-1&&e.key==="Delete"&&(l(r.map((a,i)=>i===t+1?"":a)),s.current?.[t+1]?.focus(),e.preventDefault())},[r,d,l]),S=b(e=>{const t=Number(e.currentTarget.getAttribute("data-pin-input-index"));e.preventDefault();const n=e.clipboardData?.getData("text");if(!n)return;const a=n.split("").filter(h);a.length!==0&&w(t,a)},[h,w]);return L(U,{className:u("flex flex-wrap gap-2",R),"aria-label":D,...W,children:[D&&m(J,{className:u("flex text-fg-muted text-sm grow shrink-0 basis-full",p?.label),children:D}),r.map((e,t)=>m("div",{className:u("flex flex-col w-full flex-1 text-fg",p?.inputWrap),children:m("input",{type:I?"password":"text",autoComplete:t===0?"one-time-code":"off",inputMode:d==="numeric"?"numeric":"text",pattern:d==="numeric"?"[0-9]*":void 0,"data-1p-ignore":"true","data-lpignore":"true","data-bwignore":"true","data-form-type":"other",...N,className:u("border-solid border rounded-md","text-sm text-fg placeholder-fg-subtle 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-border-emphasis","focus:outline-2 focus:outline focus:outline-border-subtle focus:border-border-emphasis","disabled:border-border-subtle disabled:bg-surface-subtle",f&&"border-danger-soft bg-danger-surface text-danger",f&&"hover:border-danger-soft focus:border-danger-soft focus:outline-border-subtle",p?.input,N?.className),onChange:z,onKeyDown:P,onPaste:S,ref:n=>{s.current[t]=n},value:e,maxLength:void 0,"data-pin-input-index":t,disabled:k,required:K,"aria-label":`Pin Input Digit ${t+1}`})},`pin-input-${t}`)),y&&m("input",{type:"hidden",name:y,value:r.join("")}),(x||f&&c)&&L("div",{className:u("flex flex-row flex-wrap grow shrink-0 basis-full",p?.textWrap),children:[x&&m("p",{className:u("flex text-fg-muted text-sm grow shrink-0 basis-full",p?.description),children:x}),f&&c&&typeof c=="string"&&m("p",{className:u("flex text-danger text-sm grow shrink-0 basis-full",p?.error),children:c})]})]})}export{Z as PinInput,Z as default};

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

@@ -6,7 +6,7 @@ import { SlotsToClasses } from '../../types/SlotsToClasses';
  * `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 */
+/** @todo extend certain textfield props like validationBehavior and isRequired */
 export interface PinInputProps extends GroupProps {
     /**
      * Extra props for each digit `<input>` — the escape hatch for anything the component does not
@@ -22,8 +22,13 @@ export interface PinInputProps extends GroupProps {
     errorMessage?: string | ((validation: ValidationResult) => string);
     label?: string;
     length?: number;
+    /** Rendered as a hidden input carrying the joined code, so a native form submit sees it. */
     name?: string;
     onChange?: (...event: any[]) => void;
+    /**
+     * The joined code. When given, the component is controlled: the boxes are derived from it, so a
+     * form's reset()/setValue('') clears them (CTAP-1749). Omit it for an uncontrolled input.
+     */
     value?: string;
     isMasked?: boolean;
     isRequired?: boolean;

package/docs/migrations/2026/09/ui-2026-09-18-pin-input-autofill-and-controlled-value.md

@@ -0,0 +1,57 @@
+# `PinInput`: Android autofill fills every box, mobile keyboards open numeric, and `value` is a real prop
+
+**Date:** 2026-09-18
+**Package:** `@clicktap/ui`
+**Affects:** `src/components/PinInput/PinInput.tsx`, `PinInput.types.ts`. Every consumer of `<PinInput>` (signup, forgot-password and email/password-change verification on the storefront).
+**Classification:** BUGFIX (three) + IMPROVEMENT (`value`/`name` honored)
+**Breaking:** No API change. **Behavioral:** passing `value` now controls the boxes (it was silently ignored); `maxLength` is no longer rendered; `autoComplete="one-time-code"` is on the first box only.
+**Ticket:** CTAP-1749 (from NOCOE-2944)
+
+## What was wrong
+
+Four things, all in this component (a consumer wrapper such as noco's `libs/noco-ui` only restyles it):
+
+1. **Android autofill and Gboard's clipboard chip lost five of six digits.** The paste handler split
+   digits across the boxes correctly, but autofill and the keyboard chip insert text as an *input*
+   event, not a paste event, so they went through the plain change handler, where `maxLength={1}`
+   kept only the first character. Desktop Ctrl+V worked, which is why it looked fixed.
+2. **No `inputMode`.** A numeric code opened the full keyboard on phones.
+3. **`autoComplete="one-time-code"` on all six boxes.** iOS offers the SMS code to the field that
+   advertises it; six advertising boxes offered the whole code to whichever one had focus.
+4. **`value` and `name` were accepted and discarded.** The component kept its own state, so
+   react-hook-form's `reset()` / `setValue('')` after a wrong code left six stale digits in place.
+
+## What changed
+
+- The change handler now distributes a multi-character value from the box that received it, the
+  way the paste handler always did: filtered to the code's alphabet, one character per box, extras
+  dropped, focus on the box after the last one written, **one** `onChange` with the joined code.
+  `maxLength` is gone (it was the truncation) and is pinned to `undefined` after `inputProps` so a
+  consumer cannot put it back.
+- `inputMode="numeric"` and `pattern="[0-9]*"` when `type` is numeric; `inputMode="text"` otherwise.
+- `autoComplete="one-time-code"` on the first box, `off` on the rest. The password-manager opt-outs
+  stay on every box.
+- `value`, when given, controls the boxes: they are derived from it, so an empty value clears them.
+  Omit it for an uncontrolled input, as before. `name` renders a hidden input carrying the joined
+  code, so a native form submit sees it.
+
+## ⚠️ Consumer impact
+
+- **If you pass `value`, it now means something.** Every storefront usage passes
+  `value={value ?? ''}` from a `Controller`, which is exactly the controlled shape: typing calls
+  `onChange`, the form stores the code, the boxes re-derive from it. A consumer that passes a stale
+  or constant `value` (say, `value=""` without wiring `onChange` into state) will find the boxes
+  never fill. Wire `onChange` to whatever produces `value`, or drop `value` for uncontrolled use.
+- A consumer that overrode `autoComplete` through `inputProps` still wins: `inputProps` is applied
+  after the defaults.
+- Nothing to change for the four storefront forms; they get all four fixes by taking the release.
+
+## Verification
+
+`PinInput.test.tsx` covers each: a multi-character change event on box 1 fills all six and reports
+the code once; distribution from a middle box drops the overflow; an autofilled sentence keeps only
+the digits; `inputmode`/`pattern` per type; `value=""` clears; the hidden `name` input carries the
+joined code; a single typed digit still advances. All were run against the previous component and
+failed before the change. On a device: Android Chrome with Gboard, tap the clipboard chip on the
+code, all six boxes fill; iOS Messages offers the code on the first box; a wrong code followed by
+the form's reset empties the boxes.

package/docs/migrations/index.json

@@ -1,4 +1,14 @@
 [
+  {
+    "path": "2026/09/ui-2026-09-18-pin-input-autofill-and-controlled-value.md",
+    "module": "libs/frontend-modules/ui",
+    "package": "@clicktap/ui",
+    "date": "2026-09-18",
+    "title": "`PinInput`: Android autofill fills every box, mobile keyboards open numeric, and `value` is a real prop",
+    "classification": "BUGFIX (three) + IMPROVEMENT (`value`/`name` honored)",
+    "breaking": "No API change. **Behavioral:** passing `value` now controls the boxes (it was silently ignored); `maxLength` is no longer rendered; `autoComplete=\"one-time-code\"` is on the first box only.",
+    "affects": "`src/components/PinInput/PinInput.tsx`, `PinInput.types.ts`. Every consumer of `<PinInput>` (signup, forgot-password and email/password-change verification on the storefront)."
+  },
   {
     "path": "2026/09/ui-2026-09-16-modal-overlay-detached-motion-element.md",
     "module": "libs/frontend-modules/ui",

package/package.json

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