@graphcommerce/next-ui 4.11.2 → 4.13.1

package/Navigation/components/NavigationOverlay.tsx

@@ -0,0 +1,237 @@
+import styled from '@emotion/styled'
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/react'
+import { Box, Fab, SxProps, Theme, useEventCallback, useMediaQuery } from '@mui/material'
+import { m } from 'framer-motion'
+import { IconSvg, useIconSvgSize } from '../../IconSvg'
+import { LayoutHeaderContent } from '../../Layout/components/LayoutHeaderContent'
+import { LayoutTitle } from '../../Layout/components/LayoutTitle'
+import { Overlay } from '../../Overlay/components/Overlay'
+import { extendableComponent } from '../../Styles/extendableComponent'
+import { useFabSize } from '../../Theme'
+import { iconClose, iconChevronLeft } from '../../icons'
+import {
+  isNavigationButton,
+  isNavigationComponent,
+  NavigationContextType,
+  NavigationNodeButton,
+  NavigationNodeHref,
+  useNavigation,
+} from '../hooks/useNavigation'
+import { NavigationList } from './NavigationList'
+
+type NavigationOverlayProps = {
+  active: boolean
+  sx?: SxProps<Theme>
+  stretchColumns?: boolean
+  itemWidth: string
+}
+
+function findCurrent(
+  items: NavigationContextType['items'],
+  selected: NavigationContextType['selected'],
+): NavigationNodeHref | NavigationNodeButton | undefined {
+  const lastItem = selected.slice(-1)[0]
+
+  if (!lastItem) return undefined
+
+  for (const item of items) {
+    // eslint-disable-next-line no-continue
+    if (isNavigationComponent(item)) continue
+
+    // If the item is the current one, return it
+    if (item.id === lastItem) return item
+
+    // Recursively find item
+    if (isNavigationButton(item)) return findCurrent(item.childItems, selected)
+  }
+  return undefined
+}
+
+const MotionDiv = styled(m.div)()
+
+const componentName = 'Navigation'
+const parts = ['root', 'navigation', 'header', 'column'] as const
+const { classes } = extendableComponent(componentName, parts)
+
+export function NavigationOverlay(props: NavigationOverlayProps) {
+  const { active, sx, stretchColumns, itemWidth } = props
+  const { selected, select, items, onClose } = useNavigation()
+
+  const fabSize = useFabSize('responsive')
+  const svgSize = useIconSvgSize('large')
+
+  const isMobile = useMediaQuery<Theme>((theme) => theme.breakpoints.down('md'))
+  const handleOnBack = useEventCallback(() => {
+    if (isMobile) select(selected.slice(0, -1))
+    else select([])
+  })
+
+  const showBack = selected.length > 0
+
+  return (
+    <Overlay
+      className={classes.root}
+      active={active}
+      onClosed={onClose}
+      variantSm='left'
+      sizeSm='floating'
+      justifySm='start'
+      variantMd='left'
+      sizeMd='floating'
+      justifyMd='start'
+      sx={{
+        zIndex: 'drawer',
+        '& .LayoutOverlayBase-overlayPane': {
+          minWidth: 'auto !important',
+          width: 'max-content',
+          overflow: 'hidden',
+          display: 'grid',
+          gridTemplateRows: 'auto 1fr',
+        },
+      }}
+    >
+      <MotionDiv layout style={{ display: 'grid' }}>
+        <Box
+          className={classes.header}
+          sx={(theme) => ({
+            top: 0,
+            position: 'sticky',
+            height: { xs: theme.appShell.headerHeightSm, md: theme.appShell.appBarHeightMd },
+            zIndex: 1,
+          })}
+        >
+          <LayoutHeaderContent
+            floatingMd={false}
+            floatingSm={false}
+            switchPoint={0}
+            layout='position'
+            left={
+              showBack && (
+                <Fab
+                  color='inherit'
+                  onClick={handleOnBack}
+                  sx={{
+                    boxShadow: 'none',
+                    marginLeft: `calc((${fabSize} - ${svgSize}) * -0.5)`,
+                    marginRight: `calc((${fabSize} - ${svgSize}) * -0.5)`,
+                  }}
+                  size='responsive'
+                  aria-label={i18n._(/* i18n */ 'Back')}
+                >
+                  <IconSvg src={iconChevronLeft} size='large' aria-hidden />
+                </Fab>
+              )
+            }
+            right={
+              <Fab
+                color='inherit'
+                onClick={() => onClose()}
+                sx={{
+                  boxShadow: 'none',
+                  marginLeft: `calc((${fabSize} - ${svgSize}) * -0.5)`,
+                  marginRight: `calc((${fabSize} - ${svgSize}) * -0.5)`,
+                }}
+                size='responsive'
+                aria-label={i18n._(/* i18n */ 'Close')}
+              >
+                <IconSvg src={iconClose} size='large' aria-hidden />
+              </Fab>
+            }
+          >
+            <LayoutTitle size='small' component='span'>
+              {findCurrent(items, selected)?.name ?? <Trans id='Menu' />}
+            </LayoutTitle>
+          </LayoutHeaderContent>
+        </Box>
+      </MotionDiv>
+
+      <MotionDiv layout='position' style={{ display: 'grid' }}>
+        <Box
+          sx={(theme) => ({
+            display: 'grid',
+            alignItems: !stretchColumns ? 'start' : undefined,
+
+            [theme.breakpoints.down('md')]: {
+              overflow: 'hidden',
+              scrollSnapType: 'x mandatory',
+              width: `calc(${theme.spacings.md} + ${theme.spacings.md} + ${itemWidth})`,
+            },
+            '& .NavigationItem-item': {
+              width: itemWidth,
+            },
+          })}
+        >
+          <Box
+            className={classes.navigation}
+            sx={[
+              (theme) => ({
+                py: theme.spacings.md,
+                display: 'grid',
+                gridAutoFlow: 'column',
+                scrollSnapAlign: 'end',
+                '& > ul > li > a, & > ul > li > [role=button]': {
+                  '& span': {
+                    typography: 'h2',
+                  },
+                  // '& svg': { display: 'none' },
+                },
+                '& .Navigation-column': {},
+                '& .NavigationItem-item': {
+                  mx: theme.spacings.md,
+                  whiteSpace: 'nowrap',
+                },
+                '& .NavigationItem-item.first': {
+                  // mt: theme.spacings.md,
+                },
+                '& .Navigation-column:first-of-type': {
+                  boxShadow: 'none',
+                },
+              }),
+              ...(Array.isArray(sx) ? sx : [sx]),
+            ]}
+          >
+            {selected.length >= 0 && (
+              <Box
+                sx={(theme) => ({
+                  gridArea: '1 / 1 / 999 / 2',
+                  boxShadow: `inset 1px 0 ${theme.palette.divider}`,
+                })}
+                className={classes.column}
+              />
+            )}
+            {selected.length >= 1 && (
+              <Box
+                sx={(theme) => ({
+                  gridArea: '1 / 2 / 999 / 3',
+                  boxShadow: `inset 1px 0 ${theme.palette.divider}`,
+                })}
+                className={classes.column}
+              />
+            )}
+            {selected.length >= 2 && (
+              <Box
+                sx={(theme) => ({
+                  gridArea: '1 / 3 / 999 / 4',
+                  boxShadow: `inset 1px 0 ${theme.palette.divider}`,
+                })}
+                className={classes.column}
+              />
+            )}
+            {selected.length >= 3 && (
+              <Box
+                sx={(theme) => ({
+                  gridArea: '1 / 4 / 999 / 5',
+                  boxShadow: `inset 1px 0 ${theme.palette.divider}`,
+                })}
+                className={classes.column}
+              />
+            )}
+
+            <NavigationList items={items} selected />
+          </Box>
+        </Box>
+      </MotionDiv>
+    </Overlay>
+  )
+}

