@verifiedinc-public/shared-ui-elements 9.13.1-beta.1 → 9.15.0

package/dist/components/form/{MemberIdInput.d.ts → MemberIdInput/index.d.ts}

@@ -14,7 +14,7 @@ export type MemberIdInputProps = Omit<TextFieldProps, 'onChange'> & {
     placeholder?: string;
 };
 /**
- * Masked input for member IDs. Displays the middle characters as bullets.
+ * Masked input for member IDs. show last 4 via buildDisplayValue.
  * - Pre-filled / redacted values: any keystroke starts fresh; backspace clears.
  * - User-typed values: normal editing; backspace always clears the whole field.
  */

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

@@ -0,0 +1 @@
+"use strict";import{useRef as y,useState as z}from"react";import{Box as A,TextField as C,InputAdornment as j,IconButton as w}from"@mui/material";import{VisibilityOff as F,Visibility as M}from"@mui/icons-material";import{buildDisplayValue as b}from"./utils.mjs";import{jsx as s,jsxs as P,Fragment as T}from"react/jsx-runtime";function V(o){return o.includes("*")||o.includes("\u2022")}function R({onChange:o,label:k="Member ID",value:v,placeholder:I="",InputProps:d,...D}){const g=y(null),m=y(0),[c,x]=z(!1),t=v??"",f=V(t),S=!f&&t.length>0,h=!f&&(t===""||g.current===t),B=c?t:b(t);function a(e){g.current=e,o?.({target:{value:e}})}return s(A,{width:"100%",children:s(C,{...D,label:k,value:B,placeholder:I,onChange:e=>{if(c){a(e.target.value.replace(/[•*]/g,""));return}const n=e.target.value,l=g.current??"",u=b(l),r=m.current;if(!h){a(n.replace(/[•*]/g,""));return}let p;if(n.length>u.length){const i=n.slice(r,r+(n.length-u.length));p=l.slice(0,r)+i.replace(/[•*]/g,"")+l.slice(r)}else if(n.length<u.length){const i=e.target.selectionStart??0,K=u.length-n.length;p=l.slice(0,i)+l.slice(i+K)}else{const i=(n[r]??"").replace(/[•*]/g,"");p=l.slice(0,r)+i+l.slice(r+1)}a(p)},inputProps:{onKeyDown:e=>{if(m.current=e.currentTarget.selectionStart??0,c){(e.key==="Backspace"||e.key==="Delete")&&(e.preventDefault(),t!==""&&a(""));return}if(e.key==="Backspace"||e.key==="Delete"){e.preventDefault(),t!==""&&a("");return}h||e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),e.key!=="*"&&e.key!=="\u2022"&&a(e.key))}},InputProps:{...d,endAdornment:P(T,{children:[S&&s(j,{position:"end",children:s(w,{"aria-label":c?"hide member id":"show member id",edge:"end",size:"small",onClick:()=>x(e=>!e),tabIndex:-1,children:c?s(F,{fontSize:"small"}):s(M,{fontSize:"small"})})}),d?.endAdornment]})},fullWidth:!0})})}export{R as MemberIdInput};

package/dist/components/form/MemberIdInput/utils.d.ts

@@ -0,0 +1 @@
+export declare function buildDisplayValue(value: string): string;

package/dist/components/form/MemberIdInput/utils.mjs

@@ -0,0 +1 @@
+"use strict";function s(n){const e=n.replace(/\*/g,"\u2022");if(e.includes("\u2022")){const r=e.lastIndexOf("\u2022"),l=e.slice(r+1);return"\u2022".repeat(e.length-l.length)+l}const t=e.length;return t<=4?e:"\u2022".repeat(t-4)+e.slice(-4)}export{s as buildDisplayValue};

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

