feat: adds support for setValueRef

package.json

@@ -30,7 +30,7 @@
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@basis-theory/basis-theory-js": "^4.1.0"
+    "@basis-theory/basis-theory-js": "^4.2.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",

src/elements/CardExpirationDateElement.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ForwardedRef, useRef } from 'react';
+import React, { FC, ForwardedRef, RefObject, useRef } from 'react';
 import type {
   CardExpirationDateElement as ICardExpirationDateElement,
   CreateCardExpirationDateElementOptions,
@@ -13,48 +13,50 @@ import { useElement } from './useElement';
 import { useListener } from './useListener';
 
 interface CardExpirationDateElementProps {
-  id: string;
+  'aria-label'?: string;
+  autoComplete?: 'on' | 'off';
   bt?: BasisTheoryReact;
-  style?: ElementStyle;
   disabled?: boolean;
-  readOnly?: boolean;
+  enableCopy?: boolean;
+  id: string;
   inputMode?: `${InputMode}`;
-  autoComplete?: 'on' | 'off';
-  'aria-label'?: string;
-  placeholder?: string;
-  value?: CardExpirationDateValue<'static'> | string;
+  onBlur?: ElementEventListener<CardExpirationDateElementEvents, 'blur'>;
   onChange?: ElementEventListener<CardExpirationDateElementEvents, 'change'>;
   onFocus?: ElementEventListener<CardExpirationDateElementEvents, 'focus'>;
-  onBlur?: ElementEventListener<CardExpirationDateElementEvents, 'blur'>;
-  onReady?: ElementEventListener<CardExpirationDateElementEvents, 'ready'>;
   onKeyDown?: ElementEventListener<CardExpirationDateElementEvents, 'keydown'>;
+  onReady?: ElementEventListener<CardExpirationDateElementEvents, 'ready'>;
+  placeholder?: string;
+  readOnly?: boolean;
+  style?: ElementStyle;
   validateOnChange?: boolean;
-  enableCopy?: boolean;
+  value?: CardExpirationDateValue<'static'> | string;
+  valueRef?: RefObject<ICardExpirationDateElement>;
 }
 
 const CardExpirationDateElementC: FC<
   CardExpirationDateElementProps & {
     elementRef?: ForwardedRef<ICardExpirationDateElement>;
   }
 > = ({
-  id,
+  'aria-label': ariaLabel,
+  autoComplete,
   bt,
-  style,
   disabled,
-  readOnly,
-  autoComplete,
-  'aria-label': ariaLabel,
+  elementRef,
+  enableCopy,
+  id,
   inputMode,
-  placeholder,
-  value,
-  onReady,
+  onBlur,
   onChange,
   onFocus,
-  onBlur,
   onKeyDown,
-  elementRef,
+  onReady,
+  placeholder,
+  readOnly,
+  style,
   validateOnChange,
-  enableCopy,
+  value,
+  valueRef,
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const element = useElement<
@@ -65,22 +67,26 @@ const CardExpirationDateElementC: FC<
     'cardExpirationDate',
     wrapperRef,
     {
-      targetId: id,
-      enableCopy,
-      style,
+      'aria-label': ariaLabel,
+      autoComplete,
       disabled,
-      readOnly,
+      enableCopy,
       inputMode,
-      autoComplete,
-      'aria-label': ariaLabel,
       placeholder,
-      value,
+      readOnly,
+      style,
+      targetId: id,
       validateOnChange,
+      value,
     },
     bt,
     elementRef
   );
 
+  if (valueRef?.current) {
+    element?.setValueRef(valueRef.current);
+  }
+
   useListener('ready', element, onReady);
   useListener('change', element, onChange);
   useListener('focus', element, onFocus);

src/elements/CardNumberElement.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useRef, ForwardedRef } from 'react';
+import React, { FC, useRef, ForwardedRef, RefObject } from 'react';
 import type {
   CardNumberElement as ICardNumberElement,
   CreateCardNumberElementOptions,
@@ -34,6 +34,7 @@ interface CardNumberElementProps {
   style?: ElementStyle;
   validateOnChange?: boolean;
   value?: string;
+  valueRef?: RefObject<ICardNumberElement>;
 }
 
 const CardNumberElementC: FC<
@@ -60,6 +61,7 @@ const CardNumberElementC: FC<
   style,
   validateOnChange,
   value,
+  valueRef,
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const element = useElement<
@@ -89,6 +91,10 @@ const CardNumberElementC: FC<
     elementRef
   );
 
+  if (valueRef?.current) {
+    element?.setValueRef(valueRef.current);
+  }
+
   useListener('ready', element, onReady);
   useListener('change', element, onChange);
   useListener('focus', element, onFocus);

src/elements/CardVerificationCodeElement.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useRef, ForwardedRef } from 'react';
+import React, { FC, useRef, ForwardedRef, RefObject } from 'react';
 import type {
   CardVerificationCodeElement as ICardVerificationCodeElement,
   CreateCardVerificationCodeElementOptions,
@@ -13,53 +13,55 @@ import { useElement } from './useElement';
 import { useListener } from './useListener';
 
 interface CardVerificationCodeElementProps {
-  id: string;
-  bt?: BasisTheoryReact;
-  style?: ElementStyle;
-  disabled?: boolean;
-  readOnly?: boolean;
-  autoComplete?: 'on' | 'off';
   'aria-label'?: string;
-  placeholder?: string;
+  autoComplete?: 'on' | 'off';
+  bt?: BasisTheoryReact;
   cardBrand?: Brand | string;
+  disabled?: boolean;
+  enableCopy?: boolean;
+  id: string;
   inputMode?: `${InputMode}`;
-  value?: string;
+  onBlur?: ElementEventListener<CardVerificationCodeElementEvents, 'blur'>;
   onChange?: ElementEventListener<CardVerificationCodeElementEvents, 'change'>;
   onFocus?: ElementEventListener<CardVerificationCodeElementEvents, 'focus'>;
-  onBlur?: ElementEventListener<CardVerificationCodeElementEvents, 'blur'>;
-  onReady?: ElementEventListener<CardVerificationCodeElementEvents, 'ready'>;
   onKeyDown?: ElementEventListener<
     CardVerificationCodeElementEvents,
     'keydown'
   >;
+  onReady?: ElementEventListener<CardVerificationCodeElementEvents, 'ready'>;
+  placeholder?: string;
+  readOnly?: boolean;
+  style?: ElementStyle;
   validateOnChange?: boolean;
-  enableCopy?: boolean;
+  value?: string;
+  valueRef?: RefObject<ICardVerificationCodeElement>;
 }
 
 const CardVerificationCodeElementC: FC<
   CardVerificationCodeElementProps & {
     elementRef?: ForwardedRef<ICardVerificationCodeElement>;
   }
 > = ({
-  id,
+  'aria-label': ariaLabel,
+  autoComplete,
   bt,
-  style,
+  cardBrand,
   disabled,
-  readOnly,
-  autoComplete,
-  'aria-label': ariaLabel,
+  elementRef,
+  enableCopy,
+  id,
   inputMode,
-  placeholder,
-  cardBrand,
-  value,
-  onReady,
+  onBlur,
   onChange,
   onFocus,
-  onBlur,
   onKeyDown,
-  elementRef,
+  onReady,
+  placeholder,
+  readOnly,
+  style,
   validateOnChange,
-  enableCopy,
+  value,
+  valueRef,
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const element = useElement<
@@ -70,23 +72,27 @@ const CardVerificationCodeElementC: FC<
     'cardVerificationCode',
     wrapperRef,
     {
-      targetId: id,
-      style,
-      disabled,
-      readOnly,
+      'aria-label': ariaLabel,
       autoComplete,
+      cardBrand,
+      disabled,
+      enableCopy,
       inputMode,
-      'aria-label': ariaLabel,
       placeholder,
-      cardBrand,
-      value,
+      readOnly,
+      style,
+      targetId: id,
       validateOnChange,
-      enableCopy,
+      value,
     },
     bt,
     elementRef
   );
 
+  if (valueRef?.current) {
+    element?.setValueRef(valueRef.current);
+  }
+
   useListener('ready', element, onReady);
   useListener('change', element, onChange);
   useListener('focus', element, onFocus);

src/elements/TextElement.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useRef, ForwardedRef } from 'react';
+import React, { FC, useRef, ForwardedRef, RefObject } from 'react';
 import type {
   TextElement as ITextElement,
   CreateTextElementOptions,
@@ -12,23 +12,24 @@ import { useElement } from './useElement';
 import { useListener } from './useListener';
 
 interface BaseTextElementProps {
-  id: string;
+  'aria-label'?: string;
+  autoComplete?: 'on' | 'off';
   bt?: BasisTheoryReact;
-  style?: ElementStyle;
   disabled?: boolean;
-  readOnly?: boolean;
+  id: string;
   inputMode?: `${InputMode}`;
-  autoComplete?: 'on' | 'off';
-  'aria-label'?: string;
-  placeholder?: string;
-  transform?: RegExp | [RegExp, string?];
-  value?: string;
-  validation?: RegExp;
+  onBlur?: ElementEventListener<TextElementEvents, 'blur'>;
   onChange?: ElementEventListener<TextElementEvents, 'change'>;
   onFocus?: ElementEventListener<TextElementEvents, 'focus'>;
-  onBlur?: ElementEventListener<TextElementEvents, 'blur'>;
-  onReady?: ElementEventListener<TextElementEvents, 'ready'>;
   onKeyDown?: ElementEventListener<TextElementEvents, 'keydown'>;
+  onReady?: ElementEventListener<TextElementEvents, 'ready'>;
+  placeholder?: string;
+  readOnly?: boolean;
+  style?: ElementStyle;
+  transform?: RegExp | [RegExp, string?];
+  validation?: RegExp;
+  value?: string;
+  valueRef?: RefObject<ITextElement>;
 }
 
 interface MaskedTextElementProps extends BaseTextElementProps {
@@ -46,51 +47,56 @@ type TextElementProps = MaskedTextElementProps | PasswordTextElementProps;
 const TextElementC: FC<
   TextElementProps & { elementRef?: ForwardedRef<ITextElement> }
 > = ({
-  id,
+  'aria-label': ariaLabel,
+  autoComplete,
   bt,
-  style,
   disabled,
-  readOnly,
+  elementRef,
+  id,
   inputMode,
-  autoComplete,
-  'aria-label': ariaLabel,
-  placeholder,
-  transform,
   mask,
-  password,
-  value,
-  validation,
-  onReady,
+  onBlur,
   onChange,
   onFocus,
-  onBlur,
   onKeyDown,
-  elementRef,
+  onReady,
+  password,
+  placeholder,
+  readOnly,
+  style,
+  transform,
+  validation,
+  value,
+  valueRef,
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const element = useElement<ITextElement, CreateTextElementOptions>(
     id,
     'text',
     wrapperRef,
     {
-      targetId: id,
-      style,
+      'aria-label': ariaLabel,
+      autoComplete,
       disabled,
-      readOnly,
       inputMode,
-      autoComplete,
-      'aria-label': ariaLabel,
       mask,
       password,
       placeholder,
+      readOnly,
+      style,
+      targetId: id,
       transform,
-      value,
       validation,
+      value,
     },
     bt,
     elementRef
   );
 
+  if (valueRef?.current) {
+    element?.setValueRef(valueRef.current);
+  }
+
   useListener('ready', element, onReady);
   useListener('change', element, onChange);
   useListener('focus', element, onFocus);