package/Navigation/components/NavigationProvider.tsx

@@ -0,0 +1,66 @@
+import { useEventCallback } from '@mui/material'
+import { MotionConfig } from 'framer-motion'
+import { useState, useMemo } from 'react'
+import { isElement } from 'react-is'
+import {
+  NavigationNode,
+  NavigationPath,
+  NavigationContextType,
+  NavigationContext,
+  NavigationSelect,
+} from '../hooks/useNavigation'
+
+export type NavigationProviderProps = {
+  items: (NavigationNode | React.ReactElement)[]
+  hideRootOnNavigate?: boolean
+  closeAfterNavigate?: boolean
+  children?: React.ReactNode
+  animationDuration?: number
+  onChange?: NavigationSelect
+  onClose?: NavigationContextType['onClose']
+}
+
+const nonNullable = <T,>(value: T): value is NonNullable<T> => value !== null && value !== undefined
+
+export function NavigationProvider(props: NavigationProviderProps) {
+  const {
+    items,
+    onChange,
+    hideRootOnNavigate = true,
+    closeAfterNavigate = false,
+    animationDuration = 0.275,
+    children,
+    onClose: onCloseUnstable,
+  } = props
+
+  const [selected, setSelected] = useState<NavigationPath>([])
+
+  const select = useEventCallback((incomming: NavigationPath) => {
+    setSelected(incomming)
+    onChange?.(incomming)
+  })
+
+  const onClose: NavigationContextType['onClose'] = useEventCallback((e, href) => {
+    onCloseUnstable?.(e, href)
+    setTimeout(() => select([]), animationDuration * 1000)
+  })
+
+  const value = useMemo<NavigationContextType>(
+    () => ({
+      hideRootOnNavigate,
+      selected,
+      select,
+      items: items
+        .map((item, index) => (isElement(item) ? { id: item.key ?? index, component: item } : item))
+        .filter(nonNullable),
+      onClose,
+    }),
+    [hideRootOnNavigate, selected, select, items, onClose],
+  )
+
+  return (
+    <MotionConfig transition={{ duration: animationDuration }}>
+      <NavigationContext.Provider value={value}>{children}</NavigationContext.Provider>
+    </MotionConfig>
+  )
+}

