@paypal/checkout-components 5.0.399 → 5.0.400

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.399",
+  "version": "5.0.400",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {

package/src/constants/class.js

@@ -27,7 +27,6 @@ export const CLASS = {
   WALLET_MENU: ("paypal-button-wallet-menu": "paypal-button-wallet-menu"),
 
   LOADING: ("paypal-button-loading": "paypal-button-loading"),
-  DISABLED: ("paypal-button-disabled": "paypal-button-disabled"),
   SPINNER: ("paypal-button-spinner": "paypal-button-spinner"),
 
   TAGLINE: ("paypal-button-tagline": "paypal-button-tagline"),

package/src/ui/buttons/button.jsx

@@ -72,7 +72,6 @@ type IndividualButtonProps = {|
   instrument: ?WalletInstrument,
   showPayLabel: boolean,
   showLoadingSpinner?: boolean,
-  disabled?: boolean,
 |};
 
 export function Button({
@@ -98,7 +97,6 @@ export function Button({
   userIDToken,
   vault,
   showLoadingSpinner = false,
-  disabled = false,
 }: IndividualButtonProps): ElementNode {
   const { layout, shape, borderRadius } = style;
 
@@ -313,7 +311,6 @@ export function Button({
           CLASS.BUTTON,
           `${shouldApplyRebrandedStyles ? CLASS.BUTTON_REBRAND : ""}`,
           `${showLoadingSpinner ? CLASS.LOADING : ""}`,
-          `${disabled ? CLASS.DISABLED : ""}`,
           `${CLASS.NUMBER}-${i}`,
           `${CLASS.LAYOUT}-${layout}`,
           `${CLASS.NUMBER}-${
@@ -329,9 +326,8 @@ export function Button({
         onClick={clickHandler}
         onRender={onButtonRender}
         onKeyPress={keypressHandler}
-        tabindex={showLoadingSpinner || disabled ? "-1" : "0"}
+        tabindex="0"
         aria-label={labelText}
-        aria-disabled={showLoadingSpinner || disabled ? "true" : "false"}
       >
         <div class={CLASS.BUTTON_LABEL} aria-hidden="true">
           {labelNode}

package/src/ui/buttons/buttons.jsx

@@ -128,7 +128,6 @@ type ButtonsProps = ButtonPropsInputs & {|
   onClick?: Function,
   wallet?: ?Wallet,
   showLoadingSpinner?: boolean,
-  disabled?: boolean,
 |};
 
 export function validateButtonProps(props: ButtonPropsInputs) {
@@ -136,11 +135,7 @@ export function validateButtonProps(props: ButtonPropsInputs) {
 }
 
 export function Buttons(props: ButtonsProps): ElementNode {
-  const {
-    onClick = noop,
-    showLoadingSpinner = false,
-    disabled = false,
-  } = props;
+  const { onClick = noop, showLoadingSpinner = false } = props;
   const {
     applePaySupport,
     buyerCountry,
@@ -301,7 +296,6 @@ export function Buttons(props: ButtonsProps): ElementNode {
           instrument={instruments[source]}
           showPayLabel={showPayLabel}
           showLoadingSpinner={showLoadingSpinner}
-          disabled={disabled}
         />
       ))}
 

package/src/ui/buttons/props.js

@@ -639,11 +639,6 @@ export type ButtonProps = {|
   messageMarkup?: string,
   hideSubmitButtonForCardForm?: boolean,
   userAgent: string,
-  disabled?: boolean,
-  onInit?: (
-    data: {||},
-    actions: {| disable: () => void, enable: () => void |}
-  ) => void,
 |};
 
 // eslint-disable-next-line flowtype/require-exact-type

package/src/ui/buttons/styles/button.js

@@ -137,12 +137,6 @@ export const buttonStyle = `
         display: block !important;
     }
 
-    .${CLASS.BUTTON}.${CLASS.DISABLED} {
-        pointer-events: none !important;
-        cursor: not-allowed !important;
-        opacity: 0.6 !important;
-    }
-
     .${CLASS.CONTAINER} .${CLASS.VAULT_HEADER} {
         margin-top: 10px;
     }

package/src/zoid/buttons/component.jsx

@@ -913,9 +913,9 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
             phase: "buttons-first-render",
           });
 
-          // Return the value as-is - the actual disable/enable logic
-          // is handled in prerender.jsx where it has access to the DOM
-          return value;
+          return (...args) => {
+            return value(...args);
+          };
         },
       },
 

package/src/zoid/buttons/prerender.jsx

@@ -42,45 +42,6 @@ export function PrerenderedButtons({
     props.appSwitchWhenAvailable
   );
   let win;
-
-  // State management for disabled prop
-  const state = {
-    disabled: props.disabled || false,
-  };
-
-  // Helper function to update disabled state
-  const setDisabled = (disabled: boolean) => {
-    state.disabled = disabled;
-
-    // Update DOM synchronously to prevent race conditions
-    if (typeof document !== "undefined") {
-      const buttons = document.querySelectorAll('[data-button="true"]');
-      buttons.forEach((button) => {
-        if (disabled) {
-          button.setAttribute("tabindex", "-1");
-          button.setAttribute("aria-disabled", "true");
-          button.classList.add("paypal-button-disabled");
-        } else {
-          button.setAttribute("tabindex", "0");
-          button.setAttribute("aria-disabled", "false");
-          button.classList.remove("paypal-button-disabled");
-        }
-      });
-    }
-  };
-
-  // Call onInit with actions object
-  if (props.onInit && typeof props.onInit === "function") {
-    try {
-      const actions = {
-        disable: () => setDisabled(true),
-        enable: () => setDisabled(false),
-      };
-      props.onInit({}, actions);
-    } catch (err) {
-      getLogger().error("oninit_error", { err: err.message });
-    }
-  }
   const handleClick = (
     // eslint-disable-next-line no-undef
     event: SyntheticInputEvent<HTMLInputElement>,
@@ -150,7 +111,6 @@ export function PrerenderedButtons({
           {...props}
           onClick={handleClick}
           showLoadingSpinner={eagerOrderCreation}
-          disabled={state.disabled}
         />
       </body>
     </html>