@graphcommerce/next-ui 10.1.0-canary.24 → 10.1.0-canary.25

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 10.1.0-canary.25
+
+### Minor Changes
+
+- [#2637](https://github.com/graphcommerce-org/graphcommerce/pull/2637) [`bdaa6ec`](https://github.com/graphcommerce-org/graphcommerce/commit/bdaa6ec6aa2669b74fc6702ad46336db4c154b7c) - Refactored `LayoutNavigation` into composable pieces (`Header`, `HeaderContainer`, `MenuOverlay`, project-local `LayoutDefault`). `LayoutDefault` / `LayoutDefaultProps` in `@graphcommerce/next-ui` are marked `@deprecated`. If you are upgrading and do not want these changes, you can just discard them. This is just a structural change for more ease of use. No visually change. ([@bramvanderholst](https://github.com/bramvanderholst))
+
+### Patch Changes
+
+- [#2637](https://github.com/graphcommerce-org/graphcommerce/pull/2637) [`9f5e765`](https://github.com/graphcommerce-org/graphcommerce/commit/9f5e76575e3932f8fcd8689d8ef42e4c44b923d1) - Added disableScrollEffects prop to CartFab & NavigationFab for easier customization of the header ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2637](https://github.com/graphcommerce-org/graphcommerce/pull/2637) [`21a676b`](https://github.com/graphcommerce-org/graphcommerce/commit/21a676bb50888278d437b88a6e49e6f3d0c4d4bb) - Changed Footer props type to allow setting footer container props ([@bramvanderholst](https://github.com/bramvanderholst))
+
 ## 10.1.0-canary.24
 
 ## 10.1.0-canary.23

package/Footer/Footer.tsx

@@ -1,7 +1,7 @@
 import { sxx } from '@graphcommerce/next-ui'
-import type { ContainerProps } from '@mui/material'
 import { Box } from '@mui/material'
-import React from 'react'
+import type React from 'react'
+import type { ContainerSizingProps } from '../Container/Container'
 import { Container } from '../Container/Container'
 import { LazyHydrate } from '../LazyHydrate'
 import { extendableComponent } from '../Styles'
@@ -12,7 +12,7 @@ export type FooterProps = {
   customerService?: React.ReactNode
   copyright?: React.ReactNode
   children?: React.ReactNode
-} & ContainerProps
+} & ContainerSizingProps
 
 const { classes, selectors } = extendableComponent('Footer', [
   'root',

package/LayoutDefault/components/LayoutDefault.tsx

@@ -10,6 +10,10 @@ import { SkipLink } from '../../SkipLink/SkipLink'
 import { extendableComponent } from '../../Styles'
 import { useFabSize } from '../../Theme'
 
+/**
+ * @deprecated Import `LayoutDefaultProps` from your project's
+ * `components/Layout/LayoutDefault.tsx` instead.
+ */
 export type LayoutDefaultProps = {
   className?: string
   beforeHeader?: React.ReactNode
@@ -31,6 +35,10 @@ const { withState } = extendableComponent<OwnerState, 'LayoutDefault', typeof pa
   parts,
 )
 
+/**
+ * @deprecated Import `LayoutDefault` from your project's
+ * `components/Layout/LayoutDefault.tsx` instead.
+ */
 export function LayoutDefault(props: LayoutDefaultProps) {
   const {
     children,

package/Navigation/components/NavigationFab.tsx

@@ -17,6 +17,8 @@ const MotionDiv = styled(m.div)({})
 export type NavigationFabProps = {
   menuIcon?: React.ReactNode
   closeIcon?: React.ReactNode
+  disableScrollEffects?: boolean
+  disableElevation?: boolean
   sx?: SxProps<Theme>
 } & Pick<FabProps, 'color' | 'size' | 'variant' | 'onClick'>
 
@@ -29,7 +31,14 @@ type OwnerState = {
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
 export function NavigationFab(props: NavigationFabProps) {
-  const { menuIcon, closeIcon, sx = [], ...fabProps } = props
+  const {
+    menuIcon,
+    closeIcon,
+    disableScrollEffects,
+    disableElevation,
+    sx = [],
+    ...fabProps
+  } = props
   const router = useRouter()
   const [openEl, setOpenEl] = React.useState<null | HTMLElement>(null)
 
@@ -53,28 +62,41 @@ export function NavigationFab(props: NavigationFabProps) {
     <Box sx={sxx({ position: 'relative', width: fabIconSize, height: fabIconSize }, sx)}>
       <MotionDiv
         className={classes.wrapper}
-        sx={{
-          [theme.breakpoints.down('md')]: {
-            opacity: '1 !important',
-            transform: 'none !important',
-          },
-        }}
+        sx={
+          disableScrollEffects
+            ? {
+                opacity: '1 !important',
+                transform: 'none !important',
+              }
+            : {
+                [theme.breakpoints.down('md')]: {
+                  opacity: '1 !important',
+                  transform: 'none !important',
+                },
+              }
+        }
         style={{ opacity }}
       >
         <Fab
           color='inherit'
           aria-label='Open Menu'
           size='responsive'
-          sx={{
-            boxShadow: 'none',
-            '&:hover, &:focus': {
+          sx={sxx(
+            {
               boxShadow: 'none',
+              pointerEvents: 'all',
+              '&:hover, &:focus': {
+                boxShadow: 'none',
+              },
+            },
+            !fabProps.color && {
+              '&:hover, &:focus': {
+                background: theme.vars.palette.text.primary,
+              },
               background: theme.vars.palette.text.primary,
+              color: theme.vars.palette.background.paper,
             },
-            background: theme.vars.palette.text.primary,
-            pointerEvents: 'all',
-            color: theme.vars.palette.background.paper,
-          }}
+          )}
           className={classes.fab}
           {...fabProps}
         >
@@ -109,20 +131,22 @@ export function NavigationFab(props: NavigationFabProps) {
             />
           )}
         </Fab>
-        <MotionDiv
-          sx={{
-            pointerEvents: 'none',
-            borderRadius: '99em',
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
-            boxShadow: theme.shadows[6],
-            top: 0,
-            [theme.breakpoints.down('md')]: { opacity: '1 !important' },
-          }}
-          className={classes.shadow}
-          style={{ opacity: shadowOpacity }}
-        />
+        {!disableElevation && (
+          <MotionDiv
+            sx={{
+              pointerEvents: 'none',
+              borderRadius: '99em',
+              position: 'absolute',
+              height: '100%',
+              width: '100%',
+              boxShadow: theme.shadows[6],
+              top: 0,
+              [theme.breakpoints.down('md')]: { opacity: '1 !important' },
+            }}
+            className={classes.shadow}
+            style={disableScrollEffects ? undefined : { opacity: shadowOpacity }}
+          />
+        )}
       </MotionDiv>
     </Box>
   )

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.1.0-canary.24",
+  "version": "10.1.0-canary.25",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -43,13 +43,13 @@
     "@emotion/react": "^11.14.0",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.14.1",
-    "@graphcommerce/eslint-config-pwa": "^10.1.0-canary.24",
-    "@graphcommerce/framer-next-pages": "^10.1.0-canary.24",
-    "@graphcommerce/framer-scroller": "^10.1.0-canary.24",
-    "@graphcommerce/framer-utils": "^10.1.0-canary.24",
-    "@graphcommerce/image": "^10.1.0-canary.24",
-    "@graphcommerce/prettier-config-pwa": "^10.1.0-canary.24",
-    "@graphcommerce/typescript-config-pwa": "^10.1.0-canary.24",
+    "@graphcommerce/eslint-config-pwa": "^10.1.0-canary.25",
+    "@graphcommerce/framer-next-pages": "^10.1.0-canary.25",
+    "@graphcommerce/framer-scroller": "^10.1.0-canary.25",
+    "@graphcommerce/framer-utils": "^10.1.0-canary.25",
+    "@graphcommerce/image": "^10.1.0-canary.25",
+    "@graphcommerce/prettier-config-pwa": "^10.1.0-canary.25",
+    "@graphcommerce/typescript-config-pwa": "^10.1.0-canary.25",
     "@lingui/core": "^5",
     "@lingui/macro": "^5",
     "@lingui/react": "^5",