package/Navigation/hooks/useNavigation.ts

@@ -0,0 +1,58 @@
+import { createContext, useContext } from 'react'
+
+export type NavigationId = string | number
+export type NavigationPath = NavigationId[]
+export type NavigationSelect = (selected: NavigationPath) => void
+export type NavigationRender = React.FC<
+  (NavigationNodeComponent | NavigationNodeHref) & { children?: React.ReactNode }
+>
+
+export type NavigationOnClose = (
+  event?: React.MouseEvent<HTMLAnchorElement>,
+  href?: string | undefined,
+) => void
+export type NavigationContextType = {
+  selected: NavigationPath
+  select: NavigationSelect
+  items: NavigationNode[]
+  hideRootOnNavigate: boolean
+  onClose: NavigationOnClose
+}
+
+type NavigationNodeBase = {
+  id: NavigationId
+}
+
+export type NavigationNodeHref = NavigationNodeBase & {
+  name: string
+  href: string
+}
+
+export type NavigationNodeButton = NavigationNodeBase & {
+  name: string
+  childItems: NavigationNode[]
+}
+
+export type NavigationNodeComponent = NavigationNodeBase & {
+  component: React.ReactNode
+}
+
+export type NavigationNode = NavigationNodeHref | NavigationNodeButton | NavigationNodeComponent
+
+export function isNavigationHref(node: NavigationNodeBase): node is NavigationNodeHref {
+  return 'href' in node
+}
+
+export function isNavigationButton(node: NavigationNodeBase): node is NavigationNodeButton {
+  return (node as NavigationNodeButton).childItems?.length > 0
+}
+
+export function isNavigationComponent(node: NavigationNodeBase): node is NavigationNodeComponent {
+  return 'component' in node
+}
+
+export const NavigationContext = createContext(undefined as unknown as NavigationContextType)
+
+export function useNavigation() {
+  return useContext(NavigationContext)
+}

package/Navigation/index.ts

@@ -0,0 +1,4 @@
+export * from './components/NavigationOverlay'
+export * from './components/NavigationFab'
+export * from './hooks/useNavigation'
+export * from './components/NavigationProvider'

package/Overlay/components/Overlay.tsx

