@graphcommerce/next-ui 5.2.0-canary.6 → 5.2.0-canary.7

package/ActionCard/ActionCard.tsx

@@ -29,9 +29,9 @@ export type ActionCardProps = {
   price?: React.ReactNode
   after?: React.ReactNode
   secondaryAction?: React.ReactNode
-  onClick?: (event: React.MouseEvent<HTMLElement>, value: string | number) => void
+  onClick?: (event: React.MouseEvent<HTMLElement>, value: string | number | null) => void
   selected?: boolean
-  value: string | number
+  value: string | number | null
   reset?: React.ReactNode
   disabled?: boolean
   error?: boolean

package/ActionCard/ActionCardList.tsx

@@ -8,13 +8,13 @@ import { ActionCardLayout } from './ActionCardLayout'
 type MultiSelect = {
   multiple: true
   collapse?: false
-  value: (string | number)[]
+  value: (string | number | null)[]
 
   onChange?: (event: React.MouseEvent<HTMLElement>, value: MultiSelect['value']) => void
 }
 type Select = {
-  multiple?: false
-  value: string | number
+  multiple?: boolean
+  value: string | number | null
   collapse?: boolean
 
   /** Value is null when deselected when not required */
@@ -47,11 +47,10 @@ type HoistedActionCardProps = Pick<ActionCardProps, 'color' | 'variant' | 'size'
 
 const parts = ['root'] as const
 const name = 'ActionCardList'
-const { withState, selectors } = extendableComponent<
-  HoistedActionCardProps,
-  typeof name,
-  typeof parts
->(name, parts)
+const { withState } = extendableComponent<HoistedActionCardProps, typeof name, typeof parts>(
+  name,
+  parts,
+)
 
 export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListProps>(
   (props, ref) => {
@@ -73,8 +72,7 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
           const { onChange, value } = props
           const index = Boolean(value) && value?.indexOf(v)
           let newValue: typeof value
-
-          if (value.length && index && index >= 0) {
+          if (value?.length && index !== false && index >= 0) {
             newValue = value.slice()
             newValue.splice(index, 1)
           } else {
@@ -84,7 +82,6 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
         }
       : (event, v) => {
           const { onChange, value } = props
-
           if (value !== v) {
             if (required) onChange?.(event, v)
             else onChange?.(event, value === v ? null : v)
@@ -100,7 +97,7 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
       const hasValue = (el as ActionCardLike).props.value
 
       if (process.env.NODE_ENV !== 'production') {
-        if (!hasValue) console.error(el, `must be an instance of ActionCard`)
+        if (hasValue === undefined) console.error(el, `must be an instance of ActionCard`)
       }
       return (el as ActionCardLike).props.value !== undefined
     }
@@ -132,7 +129,7 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
     const classes = withState({ size, color, variant, layout })
 
     return (
-      <div>
+      <div ref={ref}>
         <ActionCardLayout sx={sx} className={classes.root} layout={layout}>
           {childReactNodes.map((child) => {
             if (collapse && Boolean(value) && !isValueSelected(child.props.value, value))

package/ActionCard/ActionCardListForm.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { Controller, ControllerProps } from '@graphcommerce/react-hook-form'
+import { Controller, ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
 import React, { MouseEventHandler } from 'react'
 import { ActionCardProps } from './ActionCard'
 import { ActionCardList, ActionCardListProps } from './ActionCardList'
@@ -10,22 +10,39 @@ export type ActionCardItemRenderProps<T> = ActionCardProps & {
   onReset: MouseEventHandler<HTMLAnchorElement> & MouseEventHandler<HTMLSpanElement>
 } & T
 
-export type ActionCardListFormProps<T extends ActionCardItemBase> = Omit<
+export type ActionCardListFormProps<A, F extends FieldValues = FieldValues> = Omit<
   ActionCardListProps,
-  'value' | 'error' | 'onChange' | 'children' | 'multiple'
+  'value' | 'error' | 'onChange' | 'children'
 > &
-  Omit<ControllerProps<any>, 'render' | 'shouldUnregister'> & {
-    items: T[]
-    render: React.FC<ActionCardItemRenderProps<T>>
+  Omit<ControllerProps<F>, 'render'> & {
+    items: A[]
+    render: React.FC<ActionCardItemRenderProps<A>>
   }
 
-export function ActionCardListForm<T extends ActionCardItemBase>(
-  props: ActionCardListFormProps<T>,
-) {
-  const { required, rules, items, render, control, name, errorMessage, defaultValue, ...other } =
-    props
+export function ActionCardListForm<
+  T extends ActionCardItemBase,
+  F extends FieldValues = FieldValues,
+>(props: ActionCardListFormProps<T, F>) {
+  const {
+    required,
+    rules,
+    items,
+    render,
+    control,
+    name,
+    errorMessage,
+    defaultValue,
+    multiple,
+    ...other
+  } = props
   const RenderItem = render as React.FC<ActionCardItemRenderProps<ActionCardItemBase>>
 
+  function onSelect(itemValue: unknown, selectValues: unknown) {
+    return multiple
+      ? Array.isArray(selectValues) && selectValues.some((selectValue) => selectValue === itemValue)
+      : selectValues === itemValue
+  }
+
   return (
     <Controller
       {...props}
@@ -36,6 +53,7 @@ export function ActionCardListForm<T extends ActionCardItemBase>(
       render={({ field: { onChange, value, ref }, fieldState, formState }) => (
         <ActionCardList
           {...other}
+          multiple={multiple}
           required={required}
           value={value}
           ref={ref}
@@ -46,9 +64,9 @@ export function ActionCardListForm<T extends ActionCardItemBase>(
           {items.map((item) => (
             <RenderItem
               {...item}
-              key={item.value}
+              key={item.value ?? 'tralala'}
               value={item.value}
-              selected={value === item.value}
+              selected={onSelect(item.value, value)}
               onReset={(e) => {
                 e.preventDefault()
                 onChange(null)

package/Button/LinkOrButton.tsx

@@ -1,4 +1,4 @@
-import { Link, LinkProps, useForkRef } from '@mui/material'
+import { Breakpoint, Link, LinkProps, useForkRef } from '@mui/material'
 import React, { useRef } from 'react'
 import type { ConditionalExcept } from 'type-fest'
 import { Button, ButtonProps } from './Button'
@@ -13,7 +13,7 @@ type SharedProperties<A, B> = OmitNever<
 export type LinkOrButtonProps = {
   button?: ButtonProps
   link?: LinkProps
-  breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  breakpoint?: Breakpoint
   disabled?: boolean
 } & SharedProperties<
   Omit<ButtonProps, 'sx'>,

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 5.2.0-canary.7
+
+### Minor Changes
+
+- [#1749](https://github.com/graphcommerce-org/graphcommerce/pull/1749) [`0cc472915`](https://github.com/graphcommerce-org/graphcommerce/commit/0cc4729154d316227a41712b5f0adf514768e91f) - Added new filter UI and behaviour. Filters will appear as a popper on the md and up breakpoints and as an overlay on sm and below breakpoints. Filters now have an Apply button instead of applying directly. ([@paales](https://github.com/paales))
+
+### Patch Changes
+
+- [#1749](https://github.com/graphcommerce-org/graphcommerce/pull/1749) [`16e91da42`](https://github.com/graphcommerce-org/graphcommerce/commit/16e91da42dcb454ea4761d1780b9338c88ef1463) - Fix spelling error incomming to incoming ([@paales](https://github.com/paales))
+
 ## 5.2.0-canary.6
 
 ## 5.2.0-canary.5

package/Layout/components/LayoutHeader.tsx

@@ -34,6 +34,7 @@ type ComponentStyleProps = {
   children: boolean
   floatingSm: boolean
   floatingMd: boolean
+  size: 'small' | 'responsive'
 }
 
 const { selectors, withState } = extendableComponent<ComponentStyleProps, 'LayoutHeader'>(
@@ -42,7 +43,16 @@ const { selectors, withState } = extendableComponent<ComponentStyleProps, 'Layou
 )
 
 export function LayoutHeader(props: LayoutHeaderProps) {
-  const { children, divider, primary, secondary, noAlign = false, switchPoint, sx = [] } = props
+  const {
+    children,
+    divider,
+    primary,
+    secondary,
+    noAlign = false,
+    switchPoint,
+    size = 'responsive',
+    sx = [],
+  } = props
   const showBack = useShowBack()
   const showClose = useShowClose()
 
@@ -73,6 +83,7 @@ export function LayoutHeader(props: LayoutHeaderProps) {
     noAlign,
     children: !!children,
     divider: !!divider,
+    size,
   })
 
   return (
@@ -118,6 +129,9 @@ export function LayoutHeader(props: LayoutHeaderProps) {
               marginTop: 0,
               height: theme.appShell.appBarHeightMd,
               marginBottom: `calc(${theme.appShell.appBarHeightMd} * -1)`,
+              '&.sizeSmall': {
+                height: theme.appShell.headerHeightSm,
+              },
             },
             '&.divider': {
               marginBottom: 0,
@@ -128,6 +142,7 @@ export function LayoutHeader(props: LayoutHeaderProps) {
       ]}
     >
       <LayoutHeaderContent
+        size={size}
         left={left}
         right={right}
         divider={divider}

package/Layout/components/LayoutHeaderContent.tsx

@@ -17,9 +17,16 @@ export type LayoutHeaderContentProps = FloatingProps & {
   sx?: SxProps<Theme>
   sxBg?: SxProps<Theme>
   layout?: LayoutProps['layout']
+  size?: 'small' | 'responsive'
 }
 
-type OwnerState = { floatingSm: boolean; floatingMd: boolean; scrolled: boolean; divider: boolean }
+type OwnerState = {
+  floatingSm: boolean
+  floatingMd: boolean
+  scrolled: boolean
+  divider: boolean
+  size: 'small' | 'responsive'
+}
 const name = 'LayoutHeaderContent' as const
 const parts = ['bg', 'content', 'left', 'center', 'right', 'divider'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
@@ -38,17 +45,13 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
     sx = [],
     sxBg = [],
     layout,
+    size = 'responsive',
   } = props
 
   const scroll = useScrollY()
   const scrolled = useMotionValueValue(scroll, (y) => y >= switchPoint)
 
-  const classes = withState({
-    floatingSm,
-    floatingMd,
-    scrolled,
-    divider: !!divider,
-  })
+  const classes = withState({ floatingSm, floatingMd, scrolled, divider: !!divider, size })
 
   return (
     <>
@@ -66,6 +69,9 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             [theme.breakpoints.up('md')]: {
               height: theme.appShell.appBarHeightMd,
             },
+            '&.sizeSmall': {
+              height: theme.appShell.headerHeightSm,
+            },
             borderTopLeftRadius: theme.shape.borderRadius * 3,
             borderTopRightRadius: theme.shape.borderRadius * 3,
 
@@ -108,22 +114,28 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             // columnGap: theme.spacings.xs,
 
             height: theme.appShell.headerHeightSm,
-            padding: `0 ${theme.page.horizontal}`,
-
+            px: theme.page.horizontal,
             [theme.breakpoints.up('md')]: {
               height: theme.appShell.appBarHeightMd,
             },
+            '&.sizeSmall': {
+              height: theme.appShell.headerHeightSm,
+              px: 2,
+              [theme.breakpoints.up('md')]: {
+                px: 2,
+              },
+            },
 
             '&.floatingSm': {
               [theme.breakpoints.down('md')]: {
-                padding: `0 ${theme.page.horizontal}`,
+                px: theme.page.horizontal,
                 background: 'none',
                 pointerEvents: 'none',
               },
             },
             '&.floatingMd': {
               [theme.breakpoints.up('md')]: {
-                padding: `0 ${theme.page.horizontal}`,
+                px: theme.page.horizontal,
                 background: 'none',
                 pointerEvents: 'none',
               },

package/Layout/components/LayoutProvider.tsx

@@ -1,14 +1,13 @@
-import { MotionValue } from 'framer-motion'
 import { useMemo } from 'react'
 import { layoutContext } from '../context/layoutContext'
+import { LayoutContext } from '../types'
 
 export type LayoutProviderProps = {
   children: React.ReactNode
-  scroll: MotionValue<number>
-}
+} & LayoutContext
 
 export function LayoutProvider(props: LayoutProviderProps) {
-  const { children, scroll } = props
+  const { children, scroll: scroll } = props
 
   return (
     <layoutContext.Provider value={useMemo(() => ({ scroll }), [scroll])}>

package/Layout/context/layoutContext.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 import { LayoutContext } from '../types'
 
-export const layoutContext = React.createContext(undefined as unknown as LayoutContext)
+export const layoutContext = React.createContext<null | LayoutContext>(null)
 layoutContext.displayName = 'layoutContext'

package/Layout/hooks/useScrollY.tsx

@@ -2,5 +2,10 @@ import { useContext } from 'react'
 import { layoutContext } from '../context/layoutContext'
 
 export function useScrollY() {
-  return useContext(layoutContext).scroll
+  const context = useContext(layoutContext)
+
+  if (!context) {
+    throw new Error('useScrollY must be used within a LayoutProvider')
+  }
+  return context.scroll
 }

package/LayoutDefault/components/LayoutDefault.tsx

@@ -40,8 +40,9 @@ export function LayoutDefault(props: LayoutDefaultProps) {
     sx = [],
   } = props
 
-  const scrollWithOffset = useTransform(
-    [useScroll().scrollY, useScrollOffset()],
+  const { scrollY } = useScroll()
+  const scrollYOffset = useTransform(
+    [scrollY, useScrollOffset()],
     ([y, offset]: number[]) => y + offset,
   )
 
@@ -66,7 +67,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
-      <LayoutProvider scroll={scrollWithOffset}>
+      <LayoutProvider scroll={scrollYOffset}>
         {beforeHeader}
         <Box
           component='header'

package/LayoutOverlay/components/LayoutOverlay.tsx

@@ -1,10 +1,11 @@
 import { usePageContext, useGo, useScrollOffset } from '@graphcommerce/framer-next-pages'
-import { ScrollerProvider, ScrollSnapType } from '@graphcommerce/framer-scroller'
+import { ScrollerProvider } from '@graphcommerce/framer-scroller'
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
 import { useEventCallback } from '@mui/material'
 import { usePresence } from 'framer-motion'
 import type { SetOptional } from 'type-fest'
 import { OverlayBase, LayoutOverlayBaseProps } from '../../Overlay/components/OverlayBase'
+import { variantsToScrollSnapType } from '../../Overlay/utils/variantsToScrollSnapType'
 
 export type LayoutOverlayProps = Omit<
   SetOptional<LayoutOverlayBaseProps, 'variantSm' | 'variantMd'>,
@@ -14,22 +15,13 @@ export type LayoutOverlayProps = Omit<
 export function LayoutOverlay(props: LayoutOverlayProps) {
   const { children, variantSm = 'bottom', variantMd = 'right', ...otherProps } = props
 
-  const scrollSnapTypeSm: ScrollSnapType =
-    variantSm === 'left' || variantSm === 'right' ? 'inline mandatory' : 'block proximity'
-  const scrollSnapTypeMd: ScrollSnapType =
-    variantMd === 'left' || variantMd === 'right' ? 'inline mandatory' : 'block proximity'
-
   const { closeSteps, active, direction } = usePageContext()
   const onCloseHandler = useGo(closeSteps * -1)
   const offsetPageY = useMotionValueValue(useScrollOffset(), (v) => v)
   const [isPresent, safeToRemove] = usePresence()
 
   return (
-    <ScrollerProvider
-      scrollSnapTypeSm={scrollSnapTypeSm}
-      scrollSnapTypeMd={scrollSnapTypeMd}
-      _inititalSnap={false}
-    >
+    <ScrollerProvider {...variantsToScrollSnapType(props)} _inititalSnap={false}>
       <OverlayBase
         active={active}
         direction={direction}

package/Navigation/components/NavigationOverlay.tsx

@@ -7,7 +7,7 @@ import type { LiteralUnion } from 'type-fest'
 import { IconSvg, useIconSvgSize } from '../../IconSvg'
 import { LayoutHeaderContent } from '../../Layout/components/LayoutHeaderContent'
 import { LayoutTitle } from '../../Layout/components/LayoutTitle'
-import { Overlay } from '../../Overlay/components/Overlay'
+import { OverlaySsr } from '../../Overlay/components/OverlaySsr'
 import { extendableComponent } from '../../Styles/extendableComponent'
 import { useFabSize } from '../../Theme'
 import { useMatchMedia } from '../../hooks'
@@ -90,7 +90,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
   if (selectedLevel === -1 && serverRenderDepth <= 0) return null
 
   return (
-    <Overlay
+    <OverlaySsr
       className={classes.root}
       active={activeAndNotClosing}
       safeToRemove={afterClose}
@@ -275,7 +275,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
           </Box>
         </Box>
       </MotionDiv>
-    </Overlay>
+    </OverlaySsr>
   )
 })
 

package/Overlay/components/Overlay.tsx

@@ -1,60 +1,39 @@
-import { ScrollerProvider, ScrollSnapType } from '@graphcommerce/framer-scroller'
-import { Box } from '@mui/material'
-import { useEffect, useState } from 'react'
+import { ScrollerProvider } from '@graphcommerce/framer-scroller'
+import { Portal } from '@mui/material'
+import { AnimatePresence, usePresence } from 'framer-motion'
 import type { SetOptional } from 'type-fest'
+import { variantsToScrollSnapType } from '../utils/variantsToScrollSnapType'
 import { OverlayBase, LayoutOverlayBaseProps } from './OverlayBase'
+import { OverlayContainer } from './OverlayContainer'
 
-export type OverlayProps = Omit<
+export type OverlayTmpProps = Omit<
   SetOptional<LayoutOverlayBaseProps, 'variantSm' | 'variantMd'>,
-  'direction' | 'offsetPageY' | 'isPresent'
+  'direction' | 'offsetPageY' | 'isPresent' | 'safeToRemove'
 >
 
-export function Overlay(props: OverlayProps) {
-  const { children, variantSm = 'bottom', variantMd = 'right', active, ...otherProps } = props
-
-  const scrollSnapTypeSm: ScrollSnapType =
-    variantSm === 'left' || variantSm === 'right' ? 'inline mandatory' : 'block proximity'
-  const scrollSnapTypeMd: ScrollSnapType =
-    variantMd === 'left' || variantMd === 'right' ? 'inline mandatory' : 'block proximity'
-
-  // todo: The overlay is always present in the DOM and the initial scroll position is set to 0.
-  //       This means in this case that the overlay is visisble. LayoutOverlayBase sets the scroll position to 320 with JS.
-  //       This would cause the overlay to be visisble for a moment before the scroll position is set.
-  //       The solution is to set the the first scroll-snap-align and scroll-snap-stop to the open position of the overlay.
-  //       However: We have control of the LayoutOverlayBase, we do not have control of all the child components so that solution will not work..
-  const [loaded, setLoaded] = useState(false)
-  useEffect(() => setLoaded(true), [])
+function OverlayUsePresence(props: OverlayTmpProps) {
+  const { variantSm = 'bottom', variantMd = 'right', active, ...otherProps } = props
+  const [isPresent, safeToRemove] = usePresence()
 
   return (
-    <Box
-      className='Overlay'
-      sx={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        transform: loaded ? undefined : 'translateX(-200vw)',
-        pointerEvents: active ? undefined : 'none',
-        right: 0,
-        bottom: 0,
-        zIndex: 'drawer',
-        '& .LayoutOverlayBase-overlayPane': {
-          boxShadow: active ? undefined : 0,
-        },
-      }}
-    >
-      <ScrollerProvider scrollSnapTypeSm={scrollSnapTypeSm} scrollSnapTypeMd={scrollSnapTypeMd}>
-        <OverlayBase
-          offsetPageY={0}
-          variantMd={variantMd}
-          variantSm={variantSm}
-          direction={1}
-          active={active}
-          isPresent={active}
-          {...otherProps}
-        >
-          {children}
-        </OverlayBase>
-      </ScrollerProvider>
-    </Box>
+    <Portal>
+      <OverlayContainer active={active}>
+        <ScrollerProvider {...variantsToScrollSnapType(props)}>
+          <OverlayBase
+            active={active}
+            variantMd={variantMd}
+            variantSm={variantSm}
+            isPresent={isPresent}
+            safeToRemove={safeToRemove}
+            {...otherProps}
+          />
+        </ScrollerProvider>
+      </OverlayContainer>
+    </Portal>
   )
 }
+
+export function Overlay(props: OverlayTmpProps) {
+  const { active } = props
+  return <AnimatePresence>{active && <OverlayUsePresence {...props} />}</AnimatePresence>
+}

package/Overlay/components/OverlayBase.tsx

@@ -2,7 +2,7 @@ import { Scroller, useScrollerContext, useScrollTo } from '@graphcommerce/framer
 import { dvh, dvw, useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
 import { Box, styled, SxProps, Theme, useTheme, useThemeProps } from '@mui/material'
 import { m, MotionProps, useDomEvent, useMotionValue, useTransform } from 'framer-motion'
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react'
 import { LayoutProvider } from '../../Layout/components/LayoutProvider'
 import { ExtendableComponent, extendableComponent } from '../../Styles'
 import { useOverlayPosition } from '../hooks/useOverlayPosition'
@@ -26,14 +26,14 @@ type OverridableProps = {
 }
 
 export type LayoutOverlayBaseProps = {
-  children?: React.ReactNode
+  children?: React.ReactNode | (() => React.ReactNode)
   className?: string
   sx?: SxProps<Theme>
   sxBackdrop?: SxProps<Theme>
   active: boolean
-  direction: 1 | -1
+  direction?: 1 | -1
   onClosed: () => void
-  offsetPageY: number
+  offsetPageY?: number
   isPresent: boolean
   safeToRemove?: (() => void) | null | undefined
   overlayPaneProps?: MotionProps
@@ -69,8 +69,8 @@ const clearScrollLock = () => {
   document.body.style.overflow = ''
 }
 
-export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
-  const props = useThemeProps({ name, props: incommingProps })
+export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
+  const props = useThemeProps({ name, props: incomingProps })
 
   const {
     children,
@@ -85,8 +85,8 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
     sxBackdrop = [],
     active,
     onClosed,
-    direction,
-    offsetPageY,
+    direction = 1,
+    offsetPageY = 0,
     isPresent,
     safeToRemove,
     overlayPaneProps,
@@ -214,9 +214,9 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
   }, [offsetY])
 
   // Create the exact position for the LayoutProvider which offsets the top of the overlay
-  const scrollWithoffset = useTransform(
-    [scroll.y, positions.open.y, offsetY],
-    ([y, openY, offsetYv]: number[]) => Math.max(0, y - openY - offsetYv + offsetPageY),
+  const scrollYOffset = useTransform(
+    [scroll.y, positions.open.y],
+    ([y, openY]: number[]) => y - openY + offsetPageY,
   )
 
   const onClickAway = useCallback(
@@ -447,13 +447,19 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
                   maxWidth: dvw(100),
                 },
 
+                '&.variantMdBottom.sizeMdFloating': {
+                  width: widthMd,
+                },
+
                 '&.sizeMdFloating': {
                   borderRadius: `${theme.shape.borderRadius * 4}px`,
                 },
               },
             })}
           >
-            <LayoutProvider scroll={scrollWithoffset}>{children}</LayoutProvider>
+            <LayoutProvider scroll={scrollYOffset}>
+              {active && (typeof children === 'function' ? children() : children)}
+            </LayoutProvider>
           </MotionDiv>
         </Box>
       </Scroller>

package/Overlay/components/OverlayContainer.tsx

@@ -0,0 +1,32 @@
+import { Box } from '@mui/material'
+import { LayoutOverlayBaseProps } from './OverlayBase'
+
+type OverlayContainerProps = Pick<LayoutOverlayBaseProps, 'active'> & {
+  hidden?: boolean
+  children: React.ReactNode
+}
+
+export function OverlayContainer(props: OverlayContainerProps) {
+  const { children, active, hidden } = props
+
+  return (
+    <Box
+      className='Overlay'
+      sx={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        transform: hidden ? 'translateX(-200vw)' : undefined,
+        pointerEvents: active ? undefined : 'none',
+        right: 0,
+        bottom: 0,
+        zIndex: 'drawer',
+        '& .LayoutOverlayBase-overlayPane': {
+          boxShadow: active ? undefined : 0,
+        },
+      }}
+    >
+      {children}
+    </Box>
+  )
+}