@primer/components 0.0.0-20218296206 → 0.0.0-2021830154631

package/lib/ActionList/Item.d.ts

@@ -2,10 +2,12 @@ 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 Omit<React.ComponentPropsWithoutRef<'div'>, 'id'>, SxProp {
+export interface ItemProps extends SxProp {
     /**
      * Primary text which names an `Item`.
      */
@@ -68,6 +70,18 @@ export interface ItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, '
      * 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'];
@@ -75,6 +89,4 @@ export declare const TextContainer: import("styled-components").StyledComponent<
 /**
  * An actionable or selectable `Item` with an optional icon and description.
  */
-export declare function Item(itemProps: Partial<ItemProps> & {
-    item?: ItemInput;
-}): JSX.Element;
+export declare const Item: PolymorphicForwardRefComponent<"div", ItemProps>;

package/lib/ActionList/Item.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Item = Item;
-exports.TextContainer = void 0;
+exports.Item = exports.TextContainer = void 0;
 
 var _octiconsReact = require("@primer/octicons-react");
 
@@ -111,7 +110,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;@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;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'), ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).color, ({
@@ -178,8 +177,9 @@ const MultiSelectInput = _styledComponents.default.input.withConfig({
  */
 
 
-function Item(itemProps) {
+const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
   const {
+    as: Component,
     text,
     description,
     descriptionVariant = 'inline',
@@ -235,6 +235,8 @@ function Item(itemProps) {
     theme
   } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/_react.default.createElement(StyledItem, _extends({
+    ref: ref,
+    as: Component,
     tabIndex: disabled ? undefined : -1,
     variant: variant,
     showDivider: showDivider,
@@ -280,6 +282,7 @@ function Item(itemProps) {
     variant: variant,
     disabled: disabled
   }, trailingText, TrailingIcon && /*#__PURE__*/_react.default.createElement(TrailingIcon, null)) : null));
-}
+});
 
-Item.displayName = "Item";
+exports.Item = Item;
+Item.displayName = 'ActionList.Item';

package/lib/ActionList/List.d.ts

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { Key } from 'react';
 import type { AriaRole } from '../utils/types';
 import { Group, GroupProps } from './Group';
-import { Item, ItemProps } from './Item';
-export declare type ItemInput = ItemProps | (Partial<ItemProps> & {
-    renderItem: typeof Item;
+import { ItemProps } from './Item';
+declare type RenderItemFn = (props: ItemProps) => React.ReactElement;
+export declare type ItemInput = ItemProps | ((Partial<ItemProps> & {
+    renderItem: RenderItemFn;
+}) & {
+    key?: Key;
 });
 /**
  * Contract for props passed to the `List` component.
@@ -26,7 +29,7 @@ export interface ListPropsBase {
      * without a `Group`-level or `Item`-level custom `Item` renderer will be
      * rendered using this function component.
      */
-    renderItem?: typeof Item;
+    renderItem?: RenderItemFn;
     /**
      * A `List`-level custom `Group` renderer. Every `Group` within this `List`
      * without a `Group`-level custom `Item` renderer will be rendered using
@@ -58,7 +61,7 @@ export interface GroupedListProps extends ListPropsBase {
      * and `Group`-level custom `Item` or `Group` renderers.
      */
     groupMetadata: ((Omit<GroupProps, 'items'> | Omit<Partial<GroupProps> & {
-        renderItem?: typeof Item;
+        renderItem?: RenderItemFn;
         renderGroup?: typeof Group;
     }, 'items'>) & {
         groupId: string;
@@ -68,7 +71,7 @@ export interface GroupedListProps extends ListPropsBase {
      * and `Item`-level custom `Item` renderers.
      */
     items: ((ItemProps | (Partial<ItemProps> & {
-        renderItem: typeof Item;
+        renderItem: RenderItemFn;
     })) & {
         groupId: string;
     })[];
@@ -81,3 +84,4 @@ 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, _itemProps$key, _itemProps$id;
+    var _ref2, _ref3, _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 = (_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();
+    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();
     return /*#__PURE__*/_react.default.createElement(ItemComponent, _extends({
       showDivider: props.showItemDividers,
       selectionVariant: props.selectionVariant

package/lib/ActionList/index.d.ts

@@ -1,6 +1,5 @@
 /// <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';
@@ -12,7 +11,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: typeof Item;
+    Item: import("@radix-ui/react-polymorphic").ForwardRefComponent<"div", import("./Item").ItemProps>;
     /** 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,10 +2,12 @@ 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 Omit<React.ComponentPropsWithoutRef<'div'>, 'id'>, SxProp {
+export interface ItemProps extends SxProp {
     /**
      * Primary text which names an `Item`.
      */
@@ -68,6 +70,18 @@ export interface ItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, '
      * 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'];
@@ -75,6 +89,4 @@ export declare const TextContainer: import("styled-components").StyledComponent<
 /**
  * An actionable or selectable `Item` with an optional icon and description.
  */
-export declare function Item(itemProps: Partial<ItemProps> & {
-    item?: ItemInput;
-}): JSX.Element;
+export declare const Item: PolymorphicForwardRefComponent<"div", ItemProps>;

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;@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;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'), ({
   variant,
   item
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).color, ({
@@ -144,8 +144,9 @@ const MultiSelectInput = styled.input.withConfig({
  * An actionable or selectable `Item` with an optional icon and description.
  */
 
-export function Item(itemProps) {
+export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
   const {
+    as: Component,
     text,
     description,
     descriptionVariant = 'inline',
@@ -201,6 +202,8 @@ export function Item(itemProps) {
     theme
   } = useTheme();
   return /*#__PURE__*/React.createElement(StyledItem, _extends({
+    ref: ref,
+    as: Component,
     tabIndex: disabled ? undefined : -1,
     variant: variant,
     showDivider: showDivider,
@@ -246,5 +249,5 @@ export function Item(itemProps) {
     variant: variant,
     disabled: disabled
   }, trailingText, TrailingIcon && /*#__PURE__*/React.createElement(TrailingIcon, null)) : null));
-}
-Item.displayName = "Item";
+});
+Item.displayName = 'ActionList.Item';

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

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { Key } from 'react';
 import type { AriaRole } from '../utils/types';
 import { Group, GroupProps } from './Group';
-import { Item, ItemProps } from './Item';
-export declare type ItemInput = ItemProps | (Partial<ItemProps> & {
-    renderItem: typeof Item;
+import { ItemProps } from './Item';
+declare type RenderItemFn = (props: ItemProps) => React.ReactElement;
+export declare type ItemInput = ItemProps | ((Partial<ItemProps> & {
+    renderItem: RenderItemFn;
+}) & {
+    key?: Key;
 });
 /**
  * Contract for props passed to the `List` component.
@@ -26,7 +29,7 @@ export interface ListPropsBase {
      * without a `Group`-level or `Item`-level custom `Item` renderer will be
      * rendered using this function component.
      */
-    renderItem?: typeof Item;
+    renderItem?: RenderItemFn;
     /**
      * A `List`-level custom `Group` renderer. Every `Group` within this `List`
      * without a `Group`-level custom `Item` renderer will be rendered using
@@ -58,7 +61,7 @@ export interface GroupedListProps extends ListPropsBase {
      * and `Group`-level custom `Item` or `Group` renderers.
      */
     groupMetadata: ((Omit<GroupProps, 'items'> | Omit<Partial<GroupProps> & {
-        renderItem?: typeof Item;
+        renderItem?: RenderItemFn;
         renderGroup?: typeof Group;
     }, 'items'>) & {
         groupId: string;
@@ -68,7 +71,7 @@ export interface GroupedListProps extends ListPropsBase {
      * and `Item`-level custom `Item` renderers.
      */
     items: ((ItemProps | (Partial<ItemProps> & {
-        renderItem: typeof Item;
+        renderItem: RenderItemFn;
     })) & {
         groupId: string;
     })[];
@@ -81,3 +84,4 @@ 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, _itemProps$key, _itemProps$id;
+    var _ref2, _ref3, _itemProps$id;
 
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     const ItemComponent = 'renderItem' in itemProps && itemProps.renderItem || props.renderItem || Item;
-    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();
+    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();
     return /*#__PURE__*/React.createElement(ItemComponent, _extends({
       showDivider: props.showItemDividers,
       selectionVariant: props.selectionVariant

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

@@ -1,6 +1,5 @@
 /// <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';
@@ -12,7 +11,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: typeof Item;
+    Item: import("@radix-ui/react-polymorphic").ForwardRefComponent<"div", import("./Item").ItemProps>;
     /** 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-20218296206",
+  "version": "0.0.0-2021830154631",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -45,6 +45,7 @@
   "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",
@@ -67,12 +68,12 @@
     "@babel/plugin-proposal-optional-chaining": "7.14.5",
     "@babel/plugin-transform-modules-commonjs": "7.14.5",
     "@babel/preset-react": "7.14.5",
-    "@babel/preset-typescript": "7.14.5",
+    "@babel/preset-typescript": "7.15.0",
     "@changesets/changelog-github": "0.4.0",
     "@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",
@@ -81,7 +82,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",
@@ -111,7 +112,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",