@basis-theory/react-elements 1.5.0 → 1.7.2

package/dist/main/index.js

@@ -0,0 +1,413 @@
+var $6ZdRe$basistheorybasistheoryjscommon = require("@basis-theory/basis-theory-js/common");
+var $6ZdRe$basistheorybasistheoryjstypeselements = require("@basis-theory/basis-theory-js/types/elements");
+var $6ZdRe$react = require("react");
+var $6ZdRe$basistheorywebelements = require("@basis-theory/web-elements");
+
+
+function $parcel$exportWildcard(dest, source) {
+  Object.keys(source).forEach(function(key) {
+    if (key === 'default' || key === '__esModule' || Object.prototype.hasOwnProperty.call(dest, key)) {
+      return;
+    }
+
+    Object.defineProperty(dest, key, {
+      enumerable: true,
+      get: function get() {
+        return source[key];
+      }
+    });
+  });
+
+  return dest;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+var $a6b9dd675f852902$exports = {};
+
+$parcel$export($a6b9dd675f852902$exports, "useBasisTheory", () => $311cac811dba7e3c$export$8855c0c49ada8fa3);
+$parcel$export($a6b9dd675f852902$exports, "BasisTheoryProvider", () => $2675fc9fa3792892$export$e61fbf0ee83adc05);
+$parcel$export($a6b9dd675f852902$exports, "BasisTheoryApiError", () => $6ZdRe$basistheorybasistheoryjscommon.BasisTheoryApiError);
+$parcel$export($a6b9dd675f852902$exports, "BasisTheoryValidationError", () => $6ZdRe$basistheorybasistheoryjscommon.BasisTheoryValidationError);
+$parcel$export($a6b9dd675f852902$exports, "AMERICAN_EXPRESS", () => $6ZdRe$basistheorybasistheoryjstypeselements.AMERICAN_EXPRESS);
+$parcel$export($a6b9dd675f852902$exports, "DEFAULT_CARD_TYPES", () => $6ZdRe$basistheorybasistheoryjstypeselements.DEFAULT_CARD_TYPES);
+$parcel$export($a6b9dd675f852902$exports, "DINERS_CLUB", () => $6ZdRe$basistheorybasistheoryjstypeselements.DINERS_CLUB);
+$parcel$export($a6b9dd675f852902$exports, "DISCOVER", () => $6ZdRe$basistheorybasistheoryjstypeselements.DISCOVER);
+$parcel$export($a6b9dd675f852902$exports, "ELO", () => $6ZdRe$basistheorybasistheoryjstypeselements.ELO);
+$parcel$export($a6b9dd675f852902$exports, "HIPER", () => $6ZdRe$basistheorybasistheoryjstypeselements.HIPER);
+$parcel$export($a6b9dd675f852902$exports, "HIPERCARD", () => $6ZdRe$basistheorybasistheoryjstypeselements.HIPERCARD);
+$parcel$export($a6b9dd675f852902$exports, "JCB", () => $6ZdRe$basistheorybasistheoryjstypeselements.JCB);
+$parcel$export($a6b9dd675f852902$exports, "MAESTRO", () => $6ZdRe$basistheorybasistheoryjstypeselements.MAESTRO);
+$parcel$export($a6b9dd675f852902$exports, "MASTERCARD", () => $6ZdRe$basistheorybasistheoryjstypeselements.MASTERCARD);
+$parcel$export($a6b9dd675f852902$exports, "MIR", () => $6ZdRe$basistheorybasistheoryjstypeselements.MIR);
+$parcel$export($a6b9dd675f852902$exports, "UNION_PAY", () => $6ZdRe$basistheorybasistheoryjstypeselements.UNION_PAY);
+$parcel$export($a6b9dd675f852902$exports, "VISA", () => $6ZdRe$basistheorybasistheoryjstypeselements.VISA);
+
+
+const $2675fc9fa3792892$var$BasisTheoryContext = /*#__PURE__*/ (0, $6ZdRe$react.createContext)({});
+const $2675fc9fa3792892$export$e61fbf0ee83adc05 = ({ bt: bt, children: children })=>{
+    const value = (0, $6ZdRe$react.useMemo)(()=>({
+            bt: bt
+        }), [
+        bt
+    ]);
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).createElement($2675fc9fa3792892$var$BasisTheoryContext.Provider, {
+        value: value
+    }, children);
+};
+const $2675fc9fa3792892$export$e3c9ec56296efb13 = ()=>(0, $6ZdRe$react.useContext)($2675fc9fa3792892$var$BasisTheoryContext);
+
+
+
+const $311cac811dba7e3c$export$8855c0c49ada8fa3 = (apiKey, options)=>{
+    const [state, setState] = (0, $6ZdRe$react.useState)({});
+    const isLoading = (0, $6ZdRe$react.useRef)(false);
+    const { bt: btFromContext } = (0, $2675fc9fa3792892$export$e3c9ec56296efb13)();
+    (0, $6ZdRe$react.useEffect)(()=>{
+        (async ()=>{
+            if (!state.bt && apiKey && !state.error && !isLoading.current) try {
+                isLoading.current = true;
+                const bt = await (0, $6ZdRe$basistheorywebelements.basistheory)(apiKey, options);
+                setState({
+                    bt: bt
+                });
+            } catch (error) {
+                setState({
+                    error: error
+                });
+            } finally{
+                isLoading.current = false;
+            }
+        })();
+    }, [
+        state.bt,
+        apiKey,
+        options,
+        state.error
+    ]);
+    if (state.bt || state.error) return {
+        bt: state.bt,
+        error: state.error
+    };
+    return {
+        bt: btFromContext
+    };
+};
+
+
+
+
+
+
+
+var $09db7b15c2691edc$exports = {};
+
+$parcel$export($09db7b15c2691edc$exports, "CardElement", () => $b68de9bc89cba8c8$export$642653cabb64aed9);
+$parcel$export($09db7b15c2691edc$exports, "TextElement", () => $5056c1f1f96da4b6$export$764077542c4bf9bd);
+$parcel$export($09db7b15c2691edc$exports, "CardNumberElement", () => $89a8c5992dc7cf9a$export$a2311b18160d2f3f);
+$parcel$export($09db7b15c2691edc$exports, "CardExpirationDateElement", () => $a598ed1fc49faa5f$export$d5128efc3cebc889);
+$parcel$export($09db7b15c2691edc$exports, "CardVerificationCodeElement", () => $9bb5cbc1cc445953$export$36d668a024913c87);
+
+
+
+/**
+ * Resolves which BasisTheoryReact instance to use,
+ * by favoring the optional parameter.
+ * For internal use only.
+ * @param bt
+ * @returns parameter if it exists; instance from Context otherwise
+ */ const $462a957462ffddc8$export$ca8f72eaa6c308fa = (bt)=>{
+    const { bt: btFromContext } = (0, $311cac811dba7e3c$export$8855c0c49ada8fa3)();
+    return bt || btFromContext;
+};
+
+
+const $515e46363124517b$var$elementHasSetValueRef = (val)=>Boolean(val.setValueRef);
+const $515e46363124517b$var$shallowDifference = (objA, objB)=>[
+        ...new Set([
+            ...Object.keys(objA || {}),
+            ...Object.keys(objB || {})
+        ])
+    ].reduce((changed, key)=>{
+        const aValue = objA?.[key];
+        const bValue = objB?.[key];
+        if (aValue !== bValue) return {
+            ...changed,
+            [key]: bValue
+        };
+        return changed;
+    }, {});
+/**
+ * Creates, mounts and indexes an Element
+ * with React lifecycle
+ * @param id
+ * @param type
+ * @param options
+ * @param wrapperRef
+ * @param btFromProps
+ * @param ref optional ref to set the underlying element
+ * @returns created element and initial options used for mounting
+ */ const $515e46363124517b$export$93e1bc7222cfbdc8 = (id, type, wrapperRef, options, btFromProps, ref, targetValueRef)=>{
+    const bt = (0, $462a957462ffddc8$export$ca8f72eaa6c308fa)(btFromProps);
+    const [lastOptions, setLastOptions] = (0, $6ZdRe$react.useState)();
+    const elementRef = (0, $6ZdRe$react.useRef)(null);
+    (0, $6ZdRe$react.useEffect)(()=>{
+        if (bt && wrapperRef.current && !elementRef.current) {
+            const newElement = bt.createElement(type, options); // conversion to unknown necessary because of different value prop types
+            elementRef.current = newElement;
+            if (typeof ref === 'function') ref(newElement);
+            if (ref && typeof ref === 'object') // eslint-disable-next-line no-param-reassign
+            ref.current = newElement;
+            (async ()=>{
+                await newElement.mount(`#${id}`).catch((mountError)=>{
+                    setLastOptions(()=>{
+                        throw mountError;
+                    });
+                });
+                if ($515e46363124517b$var$elementHasSetValueRef(newElement) && targetValueRef?.current) newElement.setValueRef(targetValueRef.current);
+            })();
+            setLastOptions(options);
+        }
+    // the only two dependencies that we need to watch for
+    // are bt and wrapperRef. Anything else changing should not
+    // be considered for creating/mounting an element
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        bt,
+        wrapperRef
+    ]);
+    (0, $6ZdRe$react.useEffect)(()=>{
+        if (elementRef.current && lastOptions && options !== lastOptions) {
+            const optionsDifference = $515e46363124517b$var$shallowDifference(lastOptions, options);
+            if (Object.keys(optionsDifference).length) {
+                setLastOptions(options);
+                elementRef.current.update(optionsDifference).catch((updateError)=>{
+                    setLastOptions(()=>{
+                        throw updateError;
+                    });
+                });
+            }
+        }
+    }, [
+        options,
+        lastOptions
+    ]);
+    return elementRef?.current || undefined;
+};
+
+
+
+const $75e7ef6fe5d73b5f$export$b6487193f4d880e0 = (eventType, element, listener)=>(0, $6ZdRe$react.useEffect)(()=>{
+        let subscription;
+        if (element && listener) subscription = element.on(eventType, listener);
+        return ()=>subscription?.unsubscribe();
+    // we shouldn't run this effect when eventType changes
+    // which would turn out to be a different listener
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        element,
+        listener
+    ]);
+
+
+const $b68de9bc89cba8c8$var$CardElementC = ({ autoComplete: autoComplete, bt: bt, cardTypes: cardTypes, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, skipLuhnValidation: skipLuhnValidation, style: style, validateOnChange: validateOnChange, value: value })=>{
+    const wrapperRef = (0, $6ZdRe$react.useRef)(null);
+    const element = (0, $515e46363124517b$export$93e1bc7222cfbdc8)(id, 'card', wrapperRef, {
+        autoComplete: autoComplete,
+        cardTypes: cardTypes,
+        copyIconStyles: copyIconStyles,
+        disabled: disabled,
+        enableCopy: enableCopy,
+        inputMode: inputMode,
+        placeholder: placeholder,
+        readOnly: readOnly,
+        skipLuhnValidation: skipLuhnValidation,
+        style: style,
+        validateOnChange: validateOnChange,
+        value: value
+    }, bt, elementRef);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('ready', element, onReady);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('change', element, onChange);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('focus', element, onFocus);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('blur', element, onBlur);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('keydown', element, onKeyDown);
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).createElement("div", {
+        id: id,
+        ref: wrapperRef
+    });
+};
+const $b68de9bc89cba8c8$export$642653cabb64aed9 = /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).forwardRef(// eslint-disable-next-line get-off-my-lawn/prefer-arrow-functions
+function CardElement(props, ref) {
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).createElement($b68de9bc89cba8c8$var$CardElementC, {
+        ...props,
+        elementRef: ref
+    });
+});
+
+
+
+
+
+const $5056c1f1f96da4b6$var$TextElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, disabled: disabled, elementRef: elementRef, id: id, inputMode: inputMode, mask: mask, maxLength: maxLength, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, password: password, placeholder: placeholder, readOnly: readOnly, style: style, transform: transform, validation: validation, value: value, valueRef: valueRef })=>{
+    const wrapperRef = (0, $6ZdRe$react.useRef)(null);
+    const element = (0, $515e46363124517b$export$93e1bc7222cfbdc8)(id, 'text', wrapperRef, {
+        'aria-label': ariaLabel,
+        autoComplete: autoComplete,
+        disabled: disabled,
+        inputMode: inputMode,
+        mask: mask,
+        maxLength: maxLength,
+        password: password,
+        placeholder: placeholder,
+        readOnly: readOnly,
+        style: style,
+        targetId: id,
+        transform: transform,
+        validation: validation,
+        value: value
+    }, bt, elementRef, valueRef);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('ready', element, onReady);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('change', element, onChange);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('focus', element, onFocus);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('blur', element, onBlur);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('keydown', element, onKeyDown);
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).createElement("div", {
+        id: id,
+        ref: wrapperRef
+    });
+};
+const $5056c1f1f96da4b6$export$764077542c4bf9bd = /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).forwardRef(// eslint-disable-next-line get-off-my-lawn/prefer-arrow-functions
+function TextElement(props, ref) {
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).createElement($5056c1f1f96da4b6$var$TextElementC, {
+        ...props,
+        elementRef: ref
+    });
+});
+
+
+
+
+
+const $89a8c5992dc7cf9a$var$CardNumberElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, cardTypes: cardTypes, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, iconPosition: iconPosition, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, skipLuhnValidation: skipLuhnValidation, style: style, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
+    const wrapperRef = (0, $6ZdRe$react.useRef)(null);
+    const element = (0, $515e46363124517b$export$93e1bc7222cfbdc8)(id, 'cardNumber', wrapperRef, {
+        'aria-label': ariaLabel,
+        autoComplete: autoComplete,
+        cardTypes: cardTypes,
+        copyIconStyles: copyIconStyles,
+        disabled: disabled,
+        enableCopy: enableCopy,
+        iconPosition: iconPosition,
+        inputMode: inputMode,
+        placeholder: placeholder,
+        readOnly: readOnly,
+        skipLuhnValidation: skipLuhnValidation,
+        style: style,
+        targetId: id,
+        validateOnChange: validateOnChange,
+        value: value
+    }, bt, elementRef, valueRef);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('ready', element, onReady);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('change', element, onChange);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('focus', element, onFocus);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('blur', element, onBlur);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('keydown', element, onKeyDown);
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).createElement("div", {
+        id: id,
+        ref: wrapperRef
+    });
+};
+const $89a8c5992dc7cf9a$export$a2311b18160d2f3f = /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).forwardRef(function CardNumberElement(props, ref) {
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).createElement($89a8c5992dc7cf9a$var$CardNumberElementC, {
+        ...props,
+        elementRef: ref
+    });
+});
+
+
+
+
+
+const $a598ed1fc49faa5f$var$CardExpirationDateElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, style: style, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
+    const wrapperRef = (0, $6ZdRe$react.useRef)(null);
+    const element = (0, $515e46363124517b$export$93e1bc7222cfbdc8)(id, 'cardExpirationDate', wrapperRef, {
+        'aria-label': ariaLabel,
+        autoComplete: autoComplete,
+        copyIconStyles: copyIconStyles,
+        disabled: disabled,
+        enableCopy: enableCopy,
+        inputMode: inputMode,
+        placeholder: placeholder,
+        readOnly: readOnly,
+        style: style,
+        targetId: id,
+        validateOnChange: validateOnChange,
+        value: value
+    }, bt, elementRef, valueRef);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('ready', element, onReady);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('change', element, onChange);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('focus', element, onFocus);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('blur', element, onBlur);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('keydown', element, onKeyDown);
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).createElement("div", {
+        id: id,
+        ref: wrapperRef
+    });
+};
+const $a598ed1fc49faa5f$export$d5128efc3cebc889 = /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).forwardRef(function CardExpirationDateElement(props, ref) {
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).createElement($a598ed1fc49faa5f$var$CardExpirationDateElementC, {
+        ...props,
+        elementRef: ref
+    });
+});
+
+
+
+
+
+const $9bb5cbc1cc445953$var$CardVerificationCodeElementC = ({ 'aria-label': ariaLabel, autoComplete: autoComplete, bt: bt, cardBrand: cardBrand, copyIconStyles: copyIconStyles, disabled: disabled, elementRef: elementRef, enableCopy: enableCopy, id: id, inputMode: inputMode, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onReady: onReady, placeholder: placeholder, readOnly: readOnly, style: style, validateOnChange: validateOnChange, value: value, valueRef: valueRef })=>{
+    const wrapperRef = (0, $6ZdRe$react.useRef)(null);
+    const element = (0, $515e46363124517b$export$93e1bc7222cfbdc8)(id, 'cardVerificationCode', wrapperRef, {
+        'aria-label': ariaLabel,
+        autoComplete: autoComplete,
+        cardBrand: cardBrand,
+        copyIconStyles: copyIconStyles,
+        disabled: disabled,
+        enableCopy: enableCopy,
+        inputMode: inputMode,
+        placeholder: placeholder,
+        readOnly: readOnly,
+        style: style,
+        targetId: id,
+        validateOnChange: validateOnChange,
+        value: value
+    }, bt, elementRef, valueRef);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('ready', element, onReady);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('change', element, onChange);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('focus', element, onFocus);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('blur', element, onBlur);
+    (0, $75e7ef6fe5d73b5f$export$b6487193f4d880e0)('keydown', element, onKeyDown);
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).createElement("div", {
+        id: id,
+        ref: wrapperRef
+    });
+};
+const $9bb5cbc1cc445953$export$36d668a024913c87 = /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).forwardRef(function CardVerificationCodeElement(props, ref) {
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($6ZdRe$react))).createElement($9bb5cbc1cc445953$var$CardVerificationCodeElementC, {
+        ...props,
+        elementRef: ref
+    });
+});
+
+
+
+
+$parcel$exportWildcard(module.exports, $a6b9dd675f852902$exports);
+$parcel$exportWildcard(module.exports, $09db7b15c2691edc$exports);
+
+