@primer/components 0.0.0-2021830153742 → 0.0.0-202183017829

package/lib/ActionList/Item.d.ts

@@ -2,12 +2,10 @@ import { IconProps } from '@primer/octicons-react';
 import React from 'react';
 import { SxProp } from '../sx';
 import { ItemInput } from './List';
-import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
-import { AriaRole } from '../utils/types';
 /**
  * Contract for props passed to the `Item` component.
  */
-export interface ItemProps extends SxProp {
+export interface ItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'id'>, SxProp {
     /**
      * Primary text which names an `Item`.
      */
@@ -70,18 +68,6 @@ export interface ItemProps extends SxProp {
      * An id associated with this item.  Should be unique between items
      */
     id?: number | string;
-    /**
-     * Node to be included inside the item before the text.
-     */
-    children?: React.ReactNode;
-    /**
-     * The ARIA role describing the function of `List` component. `option` is a common value.
-     */
-    role?: AriaRole;
-    /**
-     * An item to pass back in the `onAction` callback, meant as
-     */
-    item?: ItemInput;
 }
 export declare const TextContainer: import("styled-components").StyledComponent<"span", any, {
     dangerouslySetInnerHtml?: React.DOMAttributes<HTMLDivElement>['dangerouslySetInnerHTML'];
@@ -89,4 +75,6 @@ export declare const TextContainer: import("styled-components").StyledComponent<
 /**
  * An actionable or selectable `Item` with an optional icon and description.
  */
-export declare const Item: PolymorphicForwardRefComponent<"div", ItemProps>;
+export declare function Item(itemProps: Partial<ItemProps> & {
+    item?: ItemInput;
+}): JSX.Element;

package/lib/ActionList/Item.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Item = exports.TextContainer = void 0;
+exports.Item = Item;
+exports.TextContainer = void 0;
 
 var _octiconsReact = require("@primer/octicons-react");
 
@@ -110,7 +111,7 @@ const MainContent = _styledComponents.default.div.withConfig({
 const StyledItem = _styledComponents.default.div.withConfig({
   displayName: "Item__StyledItem",
   componentId: "jqpvy8-2"
-})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var(--item-hover-bg-override,", ");cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], (0, _constants.get)('space.2'), (0, _constants.get)('radii.2'), ({
+})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;@media (hover:hover) and (pointer:fine){:hover{background:var(--item-hover-bg-override,", ");cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], (0, _constants.get)('space.2'), (0, _constants.get)('radii.2'), ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).color, ({
@@ -177,9 +178,8 @@ const MultiSelectInput = _styledComponents.default.input.withConfig({
  */
 
 
-const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
+function Item(itemProps) {
   const {
-    as: Component,
     text,
     description,
     descriptionVariant = 'inline',
@@ -235,8 +235,6 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
     theme
   } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/_react.default.createElement(StyledItem, _extends({
-    ref: ref,
-    as: Component,
     tabIndex: disabled ? undefined : -1,
     variant: variant,
     showDivider: showDivider,
@@ -282,7 +280,6 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
     variant: variant,
     disabled: disabled
   }, trailingText, TrailingIcon && /*#__PURE__*/_react.default.createElement(TrailingIcon, null)) : null));
-});
+}
 
-exports.Item = Item;
-Item.displayName = 'ActionList.Item';
+Item.displayName = "Item";

package/lib/ActionList/List.d.ts

@@ -1,12 +1,9 @@
-import React, { Key } from 'react';
+import React from 'react';
 import type { AriaRole } from '../utils/types';
 import { Group, GroupProps } from './Group';
-import { ItemProps } from './Item';
-declare type RenderItemFn = (props: ItemProps) => React.ReactElement;
-export declare type ItemInput = ItemProps | ((Partial<ItemProps> & {
-    renderItem: RenderItemFn;
-}) & {
-    key?: Key;
+import { Item, ItemProps } from './Item';
+export declare type ItemInput = ItemProps | (Partial<ItemProps> & {
+    renderItem: typeof Item;
 });
 /**
  * Contract for props passed to the `List` component.
@@ -29,7 +26,7 @@ export interface ListPropsBase {
      * without a `Group`-level or `Item`-level custom `Item` renderer will be
      * rendered using this function component.
      */
-    renderItem?: RenderItemFn;
+    renderItem?: typeof Item;
     /**
      * A `List`-level custom `Group` renderer. Every `Group` within this `List`
      * without a `Group`-level custom `Item` renderer will be rendered using
@@ -61,7 +58,7 @@ export interface GroupedListProps extends ListPropsBase {
      * and `Group`-level custom `Item` or `Group` renderers.
      */
     groupMetadata: ((Omit<GroupProps, 'items'> | Omit<Partial<GroupProps> & {
-        renderItem?: RenderItemFn;
+        renderItem?: typeof Item;
         renderGroup?: typeof Group;
     }, 'items'>) & {
         groupId: string;
@@ -71,7 +68,7 @@ export interface GroupedListProps extends ListPropsBase {
      * and `Item`-level custom `Item` renderers.
      */
     items: ((ItemProps | (Partial<ItemProps> & {
-        renderItem: RenderItemFn;
+        renderItem: typeof Item;
     })) & {
         groupId: string;
     })[];
@@ -84,4 +81,3 @@ export declare type ListProps = ListPropsBase | GroupedListProps;
  * Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
  */
 export declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib/ActionList/List.js

@@ -106,11 +106,11 @@ const List = /*#__PURE__*/_react.default.forwardRef((props, forwardedRef) => {
 
 
   const renderItem = (itemProps, item, itemIndex) => {
-    var _ref2, _ref3, _itemProps$id;
+    var _ref2, _itemProps$key, _itemProps$id;
 
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     const ItemComponent = 'renderItem' in itemProps && itemProps.renderItem || props.renderItem || _Item.Item;
-    const key = (_ref2 = (_ref3 = 'key' in itemProps ? itemProps.key : undefined) !== null && _ref3 !== void 0 ? _ref3 : (_itemProps$id = itemProps.id) === null || _itemProps$id === void 0 ? void 0 : _itemProps$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : itemIndex.toString();
+    const key = (_ref2 = (_itemProps$key = itemProps.key) !== null && _itemProps$key !== void 0 ? _itemProps$key : (_itemProps$id = itemProps.id) === null || _itemProps$id === void 0 ? void 0 : _itemProps$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : itemIndex.toString();
     return /*#__PURE__*/_react.default.createElement(ItemComponent, _extends({
       showDivider: props.showItemDividers,
       selectionVariant: props.selectionVariant

package/lib/ActionList/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { Group } from './Group';
+import { Item } from './Item';
 import { Divider } from './Divider';
 export type { ListProps as ActionListProps } from './List';
 export type { GroupProps } from './Group';
@@ -11,7 +12,7 @@ export declare const ActionList: import("react").ForwardRefExoticComponent<impor
     /** Collects related `Items` in an `ActionList`. */
     Group: typeof Group;
     /** An actionable or selectable `Item` with an optional icon and description. */
-    Item: import("@radix-ui/react-polymorphic").ForwardRefComponent<"div", import("./Item").ItemProps>;
+    Item: typeof Item;
     /** Visually separates `Item`s or `Group`s in an `ActionList`. */
     Divider: typeof Divider;
 };

package/lib/Dialog/ConfirmationDialog.js

@@ -117,13 +117,13 @@ const ConfirmationDialog = props => {
   }, [onClose]);
   const cancelButton = {
     content: cancelButtonContent,
-    onClick: onCancelButtonClick,
-    autoFocus: true
+    onClick: onCancelButtonClick
   };
   const confirmButton = {
     content: confirmButtonContent,
     buttonType: confirmButtonType,
-    onClick: onConfirmButtonClick
+    onClick: onConfirmButtonClick,
+    autoFocus: true
   };
   const footerButtons = [cancelButton, confirmButton];
   return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, {

package/lib/Dialog/Dialog.d.ts

@@ -19,6 +19,11 @@ export declare type DialogButtonProps = ButtonProps & {
      * focus this button automatically when the dialog appears.
      */
     autoFocus?: boolean;
+    /**
+     * A reference to the rendered Button’s DOM node, used together with
+     * `autoFocus` for `focusTrap`’s `initialFocus`.
+     */
+    ref?: React.RefObject<HTMLButtonElement>;
 };
 /**
  * Props to customize the rendering of the Dialog.

package/lib/Dialog/Dialog.js

@@ -141,10 +141,19 @@ const _Dialog = /*#__PURE__*/_react.default.forwardRef((props, forwardedRef) =>
     onClose,
     role = 'dialog',
     width = 'xlarge',
-    height = 'auto'
+    height = 'auto',
+    footerButtons = []
   } = props;
   const dialogLabelId = (0, _ssr.useSSRSafeId)();
   const dialogDescriptionId = (0, _ssr.useSSRSafeId)();
+  const autoFocusedFooterButtonRef = (0, _react.useRef)(null);
+
+  for (const footerButton of footerButtons) {
+    if (footerButton.autoFocus) {
+      footerButton.ref = autoFocusedFooterButtonRef;
+    }
+  }
+
   const defaultedProps = { ...props,
     title,
     subtitle,
@@ -157,7 +166,8 @@ const _Dialog = /*#__PURE__*/_react.default.forwardRef((props, forwardedRef) =>
   const backdropRef = (0, _react.useRef)(null);
   (0, _useFocusTrap.useFocusTrap)({
     containerRef: dialogRef,
-    restoreFocusOnCleanUp: true
+    restoreFocusOnCleanUp: true,
+    initialFocusRef: autoFocusedFooterButtonRef
   });
   (0, _hooks.useOnEscapePress)(event => {
     onClose('escape');
@@ -212,7 +222,9 @@ const buttonTypes = {
 const Buttons = ({
   buttons
 }) => {
-  const autoFocusRef = (0, _react.useRef)(null);
+  var _buttons$find;
+
+  const autoFocusRef = (0, _hooks.useProvidedRefOrCreate)((_buttons$find = buttons.find(button => button.autoFocus)) === null || _buttons$find === void 0 ? void 0 : _buttons$find.ref);
   let autoFocusCount = 0;
   const [hasRendered, setHasRendered] = (0, _react.useState)(0);
   (0, _react.useEffect)(() => {
@@ -224,7 +236,7 @@ const Buttons = ({
     } else {
       setHasRendered(hasRendered + 1);
     }
-  }, [hasRendered]);
+  }, [autoFocusRef, hasRendered]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, buttons.map((dialogButtonProps, index) => {
     const {
       content,

package/lib-esm/ActionList/Item.d.ts

@@ -2,12 +2,10 @@ import { IconProps } from '@primer/octicons-react';
 import React from 'react';
 import { SxProp } from '../sx';
 import { ItemInput } from './List';
-import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
-import { AriaRole } from '../utils/types';
 /**
  * Contract for props passed to the `Item` component.
  */
-export interface ItemProps extends SxProp {
+export interface ItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'id'>, SxProp {
     /**
      * Primary text which names an `Item`.
      */
@@ -70,18 +68,6 @@ export interface ItemProps extends SxProp {
      * An id associated with this item.  Should be unique between items
      */
     id?: number | string;
-    /**
-     * Node to be included inside the item before the text.
-     */
-    children?: React.ReactNode;
-    /**
-     * The ARIA role describing the function of `List` component. `option` is a common value.
-     */
-    role?: AriaRole;
-    /**
-     * An item to pass back in the `onAction` callback, meant as
-     */
-    item?: ItemInput;
 }
 export declare const TextContainer: import("styled-components").StyledComponent<"span", any, {
     dangerouslySetInnerHtml?: React.DOMAttributes<HTMLDivElement>['dangerouslySetInnerHTML'];
@@ -89,4 +75,6 @@ export declare const TextContainer: import("styled-components").StyledComponent<
 /**
  * An actionable or selectable `Item` with an optional icon and description.
  */
-export declare const Item: PolymorphicForwardRefComponent<"div", ItemProps>;
+export declare function Item(itemProps: Partial<ItemProps> & {
+    item?: ItemInput;
+}): JSX.Element;

package/lib-esm/ActionList/Item.js

@@ -11,10 +11,10 @@ import { StyledDivider } from './Divider';
 import { useColorSchemeVar, useTheme } from '../ThemeProvider';
 import { activeDescendantActivatedDirectly, activeDescendantActivatedIndirectly, isActiveDescendantAttribute } from '../behaviors/focusZone';
 import { useSSRSafeId } from '@react-aria/ssr';
-
 /**
  * These colors are not yet in our default theme.  Need to remove this once they are added.
  */
+
 const customItemThemes = {
   default: {
     hover: {
@@ -85,7 +85,7 @@ const MainContent = styled.div.withConfig({
 const StyledItem = styled.div.withConfig({
   displayName: "Item__StyledItem",
   componentId: "jqpvy8-2"
-})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var(--item-hover-bg-override,", ");cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], get('space.2'), get('radii.2'), ({
+})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;@media (hover:hover) and (pointer:fine){:hover{background:var(--item-hover-bg-override,", ");cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], get('space.2'), get('radii.2'), ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).color, ({
@@ -144,9 +144,8 @@ const MultiSelectInput = styled.input.withConfig({
  * An actionable or selectable `Item` with an optional icon and description.
  */
 
-export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
+export function Item(itemProps) {
   const {
-    as: Component,
     text,
     description,
     descriptionVariant = 'inline',
@@ -202,8 +201,6 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
     theme
   } = useTheme();
   return /*#__PURE__*/React.createElement(StyledItem, _extends({
-    ref: ref,
-    as: Component,
     tabIndex: disabled ? undefined : -1,
     variant: variant,
     showDivider: showDivider,
@@ -249,5 +246,5 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
     variant: variant,
     disabled: disabled
   }, trailingText, TrailingIcon && /*#__PURE__*/React.createElement(TrailingIcon, null)) : null));
-});
-Item.displayName = 'ActionList.Item';
+}
+Item.displayName = "Item";

package/lib-esm/ActionList/List.d.ts

@@ -1,12 +1,9 @@
-import React, { Key } from 'react';
+import React from 'react';
 import type { AriaRole } from '../utils/types';
 import { Group, GroupProps } from './Group';
-import { ItemProps } from './Item';
-declare type RenderItemFn = (props: ItemProps) => React.ReactElement;
-export declare type ItemInput = ItemProps | ((Partial<ItemProps> & {
-    renderItem: RenderItemFn;
-}) & {
-    key?: Key;
+import { Item, ItemProps } from './Item';
+export declare type ItemInput = ItemProps | (Partial<ItemProps> & {
+    renderItem: typeof Item;
 });
 /**
  * Contract for props passed to the `List` component.
@@ -29,7 +26,7 @@ export interface ListPropsBase {
      * without a `Group`-level or `Item`-level custom `Item` renderer will be
      * rendered using this function component.
      */
-    renderItem?: RenderItemFn;
+    renderItem?: typeof Item;
     /**
      * A `List`-level custom `Group` renderer. Every `Group` within this `List`
      * without a `Group`-level custom `Item` renderer will be rendered using
@@ -61,7 +58,7 @@ export interface GroupedListProps extends ListPropsBase {
      * and `Group`-level custom `Item` or `Group` renderers.
      */
     groupMetadata: ((Omit<GroupProps, 'items'> | Omit<Partial<GroupProps> & {
-        renderItem?: RenderItemFn;
+        renderItem?: typeof Item;
         renderGroup?: typeof Group;
     }, 'items'>) & {
         groupId: string;
@@ -71,7 +68,7 @@ export interface GroupedListProps extends ListPropsBase {
      * and `Item`-level custom `Item` renderers.
      */
     items: ((ItemProps | (Partial<ItemProps> & {
-        renderItem: RenderItemFn;
+        renderItem: typeof Item;
     })) & {
         groupId: string;
     })[];
@@ -84,4 +81,3 @@ export declare type ListProps = ListPropsBase | GroupedListProps;
  * Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
  */
 export declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib-esm/ActionList/List.js

@@ -90,11 +90,11 @@ export const List = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
 
 
   const renderItem = (itemProps, item, itemIndex) => {
-    var _ref2, _ref3, _itemProps$id;
+    var _ref2, _itemProps$key, _itemProps$id;
 
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     const ItemComponent = 'renderItem' in itemProps && itemProps.renderItem || props.renderItem || Item;
-    const key = (_ref2 = (_ref3 = 'key' in itemProps ? itemProps.key : undefined) !== null && _ref3 !== void 0 ? _ref3 : (_itemProps$id = itemProps.id) === null || _itemProps$id === void 0 ? void 0 : _itemProps$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : itemIndex.toString();
+    const key = (_ref2 = (_itemProps$key = itemProps.key) !== null && _itemProps$key !== void 0 ? _itemProps$key : (_itemProps$id = itemProps.id) === null || _itemProps$id === void 0 ? void 0 : _itemProps$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : itemIndex.toString();
     return /*#__PURE__*/React.createElement(ItemComponent, _extends({
       showDivider: props.showItemDividers,
       selectionVariant: props.selectionVariant

package/lib-esm/ActionList/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { Group } from './Group';
+import { Item } from './Item';
 import { Divider } from './Divider';
 export type { ListProps as ActionListProps } from './List';
 export type { GroupProps } from './Group';
@@ -11,7 +12,7 @@ export declare const ActionList: import("react").ForwardRefExoticComponent<impor
     /** Collects related `Items` in an `ActionList`. */
     Group: typeof Group;
     /** An actionable or selectable `Item` with an optional icon and description. */
-    Item: import("@radix-ui/react-polymorphic").ForwardRefComponent<"div", import("./Item").ItemProps>;
+    Item: typeof Item;
     /** Visually separates `Item`s or `Group`s in an `ActionList`. */
     Divider: typeof Divider;
 };

package/lib-esm/Dialog/ConfirmationDialog.js

@@ -97,13 +97,13 @@ export const ConfirmationDialog = props => {
   }, [onClose]);
   const cancelButton = {
     content: cancelButtonContent,
-    onClick: onCancelButtonClick,
-    autoFocus: true
+    onClick: onCancelButtonClick
   };
   const confirmButton = {
     content: confirmButtonContent,
     buttonType: confirmButtonType,
-    onClick: onConfirmButtonClick
+    onClick: onConfirmButtonClick,
+    autoFocus: true
   };
   const footerButtons = [cancelButton, confirmButton];
   return /*#__PURE__*/React.createElement(Dialog, {

package/lib-esm/Dialog/Dialog.d.ts

@@ -19,6 +19,11 @@ export declare type DialogButtonProps = ButtonProps & {
      * focus this button automatically when the dialog appears.
      */
     autoFocus?: boolean;
+    /**
+     * A reference to the rendered Button’s DOM node, used together with
+     * `autoFocus` for `focusTrap`’s `initialFocus`.
+     */
+    ref?: React.RefObject<HTMLButtonElement>;
 };
 /**
  * Props to customize the rendering of the Dialog.

package/lib-esm/Dialog/Dialog.js

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import Button, { ButtonPrimary, ButtonDanger } from '../Button';
 import Box from '../Box';
 import { get, COMMON, POSITION } from '../constants';
-import { useOnEscapePress } from '../hooks';
+import { useOnEscapePress, useProvidedRefOrCreate } from '../hooks';
 import { useFocusTrap } from '../hooks/useFocusTrap';
 import sx from '../sx';
 import StyledOcticon from '../StyledOcticon';
@@ -112,10 +112,19 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
     onClose,
     role = 'dialog',
     width = 'xlarge',
-    height = 'auto'
+    height = 'auto',
+    footerButtons = []
   } = props;
   const dialogLabelId = useSSRSafeId();
   const dialogDescriptionId = useSSRSafeId();
+  const autoFocusedFooterButtonRef = useRef(null);
+
+  for (const footerButton of footerButtons) {
+    if (footerButton.autoFocus) {
+      footerButton.ref = autoFocusedFooterButtonRef;
+    }
+  }
+
   const defaultedProps = { ...props,
     title,
     subtitle,
@@ -128,7 +137,8 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
   const backdropRef = useRef(null);
   useFocusTrap({
     containerRef: dialogRef,
-    restoreFocusOnCleanUp: true
+    restoreFocusOnCleanUp: true,
+    initialFocusRef: autoFocusedFooterButtonRef
   });
   useOnEscapePress(event => {
     onClose('escape');
@@ -183,7 +193,9 @@ const buttonTypes = {
 const Buttons = ({
   buttons
 }) => {
-  const autoFocusRef = useRef(null);
+  var _buttons$find;
+
+  const autoFocusRef = useProvidedRefOrCreate((_buttons$find = buttons.find(button => button.autoFocus)) === null || _buttons$find === void 0 ? void 0 : _buttons$find.ref);
   let autoFocusCount = 0;
   const [hasRendered, setHasRendered] = useState(0);
   useEffect(() => {
@@ -195,7 +207,7 @@ const Buttons = ({
     } else {
       setHasRendered(hasRendered + 1);
     }
-  }, [hasRendered]);
+  }, [autoFocusRef, hasRendered]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, buttons.map((dialogButtonProps, index) => {
     const {
       content,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-2021830153742",
+  "version": "0.0.0-202183017829",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -45,7 +45,6 @@
   "dependencies": {
     "@primer/octicons-react": "^13.0.0",
     "@primer/primitives": "4.8.1",
-    "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",
     "@styled-system/props": "5.1.5",
@@ -73,7 +72,7 @@
     "@changesets/cli": "2.17.0",
     "@github/prettier-config": "0.0.4",
     "@rollup/plugin-commonjs": "19.0.2",
-    "@rollup/plugin-node-resolve": "13.0.0",
+    "@rollup/plugin-node-resolve": "13.0.5",
     "@size-limit/preset-big-lib": "5.0.2",
     "@storybook/addon-a11y": "6.3.4",
     "@storybook/addon-actions": "^6.2.9",
@@ -82,7 +81,7 @@
     "@storybook/react": "6.3.8",
     "@testing-library/dom": "7.31.2",
     "@testing-library/react": "11.2.7",
-    "@testing-library/react-hooks": "7.0.0",
+    "@testing-library/react-hooks": "7.0.2",
     "@testing-library/user-event": "13.1.9",
     "@types/chroma-js": "2.1.3",
     "@types/enzyme": "3.10.9",
@@ -112,7 +111,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.4.2",
+    "eslint-plugin-primer-react": "0.5.0",
     "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
     "jest": "27.0.4",