@graphcommerce/next-ui 4.1.3 → 4.1.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Change Log
 
+## 4.1.4
+
+### Patch Changes
+
+- [#1287](https://github.com/ho-nl/m2-pwa/pull/1287)
+  [`d17f97d3a`](https://github.com/ho-nl/m2-pwa/commit/d17f97d3a786c33a99a10e4e949251c52fdbbdac)
+  Thanks [@paales](https://github.com/paales)! - Allow passing sx prop to SidebarGallery and
+  ContentLinks
+
 ## 4.1.3
 
 ### Patch Changes

package/FramerScroller/SidebarGallery.tsx

@@ -8,7 +8,7 @@ import {
   ScrollerProvider,
 } from '@graphcommerce/framer-scroller'
 import { clientSize, useMotionValueValue } from '@graphcommerce/framer-utils'
-import { Fab, useTheme, alpha, Box, styled } from '@mui/material'
+import { Fab, useTheme, alpha, Box, styled, SxProps, Theme } from '@mui/material'
 import { m, useDomEvent, useMotionValue } from 'framer-motion'
 import { useRouter } from 'next/router'
 import React, { useEffect, useRef } from 'react'
@@ -47,10 +47,17 @@ export type SidebarGalleryProps = {
   images: MotionImageAspectProps[]
   aspectRatio?: [number, number]
   routeHash?: string
+  sx?: SxProps<Theme>
 }
 
 export function SidebarGallery(props: SidebarGalleryProps) {
-  const { sidebar, images, aspectRatio: [width, height] = [1, 1], routeHash = 'gallery' } = props
+  const {
+    sidebar,
+    images,
+    aspectRatio: [width, height] = [1, 1],
+    sx,
+    routeHash = 'gallery',
+  } = props
 
   const router = useRouter()
   const prevRoute = usePrevPageRouter()
@@ -109,7 +116,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
 
   return (
     <ScrollerProvider scrollSnapAlign='center'>
-      <Row maxWidth={false} disableGutters className={classes.row}>
+      <Row maxWidth={false} disableGutters className={classes.row} sx={sx}>
         <MotionBox
           layout
           className={classes.root}

package/Row/ButtonLinkList/ButtonLinkListItem.tsx

@@ -13,7 +13,7 @@ const ButtonItem = styled(Button)(({ theme }) => ({
   borderBottom: `1px solid ${theme.palette.divider}`,
   borderRadius: 0,
   justifyContent: 'space-between',
-  ...theme.typography.body1,
+  typography: 'body1',
 }))
 
 export function ButtonLinkListItem(props: ButtonLinkProps) {

package/Row/ContentLinks/index.tsx

@@ -14,13 +14,18 @@ const parts = ['root', 'scroller', 'title'] as const
 const { classes } = extendableComponent(compName, parts)
 
 export function ContentLinks(props: ContentLinksProps) {
-  const { title, children } = props
+  const { title, children, sx = [] } = props
 
   return (
     <Container
       className={classes.root}
       maxWidth={false}
-      sx={(theme) => ({ marginBottom: `${theme.spacings.md}` })}
+      sx={[
+        (theme) => ({
+          marginBottom: `${theme.spacings.md}`,
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
     >
       <ScrollerProvider scrollSnapAlign='none'>
         <Scroller

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.1.3",
+  "version": "4.1.4",
   "author": "",
   "license": "MIT",
   "sideEffects": false,