@primer/components 31.2.1-rc.f73a0f8c → 32.0.1-rc.44e3df9b

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,