@graphcommerce/next-ui 4.2.3 → 4.3.0

package/Row/Quote/{index.tsx → Quote.tsx}

@@ -1,6 +1,6 @@
 import { ContainerProps } from '@mui/material'
 import React from 'react'
-import { Row } from '..'
+import { Row } from '../Row'
 
 export type QuoteProps = {
   children: React.ReactElement

package/Row/SpecialBanner/{index.tsx → SpecialBanner.tsx}

@@ -1,7 +1,7 @@
 import { Box, ContainerProps, Typography } from '@mui/material'
-import { Row } from '..'
 import { extendableComponent } from '../../Styles'
 import { responsiveVal } from '../../Styles/responsiveVal'
+import { Row } from '../Row'
 
 export type SpecialBannerProps = ContainerProps & {
   asset?: React.ReactNode

package/Row/index.ts

@@ -0,0 +1,18 @@
+export * from './Row'
+export * from './ButtonLinkList'
+export * from './ColumnOne/ColumnOne'
+export * from './ColumnOneBoxed/ColumnOneBoxed'
+export * from './ColumnOneCentered/ColumnOneCentered'
+export * from './ColumnThree/ColumnThree'
+export * from './ColumnTwo/ColumnTwo'
+export * from './ColumnTwoSpread/ColumnTwoSpread'
+export * from './ColumnTwoWithTop/ColumnTwoWithTop'
+export * from './ContentLinks/ContentLinks'
+export * from './HeroBanner/HeroBanner'
+export * from './IconBlocks/IconBlocks'
+export * from './IconBlocks/IconBlock'
+export * from './ImageText/ImageText'
+export * from './ImageTextBoxed/ImageTextBoxed'
+export * from './ParagraphWithSidebarSlide/ParagraphWithSidebarSlide'
+export * from './Quote/Quote'
+export * from './SpecialBanner/SpecialBanner'

package/SectionContainer/{index.tsx → SectionContainer.tsx}

@@ -1,5 +1,5 @@
 import { Box } from '@mui/material'
-import { SectionHeader, SectionHeaderProps } from '../SectionHeader'
+import { SectionHeader, SectionHeaderProps } from '../SectionHeader/SectionHeader'
 import { extendableComponent } from '../Styles'
 
 export type SectionContainerProps = SectionHeaderProps &

package/Snackbar/MessageSnackbarImpl.tsx

@@ -1,4 +1,3 @@
-import { Portal } from '@mui/base'
 import {
   Fab,
   Snackbar,
@@ -8,6 +7,7 @@ import {
   Box,
   SxProps,
   Theme,
+  Portal,
 } from '@mui/material'
 import React, { useEffect, useState } from 'react'
 import { IconSvg } from '../IconSvg'
@@ -39,6 +39,7 @@ const name = 'MessageSnackbarImpl' as const
 const parts = ['root', 'content', 'children', 'actionButton', 'close'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
+// eslint-disable-next-line import/no-default-export
 export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
   const [showSnackbar, setShowSnackbar] = useState<boolean>(false)
 

package/StarRatingField/{index.tsx → StarRatingField.tsx}

@@ -25,16 +25,16 @@ export function StarRatingField(props: StarRatingFieldProps) {
         <IconSvg
           src={iconStar}
           size='large'
-          className={classes.startEmpty}
-          sx={{ fill: '#FFDA1C', stroke: 'none', margin: '0 3px' }}
+          className={classes.starFull}
+          sx={(theme) => ({ fill: theme.palette.divider, stroke: 'none', margin: '0 3px' })}
         />
       }
       icon={
         <IconSvg
           src={iconStar}
           size='large'
-          className={classes.starFull}
-          sx={(theme) => ({ fill: theme.palette.divider, stroke: 'none', margin: '0 3px' })}
+          className={classes.startEmpty}
+          sx={{ fill: '#FFDA1C', stroke: 'none', margin: '0 3px' }}
         />
       }
       onChange={(event, value) => {

package/Styles/{index.tsx → index.ts}

@@ -1,12 +1,3 @@
-/**
- * Consider moving to the `sx` prop with `selectors`
- *
- * @deprecated
- */
-export type UseStyles<T extends (...args: never[]) => unknown> = {
-  classes?: Partial<ReturnType<T>['classes']>
-}
-
 export * from './breakpointVal'
 export * from './EmotionProvider'
 export * from './extendableComponent'

package/Styles/withTheme.tsx

@@ -36,6 +36,7 @@ type WithSx = { sx?: SxProps<Theme> }
  * ```
  */
 export function withTheme<T>(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Component: (value: T & WithSx) => React.ReactElement<any, any> | null,
   theme: Theme,
 ): React.FC<T & WithSx> {

package/TextInputNumber/{index.tsx → TextInputNumber.tsx}

@@ -1,7 +1,6 @@
 import {
   IconButton,
   IconButtonProps,
-  OutlinedTextFieldProps,
   SxProps,
   TextField,
   TextFieldProps,
@@ -25,10 +24,6 @@ export type TextInputNumberProps = Omit<TextFieldProps, 'type'> & {
   sx?: SxProps<Theme>
 }
 
-function isOutlined(props: TextFieldProps): props is OutlinedTextFieldProps {
-  return props.variant === 'outlined'
-}
-
 type OwnerState = { size?: 'small' | 'medium' }
 const name = 'TextInputNumber' as const
 const parts = ['quantity', 'quantityInput', 'button'] as const
@@ -50,6 +45,7 @@ export function TextInputNumber(props: TextInputNumberProps) {
   const forkRef = useForkRef<HTMLInputElement>(ref, inputRef as Ref<HTMLInputElement>)
 
   const [direction, setDirection] = useState<'up' | 'down' | 'runUp' | 'runDown' | null>(null)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [disabled, setDisabled] = useState<'min' | 'max' | null>(null)
 
   const stop = useCallback(() => setDirection(null), [])

package/Theme/MuiButton.ts

@@ -12,10 +12,10 @@ type ButtonVariants = NonNullable<ComponentsVariants['MuiButton']>
 export const MuiButtonResponsive: ButtonVariants = [
   {
     props: {},
-    style: ({ theme }) => ({
+    style: {
       textTransform: 'none',
       fontWeight: 500,
-    }),
+    },
   },
   {
     props: { size: 'small' },

package/Theme/MuiChip.ts

@@ -0,0 +1,86 @@
+import { ComponentsVariants, darken, experimental_sx as sx } from '@mui/material'
+import { responsiveVal } from '../Styles'
+
+declare module '@mui/material/Chip/Chip' {
+  interface ChipPropsSizeOverrides {
+    responsive: true
+  }
+  interface ChipPropsVariantOverrides {
+    ['outlinedHighlighted']: true
+  }
+}
+
+type ChipVariants = NonNullable<ComponentsVariants['MuiChip']>
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const MuiChip: ChipVariants = [
+  {
+    props: {},
+    style: { '& .MuiChip-icon': { fontSize: '1.3em' } },
+  },
+  {
+    props: { size: 'small' },
+    style: sx({
+      typography: 'caption',
+    }),
+  },
+  {
+    props: { size: 'medium' },
+    style: sx({
+      height: responsiveVal(26, 30),
+      paddingLeft: responsiveVal(3, 6),
+      paddingRight: responsiveVal(3, 6),
+      typography: 'caption',
+    }),
+  },
+  {
+    props: { size: 'responsive' },
+    style: sx({
+      height: responsiveVal(32, 40),
+      paddingLeft: responsiveVal(4, 8),
+      paddingRight: responsiveVal(4, 8),
+      borderRadius: '99em',
+      typography: 'body2',
+      '& .MuiChip-label': {
+        paddingLeft: responsiveVal(6, 10),
+        paddingRight: responsiveVal(6, 10),
+      },
+    }),
+  },
+  {
+    props: { variant: 'outlined' },
+    style: ({ theme }) => ({
+      borderColor: theme.palette.divider,
+      backgroundColor: theme.palette.background.default,
+      '&:active': {
+        boxShadow: 'none',
+      },
+      '& .MuiChip-deleteIcon': {
+        color: theme.palette.text.primary,
+      },
+      '&.MuiChip-clickable:hover': {
+        backgroundColor: darken(theme.palette.background.default, 0.05),
+      },
+      '& .MuiChip-deleteIcon:hover': {
+        color: theme.palette.text.primary,
+      },
+    }),
+  },
+  {
+    props: { color: 'primary' },
+    style: ({ theme }) => ({
+      borderColor: theme.palette.text.primary,
+      color: theme.palette.text.primary,
+      '&:hover': {
+        background: `${theme.palette.background.default} !important`,
+        borderColor: `${theme.palette.divider} !important`,
+      },
+      '&:focus': {
+        background: `${theme.palette.background.paper} !important`,
+      },
+      '& .MuiChip-deleteIcon:hover': {
+        color: theme.palette.text.primary,
+      },
+    }),
+  },
+]

package/Theme/MuiFab.ts

@@ -44,6 +44,11 @@ declare module '@mui/material/Fab/Fab' {
   interface FabPropsSizeOverrides {
     responsive: true
   }
+  // todo: Wait for the color prop to be exendable and then add inverted
+  // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Fab/Fab.js#L193-L202
+  // interface FabPropsColorOverrides {
+  //   inverted: true
+  // }
 }
 
 function fabWidthHeight(size: FabSize, theme: Theme) {
@@ -67,3 +72,19 @@ export const MuiFabSizes: FabVariants = sizes.map((size) => ({
   props: { size },
   style: ({ theme }) => fabWidthHeight(size, theme),
 }))
+
+// todo: Wait for the color prop to be exendable and add tho theme.
+// https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Fab/Fab.js#L193-L202
+// export const MuiFabInverted: FabVariants = [
+//   {
+//     props: { color: 'inverted' },
+//     style: ({ theme }) => ({
+//       boxShadow: 'none',
+//       '&:hover, &:focus': {
+//         background: theme.palette.text.primary,
+//       },
+//       background: theme.palette.text.primary,
+//       color: theme.palette.background.paper,
+//     }),
+//   },
+// ]

package/Theme/MuiSlider.ts

@@ -1,28 +1,43 @@
-import { Components, Theme } from '@mui/material'
+import { ComponentsVariants } from '@mui/material'
 
-/**
- * Not yet possible to define a size="large" for the Slider due to a limitation in Material-UI
- * https://github.com/mui-org/material-ui/issues/27130#issuecomment-1006425575
- *
- * If that has been fixed most of the styles can be removed here:
- * packages/magento-product/components/ProductListFilters/FilterRangeType.tsx
- */
+declare module '@mui/material/Slider/Slider' {
+  interface SliderPropsSizeOverrides {
+    large: true
+  }
+}
+type SliderVariants = NonNullable<ComponentsVariants['MuiSlider']>
 
-// declare module '@mui/material/Slider' {
-//   interface SliderPropsSizeOverrides {
-//     large: true
-//   }
-// }
-
-export const MuiSlider = (theme: Theme): Components['MuiSlider'] => ({
-  // variants: [
-  //   {
-  //     props: { size: 'large' },
-  //     style: {
-  //       '& .MuiSlider-rail': { height: 4, borderRadius: '2px' },
-  //       '& .MuiSlider-track': { height: 4 },
-  //       '& .MuiSlider-thumb': { width: 28, height: 28 },
-  //     },
-  //   },
-  // ],
-})
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const MuiSlider: SliderVariants = [
+  {
+    props: {},
+    style: ({ theme }) => ({
+      '& .MuiSlider-rail': {
+        color: theme.palette.text.disabled,
+      },
+      '& .MuiSlider-thumb': {
+        background: theme.palette.background.default,
+        boxShadow: theme.shadows[6],
+      },
+    }),
+  },
+  {
+    props: { size: 'large' },
+    style: {
+      maxWidth: `calc(100% - 28px)`,
+      margin: `0 auto`,
+      display: 'block',
+      '& .MuiSlider-rail': {
+        height: 4,
+        borderRadius: '2px',
+      },
+      '& .MuiSlider-track': {
+        height: 4,
+      },
+      '& .MuiSlider-thumb': {
+        width: '28px',
+        height: '28px',
+      },
+    },
+  },
+]

package/Theme/index.ts

@@ -1,6 +1,7 @@
-export * from './MuiSlider'
+export * from './DarkLightModeThemeProvider'
 export * from './MuiButton'
-export * from './MuiSnackbar'
+export * from './MuiChip'
 export * from './MuiFab'
+export * from './MuiSlider'
+export * from './MuiSnackbar'
 export * from './themeDefaults'
-export * from './DarkLightModeThemeProvider'

package/Theme/themeDefaults.ts

@@ -1,4 +1,4 @@
-import { BreakpointsOptions, experimental_sx, SxProps, Theme, ThemeOptions } from '@mui/material'
+import { BreakpointsOptions, experimental_sx, SxProps, Theme } from '@mui/material'
 import { Shadows } from '@mui/material/styles/shadows'
 
 import { SetRequired } from 'type-fest'

package/ToggleButton/{index.tsx → ToggleButton.tsx}

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Button, ButtonProps } from '@mui/material'
 import React, { FormEvent } from 'react'
 import { extendableComponent } from '../Styles'

package/ToggleButtonGroup/{index.tsx → ToggleButtonGroup.tsx}

@@ -33,14 +33,13 @@ const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonGroupProp
 
   const classes = withState({ orientation, size })
 
-  /* eslint-disable @typescript-eslint/no-unsafe-argument */
-  const handleChange = (event, buttonValue) => {
+  const handleChange = (event: React.MouseEvent<HTMLElement, MouseEvent>, buttonValue: unknown) => {
     if (!onChange) return
 
-    const index = value && value.indexOf(buttonValue)
+    const index = Boolean(value) && (value.indexOf(buttonValue) as number)
     let newValue: string[]
 
-    if (value && index >= 0) {
+    if (value && index && index >= 0) {
       newValue = value.slice()
       newValue.splice(index, 1)
     } else {
@@ -49,7 +48,10 @@ const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonGroupProp
     onChange(event, newValue)
   }
 
-  const handleExclusiveChange = (event, buttonValue) => {
+  const handleExclusiveChange = (
+    event: React.MouseEvent<HTMLElement, MouseEvent>,
+    buttonValue: unknown,
+  ) => {
     if (!onChange || value === buttonValue) return
     if (required) onChange(event, buttonValue)
     else onChange(event, value === buttonValue ? null : buttonValue)
@@ -101,7 +103,7 @@ const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonGroupProp
           onChange: exclusive ? handleExclusiveChange : handleChange,
           selected:
             child.props.selected === undefined
-              ? isValueSelected(child.props.value, value)
+              ? isValueSelected(child.props.value as string, value as string | string[])
               : child.props.selected,
         })
       })}

package/docs/components/ComponentChild.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import { extendableComponent } from '@graphcommerce/next-ui'
 import { styled } from '@mui/material'
 import { ComponentProps } from 'react'

package/docs/components/ComponentChildVariant.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import { extendableComponent } from '@graphcommerce/next-ui'
 import { styled } from '@mui/material'
 import { ComponentProps } from 'react'

package/docs/components/ComponentChildVariantExtendable.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import { ExtendableComponent, extendableComponent } from '@graphcommerce/next-ui'
 import { styled } from '@mui/material'
 import { ComponentProps } from 'react'

package/index.ts

@@ -1,15 +1,15 @@
-export * from './AnimatedRow'
-export * from './Blog/BlogAuthor'
-export * from './Blog/BlogContent'
-export * from './Blog/BlogHeader'
-export * from './Blog/BlogList'
-export * from './Blog/BlogListItem'
-export * from './Blog/BlogTags'
-export * from './Blog/BlogTitle'
+export * from './AnimatedRow/AnimatedRow'
+export * from './Blog/BlogAuthor/BlogAuthor'
+export * from './Blog/BlogContent/BlogContent'
+export * from './Blog/BlogHeader/BlogHeader'
+export * from './Blog/BlogList/BlogList'
+export * from './Blog/BlogListItem/BlogListItem'
+export * from './Blog/BlogTags/BlogTags'
+export * from './Blog/BlogTitle/BlogTitle'
 export * from './Button'
-export * from './ChipMenu'
-export * from './ContainerWithHeader'
-export * from './FlagAvatar'
+export * from './ChipMenu/ChipMenu'
+export * from './ContainerWithHeader/ContainerWithHeader'
+export * from './FlagAvatar/FlagAvatar'
 export * from './Footer'
 export * from './Form/Form'
 export * from './Form/FormActions'
@@ -18,51 +18,34 @@ export * from './Form/FormHeader'
 export * from './Form/FormRow'
 export * from './Form/InputCheckmark'
 export * from './FramerScroller'
-export * from './FullPageMessage'
-export * from './Highlight'
-export * from './IconHeader'
+export * from './FullPageMessage/FullPageMessage'
+export * from './Highlight/Highlight'
+export * from './IconHeader/IconHeader'
 export * from './icons'
-export * from './JsonLd'
+export * from './JsonLd/JsonLd'
 export * from './Layout'
 export * from './LayoutDefault'
 export * from './LayoutOverlay'
 export * from './LayoutParts'
 export * from './Page'
-export * from './PageLoadIndicator'
-export * from './PageMeta'
-export * from './Pagination'
-export * from './RenderType'
+export * from './PageLoadIndicator/PageLoadIndicator'
+export * from './PageMeta/PageMeta'
+export * from './Pagination/Pagination'
+export * from './RenderType/RenderType'
 export * from './Row'
-export * from './Row/ButtonLinkList'
-export * from './Row/ColumnOne'
-export * from './Row/ColumnOneBoxed'
-export * from './Row/ColumnOneCentered'
-export * from './Row/ColumnThree'
-export * from './Row/ColumnTwo'
-export * from './Row/ColumnTwoSpread'
-export * from './Row/ColumnTwoWithTop'
-export * from './Row/ContentLinks'
-export * from './Row/HeroBanner'
-export * from './Row/IconBlocks'
-export * from './Row/IconBlocks/IconBlock'
-export * from './Row/ImageText'
-export * from './Row/ImageTextBoxed'
-export * from './Row/ParagraphWithSidebarSlide'
-export * from './Row/Quote'
-export * from './Row/SpecialBanner'
-export * from './SectionContainer'
-export * from './SectionHeader'
-export * from './Separator'
+export * from './SectionContainer/SectionContainer'
+export * from './SectionHeader/SectionHeader'
+export * from './Separator/Separator'
 export * from './Snackbar/MessageSnackbar'
 export * from './Snackbar/MessageSnackbarImpl'
-export * from './StarRatingField'
+export * from './StarRatingField/StarRatingField'
 export * from './Stepper/Stepper'
 export * from './Styles'
 export * from './IconSvg'
-export * from './TextInputNumber'
+export * from './TextInputNumber/TextInputNumber'
 export * from './Theme'
-export * from './TimeAgo'
-export * from './ToggleButton'
-export * from './ToggleButtonGroup'
-export * from './UspList'
+export * from './TimeAgo/TimeAgo'
+export * from './ToggleButton/ToggleButton'
+export * from './ToggleButtonGroup/ToggleButtonGroup'
+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.2.3",
+  "version": "4.3.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -16,13 +16,13 @@
   "dependencies": {
     "@emotion/babel-preset-css-prop": "^11.2.0",
     "@emotion/cache": "^11.7.1",
-    "@emotion/react": "^11.7.1",
+    "@emotion/react": "^11.8.2",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",
-    "@graphcommerce/framer-next-pages": "^3.1.1",
-    "@graphcommerce/framer-scroller": "^2.0.5",
-    "@graphcommerce/framer-utils": "^3.0.3",
-    "@graphcommerce/image": "^3.1.0",
+    "@graphcommerce/framer-next-pages": "^3.1.2",
+    "@graphcommerce/framer-scroller": "^2.1.0",
+    "@graphcommerce/framer-utils": "^3.0.5",
+    "@graphcommerce/image": "^3.1.1",
     "react-is": "^17.0.2",
     "react-schemaorg": "^2.0.0",
     "schema-dts": "^1.1.0",
@@ -30,7 +30,6 @@
   },
   "peerDependencies": {
     "@lingui/macro": "^3.13.2",
-    "@mui/base": "^5.0.0-alpha.68",
     "@mui/lab": "^5.0.0-alpha.68",
     "@mui/material": "^5.4.1",
     "framer-motion": "^6.2.4",
@@ -39,11 +38,11 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.0.4",
-    "@graphcommerce/prettier-config-pwa": "^4.0.2",
+    "@graphcommerce/eslint-config-pwa": "^4.0.6",
+    "@graphcommerce/prettier-config-pwa": "^4.0.4",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
-    "@playwright/test": "^1.19.1",
+    "@playwright/test": "^1.19.2",
     "@types/react-is": "^17.0.3",
-    "typescript": "^4.5.5"
+    "typescript": "^4.6.2"
   }
 }