@primer/components 31.2.0-rc.fbb10090 → 31.2.1-rc.48ecca6e

package/lib/AvatarStack.jsx

@@ -0,0 +1,151 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("./constants");
+const _1 = require(".");
+const sx_1 = __importDefault(require("./sx"));
+const AvatarStackWrapper = styled_components_1.default.span `
+  display: flex;
+  position: relative;
+  height: 20px;
+  min-width: ${props => (props.count === 1 ? '20px' : props.count === 2 ? '30px' : '38px')};
+
+  .pc-AvatarItem {
+    flex-shrink: 0;
+    height: 20px;
+    width: 20px;
+    box-shadow: 0 0 0 1px ${constants_1.get('colors.canvas.default')};
+    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: ${100 - 3 * 15}%;
+        margin-left: -17px;
+      }
+      &:nth-child(4) {
+        opacity: ${100 - 4 * 15}%;
+        margin-left: -17px;
+      }
+      &:nth-child(5) {
+        opacity: ${100 - 5 * 15}%;
+        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: ${constants_1.get('space.1')}!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: ${constants_1.get('space.1')};
+      opacity: 100%;
+      visibility: visible;
+      box-shadow: 0 0 0 4px ${constants_1.get('colors.canvas.default')};
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+
+  ${sx_1.default};
+`;
+const transformChildren = (children) => {
+    return react_1.default.Children.map(children, (child, index) => {
+        if (!react_1.default.isValidElement(child))
+            return child;
+        return react_1.default.cloneElement(child, {
+            className: classnames_1.default(child.props.className, 'pc-AvatarItem'),
+            sx: { zIndex: 10 - index, ...child.props.sx }
+        });
+    });
+};
+const AvatarStack = ({ children, alignRight, sx: sxProp }) => {
+    const count = react_1.default.Children.count(children);
+    const wrapperClassNames = classnames_1.default({
+        'pc-AvatarStack--two': count === 2,
+        'pc-AvatarStack--three-plus': count > 2,
+        'pc-AvatarStack--right': alignRight
+    });
+    return (<AvatarStackWrapper count={count} className={wrapperClassNames} sx={sxProp}>
+      <_1.Box position="absolute" display="flex" width="38px" className="pc-AvatarStackBody">
+        {transformChildren(children)}
+      </_1.Box>
+    </AvatarStackWrapper>);
+};
+exports.default = AvatarStack;

package/lib/BaseStyles.jsx

@@ -0,0 +1,65 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const constants_1 = require("./constants");
+const GlobalStyle = styled_components_1.createGlobalStyle `
+  * { box-sizing: border-box; }
+  body { margin: 0; }
+  table { border-collapse: collapse; }
+  
+  [role="button"]:focus:not(:focus-visible):not(.focus-visible),
+  [role="tabpanel"][tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),
+  button:focus:not(:focus-visible):not(.focus-visible),
+  summary:focus:not(:focus-visible):not(.focus-visible),
+  a:focus:not(:focus-visible):not(.focus-visible) {
+    outline: none;
+    box-shadow: none;
+  }
+
+  [tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),
+  details-dialog:focus:not(:focus-visible):not(.focus-visible) {
+    outline: none;
+  }
+`;
+const Base = styled_components_1.default.div `
+  ${constants_1.TYPOGRAPHY};
+  ${constants_1.COMMON};
+`;
+function BaseStyles(props) {
+    const { children, ...rest } = props;
+    // load polyfill for :focus-visible
+    require('focus-visible');
+    return (<Base {...rest} data-portal-root>
+      <GlobalStyle />
+      {children}
+    </Base>);
+}
+BaseStyles.defaultProps = {
+    color: 'fg.default',
+    fontFamily: 'normal',
+    lineHeight: 'default'
+};
+exports.default = BaseStyles;

package/lib/BorderBox.jsx

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const Box_1 = __importDefault(require("./Box"));
+/**
+ * @deprecated Use the Box component instead (i.e. <BorderBox> → <Box borderWidth='1px' borderStyle='solid' borderColor='border.primary' borderRadius={2}>)
+ */
+const BorderBox = styled_components_1.default(Box_1.default) ``;
+BorderBox.defaultProps = {
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'border.default',
+    borderRadius: 2
+};
+exports.default = BorderBox;

package/lib/Box.jsx

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const styled_system_1 = require("styled-system");
+const sx_1 = __importDefault(require("./sx"));
+const Box = styled_components_1.default.div(styled_system_1.space, styled_system_1.color, styled_system_1.typography, styled_system_1.layout, styled_system_1.flexbox, styled_system_1.grid, styled_system_1.background, styled_system_1.border, styled_system_1.position, styled_system_1.shadow, sx_1.default);
+exports.default = Box;