@@ -0,0 +1,61 @@
+import { ScrollerProvider, ScrollSnapType } from '@graphcommerce/framer-scroller'
+import { Box } from '@mui/material'
+import { useEffect, useState } from 'react'
+import type { SetOptional } from 'type-fest'
+import { OverlayBase, LayoutOverlayBaseProps } from './OverlayBase'
+
+export type OverlayProps = Omit<
+  SetOptional<LayoutOverlayBaseProps, 'variantSm' | 'variantMd'>,
+  'direction' | 'offsetPageY' | 'isPresent' | 'safeToRemove'
+>
+
+export function Overlay(props: OverlayProps) {
+  const { children, variantSm = 'bottom', variantMd = 'right', active, ...otherProps } = props
+
+  const scrollSnapTypeSm: ScrollSnapType =
+    variantSm === 'left' || variantSm === 'right' ? 'inline mandatory' : 'block proximity'
+  const scrollSnapTypeMd: ScrollSnapType =
+    variantMd === 'left' || variantMd === 'right' ? 'inline mandatory' : 'block proximity'
+
+  // todo: The overlay is always present in the DOM and the initial scroll position is set to 0.
+  //       This means in this case that the overlay is visisble. LayoutOverlayBase sets the scroll position to 320 with JS.
+  //       This would cause the overlay to be visisble for a moment before the scroll position is set.
+  //       The solution is to set the the first scroll-snap-align and scroll-snap-stop to the open position of the overlay.
+  //       However: We have control of the LayoutOverlayBase, we do not have control of all the child components so that solution will not work..
+  const [loaded, setLoaded] = useState(false)
+  useEffect(() => setLoaded(true), [])
+
+  return (
+    <Box
+      className='Overlay'
+      sx={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        transform: loaded ? undefined : 'translateX(-200vw)',
+        pointerEvents: active ? undefined : 'none',
+        right: 0,
+        bottom: 0,
+        zIndex: 'drawer',
+        '& .LayoutOverlayBase-overlayPane': {
+          boxShadow: active ? undefined : 0,
+        },
+      }}
+    >
+      <ScrollerProvider scrollSnapTypeSm={scrollSnapTypeSm} scrollSnapTypeMd={scrollSnapTypeMd}>
+        <OverlayBase
+          offsetPageY={0}
+          variantMd={variantMd}
+          variantSm={variantSm}
+          direction={1}
+          active={active}
+          isPresent={active}
+          safeToRemove={undefined}
+          {...otherProps}
+        >
+          {children}
+        </OverlayBase>
+      </ScrollerProvider>
+    </Box>
+  )
+}

package/{LayoutOverlay/components/LayoutOverlayBase.tsx → Overlay/components/OverlayBase.tsx}

