@primer/components 0.0.0-2021828202352 → 0.0.0-202182821115

package/lib/AvatarStack.d.ts

@@ -1,12 +1,8 @@
-/// <reference types="react" />
-import { SystemCommonProps } from './constants';
+import React from 'react';
 import { SxProp } from './sx';
-import { ComponentProps } from './utils/types';
-declare const AvatarStackWrapper: import("styled-components").StyledComponent<"span", any, {
-    count?: number | undefined;
-} & SystemCommonProps & SxProp, never>;
 export declare type AvatarStackProps = {
     alignRight?: boolean;
-} & ComponentProps<typeof AvatarStackWrapper>;
-declare const AvatarStack: ({ children, alignRight, ...rest }: AvatarStackProps) => JSX.Element;
+    children: React.ReactNode;
+} & SxProp;
+declare const AvatarStack: ({ children, alignRight, sx: sxProp }: AvatarStackProps) => JSX.Element;
 export default AvatarStack;

package/lib/AvatarStack.js

@@ -19,12 +19,10 @@ var _sx = _interopRequireDefault(require("./sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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); }
-
 const AvatarStackWrapper = _styledComponents.default.span.withConfig({
   displayName: "AvatarStack__AvatarStackWrapper",
   componentId: "sc-1qgzd2v-0"
-})(["display:flex;position:relative;height:20px;min-width:", ";.pc-AvatarItem{flex-shrink:0;height:20px;width:20px;box-shadow:0 0 0 1px ", ";margin-left:-11px;position:relative;overflow:hidden;transition:margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;&:first-child{margin-left:0;}&:nth-child(n + 4){display:none;}}&.pc-AvatarStack--two{min-width:30px;.pc-AvatarItem{&:nth-child(n + 3){display:none;}}}&.pc-AvatarStack--three-plus{min-width:38px;.pc-AvatarItem{&:nth-child(3){opacity:", "%;margin-left:-17px;}&:nth-child(4){opacity:", "%;margin-left:-17px;}&:nth-child(5){opacity:", "%;margin-left:-17px;}&:nth-child(n + 4){display:block;}&:nth-child(n + 6){opacity:0;visibility:hidden;}}}&.pc-AvatarStack--right{justify-content:flex-end;.pc-AvatarItem{margin-left:0 !important;margin-right:-11px;&:first-child{margin-right:0;}}.pc-AvatarStackBody{flex-direction:row-reverse;&:hover{.pc-AvatarItem{margin-right:", "!important;margin-left:0 !important;&:first-child{margin-right:0 !important;}}}}}&.pc-AvatarStack--three-plus.pc-AvatarStack--right{.pc-AvatarItem{&:nth-child(3){margin-right:-17px;}&:nth-child(4){margin-right:-17px;}&:nth-child(5){margin-right:-17px;}}}.pc-AvatarStackBody:hover{width:auto;.pc-AvatarItem{margin-left:", ";opacity:100%;visibility:visible;box-shadow:0 0 0 4px ", ";&:first-child{margin-left:0;}}}", " ", ";"], props => props.count === 1 ? '20px' : props.count === 2 ? '30px' : '38px', (0, _constants.get)('colors.canvas.default'), 100 - 3 * 15, 100 - 4 * 15, 100 - 5 * 15, (0, _constants.get)('space.1'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.canvas.default'), _constants.COMMON, _sx.default);
+})(["display:flex;position:relative;height:20px;min-width:", ";.pc-AvatarItem{flex-shrink:0;height:20px;width:20px;box-shadow:0 0 0 1px ", ";margin-left:-11px;position:relative;overflow:hidden;transition:margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;&:first-child{margin-left:0;}&:nth-child(n + 4){display:none;}}&.pc-AvatarStack--two{min-width:30px;.pc-AvatarItem{&:nth-child(n + 3){display:none;}}}&.pc-AvatarStack--three-plus{min-width:38px;.pc-AvatarItem{&:nth-child(3){opacity:", "%;margin-left:-17px;}&:nth-child(4){opacity:", "%;margin-left:-17px;}&:nth-child(5){opacity:", "%;margin-left:-17px;}&:nth-child(n + 4){display:block;}&:nth-child(n + 6){opacity:0;visibility:hidden;}}}&.pc-AvatarStack--right{justify-content:flex-end;.pc-AvatarItem{margin-left:0 !important;margin-right:-11px;&:first-child{margin-right:0;}}.pc-AvatarStackBody{flex-direction:row-reverse;&:hover{.pc-AvatarItem{margin-right:", "!important;margin-left:0 !important;&:first-child{margin-right:0 !important;}}}}}&.pc-AvatarStack--three-plus.pc-AvatarStack--right{.pc-AvatarItem{&:nth-child(3){margin-right:-17px;}&:nth-child(4){margin-right:-17px;}&:nth-child(5){margin-right:-17px;}}}.pc-AvatarStackBody:hover{width:auto;.pc-AvatarItem{margin-left:", ";opacity:100%;visibility:visible;box-shadow:0 0 0 4px ", ";&:first-child{margin-left:0;}}}", ";"], props => props.count === 1 ? '20px' : props.count === 2 ? '30px' : '38px', (0, _constants.get)('colors.canvas.default'), 100 - 3 * 15, 100 - 4 * 15, 100 - 5 * 15, (0, _constants.get)('space.1'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.canvas.default'), _sx.default);
 
 const transformChildren = children => {
   return _react.default.Children.map(children, (child, index) => {
@@ -42,7 +40,7 @@ const transformChildren = children => {
 const AvatarStack = ({
   children,
   alignRight,
-  ...rest
+  sx: sxProp
 }) => {
   const count = _react.default.Children.count(children);
 
@@ -51,10 +49,11 @@ const AvatarStack = ({
     'pc-AvatarStack--three-plus': count > 2,
     'pc-AvatarStack--right': alignRight
   });
-  return /*#__PURE__*/_react.default.createElement(AvatarStackWrapper, _extends({
+  return /*#__PURE__*/_react.default.createElement(AvatarStackWrapper, {
     count: count,
-    className: wrapperClassNames
-  }, rest), /*#__PURE__*/_react.default.createElement(_.Box, {
+    className: wrapperClassNames,
+    sx: sxProp
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
     position: "absolute",
     display: "flex",
     width: "38px",

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

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