@paypal/checkout-components 5.0.268 → 5.0.270-alpha.0

package/package.json

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

package/src/ui/buttons/props.js

@@ -317,6 +317,7 @@ export type ButtonStyle = {|
   menuPlacement: $Values<typeof MENU_PLACEMENT>,
   period?: number,
   height?: number,
+  disableMaxWidth?: boolean,
 |};
 
 export type ButtonStyleInputs = {|
@@ -327,6 +328,7 @@ export type ButtonStyleInputs = {|
   layout?: $Values<typeof BUTTON_LAYOUT> | void,
   period?: number | void,
   height?: number | void,
+  disableMaxWidth?: boolean | void,
 |};
 
 type PersonalizationComponentProps = {|
@@ -613,6 +615,7 @@ export function normalizeButtonStyle(
     height,
     period,
     menuPlacement = MENU_PLACEMENT.BELOW,
+    disableMaxWidth,
   } = style;
 
   // $FlowFixMe
@@ -684,6 +687,7 @@ export function normalizeButtonStyle(
     height,
     period,
     menuPlacement,
+    disableMaxWidth,
   };
 }
 

package/src/ui/buttons/style.jsx

@@ -18,8 +18,8 @@ export function Style({
   nonce,
   fundingEligibility,
 }: StyleProps): ElementNode {
-  const { height } = style;
-  const css = componentStyle({ height, fundingEligibility });
+  const { height, disableMaxWidth } = style;
+  const css = componentStyle({ height, fundingEligibility, disableMaxWidth });
 
   return <style nonce={nonce} innerHTML={css} />;
 }

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

@@ -11,15 +11,21 @@ import { buttonColorStyle } from "./color";
 export function componentStyle({
   height,
   fundingEligibility,
+  disableMaxWidth,
 }: {|
   height?: ?number,
   fundingEligibility: FundingEligibilityType,
+  disableMaxWidth?: ?boolean,
 |}): string {
   return `
         ${pageStyle}
         ${buttonStyle}
         ${buttonColorStyle}
         ${labelStyle}
-        ${buttonResponsiveStyle({ height, fundingEligibility })}
+        ${buttonResponsiveStyle({
+          height,
+          fundingEligibility,
+          disableMaxWidth,
+        })}
     `;
 }

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

@@ -24,9 +24,11 @@ const WALLET_BUTTON_PERC = 60;
 export function buttonResponsiveStyle({
   height,
   fundingEligibility,
+  disableMaxWidth,
 }: {|
   height?: ?number,
   fundingEligibility: FundingEligibilityType,
+  disableMaxWidth?: ?boolean,
 |}): string {
   return Object.keys(BUTTON_SIZE_STYLE)
     .map((size) => {
@@ -59,7 +61,7 @@ export function buttonResponsiveStyle({
 
                 .${CLASS.CONTAINER} {
                     min-width: ${style.minWidth}px;
-                    max-width: ${style.maxWidth}px;
+                    ${disableMaxWidth ? "" : `max-width: ${style.maxWidth}px;`};
                 }
 
                 .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT}, .${

package/src/zoid/buttons/container.jsx

@@ -7,11 +7,7 @@ import { EVENT, type RenderOptionsType } from "@krakenjs/zoid/src";
 import { getVersion } from "@paypal/sdk-client/src";
 
 import { BUTTON_SIZE, ATTRIBUTE, MENU_PLACEMENT } from "../../constants";
-import {
-  BUTTON_SIZE_STYLE,
-  MINIMUM_SIZE,
-  MAXIMUM_SIZE,
-} from "../../ui/buttons/config";
+import { BUTTON_SIZE_STYLE, MINIMUM_SIZE } from "../../ui/buttons/config";
 import { type ButtonProps } from "../../ui/buttons/props";
 
 const CLASS = {
@@ -70,7 +66,6 @@ export function containerTemplate({
   const { label, layout, height: buttonHeight, menuPlacement } = style;
 
   let minimumSize = MINIMUM_SIZE[layout];
-  const maximumSize = MAXIMUM_SIZE[layout];
 
   if (buttonHeight) {
     const possibleSizes = values(BUTTON_SIZE).filter((possibleSize) => {
@@ -128,7 +123,6 @@ export function containerTemplate({
                           BUTTON_SIZE_STYLE[minimumSize].minHeight
                         }px;
                         min-width: ${BUTTON_SIZE_STYLE[minimumSize].minWidth}px;
-                        max-width: ${BUTTON_SIZE_STYLE[maximumSize].maxWidth}px;
                         font-size: 0;
                     }
 

package/src/zoid/checkout/component.jsx

@@ -246,7 +246,6 @@ export function getCheckoutComponent(): CheckoutComponent {
         onAuth: {
           type: "function",
           required: false,
-          sameDomain: true,
         },
 
         onSmartWalletEligible: {