package/lib/BranchName.jsx

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+const BranchName = styled_components_1.default.a `
+  display: inline-block;
+  padding: 2px 6px;
+  font-size: ${constants_1.get('fontSizes.0')};
+  font-family: ${constants_1.get('fonts.mono')};
+  color: ${constants_1.get('colors.fg.muted')};
+  background-color: ${constants_1.get('colors.accent.subtle')};
+  border-radius: ${constants_1.get('radii.2')};
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+exports.default = BranchName;

package/lib/Breadcrumbs.jsx

@@ -0,0 +1,74 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Breadcrumb = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Box_1 = __importDefault(require("./Box"));
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+const SELECTED_CLASS = 'selected';
+const Wrapper = styled_components_1.default.li `
+  display: inline-block;
+  white-space: nowrap;
+  list-style: none;
+  &::after {
+    padding-right: 0.5em;
+    padding-left: 0.5em;
+    color: ${constants_1.get('colors.fg.muted')};
+    font-size: ${constants_1.get('fontSizes.1')};
+    content: '/';
+  }
+  &:first-child {
+    margin-left: 0;
+  }
+  &:last-child {
+    &::after {
+      content: none;
+    }
+  }
+`;
+const BreadcrumbsBase = styled_components_1.default.nav `
+  display: flex;
+  justify-content: space-between;
+  ${constants_1.COMMON};
+  ${constants_1.FLEX};
+  ${sx_1.default};
+`;
+function Breadcrumbs({ className, children, theme, ...rest }) {
+    const wrappedChildren = react_1.default.Children.map(children, child => <Wrapper theme={theme}>{child}</Wrapper>);
+    return (<BreadcrumbsBase className={className} aria-label="Breadcrumbs" theme={theme} {...rest}>
+      <Box_1.default as="ol" my={0} pl={0}>
+        {wrappedChildren}
+      </Box_1.default>
+    </BreadcrumbsBase>);
+}
+const BreadcrumbsItem = styled_components_1.default.a.attrs(props => ({
+    activeClassName: typeof props.to === 'string' ? 'selected' : '',
+    className: classnames_1.default(props.selected && SELECTED_CLASS, props.className),
+    'aria-current': props.selected ? 'page' : null
+})) `
+  color: ${constants_1.get('colors.accent.fg')};
+  display: inline-block;
+  font-size: ${constants_1.get('fontSizes.1')};
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+  &.selected {
+    color: ${constants_1.get('colors.fg.default')};
+    pointer-events: none;
+  }
+  ${constants_1.COMMON}
+  ${sx_1.default};
+`;
+Breadcrumbs.displayName = 'Breadcrumbs';
+BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
+exports.default = Object.assign(Breadcrumbs, { Item: BreadcrumbsItem });
+/**
+ * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
+ */
+exports.Breadcrumb = Object.assign(Breadcrumbs, { Item: BreadcrumbsItem });

package/lib/Button/Button.d.ts

@@ -16,6 +16,8 @@ declare const Button: import("styled-components").StyledComponent<"button", any,
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;
+    variant?: "small" | "medium" | "large" | undefined;
+    role?: import("react").AriaRole | undefined;
     type?: "button" | "reset" | "submit" | undefined;
     name?: string | undefined;
     key?: import("react").Key | null | undefined;
@@ -25,17 +27,16 @@ declare const Button: import("styled-components").StyledComponent<"button", any,
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
+    draggable?: (boolean | "false" | "true") | undefined;
     id?: string | undefined;
     lang?: string | undefined;
     placeholder?: string | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
+    spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
     radioGroup?: string | undefined;
-    role?: import("react").AriaRole | undefined;
     about?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
@@ -58,47 +59,47 @@ declare const Button: import("styled-components").StyledComponent<"button", any,
     inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
-    'aria-atomic'?: boolean | "true" | "false" | undefined;
-    'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
-    'aria-busy'?: boolean | "true" | "false" | undefined;
-    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-atomic'?: boolean | "false" | "true" | undefined;
+    'aria-autocomplete'?: "none" | "both" | "inline" | "list" | undefined;
+    'aria-busy'?: boolean | "false" | "true" | undefined;
+    'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-details'?: string | undefined;
-    'aria-disabled'?: boolean | "true" | "false" | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-disabled'?: boolean | "false" | "true" | undefined;
+    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
-    'aria-expanded'?: boolean | "true" | "false" | undefined;
+    'aria-expanded'?: boolean | "false" | "true" | undefined;
     'aria-flowto'?: string | undefined;
-    'aria-grabbed'?: boolean | "true" | "false" | undefined;
-    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "tree" | "true" | "false" | undefined;
-    'aria-hidden'?: boolean | "true" | "false" | undefined;
-    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    'aria-grabbed'?: boolean | "false" | "true" | undefined;
+    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "listbox" | "false" | "true" | "tree" | undefined;
+    'aria-hidden'?: boolean | "false" | "true" | undefined;
+    'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
     'aria-label'?: string | undefined;
     'aria-labelledby'?: string | undefined;
     'aria-level'?: number | undefined;
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
-    'aria-modal'?: boolean | "true" | "false" | undefined;
-    'aria-multiline'?: boolean | "true" | "false" | undefined;
-    'aria-multiselectable'?: boolean | "true" | "false" | undefined;
+    'aria-modal'?: boolean | "false" | "true" | undefined;
+    'aria-multiline'?: boolean | "false" | "true" | undefined;
+    'aria-multiselectable'?: boolean | "false" | "true" | undefined;
     'aria-orientation'?: "horizontal" | "vertical" | undefined;
     'aria-owns'?: string | undefined;
     'aria-placeholder'?: string | undefined;
     'aria-posinset'?: number | undefined;
-    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
-    'aria-readonly'?: boolean | "true" | "false" | undefined;
+    'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
+    'aria-readonly'?: boolean | "false" | "true" | undefined;
     'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    'aria-required'?: boolean | "true" | "false" | undefined;
+    'aria-required'?: boolean | "false" | "true" | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
     'aria-rowindex'?: number | undefined;
     'aria-rowspan'?: number | undefined;
-    'aria-selected'?: boolean | "true" | "false" | undefined;
+    'aria-selected'?: boolean | "false" | "true" | undefined;
     'aria-setsize'?: number | undefined;
     'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
     'aria-valuemax'?: number | undefined;
@@ -269,14 +270,13 @@ declare const Button: import("styled-components").StyledComponent<"button", any,
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     as?: string | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
-    autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
+    autoFocus?: boolean | undefined;
     formAction?: string | undefined;
     formEncType?: string | undefined;
     formMethod?: string | undefined;
     formNoValidate?: boolean | undefined;
     formTarget?: string | undefined;
-    variant?: "small" | "medium" | "large" | undefined;
 } & {
     theme?: any;
 } & import("styled-system").FontSizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../constants").SystemCommonProps & import("../constants").SystemLayoutProps & SxProp, never>;

package/lib/Button/Button.jsx

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("../constants");
+const sx_1 = __importDefault(require("../sx"));
+const ButtonBase_1 = __importStar(require("./ButtonBase"));
+const Button = styled_components_1.default(ButtonBase_1.default) `
+  color: ${constants_1.get('colors.btn.text')};
+  background-color: ${constants_1.get('colors.btn.bg')};
+  border: 1px solid ${constants_1.get('colors.btn.border')};
+  box-shadow: ${constants_1.get('shadows.btn.shadow')}, ${constants_1.get('shadows.btn.insetShadow')}};
+
+  &:hover {
+    background-color: ${constants_1.get('colors.btn.hoverBg')};
+    border-color: ${constants_1.get('colors.btn.hoverBorder')};
+  }
+
+  // focus must come before :active so that the active box shadow overrides
+  &:focus {
+    border-color: ${constants_1.get('colors.btn.focusBorder')};
+    box-shadow: ${constants_1.get('shadows.btn.focusShadow')};
+  }
+
+  &:active {
+    background-color: ${constants_1.get('colors.btn.selectedBg')};
+    box-shadow: ${constants_1.get('shadows.btn.shadowActive')};
+  }
+
+  &:disabled {
+    color: ${constants_1.get('colors.primer.fg.disabled')};
+    background-color: ${constants_1.get('colors.btn.bg')};
+    border-color: ${constants_1.get('colors.btn.border')};
+  }
+
+  ${ButtonBase_1.buttonSystemProps};
+  ${sx_1.default};
+`;
+exports.default = Button;

package/lib/Button/ButtonBase.jsx

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonSystemProps = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const styled_system_1 = require("styled-system");
+const constants_1 = require("../constants");
+const ButtonStyles_1 = __importDefault(require("./ButtonStyles"));
+exports.buttonSystemProps = styled_system_1.compose(styled_system_1.fontSize, constants_1.COMMON, constants_1.LAYOUT);
+const variants = styled_system_1.variant({
+    variants: {
+        small: {
+            p: '4px 12px',
+            fontSize: 0
+        },
+        medium: {
+            fontSize: 1
+        },
+        large: {
+            fontSize: 2,
+            p: '10px 20px'
+        }
+    }
+});
+const ButtonBase = styled_components_1.default.button.attrs(({ disabled, onClick }) => ({
+    onClick: disabled ? undefined : onClick
+})) `
+  ${ButtonStyles_1.default}
+  ${variants}
+`;
+ButtonBase.defaultProps = {
+    variant: 'medium'
+};
+exports.default = ButtonBase;