@graphcommerce/next-ui 3.25.1 → 4.0.0

package/ChipMenu/index.tsx

@@ -1,86 +1,47 @@
-import { Chip, ChipProps, makeStyles, Menu, Theme } from '@material-ui/core'
-import clsx from 'clsx'
+import { Chip, ChipProps, Menu, MenuProps, menuClasses, SxProps, Theme } from '@mui/material'
 import React, { PropsWithChildren, useState } from 'react'
-import SectionHeader from '../SectionHeader'
+import { SectionHeader } from '../SectionHeader'
+import { extendableComponent } from '../Styles'
 import { responsiveVal } from '../Styles/responsiveVal'
-import SvgImageSimple from '../SvgImage/SvgImageSimple'
+import { SvgIcon } from '../SvgIcon/SvgIcon'
 import { iconChevronDown, iconChevronUp, iconCancelAlt } from '../icons'
 
-export const useChipMenuStyles = makeStyles(
-  (theme: Theme) => ({
-    chip: {
-      background: `${theme.palette.background.default} !important`,
-    },
-    chipSelected: {
-      borderColor: theme.palette.text.primary,
-      color: theme.palette.text.primary,
-      '&:hover': {
-        background: `${theme.palette.background.default} !important`,
-        borderColor: theme.palette.divider,
-      },
-      '&:focus': {
-        background: `${theme.palette.background.paper} !important`,
-      },
-    },
-    menuPaper: {
-      minWidth: responsiveVal(200, 560),
-      maxWidth: 560,
-      marginTop: theme.spacings.xxs,
-      padding: `${theme.spacings.xs} ${theme.spacings.xs}`,
-      [theme.breakpoints.down('xs')]: {
-        minWidth: 0,
-        width: '100%',
-        maxWidth: `calc(100% - (${theme.page.horizontal} * 2))`,
-        margin: '0 auto',
-        marginTop: '8px',
-      },
-    },
-    iconCancel: {
-      stroke: `none !important`,
-      fill: `${theme.palette.text.primary} !important`,
-    },
-    menuList: {
-      padding: 0,
-      '&:focus': {
-        outline: 'none',
-      },
-    },
-    sectionHeaderWrapper: {
-      marginTop: 10,
-    },
-  }),
-  { name: 'ChipMenu' },
-)
+const { classes, selectors } = extendableComponent('FilterEqual', ['chip'] as const)
 
 export type ChipMenuProps = PropsWithChildren<Omit<ChipProps, 'children'>> & {
   selectedLabel?: React.ReactNode
   selected: boolean
   onClose?: () => void
   labelRight?: React.ReactNode
+  sx?: SxProps<Theme>
+  menuProps?: Partial<MenuProps>
 }
 
