@primer/components 31.2.0-rc.50908ce9 → 31.2.0-rc.6afeaa37

package/package-lock.json

@@ -10,7 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "@primer/octicons-react": "^13.0.0",
-        "@primer/primitives": "5.1.0",
+        "@primer/primitives": "6.1.0",
         "@radix-ui/react-polymorphic": "0.0.14",
         "@react-aria/ssr": "3.1.0",
         "@styled-system/css": "5.1.5",
@@ -90,6 +90,8 @@
         "lodash.isobject": "3.0.2",
         "prettier": "2.3.2",
         "react": "17.0.2",
+        "react-dnd": "14.0.4",
+        "react-dnd-html5-backend": "14.0.2",
         "react-dom": "17.0.2",
         "react-test-renderer": "17.0.2",
         "rollup": "2.56.3",
@@ -7559,9 +7561,9 @@
       }
     },
     "node_modules/@primer/primitives": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-5.1.0.tgz",
-      "integrity": "sha512-pW8DIh6rZV0/R7lxHnVRJ/tdN4kDVSpAtdcCecxKsvtgK5d9haekt3ERpM6i93xKwB5CJYy9ouuC9C0UqWPI0A=="
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-6.1.0.tgz",
+      "integrity": "sha512-gwSVf5rVf2CMa/bU3/47LZosDHNfODMRJfKi7uJOqHWABVNl6Lf+thDM7Jb8tS9sEQQsUnrLDiGNjCScS81IXA=="
     },
     "node_modules/@radix-ui/react-polymorphic": {
       "version": "0.0.14",
@@ -7598,6 +7600,24 @@
         "react": "^16.8.0 || ^17.0.0-rc.1"
       }
     },
+    "node_modules/@react-dnd/asap": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz",
+      "integrity": "sha512-0XhqJSc6pPoNnf8DhdsPHtUhRzZALVzYMTzRwV4VI6DJNJ/5xxfL9OQUwb8IH5/2x7lSf7nAZrnzUD+16VyOVQ==",
+      "dev": true
+    },
+    "node_modules/@react-dnd/invariant": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-2.0.0.tgz",
+      "integrity": "sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw==",
+      "dev": true
+    },
+    "node_modules/@react-dnd/shallowequal": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz",
+      "integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==",
+      "dev": true
+    },
     "node_modules/@rollup/plugin-commonjs": {
       "version": "19.0.2",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-19.0.2.tgz",
@@ -17234,6 +17254,17 @@
       "integrity": "sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=",
       "dev": true
     },
+    "node_modules/dnd-core": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.1.tgz",
+      "integrity": "sha512-+PVS2VPTgKFPYWo3vAFEA8WPbTf7/xo43TifH9G8S1KqnrQu0o77A3unrF5yOugy4mIz7K5wAVFHUcha7wsz6A==",
+      "dev": true,
+      "dependencies": {
+        "@react-dnd/asap": "^4.0.0",
+        "@react-dnd/invariant": "^2.0.0",
+        "redux": "^4.1.1"
+      }
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -31528,6 +31559,45 @@
         "node": ">= 8"
       }
     },
+    "node_modules/react-dnd": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.4.tgz",
+      "integrity": "sha512-AFJJXzUIWp5WAhgvI85ESkDCawM0lhoVvfo/lrseLXwFdH3kEO3v8I2C81QPqBW2UEyJBIPStOhPMGYGFtq/bg==",
+      "dev": true,
+      "dependencies": {
+        "@react-dnd/invariant": "^2.0.0",
+        "@react-dnd/shallowequal": "^2.0.0",
+        "dnd-core": "14.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "peerDependencies": {
+        "@types/hoist-non-react-statics": ">= 3.3.1",
+        "@types/node": ">= 12",
+        "@types/react": ">= 16",
+        "react": ">= 16.14"
+      },
+      "peerDependenciesMeta": {
+        "@types/hoist-non-react-statics": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-dnd-html5-backend": {
+      "version": "14.0.2",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.0.2.tgz",
+      "integrity": "sha512-QgN6rYrOm4UUj6tIvN8ovImu6uP48xBXF2rzVsp6tvj6d5XQ7OjHI4SJ/ZgGobOneRAU3WCX4f8DGCYx0tuhlw==",
+      "dev": true,
+      "dependencies": {
+        "dnd-core": "14.0.1"
+      }
+    },
     "node_modules/react-docgen": {
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-5.4.0.tgz",
@@ -31956,6 +32026,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz",
+      "integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
     "node_modules/refractor": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.5.0.tgz",
@@ -43272,9 +43351,9 @@
       "requires": {}
     },
     "@primer/primitives": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-5.1.0.tgz",
