Allow changing various props for internal components

.changeset/witty-beers-fail.md

@@ -0,0 +1,11 @@
+---
+'@graphcommerce/magento-cart-shipping-method': patch
+'@graphcommerce/magento-product-configurable': patch
+'@graphcommerce/magento-customer': patch
+'@graphcommerce/magento-wishlist': patch
+'@graphcommerce/magento-product': patch
+'@graphcommerce/ecommerce-ui': patch
+'@graphcommerce/next-ui': patch
+---
+
+Allow changing various props for internal components

packages/ecommerce-ui/components/ApolloError/ApolloErrorSnackbar.tsx

@@ -8,7 +8,7 @@ export type ApolloErrorSnackbarProps = {
 } & Pick<ErrorSnackbarProps, 'action' | 'onClose'>
 
 export function ApolloErrorSnackbar(props: ApolloErrorSnackbarProps) {
-  const { error, action, ...passedProps } = props
+  const { error, ...passedProps } = props
 
   if (!error) return null
 

packages/magento-cart-shipping-method/components/ShippingMethodForm/ShippingMethodForm.tsx

@@ -57,6 +57,7 @@ export function ShippingMethodForm(props: ShippingMethodFormProps) {
           ...method,
           disabled: !method?.available,
           value: `${method?.carrier_code}-${method?.method_code ?? ''}`,
+          method_title: method?.method_title || '',
         })),
     [availableMethods],
   )

packages/magento-customer/components/ForgotPasswordForm/ForgotPasswordForm.tsx

@@ -10,8 +10,12 @@ import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerE
 import type { ForgotPasswordMutation, ForgotPasswordMutationVariables } from './ForgotPassword.gql'
 import { ForgotPasswordDocument } from './ForgotPassword.gql'
 
