Function Root

packages/react/src/PageLayout/PageLayout.tsx:70–122

({
  containerWidth = 'xlarge',
  padding = 'normal',
  rowGap = 'normal',
  columnGap = 'normal',
  children,
  sx = {},
  _slotsConfig: slotsConfig,
})

// TODO: refs
const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
  containerWidth = 'xlarge',
  padding = 'normal',
  rowGap = 'normal',
  columnGap = 'normal',
  children,
  sx = {},
  _slotsConfig: slotsConfig,
}) => {
  const {rootRef, enableStickyPane, disableStickyPane, contentTopRef, contentBottomRef, stickyPaneHeight} =
    useStickyPaneHeight()

  const paneRef = useRef<HTMLDivElement>(null)

  const [slots, rest] = useSlots(children, slotsConfig ?? {header: Header, footer: Footer})

  return (
    <PageLayoutContext.Provider
      value={{
        padding,
        rowGap,
        columnGap,
        enableStickyPane,
        disableStickyPane,
        contentTopRef,
        contentBottomRef,
        paneRef,
      }}
    >
      <Box
        ref={rootRef}
        style={{
          // @ts-ignore TypeScript doesn't know about CSS custom properties
          '--sticky-pane-height': stickyPaneHeight,
        }}
        sx={merge<BetterSystemStyleObject>({padding: SPACING_MAP[padding]}, sx)}
      >
        <Box
          sx={{
            maxWidth: containerWidths[containerWidth],
            marginX: 'auto',
            display: 'flex',
            flexWrap: 'wrap',
          }}
        >
          {slots.header}
          <Box sx={{display: 'flex', flex: '1 1 100%', flexWrap: 'wrap', maxWidth: '100%'}}>{rest}</Box>
          {slots.footer}
        </Box>
      </Box>
    </PageLayoutContext.Provider>
  )
}

Root.displayName = 'PageLayout'