@primer/components 33.0.0-rc.b495ba4a → 33.0.0-rc.cface7dc

package/.github/workflows/statuses.yml

@@ -0,0 +1,32 @@
+name: Update status project
+
+on:
+  push:
+    branches:
+      - main
+    # Only run workflow on changes to component docs
+    paths:
+      - 'docs/content/**'
+
+jobs:
+  build-and-deploy:
+    name: Update status project
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup Ruby
+        uses: actions/setup-ruby@v1
+        with:
+          ruby-version: 2.7.x
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+      - name: Install node deps
+        run: npm ci
+      - name: Install ruby deps
+        run: gem install graphql-client
+      - name: Build statuses
+        run: npx ts-node script/component-status-project/build.ts
+      - name: Deploy statuses to project
+        run: GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }} script/component-status-project/deploy.rb

package/.gitignore

@@ -8,3 +8,4 @@ lib/
 lib-esm/
 public/
 stats.html
+.env

package/CHANGELOG.md

@@ -12,12 +12,18 @@
 
 * [#1643](https://github.com/primer/react/pull/1643) [`3938550f`](https://github.com/primer/react/commit/3938550fb3ea3fbec542a0cadaf6aeb734fba938) Thanks [@jfuchs](https://github.com/jfuchs)! - Heading no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
 
+### Minor Changes
+
+- [#1619](https://github.com/primer/react/pull/1619) [`a13efa45`](https://github.com/primer/react/commit/a13efa457ded69656fb390b5b9b666d00157fd21) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Add composable `ActionMenu` to `@primer/components/drafts`
+
 ### Patch Changes
 
 - [#1668](https://github.com/primer/react/pull/1668) [`98dc6336`](https://github.com/primer/react/commit/98dc633674b793edfa4fbeb88fd239e6ca40544e) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Fix multiple selection svg by overriding global shape-rendering for github.com
 
 * [#1596](https://github.com/primer/react/pull/1596) [`5c6dc644`](https://github.com/primer/react/commit/5c6dc644c1e68b36d309deac653aca189f1fa624) Thanks [@dmarcey](https://github.com/dmarcey)! - Fix alignment of items in ActionList (single-select) if some of the items have wrapping text.
 
+- [#1538](https://github.com/primer/react/pull/1538) [`dda6e5d7`](https://github.com/primer/react/commit/dda6e5d7204347c3c66183464dd0903e878a4f20) Thanks [@shiftkey](https://github.com/shiftkey)! - Update `typescript` package to correct generated type declarations.
+
 ## 32.1.0
 
 ### Minor Changes

package/contributor-docs/CONTRIBUTING.md

@@ -77,65 +77,35 @@ Additionally, every component should support [the `sx` prop](https://primer.styl
 
 Here's an example of a basic component written in the style of Primer Components:
 
-```jsx
-import {TYPOGRAPHY, COMMON} from './constants'
-import sx from './sx'
+```tsx
+import sx, {SxProp} from './sx'
 
-const Component = styled.div`
+const Component = styled.div<SxProp>`
   // additional styles here
 
-  ${COMMON};
-  ${TYPOGRAPHY};
   ${sx};
 `
 
 Component.defaultProps = {
   m: 0,
-  fontSize: 5,
+  fontSize: 5
 }
 
 export default Component
 ```
 
-### Adding system props
-
-Each component should have access to the appropriate system props. Every component has access to `COMMON`. For **most** components added, you'll only need to give the component to `COMMON`. If you are unsure, ping a DS team member on your PR.
-
-Categories of system props are exported from `src/constants.js`:
-
-- `COMMON` includes color and spacing (margin and padding) props
-- `TYPOGRAPHY` includes font family, font weight, and line-height props
-- `POSITION` includes positioning props
-- `FLEX` includes flexbox props
-- `BORDER` includes border and box-shadow props
-- `GRID` includes grid props
-
-To give the component access to a group of system props, import the system prop function from `./constants` and include the system prop function in your styled-component like so:
-
-```jsx
-import {COMMON} from './constants'
-
-const Component = styled.div`
-  // additional styles here
-  ${COMMON};
-`
-```
-
-Remember that the system prop function inside your style declaration needs to go _after_ any built-in styles you want to be overridable.
-
 ### Adding the `sx` prop
 
-Each component should provide access to a prop called `sx` that allows for setting theme-aware ad-hoc styles. See the [overriding styles](https://primer.style/components/overriding-styles) doc for more information on using the prop.
+Each component should accept a prop called `sx` that allows for setting theme-aware ad-hoc styles. See the [overriding styles](https://primer.style/components/overriding-styles) doc for more information on using the prop.
 
-Adding the `sx` prop is similar to adding system props; import the default export from the `sx` module, add it to your style definition, and add the appropriate prop types. **The `sx` prop should go at the _very end_ of your style definition.**
+To add the `sx` prop to your component: import the default export from the `sx` module, add it to your style definition, and add the appropriate prop types. **The `sx` prop should go at the _very end_ of your style definition.**
 
-```jsx
-import {COMMON} from './constants'
-import sx from './sx'
+```tsx
+import sx, {SxProp} from './sx'
 
-const Component = styled.div`
+const Component = styled.div<SxProp>`
   // additional styles here
-  ${COMMON};
+
   ${sx};
 `
 ```
@@ -175,15 +145,16 @@ See [`src/__tests__/example.js`](src/__tests__/example.js) for examples of ways
 
 ### TypeScript support
 
-Several of the projects that consume Primer Components are written in TypeScript. Though Primer Components is not currently written in TS, we do export type definitions in order to make Primer Components compatible with other TS projects.
+Primer React is written in TypeScript. We include type definitions in our built artifacts. To check types, run the `typecheck` script:
 
-Whenever adding new components or modifying the props of an existing component, **please make sure to update the type definition** in `index.d.ts`! This is super important to make sure we don't break compatibility :)
+```
+npm run typecheck
+```
 
 ### Additional resources
 
 - [Primer Components Philosophy](https://primer.style/components/philosophy)
 - [Primer Components Core Concepts](https://primer.style/components/core-concepts)
-- [Primer Components System Props](https://primer.style/components/system-props)
 - [Styled Components docs](https://styled-components.com/)
 - [Styled System docs](https://styled-system.com/)
 
@@ -206,7 +177,6 @@ After opening a pull request, a member of the design systems team will add the a
 - If it's a new component, does the component make sense to add to Primer Components? (Ideally this is discussed before the pull request stage, please reach out to a DS member if you aren't sure if a component should be added to Primer Components!)
 - Does the component follow our [Primer Components code style](#component-patterns)?
 - Does the component use theme values for most CSS values?
-- Does the component have the [correct system props implemented](#adding-system-props)?
 - Is the component API intuitive?
 - Does the component have the appropriate [type definitions in `index.d.ts`](#typescript-support)?
 - Is the component documented accurately?
@@ -251,20 +221,6 @@ Make sure to run `npm install` from inside the `docs/` subfolder _as well as_ th
 
 Ensure you are using the latest minor of Node.js for the major version specified in the `.nvmrc` file. For example, if `.nvmrc` contains `8`, make sure you're using the latest version of Node.js with the major version of 8.
 
-## Glossary
-
-### System props
-
-System props are style functions that provide one or more props, and can be passed directly the return value of [styled-components]'s `styled()` function:
-
-```jsx
-import styled from 'styled-components'
-import {space} from 'styled-system'
-const SpaceDiv = styled.div`
-  ${space}
-`
-```
-
 [classnames]: https://www.npmjs.com/package/classnames
 [spread syntax]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
 [styled-system]: https://styled-system.com

package/docs/content/{ActionList2.mdx → drafts/ActionList2.mdx}

@@ -6,16 +6,13 @@ storybook: '/react/storybook?path=/story/composite-components-actionlist2'
 description: An ActionList is a list of items that can be activated or selected. ActionList is the base component for many menu-type components, including DropdownMenu and ActionMenu.
 ---
 
-import {BorderBox, Avatar} from '@primer/components'
+import {Box, Avatar} from '@primer/components'
 import {ActionList} from '@primer/components/drafts'
-import {ComponentChecklist} from '../src/component-checklist'
-
-import {ImageContainer} from '@primer/gatsby-theme-doctocat'
 import {LinkIcon, AlertIcon, ArrowRightIcon} from '@primer/octicons-react'
 
 <br />
 
-<BorderBox sx={{padding: 6}}>
+<Box sx={{border: '1px solid', borderColor: 'border.default', borderRadius: 2, padding: 6}}>
   <ActionList sx={{width: 320}}>
     <ActionList.Item>
       <ActionList.LeadingVisual>
@@ -43,7 +40,7 @@ import {LinkIcon, AlertIcon, ArrowRightIcon} from '@primer/octicons-react'
       </ActionList.TrailingVisual>
     </ActionList.Item>
   </ActionList>
-</BorderBox>
+</Box>
 
 <br />
 
@@ -351,11 +348,10 @@ render(<SelectFields />)
 
 - [Interface guidelines: Action List](https://primer.style/design/components/action-list)
 
-<br />
-
 ## Related components
 
-- [ActionMenu](/ActionMenu)
+- [ActionMenu](/drafts/ActionMenu2)
+- [DropdownMenu](/DropdownMenu)
 - [SelectPanel](/SelectPanel)
 
 ## Component status

package/docs/content/drafts/ActionMenu2.mdx

@@ -0,0 +1,251 @@
+---
+title: ActionMenu
+status: Alpha
+source: https://github.com/primer/react/tree/main/src/ActionMenu
+storybook: '/react/storybook?path=/story/composite-components-actionmenu2'
+description: An ActionMenu is an ActionList-based component for creating a menu of actions that expands through a trigger button.
+---
+
+import {Box, Avatar} from '@primer/components'
+import {ActionMenu, ActionList} from '@primer/components/drafts'
+import {Props} from '../../src/props'
+
+<br />
+
+<Box sx={{border: '1px solid', borderColor: 'border.default', borderRadius: 2, padding: 6}}>
+<ActionMenu>
+  <ActionMenu.Button>Menu</ActionMenu.Button>
+  <ActionList>
+    <ActionList.Item onSelect={() => onSelect('Copy link')}>
+      Copy link
+      <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
+    </ActionList.Item>
+    <ActionList.Item onSelect={() => onSelect('Quote reply')}>
+      Quote reply
+      <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>
+    </ActionList.Item>
+    <ActionList.Item onSelect={() => onSelect('Edit comment')}>
+      Edit comment
+      <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
+    </ActionList.Item>
+    <ActionList.Divider />
+    <ActionList.Item variant="danger" onSelect={() => onSelect('Delete file')}>
+      Delete file
+      <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
+    </ActionList.Item>
+  </ActionList>
+
+</ActionMenu>
+</Box>
+
+<br />
+
+```js
+import {ActionMenu} from '@primer/components/drafts'
+```
+
+<br />
+
+## Examples
+
+### Minimal example
+
+`ActionMenu` ships with `ActionMenu.Button` which is an accessible trigger for the overlay. It's recommended to compose `ActionList` with this component.
+
+&nbsp;
+
+```javascript live noinline
+// import {ActionMenu, ActionList} from '@primer/components/drafts'
+const {ActionMenu, ActionList} = drafts // ignore docs silliness; import like that ↑
+
+render(
+  <ActionMenu>
+    <ActionMenu.Button>Menu</ActionMenu.Button>
+
+    <ActionList>
+      <ActionList.Item onSelect={event => console.log('New file')}>New file</ActionList.Item>
+      <ActionList.Item>Copy link</ActionList.Item>
+      <ActionList.Item>Edit file</ActionList.Item>
+      <ActionList.Divider />
+      <ActionList.Item variant="danger">Delete file</ActionList.Item>
+    </ActionList>
+  </ActionMenu>
+)
+```
+
+### With a custom anchor
+
+You can choose to have a different _anchor_ for the Menu dependending on the application's context.
+
+&nbsp;
+
+```javascript live noinline
+// import {ActionMenu, ActionList} from '@primer/components/drafts'
+const {ActionMenu, ActionList} = drafts // ignore docs silliness; import like that ↑
+
+render(
+  <ActionMenu>
+    <ActionMenu.Anchor>
+      <ButtonInvisible aria-label="Open column options">
+        <KebabHorizontalIcon />
+      </ButtonInvisible>
+    </ActionMenu.Anchor>
+
+    <ActionList>
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <PencilIcon />
+        </ActionList.LeadingVisual>
+        Rename
+      </ActionList.Item>
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <ArchiveIcon />
+        </ActionList.LeadingVisual>
+        Archive all cards
+      </ActionList.Item>
+      <ActionList.Item variant="danger">
+        <ActionList.LeadingVisual>
+          <TrashIcon />
+        </ActionList.LeadingVisual>
+        Delete
+      </ActionList.Item>
+    </ActionList>
+  </ActionMenu>
+)
+```
+
+### With Groups
+
+```javascript live noinline
+// import {ActionMenu, ActionList} from '@primer/components/drafts'
+const {ActionMenu, ActionList} = drafts // ignore docs silliness; import like that ↑
+
+render(
+  <ActionMenu>
+    <ActionMenu.Button>Open column menu</ActionMenu.Button>
+
+    <ActionList showDividers>
+      <ActionList.Group title="Live query">
+        <ActionList.Item>
+          <ActionList.LeadingVisual>
+            <SearchIcon />
+          </ActionList.LeadingVisual>
+          repo:github/memex,github/github
+        </ActionList.Item>
+      </ActionList.Group>
+      <ActionList.Divider />
+      <ActionList.Group title="Layout" variant="subtle">
+        <ActionList.Item>
+          <ActionList.LeadingVisual>
+            <NoteIcon />
+          </ActionList.LeadingVisual>
+          Table
+          <ActionList.Description variant="block">
+            Information-dense table optimized for operations across teams
+          </ActionList.Description>
+        </ActionList.Item>
+        <ActionList.Item role="listitem">
+          <ActionList.LeadingVisual>
+            <ProjectIcon />
+          </ActionList.LeadingVisual>
+          Board
+          <ActionList.Description variant="block">Kanban-style board focused on visual states</ActionList.Description>
+        </ActionList.Item>
+      </ActionList.Group>
+      <ActionList.Divider />
+      <ActionList.Group>
+        <ActionList.Item>
+          <ActionList.LeadingVisual>
+            <FilterIcon />
+          </ActionList.LeadingVisual>
+          Save sort and filters to current view
+        </ActionList.Item>
+        <ActionList.Item>
+          <ActionList.LeadingVisual>
+            <FilterIcon />
+          </ActionList.LeadingVisual>
+          Save sort and filters to new view
+        </ActionList.Item>
+      </ActionList.Group>
+      <ActionList.Divider />
+      <ActionList.Group>
+        <ActionList.Item>
+          <ActionList.LeadingVisual>
+            <GearIcon />
+          </ActionList.LeadingVisual>
+          View settings
+        </ActionList.Item>
+      </ActionList.Group>
+    </ActionList>
+  </ActionMenu>
+)
+```
+
+### With External Anchor
+
+To create an anchor outside of the menu, you need to switch to controlled mode for the menu and pass it as `anchorRef` to `ActionMenu`:
+
+```javascript live noinline
+// import {ActionMenu, ActionList} from '@primer/components/drafts'
+const {ActionMenu, ActionList} = drafts // ignore docs silliness; import like that ↑
+
+const Example = () => {
+  const [open, setOpen] = React.useState(false)
+  const anchorRef = React.createRef()
+
+  return (
+    <>
+      <Button ref={anchorRef} onClick={() => setOpen(!open)}>
+        {open ? 'Close Menu' : 'Open Menu'}
+      </Button>
+
+      <ActionMenu open={open} onOpenChange={setOpen} anchorRef={anchorRef}>
+        <ActionList>
+          <ActionList.Item>Copy link</ActionList.Item>
+          <ActionList.Item>Quote reply</ActionList.Item>
+          <ActionList.Item>Edit comment</ActionList.Item>
+          <ActionList.Divider />
+          <ActionList.Item variant="danger">Delete file</ActionList.Item>
+        </ActionList>
+      </ActionMenu>
+    </>
+  )
+}
+
+render(<Example />)
+```
+
+## Props / API reference
+
+### ActionMenu
+
+| Name         | Type                                                | Default | Description                                                                                                              |
+| :----------- | :-------------------------------------------------- | :-----: | :----------------------------------------------------------------------------------------------------------------------- |
+| children\*   | `React.ReactElement[]`                              |    -    | Required. Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with [`ActionList`](/drafts/ActionList2)               |
+| open         | `boolean`                                           |    -    | Optional. If defined, will control the open/closed state of the overlay. Must be used in conjuction with `onOpenChange`. |
+| onOpenChange | `(open: boolean) => void`                           |    -    | Optional. If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`.         |
+| anchorRef    | `React.RefObject<HTMLElement>`                      |    -    | Optional. Useful for defining an external anchor                                                                         |
+| overlayProps | [`Partial<OverlayProps>`](/Overlay#component-props) |    -    | Optional. Props to be spread on the internal [`AnchoredOverlay`](/AnchoredOverlay) component.                            |
+
+### ActionMenu.Button
+
+| Type                                    | Default | Description                                                                                                          |
+| :-------------------------------------- | :-----: | :------------------------------------------------------------------------------------------------------------------- |
+| [ButtonProps](/Buttons#component-props) |    -    | Optional. You can pass all of the props that you would pass to a [`Button`](/Buttons) component like `variant`, `sx` |
+
+### ActionMenu.Anchor
+
+| Name       | Type                 | Default | Description                       |
+| :--------- | :------------------- | :-----: | :-------------------------------- |
+| children\* | `React.ReactElement` |    -    | Required. Accepts a single child. |
+
+## Further reading
+
+[Interface guidelines: Action List + Menu](https://primer.style/design/components/action-list)
+
+## Related components
+
+- [ActionList](/drafts/ActionList2)
+- [DropdownMenu](/DropdownMenu)
+- [SelectPanel](/SelectPanel)

package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js

@@ -24,7 +24,11 @@ import {
   LawIcon,
   StarIcon,
   AlertIcon,
-  ArrowRightIcon
+  ArrowRightIcon,
+  KebabHorizontalIcon,
+  PencilIcon,
+  ArchiveIcon,
+  TrashIcon
 } from '@primer/octicons-react'
 import State from '../../../components/State'
 import {Dialog as Dialog2} from '../../../../src/Dialog/Dialog'
@@ -65,6 +69,10 @@ export default {
   StarIcon,
   AlertIcon,
   ArrowRightIcon,
+  KebabHorizontalIcon,
+  PencilIcon,
+  ArchiveIcon,
+  TrashIcon,
   Dialog2,
   ConfirmationDialog,
   useConfirm,

package/docs/src/component-checklist.js

@@ -9,7 +9,9 @@ export function ComponentChecklist({items}) {
     <>
       <H3>Alpha</H3>
       <Checklist aria-describedby="alpha">
-        <Checklist.Item checked={items.propsDocumented}>Component props are documented.</Checklist.Item>
+        <Checklist.Item checked={items.propsDocumented}>
+          Component props are documented on <Link href="https://primer.style/react/">primer.style/react</Link>.
+        </Checklist.Item>
         <Checklist.Item checked={items.noUnnecessaryDeps}>
           Component does not have any unnecessary third-party dependencies.
         </Checklist.Item>
@@ -22,7 +24,13 @@ export function ComponentChecklist({items}) {
       <H3>Beta</H3>
       <Checklist aria-describedby="beta">
         <Checklist.Item checked={items.usedInProduction}>Component is used in a production application.</Checklist.Item>
-        <Checklist.Item checked={items.usageExamplesDocumented}>Common usage examples are documented.</Checklist.Item>
+        <Checklist.Item checked={items.usageExamplesDocumented}>
+          Common usage examples are documented on <Link href="https://primer.style/react/">primer.style/react</Link>.
+        </Checklist.Item>
+        <Checklist.Item checked={items.hasStorybookStories}>
+          Common usage examples are documented in <Link href="https://primer.style/react/storybook">storybook</Link>{' '}
+          stories.
+        </Checklist.Item>
         <Checklist.Item checked={items.designReviewed}>
           Component has been reviewed by a systems designer and any resulting issues have been addressed.
         </Checklist.Item>

package/lib/ActionList2/Divider.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
+import { SxProp } from '../sx';
 /**
  * Visually separates `Item`s or `Group`s in an `ActionList`.
  */
-export declare function Divider(): JSX.Element;
+export declare const Divider: React.FC<SxProp>;

package/lib/ActionList2/Divider.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Divider = Divider;
+exports.Divider = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,25 +11,30 @@ var _Box = _interopRequireDefault(require("../Box"));
 
 var _constants = require("../constants");
 
+var _sx = require("../sx");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
  * Visually separates `Item`s or `Group`s in an `ActionList`.
  */
-function Divider() {
+const Divider = ({
+  sx = {}
+}) => {
   return /*#__PURE__*/_react.default.createElement(_Box.default, {
     as: "li",
     role: "separator",
-    sx: {
+    sx: (0, _sx.merge)({
       height: 1,
       backgroundColor: 'actionListItem.inlineDivider',
       marginTop: theme => `calc(${(0, _constants.get)('space.2')(theme)} - 1px)`,
       marginBottom: 2,
       listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
 
-    },
+    }, sx),
     "data-component": "ActionList.Divider"
   });
-}
+};
 
+exports.Divider = Divider;
 Divider.displayName = "Divider";

package/lib/ActionList2/Item.js

@@ -21,6 +21,8 @@ var _createSlots = _interopRequireDefault(require("../utils/create-slots"));
 
 var _List = require("./List");
 
+var _MenuContext = require("./MenuContext");
+
 var _Selection = require("./Selection");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -82,6 +84,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
   onSelect,
   sx: sxProp = {},
   id,
+  role,
   _PrivateItemWrapper,
   ...props
 }, forwardedRef) => {
@@ -90,6 +93,11 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
     showDividers
   } = _react.default.useContext(_List.ListContext);
 
+  const {
+    itemRole,
+    afterSelect
+  } = _react.default.useContext(_MenuContext.MenuContext);
+
   const {
     theme
   } = (0, _ThemeProvider.useTheme)();
@@ -165,17 +173,24 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
   const clickHandler = _react.default.useCallback(event => {
     if (typeof onSelect !== 'function') return;
     if (disabled) return;
-    if (!event.defaultPrevented) onSelect(event);
-  }, [onSelect, disabled]);
+
+    if (!event.defaultPrevented) {
+      onSelect(event); // if this Item is inside a Menu, close the Menu
+
+      if (typeof afterSelect === 'function') afterSelect();
+    }
+  }, [onSelect, disabled, afterSelect]);
 
   const keyPressHandler = _react.default.useCallback(event => {
     if (typeof onSelect !== 'function') return;
     if (disabled) return;
 
     if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
-      onSelect(event);
+      onSelect(event); // if this Item is inside a Menu, close the Menu
+
+      if (typeof afterSelect === 'function') afterSelect();
     }
-  }, [onSelect, disabled]); // use props.id if provided, otherwise generate one.
+  }, [onSelect, disabled, afterSelect]); // use props.id if provided, otherwise generate one.
 
 
   const labelId = (0, _ssr.useSSRSafeId)(id);
@@ -198,7 +213,8 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
     "aria-disabled": disabled ? true : undefined,
     tabIndex: disabled || _PrivateItemWrapper ? undefined : 0,
     "aria-labelledby": `${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`,
-    "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined
+    "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined,
+    role: role || itemRole
   }, props), /*#__PURE__*/_react.default.createElement(ItemWrapper, null, /*#__PURE__*/_react.default.createElement(_Selection.Selection, {
     selected: selected
   }), slots.LeadingVisual, /*#__PURE__*/_react.default.createElement(_Box.default, {