-export function ForgotPasswordForm(props: { sx?: SxProps<Theme> }) {
-  const { sx = [] } = props
+export type ForgotPasswordFormProps = {
+  sx?: SxProps<Theme>
+  buttonProps?: React.ComponentProps<typeof Button>
+}
+export function ForgotPasswordForm(props: ForgotPasswordFormProps) {
+  const { sx = [], buttonProps } = props
   const form = useFormGqlMutation<ForgotPasswordMutation, ForgotPasswordMutationVariables>(
     ForgotPasswordDocument,
   )
@@ -62,6 +66,7 @@ export function ForgotPasswordForm(props: { sx?: SxProps<Theme> }) {
           color='primary'
           variant='pill'
           size='large'
+          {...buttonProps}
         >
           <Trans id='Send password reset email' />
         </Button>

packages/magento-customer/components/ResetPasswordForm/ResetPasswordForm.tsx

@@ -10,10 +10,11 @@ import { ResetPasswordDocument } from './ResetPassword.gql'
 
 export type ResetPasswordFormProps = {
   token: string
+  buttonProps?: React.ComponentProps<typeof Button>
 }
 
 export function ResetPasswordForm(props: ResetPasswordFormProps) {
-  const { token } = props
+  const { token, buttonProps } = props
 
   const form = useFormGqlMutation<
     ResetPasswordMutation,
@@ -80,6 +81,7 @@ export function ResetPasswordForm(props: ResetPasswordFormProps) {
           color='primary'
           variant='pill'
           size='large'
+          {...buttonProps}
         >
           <Trans id='Save new password' />
         </Button>

packages/magento-product-configurable/components/ConfigurableProductOptions/ConfigurableProductOption.tsx

@@ -20,6 +20,7 @@ export type ConfigurableProductOptionProps = NonNullable<
 > & {
   index: number
   optionIndex: number
+  optionStartLabels?: Record<string, React.ReactNode>
   optionEndLabels?: Record<string, React.ReactNode>
   sx?: SxProps<Theme>
   attribute_code: string
@@ -32,6 +33,7 @@ export function ConfigurableProductOption(props: ConfigurableProductOptionProps)
     label,
     index,
     optionIndex,
+    optionStartLabels,
     optionEndLabels,
     sx,
     attribute_code,
@@ -71,7 +73,7 @@ export function ConfigurableProductOption(props: ConfigurableProductOptionProps)
   return (
     <Box key={fieldName} sx={[...(Array.isArray(sx) ? sx : [sx])]}>
       <SectionHeader
-        labelLeft={label}
+        labelLeft={optionStartLabels?.[attribute_code ?? ''] ?? label}
         labelRight={optionEndLabels?.[attribute_code ?? '']}
         sx={{ mt: 0 }}
       />

packages/magento-product-configurable/components/ConfigurableProductOptions/ConfigurableProductOptions.tsx

@@ -13,6 +13,7 @@ import { ConfigurableOptionValue } from '../ConfigurableOptionValue/Configurable
 import { ConfigurableProductOption } from './ConfigurableProductOption'
 
 export type ConfigurableProductOptionsProps = AddToCartItemSelector & {
+  optionStartLabels?: Record<string, React.ReactNode>
   optionEndLabels?: Record<string, React.ReactNode>
   sx?: SxProps<Theme>
   render?: typeof ConfigurableOptionValue
@@ -22,6 +23,7 @@ export type ConfigurableProductOptionsProps = AddToCartItemSelector & {
 
 export function ConfigurableProductOptions(props: ConfigurableProductOptionsProps) {
   const {
+    optionStartLabels,
     optionEndLabels,
     sx,
     render = ConfigurableOptionValue,
@@ -68,6 +70,7 @@ export function ConfigurableProductOptions(props: ConfigurableProductOptionsProp
           {...option}
           key={option.uid}
           render={render}
+          optionStartLabels={optionStartLabels}
           optionEndLabels={optionEndLabels}
           index={index}
           optionIndex={optionIndex}

packages/magento-product/components/AddProductsToCart/AddProductsToCartQuantity.tsx

@@ -20,13 +20,13 @@ export function AddProductsToCartQuantity(props: AddToCartQuantityProps) {
       variant='outlined'
       size='small'
       color='primary'
-      {...props}
       required
       inputProps={{ min: 1, 'aria-label': i18n._(/* i18n */ 'Add to cart quantity') }}
       defaultValue={1}
       control={control}
       aria-label={i18n._(/* i18n */ 'Add to cart quantity')}
       name={`cartItems.${index}.quantity`}
+      {...props}
     />
   )
 }

packages/magento-product/components/ProductFiltersPro/ProductFiltersProAllFiltersChip.tsx

@@ -19,7 +19,8 @@ export type ProductFiltersProAllFiltersChipProps = ProductFiltersProAggregations
   Omit<
     ChipOverlayOrPopperProps,
     'label' | 'selected' | 'selectedLabel' | 'onApply' | 'onReset' | 'onClose' | 'children'
-  >
+  > &
+  Partial<Pick<ChipOverlayOrPopperProps, 'label' | 'selectedLabel' | 'children'>>
 
 export function ProductFiltersProAllFiltersChip(props: ProductFiltersProAllFiltersChipProps) {
   const { sort_fields, total_count, renderer, category, ...rest } = props

packages/magento-wishlist/components/ProductWishlistChip/ProductWishlistIconButton.tsx

@@ -1,4 +1,5 @@
 import type { ProductListItemFragment } from '@graphcommerce/magento-product'
+import type { IconSvgProps } from '@graphcommerce/next-ui'
 import {
   IconSvg,
   MessageSnackbar,
@@ -16,14 +17,15 @@ import { useAddProductToWishlistAction, useWishlistEnabled } from '../../hooks'
 export type ProductWishlistChipProps = ProductListItemFragment & {
   sx?: SxProps<Theme>
   buttonProps?: IconButtonProps
+  iconSvgProps?: Partial<IconSvgProps>
 }
 
 const compName = 'ProductWishlistChipBase'
 const parts = ['root', 'wishlistIcon', 'wishlistIconActive', 'wishlistButton'] as const
 const { classes } = extendableComponent(compName, parts)
 
 export const ProductWishlistIconButton = React.memo<ProductWishlistChipProps>((props) => {
-  const { buttonProps, sx = [], ...product } = props
+  const { buttonProps, iconSvgProps, sx = [], ...product } = props
   const enabled = useWishlistEnabled()
   const { current, onClick, cancelBubble, showSuccess, hideShowSuccess } =
     useAddProductToWishlistAction({ product, index: 0 })
@@ -53,6 +55,7 @@ export const ProductWishlistIconButton = React.memo<ProductWishlistChipProps>((p
             size='medium'
             className={classes.wishlistIconActive}
             sx={(theme) => ({ color: theme.palette.primary.main, fill: 'currentcolor' })}
+            {...iconSvgProps}
           />
         ) : (
           <IconSvg
@@ -72,6 +75,7 @@ export const ProductWishlistIconButton = React.memo<ProductWishlistChipProps>((p
                     : theme.palette.primary.contrastText,
               },
             })}
+            {...iconSvgProps}
           />
         )}
       </IconButton>

packages/magento-wishlist/components/WishlistItemActionCard/WishlistItemActionCard.tsx

@@ -5,7 +5,7 @@ import type { InputMaybe } from '@graphcommerce/next-config'
 import type { ActionCardProps } from '@graphcommerce/next-ui'
 import { ActionCard, actionCardImageSizes, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import type { SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme, ButtonProps } from '@mui/material'
 import { Button, Link } from '@mui/material'
 import type { ReactNode } from 'react'
 import { useRemoveProductsFromWishlist } from '../../hooks'
@@ -18,6 +18,7 @@ export type WishlistItemActionCardProps = {
   selectedOptions?: InputMaybe<string[]> | undefined
   isConfigurableUncompleted?: boolean
   secondaryAction?: ReactNode
+  actionButtonProps?: ButtonProps
 } & OwnerState &
   Omit<ActionCardProps, 'value' | 'image' | 'price' | 'title' | 'action'>
 type OwnerState = { withOptions?: boolean }
@@ -49,6 +50,7 @@ export function WishlistItemActionCard(props: WishlistItemActionCardProps) {
     selectedOptions,
     secondaryAction,
     variant = 'default',
+    actionButtonProps,
     ...rest
   } = props
   const { id, product } = item
@@ -169,6 +171,7 @@ export function WishlistItemActionCard(props: WishlistItemActionCardProps) {
             size='medium'
             type='button'
             onClick={() => remove([id])}
+            {...actionButtonProps}
           >
             <Trans id='Remove' />
           </Button>

packages/next-ui/LayoutParts/MenuFabSecondaryItem.tsx

@@ -9,7 +9,7 @@ import { NextLink } from '../Theme'
 export type FabMenuSecondaryItemProps = {
   href: string
   children: React.ReactNode
-  icon: React.ReactNode
+  icon?: React.ReactNode
   sx?: SxProps<Theme>
   onClick?: MouseEventHandler<HTMLElement>
 }
@@ -37,9 +37,11 @@ export function MenuFabSecondaryItem(props: FabMenuSecondaryItemProps) {
       dense
       selected={router.asPath.startsWith(href)}
     >
-      <ListItemIcon className={classes.text} sx={{ paddingRight: '8px', minWidth: 'unset' }}>
-        {icon}
-      </ListItemIcon>
+      {icon && (
+        <ListItemIcon className={classes.text} sx={{ paddingRight: '8px', minWidth: 'unset' }}>
+          {icon}
+        </ListItemIcon>
+      )}
       <ListItemText className={classes.icon}>{children}</ListItemText>
     </ListItemButton>
   )

packages/next-ui/Navigation/components/NavigationOverlay.tsx

@@ -25,6 +25,7 @@ type ItemPadding = LiteralUnion<keyof Theme['spacings'], string | number>
 
 export type NavigationOverlayProps = {
   sx?: SxProps<Theme>
+  overlaySx?: SxProps<Theme>
   stretchColumns?: boolean
   variantSm: LayoutOverlayVariant
   variantMd: LayoutOverlayVariant
@@ -40,12 +41,13 @@ export type NavigationOverlayProps = {
 const MotionDiv = styled(m.div)({})
 
 const componentName = 'Navigation'
-const parts = ['root', 'navigation', 'header', 'column'] as const
+const parts = ['root', 'navigation', 'header', 'column', 'wrapper'] as const
 const { classes } = extendableComponent(componentName, parts)
 
 export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
   const {
     sx,
+    overlaySx,
     stretchColumns,
     variantMd,
     variantSm,
@@ -125,12 +127,15 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
           animating.set(false)
         },
       }}
-      sx={{
-        zIndex: 'drawer',
-        '& .LayoutOverlayBase-overlayPane': {
-          minWidth: itemWidthMd,
+      sx={[
+        {
+          zIndex: 'drawer',
+          '& .LayoutOverlayBase-overlayPane': {
+            minWidth: itemWidthMd,
+          },
         },
-      }}
+        ...(Array.isArray(overlaySx) ? overlaySx : [overlaySx]),
+      ]}
     >
       <MotionDiv layout layoutDependency={selectionValue} sx={{ display: 'grid' }}>
         <Box
@@ -183,6 +188,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
       </MotionDiv>
       <MotionDiv layout='position' layoutDependency={selectionValue} sx={{ display: 'grid' }}>
         <Box
+          className={classes.wrapper}
           sx={[
             (theme) => ({
               display: 'grid',

packages/next-ui/OverlayOrPopperChip/OverlayPanel.tsx

@@ -1,5 +1,6 @@
 import { Overlay } from '../Overlay/components/Overlay'
 import type { OverlayProps } from '../Overlay/components/OverlaySsr'
+import { nonNullable } from '../RenderType/nonNullable'
 import { OverlayPanelActions } from './OverlayPanelActions'
 import type { PanelProps } from './types'
 
@@ -15,12 +16,17 @@ export function OverlayPanel(props: OverlayPanelProps) {
       {...overlayProps}
       onClosed={onClose}
       active={Boolean(activeEl)}
-      sx={{
-        '& .LayoutOverlayBase-overlayPane': {
-          display: 'grid',
-          gridTemplateRows: 'min-content auto min-content',
+      sx={[
+        {
+          '& .LayoutOverlayBase-overlayPane': {
+            display: 'grid',
+            gridTemplateRows: 'min-content auto min-content',
+          },
         },
-      }}
+        ...(Array.isArray(overlayProps?.sx) ? overlayProps.sx : [overlayProps?.sx]).filter(
+          nonNullable,
+        ),
+      ]}
     >
       {() => (
         <OverlayPanelActions onClose={onClose} {...rest}>