@primer/components 31.2.1-rc.7fa29a87 → 32.0.0-rc.7200a6a6

package/lib-esm/__tests__/Pagehead.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib-esm/__tests__/Pagehead.types.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Pagehead from '../Pagehead';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(Pagehead, null);
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/React.createElement(Pagehead, {
+    backgroundColor: "orchid"
+  });
+}
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

package/lib-esm/__tests__/Pagination.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib-esm/__tests__/Pagination.types.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Pagination from '../Pagination';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(Pagination, {
+    currentPage: 1,
+    pageCount: 2
+  });
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/React.createElement(Pagination, {
+    currentPage: 1,
+    pageCount: 2,
+    backgroundColor: "palegoldenrod"
+  });
+}
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

package/lib-esm/__tests__/Popover.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib-esm/__tests__/Popover.types.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Popover from '../Popover';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(Popover, null);
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldNotAcceptSystemProps() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popover, {
+    backgroundColor: "palegreen"
+  }), /*#__PURE__*/React.createElement(Popover.Content, {
+    backgroundColor: "paleturquoise"
+  }));
+}

package/lib-esm/__tests__/SelectMenu.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib-esm/__tests__/SelectMenu.types.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import SelectMenu from '../SelectMenu';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(SelectMenu, null);
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldNotAcceptSystemProps() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectMenu, {
+    backgroundColor: "lightgray"
+  }), /*#__PURE__*/React.createElement(SelectMenu.List, {
+    backgroundColor: "lightgreen"
+  }), /*#__PURE__*/React.createElement(SelectMenu.Divider, {
+    backgroundColor: "lightgrey"
+  }), /*#__PURE__*/React.createElement(SelectMenu.Filter, {
+    backgroundColor: "lightpink"
+  }), /*#__PURE__*/React.createElement(SelectMenu.Footer, {
+    backgroundColor: "lightsalmon"
+  }), /*#__PURE__*/React.createElement(SelectMenu.Item, {
+    backgroundColor: "lightseagreen"
+  }), /*#__PURE__*/React.createElement(SelectMenu.Modal, {
+    backgroundColor: "lightskyblue"
+  }), /*#__PURE__*/React.createElement(SelectMenu.Tabs, {
+    backgroundColor: "lightslategray"
+  }), /*#__PURE__*/React.createElement(SelectMenu.Tab, {
+    backgroundColor: "lightslategrey"
+  }), /*#__PURE__*/React.createElement(SelectMenu.TabPanel, {
+    backgroundColor: "lightsteelblue"
+  }), /*#__PURE__*/React.createElement(SelectMenu.Header, {
+    backgroundColor: "lightyellow"
+  }), /*#__PURE__*/React.createElement(SelectMenu.LoadingAnimation, {
+    backgroundColor: "lightcyan"
+  }));
+}

package/lib-esm/__tests__/SideNav.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib-esm/__tests__/SideNav.types.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import SideNav from '../SideNav';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(SideNav, null);
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/React.createElement(SideNav, {
+    backgroundColor: "aliceblue"
+  });
+}
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

package/lib-esm/__tests__/StateLabel.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib-esm/__tests__/StateLabel.types.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import StateLabel from '../StateLabel';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(StateLabel, null);
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/React.createElement(StateLabel, {
+    backgroundColor: "bisque"
+  });
+}
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

package/lib-esm/__tests__/StyledOcticon.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib-esm/__tests__/StyledOcticon.types.test.js

@@ -0,0 +1,16 @@
+import { MoonIcon } from '@primer/octicons-react';
+import React from 'react';
+import StyledOcticon from '../StyledOcticon';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(StyledOcticon, {
+    icon: MoonIcon
+  });
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/React.createElement(StyledOcticon, {
+    backgroundColor: "wheat"
+  });
+}
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