@@ -1 +1 @@
-"use strict";import{useState as v,useRef as x,useCallback as C,createElement as D}from"react";import{Stack as M,Autocomplete as A,TextField as H,Box as O,Avatar as S,Typography as T,InputAdornment as U,IconButton as z}from"@mui/material";import{Close as w}from"@mui/icons-material";import{useQuery as E}from"@tanstack/react-query";import{useDebounceValue as q}from"../../../../../../../hooks/useDebounceValue.mjs";import{MemberIdInput as V}from"../../../../../MemberIdInput.mjs";import{useFormField as j}from"../../../core/field.hook.mjs";import{useOneClickForm as B}from"../../form.context.mjs";import{jsxs as y,jsx as i,Fragment as K}from"react/jsx-runtime";const g=20;function R(m){const{options:a}=B(),s=q(m,300),[p,h]=v([]),[d,f]=v(!0),[t,u]=v(!1),c=x(0),{isLoading:I}=E({queryKey:["insurance-providers",s],queryFn:async({signal:n})=>{var o,l;const e=await((l=(o=a.servicePaths).oneClickHealthProviderPayers)==null?void 0:l.call(o,{search:s||void 0,limit:g,skip:0},n))??[];return c.current=e.length,h(e),f(e.length>=g),e},refetchOnMount:!0,enabled:!!a.servicePaths.oneClickHealthProviderPayers}),b=C(async()=>{var n,o;if(!(t||!d)){u(!0);try{const l=await((o=(n=a.servicePaths).oneClickHealthProviderPayers)==null?void 0:o.call(n,{search:s||void 0,limit:g,skip:c.current}))??[];h(e=>[...e,...l]),c.current+=l.length,f(l.length>=g)}finally{u(!1)}}},[t,d,s,a.servicePaths]);return{providers:p,isLoading:I,isLoadingMore:t,hasMore:d,loadMore:b}}function F({children:m}){return y(K,{children:[m," ",i(T,{"data-asterisk":!0,component:"span",color:"error",variant:"subtitle2",sx:{fontSize:"inherit"},children:"\u273D"})]})}function W({fieldKey:m}){const{field:a,setValue:s}=j({key:m}),[p,h]=v(""),{providers:d,isLoading:f,isLoadingMore:t,hasMore:u,loadMore:c}=R(p),I=x(null),b=C(e=>{const r=e.currentTarget;r.scrollTop+r.clientHeight>=r.scrollHeight-50&&u&&!t&&c()},[u,t,c]);if(!a)return null;const n=a.value;if(!n)return null;const o=e=>{s({...n,...e})},l=d.find(e=>e.verifiedId===n.payer.verifiedId)??n.payer;return y(M,{spacing:2,children:[i(A,{fullWidth:!0,disabled:a.isDisabled,options:d,loading:f||t,filterOptions:e=>e,value:l.verifiedId?l:null,inputValue:p,onInputChange:(e,r)=>{h(r)},onChange:(e,r)=>{o(r?{payer:{name:r.name,logoUrl:r.logoUrl,verifiedId:r.verifiedId},memberId:""}:{payer:{name:"",logoUrl:void 0,verifiedId:""},memberId:""})},isOptionEqualToValue:(e,r)=>!!e&&!!r&&e.verifiedId===r.verifiedId,getOptionLabel:e=>e.name,ListboxProps:{ref:I,onScroll:b},renderOption:(e,r)=>{var P,k;return D(O,{component:"li",...e,key:r.verifiedId},y(M,{direction:"row",spacing:1.5,alignItems:"center",children:[i(S,{src:r.logoUrl??void 0,alt:(P=r.name[0])==null?void 0:P.toUpperCase(),sx:{width:32,height:32,bgcolor:"primary.main"},slotProps:{img:{onError:L=>{L.currentTarget.style.display="none"}}},children:(k=r.name[0])==null?void 0:k.toUpperCase()}),i(T,{sx:{textAlign:"left"},children:r.name})]}))},renderInput:e=>i(H,{...e,label:i(F,{children:"Insurer"}),helperText:"The company that provides your health insurance",placeholder:"Search...",size:"small",InputLabelProps:{shrink:!0},InputProps:{...e.InputProps,"data-mask-me":!0,endAdornment:e.InputProps.endAdornment}})}),i(V,{fullWidth:!0,label:i(F,{children:"Member ID"}),placeholder:"Enter member ID",size:"small",disabled:a.isDisabled,value:n.memberId,onChange:e=>o({memberId:e.target.value}),helperText:"From your health insurance ID card",InputProps:{"data-mask-me":!0,endAdornment:n.memberId?i(U,{position:"end",children:i(z,{tabIndex:-1,"aria-label":"clear member id",edge:"end",size:"small",disabled:a.isDisabled,onClick:()=>o({memberId:""}),children:i(w,{fontSize:"small"})})}):null}})]})}export{W as HealthInsuranceInputField};
+"use strict";import{useState as v,useRef as x,useCallback as C,createElement as D}from"react";import{Stack as M,Autocomplete as A,TextField as H,Box as O,Avatar as S,Typography as T,InputAdornment as U,IconButton as z}from"@mui/material";import{Close as w}from"@mui/icons-material";import{useQuery as E}from"@tanstack/react-query";import{useDebounceValue as q}from"../../../../../../../hooks/useDebounceValue.mjs";import{MemberIdInput as V}from"../../../../../MemberIdInput/index.mjs";import{useFormField as j}from"../../../core/field.hook.mjs";import{useOneClickForm as B}from"../../form.context.mjs";import{jsxs as y,jsx as i,Fragment as K}from"react/jsx-runtime";const g=20;function R(m){const{options:a}=B(),s=q(m,300),[p,h]=v([]),[d,f]=v(!0),[t,u]=v(!1),c=x(0),{isLoading:I}=E({queryKey:["insurance-providers",s],queryFn:async({signal:n})=>{var o,l;const e=await((l=(o=a.servicePaths).oneClickHealthProviderPayers)==null?void 0:l.call(o,{search:s||void 0,limit:g,skip:0},n))??[];return c.current=e.length,h(e),f(e.length>=g),e},refetchOnMount:!0,enabled:!!a.servicePaths.oneClickHealthProviderPayers}),b=C(async()=>{var n,o;if(!(t||!d)){u(!0);try{const l=await((o=(n=a.servicePaths).oneClickHealthProviderPayers)==null?void 0:o.call(n,{search:s||void 0,limit:g,skip:c.current}))??[];h(e=>[...e,...l]),c.current+=l.length,f(l.length>=g)}finally{u(!1)}}},[t,d,s,a.servicePaths]);return{providers:p,isLoading:I,isLoadingMore:t,hasMore:d,loadMore:b}}function F({children:m}){return y(K,{children:[m," ",i(T,{"data-asterisk":!0,component:"span",color:"error",variant:"subtitle2",sx:{fontSize:"inherit"},children:"\u273D"})]})}function W({fieldKey:m}){const{field:a,setValue:s}=j({key:m}),[p,h]=v(""),{providers:d,isLoading:f,isLoadingMore:t,hasMore:u,loadMore:c}=R(p),I=x(null),b=C(e=>{const r=e.currentTarget;r.scrollTop+r.clientHeight>=r.scrollHeight-50&&u&&!t&&c()},[u,t,c]);if(!a)return null;const n=a.value;if(!n)return null;const o=e=>{s({...n,...e})},l=d.find(e=>e.verifiedId===n.payer.verifiedId)??n.payer;return y(M,{spacing:2,children:[i(A,{fullWidth:!0,disabled:a.isDisabled,options:d,loading:f||t,filterOptions:e=>e,value:l.verifiedId?l:null,inputValue:p,onInputChange:(e,r)=>{h(r)},onChange:(e,r)=>{o(r?{payer:{name:r.name,logoUrl:r.logoUrl,verifiedId:r.verifiedId},memberId:""}:{payer:{name:"",logoUrl:void 0,verifiedId:""},memberId:""})},isOptionEqualToValue:(e,r)=>!!e&&!!r&&e.verifiedId===r.verifiedId,getOptionLabel:e=>e.name,ListboxProps:{ref:I,onScroll:b},renderOption:(e,r)=>{var P,k;return D(O,{component:"li",...e,key:r.verifiedId},y(M,{direction:"row",spacing:1.5,alignItems:"center",children:[i(S,{src:r.logoUrl??void 0,alt:(P=r.name[0])==null?void 0:P.toUpperCase(),sx:{width:32,height:32,bgcolor:"primary.main"},slotProps:{img:{onError:L=>{L.currentTarget.style.display="none"}}},children:(k=r.name[0])==null?void 0:k.toUpperCase()}),i(T,{sx:{textAlign:"left"},children:r.name})]}))},renderInput:e=>i(H,{...e,label:i(F,{children:"Insurer"}),helperText:"The company that provides your health insurance",placeholder:"Search...",size:"small",InputLabelProps:{shrink:!0},InputProps:{...e.InputProps,"data-mask-me":!0,endAdornment:e.InputProps.endAdornment}})}),i(V,{fullWidth:!0,label:i(F,{children:"Member ID"}),placeholder:"Enter member ID",size:"small",disabled:a.isDisabled,value:n.memberId,onChange:e=>o({memberId:e.target.value}),helperText:"From your health insurance ID card",InputProps:{"data-mask-me":!0,endAdornment:n.memberId?i(U,{position:"end",children:i(z,{tabIndex:-1,"aria-label":"clear member id",edge:"end",size:"small",disabled:a.isDisabled,onClick:()=>o({memberId:""}),children:i(w,{fontSize:"small"})})}):null}})]})}export{W as HealthInsuranceInputField};

