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

package/Blog/BlogList/BlogList.tsx

@@ -1,7 +1,7 @@
-import { ContainerProps } from '@mui/material'
+import type { ContainerProps } from '@mui/material'
 import { Row } from '../../Row/Row'
 
-type BlogItemGridProps = ContainerProps
+export type BlogItemGridProps = ContainerProps
 
 export function BlogItemGrid(props: BlogItemGridProps) {
   const { sx = [], ...containerProps } = props
@@ -12,7 +12,7 @@ export function BlogItemGrid(props: BlogItemGridProps) {
         (theme) => ({
           display: 'grid',
           gap: theme.spacings.md,
-          gridTemplateColumns: { xs: `repeat(2, 1fr)`, md: `repeat(3, 1fr)`, lg: `repeat(4, 1fr)` },
+          gridTemplateColumns: { xs: 'repeat(2, 1fr)', md: 'repeat(3, 1fr)', lg: 'repeat(4, 1fr)' },
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}

package/Blog/BlogListItem/BlogListItem.tsx

@@ -1,8 +1,9 @@
-import { Box, Link, SxProps, Theme, Typography } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Link, Typography } from '@mui/material'
 import React from 'react'
+import { DateFormat } from '../../Intl'
 import { extendableComponent } from '../../Styles'
 import { breakpointVal } from '../../Styles/breakpointVal'
-import { DateFormat } from '../../Intl'
 
 export type BlogListItemProps = {
   asset: React.ReactNode
@@ -12,7 +13,7 @@ export type BlogListItemProps = {
   sx?: SxProps<Theme>
 }
 
-const name = 'BlogListItem' as const
+const name = 'BlogListItem'
 const parts = ['item', 'date', 'asset', 'title'] as const
 const { classes } = extendableComponent(name, parts)
 
@@ -25,7 +26,7 @@ export function BlogListItem(props: BlogListItemProps) {
       sx={[
         (theme) => ({
           display: 'grid',
-          gridTemplateRows: `auto auto auto`,
+          gridTemplateRows: 'auto auto auto',
           alignContent: 'start',
           color: theme.palette.text.primary,
           gap: theme.spacings.xxs,
@@ -65,7 +66,7 @@ export function BlogListItem(props: BlogListItemProps) {
             color: theme.palette.text.secondary,
           })}
         >
-          <DateFormat dateStyle='long'>{date}</DateFormat>
+          <DateFormat dateStyle='long' date={date} />
         </Box>
       )}
 

package/Blog/BlogTags/BlogTag.tsx

@@ -1,7 +1,8 @@
-import { Chip, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Chip } from '@mui/material'
 import { NextLink } from '../../Theme'
 
-type BlogTagsProps = {
+export type BlogTagsProps = {
   url: string
   title: string
   sx?: SxProps<Theme>

package/Blog/BlogTags/BlogTags.tsx

@@ -2,7 +2,7 @@ import { styled } from '@mui/material'
 
 export const BlogTags = styled('div')(({ theme }) => ({
   maxWidth: theme.breakpoints.values.md,
-  margin: `0 auto`,
+  margin: '0 auto',
   marginBottom: theme.spacings.sm,
 }))
 

package/Breadcrumbs/Breadcrumbs.tsx

@@ -1,25 +1,27 @@
+import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
+import type {
+  LinkProps,
+  BreadcrumbsProps as MuiBreadcrumbProps,
+  SxProps,
+  Theme,
+} from '@mui/material'
 import {
   Box,
-  Breadcrumbs as MuiBreadcrumbs,
-  BreadcrumbsProps as MuiBreadcrumbProps,
   ClickAwayListener,
-  IconButton,
   Link,
+  Breadcrumbs as MuiBreadcrumbs,
   Typography,
   useEventCallback,
   useTheme,
-  SxProps,
-  Theme,
-  LinkProps,
 } from '@mui/material'
 import dynamic from 'next/dynamic'
-import { useState, MouseEvent } from 'react'
+import type { MouseEvent } from 'react'
+import { useState } from 'react'
+import { Button } from '../Button'
 import { IconSvg } from '../IconSvg'
 import { iconClose, iconEllypsis } from '../icons'
 import type { BreadcrumbsType } from './types'
-import { i18n } from '@lingui/core'
-import { Button } from '../Button'
 
 const BreadcrumbsPopper = dynamic(
   async () => (await import('./BreadcrumbsPopper')).BreadcrumbsPopper,
@@ -33,6 +35,7 @@ export type BreadcrumbsProps = BreadcrumbsType &
     breadcrumbsAmountMobile?: number
     itemSx?: SxProps<Theme>
     linkProps?: Omit<LinkProps, 'href'>
+    disableHome?: boolean
   }
 
 export function Breadcrumbs(props: BreadcrumbsProps) {
@@ -45,6 +48,7 @@ export function Breadcrumbs(props: BreadcrumbsProps) {
     maxItems,
     itemSx = [],
     linkProps,
+    disableHome = false,
     ...rest
   } = props
   const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null)
@@ -67,7 +71,7 @@ export function Breadcrumbs(props: BreadcrumbsProps) {
   return (
     <MuiBreadcrumbs
       {...rest}
-      aria-label={i18n._(/* i18n*/ `Breadcrumbs`)}
+      aria-label={i18n._(/* i18n*/ 'Breadcrumbs')}
       maxItems={maxItems}
       color='inherit'
       sx={[
@@ -155,15 +159,17 @@ export function Breadcrumbs(props: BreadcrumbsProps) {
         </ClickAwayListener>
       )}
 
-      <Link
-        href='/'
-        color='inherit'
-        underline='hover'
-        {...linkProps}
-        sx={[...(Array.isArray(itemSx) ? itemSx : [itemSx])]}
-      >
-        <Trans id='Home' />
-      </Link>
+      {disableHome ? null : (
+        <Link
+          href='/'
+          color='inherit'
+          underline='hover'
+          {...linkProps}
+          sx={[...(Array.isArray(itemSx) ? itemSx : [itemSx])]}
+        >
+          <Trans id='Home' />
+        </Link>
+      )}
       {breadcrumbLinks.map((breadcrumb) => (
         <Link
           key={breadcrumb.href}

package/Breadcrumbs/BreadcrumbsList.tsx

@@ -1,9 +1,10 @@
 import { Trans } from '@lingui/react'
 import { Box, Link, alpha, useTheme } from '@mui/material'
-import { useEffect, useRef, KeyboardEvent } from 'react'
+import type { KeyboardEvent } from 'react'
+import { useEffect, useRef } from 'react'
 import type { BreadcrumbsType } from './types'
 
-type PopperBreadcrumbsListProps = {
+export type PopperBreadcrumbsListProps = {
   autoFocus: boolean
   breadcrumbs: BreadcrumbsType['breadcrumbs']
   showDesktopAmount?: number

package/Breadcrumbs/jsonLdBreadcrumb.tsx

@@ -1,4 +1,4 @@
-import { NextRouter } from 'next/router'
+import type { NextRouter } from 'next/router'
 import type { BreadcrumbList } from 'schema-dts'
 import { canonicalize } from '../PageMeta/canonicalize'
 import type { BreadcrumbsType } from './types'

package/Breadcrumbs/types.ts

@@ -1,5 +1,4 @@
-import { Theme } from '@emotion/react'
-import { SxProps } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
 
 export type BreadcrumbItem = {
   name: string

package/Button/Button.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/forbid-foreign-prop-types */
-import { LoadingButton as Button, LoadingButtonProps, LoadingButtonTypeMap } from '@mui/lab'
+import type { LoadingButtonProps, LoadingButtonTypeMap } from '@mui/lab'
+import { LoadingButton as Button } from '@mui/lab'
 
 export type ButtonProps<
   D extends React.ElementType = LoadingButtonTypeMap['defaultComponent'],

package/Button/LinkOrButton.tsx

@@ -1,7 +1,9 @@
-import { Breakpoint, Link, LinkProps, useForkRef } from '@mui/material'
+import type { Breakpoint, LinkProps } from '@mui/material'
+import { Link, useForkRef } from '@mui/material'
 import React, { useRef } from 'react'
 import type { ConditionalExcept } from 'type-fest'
-import { Button, ButtonProps } from './Button'
+import type { ButtonProps } from './Button'
+import { Button } from './Button'
 
 type OmitNever<T extends Record<string, unknown>> = {
   [K in keyof T as T[K] extends never ? never : K]: T[K]