chore: remove sx from Overlay

.changeset/lazy-gifts-join.md

@@ -0,0 +1,6 @@
+---
+"@primer/react": major
+"@primer/styled-react": patch
+---
+
+chore: remove sx from Overlay

e2e/components/Overlay.test.ts

@@ -39,10 +39,6 @@ const stories = [
  title: 'Positioned Overlays',
  id: 'private-components-overlay-features--positioned-overlays',
  },
- {
- title: 'SX Props',
- id: 'private-components-overlay-dev--sx-props',
- },
 ] as const
 
 test.describe('Overlay ', () => {

packages/react/src/Overlay/Overlay.dev.stories.tsx

@@ -3,7 +3,6 @@ import type {Args, Meta} from '@storybook/react-vite'
 import Text from '../Text'
 import {Button, IconButton} from '../Button'
 import Overlay from './Overlay'
-import {useFocusTrap} from '../hooks/useFocusTrap'
 import {XIcon} from '@primer/octicons-react'
 import classes from './Overlay.dev.stories.module.css'
 
@@ -21,62 +20,6 @@ export default {
  },
 } as Meta<typeof Overlay>
 
-export const SxProps = (args: Args) => {
- const [isOpen, setIsOpen] = useState(false)
- const buttonRef = useRef<HTMLButtonElement>(null)
- const confirmButtonRef = useRef<HTMLButtonElement>(null)
- const anchorRef = useRef<HTMLDivElement>(null)
- const closeOverlay = () => setIsOpen(false)
- const containerRef = useRef<HTMLDivElement>(null)
- useFocusTrap({
- containerRef,
- disabled: !isOpen,
- })
- return (
- <div ref={anchorRef}>
- <Button
- ref={buttonRef}
- onClick={() => {
- setIsOpen(!isOpen)
- }}
- >
- Open overlay
- </Button>
- {isOpen || args.open ? (
- <Overlay
- initialFocusRef={confirmButtonRef}
- returnFocusRef={buttonRef}
- ignoreClickRefs={[buttonRef]}
- onEscape={closeOverlay}
- onClickOutside={closeOverlay}
- width="large"
- anchorSide="inside-right"
- role="dialog"
- aria-modal="true"
- aria-label="Sample overlay"
- ref={containerRef}
- sx={{
- left: '50%',
- mt: 2,
- color: 'var(--bgColor-danger-muted)',
- }}
- >
- <div className={classes.OverlayContent}>
- <IconButton
- aria-label="Close"
- onClick={closeOverlay}
- icon={XIcon}
- variant="invisible"
- className={classes.CloseButton}
- />
- <Text>Look! an overlay</Text>
- </div>
- </Overlay>
- ) : null}
- </div>
- )
-}
-
 export const PreventFocusOnOpen = (args: Args) => {
  const [isOpen, setIsOpen] = useState(false)
  const openButtonRef = useRef<HTMLButtonElement>(null)

packages/react/src/Overlay/Overlay.docs.json

@@ -146,11 +146,6 @@
  "description": "",
  "defaultValue": ""
  },
- {
- "name": "sx",
- "type": "SystemStyleObject",
- "deprecated": true
- },
  {
  "name": "responsiveVariant",
  "type": "'fullscreen'",

packages/react/src/Overlay/Overlay.features.stories.tsx

@@ -186,7 +186,7 @@ export const OverlayOnTopOfOverlay = ({anchorSide, role, open}: Args) => {
  onEscape={closeSecondaryOverlay}
  onClickOutside={closeSecondaryOverlay}
  width="small"
-sx={{top: '40px'}}
+style={{top: '40px'}}
  anchorSide={anchorSide}
  role={role}
  aria-modal={role === 'dialog' ? 'true' : undefined}

packages/react/src/Overlay/Overlay.tsx

@@ -6,15 +6,13 @@ import type {AriaRole, Merge} from '../utils/types'
 import type {TouchOrMouseEvent} from '../hooks'
 import {useOverlay} from '../hooks'
 import Portal from '../Portal'
-import type {SxProp} from '../sx'
 import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
 import type {AnchorSide} from '@primer/behaviors'
 import {useTheme} from '../ThemeProvider'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {useFeatureFlag} from '../FeatureFlags'
 import classes from './Overlay.module.css'
 import {clsx} from 'clsx'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 type StyledOverlayProps = {
  width?: keyof typeof widthMap
@@ -24,7 +22,7 @@ type StyledOverlayProps = {
  visibility?: 'visible' | 'hidden'
  overflow?: 'auto' | 'hidden' | 'scroll' | 'visible'
  style?: React.CSSProperties
-} & SxProp
+}
 
 export const heightMap = {
  xsmall: '192px',
@@ -91,7 +89,7 @@ type OwnOverlayProps = Merge<StyledOverlayProps, BaseOverlayProps>
  * @param bottom Optional. Vertical bottom position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
  * @param position Optional. Sets how an element is positioned in a document. Defaults to `absolute` positioning.
  */
-export const BaseOverlay = React.forwardRef<HTMLDivElement, OwnOverlayProps>(
+export const BaseOverlay = React.forwardRef(
  (
  {
  visibility,
@@ -106,13 +104,13 @@ export const BaseOverlay = React.forwardRef<HTMLDivElement, OwnOverlayProps>(
  className,
  maxHeight,
  maxWidth,
+ as: Component = 'div',
  ...rest
  },
  forwardedRef,
  ): ReactElement => {
  return (
- <BoxWithFallback
- as="div"
+ <Component
  {...rest}
  ref={forwardedRef}
  style={

packages/styled-react/src/components/ActionMenu.tsx

@@ -0,0 +1,24 @@
+import {ActionMenu as PrimerActionMenu, type SxProp} from '@primer/react'
+import {sx} from '../sx'
+import styled from 'styled-components'
+import type {ComponentProps} from 'react'
+
+type ActionMenuOverlayProps = ComponentProps<typeof PrimerActionMenu.Overlay> & SxProp
+
+const ActionMenuOverlay: React.ComponentType<ActionMenuOverlayProps> = styled(PrimerActionMenu.Overlay).withConfig({
+ shouldForwardProp: prop => (prop as keyof ActionMenuOverlayProps) !== 'sx',
+})`
+ ${sx}
+`
+
+export const ActionMenu: typeof PrimerActionMenu & {
+ Button: typeof PrimerActionMenu.Button
+ Anchor: typeof PrimerActionMenu.Anchor
+ Overlay: typeof ActionMenuOverlay
+ Divider: typeof PrimerActionMenu.Divider
+} = Object.assign(PrimerActionMenu, {
+ Button: PrimerActionMenu.Button,
+ Anchor: PrimerActionMenu.Anchor,
+ Overlay: ActionMenuOverlay,
+ Divider: PrimerActionMenu.Divider,
+})

packages/styled-react/src/components/Autocomplete.tsx

@@ -0,0 +1,34 @@
+import {
+ Autocomplete as PrimerAutocomplete,
+ type AutocompleteOverlayProps as PrimerAutocompleteOverlayProps,
+} from '@primer/react'
+import {sx, type SxProp} from '../sx'
+import styled from 'styled-components'
+import type {ComponentProps} from 'react'
+
+export type AutocompleteOverlayProps = PrimerAutocompleteOverlayProps & SxProp
+
+const AutocompleteOverlay: React.ComponentType<AutocompleteOverlayProps> = styled(
+ PrimerAutocomplete.Overlay,
+).withConfig({
+ shouldForwardProp: prop => (prop as keyof AutocompleteOverlayProps) !== 'sx',
+})<AutocompleteOverlayProps>`
+ ${sx}
+`
+
+interface AutocompleteExport {
+ (props: ComponentProps<typeof PrimerAutocomplete>): React.ReactNode
+ Context: typeof PrimerAutocomplete.Context
+ Input: typeof PrimerAutocomplete.Input
+ Menu: typeof PrimerAutocomplete.Menu
+ Overlay: typeof AutocompleteOverlay
+}
+
+const Autocomplete: AutocompleteExport = Object.assign(PrimerAutocomplete, {
+ Context: PrimerAutocomplete.Context,
+ Input: PrimerAutocomplete.Input,
+ Menu: PrimerAutocomplete.Menu,
+ Overlay: AutocompleteOverlay,
+})
+
+export {Autocomplete}

packages/styled-react/src/components/Overlay.tsx

@@ -0,0 +1,14 @@
+import {Overlay as PrimerOverlay, type OverlayProps as PrimerOverlayProps, sx, type SxProp} from '@primer/react'
+import styled from 'styled-components'
+import {type ForwardRefComponent} from '../polymorphic'
+
+type OverlayProps = PrimerOverlayProps & SxProp
+
+const Overlay: ForwardRefComponent<'div', OverlayProps> = styled(PrimerOverlay).withConfig({
+ shouldForwardProp: prop => (prop as keyof OverlayProps) !== 'sx',
+})<OverlayProps>`
+ ${sx}
+`
+
+export {Overlay}
+export type {OverlayProps}

packages/styled-react/src/index.tsx

@@ -1,6 +1,4 @@
 export {ActionList} from '@primer/react'
-export {ActionMenu} from '@primer/react'
-export {Autocomplete} from '@primer/react'
 export {Avatar} from '@primer/react'
 export {Breadcrumbs} from '@primer/react'
 export {Box, type BoxProps} from './components/Box'
@@ -10,7 +8,6 @@ export {Details} from '@primer/react'
 export {Heading} from '@primer/react'
 export {IconButton} from '@primer/react'
 export {Label} from '@primer/react'
-export {Overlay} from '@primer/react'
 export {ProgressBar} from '@primer/react'
 export {Select} from '@primer/react'
 export {Text} from '@primer/react'
@@ -29,6 +26,8 @@ export {themeGet} from '@primer/react'
 export {useColorSchemeVar} from '@primer/react'
 export {useTheme} from '@primer/react'
 
+export {ActionMenu} from './components/ActionMenu'
+export {Autocomplete, type AutocompleteOverlayProps} from './components/Autocomplete'
 export {Checkbox, type CheckboxProps} from './components/Checkbox'
 export {CircleBadge} from './components/CircleBadge'
 export {CounterLabel, type CounterLabelProps} from './components/CounterLabel'
@@ -39,6 +38,7 @@ export {Header, type HeaderProps} from './components/Header'
 export {Link, type LinkProps} from './components/Link'
 export {LinkButton, type LinkButtonProps} from './components/LinkButton'
 export {NavList, type NavListProps} from './components/NavList'
+export {Overlay} from './components/Overlay'
 export {PageLayout, type PageLayoutProps} from './components/PageLayout'
 export {
  PageHeader,