@primer/components 30.3.0-rc.2010c7d4 → 31.0.0-rc.15aa0a10

package/lib-esm/utils/testing.d.ts

@@ -54,471 +54,13 @@ 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<{
-        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;
+        canvasDefaultTransparent: string;
+        marketingIcon: {
             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;
@@ -526,7 +68,6 @@ export declare function render(component: React.ReactElement, theme?: {
                 wordBg: string;
             };
             deletion: {
-                numHoverText: string;
                 numText: string;
                 fg: string;
                 numBg: string;
@@ -534,45 +75,17 @@ 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;
         };
-        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;
+        diffstat: {
+            deletionBorder: string;
+            additionBorder: string;
+            additionBg: string;
         };
         searchKeyword: {
             hl: string;
@@ -711,6 +224,12 @@ export declare function render(component: React.ReactElement, theme?: {
                 cyanBright: string;
             };
         };
+        project: {
+            headerBg: string;
+            sidebarBg: string;
+            gradientIn: string;
+            gradientOut: string;
+        };
         mktg: {
             success: string;
             info: string;
@@ -783,6 +302,14 @@ 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;
         };
@@ -795,6 +322,18 @@ 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;
@@ -891,6 +430,10 @@ export declare function render(component: React.ReactElement, theme?: {
                 hoverIcon: string;
             };
         };
+        underlinenav: {
+            icon: string;
+            borderHover: string;
+        };
         fg: {
             default: string;
             muted: string;
@@ -903,6 +446,17 @@ 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;
@@ -952,6 +506,9 @@ export declare function render(component: React.ReactElement, theme?: {
             subtle: string;
         };
         primer: {
+            fg: {
+                disabled: string;
+            };
             canvas: {
                 backdrop: string;
                 sticky: string;

package/lib-esm/utils/types/MandateProps.d.ts

@@ -0,0 +1,3 @@
+export declare type MandateProps<T extends unknown, K extends keyof T> = Omit<T, K> & {
+    [MK in K]-?: NonNullable<T[MK]>;
+};

package/lib-esm/utils/types/MandateProps.js

@@ -0,0 +1 @@
+export {};

package/lib-esm/utils/types/index.d.ts

@@ -2,3 +2,4 @@ export * from './AriaRole';
 export * from './ComponentProps';
 export * from './Flatten';
 export * from './Merge';
+export * from './MandateProps';

package/lib-esm/utils/types/index.js

@@ -1,4 +1,5 @@
 export * from './AriaRole';
 export * from './ComponentProps';
 export * from './Flatten';
-export * from './Merge';
+export * from './Merge';
+export * from './MandateProps';

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "30.0.0",
+  "version": "30.2.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -4308,9 +4308,9 @@
       "integrity": "sha512-j5XppNRCvgaMZLPsVvvmp6GSh7P5pq6PUbsfLNBWi2Kz3KYDeoGDWbPr5MjoxFOGUn6Hjnt6qjHPRxahd11vLQ=="
     },
     "@primer/primitives": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.8.1.tgz",
-      "integrity": "sha512-mgr6+EKpn4DixuhLt3drk7QmNQO8M7RYONWovg1nkV7p56jklhDLfZmp1luLUee37eQGAxx3ToStL6gqINFjnQ=="
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-5.1.0.tgz",
+      "integrity": "sha512-pW8DIh6rZV0/R7lxHnVRJ/tdN4kDVSpAtdcCecxKsvtgK5d9haekt3ERpM6i93xKwB5CJYy9ouuC9C0UqWPI0A=="
     },
     "@radix-ui/react-polymorphic": {
       "version": "0.0.14",
@@ -15323,12 +15323,15 @@
       }
     },
     "eslint-plugin-primer-react": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-primer-react/-/eslint-plugin-primer-react-0.5.0.tgz",
-      "integrity": "sha512-WmDoNuQ7D0tU7DEtZg3JmkfVhatX286lMiMpqg/5vBnkXUMZorTFUjCeRvjGLK62iSALVcrRbVvDIRIsfK/W/A==",
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-primer-react/-/eslint-plugin-primer-react-0.6.1.tgz",
+      "integrity": "sha512-sinHj+soe1LItPJZDPqK443viPGfuuT3NLk0dH8s2QMvmO0deL77aMD2/N3gP6iYg5eEOkVsp38eFkUSTaXm4w==",
       "dev": true,
       "requires": {
-        "eslint-traverse": "^1.0.0"
+        "@styled-system/props": "^5.1.5",
+        "eslint-traverse": "^1.0.0",
+        "lodash": "^4.17.21",
+        "styled-system": "^5.1.5"
       }
     },
     "eslint-plugin-react": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "30.3.0-rc.2010c7d4",
+  "version": "31.0.0-rc.15aa0a10",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -44,7 +44,7 @@
   "license": "MIT",
   "dependencies": {
     "@primer/octicons-react": "^13.0.0",
-    "@primer/primitives": "4.8.1",
+    "@primer/primitives": "5.1.0",
     "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",
@@ -113,7 +113,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.5.0",
+    "eslint-plugin-primer-react": "0.6.1",
     "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
     "jest": "27.0.4",

package/src/ActionList/Item.tsx

@@ -432,7 +432,7 @@ export const Item = React.forwardRef((itemProps, ref) => {
               />
             </>
           ) : (
-            selected && <CheckIcon fill={theme?.colors.text.primary} />
+            selected && <CheckIcon fill={theme?.colors.fg.default} />
           )}
         </BaseVisualContainer>
       )}