@primer/components 0.0.0-2021919202426 → 0.0.0-2021920152952

package/lib/utils/testing.d.ts

@@ -54,13 +54,471 @@ export declare function render(component: React.ReactElement, theme?: {
     };
     space: string[];
     colorSchemes: Record<"light" | "light_protanopia" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_protanopia", Record<"colors" | "shadows", Partial<{
-        canvasDefaultTransparent: string;
-        marketingIcon: {
+        auto: {
+            black: string;
+            white: string;
+            gray: string[];
+            blue: string[];
+            green: string[];
+            yellow: string[];
+            orange: string[];
+            red: string[];
+            purple: string[];
+            pink: string[];
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            placeholder: string;
+            disabled: string;
+            inverse: string;
+            link: string;
+            danger: string;
+            success: string;
+            warning: string;
+            white: string;
+        };
+        icon: {
             primary: string;
             secondary: string;
+            tertiary: string;
+            info: string;
+            danger: string;
+            success: string;
+            warning: string;
+        };
+        border: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            overlay: string;
+            inverse: string;
+            info: string;
+            danger: string;
+            success: string;
+            warning: string;
+            default: string;
+            muted: string;
+            subtle: string;
+        };
+        bg: {
+            canvas: string;
+            canvasMobile: string;
+            canvasInverse: string;
+            canvasInset: string;
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            overlay: string;
+            backdrop: string;
+            info: string;
+            infoInverse: string;
+            danger: string;
+            dangerInverse: string;
+            success: string;
+            successInverse: string;
+            warning: string;
+            warningInverse: string;
+        };
+        shadow: {
+            highlight: string;
+            inset: string;
+            small: string;
+            medium: string;
+            large: string;
+            extraLarge: string;
+        };
+        state: {
+            hover: {
+                primaryBg: string;
+                primaryBorder: string;
+                primaryText: string;
+                primaryIcon: string;
+                secondaryBg: string;
+                secondaryBorder: string;
+            };
+            selected: {
+                primaryBg: string;
+                primaryBorder: string;
+                primaryText: string;
+                primaryIcon: string;
+            };
+            focus: {
+                border: string;
+                shadow: string;
+            };
+        };
+        fade: {
+            fg10: string;
+            fg15: string;
+            fg30: string;
+            fg50: string;
+            fg70: string;
+            fg85: string;
+            black10: string;
+            black15: string;
+            black30: string;
+            black50: string;
+            black70: string;
+            black85: string;
+            white10: string;
+            white15: string;
+            white30: string;
+            white50: string;
+            white70: string;
+            white85: string;
+        };
+        alert: {
+            info: {
+                text: string;
+                icon: string;
+                bg: string;
+                border: string;
+            };
+            warn: {
+                text: string;
+                icon: string;
+                bg: string;
+                border: string;
+            };
+            error: {
+                text: string;
+                icon: string;
+                bg: string;
+                border: string;
+            };
+            success: {
+                text: string;
+                icon: string;
+                bg: string;
+                border: string;
+            };
+        };
+        autocomplete: {
+            shadow: string;
+            rowBorder: string;
+        };
+        blankslate: {
+            icon: string;
+        };
+        counter: {
+            text: string;
+            bg: string;
+            primary: {
+                text: string;
+                bg: string;
+            };
+            secondary: {
+                text: string;
+                bg: string;
+            };
+        };
+        box: {
+            blueBorder: string;
+            rowYellowBg: string;
+            rowBlueBg: string;
+            headerBlueBg: string;
+            headerBlueBorder: string;
+            borderInfo: string;
+            bgInfo: string;
+            borderWarning: string;
+            bgWarning: string;
+        };
+        branchName: {
+            text: string;
+            icon: string;
+            bg: string;
+            link: {
+                text: string;
+                icon: string;
+                bg: string;
+            };
+        };
+        markdown: {
+            codeBg: string;
+            frameBorder: string;
+            blockquoteBorder: string;
+            tableBorder: string;
+            tableTrBorder: string;
+        };
+        filterItem: {
+            barBg: string;
+        };
+        hiddenTextExpander: {
+            bg: string;
+            bgHover: string;
+        };
+        dragAndDrop: {
+            border: string;
+        };
+        uploadEnabled: {
+            border: string;
+            borderFocused: string;
+        };
+        previewableCommentForm: {
+            border: string;
+        };
+        verifiedBadge: {
+            text: string;
+            bg: string;
+            border: string;
+        };
+        socialCount: {
+            bg: string;
+        };
+        tooltip: {
+            text: string;
+            bg: string;
+        };
+        filesExplorerIcon: string;
+        hlAuthorBg: string;
+        hlAuthorBorder: string;
+        logoSubdued: string;
+        discussionBorder: string;
+        discussionBgSuccess: string;
+        actionsWorkflowTableStickyBg: string;
+        repoLanguageColorBorder: string;
+        codeSelectionBg: string;
+        highlight: {
+            text: string;
+            bg: string;
+        };
+        blob: {
+            lineHighlightBg: string;
+            lineHighlightBorder: string;
+        };
+        topicTag: {
+            text: string;
+            bg: string;
+            hoverBg: string;
+            activeBg: string;
+            border: string;
+        };
+        footerInvertocat: {
+            octicon: string;
+            octiconHover: string;
+        };
+        dropdown: {
+            shadow: string;
+        };
+        label: {
+            border: string;
+            primary: {
+                text: string;
+                border: string;
+            };
+            secondary: {
+                text: string;
+                border: string;
+            };
+            info: {
+                text: string;
+                border: string;
+            };
+            success: {
+                text: string;
+                border: string;
+            };
+            warning: {
+                text: string;
+                border: string;
+            };
+            danger: {
+                text: string;
+                border: string;
+            };
+            orange: {
+                text: string;
+                border: string;
+            };
+        };
+        input: {
+            bg: string;
+            contrastBg: string;
+            border: string;
+            shadow: string;
+            disabledBorder: string;
+            warningBorder: string;
+            errorBorder: string;
+            tooltip: {
+                success: {
+                    text: string;
+                    bg: string;
+                    border: string;
+                };
+                warning: {
+                    text: string;
+                    bg: string;
+                    border: string;
+                };
+                error: {
+                    text: string;
+                    bg: string;
+                    border: string;
+                };
+            };
+            disabledBg: string;
+        };
+        toast: {
+            text: string;
+            bg: string;
+            border: string;
+            shadow: string;
+            icon: string;
+            iconBg: string;
+            iconBorder: string;
+            success: {
+                text: string;
+                border: string;
+                icon: string;
+                iconBg: string;
+                iconBorder: string;
+            };
+            warning: {
+                text: string;
+                border: string;
+                icon: string;
+                iconBg: string;
+                iconBorder: string;
+            };
+            danger: {
+                text: string;
+                border: string;
+                icon: string;
+                iconBg: string;
+                iconBorder: string;
+            };
+            loading: {
+                text: string;
+                border: string;
+                icon: string;
+                iconBg: string;
+                iconBorder: string;
+            };
+        };
+        timeline: {
+            text: string;
+            badgeSuccessBorder: string;
+            targetBadgeBorder: string;
+            targetBadgeShadow: string;
+            badgeBg: string;
+        };
+        diffstat: {
+            neutralBg: string;
+            neutralBorder: string;
+            deletionBorder: string;
+            additionBorder: string;
+            deletionBg: string;
+            additionBg: string;
+        };
+        diff: {
+            addition: {
+                text: string;
+                bg: string;
+                border: string;
+            };
+            deletion: {
+                text: string;
+                bg: string;
+                border: string;
+            };
+            change: {
+                text: string;
+                bg: string;
+                border: string;
+            };
+        };
+        mergeBox: {
+            successIconBg: string;
+            successIconText: string;
+            successIconBorder: string;
+            successIndicatorBg: string;
+            successIndicatorBorder: string;
+            mergedIconBg: string;
+            mergedIconText: string;
+            mergedIconBorder: string;
+            mergedBoxBorder: string;
+            neutralIconBg: string;
+            neutralIconText: string;
+            neutralIconBorder: string;
+            neutralIndicatorBg: string;
+            neutralIndicatorBorder: string;
+            warningIconBg: string;
+            warningIconText: string;
+            warningIconBorder: string;
+            warningBoxBorder: string;
+            warningMergeHighlight: string;
+            errorIconBg: string;
+            errorIconText: string;
+            errorIconBorder: string;
+            errorIndicatorBg: string;
+            errorIndicatorBorder: string;
+        };
+        underlinenav: {
+            border: string;
+            borderHover: string;
+            borderActive: string;
+            text: string;
+            textHover: string;
+            textActive: string;
+            icon: string;
+            iconHover: string;
+            iconActive: string;
+            counterText: string;
+            counterBg: string;
+        };
+        selectMenu: {
+            borderSecondary: string;
+            shadow: string;
+            backdropBg: string;
+            backdropBorder: string;
+            tapHighlight: string;
+            tapFocusBg: string;
+        };
+        sidenav: {
+            borderActive: string;
+            selectedBg: string;
+        };
+        menu: {
+            headingText: string;
+            borderActive: string;
+            bgActive: string;
+        };
+        project: {
+            cardBg: string;
+            headerBg: string;
+            sidebarBg: string;
+            gradientIn: string;
+            gradientOut: string;
+        };
+        prState: {
+            draft: {
+                text: string;
+                bg: string;
+                border: string;
+            };
+            open: {
+                text: string;
+                bg: string;
+                border: string;
+            };
+            merged: {
+                text: string;
+                bg: string;
+                border: string;
+            };
+            closed: {
+                text: string;
+                bg: string;
+                border: string;
+            };
         };
         diffBlob: {
+            numText: string;
+            numHoverText: string;
             addition: {
+                numHoverText: string;
                 numText: string;
                 fg: string;
                 numBg: string;
@@ -68,6 +526,7 @@ export declare function render(component: React.ReactElement, theme?: {
                 wordBg: string;
             };
             deletion: {
+                numHoverText: string;
                 numText: string;
                 fg: string;
                 numBg: string;
@@ -75,17 +534,45 @@ export declare function render(component: React.ReactElement, theme?: {
                 wordBg: string;
             };
             hunk: {
+                text: string;
                 numBg: string;
+                lineBg: string;
             };
+            emptyBlockBg: string;
+            selectedLineHighlightBg: string;
+            selectedLineHighlightBorder: string;
             expander: {
+                hoverIcon: string;
+                hoverBg: string;
                 icon: string;
             };
+            commentButton: {
+                icon: string;
+                bg: string;
+                gradientBg: string;
+            };
             selectedLineHighlightMixBlendMode: string;
         };
-        diffstat: {
-            deletionBorder: string;
-            additionBorder: string;
-            additionBg: string;
+        globalNav: {
+            logo: string;
+            bg: string;
+            text: string;
+            icon: string;
+            inputBg: string;
+            inputBorder: string;
+            inputIcon: string;
+            inputPlaceholder: string;
+        };
+        introShelf: {
+            gradientLeft: string;
+            gradientRight: string;
+            gradientIn: string;
+            gradientOut: string;
+        };
+        canvasDefaultTransparent: string;
+        marketingIcon: {
+            primary: string;
+            secondary: string;
         };
         searchKeyword: {
             hl: string;
@@ -224,12 +711,6 @@ export declare function render(component: React.ReactElement, theme?: {
                 cyanBright: string;
             };
         };
-        project: {
-            headerBg: string;
-            sidebarBg: string;
-            gradientIn: string;
-            gradientOut: string;
-        };
         mktg: {
             success: string;
             info: string;
@@ -302,14 +783,6 @@ export declare function render(component: React.ReactElement, theme?: {
             stackFadeMore: string;
             childShadow: string;
         };
-        topicTag: {
-            border: string;
-        };
-        selectMenu: {
-            backdropBorder: string;
-            tapHighlight: string;
-            tapFocusBg: string;
-        };
         overlay: {
             shadow: string;
         };
@@ -322,18 +795,6 @@ export declare function render(component: React.ReactElement, theme?: {
             bg: string;
             border: string;
         };
-        sidenav: {
-            selectedBg: string;
-        };
-        menu: {
-            bgActive: string;
-        };
-        input: {
-            disabledBg: string;
-        };
-        timeline: {
-            badgeBg: string;
-        };
         ansi: {
             black: string;
             blackBright: string;
@@ -430,10 +891,6 @@ export declare function render(component: React.ReactElement, theme?: {
                 hoverIcon: string;
             };
         };
-        underlinenav: {
-            icon: string;
-            borderHover: string;
-        };
         fg: {
             default: string;
             muted: string;
@@ -446,17 +903,6 @@ export declare function render(component: React.ReactElement, theme?: {
             inset: string;
             subtle: string;
         };
-        border: {
-            default: string;
-            muted: string;
-            subtle: string;
-        };
-        shadow: {
-            small: string;
-            medium: string;
-            large: string;
-            extraLarge: string;
-        };
         neutral: {
             emphasisPlus: string;
             emphasis: string;
@@ -506,9 +952,6 @@ export declare function render(component: React.ReactElement, theme?: {
             subtle: string;
         };
         primer: {
-            fg: {
-                disabled: string;
-            };
             canvas: {
                 backdrop: string;
                 sticky: string;

package/{lib-esm/utils/types/AriaRole.d.ts → lib/utils/types.d.ts}

@@ -1 +1,14 @@
+/// <reference types="react" />
+/**
+ * Extract a component's props
+ *
+ * Source: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase#wrappingmirroring-a-component
+ *
+ * @example ComponentProps<typeof MyComponent>
+ */
+export declare type ComponentProps<T> = T extends React.ComponentType<infer Props> ? Props extends object ? Props : never : never;
+/**
+ * Contruct a type describing the items in `T`, if `T` is an array.
+ */
+export declare type Flatten<T extends unknown> = T extends (infer U)[] ? U : never;
 export declare type AriaRole = 'alert' | 'alertdialog' | 'application' | 'article' | 'banner' | 'button' | 'cell' | 'checkbox' | 'columnheader' | 'combobox' | 'complementary' | 'contentinfo' | 'definition' | 'dialog' | 'directory' | 'document' | 'feed' | 'figure' | 'form' | 'grid' | 'gridcell' | 'group' | 'heading' | 'img' | 'link' | 'list' | 'listbox' | 'listitem' | 'log' | 'main' | 'marquee' | 'math' | 'menu' | 'menubar' | 'menuitem' | 'menuitemcheckbox ' | 'menuitemradio' | 'navigation' | 'none' | 'note' | 'option' | 'presentation' | 'progressbar' | 'radio' | 'radiogroup' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'scrollbar' | 'search' | 'searchbox' | 'separator' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'table' | 'tablist' | 'tabpanel' | 'term' | 'textbox' | 'timer' | 'toolbar' | 'tooltip' | 'tree' | 'treegrid' | 'treeitem';

package/lib-esm/ActionList/Item.js

@@ -48,9 +48,9 @@ const customItemThemes = {
 const getItemVariant = (variant = 'default', disabled) => {
   if (disabled) {
     return {
-      color: get('colors.primer.fg.disabled'),
-      iconColor: get('colors.primer.fg.disabled'),
-      annotationColor: get('colors.primer.fg.disabled'),
+      color: get('colors.fg.muted'),
+      iconColor: get('colors.fg.muted'),
+      annotationColor: get('colors.fg.muted'),
       hoverCursor: 'default'
     };
   }
@@ -225,7 +225,7 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
     readOnly: true,
     "aria-readonly": "false"
   })) : selected && /*#__PURE__*/React.createElement(CheckIcon, {
-    fill: theme === null || theme === void 0 ? void 0 : theme.colors.fg.default
+    fill: theme === null || theme === void 0 ? void 0 : theme.colors.text.primary
   })), LeadingVisual && /*#__PURE__*/React.createElement(LeadingVisualContainer, {
     variant: variant,
     disabled: disabled

package/lib-esm/ActionList/List.d.ts

@@ -2,9 +2,8 @@ import React, { Key } from 'react';
 import type { AriaRole } from '../utils/types';
 import { Group, GroupProps } from './Group';
 import { ItemProps } from './Item';
-import { Merge } from '../utils/types/Merge';
 declare type RenderItemFn = (props: ItemProps) => React.ReactElement;
-export declare type ItemInput = Merge<React.ComponentPropsWithoutRef<'div'>, ItemProps> | ((Partial<ItemProps> & {
+export declare type ItemInput = (ItemProps & Omit<React.ComponentPropsWithoutRef<'div'>, keyof ItemProps>) | ((Partial<ItemProps> & {
     renderItem: RenderItemFn;
 }) & {
     key?: Key;

package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import { OverlayProps } from '../Overlay';
 import { FocusTrapHookSettings } from '../hooks/useFocusTrap';
 import { FocusZoneHookSettings } from '../hooks/useFocusZone';
-import { PositionSettings } from '../behaviors/anchoredPosition';
 interface AnchoredOverlayPropsWithAnchor {
     /**
      * A custom function component used to render the anchor element.
@@ -53,7 +52,7 @@ interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'
      */
     focusZoneSettings?: Partial<FocusZoneHookSettings>;
 }
-export declare type AnchoredOverlayProps = AnchoredOverlayBaseProps & (AnchoredOverlayPropsWithAnchor | AnchoredOverlayPropsWithoutAnchor) & Partial<Pick<PositionSettings, 'align' | 'side'>>;
+export declare type AnchoredOverlayProps = AnchoredOverlayBaseProps & (AnchoredOverlayPropsWithAnchor | AnchoredOverlayPropsWithoutAnchor);
 /**
  * An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor.
  * The overlay can be opened and navigated using keyboard or mouse.