package/lib-esm/__tests__/SubNav.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib-esm/__tests__/SubNav.types.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import SubNav from '../SubNav';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SubNav, null), /*#__PURE__*/React.createElement(SubNav.Link, null), /*#__PURE__*/React.createElement(SubNav.Links, null));
+}
+export function shouldNotAcceptSystemProps() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SubNav, {
+    backgroundColor: "thistle"
+  }), /*#__PURE__*/React.createElement(SubNav.Link, {
+    backgroundColor: "thistle"
+  }), /*#__PURE__*/React.createElement(SubNav.Links, {
+    backgroundColor: "thistle"
+  }));
+}

package/lib-esm/__tests__/TabNav.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib-esm/__tests__/TabNav.types.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import TabNav from '../TabNav';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TabNav, null), /*#__PURE__*/React.createElement(TabNav.Link, null));
+}
+export function shouldNotAcceptSystemProps() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TabNav, {
+    backgroundColor: "maroon"
+  }), /*#__PURE__*/React.createElement(TabNav.Link, {
+    backgroundColor: "fuchsia"
+  }));
+}

package/lib-esm/__tests__/Timeline.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib-esm/__tests__/Timeline.types.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Timeline from '../Timeline';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Timeline, null), /*#__PURE__*/React.createElement(Timeline.Item, null), /*#__PURE__*/React.createElement(Timeline.Badge, null), /*#__PURE__*/React.createElement(Timeline.Body, null), /*#__PURE__*/React.createElement(Timeline.Break, null));
+}
+export function shouldNotAcceptSystemProps() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Timeline, {
+    backgroundColor: "red"
+  }), /*#__PURE__*/React.createElement(Timeline.Item, {
+    backgroundColor: "orange"
+  }), /*#__PURE__*/React.createElement(Timeline.Badge, {
+    backgroundColor: "yellow"
+  }), /*#__PURE__*/React.createElement(Timeline.Body, {
+    backgroundColor: "green"
+  }), /*#__PURE__*/React.createElement(Timeline.Break, {
+    backgroundColor: "blue"
+  }));
+}

package/lib-esm/__tests__/Tooltip.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib-esm/__tests__/Tooltip.types.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Tooltip from '../Tooltip';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(Tooltip, null);
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    backgroundColor: "thistle"
+  });
+}
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

package/lib-esm/__tests__/Truncate.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib-esm/__tests__/Truncate.types.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Truncate from '../Truncate';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(Truncate, {
+    title: "Hello"
+  });
+}
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/React.createElement(Truncate, {
+    title: "Hello",
+    backgroundColor: "indigo"
+  });
+}
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

package/lib-esm/__tests__/UnderlineNav.types.test.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

package/lib-esm/__tests__/UnderlineNav.types.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import UnderlineNav from '../UnderlineNav';
+export function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UnderlineNav, null), /*#__PURE__*/React.createElement(UnderlineNav.Link, null));
+}
+export function shouldNotAcceptSystemProps() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UnderlineNav, {
+    backgroundColor: "snow"
+  }), /*#__PURE__*/React.createElement(UnderlineNav.Link, {
+    backgroundColor: "springgreen"
+  }));
+}

package/lib-esm/stories/ActionList2.stories.js

