@primer/components 0.0.0-202182821211 → 0.0.0-20218282148

package/lib-esm/ActionList/Item.js

@@ -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'

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/lib-esm/theme-preval.d.ts

@@ -9,24 +9,7 @@ export namespace theme {
     export { radii };
     export { sizes };
     export { space };
-    export namespace colorSchemes {
-        namespace light {
-            export { lightColors as colors };
-            export { lightShadows as shadows };
-        }
-        namespace dark {
-            export { darkColors as colors };
-            export { darkShadows as shadows };
-        }
-        namespace dark_dimmed {
-            export { darkDimmedColors as colors };
-            export { darkDimmedShadows as shadows };
-        }
-        namespace dark_high_contrast {
-            export { darkHighContrastColors as colors };
-            export { darkHighContrastShadows as shadows };
-        }
-    }
+    export { colorSchemes };
 }
 declare namespace animation {
     const easeOutCubic: string;
@@ -39,8 +22,7 @@ declare namespace fonts {
 }
 declare const fontSizes: string[];
 declare namespace fontWeights {
-    const light_1: number;
-    export { light_1 as light };
+    export const light: number;
     const normal_1: number;
     export { normal_1 as normal };
     export const semibold: number;
@@ -60,44 +42,8 @@ declare namespace sizes {
 }
 declare const space: string[];
 /**
- * @type Partial<typeof primitives.colors.light>
+ * @type Record<keyof typeof primitives.colors, Record<'colors' | 'shadows', Partial<typeof primitives.colors.light>>
  */
-declare const lightColors: Partial<typeof primitives.colors.light>;
-/**
- * @type Partial<typeof primitives.colors.light>
- */
-declare const lightShadows: Partial<typeof primitives.colors.light>;
-/**
- * @type Partial<typeof primitives.colors.dark>
- */
-declare const darkColors: Partial<typeof primitives.colors.dark>;
-/**
- * @type Partial<typeof primitives.colors.dark>
- */
-declare const darkShadows: Partial<typeof primitives.colors.dark>;
-/**
- * @type Partial<typeof primitives.colors.dark_dimmed>
- */
-declare const darkDimmedColors: Partial<typeof primitives.colors.dark_dimmed>;
-/**
- * @type Partial<typeof primitives.colors.dark_dimmed>
- */
-declare const darkDimmedShadows: Partial<typeof primitives.colors.dark_dimmed>;
-/**
- * @type Partial<typeof primitives.colors.dark_dimmed>
- */
-declare const darkHighContrastColors: Partial<typeof primitives.colors.dark_dimmed>;
-/**
- * @type Partial<typeof primitives.colors.dark_high_contrast>
- */
-declare const darkHighContrastShadows: Partial<typeof primitives.colors.dark_high_contrast>;
+declare const colorSchemes: Record<keyof typeof primitives.colors, Record<'colors' | 'shadows', Partial<typeof primitives.colors.light>>>;
 import { default as primitives } from "@primer/primitives";
-declare const light_2: {
-    colors: {};
-    shadows: {};
-};
-declare const dark_1: {
-    colors: {};
-    shadows: {};
-};
 export {};