-export default function ChipMenu(props: ChipMenuProps) {
-  const { children, selected, onDelete, label, labelRight, onClose, selectedLabel, ...chipProps } =
-    props
+export function ChipMenu(props: ChipMenuProps) {
+  const {
+    children,
+    selected,
+    onDelete,
+    label,
+    labelRight,
+    onClose,
+    selectedLabel,
+    menuProps,
+    ...chipProps
+  } = props
+
   const [openEl, setOpenEl] = useState<null | HTMLElement>(null)
-  const classes = useChipMenuStyles(props)
 
-  let deleteIcon = selected ? (
-    <div>
-      <SvgImageSimple src={iconCancelAlt} className={classes.iconCancel} />
-    </div>
-  ) : (
-    <SvgImageSimple src={iconChevronDown} />
-  )
-  if (openEl) deleteIcon = <SvgImageSimple src={iconChevronUp} />
+  let deleteIcon = <SvgIcon src={iconChevronDown} size='medium' />
+  if (selected) deleteIcon = <SvgIcon src={iconCancelAlt} size='medium' fillIcon />
+  if (openEl) deleteIcon = <SvgIcon src={iconChevronUp} size='medium' />
 
-  const selectedAndMenuHidden = selected && !openEl && selectedLabel
+  const selectedAndMenuHidden = selected && !openEl && !!selectedLabel
 
   return (
     <>
       <Chip
-        variant='default'
-        color={selected || openEl ? 'primary' : 'default'}
+        color='default'
         clickable
         onDelete={onDelete || ((event) => setOpenEl(event.currentTarget.parentElement))}
         onClick={(event) => {
@@ -89,12 +50,26 @@ export default function ChipMenu(props: ChipMenuProps) {
         deleteIcon={deleteIcon}
         {...chipProps}
         label={selectedLabel ?? label}
-        className={clsx(
-          classes.chip,
-          chipProps.className,
-          selectedAndMenuHidden && classes.chipSelected,
-        )}
+        className={`${classes.chip} ${chipProps.className ?? ''} ${
+          selectedAndMenuHidden ? 'MuiChip-selected' : ''
+        }`}
+        sx={[
+          { bgcolor: 'background.default' },
+          selectedAndMenuHidden &&
+            ((theme) => ({
+              borderColor: 'text.primary',
+              color: 'text.primary',
+              '&:hover': {
+                background: `${theme.palette.background.default} !important`,
+                borderColor: `${theme.palette.divider} !important`,
+              },
+              '&:focus': {
+                background: `${theme.palette.background.paper} !important`,
+              },
+            })),
+        ]}
       />
+
       <Menu
         anchorEl={openEl}
         open={!!openEl}
@@ -102,19 +77,38 @@ export default function ChipMenu(props: ChipMenuProps) {
           if (onClose) onClose()
           setOpenEl(null)
         }}
-        getContentAnchorEl={null} // https://github.com/mui-org/material-ui/issues/7961#issuecomment-326116559
         anchorPosition={{ top: 6, left: 0 }}
         anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
-        classes={{ paper: classes.menuPaper, list: classes.menuList }}
+        {...menuProps}
+        sx={[
+          (theme) => ({
+            marginTop: theme.spacings.xxs,
+            [`& .${menuClasses.list}`]: {
+              padding: 0,
+              '&:focus': { outline: 'none' },
+            },
+            [`& .${menuClasses.paper}`]: {
+              minWidth: responsiveVal(200, 560),
+              maxWidth: 560,
+              padding: `0 ${theme.spacings.xs} ${theme.spacings.xs}`,
+              margin: 0,
+              [theme.breakpoints.down('sm')]: {
+                minWidth: 0,
+                width: '100%',
+                maxWidth: `calc(100% - (${theme.page.horizontal} * 2))`,
+                margin: '0 auto',
+              },
+            },
+          }),
+          // eslint-disable-next-line no-nested-ternary
+          ...(menuProps?.sx ? (Array.isArray(menuProps.sx) ? menuProps.sx : [menuProps.sx]) : []),
+        ]}
       >
-        <SectionHeader
-          labelLeft={label ?? ''}
-          labelRight={labelRight ?? ''}
-          usePadding
-          classes={{ sectionHeaderWrapper: classes.sectionHeaderWrapper }}
-        />
+        <SectionHeader labelLeft={label ?? ''} labelRight={labelRight ?? ''} usePadding />
         {children}
       </Menu>
     </>
   )
 }
+
+ChipMenu.selectors = selectors

package/ContainerWithHeader/index.tsx

@@ -1,49 +1,52 @@
-import { makeStyles, Theme, Typography } from '@material-ui/core'
+import { Box, SxProps, Theme, Typography } from '@mui/material'
 import React from 'react'
-import Row from '../Row'
-import { UseStyles } from '../Styles'
+import { Row } from '../Row'
+import { extendableComponent } from '../Styles'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    head: {
-      display: 'grid',
-      justifyContent: 'space-between',
-      gridTemplateColumns: 'auto auto',
-      alignItems: 'end',
-      marginBottom: theme.spacings.md,
-    },
-    title: {
-      lineHeight: 1,
-      textTransform: 'uppercase',
-    },
-    right: {
-      lineHeight: 1,
-    },
-  }),
-  { name: 'ContainerWithHeader' },
-)
+const { selectors, classes } = extendableComponent('ContainerWithHeader', [
+  'root',
+  'head',
+  'title',
+  'right',
+] as const)
 
 export type ContainerWithHeaderProps = {
   title: string
   rightArea: React.ReactNode
   children: React.ReactNode
-} & UseStyles<typeof useStyles>
+  sx?: SxProps<Theme>
+}
 
