@basis-theory/react-elements 1.24.2 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basis-theory/react-elements",
-  "version": "1.24.2",
+  "version": "2.1.0",
   "repository": "https://github.com/basis-theory/react-elements",
   "license": "Apache-2.0",
   "author": {
@@ -30,7 +30,7 @@
     "tag": "latest"
   },
   "dependencies": {
-    "@basis-theory/web-elements": "1.24.2"
+    "@basis-theory/web-elements": "2.1.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

package/types/index.d.ts

@@ -40,9 +40,55 @@ export interface HttpClient {
     get(url: string, config?: RequestConfig): Promise<unknown>;
     delete(url: string, config?: RequestConfig): Promise<unknown>;
 }
+interface NetworkInformation {
+    downlink: number;
+    downlinkMax?: number;
+    effectiveType: 'slow-2g' | '2g' | '3g' | '4g';
+    rtt: number;
+    saveData: boolean;
+    type?: 'bluetooth' | 'cellular' | 'ethernet' | 'none' | 'wifi' | 'wimax' | 'other' | 'unknown';
+}
+type DeviceInfo = {
+    uaBrands?: Array<{
+        brand: string;
+        version: string;
+    }>;
+    uaMobile?: boolean;
+    uaPlatform?: string;
+    uaPlatformVersion?: string;
+    languages?: string[];
+    timeZone?: string;
+    cookiesEnabled?: boolean;
+    localStorageEnabled?: boolean;
+    sessionStorageEnabled?: boolean;
+    platform?: string;
+    hardwareConcurrency?: number;
+    deviceMemoryGb?: number | null;
+    screenWidth?: number;
+    screenHeight?: number;
+    screenAvailWidth?: number;
+    screenAvailHeight?: number;
+    innerWidth?: number;
+    innerHeight?: number;
+    devicePixelRatio?: number;
+    maxTouchPoints?: number;
+    plugins?: string[];
+    mimeTypes?: string[];
+    webdriver?: boolean;
+    suspectedHeadless?: boolean;
+    webglVendor?: string;
+    webglRenderer?: string;
+    canvasHash?: string;
+    network?: NetworkInformation;
+};
+interface Device {
+    getDeviceInfo(options?: {
+        includeCanvasHash?: boolean;
+    }): DeviceInfo;
+}
 export const CARD_BRANDS: readonly ["accel", "bancontact", "cartes-bancaires", "culiance", "dankort", "ebt", "eftpos-australia", "nyce", "private-label", "prop", "pulse", "rupay", "star", "uatp", "korean-local", "visa", "mastercard", "american-express", "discover", "diners-club", "jcb", "unionpay", "maestro", "elo", "hiper", "hipercard", "mir", "unknown"];
-declare const CARD_ICON_POSITIONS: readonly ["left", "right", "none"];
-declare const AUTOCOMPLETE_VALUES: readonly ["additional-name", "address-level1", "address-level2", "address-level3", "address-level4", "address-line1", "address-line2", "address-line3", "bday-day", "bday-month", "bday-year", "bday", "billing", "cc-additional-name", "cc-csc", "cc-exp-month", "cc-exp-year", "cc-exp", "cc-family-name", "cc-given-name", "cc-name", "cc-number", "cc-type", "country-name", "country", "current-password", "email", "family-name", "fax", "given-name", "home", "honorific-prefix", "honorific-suffix", "language", "mobile", "name", "new-password", "nickname", "off", "on", "one-time-code", "organization-title", "organization", "page", "postal-code", "sex", "shipping", "street-address", "tel-area-code", "tel-country-code", "tel-extension", "tel-local-prefix", "tel-local-suffix", "tel-local", "tel-national", "tel", "transaction-amount", "transaction-currency", "url", "username", "work"];
+export const CARD_ICON_POSITIONS: readonly ["left", "right", "none"];
+export const AUTOCOMPLETE_VALUES: readonly ["additional-name", "address-level1", "address-level2", "address-level3", "address-level4", "address-line1", "address-line2", "address-line3", "bday-day", "bday-month", "bday-year", "bday", "billing", "cc-additional-name", "cc-csc", "cc-exp-month", "cc-exp-year", "cc-exp", "cc-family-name", "cc-given-name", "cc-name", "cc-number", "cc-type", "country-name", "country", "current-password", "email", "family-name", "fax", "given-name", "home", "honorific-prefix", "honorific-suffix", "language", "mobile", "name", "new-password", "nickname", "off", "on", "one-time-code", "organization-title", "organization", "page", "postal-code", "sex", "shipping", "street-address", "tel-area-code", "tel-country-code", "tel-extension", "tel-local-prefix", "tel-local-suffix", "tel-local", "tel-national", "tel", "transaction-amount", "transaction-currency", "url", "username", "work"];
 export type FieldErrorType = 'incomplete' | 'invalid';
 export type ConfigErrorType = 'missing-configuration' | 'missing-permission' | 'invalid-configuration';
 export interface ConfigError {
@@ -92,7 +138,7 @@ export type DataElementReference = {
     elementId: string;
     path: string;
 };
-export type EventType = 'ready' | 'change' | 'focus' | 'blur' | 'keydown';
+export type EventType = 'ready' | 'change' | 'focus' | 'blur' | 'keydown' | 'click';
 export interface BaseEvent<T extends EventType> {
     type: T;
 }
@@ -114,12 +160,14 @@ export type InputBlurEvent = BaseEvent<'blur'> & Targeted;
 export type InputKeydownEvent = BaseEvent<'keydown'> & Targeted & {
     key: ListenableKey;
 } & Pick<KeyboardEvent, 'altKey' | 'ctrlKey' | 'shiftKey' | 'metaKey'>;
+export type ClickEvent = BaseEvent<'click'> & Targeted;
 export type BaseElementEvents = ReadyEvent | InputFocusEvent | InputBlurEvent | InputKeydownEvent;
 export type TextElementEvents = BaseElementEvents | ChangeEvent;
 export type CardElementEvents = BaseElementEvents | CardChangeEvent;
 export type CardNumberElementEvents = BaseElementEvents | CardChangeEvent;
 export type CardExpirationDateElementEvents = BaseElementEvents | ChangeEvent;
 export type CardVerificationCodeElementEvents = BaseElementEvents | ChangeEvent;
+export type CopyButtonElementEvents = BaseElementEvents | ClickEvent;
 /**
  * Utility type that helps find a Union type based on a `type` property
  */
@@ -130,15 +178,21 @@ export type ElementEventListener<Events, Type> = (event: FindByType<Events, Type
 export interface Subscription {
     unsubscribe(): void;
 }
-export const SAFE_CSS_PROPERTIES: readonly ["backgroundColor", "color", "fontFamily", "fontSize", "fontSmooth", "fontStyle", "fontVariant", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "padding", "textDecoration", "textShadow", "textTransform"];
+export const SAFE_CSS_PROPERTIES: readonly ["backgroundColor", "color", "fontFamily", "fontSize", "fontSmooth", "fontStyle", "fontVariant", "fontWeight", "letterSpacing", "lineHeight", "padding", "textAlign", "textDecoration", "textShadow", "textTransform"];
+export const BUTTON_CSS_PROPERTIES: readonly ["alignItems", "backgroundColor", "border", "borderBottom", "borderColor", "borderLeft", "borderRadius", "borderRight", "borderStyle", "borderTop", "borderWidth", "boxShadow", "color", "cursor", "display", "fontFamily", "fontSize", "fontWeight", "gap", "height", "justifyContent", "letterSpacing", "lineHeight", "margin", "maxHeight", "maxWidth", "minHeight", "minWidth", "opacity", "outline", "padding", "textAlign", "textTransform", "transform", "transition", "width"];
 export type SafeCSSProperty = (typeof SAFE_CSS_PROPERTIES)[number];
+export type ButtonCSSProperty = (typeof BUTTON_CSS_PROPERTIES)[number];
 export const SAFE_CSS_PROPERTIES_ALTERNATES: Partial<Record<SafeCSSProperty, string[]>>;
 export const SAFE_CSS_PROPERTIES_WITH_ALTERNATES: string[];
 export type SafeStyle = Pick<Properties, SafeCSSProperty>;
 export const CARD_ELEMENT_STYLE_VARIANT_SELECTORS: readonly [":hover", ":focus", ":read-only", "::placeholder", "::selection", ":disabled"];
+export const BUTTON_ELEMENT_STYLE_VARIANT_SELECTORS: readonly [":hover", ":focus", ":active"];
 export type CardElementStyleVariantSelector = (typeof CARD_ELEMENT_STYLE_VARIANT_SELECTORS)[number];
+export type ButtonElementStyleVariantSelector = (typeof BUTTON_ELEMENT_STYLE_VARIANT_SELECTORS)[number];
+export type ButtonStyle = Pick<Properties, ButtonCSSProperty>;
 export type CardElementStyleVariantStyle = SafeStyle & Partial<Record<CardElementStyleVariantSelector, SafeStyle>>;
-export const CARD_ELEMENT_STYLE_VARIANTS: readonly ["base", "complete", "invalid", "empty"];
+export type ButtonElementStyleVariantStyle = ButtonStyle & Partial<Record<ButtonElementStyleVariantSelector, ButtonStyle>>;
+export const CARD_ELEMENT_STYLE_VARIANTS: readonly ["base", "container", "complete", "invalid", "empty"];
 export const CARD_ELEMENT_STYLE_FONTS_ATTR: "fonts";
 export type CardElementStyleVariant = (typeof CARD_ELEMENT_STYLE_VARIANTS)[number];
 type CardElementStyleFontAttr = typeof CARD_ELEMENT_STYLE_FONTS_ATTR;
@@ -146,16 +200,21 @@ type FontSource = string;
 export type FontSources = FontSource[];
 export type Fonts = Record<CardElementStyleFontAttr, FontSources>;
 export type CardElementStyle = Partial<Record<CardElementStyleVariant, CardElementStyleVariantStyle> & Fonts>;
-export type ElementStyle = CardElementStyle;
+export const BUTTON_ELEMENT_STYLE_VARIANTS: readonly ["base", "container"];
+export type ButtonElementStyleVariant = (typeof BUTTON_ELEMENT_STYLE_VARIANTS)[number];
+export type ButtonElementStyle = Partial<Record<ButtonElementStyleVariant, ButtonElementStyleVariantStyle> & Fonts>;
+export type CopyButtonElementStyle = ButtonElementStyle;
+export type ElementStyle = CardElementStyle | CopyButtonElementStyle;
 export type CopyIconStyles = {
     size?: string;
     color?: string;
     successColor?: string;
 };
-export const ELEMENTS_TYPES: readonly ["card", "cardExpirationDate", "cardNumber", "cardVerificationCode", "data", "text"];
+export const ELEMENTS_TYPES: readonly ["card", "cardExpirationDate", "cardNumber", "cardVerificationCode", "copyButton", "data", "text"];
 export type ElementType = (typeof ELEMENTS_TYPES)[number];
 export interface ElementInternalOptions {
     apiKey: string | undefined;
+    customDomain: string | undefined;
     baseUrl: string;
     type: ElementType;
     debug: boolean | undefined;
@@ -196,6 +255,7 @@ export interface SanitizedElementOptions {
     skipLuhnValidation?: boolean;
     style?: ElementStyle;
     targetId?: string;
+    text?: string;
     title?: string;
     transform?: [RegExp, string] | null;
     validateOnChange?: boolean;
@@ -262,6 +322,12 @@ export type CreateCardVerificationCodeElementOptions = CustomizableElementOption
     value?: string;
 };
 export type UpdateCardVerificationCodeElementOptions = Omit<CreateCardVerificationCodeElementOptions, 'targetId' | 'validateOnChange' | 'enableCopy'>;
+export type CreateCopyButtonElementOptions = Pick<ElementOptions, 'targetId' | 'title' | 'disabled'> & {
+    id?: string;
+    style?: CopyButtonElementStyle;
+    text?: string;
+};
+export type UpdateCopyButtonElementOptions = Omit<CreateCopyButtonElementOptions, 'targetId'>;
 export interface BinDetails {
     cardBrand?: string;
     type?: string;
@@ -278,12 +344,20 @@ export interface BinDetails {
     issuerCurrency?: string;
     comboCard?: string;
     binLength?: number;
-    authentication?: unknown;
-    cost?: unknown;
+    authentication?: Authentication;
+    cost?: Cost;
     bank?: BinDetailsBank;
     country?: BinDetailsCountry;
     product?: BinDetailsProduct;
 }
+interface Cost {
+    capAdvaloremAmount: string;
+    capTypeName: string;
+    capFixedAmount: string;
+}
+interface Authentication {
+    authenticationName: string;
+}
 export interface BinDetailsBank {
     name?: string;
     phone?: string;
@@ -567,6 +641,9 @@ export type ICardVerificationCodeElement = BaseElement<UpdateCardVerificationCod
     setValueRef(value: ICardVerificationCodeElement): void;
     setValue(value: DataElementReference): void;
 };
+export type ICopyButtonElement = BaseElement<UpdateCopyButtonElementOptions, CopyButtonElementEvents> & {
+    setValueRef(value: ITextElement | ICardNumberElement | ICardExpirationDateElement | ICardVerificationCodeElement): void;
+};
 export type ElementWrapper<T extends BaseElement<any, any> = BaseElement<any, any>> = {
     element: T;
     method?: string;
@@ -574,7 +651,7 @@ export type ElementWrapper<T extends BaseElement<any, any> = BaseElement<any, an
         format: string;
     };
 };
-export type ElementValue = ITextElement | ICardElement | ICardNumberElement | ICardExpirationDateElement | ICardVerificationCodeElement | ElementWrapper;
+export type ElementValue = ITextElement | ICardElement | ICardNumberElement | ICardExpirationDateElement | ICardVerificationCodeElement | ICopyButtonElement | ElementWrapper;
 export interface BasisTheoryElements {
     tokens: Tokens;
     proxy: Proxy;
@@ -582,14 +659,16 @@ export interface BasisTheoryElements {
     tokenIntents: TokenIntents;
     tokenize: Tokenize['tokenize'];
     client: HttpClient;
+    device: Device;
     createElement(type: 'card', options?: CreateCardElementOptions): ICardElement;
     createElement(type: 'text', options: CreateTextElementOptions): ITextElement;
     createElement(type: 'cardNumber', options: CreateCardNumberElementOptions): ICardNumberElement;
     createElement(type: 'cardExpirationDate', options: CreateCardExpirationDateElementOptions): ICardExpirationDateElement;
     createElement(type: 'cardVerificationCode', options: CreateCardVerificationCodeElementOptions): ICardVerificationCodeElement;
+    createElement(type: 'copyButton', options: CreateCopyButtonElementOptions): ICopyButtonElement;
 }
 export interface BasisTheoryElementsInternal extends BasisTheoryElements {
-    init: (apiKey: string | undefined, elementsBaseUrl: string, elementsUseNgApi: boolean | undefined, elementsUseSameOriginApi: boolean | undefined, disableTelemetry: boolean | undefined, debug: boolean | undefined, useUat: boolean | undefined, useNetworkCheck: boolean | undefined) => Promise<BasisTheoryElements>;
+    init: (apiKey: string | undefined, elementsBaseUrl: string, elementsUseNgApi: boolean | undefined, elementsUseSameOriginApi: boolean | undefined, disableTelemetry: boolean | undefined, debug: boolean | undefined, useUat: boolean | undefined, useNetworkCheck: boolean | undefined, customDomain: string | undefined) => Promise<BasisTheoryElements>;
     hasElement: (payload: unknown) => boolean;
 }
 declare global {
@@ -597,6 +676,18 @@ declare global {
         BasisTheoryElements?: BasisTheoryElementsInternal;
     }
 }
+export class BasisTheoryValidationError<Details = Record<string, unknown>> extends Error {
+    readonly details: Details;
+    /**
+     * @deprecated use {@link details}
+     */
+    readonly validation?: FieldError[] | undefined;
+    constructor(message: string, details: Details, 
+    /**
+     * @deprecated use {@link details}
+     */
+    validation?: FieldError[] | undefined);
+}
 export interface BasisTheoryInitOptions {
     _devMode?: boolean;
     disableTelemetry?: boolean;
@@ -604,6 +695,7 @@ export interface BasisTheoryInitOptions {
     useUat?: boolean;
     debug?: boolean;
     useNetworkCheck?: boolean;
+    customDomain?: string;
 }
 export const basistheory: (apiKey: string, options?: BasisTheoryInitOptions) => Promise<BasisTheoryElements | undefined>;
 export class BasisTheoryApiError extends Error {
@@ -612,18 +704,6 @@ export class BasisTheoryApiError extends Error {
     readonly _debug?: Record<string, unknown> | undefined;
     constructor(message: string, status: number, data?: unknown | undefined, _debug?: Record<string, unknown> | undefined);
 }
-export class BasisTheoryValidationError<Details = Record<string, unknown>> extends Error {
-    readonly details: Details;
-    /**
-     * @deprecated use {@link details}
-     */
-    readonly validation?: FieldError[] | undefined;
-    constructor(message: string, details: Details, 
-    /**
-     * @deprecated use {@link details}
-     */
-    validation?: FieldError[] | undefined);
-}
 export class HttpClientError extends Error {
     readonly status: number;
     readonly data?: unknown;