@graphcommerce/next-ui 4.12.0 → 4.14.0

package/Navigation/components/NavigationFab.tsx

@@ -0,0 +1,106 @@
+import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import { Fab, styled, Box, SxProps, Theme, FabProps } from '@mui/material'
+import { m } from 'framer-motion'
+import { useRouter } from 'next/router'
+import React, { useEffect } from 'react'
+import { IconSvg } from '../../IconSvg'
+import { useScrollY } from '../../Layout/hooks/useScrollY'
+import { useFabAnimation } from '../../LayoutParts/useFabAnimation'
+import { extendableComponent } from '../../Styles/extendableComponent'
+import { useFabSize } from '../../Theme'
+import { iconMenu, iconClose } from '../../icons'
+
+const MotionDiv = styled(m.div)({})
+
+export type NavigationFabProps = {
+  menuIcon?: React.ReactNode
+  closeIcon?: React.ReactNode
+  sx?: SxProps<Theme>
+} & Pick<FabProps, 'color' | 'size' | 'variant' | 'onClick'>
+
+const name = 'MenuFab'
+const parts = ['wrapper', 'fab', 'shadow', 'menu'] as const
+type OwnerState = {
+  scrolled: boolean
+}
+
+const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
+
+export function NavigationFab(props: NavigationFabProps) {
+  const { menuIcon, closeIcon, sx = [], ...fabProps } = props
+  const router = useRouter()
+  const [openEl, setOpenEl] = React.useState<null | HTMLElement>(null)
+
+  const { opacity, shadowOpacity } = useFabAnimation()
+  const scrollY = useScrollY()
+  const scrolled = useMotionValueValue(scrollY, (y) => y > 10)
+
+  useEffect(() => {
+    const clear = () => setOpenEl(null)
+    router.events.on('routeChangeStart', clear)
+    return () => router.events.off('routeChangeStart', clear)
+  }, [router.events])
+
+  const fabIconSize = useFabSize('responsive')
+
+  const classes = withState({ scrolled })
+
+  return (
+    <Box
+      sx={[
+        { position: 'relative', width: fabIconSize, height: fabIconSize },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <MotionDiv
+        className={classes.wrapper}
+        sx={(theme) => ({
+          [theme.breakpoints.down('md')]: {
+            opacity: '1 !important',
+            transform: 'none !important',
+          },
+        })}
+        style={{ opacity }}
+      >
+        <Fab
+          color='inherit'
+          aria-label='Open Menu'
+          size='responsive'
+          sx={(theme) => ({
+            boxShadow: 'none',
+            '&:hover, &:focus': {
+              boxShadow: 'none',
+              background: theme.palette.text.primary,
+            },
+            background: theme.palette.text.primary,
+            pointerEvents: 'all',
+            color: theme.palette.background.paper,
+          })}
+          className={classes.fab}
+          {...fabProps}
+        >
+          {closeIcon ?? (
+            <IconSvg src={iconClose} size='large' sx={{ display: openEl ? 'block' : 'none' }} />
+          )}
+          {menuIcon ?? (
+            <IconSvg src={iconMenu} size='large' sx={{ display: openEl ? 'none' : 'block' }} />
+          )}
+        </Fab>
+        <MotionDiv
+          sx={(theme) => ({
+            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 }}
+        />
+      </MotionDiv>
+    </Box>
+  )
+}

package/Navigation/components/NavigationItem.tsx

@@ -0,0 +1,147 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import { Box, ListItemButton, styled, useEventCallback } from '@mui/material'
+import PageLink from 'next/link'
+import { IconSvg } from '../../IconSvg'
+import { extendableComponent } from '../../Styles/extendableComponent'
+import { iconChevronRight } from '../../icons'
+import {
+  isNavigationButton,
+  isNavigationComponent,
+  isNavigationHref,
+  NavigationNode,
+  NavigationPath,
+  useNavigation,
+} from '../hooks/useNavigation'
+import type { NavigationList } from './NavigationList'
+
+type OwnerState = {
+  first?: boolean
+  last?: boolean
+  // It is actually used.
+  // eslint-disable-next-line react/no-unused-prop-types
+  column: number
+}
+
+type NavigationItemProps = NavigationNode & {
+  parentPath: NavigationPath
+  idx: number
+  NavigationList: typeof NavigationList
+} & OwnerState
+
+const componentName = 'NavigationItem'
+const parts = ['li', 'ul', 'item'] as const
+
+const { withState } = extendableComponent<OwnerState, typeof componentName, typeof parts>(
+  componentName,
+  parts,
+)
+
+const NavigationLI = styled('li')({ display: 'contents' })
+
+export function NavigationItem(props: NavigationItemProps) {
+  const { id, parentPath, idx, first, last, NavigationList } = props
+
+  const row = idx + 1
+  const { selected, select, hideRootOnNavigate, onClose } = useNavigation()
+
+  const itemPath = [...parentPath, id]
+  const isSelected = selected.slice(0, itemPath.length).join('/') === itemPath.join('/')
+
+  const hidingRoot = hideRootOnNavigate && selected.length > 0
+  const hideItem = hidingRoot && itemPath.length === 1
+
+  const column = hidingRoot ? itemPath.length - 1 : itemPath.length
+  const classes = withState({ first, last, column: itemPath.length })
+
+  const onCloseHandler: React.MouseEventHandler<HTMLAnchorElement> = useEventCallback((e) => {
+    if (!isNavigationHref(props)) return
+    const { href } = props
+    onClose?.(e, href)
+  })
+
+  if (isNavigationButton(props)) {
+    const { childItems, name } = props
+    return (
+      <NavigationLI className={classes.li}>
+        <ListItemButton
+          className={classes.item}
+          role='button'
+          sx={{
+            gridRowStart: row,
+            gridColumnStart: column,
+            gap: (theme) => theme.spacings.xxs,
+            display: hideItem ? 'none' : 'flex',
+          }}
+          disabled={isSelected}
+          tabIndex={selected.join(',').includes(parentPath.join(',')) ? undefined : -1}
+          onClick={(e) => {
+            e.preventDefault()
+            if (!isSelected) select(itemPath)
+          }}
+        >
+          <Box
+            component='span'
+            sx={{
+              whiteSpace: 'nowrap',
+              overflowX: 'hidden',
+              textOverflow: 'ellipsis',
+              flexGrow: 1,
+            }}
+          >
+            {name}
+          </Box>
+          <IconSvg src={iconChevronRight} sx={{ flexShrink: 0 }} />
+        </ListItemButton>
+
+        <NavigationList items={childItems} selected={isSelected} parentPath={itemPath} />
+      </NavigationLI>
+    )
+  }
+
+  if (isNavigationHref(props)) {
+    const { name, href } = props
+    return (
+      <NavigationLI sx={[hideItem && { display: 'none' }]} className={classes.li}>
+        <PageLink href={href} passHref>
+          <ListItemButton
+            className={classes.item}
+            component='a'
+            sx={(theme) => ({
+              gridRowStart: row,
+              gridColumnStart: column,
+              gap: theme.spacings.xxs,
+            })}
+            tabIndex={selected.join(',').includes(parentPath.join(',')) ? undefined : -1}
+            onClick={onCloseHandler}
+          >
+            <Box
+              component='span'
+              sx={{
+                whiteSpace: 'nowrap',
+                overflowX: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            >
+              {name}
+            </Box>
+          </ListItemButton>
+        </PageLink>
+      </NavigationLI>
+    )
+  }
+
+  if (isNavigationComponent(props)) {
+    const { component } = props
+    return (
+      <NavigationLI sx={[hideItem && { display: 'none' }]} className={classes.li}>
+        <Box sx={{ gridRowStart: row, gridColumnStart: column }} className={classes.item}>
+          {component}
+        </Box>
+      </NavigationLI>
+    )
+  }
+
+  if (process.env.NODE_ENV !== 'production') throw Error('NavigationItem: unknown type')
+
+  return null
+}

package/Navigation/components/NavigationList.tsx

@@ -0,0 +1,50 @@
+import { styled } from '@mui/material'
+import { extendableComponent } from '../../Styles/extendableComponent'
+import { NavigationNode, NavigationPath } from '../hooks/useNavigation'
+import { NavigationItem } from './NavigationItem'
+
+const NavigationUList = styled('ul')({})
+
+type NavigationItemsProps = {
+  parentPath?: NavigationPath
+  items: NavigationNode[]
+  selected?: boolean
+}
+
+type OwnerState = {
+  column: number
+}
+
+const name = 'NavigationList'
+const parts = ['root'] as const
+const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
+
+// const componentName = 'NavigationItem'
+// const parts = ['li', 'ul', 'item'] as const
+
+export function NavigationList(props: NavigationItemsProps) {
+  const { items, parentPath = [], selected = false } = props
+
+  return (
+    <NavigationUList
+      sx={[
+        { display: 'block', position: 'absolute', left: '-10000px', top: '-10000px' },
+        selected && { display: 'contents' },
+      ]}
+      className={withState({ column: 0 }).root}
+    >
+      {items.map((item, idx) => (
+        <NavigationItem
+          NavigationList={NavigationList}
+          key={item.id}
+          {...item}
+          parentPath={parentPath}
+          idx={idx}
+          first={idx === 0}
+          last={idx === items.length - 1}
+          column={0}
+        />
+      ))}
+    </NavigationUList>
+  )
+}

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'