-      "integrity": "sha512-pW8DIh6rZV0/R7lxHnVRJ/tdN4kDVSpAtdcCecxKsvtgK5d9haekt3ERpM6i93xKwB5CJYy9ouuC9C0UqWPI0A=="
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-6.1.0.tgz",
+      "integrity": "sha512-gwSVf5rVf2CMa/bU3/47LZosDHNfODMRJfKi7uJOqHWABVNl6Lf+thDM7Jb8tS9sEQQsUnrLDiGNjCScS81IXA=="
     },
     "@radix-ui/react-polymorphic": {
       "version": "0.0.14",
@@ -43302,6 +43381,24 @@
         "@babel/runtime": "^7.6.2"
       }
     },
+    "@react-dnd/asap": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz",
+      "integrity": "sha512-0XhqJSc6pPoNnf8DhdsPHtUhRzZALVzYMTzRwV4VI6DJNJ/5xxfL9OQUwb8IH5/2x7lSf7nAZrnzUD+16VyOVQ==",
+      "dev": true
+    },
+    "@react-dnd/invariant": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-2.0.0.tgz",
+      "integrity": "sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw==",
+      "dev": true
+    },
+    "@react-dnd/shallowequal": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz",
+      "integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==",
+      "dev": true
+    },
     "@rollup/plugin-commonjs": {
       "version": "19.0.2",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-19.0.2.tgz",
@@ -50661,6 +50758,17 @@
       "integrity": "sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=",
       "dev": true
     },
+    "dnd-core": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.1.tgz",
+      "integrity": "sha512-+PVS2VPTgKFPYWo3vAFEA8WPbTf7/xo43TifH9G8S1KqnrQu0o77A3unrF5yOugy4mIz7K5wAVFHUcha7wsz6A==",
+      "dev": true,
+      "requires": {
+        "@react-dnd/asap": "^4.0.0",
+        "@react-dnd/invariant": "^2.0.0",
+        "redux": "^4.1.1"
+      }
+    },
     "doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -61611,6 +61719,28 @@
         }
       }
     },
+    "react-dnd": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.4.tgz",
+      "integrity": "sha512-AFJJXzUIWp5WAhgvI85ESkDCawM0lhoVvfo/lrseLXwFdH3kEO3v8I2C81QPqBW2UEyJBIPStOhPMGYGFtq/bg==",
+      "dev": true,
+      "requires": {
+        "@react-dnd/invariant": "^2.0.0",
+        "@react-dnd/shallowequal": "^2.0.0",
+        "dnd-core": "14.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      }
+    },
+    "react-dnd-html5-backend": {
+      "version": "14.0.2",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.0.2.tgz",
+      "integrity": "sha512-QgN6rYrOm4UUj6tIvN8ovImu6uP48xBXF2rzVsp6tvj6d5XQ7OjHI4SJ/ZgGobOneRAU3WCX4f8DGCYx0tuhlw==",
+      "dev": true,
+      "requires": {
+        "dnd-core": "14.0.1"
+      }
+    },
     "react-docgen": {
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-5.4.0.tgz",
@@ -61956,6 +62086,15 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "redux": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz",
+      "integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
     "refractor": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.5.0.tgz",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "31.2.0-rc.50908ce9",
+  "version": "31.2.0-rc.6afeaa37",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -15,7 +15,7 @@
     "start": "concurrently npm:start:*",
     "start:docs": "cd docs && npm run develop",
     "start:storybook": "start-storybook -p 6006",
-    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}'",
+    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0",
     "lint:fix": "npm run lint -- --fix",
     "test": "jest",
     "test:update": "npm run test -- --updateSnapshot",
