@primer/components 29.1.1 → 30.0.0-rc.9be85598

package/src/Portal/Portal.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import {createPortal} from 'react-dom'
+
+const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__'
+const DEFAULT_PORTAL_CONTAINER_NAME = '__default__'
+
+const portalRootRegistry: Partial<Record<string, Element>> = {}
+
+/**
+ * Register a container to serve as a portal root.
+ * @param root The element that will be the root for portals created in this container
+ * @param name The name of the container, to be used with the `containerName` prop on the Portal Component.
+ * If name is not specified, registers the default portal root.
+ */
+export function registerPortalRoot(root: Element, name = DEFAULT_PORTAL_CONTAINER_NAME): void {
+  portalRootRegistry[name] = root
+}
+
+// Ensures that a default portal root exists and is registered. If a DOM element exists
+// with id __primerPortalRoot__, allow that element to serve as the default portal root.
+// Otherwise, create that element and attach it to the end of document.body.
+function ensureDefaultPortal() {
+  const existingDefaultPortalContainer = portalRootRegistry[DEFAULT_PORTAL_CONTAINER_NAME]
+  if (!existingDefaultPortalContainer || !document.body.contains(existingDefaultPortalContainer)) {
+    let defaultPortalContainer = document.getElementById(PRIMER_PORTAL_ROOT_ID)
+    if (!(defaultPortalContainer instanceof Element)) {
+      defaultPortalContainer = document.createElement('div')
+      defaultPortalContainer.setAttribute('id', PRIMER_PORTAL_ROOT_ID)
+      defaultPortalContainer.style.position = 'absolute'
+      defaultPortalContainer.style.top = '0'
+      defaultPortalContainer.style.left = '0'
+      const suitablePortalRoot = document.querySelector('[data-portal-root]')
+      if (suitablePortalRoot) {
+        suitablePortalRoot.appendChild(defaultPortalContainer)
+      } else {
+        document.body.appendChild(defaultPortalContainer)
+      }
+    }
+
+    registerPortalRoot(defaultPortalContainer)
+  }
+}
+
+export interface PortalProps {
+  /**
+   * Called when this portal is added to the DOM
+   */
+  onMount?: () => void
+
+  /**
+   * Optional. Mount this portal at the container specified
+   * by this name. The container must be previously registered
+   * with `registerPortal`.
+   */
+  containerName?: string
+}
+
+/**
+ * Creates a React Portal, placing all children in a separate physical DOM root node.
+ * @see https://reactjs.org/docs/portals.html
+ */
+export const Portal: React.FC<PortalProps> = ({children, onMount, containerName: _containerName}) => {
+  const hostElement = document.createElement('div')
+
+  // Portaled content should get their own stacking context so they don't interfere
+  // with each other in unexpected ways. One should never find themselves tempted
+  // to change the zIndex to a value other than "1".
+  hostElement.style.position = 'relative'
+  hostElement.style.zIndex = '1'
+  const elementRef = React.useRef(hostElement)
+
+  React.useLayoutEffect(() => {
+    let containerName = _containerName
+    if (containerName === undefined) {
+      containerName = DEFAULT_PORTAL_CONTAINER_NAME
+      ensureDefaultPortal()
+    }
+    const parentElement = portalRootRegistry[containerName]
+
+    if (!parentElement) {
+      throw new Error(
+        `Portal container '${_containerName}' is not yet registered. Container must be registered with registerPortal before use.`
+      )
+    }
+    const element = elementRef.current
+    parentElement.appendChild(element)
+    onMount?.()
+
+    return () => {
+      parentElement.removeChild(element)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [elementRef])
+
+  return createPortal(children, elementRef.current)
+}

package/src/Portal/index.ts

@@ -0,0 +1,5 @@
+import {Portal, PortalProps, registerPortalRoot} from './Portal'
+
+export default Portal
+export {registerPortalRoot}
+export type {PortalProps}

package/src/Position.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import styled from 'styled-components'
+import Box from './Box'
+import {ComponentProps} from './utils/types'
+
+type StyledPositionProps = {as?: React.ElementType}
+
+/**
+ * @deprecated Use the Box component instead (i.e. <Position> → <Box>)
+ */
+const Position = styled(Box)<StyledPositionProps>``
+
+export type PositionProps = ComponentProps<typeof Position>
+
+/**
+ * @deprecated Use the Box component instead (i.e. <Absolute> → <Box position="absolute">)
+ */
+export default Position
+
+// Absolute
+export type AbsoluteProps = Omit<PositionProps, 'position'>
+
+/**
+ * @deprecated Use the Box component instead (i.e. <Absolute> → <Box position="absolute">)
+ */
+export const Absolute = React.forwardRef((props: AbsoluteProps, ref) => {
+  return <Position {...props} position="absolute" ref={ref} />
+})
+Absolute.displayName = 'Absolute'
+
+// Fixed
+export type FixedProps = Omit<PositionProps, 'position'>
+
+/**
+ * @deprecated Use the Box component instead (i.e. <Fixed> → <Box position="fixed">)
+ */
+export const Fixed = React.forwardRef((props: AbsoluteProps, ref) => {
+  return <Position {...props} position="fixed" ref={ref} />
+})
+Fixed.displayName = 'Fixed'
+
+// Relative
+export type RelativeProps = Omit<PositionProps, 'position'>
+
+/**
+ * @deprecated Use the Box component instead (i.e. <Relative> → <Box position="relative">)
+ */
+export const Relative = React.forwardRef((props: RelativeProps, ref) => {
+  return <Position {...props} position="relative" ref={ref} />
+})
+Relative.displayName = 'Relative'
+
+// Sticky
+export type StickyProps = Omit<PositionProps, 'position'>
+
+/**
+ * @deprecated Use the Box component instead (i.e. <Sticky> → <Box position="sticky">)
+ */
+export const Sticky = React.forwardRef((props: StickyProps, ref) => {
+  return <Position {...props} position="sticky" ref={ref} />
+})
+Sticky.defaultProps = {top: 0, zIndex: 1}
+Sticky.displayName = 'Sticky'

package/src/ProgressBar.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import styled from 'styled-components'
+import {width, WidthProps} from 'styled-system'
+import {COMMON, get, SystemCommonProps} from './constants'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+const Bar = styled.span<{progress?: string | number} & SystemCommonProps>`
+  width: ${props => (props.progress ? `${props.progress}%` : 0)};
+  ${COMMON}
+`
+
+const sizeMap = {
+  small: '5px',
+  large: '10px',
+  default: '8px'
+}
+
+type StyledProgressContainerProps = {
+  inline?: boolean
+  barSize?: keyof typeof sizeMap
+} & WidthProps &
+  SystemCommonProps &
+  SxProp
+
+const ProgressContainer = styled.span<StyledProgressContainerProps>`
+  display: ${props => (props.inline ? 'inline-flex' : 'flex')};
+  overflow: hidden;
+  background-color: ${get('colors.border.default')};
+  border-radius: ${get('radii.1')};
+  height: ${props => sizeMap[props.barSize || 'default']};
+  ${COMMON}
+  ${width}
+  ${sx};
+`
+
+export type ProgressBarProps = ComponentProps<typeof ProgressContainer> & ComponentProps<typeof Bar>
+
+function ProgressBar({progress, bg, theme, ...rest}: ProgressBarProps) {
+  return (
+    <ProgressContainer theme={theme} {...rest}>
+      <Bar progress={progress} bg={bg} theme={theme} />
+    </ProgressContainer>
+  )
+}
+
+ProgressBar.defaultProps = {
+  bg: 'bg.successInverse',
+  barSize: 'default'
+}
+
+export default ProgressBar

package/src/SelectMenu/SelectMenu.tsx

@@ -0,0 +1,125 @@
+import React, {useCallback, useEffect, useRef, useState} from 'react'
+import styled from 'styled-components'
+import {COMMON, SystemCommonProps} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
+import useKeyboardNav from './hooks/useKeyboardNav'
+import {MenuContext} from './SelectMenuContext'
+import SelectMenuDivider from './SelectMenuDivider'
+import SelectMenuFilter from './SelectMenuFilter'
+import SelectMenuFooter from './SelectMenuFooter'
+import SelectMenuHeader from './SelectMenuHeader'
+import SelectMenuItem from './SelectMenuItem'
+import SelectMenuList from './SelectMenuList'
+import SelectMenuLoadingAnimation from './SelectMenuLoadingAnimation'
+import SelectMenuModal from './SelectMenuModal'
+import SelectMenuTab from './SelectMenuTab'
+import SelectMenuTabPanel from './SelectMenuTabPanel'
+import SelectMenuTabs from './SelectMenuTabs'
+
+const wrapperStyles = `
+  // Remove marker added by the display: list-item browser default
+  > summary {
+    list-style: none;
+  }
+  // Remove marker added by details polyfill
+  > summary::before {
+    display: none;
+  }
+  // Remove marker added by Chrome
+  > summary::-webkit-details-marker {
+    display: none;
+  }
+`
+
+const StyledSelectMenu = styled.details<SystemCommonProps & SxProp>`
+  ${wrapperStyles}
+  ${COMMON}
+  ${sx};
+`
+
+type SelectMenuInternalProps = {
+  initialTab?: string
+  as?: React.ReactElement
+} & ComponentProps<typeof StyledSelectMenu>
+
+// 'as' is spread out because we don't want users to be able to change the tag.
+const SelectMenu = React.forwardRef<HTMLElement, SelectMenuInternalProps>(
+  ({children, initialTab = '', as: _ignoredAs, ...rest}, forwardedRef) => {
+    const backupRef = useRef<HTMLElement>(null)
+    const ref = forwardedRef ?? backupRef
+    const [selectedTab, setSelectedTab] = useState(initialTab)
+    const [open, setOpen] = useState(false)
+    const menuProviderValues = {
+      selectedTab,
+      setSelectedTab,
+      setOpen,
+      open,
+      initialTab
+    }
+
+    const onClickOutside = useCallback(
+      event => {
+        if ('current' in ref && ref.current && !ref.current.contains(event.target)) {
+          if (!event.defaultPrevented) {
+            setOpen(false)
+          }
+        }
+      },
+      [ref, setOpen]
+    )
+
+    // handles the overlay behavior - closing the menu when clicking outside of it
+    useEffect(() => {
+      if (open) {
+        document.addEventListener('click', onClickOutside)
+        return () => {
+          document.removeEventListener('click', onClickOutside)
+        }
+      }
+    }, [open, onClickOutside])
+
+    function toggle(event: React.SyntheticEvent<HTMLDetailsElement, Event>) {
+      setOpen((event.target as HTMLDetailsElement).open)
+    }
+
+    useKeyboardNav(ref, open, setOpen)
+
+    return (
+      <MenuContext.Provider value={menuProviderValues}>
+        <StyledSelectMenu ref={ref} {...rest} open={open} onToggle={toggle}>
+          {children}
+        </StyledSelectMenu>
+      </MenuContext.Provider>
+    )
+  }
+)
+
+SelectMenu.displayName = 'SelectMenu'
+
+export type SelectMenuProps = ComponentProps<typeof SelectMenu>
+export type {SelectMenuDividerProps} from './SelectMenuDivider'
+export type {SelectMenuFilterProps} from './SelectMenuFilter'
+export type {SelectMenuFooterProps} from './SelectMenuFooter'
+export type {SelectMenuHeaderProps} from './SelectMenuHeader'
+export type {SelectMenuItemProps} from './SelectMenuItem'
+export type {SelectMenuListProps} from './SelectMenuList'
+export type {SelectMenuLoadingAnimationProps} from './SelectMenuLoadingAnimation'
+export type {SelectMenuModalProps} from './SelectMenuModal'
+export type {SelectMenuTabProps} from './SelectMenuTab'
+export type {SelectMenuTabPanelProps} from './SelectMenuTabPanel'
+export type {SelectMenuTabsProps} from './SelectMenuTabs'
+export default Object.assign(SelectMenu, {
+  MenuContext,
+  List: SelectMenuList,
+  Divider: SelectMenuDivider,
+  Filter: SelectMenuFilter,
+  Footer: SelectMenuFooter,
+  Item: SelectMenuItem,
+  Modal: SelectMenuModal,
+  Tabs: SelectMenuTabs,
+  Tab: SelectMenuTab,
+  TabPanel: SelectMenuTabPanel,
+  Header: SelectMenuHeader,
+  LoadingAnimation: SelectMenuLoadingAnimation
+})

package/src/SelectMenu/SelectMenuContext.tsx

@@ -0,0 +1,9 @@
+import {createContext} from 'react'
+
+export const MenuContext = createContext<{
+  selectedTab?: string
+  setSelectedTab?: React.Dispatch<React.SetStateAction<string>>
+  setOpen?: React.Dispatch<React.SetStateAction<boolean>>
+  open?: boolean
+  initialTab?: string
+}>({})

package/src/SelectMenu/SelectMenuDivider.tsx

@@ -0,0 +1,25 @@
+import styled, {css} from 'styled-components'
+import {COMMON, get, SystemCommonProps} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
+
+const dividerStyles = css`
+  padding: ${get('space.1')} ${get('space.3')};
+  margin: 0;
+  font-size: ${get('fontSizes.0')};
+  font-weight: ${get('fontWeights.bold')};
+  color: ${get('colors.fg.muted')};
+  background-color: ${get('colors.canvas.subtle')};
+  border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
+`
+
+const SelectMenuDivider = styled.div<SystemCommonProps & SxProp>`
+  ${dividerStyles}
+  ${COMMON}
+  ${sx};
+`
+
+SelectMenuDivider.displayName = 'SelectMenu.Divider'
+
+export type SelectMenuDividerProps = ComponentProps<typeof SelectMenuDivider>
+export default SelectMenuDivider

package/src/SelectMenu/SelectMenuFilter.tsx

@@ -0,0 +1,51 @@
+import React, {forwardRef, useContext, useEffect, useRef} from 'react'
+import styled from 'styled-components'
+import {COMMON, get, SystemCommonProps} from '../constants'
+import sx, {SxProp} from '../sx'
+import TextInput, {TextInputProps} from '../TextInput'
+import {ComponentProps} from '../utils/types'
+import {MenuContext} from './SelectMenuContext'
+
+const StyledForm = styled.form<SystemCommonProps & SxProp>`
+  padding: ${get('space.3')};
+  margin: 0;
+  border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
+  background-color: ${get('colors.canvas.overlay')};
+  ${COMMON};
+
+  @media (min-width: ${get('breakpoints.0')}) {
+    padding: ${get('space.2')};
+  }
+
+  ${sx};
+`
+
+type SelectMenuFilterInternalProps = {
+  value?: string
+} & TextInputProps
+
+const SelectMenuFilter = forwardRef<HTMLInputElement, SelectMenuFilterInternalProps>(
+  ({theme, value, sx: sxProp, ...rest}, forwardedRef) => {
+    const inputRef = useRef<HTMLInputElement>(null)
+    const ref = forwardedRef ?? inputRef
+    const {open} = useContext(MenuContext)
+
+    // puts focus on the filter input when the menu is opened
+    useEffect(() => {
+      if (open) {
+        inputRef.current?.focus()
+      }
+    }, [open])
+
+    return (
+      <StyledForm theme={theme} sx={sxProp}>
+        <TextInput theme={theme} ref={ref} width="100%" block value={value} contrast {...rest} />
+      </StyledForm>
+    )
+  }
+)
+
+SelectMenuFilter.displayName = 'SelectMenu.Filter'
+
+export type SelectMenuFilterProps = ComponentProps<typeof SelectMenuFilter>
+export default SelectMenuFilter

package/src/SelectMenu/SelectMenuFooter.tsx

@@ -0,0 +1,28 @@
+import styled, {css} from 'styled-components'
+import {COMMON, get, SystemCommonProps} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
+
+const footerStyles = css`
+  margin-top: -1px;
+  padding: ${get('space.2')} ${get('space.3')};
+  font-size: ${get('fontSizes.0')};
+  color: ${get('colors.fg.muted')};
+  text-align: center;
+  border-top: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
+
+  @media (min-width: ${get('breakpoints.0')}) {
+    padding: ${get('space.1')} ${get('space.2')};
+  }
+`
+
+const SelectMenuFooter = styled.footer<SystemCommonProps & SxProp>`
+  ${footerStyles}
+  ${COMMON}
+  ${sx};
+`
+
+SelectMenuFooter.displayName = 'SelectMenu.Footer'
+
+export type SelectMenuFooterProps = ComponentProps<typeof SelectMenuFooter>
+export default SelectMenuFooter

package/src/SelectMenu/SelectMenuHeader.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import styled from 'styled-components'
+import {COMMON, get, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
+
+// SelectMenu.Header is intentionally not exported, it's an internal component used in
+// SelectMenu.Modal
+
+const SelectMenuTitle = styled.h3`
+  color: ${get('colors.fg.default')};
+  flex: auto;
+  font-size: ${get('fontSizes.1')};
+  font-weight: ${get('fontWeights.bold')};
+  margin: 0;
+
+  @media (min-width: ${get('breakpoints.0')}) {
+    font-size: inherit;
+  }
+`
+
+const StyledHeader = styled.header<SystemTypographyProps & SystemCommonProps & SxProp>`
+  display: flex;
+  flex: none; // fixes header from getting squeezed in Safari iOS
+  padding: ${get('space.3')};
+  border-bottom: ${get('borderWidths')} solid ${get('colors.border.muted')};
+  ${COMMON}
+  ${TYPOGRAPHY}
+
+  @media (min-width: ${get('breakpoints.0')}) {
+    padding-top: ${get('space.2')};
+    padding-bottom: ${get('space.2')};
+  }
+
+  ${sx};
+`
+
+export type SelectMenuHeaderProps = ComponentProps<typeof StyledHeader>
+
+const SelectMenuHeader = ({children, theme, ...rest}: SelectMenuHeaderProps) => {
+  return (
+    <StyledHeader theme={theme} {...rest}>
+      <SelectMenuTitle theme={theme}>{children}</SelectMenuTitle>
+    </StyledHeader>
+  )
+}
+
+SelectMenuHeader.displayName = 'SelectMenu.Header'
+
+export default SelectMenuHeader

package/src/SelectMenu/SelectMenuItem.tsx

@@ -0,0 +1,137 @@
+import {CheckIcon} from '@primer/octicons-react'
+import React, {forwardRef, useContext, useRef} from 'react'
+import styled, {css} from 'styled-components'
+import {COMMON, get, SystemCommonProps} from '../constants'
+import StyledOcticon from '../StyledOcticon'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
+import {MenuContext} from './SelectMenuContext'
+
+export const listItemStyles = css`
+  display: flex;
+  align-items: center;
+  padding: ${get('space.3')};
+  overflow: hidden;
+  text-align: left;
+  cursor: pointer;
+  background-color: ${get('colors.canvas.overlay')};
+  border: 0;
+  border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
+  color: ${get('colors.fg.muted')};
+  text-decoration: none;
+  font-size: ${get('fontSizes.0')};
+  font-family: inherit; // needed if user uses a "button" tag
+  width: 100%;
+
+  &:hover {
+    text-decoration: none;
+  }
+  &:focus {
+    outline: none;
+  }
+
+  &[hidden] {
+    display: none !important;
+  }
+
+  @media (min-width: ${get('breakpoints.0')}) {
+    padding-top: ${get('space.2')};
+    padding-bottom: ${get('space.2')};
+  }
+
+  .SelectMenu-icon {
+    width: ${get('space.3')};
+    margin-right: ${get('space.2')};
+    flex-shrink: 0;
+  }
+
+  .SelectMenu-selected-icon {
+    visibility: hidden;
+    transition: transform 0.12s cubic-bezier(0.5, 0.1, 1, 0.5), visibility 0s 0.12s linear;
+    transform: scale(0);
+  }
+
+  // selected items
+  &[aria-checked='true'] {
+    font-weight: 500;
+    color: ${get('colors.fg.default')};
+
+    .SelectMenu-selected-icon {
+      visibility: visible;
+      transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), visibility 0s linear;
+      transform: scale(1);
+    }
+  }
+
+  // can hover states
+  @media (hover: hover) {
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: ${get('colors.neutral.subtle')};
+    }
+  }
+
+  // Can not hover states
+  //
+  // For touch input
+
+  @media (hover: none) {
+    // Android
+    &:focus,
+    &:active {
+      background-color: ${get('colors.canvas.subtle')};
+    }
+
+    // iOS Safari
+    // :active would work if ontouchstart is added to the button
+    // Instead this tweaks the "native" highlight color
+    -webkit-tap-highlight-color: ${get('colors.selectMenu.tapHighlight')};
+  }
+`
+
+const StyledItem = styled.a.attrs(() => ({
+  role: 'menuitemcheckbox'
+}))<SystemCommonProps & SxProp>`
+  ${listItemStyles}
+  ${COMMON}
+  ${sx};
+`
+
+type SelectMenuItemInteralProps = {
+  as?: React.ElementType
+  selected?: boolean
+} & ComponentProps<typeof StyledItem>
+
+const SelectMenuItem = forwardRef<HTMLAnchorElement, SelectMenuItemInteralProps>(
+  ({children, selected, theme, onClick, ...rest}, forwardedRef) => {
+    const menuContext = useContext(MenuContext)
+    const backupRef = useRef<HTMLAnchorElement>(null)
+    const itemRef = forwardedRef ?? backupRef
+
+    // close the menu when an item is clicked
+    // this can be overriden if the user provides a `onClick` prop and prevents default in it
+    const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+      onClick && onClick(e)
+
+      if (!e.defaultPrevented) {
+        menuContext.setOpen?.(false)
+      }
+    }
+    return (
+      <StyledItem ref={itemRef} {...rest} theme={theme} onClick={handleClick} aria-checked={selected}>
+        <StyledOcticon theme={theme} className="SelectMenu-icon SelectMenu-selected-icon" icon={CheckIcon} />
+        {children}
+      </StyledItem>
+    )
+  }
+)
+
+SelectMenuItem.defaultProps = {
+  selected: false
+}
+
+SelectMenuItem.displayName = 'SelectMenu.Item'
+
+export type SelectMenuItemProps = ComponentProps<typeof SelectMenuItem>
+export default SelectMenuItem

package/src/SelectMenu/SelectMenuList.tsx

@@ -0,0 +1,42 @@
+import styled, {css} from 'styled-components'
+import {COMMON, get, SystemCommonProps} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
+
+const listStyles = css`
+  position: relative;
+  padding: 0;
+  margin: 0;
+  flex: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: ${get('colors.canvas.overlay')};
+  -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
+
+  @media (hover: hover) {
+    .SelectMenuTab:focus {
+      background-color: ${get('colors.selectMenu.tapFocusBg')};
+    }
+
+    .SelectMenuTab:not([aria-checked='true']):hover {
+      color: ${get('colors.fg.default')};
+      background-color: ${get('colors.canvas.subtle')};
+    }
+
+    .SelectMenuTab:not([aria-checked='true']):active {
+      color: ${get('colors.fg.default')};
+      background-color: ${get('colors.canvas.subtle')};
+    }
+  }
+`
+
+const SelectMenuList = styled.div<SystemCommonProps & SxProp>`
+  ${listStyles}
+  ${COMMON}
+  ${sx};
+`
+
+SelectMenuList.displayName = 'SelectMenu.List'
+
+export type SelectMenuListProps = ComponentProps<typeof SelectMenuList>
+export default SelectMenuList