@@ -1,4 +1,3 @@
-import { useGo, usePageContext, useScrollOffset } from '@graphcommerce/framer-next-pages'
 import { Scroller, useScrollerContext, useScrollTo } from '@graphcommerce/framer-scroller'
 import {
   clientSizeCssVar,
@@ -6,7 +5,7 @@ import {
   useIsomorphicLayoutEffect,
 } from '@graphcommerce/framer-utils'
 import { Box, styled, SxProps, Theme, useTheme, useThemeProps } from '@mui/material'
-import { m, useDomEvent, useMotionValue, usePresence, useTransform } from 'framer-motion'
+import { m, useDomEvent, useMotionValue, useTransform } from 'framer-motion'
 import React, { useCallback, useEffect, useRef } from 'react'
 import { LayoutProvider } from '../../Layout/components/LayoutProvider'
 import { ExtendableComponent, extendableComponent } from '../../Styles'
@@ -35,6 +34,12 @@ export type LayoutOverlayBaseProps = {
   className?: string
   sx?: SxProps<Theme>
   sxBackdrop?: SxProps<Theme>
+  active: boolean
+  direction: 1 | -1
+  onClosed: () => void
+  offsetPageY: number
+  isPresent: boolean
+  safeToRemove: (() => void) | null | undefined
 } & StyleProps &
   OverridableProps
 
@@ -61,7 +66,7 @@ const clearScrollLock = () => {
   document.body.style.overflow = ''
 }
 
-export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
+export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
   const props = useThemeProps({ name, props: incommingProps })
 
   const {
@@ -75,6 +80,12 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
     justifyMd = 'stretch',
     sx = [],
     sxBackdrop = [],
+    active,
+    onClosed,
+    direction,
+    offsetPageY,
+    isPresent,
+    safeToRemove,
   } = props
 
   const th = useTheme()
@@ -88,12 +99,8 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
   const { scrollerRef, snap } = useScrollerContext()
   const positions = useOverlayPosition()
   const scrollTo = useScrollTo()
-  const [isPresent, safeToRemove] = usePresence()
   const beforeRef = useRef<HTMLDivElement>(null)
 
-  const { closeSteps, active, direction } = usePageContext()
-  const close = useGo(closeSteps * -1)
-
   const position = useMotionValue<OverlayPosition>(OverlayPosition.UNOPENED)
 
   const classes = withState({ variantSm, variantMd, sizeSm, sizeMd, justifySm, justifyMd })
@@ -105,7 +112,15 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
   // When the component is mounted, we need to set the initial position of the overlay.
   useIsomorphicLayoutEffect(() => {
     const scroller = scrollerRef.current
-    if (!scroller || !isPresent) return undefined
+
+    if (!scroller) return undefined
+
+    if (!isPresent && position.get() === OverlayPosition.UNOPENED) {
+      scroller.scrollLeft = positions.closed.x.get()
+      scroller.scrollTop = positions.closed.y.get()
+    }
+
+    if (!isPresent) return undefined
 
     const open = { x: positions.open.x.get(), y: positions.open.y.get() }
 
@@ -148,7 +163,7 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
 
   // When the overlay is closed by navigating away, we're closing the overlay.
   useEffect(() => {
-    if (isPresent) return
+    if (isPresent || position.get() === OverlayPosition.UNOPENED) return
     position.set(OverlayPosition.CLOSED)
     clearScrollLock()
 
@@ -164,8 +179,8 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
     if (position.get() !== OverlayPosition.OPENED) return
     position.set(OverlayPosition.CLOSED)
     clearScrollLock()
-    close()
-  }, [close, position])
+    onClosed()
+  }, [onClosed, position])
 
   // Handle escape key
   const windowRef = useRef(typeof window !== 'undefined' ? window : null)
@@ -187,7 +202,6 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
   }, [offsetY])
 
   // Create the exact position for the LayoutProvider which offsets the top of the overlay
-  const offsetPageY = useScrollOffset().y
   const scrollWithoffset = useTransform(
     [scroll.y, positions.open.y, offsetY],
     ([y, openY, offsetYv]: number[]) => Math.max(0, y - openY - offsetYv + offsetPageY),
@@ -333,7 +347,6 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
                 marginTop: `calc(${smSpacingTop} * -1)`,
                 paddingTop: smSpacingTop,
               },
-
               '&.sizeSmFloating': {
                 padding: `${theme.page.vertical} ${theme.page.horizontal}`,
               },
@@ -353,7 +366,8 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
             },
           })}
         >
-          <Box
+          <MotionDiv
+            layout
             className={classes.overlayPane}
             sx={(theme) => ({
               pointerEvents: 'all',
@@ -419,7 +433,7 @@ export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
             })}
           >
             <LayoutProvider scroll={scrollWithoffset}>{children}</LayoutProvider>
-          </Box>
+          </MotionDiv>
         </Box>
       </Scroller>
     </>

package/Overlay/components/index.ts

@@ -0,0 +1,2 @@
+export * from './OverlayBase'
+export * from './Overlay'

package/Overlay/index.ts

@@ -0,0 +1 @@
+export * from './components'

package/PageMeta/PageMeta.tsx

@@ -1,10 +1,8 @@
 import { usePageContext } from '@graphcommerce/framer-next-pages'
-import {
-  resolveHref,
-  addBasePath,
-  addLocale,
-  getDomainLocale,
-} from 'next/dist/shared/lib/router/router'
+import { addBasePath } from 'next/dist/client/add-base-path'
+import { addLocale } from 'next/dist/client/add-locale'
+import { getDomainLocale } from 'next/dist/client/get-domain-locale'
+import { resolveHref } from 'next/dist/shared/lib/router/router'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 

