@graphcommerce/next-ui 9.0.0-canary.98 → 9.0.0

package/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import { Box, ToggleButtonGroupProps as ToggleButtonGroupPropsBase } from '@mui/material'
+import type { ToggleButtonGroupProps as ToggleButtonGroupPropsBase } from '@mui/material'
+import { Box } from '@mui/material'
 import React from 'react'
 import { isFragment } from 'react-is'
 import { extendableComponent } from '../Styles'
@@ -12,112 +13,116 @@ function isValueSelected(value: string, candidate: string | string[]) {
 
 type OwnerState = Pick<ToggleButtonGroupPropsBase, 'orientation' | 'size'>
 
-const name = 'ToggleButtonGroup' as const
+const name = 'ToggleButtonGroup'
 const parts = ['root', 'button'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
 export type ToggleButtonGroupProps = ToggleButtonGroupPropsBase & { required?: boolean }
 
-const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonGroupProps>((props, ref) => {
-  const {
-    children,
-    className,
-    exclusive = false,
-    required = false,
-    onChange,
-    orientation = 'horizontal',
-    value,
-    size = 'large',
-    sx = [],
-    ...other
-  } = props
+/** @deprecated @public */
+export const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonGroupProps>(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      exclusive = false,
+      required = false,
+      onChange,
+      orientation = 'horizontal',
+      value,
+      size = 'large',
+      sx = [],
+      ...other
+    } = props
 
-  const classes = withState({ orientation, size })
+    const classes = withState({ orientation, size })
 
-  const handleChange = (event: React.MouseEvent<HTMLElement, MouseEvent>, buttonValue: unknown) => {
-    if (!onChange) return
+    const handleChange = (
+      event: React.MouseEvent<HTMLElement, MouseEvent>,
+      buttonValue: unknown,
+    ) => {
+      if (!onChange) return
 
-    const index = Boolean(value) && (value.indexOf(buttonValue) as number)
-    let newValue: string[]
+      const index = Boolean(value) && (value.indexOf(buttonValue) as number)
+      let newValue: string[]
 
-    if (value && index && index >= 0) {
-      newValue = value.slice()
-      newValue.splice(index, 1)
-    } else {
-      newValue = value ? [...value, buttonValue] : [buttonValue]
+      if (value && index && index >= 0) {
+        newValue = value.slice()
+        newValue.splice(index, 1)
+      } else {
+        newValue = value ? [...value, buttonValue] : [buttonValue]
+      }
+      onChange(event, newValue)
     }
-    onChange(event, newValue)
-  }
 
-  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)
-  }
+    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)
+    }
 
-  return (
-    <Box
-      role='group'
-      className={`${classes.root} ${className ?? ''}`}
-      sx={[
-        (theme) => ({
-          rowGap: theme.spacings.xxs,
-          columnGap: theme.spacings.xs,
-          '&.orientationVertical': {
-            gridAutoFlow: 'column',
-          },
-          '&.sizeSmall.orientationHorizontal': {
-            display: 'flex',
-            flexWrap: 'wrap',
-            rowGap: '8px',
-            columnGap: '8px',
-          },
-          '&.sizeMedium.orientationHorizontal': {
-            display: 'grid',
-            gridTemplateColumns: 'repeat(2, 1fr)',
-          },
-          '&.sizeLarge.orientationHorizontal': {
-            display: 'grid',
-            gridTemplateColumns: 'repeat(2, 1fr)',
-          },
-        }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
-      ref={ref}
-      {...other}
-    >
-      {React.Children.map(children, (child) => {
-        if (!React.isValidElement(child)) return null
+    return (
+      <Box
+        role='group'
+        className={`${classes.root} ${className ?? ''}`}
+        sx={[
+          (theme) => ({
+            rowGap: theme.spacings.xxs,
+            columnGap: theme.spacings.xs,
+            '&.orientationVertical': {
+              gridAutoFlow: 'column',
+            },
+            '&.sizeSmall.orientationHorizontal': {
+              display: 'flex',
+              flexWrap: 'wrap',
+              rowGap: '8px',
+              columnGap: '8px',
+            },
+            '&.sizeMedium.orientationHorizontal': {
+              display: 'grid',
+              gridTemplateColumns: 'repeat(2, 1fr)',
+            },
+            '&.sizeLarge.orientationHorizontal': {
+              display: 'grid',
+              gridTemplateColumns: 'repeat(2, 1fr)',
+            },
+          }),
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+        ref={ref}
+        {...other}
+      >
+        {React.Children.map(children, (child) => {
+          if (!React.isValidElement(child)) return null
 
-        if (process.env.NODE_ENV !== 'production') {
-          if (isFragment(child)) {
-            console.error(
-              [
-                "@graphcommerce/next-ui: The ToggleButtonGroup component doesn't accept a Fragment as a child.",
-                'Consider providing an array instead.',
-              ].join('\n'),
-            )
+          if (process.env.NODE_ENV !== 'production') {
+            if (isFragment(child)) {
+              console.error(
+                [
+                  "@graphcommerce/next-ui: The ToggleButtonGroup component doesn't accept a Fragment as a child.",
+                  'Consider providing an array instead.',
+                ].join('\n'),
+              )
+            }
           }
-        }
 
-        return React.cloneElement(child, {
-          // @ts-ignore
-          className: `${classes.button} ${child.props.className ?? ''}`,
-          onChange: exclusive ? handleExclusiveChange : handleChange,
-          selected:
+          return React.cloneElement(child, {
             // @ts-ignore
-            child.props.selected === undefined
-              ? // @ts-ignore
-                isValueSelected(child.props.value as string, value as string | string[])
-              : // @ts-ignore
-                child.props.selected,
-        })
-      })}
-    </Box>
-  )
-})
-
-export { ToggleButtonGroup }
+            className: `${classes.button} ${child.props.className ?? ''}`,
+            onChange: exclusive ? handleExclusiveChange : handleChange,
+            selected:
+              // @ts-ignore
+              child.props.selected === undefined
+                ? // @ts-ignore
+                  isValueSelected(child.props.value as string, value as string | string[])
+                : // @ts-ignore
+                  child.props.selected,
+          })
+        })}
+      </Box>
+    )
+  },
+)

package/UspList/UspList.tsx

@@ -1,4 +1,5 @@
-import { Box, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
 import { extendableComponent } from '../Styles'
 
 export type UspListProps = OwnerState & {
@@ -7,7 +8,7 @@ export type UspListProps = OwnerState & {
 }
 
 type OwnerState = { size?: 'small' | 'medium' }
-const name = 'UspList' as const
+const name = 'UspList'
 const parts = ['root'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 

package/UspList/UspListItem.tsx

@@ -1,4 +1,5 @@
-import { Box, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
 import { extendableComponent } from '../Styles'
 import { responsiveVal } from '../Styles/responsiveVal'
 
@@ -9,7 +10,7 @@ export type UspListItemProps = {
 } & OwnerState
 
 type OwnerState = { size?: 'small' | 'medium' }
-const name = 'UspListItem' as const
+const name = 'UspListItem'
 const parts = ['root', 'icon', 'text'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 

package/hooks/memoDeep.ts

@@ -1,6 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { equal } from '@wry/equality'
-import { FunctionComponent, memo, NamedExoticComponent } from 'react'
+import type { FunctionComponent, NamedExoticComponent } from 'react'
+import { memo } from 'react'
 
 /**
  * This is a deep comparison version of React's `memo` function.
@@ -23,7 +24,7 @@ export function memoDeep<P extends object>(
 
           if (ms < 0.2) return result
 
-          console.log(`memoDeep took more than 0.2ms`, {
+          console.warn('memoDeep took more than 0.2ms', {
             result,
             ms,
             Component,

package/hooks/useDateTimeFormat.ts

@@ -2,7 +2,9 @@ import { useMemo } from 'react'
 import { useLocale } from './useLocale'
 
 /**
- * @deprecated use <DateFormat/>, <TimeFormat/> or <DateTimeFormat/> instead
+ * @deprecated Use <DateFormat/>, <TimeFormat/> or <DateTimeFormat/> or useIntlDateTimeFormat()
+ *   instead
+ * @public
  */
 export function useDateTimeFormat(props?: Intl.DateTimeFormatOptions) {
   const locale = useLocale()

package/hooks/useMatchMedia.ts

@@ -1,4 +1,5 @@
-import { Breakpoint, useTheme } from '@mui/material'
+import type { Breakpoint } from '@mui/material'
+import { useTheme } from '@mui/material'
 import { useMotionValue } from 'framer-motion'
 import { useEffect, useMemo } from 'react'
 

package/hooks/useMemoDeep.ts

@@ -1,6 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { equal } from '@wry/equality'
-import { DependencyList, useMemo, useRef } from 'react'
+import type { DependencyList } from 'react'
+import { useMemo, useRef } from 'react'
 
 export function useMemoDeep<T>(factory: () => T, deps: DependencyList | undefined): T {
   const ref = useRef<DependencyList | undefined>(undefined)

package/hooks/useNumberFormat.ts

@@ -2,7 +2,9 @@ import { useMemo } from 'react'
 import { useLocale } from './useLocale'
 
 /**
- * @deprecated use <NumberFormat />, <PercentFormat /> or <UnitFormat /> instead
+ * @deprecated Use <NumberFormat />, <PercentFormat /> or <UnitFormat /> or useIntlNumberFormat()
+ *   instead
+ * @public
  */
 export function useNumberFormat(props?: Intl.NumberFormatOptions) {
   const locale = useLocale()

package/index.ts

@@ -1,5 +1,4 @@
 export * from './ActionCard'
-export * from './AnimatedRow/AnimatedRow'
 export * from './Blog/BlogAuthor/BlogAuthor'
 export * from './Blog/BlogContent/BlogContent'
 export * from './Blog/BlogHeader/BlogHeader'
@@ -34,6 +33,7 @@ export * from './LayoutDefault'
 export * from './LayoutOverlay'
 export * from './LayoutParts'
 export * from './LazyHydrate'
+export * from './MediaQuery'
 export * from './Navigation'
 export * from './Overlay'
 export * from './OverlayOrPopperChip'
@@ -68,3 +68,5 @@ export * from './utils/normalizeLocale'
 export * from './utils/robots'
 export * from './utils/sitemap'
 export * from './utils/storefrontConfig'
+export * from './utils/sxx'
+export * from './Container/Container'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.98",
+  "version": "9.0.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,34 +12,33 @@
     }
   },
   "dependencies": {
-    "@emotion/cache": "^11.11.0",
-    "@emotion/react": "^11.11.4",
-    "@emotion/server": "^11.11.0",
-    "@emotion/styled": "^11.11.5",
-    "cookie": "^0.6.0",
-    "next-sitemap": "4.2.3",
+    "cookie": "^1.0.2",
     "react-is": "^18.3.1"
   },
   "devDependencies": {
-    "@types/cookie": "^0.6.0",
-    "@types/react-is": "^18.3.0",
-    "typescript": "5.5.3"
+    "@types/react-is": "^18.3.1",
+    "typescript": "5.7.2"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.98",
-    "@graphcommerce/framer-next-pages": "^9.0.0-canary.98",
-    "@graphcommerce/framer-scroller": "^9.0.0-canary.98",
-    "@graphcommerce/framer-utils": "^9.0.0-canary.98",
-    "@graphcommerce/image": "^9.0.0-canary.98",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.98",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.98",
+    "@emotion/cache": "^11",
+    "@emotion/react": "^11",
+    "@emotion/server": "^11",
+    "@emotion/styled": "^11",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0",
+    "@graphcommerce/framer-next-pages": "^9.0.0",
+    "@graphcommerce/framer-scroller": "^9.0.0",
+    "@graphcommerce/framer-utils": "^9.0.0",
+    "@graphcommerce/image": "^9.0.0",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",
     "@mui/lab": "^5.0.0-alpha.68",
     "@mui/material": "^5.10.16",
-    "framer-motion": "^10.0.0",
+    "framer-motion": "^11.0.0",
     "next": "*",
+    "next-sitemap": "4.2.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

package/utils/cookie.ts

@@ -1,13 +1,14 @@
-import { serialize, parse, CookieSerializeOptions } from 'cookie'
+import type { SerializeOptions } from 'cookie'
+import { parse, serialize } from 'cookie'
 
 /** Read a cookie */
 export function cookie(name: string): string | undefined
 /** Set a cookie */
-export function cookie(name: string, value: string, options?: CookieSerializeOptions): void
+export function cookie(name: string, value: string, options?: SerializeOptions): void
 /** Delete a cookie */
 export function cookie(name: string, value: null): void
 /** Function to handle the three different cases */
-export function cookie(name: string, value?: string | null, options?: CookieSerializeOptions) {
+export function cookie(name: string, value?: string | null, options?: SerializeOptions) {
   if (typeof window === 'undefined') {
     return undefined
   }

package/utils/robots.ts

@@ -1,4 +1,4 @@
-import { GetServerSidePropsContext } from 'next'
+import type { GetServerSidePropsContext } from 'next'
 
 type Stringifyable = boolean | string | number | null | undefined
 

package/utils/sitemap.ts

@@ -1,5 +1,6 @@
-import { GetServerSidePropsContext, GetStaticPathsResult } from 'next'
-import { getServerSideSitemapLegacy, ISitemapField } from 'next-sitemap'
+import type { GetServerSidePropsContext, GetStaticPathsResult } from 'next'
+import type { ISitemapField } from 'next-sitemap'
+import { getServerSideSitemapLegacy } from 'next-sitemap'
 import { canonicalize } from '../PageMeta/canonicalize'
 
 export function excludeSitemap(excludes: string[]) {

package/utils/sxx.ts

@@ -0,0 +1,16 @@
+import type { SxProps, Theme } from '@mui/material'
+
+/**
+ * Concat an array of SxProps into a single SxProps.
+ *
+ * Each item in the array can be an array of Sx it's self:
+ *
+ * ```tsx
+ * sxx({ position: 'absolute', right: 0, top: 0 }, props.sx)
+ * ```
+ */
+export const sxx = (...sxPropsArray: (SxProps<Theme> | undefined)[]): SxProps<Theme> =>
+  sxPropsArray
+    .filter((v) => v !== undefined)
+    .map((sx) => (Array.isArray(sx) ? sx : [sx]))
+    .flat(1)

package/AnimatedRow/AnimatedRow.tsx

@@ -1,23 +0,0 @@
-import { styled, SxProps, Theme } from '@mui/material'
-import { HTMLMotionProps, m } from 'framer-motion'
-import { ReactHTML } from 'react'
-
-export type AnimatedRowProps = Omit<
-  ReactHTML['div'] & HTMLMotionProps<'div'>,
-  'initial' | 'animate' | 'exit' | 'transition'
-> & { sx?: SxProps<Theme> }
-
-const StyledDiv = styled(m.div)({})
-
-/** @deprecated Should be replaced with Box component */
-export function AnimatedRow(props: AnimatedRowProps) {
-  return (
-    <StyledDiv
-      {...props}
-      initial={{ opacity: 0, height: 'auto' }}
-      animate={{ opacity: 1, height: 'auto' }}
-      exit={{ opacity: 0, height: 0 }}
-      transition={{ type: 'tween' }}
-    />
-  )
-}

package/docs/building-components.mdx

@@ -1,3 +0,0 @@
-# Building components
-
-If you are looking to style components, please take a look at.

package/docs/components/ComponentBasic.tsx

@@ -1,26 +0,0 @@
-import { styled } from '@mui/material'
-import React from 'react'
-
-// ---- Root component ----
-
-// We're creating a new styled('div') component and apply our styles to it.
-const Root = styled('div')(({ theme }) => ({
-  padding: '3px',
-  display: 'flex',
-  color: theme.palette.text.primary,
-}))
-
-// ---- MyComponent component ----
-
-// Props of the component we are writing
-export type MyComponentProps = { children: React.ReactNode }
-
-export function MyComponent(props: MyComponentProps) {
-  const { children } = props
-  return (
-    <Root as='span'>
-      My Component
-      {children}
-    </Root>
-  )
-}

package/docs/components/ComponentChild.tsx

@@ -1,49 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { extendableComponent } from '@graphcommerce/next-ui'
-import { styled } from '@mui/material'
-import { ComponentProps } from 'react'
-
-// ---- Setup ----
-
-// To be able to select children from the consuming side, we define the classes.
-// Minimal utility to convert the classes to selectors. Hover over `selectors` to see what it means.
-const componentName = 'MyComponent' as const
-const { classes, selectors } = extendableComponent(componentName, ['root', 'child'] as const)
-
-// ---- Root component ----
-
-// We're creating a new styled('div') component and apply our styles to it.
-const Root = styled('div', {
-  name: componentName,
-  target: classes.root,
-})(({ theme }) => ({
-  display: 'flex',
-  color: theme.palette.text.primary,
-}))
-
-// ---- Child component ----
-
-const Child = styled('div', {
-  name: componentName,
-  target: classes.child,
-})(({ theme }) => ({
-  backgroundColor: theme.palette.primary.main,
-  width: 100,
-  height: 100,
-}))
-
-// ---- MyComponent component ----
-
-// Props of the component we are writing
-export type MyComponentProps = Pick<ComponentProps<typeof Root>, 'sx' | 'children'>
-
-export function MyComponent(props: MyComponentProps) {
-  const { sx, children } = props
-  return (
-    <Root as='span' sx={sx}>
-      My Component
-      <Child>{children}</Child>
-    </Root>
-  )
-}
-MyComponent.selectors = selectors

package/docs/components/ComponentChildVariant.tsx

@@ -1,55 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { extendableComponent } from '@graphcommerce/next-ui'
-import { styled } from '@mui/material'
-import { ComponentProps } from 'react'
-
-// ---- Setup ----
-
-// To be able to select children from the consuming side, we define the classes.
-// Minimal utility to convert the classes to selectors. Hover over `selectors` to see what it means.
-const componentName = 'MyComponent' as const
-const { classes, selectors } = extendableComponent(componentName, ['root', 'child'] as const)
-
-// Props that are used in our styled elements to render different CSS
-type MyComponentStyleProps = { variant?: 'cool' | 'supercool' }
-
-// ---- Root component ----
-
-// We're creating a new styled('div') component and apply our styles to it.
-const Root = styled('div', {
-  name: componentName,
-  target: classes.root,
-})<MyComponentStyleProps>(({ theme }) => ({
-  // Styles are added
-  display: 'flex',
-  color: theme.palette.text.primary,
-}))
-
-// ---- Child component ----
-
-const Child = styled('div', {
-  name: componentName,
-  target: classes.child, // Mandatory for children, adds a class name `MyComponent-child` so it can be styled from the outside.
-})<MyComponentStyleProps>(({ theme, variant }) => ({
-  backgroundColor: theme.palette.primary.main,
-  width: 100,
-  height: 100,
-  fontSize: variant === 'supercool' ? 'large' : 'normal',
-}))
-
-// ---- MyComponent component ----
-
-// Props of the component we are writing
-export type MyComponentProps = Pick<ComponentProps<typeof Root>, 'sx' | 'children'> &
-  MyComponentStyleProps
-
-export function MyComponent(props: MyComponentProps) {
-  const { sx, children, variant } = props
-  return (
-    <Root as='span' sx={sx} variant={variant}>
-      My Component <Child variant={variant}>{children}</Child>
-    </Root>
-  )
-}
-
-MyComponent.selectors = selectors