@@ -205,11 +205,11 @@ export function GroupsStory() {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Groups"), /*#__PURE__*/React.createElement(ErsatzOverlay, null, /*#__PURE__*/React.createElement(ActionList, {
     selectionVariant: "multiple",
     showDividers: true,
-    role: "listbox",
     "aria-label": "Select reviewers"
   }, /*#__PURE__*/React.createElement(ActionList.Group, {
     title: "Suggestions",
-    variant: "filled"
+    variant: "filled",
+    role: "listbox"
   }, users.slice(0, 2).map(user => /*#__PURE__*/React.createElement(ActionList.Item, {
     key: user.login,
     role: "option",
@@ -221,7 +221,8 @@ export function GroupsStory() {
     variant: "block"
   }, "Recently edited these files")))), /*#__PURE__*/React.createElement(ActionList.Group, {
     title: "Everyone",
-    variant: "filled"
+    variant: "filled",
+    role: "listbox"
   }, users.slice(2).map(user => /*#__PURE__*/React.createElement(ActionList.Item, {
     role: "option",
     key: user.login,

package/lib-esm/stories/ActionMenu.stories.js

@@ -64,9 +64,7 @@ export function SimpleListStory() {
     onAction: onAction,
     anchorContent: "Menu",
     overlayProps: {
-      'data-test-id': 'some_test_id',
-      onMouseDown: e => // eslint-disable-next-line no-console
-      console.log('onMouseDown in the internal Overlay can be useful for controlling event interactions', e)
+      'data-test-id': 'some_test_id'
     },
     items: [{
       text: 'New file',

package/lib-esm/stories/ConfirmationDialog.stories.js

@@ -46,17 +46,25 @@ export const ShorthandHook = () => {
     flexDirection: "column",
     alignItems: "flex-start"
   }, /*#__PURE__*/React.createElement(Button, {
-    mb: 2,
-    onClick: onButtonClick
+    onClick: onButtonClick,
+    sx: {
+      mb: 2
+    }
   }, "Turn me green!"), /*#__PURE__*/React.createElement(Button, {
-    mb: 2,
-    onClick: onButtonClick
+    onClick: onButtonClick,
+    sx: {
+      mb: 2
+    }
   }, "Turn me green!"), /*#__PURE__*/React.createElement(Button, {
-    mb: 2,
-    onClick: onButtonClick
+    onClick: onButtonClick,
+    sx: {
+      mb: 2
+    }
   }, "Turn me green!"), /*#__PURE__*/React.createElement(Button, {
-    mb: 2,
-    onClick: onButtonClick
+    onClick: onButtonClick,
+    sx: {
+      mb: 2
+    }
   }, "Turn me green!"));
 };
 ShorthandHook.displayName = "ShorthandHook";

package/lib-esm/stories/Dialog.stories.js

@@ -154,7 +154,9 @@ function CustomBody({
   children
 }) {
   return /*#__PURE__*/React.createElement(Dialog.Body, {
-    bg: "danger.subtle"
+    sx: {
+      bg: 'danger.subtle'
+    }
   }, children);
 }
 
@@ -164,7 +166,9 @@ function CustomFooter({
   footerButtons
 }) {
   return /*#__PURE__*/React.createElement(Dialog.Footer, {
-    bg: "attention.subtle"
+    sx: {
+      bg: 'attention.subtle'
+    }
   }, footerButtons ? /*#__PURE__*/React.createElement(Dialog.Buttons, {
     buttons: footerButtons
   }) : null);

package/lib-esm/stories/useFocusTrap.stories.js

@@ -123,7 +123,9 @@ export const CustomInitialFocus = () => {
     flexDirection: "column",
     alignItems: "flex-start"
   }, /*#__PURE__*/React.createElement(Flash, {
-    mb: 3
+    sx: {
+      mb: 3
+    }
   }, "This story is the same as the `Focus Trap` story, except, when the trap zone is activated, the \u201CElderberry\u201D button will receive the initial focus (if the trap zone container does not already have focus)."), /*#__PURE__*/React.createElement(MarginButton, null, "Apple"), /*#__PURE__*/React.createElement(MarginButton, null, "Banana"), /*#__PURE__*/React.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/React.createElement(Box, {
     borderColor: "gray.5",
     ref: containerRef,
@@ -238,7 +240,9 @@ export const MultipleFocusTraps = () => {
     flexDirection: "column",
     alignItems: "flex-start"
   }, /*#__PURE__*/React.createElement(Flash, {
-    mb: 3
+    sx: {
+      mb: 3
+    }
   }, "This story demonstrates the global nature of focus traps. When a focus trap is enabled, if there is already an active focus trap, it becomes suspended and pushed onto a stack. Once the newly-active focus trap is disabled, the most recently-suspended trap will reactivate. Suspended focus traps can be disabled, causing them to be removed from the stack of suspended traps."), /*#__PURE__*/React.createElement(Box, {
     p: 2,
     mb: 3,

package/lib-esm/stories/useFocusZone.stories.js

@@ -51,8 +51,10 @@ export const BasicFocusZone = () => {
     right: 5,
     top: 2
   }, "Last key pressed: ", lastKey), /*#__PURE__*/React.createElement(ToggleButton, {
-    mb: 3,
-    onClick: toggleFz
+    onClick: toggleFz,
+    sx: {
+      mb: 3
+    }
   }, fzEnabled ? 'Disable' : 'Enable', " Focus Zone"), /*#__PURE__*/React.createElement(MarginButton, null, "Apple"), /*#__PURE__*/React.createElement(MarginButton, null, "Banana"), /*#__PURE__*/React.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/React.createElement(Box, {
     borderColor: "gray.5",
     ref: containerRef,
@@ -334,7 +336,9 @@ export const SpecialSituations = () => {
     alignItems: "flex-start",
     onKeyDownCapture: reportKey
   }, /*#__PURE__*/React.createElement(Flash, {
-    mb: 3
+    sx: {
+      mb: 3
+    }
   }, "This story is very esoteric! It only exists to show some of the nuance of the arrow key focus behavior in different situations. Focus treatment within your component should be evaluated for your particular UX using the ", /*#__PURE__*/React.createElement("a", {
     href: "https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard"
   }, "ARIA guidelines"), "."), /*#__PURE__*/React.createElement(Box, {
@@ -417,7 +421,9 @@ export const ChangingSubtree = () => {
     alignItems: "flex-start",
     onKeyDownCapture: reportKey
   }, /*#__PURE__*/React.createElement(Flash, {
-    mb: 3
+    sx: {
+      mb: 3
+    }
   }, "This story demonstrates that focusZone is consistent even when the container\u2019s subtree changes."), /*#__PURE__*/React.createElement(Box, {
     position: "absolute",
     right: 5,
@@ -523,7 +529,9 @@ export const ActiveDescendant = () => {
     alignItems: "flex-start",
     onKeyDownCapture: reportKey
   }, /*#__PURE__*/React.createElement(Flash, {
-    mb: 3
+    sx: {
+      mb: 3
+    }
   }, "This story demonstrates using the `aria-activedescendant` pattern for managing both a focused element and an active element. Below, you can focus the input box then use the up/down arrow keys to change the active descendant (dark blue outline)."), /*#__PURE__*/React.createElement(Box, {
     position: "absolute",
     right: 5,

package/package-lock.json

@@ -79,7 +79,7 @@
         "eslint-plugin-jsx-a11y": "6.4.1",
         "eslint-plugin-mdx": "1.15.1",
         "eslint-plugin-prettier": "3.4.0",
-        "eslint-plugin-primer-react": "0.6.1",
+        "eslint-plugin-primer-react": "0.7.0",
         "eslint-plugin-react": "7.24.0",
         "eslint-plugin-react-hooks": "4.2.0",
         "jest": "27.0.4",
@@ -18504,9 +18504,9 @@
       }
     },
     "node_modules/eslint-plugin-primer-react": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-primer-react/-/eslint-plugin-primer-react-0.6.1.tgz",
-      "integrity": "sha512-sinHj+soe1LItPJZDPqK443viPGfuuT3NLk0dH8s2QMvmO0deL77aMD2/N3gP6iYg5eEOkVsp38eFkUSTaXm4w==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-primer-react/-/eslint-plugin-primer-react-0.7.0.tgz",
+      "integrity": "sha512-ERzMiCVPBwfG57xpSVjMuPg093GB76xtDLOiHtnYcME+40yOSKsI4lor9QnN7OjnEMj8AHgns4ixpBN8iK23nA==",
       "dev": true,
       "dependencies": {
         "@styled-system/props": "^5.1.5",
@@ -51952,9 +51952,9 @@
       }
     },
     "eslint-plugin-primer-react": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-primer-react/-/eslint-plugin-primer-react-0.6.1.tgz",
-      "integrity": "sha512-sinHj+soe1LItPJZDPqK443viPGfuuT3NLk0dH8s2QMvmO0deL77aMD2/N3gP6iYg5eEOkVsp38eFkUSTaXm4w==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-primer-react/-/eslint-plugin-primer-react-0.7.0.tgz",
+      "integrity": "sha512-ERzMiCVPBwfG57xpSVjMuPg093GB76xtDLOiHtnYcME+40yOSKsI4lor9QnN7OjnEMj8AHgns4ixpBN8iK23nA==",
       "dev": true,
       "requires": {
         "@styled-system/props": "^5.1.5",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "31.2.1-rc.7fa29a87",
+  "version": "32.0.0-rc.7200a6a6",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -114,7 +114,7 @@
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-mdx": "1.15.1",
     "eslint-plugin-prettier": "3.4.0",
-    "eslint-plugin-primer-react": "0.6.1",
+    "eslint-plugin-primer-react": "0.7.0",
     "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
     "jest": "27.0.4",

package/src/ActionList2/Group.tsx

@@ -1,18 +1,51 @@
 import React from 'react'
+import {useSSRSafeId} from '@react-aria/ssr'
 import Box from '../Box'
 import {SxProp} from '../sx'
-import {Header, HeaderProps} from './Header'
-import {ListProps} from './List'
+import {ListContext, ListProps} from './List'
+import {AriaRole} from '../utils/types'
 
-export type GroupProps = HeaderProps &
-  SxProp & {
+export type GroupProps = {
+  /**
+   * 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
+  /**
+   * The ARIA role describing the function of the list inside `Group` component. `listbox` or `menu` are a common values.
+   */
+  role?: AriaRole
+} & SxProp & {
+    /**
+     * Whether multiple Items or a single Item can be selected in the Group. Overrides value on ActionList root.
+     */
     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}) => {
+export const Group: React.FC<GroupProps> = ({
+  title,
+  variant = 'subtle',
+  auxiliaryText,
+  selectionVariant,
+  role,
+  sx = {},
+  ...props
+}) => {
+  const labelId = useSSRSafeId()
+
   return (
     <Box
       as="li"
@@ -23,12 +56,48 @@ export const Group: React.FC<GroupProps> = ({title, variant, auxiliaryText, sele
       }}
       {...props}
     >
-      {title && <Header title={title} variant={variant} auxiliaryText={auxiliaryText} />}
+      {title && <Header title={title} variant={variant} auxiliaryText={auxiliaryText} labelId={labelId} />}
       <GroupContext.Provider value={{selectionVariant}}>
-        <Box as="ul" sx={{paddingInlineStart: 0}}>
+        <Box as="ul" sx={{paddingInlineStart: 0}} aria-labelledby={title ? labelId : undefined} role={role}>
           {props.children}
         </Box>
       </GroupContext.Provider>
     </Box>
   )
 }
+
+export type HeaderProps = Pick<GroupProps, 'variant' | 'title' | 'auxiliaryText'> & {
+  labelId: string
+}
+
+/**
+ * Displays the name and description of a `Group`.
+ *
+ * For visual presentation only. It's hidden from screen readers.
+ */
+const Header: React.FC<HeaderProps> = ({variant, title, auxiliaryText, labelId, ...props}) => {
+  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'
+    })
+  }
+
+  return (
+    <Box sx={styles} role="presentation" aria-hidden="true" {...props}>
+      <span id={labelId}>{title}</span>
+      {auxiliaryText && <span>{auxiliaryText}</span>}
+    </Box>
+  )
+}

package/src/ActionList2/List.tsx

@@ -23,7 +23,7 @@ export type ListProps = {
   role?: AriaRole
 } & SxProp
 
-type ContextProps = Omit<ListProps, 'sx'>
+type ContextProps = Pick<ListProps, 'variant' | 'selectionVariant' | 'showDividers'>
 export const ListContext = React.createContext<ContextProps>({})
 
 const ListBox = styled.ul<SxProp>(sx)