@primer/components 0.0.0-202182923742 → 0.0.0-202183053931

package/lib/ActionList/Item.js

@@ -36,33 +36,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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); }
 
-/**
- * These colors are not yet in our default theme.  Need to remove this once they are added.
- */
 const customItemThemes = {
   default: {
-    hover: {
-      light: 'rgba(46, 77, 108, 0.06)',
-      dark: 'rgba(201, 206, 212, 0.12)',
-      dark_dimmed: 'rgba(201, 206, 212, 0.12)'
-    },
-    focus: {
-      light: 'rgba(54, 77, 100, 0.16)',
-      dark: 'rgba(201, 206, 212, 0.24)',
-      dark_dimmed: 'rgba(201, 206, 212, 0.24)'
-    }
+    hover: (0, _constants.get)('colors.neutral.subtle'),
+    focus: (0, _constants.get)('colors.neutral.muted')
   },
   danger: {
-    hover: {
-      light: 'rgba(234, 74, 90, 0.08)',
-      dark: 'rgba(248, 81, 73, 0.16)',
-      dark_dimmed: 'rgba(248, 81, 73, 0.16)'
-    },
-    focus: {
-      light: 'rgba(234, 74, 90, 0.14)',
-      dark: 'rgba(248, 81, 73, 0.24)',
-      dark_dimmed: 'rgba(248, 81, 73, 0.24)'
-    }
+    hover: (0, _constants.get)('colors.danger.subtle'),
+    focus: (0, _constants.get)('colors.danger.muted')
   }
 };
 /**
@@ -229,8 +210,8 @@ function Item(itemProps) {
     }
   }, [onAction, disabled, itemProps, onClick]);
   const customItemTheme = customItemThemes[variant];
-  const hoverBackground = (0, _ThemeProvider.useColorSchemeVar)(customItemTheme.hover, 'inherit');
-  const focusBackground = (0, _ThemeProvider.useColorSchemeVar)(customItemTheme.focus, 'inherit');
+  const hoverBackground = customItemTheme.hover;
+  const focusBackground = customItemTheme.focus;
   const {
     theme
   } = (0, _ThemeProvider.useTheme)();

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.js

@@ -8,37 +8,17 @@ import Truncate from '../Truncate';
 import styled from 'styled-components';
 import { StyledHeader } from './Header';
 import { StyledDivider } from './Divider';
-import { useColorSchemeVar, useTheme } from '../ThemeProvider';
+import { 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: {
-      light: 'rgba(46, 77, 108, 0.06)',
-      dark: 'rgba(201, 206, 212, 0.12)',
-      dark_dimmed: 'rgba(201, 206, 212, 0.12)'
-    },
-    focus: {
-      light: 'rgba(54, 77, 100, 0.16)',
-      dark: 'rgba(201, 206, 212, 0.24)',
-      dark_dimmed: 'rgba(201, 206, 212, 0.24)'
-    }
+    hover: get('colors.neutral.subtle'),
+    focus: get('colors.neutral.muted')
   },
   danger: {
-    hover: {
-      light: 'rgba(234, 74, 90, 0.08)',
-      dark: 'rgba(248, 81, 73, 0.16)',
-      dark_dimmed: 'rgba(248, 81, 73, 0.16)'
-    },
-    focus: {
-      light: 'rgba(234, 74, 90, 0.14)',
-      dark: 'rgba(248, 81, 73, 0.24)',
-      dark_dimmed: 'rgba(248, 81, 73, 0.24)'
-    }
+    hover: get('colors.danger.subtle'),
+    focus: get('colors.danger.muted')
   }
 };
 /**
@@ -195,8 +175,8 @@ export function Item(itemProps) {
     }
   }, [onAction, disabled, itemProps, onClick]);
   const customItemTheme = customItemThemes[variant];
-  const hoverBackground = useColorSchemeVar(customItemTheme.hover, 'inherit');
-  const focusBackground = useColorSchemeVar(customItemTheme.focus, 'inherit');
+  const hoverBackground = customItemTheme.hover;
+  const focusBackground = customItemTheme.focus;
   const {
     theme
   } = useTheme();

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-202182923742",
+  "version": "0.0.0-202183053931",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -72,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",
@@ -81,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",
@@ -111,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",