@verifiedinc-public/shared-ui-elements 9.0.0 → 9.1.0

package/dist/components/form/DateInput/index.d.ts

@@ -16,6 +16,7 @@ interface DateInputProps extends Omit<TextFieldProps, 'onBlur' | 'onChange'> {
     InputProps?: TextFieldProps['InputProps'] & {
         'data-mask-me'?: boolean;
     };
+    redactYear?: boolean;
 }
 export declare const DateInput: import('react').ForwardRefExoticComponent<Omit<Readonly<DateInputProps>, "ref"> & import('react').RefAttributes<unknown>>;
 export {};

package/dist/components/form/DateInput/index.mjs

@@ -1 +1 @@
-"use strict";import{forwardRef as S,useState as M,useRef as O,useMemo as Y}from"react";import{TextField as F,Box as T,Stack as A,IconButton as N}from"@mui/material";import{CalendarToday as $}from"@mui/icons-material";import y from"../../../node_modules/react-datepicker/dist/es/index.mjs";import{useOnClickOutside as E}from"../../../hooks/useOnClickOutside.mjs";import R from"../../../styles/lib/react-datepicker.css.mjs";import{masks as B}from"../../../utils/masks/index.mjs";import{InputMask as j}from"../InputMask.mjs";import{jsxs as C,Fragment as z,jsx as a}from"react/jsx-runtime";const K=y.default??y,W=S(function(t,r){return a(A,{ref:r,sx:{position:"relative"},children:a(N,{edge:"end",size:"small",onClick:()=>{var l;t.disabled||(l=t.onFocus)==null||l.call(t)},disabled:t.disabled,children:a($,{fontSize:"small"})})})}),_=function({value:t,onChange:r,defaultSelectedDate:l,overflow:h=!1,clickOutsideBoundaryElement:u,minDate:x,maxDate:p,disabled:c}){const[b,d]=M(!1),m=O(null),k=new Date("08/01/1989"),f=x??new Date(1900,0,1),n=p??new Date,w=e=>{if(!e||!(e instanceof Date)||isNaN(e.getTime()))return"";try{const o=e.getDate().toString().padStart(2,"0"),s=(e.getMonth()+1).toString().padStart(2,"0"),i=e.getFullYear();return s==="00"||s>"12"||o==="00"||o>"31"||i<1900||i>n.getFullYear()?"":`${s}/${o}/${i}`}catch{return""}},D=Y(()=>{if(!t)return l??void 0;const e=new Date(t);return isNaN(+e)||!/^\d{2}\/\d{2}\/\d{4}$/.test(t)||e<f||e>n?k:e},[t]);return E(m,()=>{d(!1)},"mousedown",{},u),C(T,{ref:m,sx:{position:"relative","& .react-datepicker-popper":h?{transform:"translate(calc(-100% + 32px), calc(-50% + 10px))!important"}:{}},children:[a("style",{children:R}),a(K,{open:b,onFocus:()=>{d(e=>!e)},popperPlacement:"bottom-end",placeholderText:"MM/DD/YYYY",showPopperArrow:!1,showYearDropdown:!0,showMonthDropdown:!0,scrollableYearDropdown:!1,dateFormat:"MM/dd/yyyy",minDate:f,maxDate:n,selected:D,dropdownMode:"select",onSelect:e=>{const o=w(e);o&&(r?.({target:{value:o}}),d(!1))},disabled:c,customInput:a(W,{disabled:c})})]})};function G({label:t="Date",value:r,error:l,helperText:h,onChange:u,onBlur:x,disabled:p,pickerDefaultSelectedDate:c,pickerClickOutsideBoundaryElement:b,pickerInputOverflow:d=!1,inputMaskProps:m,minDate:k,maxDate:f,...n},w){var D;const[e,o]=M(""),s=r!==void 0,i=s?r:e,g=P=>{const v=P.target.value;s||o(v),u&&u(v)},I={label:t,error:l,helperText:h,fullWidth:!0,...n,autoComplete:"bday",inputProps:{...n.inputProps,inputMode:"numeric",tabIndex:0,mask:B.DOB_MASK},InputProps:{...n.InputProps,endAdornment:C(z,{children:[a(_,{onChange:g,value:i,overflow:d,clickOutsideBoundaryElement:b,defaultSelectedDate:c,minDate:k,maxDate:f,disabled:p}),(D=n.InputProps)==null?void 0:D.endAdornment]})}};return a(j,{mask:B.DOB_MASK,maskPlaceholder:null,disabled:p,value:i,onBlur:x,onChange:g,...m,children:a(F,{...I,inputRef:w,fullWidth:!0,sx:{flex:1,"& input":{boxShadow:"none!important",border:"none!important",letterSpacing:"1px"}}})})}const q=S(G);export{q as DateInput};
+"use strict";import{forwardRef as Y,useState as I,useRef as A,useMemo as N}from"react";import{TextField as P,Box as R,Stack as $,IconButton as z}from"@mui/material";import{CalendarToday as E}from"@mui/icons-material";import _ from"../../../node_modules/react-datepicker/dist/es/index.mjs";import{useOnClickOutside as W}from"../../../hooks/useOnClickOutside.mjs";import j from"../../../styles/lib/react-datepicker.css.mjs";import{masks as B}from"../../../utils/masks/index.mjs";import{InputMask as K}from"../InputMask.mjs";import{TextMaskCustom as q}from"../TextMaskCustom.mjs";import{jsxs as O,Fragment as G,jsx as n}from"react/jsx-runtime";const H=_.default??_,J=Y(function(t,s){return n($,{ref:s,sx:{position:"relative"},children:n(z,{edge:"end",size:"small",onClick:()=>{var i;t.disabled||(i=t.onFocus)==null||i.call(t)},disabled:t.disabled,children:n(E,{fontSize:"small"})})})}),L=function({value:t,onChange:s,defaultSelectedDate:i,overflow:h=!1,clickOutsideBoundaryElement:a,minDate:g,maxDate:m,disabled:D}){const[w,c]=I(!1),v=A(null),C=new Date("08/01/1989"),x=g??new Date(1900,0,1),u=m??new Date,r=e=>{if(!e||!(e instanceof Date)||isNaN(e.getTime()))return"";try{const o=e.getDate().toString().padStart(2,"0"),d=(e.getMonth()+1).toString().padStart(2,"0"),l=e.getFullYear();return d==="00"||d>"12"||o==="00"||o>"31"||l<1900||l>u.getFullYear()?"":`${d}/${o}/${l}`}catch{return""}},b=N(()=>{if(!t)return i??void 0;const e=new Date(t);return isNaN(+e)||!/^\d{2}\/\d{2}\/\d{4}$/.test(t)||e<x||e>u?C:e},[t]);return W(v,()=>{c(!1)},"mousedown",{},a),O(R,{ref:v,sx:{position:"relative","& .react-datepicker-popper":h?{transform:"translate(calc(-100% + 32px), calc(-50% + 10px))!important"}:{}},children:[n("style",{children:j}),n(H,{open:w,onFocus:()=>{c(e=>!e)},popperPlacement:"bottom-end",placeholderText:"MM/DD/YYYY",showPopperArrow:!1,showYearDropdown:!0,showMonthDropdown:!0,scrollableYearDropdown:!1,dateFormat:"MM/dd/yyyy",minDate:x,maxDate:u,selected:b,dropdownMode:"select",onSelect:e=>{const o=r(e);o&&(s?.({target:{value:o}}),c(!1))},disabled:D,customInput:n(J,{disabled:D})})]})};function V({label:t="Date",value:s,error:i,helperText:h,onChange:a,onBlur:g,disabled:m,pickerDefaultSelectedDate:D,pickerClickOutsideBoundaryElement:w,pickerInputOverflow:c=!1,inputMaskProps:v,minDate:C,maxDate:x,redactYear:u=!1,...r},b){var e;const[o,d]=I(""),l=s!==void 0,p=l?s:o,M=f=>{const k=f.target.value;l||d(k),a&&a(k)},y=O(G,{children:[!u&&n(L,{onChange:M,value:p,overflow:c,clickOutsideBoundaryElement:w,defaultSelectedDate:D,minDate:C,maxDate:x,disabled:m}),(e=r.InputProps)==null?void 0:e.endAdornment]}),S={flex:1,"& input":{boxShadow:"none!important",border:"none!important",letterSpacing:"1px"}};if(u)return n(P,{label:t,error:i,helperText:h,fullWidth:!0,...r,autoComplete:"bday",inputRef:b,value:p?.replace(/-/g,"")??"",onChange:((f,k)=>{if(!k)return;const F=p?.replace(/\//g,"")??"";if(f.target.value.replace(/\//g,"").length<F.length){a?.(""),l||d("");return}a?.(f.target.value),l||d(f.target.value)}),onBlur:g,disabled:m,placeholder:"__/__/____",inputProps:{...r.inputProps,useOnComplete:!1,unmask:!1,lazy:!0,mask:"00/00/YYYY",definitions:{Y:{mask:/[0-9•]/,displayChar:"\u2022"}},placeholderChar:"_",inputMode:"numeric",overwrite:!1,tabIndex:0},InputProps:{...r.InputProps,inputComponent:q,endAdornment:y},sx:S});const T={label:t,error:i,helperText:h,fullWidth:!0,...r,autoComplete:"bday",inputProps:{...r.inputProps,inputMode:"numeric",tabIndex:0,mask:B.DOB_MASK},InputProps:{...r.InputProps,endAdornment:y}};return n(K,{mask:B.DOB_MASK,maskPlaceholder:null,disabled:m,value:p,onBlur:g,onChange:M,...v,children:n(P,{...T,inputRef:b,fullWidth:!0,sx:S})})}const Q=Y(V);export{Q as DateInput};

package/dist/components/form/InputMask.d.ts

@@ -20,6 +20,7 @@ export interface InputMaskProps {
     onBlur?: ChangeEventHandler<HTMLInputElement>;
     beforeMaskedStateChange?: (options: BeforeMaskedStateChangeOptions) => void;
     maskPlaceholder?: string | null;
+    onFocus?: () => void;
     alwaysShowMask?: boolean;
     disabled?: boolean;
 }

package/dist/components/form/NewOneClickForm/react/ui/fields/input/date.field.mjs

@@ -1 +1 @@
-"use strict";import{useRef as x,useState as M}from"react";import{Box as S}from"@mui/material";import{USDateSchema as A}from"../../../../../../../validations/date.schema.mjs";import{formatDateMMDDYYYY as I}from"../../../../../../../utils/date.mjs";import{credentialKeys as B}from"../../../../core/fields/index.mjs";import{useFormField as K}from"../../../core/field.hook.mjs";import{useOneClickForm as N}from"../../form.context.mjs";import{getAutoCompleteAttributeValue as O}from"../shared.mjs";import{FieldLabel as P}from"./label.mjs";import{ClearFieldAdornment as V}from"./clear-field-adornment.mjs";import{jsx as i}from"react/jsx-runtime";import{fieldInputTypes as E}from"../../../../core/fields/constants.mjs";import{DateInput as R}from"../../../../../DateInput/index.mjs";function L({fieldKey:l}){var o;const{options:m}=N(),{field:e,setValue:t}=K({key:l}),u=x(null),[d,n]=M(e!=null&&e.value?I(e?.value):"");if(!e||e.schema.characteristics.inputType!==E.date)return null;const s=e.schema.key===B.birthDate,a=new Date,p=1900,c=1,f=1,D=s?a.getUTCFullYear()-18:a.getUTCFullYear()+100,h=s?a.getUTCMonth()+1:12,C=s?a.getUTCDate():31,g=new Date(p,c-1,f),k=new Date(D,h-1,C),y=r=>{if(e.isDisabled)return;const F=A.safeParse(r),T=r.replace(/[^0-9]/g,"");if(n(r),T.length<=0)return t("");if(!F.success)return t("NaN");const[v,U,Y]=r.split("/").map(Number),w=Date.UTC(Y,v-1,U,12,0,0,0);t(String(w))},b=()=>{n(""),t("")};return i(S,{width:"100%",children:i(R,{inputRef:u,variant:"outlined",size:"small",autoComplete:O(e.schema.key),label:i(P,{fieldKey:l}),value:d,onChange:y,error:!(e!=null&&e.isValid),helperText:(o=e.errorMessage)!=null&&o.length?e.errorMessage:e?.description,placeholder:e.schema.characteristics.placeholder,pickerClickOutsideBoundaryElement:m.features.datePickerClickOutsideBoundaryElement,pickerDefaultSelectedDate:new Date("08/01/1989"),minDate:g,maxDate:k,disabled:e.isDisabled,InputProps:{"data-mask-me":!0,endAdornment:i(V,{fieldKey:l,onClick:b,disabled:e.isDisabled})}})})}export{L as DateInputField};
+"use strict";import{useRef as S,useState as A}from"react";import{Box as I}from"@mui/material";import{USDateSchema as B}from"../../../../../../../validations/date.schema.mjs";import{formatDateMMDDYYYY as K}from"../../../../../../../utils/date.mjs";import{credentialKeys as N}from"../../../../core/fields/index.mjs";import{useFormField as O}from"../../../core/field.hook.mjs";import{useOneClickForm as P}from"../../form.context.mjs";import{getAutoCompleteAttributeValue as V}from"../shared.mjs";import{FieldLabel as E}from"./label.mjs";import{ClearFieldAdornment as R}from"./clear-field-adornment.mjs";import{jsx as l}from"react/jsx-runtime";import{fieldInputTypes as j}from"../../../../core/fields/constants.mjs";import{DateInput as z}from"../../../../../DateInput/index.mjs";function L({fieldKey:s}){var o,n,m;const{options:u}=P(),{field:e,setValue:t}=O({key:s}),p=S(null),[c,d]=A(e!=null&&e.value?K(e?.value):"");if(!e||e.schema.characteristics.inputType!==j.date)return null;const a=e.schema.key===N.birthDate,r=new Date,f=1900,D=1,h=1,C=a?r.getUTCFullYear()-18:r.getUTCFullYear()+100,g=a?r.getUTCMonth()+1:12,b=a?r.getUTCDate():31,k=new Date(f,D-1,h),y=new Date(C,g-1,b),v=i=>{if(e.isDisabled)return;const T=B.safeParse(i),Y=i.replace(/[^0-9]/g,"");if(d(i),Y.length<=0)return t("");if(!T.success)return t("NaN");const[U,w,x]=i.split("/").map(Number),M=Date.UTC(x,U-1,w,12,0,0,0);t(String(M))},F=()=>{d(""),t("")};return l(I,{width:"100%",children:l(z,{inputRef:p,variant:"outlined",size:"small",autoComplete:V(e.schema.key),label:l(E,{fieldKey:s}),value:c,onChange:v,error:!(e!=null&&e.isValid),helperText:(o=e.errorMessage)!=null&&o.length?e.errorMessage:e?.description,placeholder:e.schema.characteristics.placeholder,pickerClickOutsideBoundaryElement:u.features.datePickerClickOutsideBoundaryElement,pickerDefaultSelectedDate:new Date("08/01/1989"),minDate:k,maxDate:y,disabled:e.isDisabled,redactYear:a&&((m=(n=u.features.field)==null?void 0:n.dob)==null?void 0:m.redactYear),InputProps:{"data-mask-me":!0,endAdornment:l(R,{fieldKey:s,onClick:F,disabled:e.isDisabled})}})})}export{L as DateInputField};

package/dist/components/form/NewOneClickForm/react/ui/fields/shared.d.ts

@@ -1,18 +1,20 @@
 import { FormField } from '../../../core/form';
+import { OneClickFormOptions } from '../form.context';
 /**
  * Makes attributes for a field.
  * @param field The field to make attributes for.
  * @returns The attributes for the field.
  */
-export declare const makeAttributes: ({ userPrivacyEnabled, field, fieldKey, }: {
+export declare const makeAttributes: ({ userPrivacyEnabled, field, fieldKey, options, }: {
     userPrivacyEnabled?: boolean;
     field: FormField | undefined;
     fieldKey: string;
+    options: OneClickFormOptions;
 }) => {
     role: string;
     'aria-label': string | undefined;
     'data-testid': string;
-    'data-verified-sdk-field-value': undefined;
+    'data-verified-sdk-field-value': ReturnType<typeof getFieldValue>;
 };
 /**
  * Returns the autocomplete attribute value based on the type of the field.
@@ -25,4 +27,34 @@ export declare function getAutoCompleteAttributeValue(key: string): "off" | "tel
  * @param field The field to get the value from.
  * @returns The value or display value of the field.
  */
-export declare const getFieldValue: (field: FormField) => any;
+export declare const getFieldValue: (field: FormField, options: OneClickFormOptions) => string | {
+    memberId: string;
+    payer: {
+        name: string;
+        verifiedId: string;
+        logoUrl?: string | undefined;
+    };
+    id?: number | undefined;
+} | {
+    firstName?: string | undefined;
+    lastName?: string | undefined;
+    middleName?: string | undefined;
+} | {
+    line1?: string | undefined;
+    line2?: string | undefined;
+    city?: string | undefined;
+    state?: string | undefined;
+    country?: string | undefined;
+    zipCode?: string | undefined;
+} | {
+    documentNumber?: string | undefined;
+    issuanceState?: string | undefined;
+    issuanceDate?: string | undefined;
+    expirationDate?: string | undefined;
+    address?: undefined;
+} | null | undefined;
+/**
+ * Get the display value for a field, applying feature-flag-driven
+ * transformations (e.g. year redaction for DOB).
+ */
+export declare const getFieldDisplayValue: (field: FormField, options: OneClickFormOptions) => string | null;

package/dist/components/form/NewOneClickForm/react/ui/fields/shared.mjs

@@ -1 +1 @@
-"use strict";import{credentialKeys as a}from"../../../core/fields/index.mjs";import{fieldInputTypes as d}from"../../../core/fields/constants.mjs";const r=({userPrivacyEnabled:e,field:t,fieldKey:s})=>{const i={role:"region","aria-label":t?.schema.characteristics.label,"data-testid":t?.schema.characteristics.inputType===d.composite?`data-field-composite-${s}`:`data-field-atomic-${s}`,"data-verified-sdk-field-value":void 0};return e||(i["data-verified-sdk-field-value"]=t?l(t):void 0),i};function c(e){return e===a.firstName?"given-name":e===a.lastName?"family-name":e===a.phone?"tel":e===a.address?"street-address address-level2 address-level1 postal-code":e===a.line2?"address-line2":"off"}const l=e=>{if(!(typeof e.value=="object"&&e.schema.key!==a.address&&e.schema.key!==a.healthInsurance))return e.schema.key===a.state||e.schema.key===a.issuanceState||e.schema.key===a.birthDate||e.schema.key===a.expirationDate||e.schema.key===a.issuanceDate?e.value:e.displayValue};export{c as getAutoCompleteAttributeValue,l as getFieldValue,r as makeAttributes};
+"use strict";import{credentialKeys as a}from"../../../core/fields/index.mjs";import{fieldInputTypes as o}from"../../../core/fields/constants.mjs";const c=({userPrivacyEnabled:e,field:t,fieldKey:i,options:l})=>{const s={role:"region","aria-label":t?.schema.characteristics.label,"data-testid":t?.schema.characteristics.inputType===o.composite?`data-field-composite-${i}`:`data-field-atomic-${i}`,"data-verified-sdk-field-value":void 0};return e||(s["data-verified-sdk-field-value"]=t?d(t,l):void 0),s};function n(e){return e===a.firstName?"given-name":e===a.lastName?"family-name":e===a.phone?"tel":e===a.address?"street-address address-level2 address-level1 postal-code":e===a.line2?"address-line2":"off"}const d=(e,t)=>{if(!(typeof e.value=="object"&&e.schema.key!==a.address&&e.schema.key!==a.healthInsurance))return e.schema.key===a.state||e.schema.key===a.issuanceState||e.schema.key===a.birthDate||e.schema.key===a.expirationDate||e.schema.key===a.issuanceDate?e.value:r(e,t)},r=(e,t)=>{var i,l;const s=e.displayValue;return(l=(i=t.features.field)==null?void 0:i.dob)!=null&&l.redactYear&&e.schema.key===a.birthDate&&typeof s=="string"?s.replace(/\/\d{4}$/,"/\u2022\u2022\u2022\u2022"):s};export{n as getAutoCompleteAttributeValue,r as getFieldDisplayValue,d as getFieldValue,c as makeAttributes};

package/dist/components/form/NewOneClickForm/react/ui/fields/style.mjs

@@ -1 +1 @@
-"use strict";import{Stack as l,Typography as d}from"@mui/material";import{useFormField as o}from"../../core/field.hook.mjs";import{makeAttributes as h}from"./shared.mjs";import{useOneClickForm as x}from"../form.context.mjs";import{jsx as t,jsxs as c}from"react/jsx-runtime";function f({label:e,sx:i}){return t(l,{sx:{flexShrink:0,alignItems:"flex-start",justifyContent:"flex-start",width:100,mt:.7,...i},children:t(d,{component:"span",variant:"subtitle2",textTransform:"uppercase",color:"text.primary",sx:{position:"relative",fontSize:12,fontWeight:700,textAlign:"left",alignSelf:"flex-start",letterSpacing:1},children:e})})}function a({fieldKey:e,label:i,sx:n}){const{fieldProps:r}=o({key:e}),s=i??r.label;return t(f,{label:s,sx:n})}function b({fieldKey:e}){const{field:i}=o({key:e});return i?t(d,{"data-mask-me":!0,variant:"body1",sx:{fontSize:20,fontWeight:300,wordBreak:"break-word",textAlign:"left"},children:i?.displayValue||(i!=null&&i.isRequired?null:"-")}):null}function u({description:e}){return t(d,{variant:"body1",color:"text.secondary",sx:{fontSize:12,fontWeight:400,wordBreak:"break-word",mt:.5,mr:1.75,textAlign:"left"},children:e})}function p({fieldKey:e,description:i}){const{fieldProps:n}=o({key:e}),r=i??n.description;return r?t(u,{description:r}):null}function m({fieldKey:e,children:i,spacing:n}){const r=x(),{field:s}=o({key:e}),y=h({userPrivacyEnabled:r.options.features.enableUserPrivacy,field:s,fieldKey:e});return t(l,{component:"section",...y,spacing:n,style:{width:"100%"},children:i})}function g({fieldKey:e,children:i}){return t(m,{fieldKey:e,children:c(l,{direction:"row",width:"100%",children:[t(a,{fieldKey:e}),t(l,{direction:"column",children:i})]})})}function k({fieldKey:e,description:i}){return c(l,{children:[t(a,{fieldKey:e,sx:{width:"100%",mt:0}}),t(p,{fieldKey:e,description:i})]})}function F({children:e,spacing:i,sx:n}){return t(l,{spacing:i,sx:{pl:2,borderLeftWidth:1,borderLeftColor:"neutral.main",borderLeftStyle:"solid",...n},children:e})}export{p as FieldDescription,u as FieldDescriptionBase,a as FieldLabel,f as FieldLabelBase,g as FieldRow,m as FieldRowContainer,F as FieldSectionContent,k as FieldSectionTitle,b as FieldValue};
+"use strict";import{Stack as l,Typography as a}from"@mui/material";import{useFormField as o}from"../../core/field.hook.mjs";import{makeAttributes as x,getFieldDisplayValue as b}from"./shared.mjs";import{useOneClickForm as c}from"../form.context.mjs";import{jsx as t,jsxs as f}from"react/jsx-runtime";function p({label:e,sx:i}){return t(l,{sx:{flexShrink:0,alignItems:"flex-start",justifyContent:"flex-start",width:100,mt:.7,...i},children:t(a,{component:"span",variant:"subtitle2",textTransform:"uppercase",color:"text.primary",sx:{position:"relative",fontSize:12,fontWeight:700,textAlign:"left",alignSelf:"flex-start",letterSpacing:1},children:e})})}function d({fieldKey:e,label:i,sx:n}){const{fieldProps:r}=o({key:e}),s=i??r.label;return t(p,{label:s,sx:n})}function g({fieldKey:e}){const{field:i}=o({key:e}),{options:n}=c();if(!i)return null;const r=b(i,n);return t(a,{"data-mask-me":!0,variant:"body1",sx:{fontSize:20,fontWeight:300,wordBreak:"break-word",textAlign:"left"},children:r||(i!=null&&i.isRequired?null:"-")})}function u({description:e}){return t(a,{variant:"body1",color:"text.secondary",sx:{fontSize:12,fontWeight:400,wordBreak:"break-word",mt:.5,mr:1.75,textAlign:"left"},children:e})}function y({fieldKey:e,description:i}){const{fieldProps:n}=o({key:e}),r=i??n.description;return r?t(u,{description:r}):null}function m({fieldKey:e,children:i,spacing:n}){const r=c(),{field:s}=o({key:e}),h=x({userPrivacyEnabled:r.options.features.enableUserPrivacy,field:s,fieldKey:e,options:r.options});return t(l,{component:"section",...h,spacing:n,style:{width:"100%"},children:i})}function k({fieldKey:e,children:i}){return t(m,{fieldKey:e,children:f(l,{direction:"row",width:"100%",children:[t(d,{fieldKey:e}),t(l,{direction:"column",children:i})]})})}function F({fieldKey:e,description:i}){return f(l,{children:[t(d,{fieldKey:e,sx:{width:"100%",mt:0}}),t(y,{fieldKey:e,description:i})]})}function w({children:e,spacing:i,sx:n}){return t(l,{spacing:i,sx:{pl:2,borderLeftWidth:1,borderLeftColor:"neutral.main",borderLeftStyle:"solid",...n},children:e})}export{y as FieldDescription,u as FieldDescriptionBase,d as FieldLabel,p as FieldLabelBase,k as FieldRow,m as FieldRowContainer,w as FieldSectionContent,F as FieldSectionTitle,g as FieldValue};

package/dist/components/form/NewOneClickForm/react/ui/form.context.d.ts

@@ -8,6 +8,12 @@ type OneClickOptionFeatures = {
     editMode?: {
         hide?: boolean;
     };
+    field?: {
+        dob?: {
+            /** When true, masks the year portion of the DOB field as ••••. */
+            redactYear?: boolean;
+        };
+    };
 };
 type OneClickOptionServicePaths = {
     googlePlacesAutocompletePlaces?: (input: string, signal?: AbortSignal) => Promise<unknown>;

package/dist/components/form/OTPInput.d.ts

@@ -14,6 +14,11 @@ interface OTPInputProps {
      * ID of the element that labels this component (for accessibility)
      */
     ariaLabelledBy?: string;
+    /**
+     * When true, adds data attributes to prevent password managers and autofill apps from interacting with the inputs.
+     * @default false
+     */
+    disableAutoFillApps?: boolean;
 }
 export type OTPInputInstance = Readonly<{
     focus: () => void;

package/dist/components/form/OTPInput.mjs

@@ -1 +1 @@
-"use strict";import{forwardRef as q,useRef as b,useState as R,useImperativeHandle as H,useMemo as L,useCallback as m}from"react";import{useTheme as O,FormControl as U,InputBase as G,Box as J,TextField as N,Stack as Q,Typography as V}from"@mui/material";import{v4 as X}from"uuid";import{jsx as g,jsxs as $}from"react/jsx-runtime";function Y(t,A){const l=O(),w=b(Array.from({length:6},()=>X())),[f,h]=R([]),c=b(null),o=b([]),x=b(null),[P,k]=R(!1);H(A,()=>({get value(){return f.join("")},set value(e){var n;h(e.split("")),(n=t.onChange)==null||n.call(t,{target:{value:e}})},focus(){var e,n;(e=o.current[0])==null||e.click(),(n=o.current[0])==null||n.focus()},blur(){o.current.forEach(e=>e?.blur())},clear(){h([])}}),[t,f]);const B={borderColor:t.error?l.palette.error.main:l.palette.action.disabled},F={borderColor:t.error?l.palette.error.main:l.palette.text.primary},M={borderColor:t.error?l.palette.error.main:l.palette.primary.main,boxShadow:`inset 0 0 0 1px ${t.error?l.palette.error.main:l.palette.primary.main}`},K={boxSizing:"content-box",direction:"row",alignItems:"center",spacing:1.25,sx:{"& input":{textAlign:"center",fontWeight:500,height:30,[l.breakpoints.down("xs")]:{height:16,fontSize:16,pt:1,pb:1,px:1},[l.breakpoints.up("xs")]:{fontSize:28,px:1},fontSize:32,py:1.75,borderRadius:1,borderStyle:"solid",borderWidth:1,...B},...!t.disabled&&{"&:hover input":{...F}},...P&&{"& input, &:hover input":{...M}}}},y=L(()=>({inputProps:{inputMode:"numeric",pattern:"[0-9]*",autoCorrect:"off",autoCapitalize:"off"}}),[]),S=m(e=>{var n;const r=e.target.value.replace(/[^0-9]/g,"");if(r.length===6&&/^\d{6}$/.test(r)){const p=r.split("");c.current&&(c.current.value=r),(n=t.onChange)==null||n.call(t,{target:{value:r}}),o.current.forEach(v=>v?.blur()),h(p);return}const u=e.currentTarget.ownerDocument,a=o.current.findIndex(p=>p===u.activeElement),i=r.charAt(r.length-1);!i||!/^[0-9]$/.test(i)||h(p=>{var v,D;const d=[...p];if(a!==-1)d[a]=i;else{const s=d.findIndex(W=>!W);s!==-1?d[s]=i:d.length<6&&d.push(i)}const C=d.join("");if(c.current&&(c.current.value=C),C.length===6)o.current.forEach(s=>s?.blur()),(v=t.onChange)==null||v.call(t,{target:{value:C}});else{const s=a!==-1?a+1:0;s<6&&((D=o.current[s])==null||D.focus())}return d})},[t]),E=m(e=>{e.key==="Backspace"&&h(n=>{var r;const u=[...n.slice(0,-1)];c.current&&(c.current.value=u.join(""));const a=u.length;return a>=0&&a<6&&((r=o.current[a])==null||r.focus()),u})},[]),I=m(e=>{var n,r;const u=e.currentTarget.ownerDocument,a=o.current.findIndex(p=>p===u.activeElement);if(a===-1)return;let i=a;switch(e.key){case"ArrowLeft":i=Math.max(0,a-1);break;case"ArrowRight":i=Math.min(5,a+1);break;default:return}i!==a&&(e.preventDefault(),(n=o.current[i])==null||n.focus(),(r=o.current[i])==null||r.select())},[]),T=m(()=>{k(!0)},[]),j=m(()=>{x.current&&clearTimeout(x.current),x.current=setTimeout(()=>{var e;const n=(e=o.current[0])==null?void 0:e.ownerDocument;o.current.some(r=>r&&r===n?.activeElement)||k(!1)},0)},[]),z=m(e=>new Array(3).fill(void 0).map((n,r)=>g(U,{children:g(G,{inputRef:u=>o.current[r+e]=u,id:w.current[r+e],name:`otp-input-${r+e}`,autoComplete:r+e===0?t.autoComplete??"one-time-code":void 0,autoFocus:r+e===0,value:f[r+e]||"",disabled:t.disabled,onChange:S,onKeyUp:E,onKeyDown:I,onFocus:T,onBlur:j,tabIndex:r+e+1,...y,"data-testid":`otp-input-${r+e}`,inputProps:{...y.inputProps,"aria-required":"true","aria-invalid":t.error?"true":"false","aria-label":`Digit ${r+e+1} of 6`}})},w.current[r+e])),[S,T,E,I,j,f,y,t.autoComplete,t.disabled]);return $(J,{width:"100%",sx:t.sx,children:[g("div",{style:{display:"none!important",pointerEvents:"none"},children:g(N,{inputRef:c,name:t.name,type:"text",value:f.join("")||"",sx:{pointerEvents:"none",display:"none"},inputProps:{hidden:!0}})}),$(Q,{"data-testid":"otp-input-container",...K,children:[z(0),g(V,{sx:{fontWeight:"700",fontSize:32},children:"-"}),z(3)]})]})}const _=q(Y);export{_ as OTPInput};
+"use strict";import{forwardRef as q,useRef as b,useState as F,useImperativeHandle as H,useMemo as L,useCallback as m}from"react";import{useTheme as O,FormControl as U,InputBase as G,Box as J,TextField as N,Stack as Q,Typography as V}from"@mui/material";import{v4 as X}from"uuid";import{jsx as g,jsxs as R}from"react/jsx-runtime";function Y(t,$){const i=O(),C=b(Array.from({length:6},()=>X())),[f,h]=F([]),c=b(null),a=b([]),x=b(null),[z,k]=F(!1);H($,()=>({get value(){return f.join("")},set value(e){var n;h(e.split("")),(n=t.onChange)==null||n.call(t,{target:{value:e}})},focus(){var e,n;(e=a.current[0])==null||e.click(),(n=a.current[0])==null||n.focus()},blur(){a.current.forEach(e=>e?.blur())},clear(){h([])}}),[t,f]);const P={borderColor:t.error?i.palette.error.main:i.palette.action.disabled},B={borderColor:t.error?i.palette.error.main:i.palette.text.primary},M={borderColor:t.error?i.palette.error.main:i.palette.primary.main,boxShadow:`inset 0 0 0 1px ${t.error?i.palette.error.main:i.palette.primary.main}`},K={boxSizing:"content-box",direction:"row",alignItems:"center",spacing:1.25,sx:{"& input":{textAlign:"center",fontWeight:500,height:30,[i.breakpoints.down("xs")]:{height:16,fontSize:16,pt:1,pb:1,px:1},[i.breakpoints.up("xs")]:{fontSize:28,px:1},fontSize:32,py:1.75,borderRadius:1,borderStyle:"solid",borderWidth:1,...P},...!t.disabled&&{"&:hover input":{...B}},...z&&{"& input, &:hover input":{...M}}}},y=L(()=>({inputProps:{inputMode:"numeric",pattern:"[0-9]*",autoCorrect:"off",autoCapitalize:"off",...t.disableAutoFillApps&&{"data-op-ignore":!0,"data-lpignore":!0,"data-form-type":"other","data-bwignore":!0,"data-protonpass-ignore":!0}}}),[t.disableAutoFillApps]),A=m(e=>{var n;const r=e.target.value.replace(/[^0-9]/g,"");if(r.length===6&&/^\d{6}$/.test(r)){const p=r.split("");c.current&&(c.current.value=r),(n=t.onChange)==null||n.call(t,{target:{value:r}}),a.current.forEach(v=>v?.blur()),h(p);return}const u=e.currentTarget.ownerDocument,o=a.current.findIndex(p=>p===u.activeElement),l=r.charAt(r.length-1);!l||!/^[0-9]$/.test(l)||h(p=>{var v,D;const d=[...p];if(o!==-1)d[o]=l;else{const s=d.findIndex(W=>!W);s!==-1?d[s]=l:d.length<6&&d.push(l)}const w=d.join("");if(c.current&&(c.current.value=w),w.length===6)a.current.forEach(s=>s?.blur()),(v=t.onChange)==null||v.call(t,{target:{value:w}});else{const s=o!==-1?o+1:0;s<6&&((D=a.current[s])==null||D.focus())}return d})},[t]),S=m(e=>{e.key==="Backspace"&&h(n=>{var r;const u=[...n.slice(0,-1)];c.current&&(c.current.value=u.join(""));const o=u.length;return o>=0&&o<6&&((r=a.current[o])==null||r.focus()),u})},[]),E=m(e=>{var n,r;const u=e.currentTarget.ownerDocument,o=a.current.findIndex(p=>p===u.activeElement);if(o===-1)return;let l=o;switch(e.key){case"ArrowLeft":l=Math.max(0,o-1);break;case"ArrowRight":l=Math.min(5,o+1);break;default:return}l!==o&&(e.preventDefault(),(n=a.current[l])==null||n.focus(),(r=a.current[l])==null||r.select())},[]),I=m(()=>{k(!0)},[]),T=m(()=>{x.current&&clearTimeout(x.current),x.current=setTimeout(()=>{var e;const n=(e=a.current[0])==null?void 0:e.ownerDocument;a.current.some(r=>r&&r===n?.activeElement)||k(!1)},0)},[]),j=m(e=>new Array(3).fill(void 0).map((n,r)=>g(U,{children:g(G,{inputRef:u=>a.current[r+e]=u,id:C.current[r+e],name:`otp-input-${r+e}`,autoComplete:r+e===0?t.autoComplete??"one-time-code":void 0,autoFocus:r+e===0,value:f[r+e]||"",disabled:t.disabled,onChange:A,onKeyUp:S,onKeyDown:E,onFocus:I,onBlur:T,tabIndex:r+e+1,...y,"data-testid":`otp-input-${r+e}`,inputProps:{...y.inputProps,"aria-required":"true","aria-invalid":t.error?"true":"false","aria-label":`Digit ${r+e+1} of 6`}})},C.current[r+e])),[A,I,S,E,T,f,y,t.autoComplete,t.disabled]);return R(J,{width:"100%",sx:t.sx,children:[g("div",{style:{display:"none!important",pointerEvents:"none"},children:g(N,{inputRef:c,name:t.name,type:"text",value:f.join("")||"",sx:{pointerEvents:"none",display:"none"},inputProps:{hidden:!0}})}),R(Q,{"data-testid":"otp-input-container",...K,children:[j(0),g(V,{sx:{fontWeight:"700",fontSize:32},children:"-"}),j(3)]})]})}const _=q(Y);export{_ as OTPInput};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verifiedinc-public/shared-ui-elements",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "description": "A set of UI components, utilities that is shareable with the core apps.",
   "private": false,
   "sideEffects": false,