-export default function ContainerWithHeader(props: ContainerWithHeaderProps) {
-  const { title, rightArea, children } = props
-  const classes = useStyles(props)
+export function ContainerWithHeader(props: ContainerWithHeaderProps) {
+  const { title, rightArea, children, sx } = props
 
   return (
-    <Row>
-      <div className={classes.head}>
-        <Typography variant='h5' component='h2' className={classes.title}>
+    <Row className={classes.root} sx={sx}>
+      <Box
+        className={classes.head}
+        sx={(theme) => ({
+          display: 'grid',
+          justifyContent: 'space-between',
+          gridTemplateColumns: 'auto auto',
+          alignItems: 'end',
+          marginBottom: theme.spacings.md,
+        })}
+      >
+        <Typography
+          variant='h5'
+          component='h2'
+          className={classes.title}
+          sx={{ lineHeight: 1, textTransform: 'uppercase' }}
+        >
           {title}
         </Typography>
         <Typography component='div' variant='subtitle1' className={classes.right}>
           {rightArea}
         </Typography>
-      </div>
+      </Box>
       {children}
     </Row>
   )
 }
+
+ContainerWithHeader.selectors = selectors

package/FlagAvatar/index.tsx

@@ -1,23 +1,13 @@
-import { makeStyles, Avatar, AvatarProps } from '@material-ui/core'
-import React from 'react'
-
-const useStyles = makeStyles(
-  {
-    root: {},
-  },
-  { name: 'FlagAvatar' },
-)
+import { Avatar, AvatarProps } from '@mui/material'
 
 export type FlagAvatarProps = { country: string } & Omit<AvatarProps, 'src'>
 
-export default function FlagAvatar(props: FlagAvatarProps) {
+export function FlagAvatar(props: FlagAvatarProps) {
   const { country, ...avatarProps } = props
-  const classes = useStyles(props)
 
   return (
     <Avatar
       {...avatarProps}
-      classes={classes}
       imgProps={{ loading: 'lazy' }}
       alt={country}
       src={`https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.3/flags/1x1/${country}.svg`}

package/Footer/Footer.tsx

@@ -1,102 +1,119 @@
-import { ContainerProps, Theme, makeStyles, Container } from '@material-ui/core'
+import { ContainerProps, Container, Box } from '@mui/material'
 import React from 'react'
-import { UseStyles } from '../Styles'
+import { extendableComponent } from '../Styles'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    footer: {
-      gridTemplateColumns: '5fr 3fr',
-      gridTemplateAreas: `
-        'social switcher'
-        'links support'
-      `,
-      borderTop: `1px solid ${theme.palette.divider}`,
-      padding: `${theme.page.vertical} ${theme.page.horizontal}`,
-      display: 'grid',
-      gap: theme.spacings.xs,
-      alignItems: 'center',
-      [theme.breakpoints.down('xs')]: {
-        paddingTop: theme.spacings.lg,
-        paddingBottom: theme.spacings.lg,
-        justifyItems: 'center',
-        gridTemplateAreas: `
-          'switcher switcher'
-          'support support'
-          'social social'
-          'links links'
-        `,
-        gap: theme.spacings.md,
-        '& > *': {
-          maxWidth: 'max-content',
-        },
-      },
-      [theme.breakpoints.up('md')]: {
-        gridTemplateColumns: 'auto auto',
-        gridTemplateRows: 'auto',
-        justifyContent: 'space-between',
-      },
-    },
-    copyright: {
-      display: 'grid',
-      gridAutoFlow: 'column',
-      alignContent: 'center',
-      gridArea: 'links',
-      ...theme.typography.body2,
-      gap: theme.spacings.sm,
-      [theme.breakpoints.down('xs')]: {
-        gridAutoFlow: 'row',
-        textAlign: 'center',
-        gap: 8,
-      },
-    },
-    support: {
-      gridArea: 'support',
-      justifySelf: 'flex-end',
-      [theme.breakpoints.down('xs')]: {
-        justifySelf: 'center',
-      },
-    },
-    social: {
-      display: 'grid',
-      justifyContent: 'start',
-      gridAutoFlow: 'column',
-      gridArea: 'social',
-      gap: `0 ${theme.spacings.xs}`,
-      '& > *': {
-        minWidth: 'min-content',
-      },
-      [theme.breakpoints.down('xs')]: {
-        gap: `0 ${theme.spacings.sm}`,
-      },
-    },
-    storeSwitcher: {
-      gridArea: 'switcher',
-      justifySelf: 'end',
-      [theme.breakpoints.down('xs')]: {
-        justifySelf: 'center',
-      },
-    },
-  }),
-  { name: 'Footer' },
-)
-
-export type FooterProps = UseStyles<typeof useStyles> & {
+export type FooterProps = {
   storeSwitcher?: React.ReactNode
-  socialLinks?: React.ReactElement
+  socialLinks?: React.ReactNode
   customerService?: React.ReactNode
   copyright?: React.ReactElement
 } & Omit<ContainerProps, 'children'>
 
+const { classes, selectors } = extendableComponent('Footer', [
+  'root',
+  'social',
+  'storeSwitcher',
+  'support',
+  'copyright',
+] as const)
+
 export function Footer(props: FooterProps) {
   const { socialLinks, storeSwitcher, customerService, copyright, ...containerProps } = props
-  const classes = useStyles(props)
 
   return (
-    <Container maxWidth={false} className={classes.footer} {...containerProps}>
-      <div className={classes.social}>{socialLinks}</div>
-      <div className={classes.storeSwitcher}>{storeSwitcher}</div>
-      <div className={classes.support}>{customerService}</div>
-      <div className={classes.copyright}>{copyright}</div>
+    <Container
+      sx={(theme) => ({
+        gridTemplateColumns: '5fr 3fr',
+        borderTop: `1px solid ${theme.palette.divider}`,
+        display: 'grid',
+        alignItems: 'center',
+
+        padding: `${theme.spacings.lg} ${theme.page.horizontal} ${theme.page.vertical}`,
+        justifyItems: 'center',
+        gridTemplateAreas: `
+          'switcher switcher'
+          'support support'
+          'social social'
+          'links links'
+        `,
+        gap: theme.spacings.md,
+        '& > *': { maxWidth: 'max-content' },
+
+        [theme.breakpoints.up('sm')]: {
+          gridTemplateAreas: `
+            'social switcher'
+            'links support'
+          `,
+          justifyItems: 'start',
+          padding: `${theme.page.vertical} ${theme.page.horizontal}`,
+          gridTemplateColumns: 'auto auto',
+          gridTemplateRows: 'auto',
+          justifyContent: 'space-between',
+        },
+      })}
+      maxWidth={false}
+      className={classes.root}
+      {...containerProps}
+    >
+      <Box
+        sx={(theme) => ({
+          display: 'grid',
+          justifyContent: 'start',
+          gridAutoFlow: 'column',
+          gridArea: 'social',
+          gap: { xs: `0 ${theme.spacings.xs}`, md: `0 ${theme.spacings.sm}` },
+          '& > *': {
+            minWidth: 'min-content',
+          },
+        })}
+        className={classes.social}
+      >
+        {socialLinks}
+      </Box>
+      <Box
+        sx={(theme) => ({
+          gridArea: 'switcher',
+          justifySelf: 'end',
+          [theme.breakpoints.down('sm')]: {
+            justifySelf: 'center',
+          },
+        })}
+        className={classes.storeSwitcher}
+      >
+        {storeSwitcher}
+      </Box>
+      <Box
+        sx={(theme) => ({
+          gridArea: 'support',
+          justifySelf: 'flex-end',
+          [theme.breakpoints.down('sm')]: {
+            justifySelf: 'center',
+          },
+        })}
+        className={classes.support}
+      >
+        {customerService}
+      </Box>
+      <Box
+        sx={(theme) => ({
+          typography: 'body2',
+          display: 'grid',
+          gridAutoFlow: 'column',
+          alignContent: 'center',
+          gridArea: 'links',
+          gap: theme.spacings.sm,
+          [theme.breakpoints.down('sm')]: {
+            gridAutoFlow: 'row',
+            textAlign: 'center',
+            gap: `8px`,
+          },
+        })}
+        className={classes.copyright}
+      >
+        {copyright}
+      </Box>
     </Container>
   )
 }
+
+Footer.selectors = selectors

package/Footer/index.ts

@@ -1,2 +1 @@
 export * from './Footer'
-export * from './SocialIcon'

package/Form/Form.tsx

@@ -0,0 +1,35 @@
+import { darken, lighten, styled, experimental_sx, Theme } from '@mui/material'
+import { responsiveVal } from '../Styles/responsiveVal'
+
+type FormStyleProps = {
+  contained?: boolean
+  background?: 'secondary' | 'default'
+}
+
+const styles = ({ theme, contained = false, background }: { theme: Theme } & FormStyleProps) =>
+  experimental_sx([
+    {
+      display: 'grid',
+      alignItems: 'center',
+      padding: `${theme.spacings.xxs} 0`,
+    },
+    background === 'default' && {
+      background:
+        theme.palette.mode === 'light'
+          ? darken(theme.palette.background.default, 0.03)
+          : lighten(theme.palette.background.default, 0.1),
+    },
+    background === 'secondary' && {
+      background: theme.palette.secondary.light,
+    },
+    contained && {
+      padding: `${theme.spacings.xxs} ${theme.spacings.sm}`,
+      // paddingTop: theme.spacings.md,
+      overflow: 'hidden',
+      borderRadius: responsiveVal(theme.shape.borderRadius * 3, theme.shape.borderRadius * 4),
+    },
+  ])
+
+export const Form = styled('form')<FormStyleProps>(styles)
+
+export const FormDiv = styled('div')<FormStyleProps>(styles)

package/Form/FormActions.tsx

@@ -1,15 +1,10 @@
-import { styled } from '@material-ui/core'
+import { styled } from '@mui/material'
 
-const FormActions = styled('div')(
-  ({ theme }) => ({
-    paddingTop: theme.spacings.md,
-    paddingBottom: theme.spacings.lg,
-    justifyContent: 'center',
-    display: 'grid',
-    gridAutoFlow: 'column',
-    gap: `calc(${theme.spacings.xxs} * 2)`,
-  }),
-  { name: 'FormActions' },
-)
-
-export default FormActions
+export const FormActions = styled('div', { name: 'FormActions' })(({ theme }) => ({
+  paddingTop: theme.spacings.md,
+  paddingBottom: theme.spacings.lg,
+  justifyContent: 'center',
+  display: 'grid',
+  gridAutoFlow: 'column',
+  gap: `calc(${theme.spacings.xxs} * 2)`,
+}))

package/Form/FormDivider.tsx

@@ -1,14 +1,9 @@
-import { styled } from '@material-ui/core'
+import { styled } from '@mui/material'
 
-const FormDivider = styled('div')(
-  ({ theme }) => ({
-    background: theme.palette.divider,
-    height: 1,
-    width: '100%',
-    marginTop: theme.spacings.xxs,
-    marginBottom: theme.spacings.xxs,
-  }),
-  { name: 'FormDivider' },
-)
-
-export default FormDivider
+export const FormDivider = styled('div', { name: 'FormDivider' })(({ theme }) => ({
+  background: theme.palette.divider,
+  height: 1,
+  width: '100%',
+  marginTop: theme.spacings.xxs,
+  marginBottom: theme.spacings.xxs,
+}))

package/Form/FormHeader.tsx

@@ -1,27 +1,6 @@
-import { makeStyles, Theme, Typography, TypographyProps } from '@material-ui/core'
-import React from 'react'
-import { UseStyles } from '../Styles'
+import { styled, Typography } from '@mui/material'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    heading: {
-      marginBottom: `calc(${theme.spacings.xxs} * -1)`,
-      marginTop: theme.spacings.xxs,
-    },
-  }),
-  { name: 'FormHeader' },
-)
-
-export type FormHeaderProps = TypographyProps &
-  UseStyles<typeof useStyles> & { children: React.ReactNode }
-
-export default function FormHeader(props: FormHeaderProps) {
-  const { children, ...typographyProps } = props
-  const classes = useStyles(props)
-
-  return (
-    <Typography {...typographyProps} className={classes.heading}>
-      {children}
-    </Typography>
-  )
-}
+export const FormHeader = styled(Typography, { name: 'FormHeader' })(({ theme }) => ({
+  marginBottom: `calc(${theme.spacings.xxs} * -1)`,
+  marginTop: theme.spacings.xxs,
+}))

package/Form/FormRow.tsx

@@ -1,14 +1,9 @@
-import { styled } from '@material-ui/core'
+import { styled } from '@mui/material'
 
-const FormRow = styled('div')(
-  ({ theme }) => ({
-    paddingTop: theme.spacings.xxs,
-    paddingBottom: theme.spacings.xxs,
-    display: 'grid',
-    gridTemplateColumns: `repeat(auto-fit, minmax(200px, 1fr))`,
-    gap: `calc(${theme.spacings.xxs} * 2)`,
-  }),
-  { name: 'FormRow' },
-)
-
-export default FormRow
+export const FormRow = styled('div', { name: 'FormRow' })(({ theme }) => ({
+  paddingTop: theme.spacings.xxs,
+  paddingBottom: theme.spacings.xxs,
+  display: 'grid',
+  gridTemplateColumns: `repeat(auto-fit, minmax(200px, 1fr))`,
+  gap: `calc(${theme.spacings.xxs} * 2)`,
+}))