@primer/components 0.0.0-2021828142042 → 0.0.0-2021828162730

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,5 @@ 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;
+declare const Item: PolymorphicForwardRefComponent<"div", ItemProps>;
+export { Item };

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");
 
@@ -90,7 +89,7 @@ const getItemVariant = (variant = 'default', disabled) => {
 
     default:
       return {
-        color: 'inherit',
+        color: (0, _constants.get)('colors.fg.default'),
         iconColor: (0, _constants.get)('colors.fg.muted'),
         annotationColor: (0, _constants.get)('colors.fg.muted'),
         hoverCursor: 'pointer'
@@ -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,6 @@ function Item(itemProps) {
     variant: variant,
     disabled: disabled
   }, trailingText, TrailingIcon && /*#__PURE__*/_react.default.createElement(TrailingIcon, null)) : null));
-}
+});
 
-Item.displayName = "Item";
+exports.Item = 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
+    onClick: onCancelButtonClick,
+    autoFocus: true
   };
   const confirmButton = {
     content: confirmButtonContent,
     buttonType: confirmButtonType,
-    onClick: onConfirmButtonClick,
-    autoFocus: true
+    onClick: onConfirmButtonClick
   };
   const footerButtons = [cancelButton, confirmButton];
   return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, {

package/lib/Dialog/Dialog.js

@@ -141,19 +141,10 @@ const _Dialog = /*#__PURE__*/_react.default.forwardRef((props, forwardedRef) =>
     onClose,
     role = 'dialog',
     width = 'xlarge',
-    height = 'auto',
-    footerButtons = []
+    height = 'auto'
   } = 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,
@@ -166,8 +157,7 @@ const _Dialog = /*#__PURE__*/_react.default.forwardRef((props, forwardedRef) =>
   const backdropRef = (0, _react.useRef)(null);
   (0, _useFocusTrap.useFocusTrap)({
     containerRef: dialogRef,
-    restoreFocusOnCleanUp: true,
-    initialFocusRef: autoFocusedFooterButtonRef
+    restoreFocusOnCleanUp: true
   });
   (0, _hooks.useOnEscapePress)(event => {
     onClose('escape');
@@ -222,16 +212,32 @@ const buttonTypes = {
 const Buttons = ({
   buttons
 }) => {
+  const autoFocusRef = (0, _react.useRef)(null);
+  let autoFocusCount = 0;
+  const [hasRendered, setHasRendered] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    // hack to work around dialogs originating from other focus traps.
+    if (hasRendered === 1) {
+      var _autoFocusRef$current;
+
+      (_autoFocusRef$current = autoFocusRef.current) === null || _autoFocusRef$current === void 0 ? void 0 : _autoFocusRef$current.focus();
+    } else {
+      setHasRendered(hasRendered + 1);
+    }
+  }, [hasRendered]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, buttons.map((dialogButtonProps, index) => {
     const {
       content,
       buttonType = 'normal',
+      autoFocus = false,
       ...buttonProps
     } = dialogButtonProps;
     const ButtonElement = buttonTypes[buttonType];
     return /*#__PURE__*/_react.default.createElement(ButtonElement, _extends({
       key: index
-    }, buttonProps), content);
+    }, buttonProps, {
+      ref: autoFocus && autoFocusCount === 0 ? (autoFocusCount++, autoFocusRef) : null
+    }), 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,5 @@ 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;
+declare const Item: PolymorphicForwardRefComponent<"div", ItemProps>;
+export { Item };

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: {
@@ -66,7 +66,7 @@ const getItemVariant = (variant = 'default', disabled) => {
 
     default:
       return {
-        color: 'inherit',
+        color: get('colors.fg.default'),
         iconColor: get('colors.fg.muted'),
         annotationColor: get('colors.fg.muted'),
         hoverCursor: 'pointer'
@@ -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) {
+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";
+});
+export { 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
+    onClick: onCancelButtonClick,
+    autoFocus: true
   };
   const confirmButton = {
     content: confirmButtonContent,
     buttonType: confirmButtonType,
-    onClick: onConfirmButtonClick,
-    autoFocus: true
+    onClick: onConfirmButtonClick
   };
   const footerButtons = [cancelButton, confirmButton];
   return /*#__PURE__*/React.createElement(Dialog, {

package/lib-esm/Dialog/Dialog.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import Button, { ButtonPrimary, ButtonDanger } from '../Button';
 import Box from '../Box';
@@ -112,19 +112,10 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
     onClose,
     role = 'dialog',
     width = 'xlarge',
-    height = 'auto',
-    footerButtons = []
+    height = 'auto'
   } = 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,
@@ -137,8 +128,7 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
   const backdropRef = useRef(null);
   useFocusTrap({
     containerRef: dialogRef,
-    restoreFocusOnCleanUp: true,
-    initialFocusRef: autoFocusedFooterButtonRef
+    restoreFocusOnCleanUp: true
   });
   useOnEscapePress(event => {
     onClose('escape');
@@ -193,16 +183,32 @@ const buttonTypes = {
 const Buttons = ({
   buttons
 }) => {
+  const autoFocusRef = useRef(null);
+  let autoFocusCount = 0;
+  const [hasRendered, setHasRendered] = useState(0);
+  useEffect(() => {
+    // hack to work around dialogs originating from other focus traps.
+    if (hasRendered === 1) {
+      var _autoFocusRef$current;
+
+      (_autoFocusRef$current = autoFocusRef.current) === null || _autoFocusRef$current === void 0 ? void 0 : _autoFocusRef$current.focus();
+    } else {
+      setHasRendered(hasRendered + 1);
+    }
+  }, [hasRendered]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, buttons.map((dialogButtonProps, index) => {
     const {
       content,
       buttonType = 'normal',
+      autoFocus = false,
       ...buttonProps
     } = dialogButtonProps;
     const ButtonElement = buttonTypes[buttonType];
     return /*#__PURE__*/React.createElement(ButtonElement, _extends({
       key: index
-    }, buttonProps), content);
+    }, buttonProps, {
+      ref: autoFocus && autoFocusCount === 0 ? (autoFocusCount++, autoFocusRef) : null
+    }), content);
   }));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-2021828142042",
+  "version": "0.0.0-2021828162730",
   "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.7.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",