package/Theme/DarkLightModeThemeProvider.tsx

@@ -108,11 +108,7 @@ export function DarkLightModeMenuSecondaryItem(props: ListItemButtonProps) {
         <IconSvg src={currentMode === 'light' ? iconMoon : iconSun} size='medium' />
       </ListItemIcon>
       <ListItemText>
-        {currentMode === 'light' ? (
-          <Trans id='Switch to Dark Mode' />
-        ) : (
-          <Trans id='Switch to Light Mode' />
-        )}
+        {currentMode === 'light' ? <Trans id='Dark Mode' /> : <Trans id='Light Mode' />}
       </ListItemText>
     </ListItemButton>
   )

package/index.ts

@@ -1,5 +1,5 @@
-export * from './ActionCard/ActionCardList'
 export * from './ActionCard/ActionCard'
+export * from './ActionCard/ActionCardList'
 export * from './AnimatedRow/AnimatedRow'
 export * from './Blog/BlogAuthor/BlogAuthor'
 export * from './Blog/BlogContent/BlogContent'
@@ -22,6 +22,7 @@ export * from './Form/InputCheckmark'
 export * from './FramerScroller'
 export * from './FullPageMessage/FullPageMessage'
 export * from './Highlight/Highlight'
+export * from './hooks'
 export * from './IconHeader/IconHeader'
 export * from './icons'
 export * from './IconSvg'
@@ -30,6 +31,8 @@ export * from './Layout'
 export * from './LayoutDefault'
 export * from './LayoutOverlay'
 export * from './LayoutParts'
+export * from './Navigation'
+export * from './Overlay'
 export * from './Page'
 export * from './PageLoadIndicator/PageLoadIndicator'
 export * from './PageMeta/PageMeta'
@@ -39,8 +42,8 @@ export * from './Row'
 export * from './SectionContainer/SectionContainer'
 export * from './SectionHeader/SectionHeader'
 export * from './Separator/Separator'
-export * from './Snackbar/MessageSnackbar'
 export * from './Snackbar/ErrorSnackbar'
+export * from './Snackbar/MessageSnackbar'
 export * from './Snackbar/MessageSnackbarImpl'
 export * from './StarRatingField/StarRatingField'
 export * from './Stepper/Stepper'
@@ -50,6 +53,5 @@ export * from './Theme'
 export * from './TimeAgo/TimeAgo'
 export * from './ToggleButton/ToggleButton'
 export * from './ToggleButtonGroup/ToggleButtonGroup'
-export * from './hooks'
 export * from './UspList/UspList'
 export * from './UspList/UspListItem'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.11.2",
+  "version": "4.13.1",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -15,15 +15,15 @@
   },
   "dependencies": {
     "@emotion/babel-preset-css-prop": "^11.2.0",
-    "@emotion/cache": "^11.7.1",
-    "@emotion/react": "^11.9.0",
+    "@emotion/cache": "^11.9.3",
+    "@emotion/react": "^11.9.3",
     "@emotion/server": "^11.4.0",
-    "@emotion/styled": "^11.6.0",
-    "@graphcommerce/framer-next-pages": "3.2.3",
-    "@graphcommerce/framer-scroller": "2.1.20",
+    "@emotion/styled": "^11.9.3",
+    "@graphcommerce/framer-next-pages": "3.2.4",
+    "@graphcommerce/framer-scroller": "2.1.23",
     "@graphcommerce/framer-utils": "3.1.4",
     "@graphcommerce/image": "3.1.7",
-    "react-is": "^18.1.0",
+    "react-is": "^18.2.0",
     "react-schemaorg": "^2.0.0",
     "schema-dts": "^1.1.0"
   },
@@ -38,12 +38,12 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.8",
+    "@graphcommerce/eslint-config-pwa": "^4.1.9",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
-    "@graphcommerce/typescript-config-pwa": "^4.0.3",
+    "@graphcommerce/typescript-config-pwa": "^4.0.4",
     "@playwright/test": "^1.21.1",
     "@types/react-is": "^17.0.3",
     "type-fest": "^2.12.2",
-    "typescript": "4.7.3"
+    "typescript": "4.7.4"
   }
 }