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

package/ChipMenu/ChipMenu.tsx

@@ -1,9 +1,10 @@
-import { Chip, ChipProps, Menu, MenuProps, menuClasses, SxProps, Theme } from '@mui/material'
+import type { ChipProps, MenuProps, SxProps, Theme } from '@mui/material'
+import { Chip, Menu, menuClasses } from '@mui/material'
 import React, { useState } from 'react'
 import { IconSvg } from '../IconSvg'
 import { SectionHeader } from '../SectionHeader/SectionHeader'
 import { responsiveVal } from '../Styles/responsiveVal'
-import { iconChevronDown, iconChevronUp, iconCancelAlt } from '../icons'
+import { iconCancelAlt, iconChevronDown, iconChevronUp } from '../icons'
 
 export type ChipMenuProps = Omit<ChipProps<'button'>, 'children' | 'component'> & {
   selectedLabel?: React.ReactNode

package/Config.graphqls

@@ -1,13 +1,9 @@
-extend input GraphCommerceConfig {
-  """
-  Configuration for the SidebarGallery component
-  """
-  sidebarGallery: SidebarGalleryConfig
-
-  """
-  Configuration for the SidebarGallery component
-  """
-  breadcrumbs: Boolean = false
+"""
+Configure whether the layout should be full width or should be constrained by a max breakpoint. Configurable in theme.ts
+"""
+enum ContainerSizing {
+  FULL_WIDTH
+  BREAKPOINT
 }
 
 """
@@ -27,3 +23,25 @@ input SidebarGalleryConfig {
   """
   paginationVariant: SidebarGalleryPaginationVariant
 }
+
+extend input GraphCommerceConfig {
+  """
+  Configuration for the SidebarGallery component
+  """
+  sidebarGallery: SidebarGalleryConfig
+
+  """
+  Configuration for the SidebarGallery component
+  """
+  breadcrumbs: Boolean = false
+
+  """
+  Configures the max width of the shell (header, footer, overlays, etc.)
+  """
+  containerSizingShell: ContainerSizing = FULL_WIDTH
+
+  """
+  Configures the max width of the content (main content area)
+  """
+  containerSizingContent: ContainerSizing = FULL_WIDTH
+}

package/Container/Container.tsx

@@ -0,0 +1,90 @@
+import { Box, useTheme } from '@mui/material'
+import type { ContainerProps } from '@mui/material'
+import clsx from 'clsx'
+import React from 'react'
+import type { LiteralUnion } from 'type-fest'
+import { extendableComponent } from '../Styles/extendableComponent'
+import type { ContainerSizingVariant } from '../Theme/useContainerSizing'
+import { useContainerSizing } from '../Theme/useContainerSizing'
+
+type OwnerProps = {
+  /** Can be a breakpoint, 'full' or a actual value */
+  maxWidth?: LiteralUnion<ContainerProps['maxWidth'] | 'full', string>
+  sizing?: ContainerSizingVariant
+  breakoutRight?: boolean
+  breakoutLeft?: boolean
+}
+
+export type ContainerSizingProps = Omit<ContainerProps, 'maxWidth'> & OwnerProps
+
+const name = 'MuiContainer'
+const slots = ['root'] as const
+const { withState } = extendableComponent<OwnerProps, typeof name, typeof slots>(
+  'MuiContainer',
+  slots,
+)
+
+/**
+ * Calculate the padding and margin for a container.
+ *
+ * - The padding is a positive value to add to an element on the left and right.
+ * - The margin is a negative value to offset the padding of a container. Used to break out of a
+ *   container.
+ */
+export function useContainerSpacing(options?: ContainerSizingProps) {
+  const { disableGutters, maxWidth, sizing = 'content' } = options ?? {}
+
+  const theme = useTheme()
+  const { breakpoint, value } = useContainerSizing(sizing)
+
+  const gutter = disableGutters ? '0px' : `${theme.page.horizontal}`
+
+  let size = value
+  if (maxWidth && theme.breakpoints.values[maxWidth])
+    size = `${theme.breakpoints.values[maxWidth]}px`
+  else if (maxWidth) size = maxWidth
+
+  if (size === '100%' || maxWidth === 'full') return { breakpoint, size, padding: gutter }
+
+  return { breakpoint, size, padding: `max(${gutter}, ((100% - ${size}) / 2 + ${gutter}))` }
+}
+
+/**
+ * A better Container component that supports:
+ *
+ * - Setting the background color as it is using a calculated padding instead of a margin: '0 auto'
+ * - Breaking out of the container to the left or right
+ */
+export const Container = React.forwardRef(
+  (props: ContainerSizingProps, ref: React.ForwardedRef<HTMLDivElement>) => {
+    const {
+      sx,
+      breakoutRight = false,
+      breakoutLeft = false,
+      maxWidth = 'lg',
+      disableGutters,
+      sizing = 'content',
+      className,
+      ...rest
+    } = props
+    const classes = withState({ breakoutLeft, breakoutRight, maxWidth, sizing })
+    const { padding } = useContainerSpacing(props)
+
+    return (
+      <Box
+        {...rest}
+        ref={ref}
+        className={clsx(className, classes.root)}
+        sx={[
+          {
+            pl: !breakoutLeft ? padding : undefined,
+            pr: !breakoutRight ? padding : undefined,
+            '&.breakoutLeft': { pl: 'unset' },
+            '&.breakoutRight': { pr: 'unset' },
+          },
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+      />
+    )
+  },
+)

package/ContainerWithHeader/ContainerWithHeader.tsx

@@ -1,4 +1,5 @@
-import { Box, SxProps, Theme, Typography } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import React from 'react'
 import { Row } from '../Row/Row'
 import { extendableComponent } from '../Styles'

package/Document/DocumentBodyEnd.tsx

@@ -1,5 +1,5 @@
 // eslint-disable-next-line @next/next/no-document-import-in-page
-import { DocumentProps } from 'next/document'
+import type { DocumentProps } from 'next/document'
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function DocumentBodyEnd(props: DocumentProps) {

package/Document/DocumentBodyStart.tsx

@@ -1,5 +1,5 @@
 // eslint-disable-next-line @next/next/no-document-import-in-page
-import { DocumentProps } from 'next/document'
+import type { DocumentProps } from 'next/document'
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function DocumentBodyStart(props: DocumentProps) {

package/Document/DocumentHeadEnd.tsx

@@ -1,5 +1,5 @@
 // eslint-disable-next-line @next/next/no-document-import-in-page
-import { DocumentProps } from 'next/document'
+import type { DocumentProps } from 'next/document'
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function DocumentHeadEnd(props: DocumentProps) {

package/Document/DocumentHeadStart.tsx

@@ -1,5 +1,5 @@
 // eslint-disable-next-line @next/next/no-document-import-in-page
-import { DocumentProps } from 'next/document'
+import type { DocumentProps } from 'next/document'
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function DocumentHeadStart(props: DocumentProps) {

package/Fab/Fab.tsx

@@ -1,17 +1,17 @@
-import {
-  Box,
-  CircularProgress,
-  CircularProgressProps,
-  Fab as FabBase,
-  FabProps as FabPropsBase,
-} from '@mui/material'
-import { IconSvg, IconSvgProps } from '../IconSvg'
+import type { CircularProgressProps, FabProps as FabPropsBase } from '@mui/material'
+import { Box, CircularProgress, Fab as FabBase } from '@mui/material'
+import type { IconSvgProps } from '../IconSvg'
+import { IconSvg } from '../IconSvg'
 import { useFabSize } from '../Theme/MuiFab'
+import { sxx } from '../utils/sxx'
 
 export type FabProps = Omit<FabPropsBase<'button'>, 'variant' | 'children'> & {
   loading?: boolean
   icon: IconSvgProps['src']
-  circularProgress?: Omit<CircularProgressProps, 'size'>
+  slotProps?: {
+    icon?: Omit<IconSvgProps, 'src'>
+    circularProgress?: Omit<CircularProgressProps, 'size'>
+  }
 }
 
 /** Adds loading functionality to the Fab component. */
@@ -22,15 +22,13 @@ export function Fab(props: FabProps) {
     loading,
     sx = [],
     icon,
-    circularProgress,
     color = 'default',
+    slotProps,
     ...fabProps
   } = props
 
   const fabSize = useFabSize(size)
 
-  const circSx = circularProgress?.sx ?? []
-
   return (
     <FabBase
       type='submit'
@@ -41,17 +39,17 @@ export function Fab(props: FabProps) {
       sx={[{ display: 'grid' }, ...(Array.isArray(sx) ? sx : [sx])]}
     >
       <Box sx={{ display: 'flex', placeContent: 'center', gridArea: '1/1' }}>
-        <IconSvg src={icon} size='medium' />
+        <IconSvg src={icon} size='medium' {...slotProps?.icon} />
       </Box>
       {loading && (
         <CircularProgress
           size={fabSize}
           color={color !== 'primary' ? 'primary' : 'inherit'}
-          {...circularProgress}
-          sx={[
+          {...slotProps?.circularProgress}
+          sx={sxx(
             { display: 'flex', placeContent: 'center', gridArea: '1/1' },
-            ...(Array.isArray(circSx) ? circSx : [circSx]),
-          ]}
+            slotProps?.circularProgress?.sx,
+          )}
         />
       )}
     </FabBase>

package/FlagAvatar/FlagAvatar.tsx

@@ -1,4 +1,5 @@
-import { Avatar, AvatarProps } from '@mui/material'
+import type { AvatarProps } from '@mui/material'
+import { Avatar } from '@mui/material'
 
 export type FlagAvatarProps = { country: string } & Omit<AvatarProps, 'src'>
 

package/Footer/Footer.tsx

@@ -1,5 +1,7 @@
-import { ContainerProps, Container, Box } from '@mui/material'
+import type { ContainerProps } from '@mui/material'
+import { Box } from '@mui/material'
 import React from 'react'
+import { Container } from '../Container/Container'
 import { LazyHydrate } from '../LazyHydrate'
 import { extendableComponent } from '../Styles'
 
@@ -33,20 +35,23 @@ export function Footer(props: FooterProps) {
   return (
     <LazyHydrate height={300}>
       <Container
+        maxWidth={false}
+        sizing='shell'
         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}`,
+            pt: theme.spacings.lg,
+            pb: theme.spacings.lg,
             justifyItems: 'center',
             gridTemplateAreas: `
-            'switcher switcher'
-            'support support'
-            'social social'
-            'links links'
-          `,
+              'switcher switcher'
+              'support support'
+              'social social'
+              'links links'
+            `,
             gap: theme.spacings.md,
             '& > *': { maxWidth: 'max-content' },
 
@@ -57,7 +62,7 @@ export function Footer(props: FooterProps) {
               'links support'
             `,
               justifyItems: 'start',
-              padding: `${theme.page.vertical} ${theme.page.horizontal}`,
+              py: theme.page.vertical,
               gridTemplateColumns: 'auto auto',
               gridTemplateRows: 'auto',
               justifyContent: 'space-between',
@@ -65,7 +70,6 @@ export function Footer(props: FooterProps) {
           }),
           ...(Array.isArray(sx) ? sx : [sx]),
         ]}
-        maxWidth={false}
         className={classes.root}
         {...containerProps}
       >
@@ -126,7 +130,7 @@ export function Footer(props: FooterProps) {
               [theme.breakpoints.down('md')]: {
                 gridAutoFlow: 'row',
                 textAlign: 'center',
-                gap: `8px`,
+                gap: '8px',
               },
             })}
             className={classes.copyright}

package/Form/Form.tsx

@@ -1,4 +1,5 @@
-import { darken, lighten, styled, Theme } from '@mui/material'
+import type { Theme } from '@mui/material'
+import { darken, lighten, styled } from '@mui/material'
 import { breakpointVal } from '../Styles/breakpointVal'
 
 type FormStyleProps = {

package/Form/FormHeader.tsx

@@ -1,4 +1,4 @@
-import { styled, Typography } from '@mui/material'
+import { Typography, styled } from '@mui/material'
 
 export const FormHeader = styled(Typography, { name: 'FormHeader' })(({ theme }) => ({
   marginBottom: `calc(${theme.spacings.xxs} * -1)`,

package/Form/FormRow.tsx

@@ -4,6 +4,6 @@ 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))`,
+  gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
   gap: `calc(${theme.spacings.xxs} * 2)`,
 }))

package/Form/InputCheckmark.tsx

@@ -1,4 +1,5 @@
-import { IconSvg, IconSvgProps } from '../IconSvg'
+import type { IconSvgProps } from '../IconSvg'
+import { IconSvg } from '../IconSvg'
 import { iconCheckmark } from '../icons'
 
 export type InputCheckmarkProps = {

package/FramerScroller/ItemScroller.tsx

@@ -1,10 +1,7 @@
-import {
-  ScrollerProvider,
-  Scroller,
-  ScrollerButton,
-  ScrollerButtonProps,
-} from '@graphcommerce/framer-scroller'
-import { Box, SxProps, Theme } from '@mui/material'
+import type { ScrollerButtonProps } from '@graphcommerce/framer-scroller'
+import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
 import { IconSvg } from '../IconSvg'
 import { extendableComponent, responsiveVal } from '../Styles'
 import { useFabSize } from '../Theme'
@@ -59,7 +56,7 @@ export function ItemScroller(props: ItemScrollerProps) {
               gap: theme.spacings.xxs,
               position: 'absolute',
               left: theme.spacings.sm,
-              top: `calc(50% - 28px)`,
+              top: 'calc(50% - 28px)',
             })}
           >
             <ScrollerButton direction='left' showButtons={showButtons} size='responsive'>

package/FramerScroller/SidebarGallery.tsx

@@ -1,33 +1,25 @@
 import { usePrevPageRouter } from '@graphcommerce/framer-next-pages/hooks/usePrevPageRouter'
+import type { MotionImageAspectProps, ScrollerButtonProps } from '@graphcommerce/framer-scroller'
 import {
   MotionImageAspect,
-  MotionImageAspectProps,
   Scroller,
-  ScrollerDots,
   ScrollerButton,
+  ScrollerDots,
   ScrollerProvider,
-  unstable_usePreventScroll as usePreventScroll,
-  ScrollerButtonProps,
   ScrollerThumbnails,
+  unstable_usePreventScroll as usePreventScroll,
 } from '@graphcommerce/framer-scroller'
 import { dvh } from '@graphcommerce/framer-utils'
-import {
-  Fab,
-  useTheme,
-  Box,
-  styled,
-  SxProps,
-  Theme,
-  Unstable_TrapFocus as TrapFocus,
-} from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Fab, styled, Unstable_TrapFocus as TrapFocus, useTheme } from '@mui/material'
 import { m, useDomEvent, useMotionValue } from 'framer-motion'
 import { useRouter } from 'next/router'
 import React, { useEffect, useRef } from 'react'
+import { iconChevronLeft, iconChevronRight, iconFullscreen, iconFullscreenExit } from '../icons'
 import { IconSvg } from '../IconSvg'
 import { Row } from '../Row/Row'
 import { extendableComponent } from '../Styles'
 import { responsiveVal } from '../Styles/responsiveVal'
-import { iconChevronLeft, iconChevronRight, iconFullscreen, iconFullscreenExit } from '../icons'
 
 const MotionBox = styled(m.div)({})
 
@@ -39,7 +31,7 @@ type OwnerState = {
   sticky: boolean
   variantMd: SidebarGalleryVariant
 }
-const name = 'SidebarGallery' as const
+const name = 'SidebarGallery'
 const parts = [
   'row',
   'root',
@@ -148,7 +140,16 @@ export function SidebarGallery(props: SidebarGalleryProps) {
 
   return (
     <ScrollerProvider scrollSnapAlign='center'>
-      <Row maxWidth={false} disableGutters className={classes.row} sx={sx}>
+      <Row
+        maxWidth={zoomed ? 'full' : 'lg'}
+        disableGutters
+        className={classes.row}
+        breakoutLeft={variantMd === 'default' && !theme.appShell.containerSizingContent}
+        sx={[
+          { bgcolor: theme.palette.mode === 'light' ? 'background.image' : 'background.paper' },
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+      >
         <MotionBox
           layout
           layoutDependency={zoomed}
@@ -165,14 +166,6 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   } * 2)`,
                 },
               },
-              background:
-                theme.palette.mode === 'light'
-                  ? theme.palette.background.image
-                  : theme.palette.background.paper,
-
-              '&:not(.variantMdOneColumn)': {
-                paddingRight: `calc((100% - ${theme.breakpoints.values.lg}px) / 2)`,
-              },
 
               '&.zoomed': {
                 position: 'relative',
@@ -182,7 +175,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   marginTop: `calc(${theme.appShell.headerHeightMd} * -1  - ${theme.spacings.lg})`,
                   gridTemplateColumns: '1fr auto',
                 },
-                paddingRight: 0,
+                px: 0,
               },
             },
           ]}
@@ -237,12 +230,12 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                     top: 0,
                     width: '100%',
                     height: '100%',
-                    gridAutoColumns: `100%`,
-                    gridTemplateRows: `100%`,
+                    gridAutoColumns: '100%',
+                    gridTemplateRows: '100%',
                     cursor: disableZoom ? 'auto' : 'zoom-in',
                   },
                   zoomed && {
-                    height: `var(--client-size-y)`,
+                    height: 'var(--client-size-y)',
                     cursor: 'inherit',
                   },
                 ]}
@@ -305,7 +298,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   gap: theme.spacings.xxs,
                   position: 'absolute',
                   left: theme.spacings.sm,
-                  top: `calc(50% - 28px)`,
+                  top: 'calc(50% - 28px)',
                 }}
               >
                 <ScrollerButton
@@ -326,7 +319,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   gap: theme.spacings.xxs,
                   position: 'absolute',
                   right: theme.spacings.sm,
-                  top: `calc(50% - 28px)`,
+                  top: 'calc(50% - 28px)',
                 }}
               >
                 <ScrollerButton

package/FramerScroller/SidebarSlider.tsx

@@ -1,17 +1,18 @@
+import type { ScrollerButtonProps } from '@graphcommerce/framer-scroller'
 import {
   Scroller,
   ScrollerButton,
-  ScrollerButtonProps,
   ScrollerPageCounter,
   ScrollerProvider,
 } from '@graphcommerce/framer-scroller'
-import { Box, SxProps, Theme } from '@mui/material'
-import { ReactNode } from 'react'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import type { ReactNode } from 'react'
+import { iconChevronLeft, iconChevronRight } from '../icons'
 import { IconSvg } from '../IconSvg'
 import { Row } from '../Row/Row'
 import { extendableComponent } from '../Styles/extendableComponent'
 import { responsiveVal } from '../Styles/responsiveVal'
-import { iconChevronLeft, iconChevronRight } from '../icons'
 
 const { classes, selectors } = extendableComponent('SidebarSlider', [
   'root',
@@ -35,7 +36,7 @@ export function SidebarSlider(props: SidebarSliderProps) {
   const { children, sidebar, sx, buttonSize, showButtons } = props
 
   return (
-    <Row maxWidth={false} disableGutters className={classes.root} sx={sx}>
+    <Row maxWidth={false} disableGutters className={classes.root} sx={sx} breakoutRight>
       <ScrollerProvider scrollSnapAlign='start'>
         <Box
           className={classes.grid}
@@ -78,7 +79,7 @@ export function SidebarSlider(props: SidebarSliderProps) {
                 gap: theme.spacings.xxs,
                 position: 'absolute',
                 left: theme.spacings.sm,
-                top: `calc(50% - 28px)`,
+                top: 'calc(50% - 28px)',
               })}
             >
               <ScrollerButton
@@ -97,7 +98,7 @@ export function SidebarSlider(props: SidebarSliderProps) {
                 gap: theme.spacings.xxs,
                 position: 'absolute',
                 right: theme.spacings.sm,
-                top: `calc(50% - 28px)`,
+                top: 'calc(50% - 28px)',
               })}
             >
               <ScrollerButton

package/FullPageMessage/FullPageMessage.tsx

@@ -1,4 +1,5 @@
-import { Box, Container, SxProps, Theme, Typography } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Container, Typography } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../Styles'
 import { responsiveVal } from '../Styles/responsiveVal'

package/IconHeader/IconHeader.tsx

@@ -1,12 +1,14 @@
-import { Box, SxProps, Theme, Typography } from '@mui/material'
-import { IconSvg, IconSvgProps } from '../IconSvg'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Typography } from '@mui/material'
+import type { IconSvgProps } from '../IconSvg'
+import { IconSvg } from '../IconSvg'
 import { extendableComponent } from '../Styles'
 
 // TODO: remove all occurrences. deprecated component
 
 export type IconHeaderSize = 'small' | 'medium' | 'large'
 
-type IconHeaderProps = {
+export type IconHeaderProps = {
   children: React.ReactNode
   size?: IconHeaderSize
   noMargin?: boolean

package/IconSvg/IconSvg.tsx

@@ -1,7 +1,11 @@
-import { ImageProps, srcToString, StaticImport } from '@graphcommerce/image'
-import { styled, SxProps, Theme, useTheme, useThemeProps } from '@mui/material'
-import { ComponentProps, forwardRef } from 'react'
-import { extendableComponent, ExtendableComponent } from '../Styles/extendableComponent'
+import type { ImageProps, StaticImport } from '@graphcommerce/image'
+import { srcToString } from '@graphcommerce/image'
+import type { SxProps, Theme } from '@mui/material'
+import { styled, useTheme, useThemeProps } from '@mui/material'
+import type { ComponentProps } from 'react'
+import { forwardRef } from 'react'
+import type { ExtendableComponent } from '../Styles/extendableComponent'
+import { extendableComponent } from '../Styles/extendableComponent'
 import { responsiveVal as rv } from '../Styles/responsiveVal'
 import { svgIconStrokeWidth } from './svgIconStrokeWidth'
 
@@ -110,6 +114,3 @@ export const IconSvg = forwardRef<SVGSVGElement, IconSvgProps>((props, ref) => {
   )
 })
 IconSvg.displayName = 'IconSvg'
-
-/** @deprecated SvgIcon is renamed to IconSvg, no API changes */
-export const SvgIcon = IconSvg

package/Intl/DateTimeFormat/DateFormat.tsx

@@ -1,10 +1,12 @@
-import { DateTimeFormat, DateTimeFormatPropsType } from './DateTimeFormat'
+import type { DateTimeFormatProps } from './DateTimeFormat'
+import { DateTimeFormat } from './DateTimeFormat'
 
-type DateFormatOptions = Omit<
-  DateTimeFormatPropsType,
+export type DateFormatProps = Omit<
+  DateTimeFormatProps,
   'timeStyle' | 'hour' | 'minute' | 'second' | 'timeZoneName'
 >
 
-export function DateFormat(props: DateFormatOptions) {
+/** @public */
+export function DateFormat(props: DateFormatProps) {
   return <DateTimeFormat timeStyle={undefined} {...props} />
 }

package/Intl/DateTimeFormat/DateTimeFormat.tsx

@@ -1,20 +1,16 @@
 import { useMemo } from 'react'
-import { useLocale } from '../../hooks/useLocale'
-import { useMemoObject } from '../../hooks/useMemoObject'
-import { DateValue, toDate } from './toDate'
+import type { DateValue } from './toDate'
+import { toDate } from './toDate'
+import type { UseIntlDateTimeFormatOptions } from './useIntlDateTimeFormat'
+import { useIntlDateTimeFormat } from './useIntlDateTimeFormat'
 
-export function useDateTimeFormatter(props: Intl.DateTimeFormatOptions) {
-  const locale = useLocale()
-  const memoOptions = useMemoObject(props)
-  return useMemo(() => new Intl.DateTimeFormat(locale, memoOptions), [locale, memoOptions])
-}
-
-export type DateTimeFormatPropsType = { children: DateValue } & Intl.DateTimeFormatOptions
+export type DateTimeFormatProps = UseIntlDateTimeFormatOptions & { date: DateValue }
 
-export function DateTimeFormat(props: DateTimeFormatPropsType) {
-  const { children } = props
-  const formatter = useDateTimeFormatter({ dateStyle: 'medium', timeStyle: 'short', ...props })
+/** @public */
+export function DateTimeFormat(props: DateTimeFormatProps) {
+  const { date } = props
+  const formatter = useIntlDateTimeFormat({ dateStyle: 'medium', timeStyle: 'short', ...props })
 
-  const dateValue = useMemo(() => toDate(children), [children])
+  const dateValue = useMemo(() => toDate(date), [date])
   return <span suppressHydrationWarning>{dateValue ? formatter.format(dateValue) : null}</span>
 }