@@ -44,7 +44,7 @@
   "license": "MIT",
   "dependencies": {
     "@primer/octicons-react": "^13.0.0",
-    "@primer/primitives": "5.1.0",
+    "@primer/primitives": "6.1.0",
     "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",
@@ -124,6 +124,8 @@
     "lodash.isobject": "3.0.2",
     "prettier": "2.3.2",
     "react": "17.0.2",
+    "react-dnd": "14.0.4",
+    "react-dnd-html5-backend": "14.0.2",
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
     "rollup": "2.56.3",

package/src/ActionList2/Description.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import Box from '../Box'
+import {SxProp, merge} from '../sx'
+import Truncate from '../Truncate'
+import {Slot, ItemContext} from './Item'
+
+export type DescriptionProps = {
+  /**
+   * Secondary text style variations.
+   *
+   * - `"inline"` - Secondary text is positioned beside primary text.
+   * - `"block"` - Secondary text is positioned below primary text.
+   */
+  variant?: 'inline' | 'block'
+} & SxProp
+
+export const Description: React.FC<DescriptionProps> = ({variant = 'inline', sx = {}, ...props}) => {
+  const styles = {
+    color: 'fg.muted',
+    fontSize: 0,
+    lineHeight: '16px',
+    flexGrow: 1,
+    flexBasis: 0,
+    minWidth: 0,
+    marginLeft: variant === 'block' ? 0 : 2
+  }
+
+  return (
+    <Slot name={variant === 'block' ? 'BlockDescription' : 'InlineDescription'}>
+      {({blockDescriptionId, inlineDescriptionId}: ItemContext) =>
+        variant === 'block' ? (
+          <Box as="span" sx={merge(styles, sx as SxProp)} id={blockDescriptionId}>
+            {props.children}
+          </Box>
+        ) : (
+          <Truncate
+            id={inlineDescriptionId}
+            sx={merge(styles, sx as SxProp)}
+            title={props.children as string}
+            inline={true}
+            maxWidth="100%"
+          >
+            {props.children}
+          </Truncate>
+        )
+      }
+    </Slot>
+  )
+}

package/src/ActionList2/Divider.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import Box from '../Box'
+import {get} from '../constants'
+import {Theme} from '../ThemeProvider'
+
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+export function Divider(): JSX.Element {
+  return (
+    <Box
+      as="li"
+      role="separator"
+      sx={{
+        height: 1,
+        backgroundColor: 'actionListItem.inlineDivider',
+        marginTop: (theme: Theme) => `calc(${get('space.2')(theme)} - 1px)`,
+        marginBottom: 2,
+        listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
+      }}
+      data-component="ActionList.Divider"
+    />
+  )
+}

package/src/ActionList2/Group.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import Box from '../Box'
+import {SxProp} from '../sx'
+import {Header, HeaderProps} from './Header'
+import {ListProps} from './List'
+
+export type GroupProps = HeaderProps &
+  SxProp & {
+    selectionVariant?: ListProps['selectionVariant'] | false
+  }
+
+type ContextProps = Pick<GroupProps, 'selectionVariant'>
+export const GroupContext = React.createContext<ContextProps>({})
+
+export const Group: React.FC<GroupProps> = ({title, variant, auxiliaryText, selectionVariant, sx = {}, ...props}) => {
+  return (
+    <Box
+      as="li"
+      sx={{
+        '&:not(:first-child)': {marginTop: 2},
+        listStyle: 'none', // hide the ::marker inserted by browser's stylesheet
+        ...sx
+      }}
+      {...props}
+    >
+      {title && <Header title={title} variant={variant} auxiliaryText={auxiliaryText} />}
+      <GroupContext.Provider value={{selectionVariant}}>
+        <Box as="ul" sx={{paddingInlineStart: 0}}>
+          {props.children}
+        </Box>
+      </GroupContext.Provider>
+    </Box>
+  )
+}

package/src/ActionList2/Header.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import Box from '../Box'
+import {SxProp} from '../sx'
+import {ListContext} from './List'
+
+/**
+ * Contract for props passed to the `Header` component.
+ */
+export type HeaderProps = {
+  /**
+   * Style variations. Usage is discretionary.
+   *
+   * - `"filled"` - Superimposed on a background, offset from nearby content
+   * - `"subtle"` - Relatively less offset from nearby content
+   */
+  variant?: 'subtle' | 'filled'
+
+  /**
+   * Primary text which names a `Group`.
+   */
+  title?: string
+
+  /**
+   * Secondary text which provides additional information about a `Group`.
+   */
+  auxiliaryText?: string
+} & SxProp
+
+/**
+ * Displays the name and description of a `Group`.
+ */
+export const Header = ({variant = 'subtle', title, auxiliaryText, sx = {}, ...props}: HeaderProps): JSX.Element => {
+  const {variant: listVariant} = React.useContext(ListContext)
+
+  const styles = {
+    paddingY: '6px',
+    paddingX: listVariant === 'full' ? 2 : 3,
+    fontSize: 0,
+    fontWeight: 'bold',
+    color: 'fg.muted',
+    ...(variant === 'filled' && {
+      backgroundColor: 'canvas.subtle',
+      marginX: 0,
+      marginBottom: 2,
+      borderTop: '1px solid',
+      borderBottom: '1px solid',
+      borderColor: 'neutral.muted'
+    }),
+    ...sx
+  }
+
+  return (
+    <Box sx={styles} role="heading" {...props}>
+      {title}
+      {auxiliaryText && <span>{auxiliaryText}</span>}
+    </Box>
+  )
+}

package/src/ActionList2/Item.tsx

@@ -0,0 +1,245 @@
+import React from 'react'
+import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
+import {useSSRSafeId} from '@react-aria/ssr'
+import styled from 'styled-components'
+import {useTheme} from '../ThemeProvider'
+import Box, {BoxProps} from '../Box'
+import sx, {SxProp, merge} from '../sx'
+import createSlots from '../utils/create-slots'
+import {AriaRole} from '../utils/types'
+import {ListContext} from './List'
+import {Selection} from './Selection'
+
+export const getVariantStyles = (variant: ItemProps['variant'], disabled: ItemProps['disabled']) => {
+  if (disabled) {
+    return {
+      color: 'fg.muted',
+      iconColor: 'fg.muted',
+      annotationColor: 'fg.muted'
+    }
+  }
+
+  switch (variant) {
+    case 'danger':
+      return {
+        color: 'danger.fg',
+        iconColor: 'danger.fg',
+        annotationColor: 'fg.muted',
+        hoverColor: 'actionListItem.danger.hoverText'
+      }
+    default:
+      return {
+        color: 'fg.default',
+        iconColor: 'fg.muted',
+        annotationColor: 'fg.muted',
+        hoverColor: 'fg.default'
+      }
+  }
+}
+
+export type ItemProps = {
+  /**
+   * Primary content for an Item
+   */
+  children?: React.ReactNode
+  /**
+   * Callback that will trigger both on click selection and keyboard selection.
+   */
+  onSelect?: (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void
+  /**
+   * Is the `Item` is currently selected?
+   */
+  selected?: boolean
+  /**
+   * Style variations associated with various `Item` types.
+   *
+   * - `"default"` - An action `Item`.
+   * - `"danger"` - A destructive action `Item`.
+   */
+  variant?: 'default' | 'danger'
+  /**
+   * Items that are disabled can not be clicked, selected, or navigated through.
+   */
+  disabled?: boolean
+  /**
+   * The ARIA role describing the function of `Item` component. `option` is a common value.
+   */
+  role?: AriaRole
+  /**
+   * id to attach to the root element of the Item
+   */
+  id?: string
+  /**
+   * Private API for use internally only. Used by LinkItem to wrap contents in an anchor
+   */
+  _PrivateItemWrapper?: React.FC
+} & SxProp
+
+const {Slots, Slot} = createSlots(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual'])
+export {Slot}
+export type ItemContext = Pick<ItemProps, 'variant' | 'disabled'> & {
+  inlineDescriptionId: string
+  blockDescriptionId: string
+}
+
+const LiBox = styled.li<SxProp>(sx)
+export const TEXT_ROW_HEIGHT = '20px' // custom value off the scale
+
+export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
+  (
+    {
+      variant = 'default',
+      disabled = false,
+      selected = undefined,
+      onSelect = () => null,
+      sx: sxProp = {},
+      id,
+      _PrivateItemWrapper,
+      ...props
+    },
+    forwardedRef
+  ): JSX.Element => {
+    const {variant: listVariant, showDividers} = React.useContext(ListContext)
+
+    const {theme} = useTheme()
+
+    const styles = {
+      display: 'flex',
+      paddingX: 2,
+      fontSize: 1,
+      paddingY: '6px', // custom value off the scale
+      lineHeight: TEXT_ROW_HEIGHT,
+      minHeight: 5,
+      marginX: listVariant === 'inset' ? 2 : 0,
+      borderRadius: listVariant === 'inset' ? 2 : 0,
+      transition: 'background 33.333ms linear',
+      color: getVariantStyles(variant, disabled).color,
+      textDecoration: 'none', // for as="a"
+      ':not([aria-disabled])': {cursor: 'pointer'},
+      '@media (hover: hover) and (pointer: fine)': {
+        ':hover:not([aria-disabled])': {
+          backgroundColor: `actionListItem.${variant}.hoverBg`,
+          color: getVariantStyles(variant, disabled).hoverColor
+        },
+        ':focus:not([data-focus-visible-added])': {
+          backgroundColor: `actionListItem.${variant}.selectedBg`,
+          color: getVariantStyles(variant, disabled).hoverColor,
+          outline: 'none'
+        },
+        '&[data-focus-visible-added]': {
+          // we don't use :focus-visible because not all browsers (safari) have it yet
+          outline: 'none',
+          border: `2 solid`,
+          boxShadow: `0 0 0 2px ${theme?.colors.accent.emphasis}`
+        },
+        ':active:not([aria-disabled])': {
+          backgroundColor: `actionListItem.${variant}.activeBg`,
+          color: getVariantStyles(variant, disabled).hoverColor
+        }
+      },
+
+      /** Divider styles */
+      '[data-component="ActionList.Item--DividerContainer"]': {
+        position: 'relative'
+      },
+      '[data-component="ActionList.Item--DividerContainer"]::before': {
+        content: '" "',
+        display: 'block',
+        position: 'absolute',
+        width: '100%',
+        top: '-7px',
+        border: '0 solid',
+        borderTopWidth: showDividers ? `1px` : '0',
+        borderColor: 'var(--divider-color, transparent)'
+      },
+      // show between 2 items
+      ':not(:first-of-type)': {'--divider-color': theme?.colors.actionListItem.inlineDivider},
+      // hide divider after dividers & group header, with higher importance!
+      '[data-component="ActionList.Divider"] + &': {'--divider-color': 'transparent !important'},
+      // hide border on current and previous item
+      '&:hover:not([aria-disabled]), &:focus:not([aria-disabled]), &[data-focus-visible-added]:not([aria-disabled])': {
+        '--divider-color': 'transparent'
+      },
+      '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &, &[data-focus-visible-added] + li': {
+        '--divider-color': 'transparent'
+      }
+    }
+
+    const clickHandler = React.useCallback(
+      event => {
+        if (disabled) return
+        if (!event.defaultPrevented) onSelect(event)
+      },
+      [onSelect, disabled]
+    )
+
+    const keyPressHandler = React.useCallback(
+      event => {
+        if (disabled) return
+
+        if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
+          onSelect(event)
+        }
+      },
+      [onSelect, disabled]
+    )
+
+    // use props.id if provided, otherwise generate one.
+    const labelId = useSSRSafeId(id)
+    const inlineDescriptionId = useSSRSafeId(id && `${id}--inline-description`)
+    const blockDescriptionId = useSSRSafeId(id && `${id}--block-description`)
+
+    const ItemWrapper = _PrivateItemWrapper || React.Fragment
+
+    return (
+      <Slots context={{variant, disabled, inlineDescriptionId, blockDescriptionId}}>
+        {slots => (
+          <LiBox
+            ref={forwardedRef}
+            sx={merge(styles, sxProp as SxProp)}
+            onClick={clickHandler}
+            onKeyPress={keyPressHandler}
+            aria-selected={selected}
+            aria-disabled={disabled ? true : undefined}
+            tabIndex={disabled || _PrivateItemWrapper ? undefined : 0}
+            aria-labelledby={`${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`}
+            aria-describedby={slots.BlockDescription ? blockDescriptionId : undefined}
+            {...props}
+          >
+            <ItemWrapper>
+              <Selection selected={selected} disabled={disabled} />
+              {slots.LeadingVisual}
+              <Box
+                data-component="ActionList.Item--DividerContainer"
+                sx={{display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0}}
+              >
+                <ConditionalBox if={Boolean(slots.TrailingVisual)} sx={{display: 'flex', flexGrow: 1}}>
+                  <ConditionalBox
+                    if={Boolean(slots.InlineDescription)}
+                    sx={{display: 'flex', flexGrow: 1, alignItems: 'baseline', minWidth: 0}}
+                  >
+                    <Box as="span" id={labelId} sx={{flexGrow: slots.InlineDescription ? 0 : 1}}>
+                      {props.children}
+                    </Box>
+                    {slots.InlineDescription}
+                  </ConditionalBox>
+                  {slots.TrailingVisual}
+                </ConditionalBox>
+                {slots.BlockDescription}
+              </Box>
+            </ItemWrapper>
+          </LiBox>
+        )}
+      </Slots>
+    )
+  }
+) as PolymorphicForwardRefComponent<'li', ItemProps>
+
+Item.displayName = 'ActionList.Item'
+
+const ConditionalBox: React.FC<{if: boolean} & BoxProps> = props => {
+  const {if: condition, ...rest} = props
+
+  if (condition) return <Box {...rest}>{props.children}</Box>
+  else return <>{props.children}</>
+}