@basis-theory/react-elements 2.0.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basis-theory/react-elements",
-  "version": "2.0.0",
+  "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": "2.0.0"
+    "@basis-theory/web-elements": "2.1.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

package/types/index.d.ts

@@ -138,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;
 }
@@ -160,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
  */
@@ -176,14 +178,20 @@ 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 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];
@@ -192,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;
@@ -242,6 +255,7 @@ export interface SanitizedElementOptions {
     skipLuhnValidation?: boolean;
     style?: ElementStyle;
     targetId?: string;
+    text?: string;
     title?: string;
     transform?: [RegExp, string] | null;
     validateOnChange?: boolean;
@@ -308,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;
@@ -621,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;
@@ -628,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;
@@ -642,9 +665,10 @@ export interface BasisTheoryElements {
     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 {
@@ -652,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;
@@ -659,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 {
@@ -667,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;