package/package.json

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

package/dist/components/form/MemberIdInput.mjs

@@ -1 +0,0 @@
-"use strict";import{useRef as v,useState as w}from"react";import{Box as z,TextField as A,InputAdornment as j,IconButton as C}from"@mui/material";import{VisibilityOff as F,Visibility as M}from"@mui/icons-material";import{jsx as u,jsxs as P,Fragment as T}from"react/jsx-runtime";function O(l){return l.includes("*")||l.includes("\u2022")}function k(l){const t=l.replace(/\*/g,"\u2022");if(t.includes("\u2022"))return t;const a=t.length;return a<=2?t:a<5?"\u2022".repeat(a-2)+t.slice(-2):t.slice(0,2)+"\u2022".repeat(a-4)+t.slice(-2)}function R({onChange:l,label:t="Member ID",value:a,placeholder:I="",InputProps:g,...D}){const h=v(null),m=v(0),[p,x]=w(!1),n=a??"",y=O(n),S=!y&&n.length>0,b=!y&&(n===""||h.current===n),B=p?n:k(n);function c(e){h.current=e,l?.({target:{value:e}})}return u(z,{width:"100%",children:u(A,{...D,label:t,value:B,placeholder:I,onChange:e=>{if(p){c(e.target.value);return}const r=e.target.value,i=h.current??"",f=k(i),s=m.current;if(!b){c(r.replace(/•/g,""));return}let d;if(r.length>f.length){const o=r.slice(s,s+(r.length-f.length));d=i.slice(0,s)+o.replace(/•/g,"")+i.slice(s)}else if(r.length<f.length){const o=e.target.selectionStart??0,K=f.length-r.length;d=i.slice(0,o)+i.slice(o+K)}else{const o=r[s]??"";d=i.slice(0,s)+o+i.slice(s+1)}c(d)},inputProps:{onKeyDown:e=>{if(m.current=e.currentTarget.selectionStart??0,p){(e.key==="Backspace"||e.key==="Delete")&&(e.preventDefault(),n!==""&&c(""));return}if(e.key==="Backspace"||e.key==="Delete"){e.preventDefault(),n!==""&&c("");return}b||e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),c(e.key))}},InputProps:{...g,endAdornment:P(T,{children:[S&&u(j,{position:"end",children:u(C,{"aria-label":p?"hide member id":"show member id",edge:"end",size:"small",onClick:()=>x(e=>!e),tabIndex:-1,children:p?u(F,{fontSize:"small"}):u(M,{fontSize:"small"})})}),g?.endAdornment]})},fullWidth:!0})})}export{R as MemberIdInput};