@primer/components 31.2.0-rc.c7f73427 → 31.2.0-rc.decfca99

package/lib-esm/sx.d.ts

@@ -1,6 +1,7 @@
 import { SystemCssProperties, SystemStyleObject } from '@styled-system/css';
 import { ThemeColorPaths, ThemeShadowPaths } from './theme';
 import { ColorProps, ShadowProps } from 'styled-system';
+import merge from 'deepmerge';
 export declare type BetterCssProperties = {
     [K in keyof SystemCssProperties]: K extends keyof ColorProps ? ThemeColorPaths | SystemCssProperties[K] : K extends keyof ShadowProps ? ThemeShadowPaths | SystemCssProperties[K] : SystemCssProperties[K];
 };
@@ -10,3 +11,4 @@ export interface SxProp {
 }
 declare const sx: (props: SxProp) => import("@styled-system/css").CssFunctionReturnType;
 export default sx;
+export { merge };

package/lib-esm/sx.js

@@ -1,5 +1,7 @@
 import css from '@styled-system/css';
+import merge from 'deepmerge';
 
 const sx = props => css(props.sx);
 
-export default sx;
+export default sx;
+export { merge };

package/lib-esm/theme-preval.js

@@ -1,5 +1,6 @@
 // this file was prevaled
 // This file needs to be a JavaScript file using CommonJS to be compatiable with preval
+// Cache bust: 2021-11-04 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
 module.exports = {
   "theme": {
     "animation": {
@@ -389,6 +390,19 @@ module.exports = {
             "icon": "#6e7781",
             "borderHover": "rgba(175,184,193,0.2)"
           },
+          "actionListItem": {
+            "inlineDivider": "rgba(208,215,222,0.48)",
+            "default": {
+              "hoverBg": "rgba(208,215,222,0.32)",
+              "activeBg": "rgba(208,215,222,0.48)",
+              "selectedBg": "rgba(208,215,222,0.24)"
+            },
+            "danger": {
+              "hoverBg": "rgba(255,235,233,0.64)",
+              "activeBg": "#FFEBE9",
+              "hoverText": "#cf222e"
+            }
+          },
           "fg": {
             "default": "#24292f",
             "muted": "#57606a",
@@ -515,7 +529,7 @@ module.exports = {
           }
         }
       },
-      "light_protanopia": {
+      "light_colorblind": {
         "colors": {
           "canvasDefaultTransparent": "rgba(255,255,255,0)",
           "marketingIcon": {
@@ -872,6 +886,19 @@ module.exports = {
             "icon": "#6e7781",
             "borderHover": "rgba(175,184,193,0.2)"
           },
+          "actionListItem": {
+            "inlineDivider": "rgba(208,215,222,0.48)",
+            "default": {
+              "hoverBg": "rgba(208,215,222,0.32)",
+              "activeBg": "rgba(208,215,222,0.48)",
+              "selectedBg": "rgba(208,215,222,0.24)"
+            },
+            "danger": {
+              "hoverBg": "rgba(254,254,72,0.64)",
+              "activeBg": "#fefe48",
+              "hoverText": "#ac5e00"
+            }
+          },
           "fg": {
             "default": "#24292f",
             "muted": "#57606a",
@@ -1355,6 +1382,19 @@ module.exports = {
             "icon": "#484f58",
             "borderHover": "rgba(110,118,129,0.4)"
           },
+          "actionListItem": {
+            "inlineDivider": "rgba(48,54,61,0.48)",
+            "default": {
+              "hoverBg": "rgba(177,186,196,0.12)",
+              "activeBg": "rgba(177,186,196,0.2)",
+              "selectedBg": "rgba(177,186,196,0.08)"
+            },
+            "danger": {
+              "hoverBg": "rgba(248,81,73,0.16)",
+              "activeBg": "rgba(248,81,73,0.24)",
+              "hoverText": "#ff7b72"
+            }
+          },
           "fg": {
             "default": "#c9d1d9",
             "muted": "#8b949e",
@@ -1841,6 +1881,19 @@ module.exports = {
             "icon": "#545d68",
             "borderHover": "rgba(99,110,123,0.4)"
           },
+          "actionListItem": {
+            "inlineDivider": "rgba(68,76,86,0.48)",
+            "default": {
+              "hoverBg": "rgba(144,157,171,0.12)",
+              "activeBg": "rgba(144,157,171,0.2)",
+              "selectedBg": "rgba(144,157,171,0.08)"
+            },
+            "danger": {
+              "hoverBg": "rgba(229,83,75,0.16)",
+              "activeBg": "rgba(229,83,75,0.24)",
+              "hoverText": "#f47067"
+            }
+          },
           "fg": {
             "default": "#adbac7",
             "muted": "#768390",
@@ -2327,6 +2380,19 @@ module.exports = {
             "icon": "#f0f3f6",
             "borderHover": "#bdc4cc"
           },
+          "actionListItem": {
+            "inlineDivider": "#7a828e",
+            "default": {
+              "hoverBg": "rgba(217,222,227,0.12)",
+              "activeBg": "rgba(217,222,227,0.24)",
+              "selectedBg": "rgba(217,222,227,0.08)"
+            },
+            "danger": {
+              "hoverBg": "#ff6a69",
+              "activeBg": "#ff4445",
+              "hoverText": "#0a0c10"
+            }
+          },
           "fg": {
             "default": "#f0f3f6",
             "muted": "#f0f3f6",
@@ -2456,7 +2522,7 @@ module.exports = {
           }
         }
       },
-      "dark_protanopia": {
+      "dark_colorblind": {
         "colors": {
           "canvasDefaultTransparent": "rgba(13,17,23,0)",
           "marketingIcon": {
@@ -2813,6 +2879,19 @@ module.exports = {
             "icon": "#484f58",
             "borderHover": "rgba(110,118,129,0.4)"
           },
+          "actionListItem": {
+            "inlineDivider": "rgba(48,54,61,0.48)",
+            "default": {
+              "hoverBg": "rgba(177,186,196,0.12)",
+              "activeBg": "rgba(177,186,196,0.2)",
+              "selectedBg": "rgba(177,186,196,0.08)"
+            },
+            "danger": {
+              "hoverBg": "rgba(195,128,0,0.16)",
+              "activeBg": "rgba(195,128,0,0.24)",
+              "hoverText": "#d69a00"
+            }
+          },
           "fg": {
             "default": "#c9d1d9",
             "muted": "#8b949e",

package/lib-esm/utils/create-slots.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+/** createSlots is a factory that can create a
+ *  typesafe Slots + Slot pair to use in a component definition
+ *  For example: ActionList.Item uses createSlots to get a Slots wrapper
+ *  + Slot component that is used by LeadingVisual, Description
+ */
+declare const createSlots: <SlotNames extends string>(slotNames: SlotNames[]) => {
+    Slots: React.FC<{
+        context?: Record<string, unknown> | undefined;
+        children: (slots: { [key in SlotNames]?: React.ReactNode; }) => React.ReactNode;
+    }>;
+    Slot: React.FC<{
+        name: SlotNames;
+        children: React.ReactNode;
+    }>;
+};
+export default createSlots;

package/lib-esm/utils/create-slots.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { useForceUpdate } from './use-force-update';
+/** createSlots is a factory that can create a
+ *  typesafe Slots + Slot pair to use in a component definition
+ *  For example: ActionList.Item uses createSlots to get a Slots wrapper
+ *  + Slot component that is used by LeadingVisual, Description
+ */
+
+const createSlots = slotNames => {
+  const SlotsContext = /*#__PURE__*/React.createContext({
+    registerSlot: () => null,
+    unregisterSlot: () => null,
+    context: {}
+  });
+  /** Slots uses a Double render strategy inspired by [reach-ui/descendants](https://github.com/reach/reach-ui/tree/develop/packages/descendants)
+   *  Slot registers themself with the Slots parent.
+   *  When all the children have mounted = registered themselves in slot,
+   *  we re-render the parent component to render with slots
+   */
+
+  const Slots = ({
+    context = {},
+    children
+  }) => {
+    // initialise slots
+    const slotsDefinition = {};
+    slotNames.map(name => slotsDefinition[name] = null);
+    const slotsRef = React.useRef(slotsDefinition);
+    const rerenderWithSlots = useForceUpdate();
+    const [isMounted, setIsMounted] = React.useState(false); // fires after all the effects in children
+
+    React.useEffect(() => {
+      rerenderWithSlots();
+      setIsMounted(true);
+    }, [rerenderWithSlots]);
+    const registerSlot = React.useCallback((name, contents) => {
+      slotsRef.current[name] = contents; // don't render until the component mounts = all slots are registered
+
+      if (isMounted) rerenderWithSlots();
+    }, [isMounted, rerenderWithSlots]); // Slot can be removed from the tree as well,
+    // we need to unregister them from the slot
+
+    const unregisterSlot = React.useCallback(name => {
+      slotsRef.current[name] = null;
+      rerenderWithSlots();
+    }, [rerenderWithSlots]);
+    /**
+     * Slots uses a render prop API so abstract the
+     * implementation detail of using a context provider.
+     */
+
+    const slots = slotsRef.current;
+    return /*#__PURE__*/React.createElement(SlotsContext.Provider, {
+      value: {
+        registerSlot,
+        unregisterSlot,
+        context
+      }
+    }, children(slots));
+  };
+
+  const Slot = ({
+    name,
+    children
+  }) => {
+    const {
+      registerSlot,
+      unregisterSlot,
+      context
+    } = React.useContext(SlotsContext);
+    React.useEffect(() => {
+      registerSlot(name, typeof children === 'function' ? children(context) : children);
+      return () => unregisterSlot(name);
+    }, [name, children, registerSlot, unregisterSlot, context]);
+    return null;
+  };
+
+  return {
+    Slots,
+    Slot
+  };
+};
+
+export default createSlots;

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

@@ -53,7 +53,7 @@ export declare function render(component: React.ReactElement, theme?: {
         xlarge: string;
     };
     space: string[];
-    colorSchemes: Record<"light" | "light_protanopia" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_protanopia", Record<"colors" | "shadows", Partial<{
+    colorSchemes: Record<"light" | "light_colorblind" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_colorblind", Record<"colors" | "shadows", Partial<{
         canvasDefaultTransparent: string;
         marketingIcon: {
             primary: string;
@@ -434,6 +434,19 @@ export declare function render(component: React.ReactElement, theme?: {
             icon: string;
             borderHover: string;
         };
+        actionListItem: {
+            inlineDivider: string;
+            default: {
+                hoverBg: string;
+                activeBg: string;
+                selectedBg: string;
+            };
+            danger: {
+                hoverBg: string;
+                activeBg: string;
+                hoverText: string;
+            };
+        };
         fg: {
             default: string;
             muted: string;

package/lib-esm/utils/use-force-update.d.ts

@@ -0,0 +1 @@
+export declare const useForceUpdate: () => () => void;

package/lib-esm/utils/use-force-update.js

@@ -0,0 +1,6 @@
+// Inspired from reach-ui: https://github.com/reach/reach-ui/blob/develop/packages/utils/src/use-force-update.ts
+import React from 'react';
+export const useForceUpdate = () => {
+  const [, rerender] = React.useState({});
+  return React.useCallback(() => rerender({}), []);
+};

package/package-lock.json

@@ -9,8 +9,8 @@
       "version": "31.1.0",
       "license": "MIT",
       "dependencies": {
-        "@primer/octicons-react": "^13.0.0",
-        "@primer/primitives": "5.1.0",
+        "@primer/octicons-react": "^16.1.0",
+        "@primer/primitives": "6.1.0",
         "@radix-ui/react-polymorphic": "0.0.14",
         "@react-aria/ssr": "3.1.0",
         "@styled-system/css": "5.1.5",
@@ -90,6 +90,8 @@
         "lodash.isobject": "3.0.2",
         "prettier": "2.3.2",
         "react": "17.0.2",
+        "react-dnd": "14.0.4",
+        "react-dnd-html5-backend": "14.0.2",
         "react-dom": "17.0.2",
         "react-test-renderer": "17.0.2",
         "rollup": "2.56.3",
@@ -7548,9 +7550,9 @@
       }
     },
     "node_modules/@primer/octicons-react": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-13.0.0.tgz",
-      "integrity": "sha512-j5XppNRCvgaMZLPsVvvmp6GSh7P5pq6PUbsfLNBWi2Kz3KYDeoGDWbPr5MjoxFOGUn6Hjnt6qjHPRxahd11vLQ==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz",
+      "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==",
       "engines": {
         "node": ">=8"
       },
@@ -7559,9 +7561,9 @@
       }
     },
     "node_modules/@primer/primitives": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-5.1.0.tgz",
-      "integrity": "sha512-pW8DIh6rZV0/R7lxHnVRJ/tdN4kDVSpAtdcCecxKsvtgK5d9haekt3ERpM6i93xKwB5CJYy9ouuC9C0UqWPI0A=="
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-6.1.0.tgz",
+      "integrity": "sha512-gwSVf5rVf2CMa/bU3/47LZosDHNfODMRJfKi7uJOqHWABVNl6Lf+thDM7Jb8tS9sEQQsUnrLDiGNjCScS81IXA=="
     },
     "node_modules/@radix-ui/react-polymorphic": {
       "version": "0.0.14",
@@ -7598,6 +7600,24 @@
         "react": "^16.8.0 || ^17.0.0-rc.1"
       }
     },
+    "node_modules/@react-dnd/asap": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz",
+      "integrity": "sha512-0XhqJSc6pPoNnf8DhdsPHtUhRzZALVzYMTzRwV4VI6DJNJ/5xxfL9OQUwb8IH5/2x7lSf7nAZrnzUD+16VyOVQ==",
+      "dev": true
+    },
+    "node_modules/@react-dnd/invariant": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-2.0.0.tgz",
+      "integrity": "sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw==",
+      "dev": true
+    },
+    "node_modules/@react-dnd/shallowequal": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz",
+      "integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==",
+      "dev": true
+    },
     "node_modules/@rollup/plugin-commonjs": {
       "version": "19.0.2",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-19.0.2.tgz",
@@ -17234,6 +17254,17 @@
       "integrity": "sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=",
       "dev": true
     },
+    "node_modules/dnd-core": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.1.tgz",
+      "integrity": "sha512-+PVS2VPTgKFPYWo3vAFEA8WPbTf7/xo43TifH9G8S1KqnrQu0o77A3unrF5yOugy4mIz7K5wAVFHUcha7wsz6A==",
+      "dev": true,
+      "dependencies": {
+        "@react-dnd/asap": "^4.0.0",
+        "@react-dnd/invariant": "^2.0.0",
+        "redux": "^4.1.1"
+      }
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -31528,6 +31559,45 @@
         "node": ">= 8"
       }
     },
+    "node_modules/react-dnd": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.4.tgz",
+      "integrity": "sha512-AFJJXzUIWp5WAhgvI85ESkDCawM0lhoVvfo/lrseLXwFdH3kEO3v8I2C81QPqBW2UEyJBIPStOhPMGYGFtq/bg==",
+      "dev": true,
+      "dependencies": {
+        "@react-dnd/invariant": "^2.0.0",
+        "@react-dnd/shallowequal": "^2.0.0",
+        "dnd-core": "14.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "peerDependencies": {
+        "@types/hoist-non-react-statics": ">= 3.3.1",
+        "@types/node": ">= 12",
+        "@types/react": ">= 16",
+        "react": ">= 16.14"
+      },
+      "peerDependenciesMeta": {
+        "@types/hoist-non-react-statics": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-dnd-html5-backend": {
+      "version": "14.0.2",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.0.2.tgz",
+      "integrity": "sha512-QgN6rYrOm4UUj6tIvN8ovImu6uP48xBXF2rzVsp6tvj6d5XQ7OjHI4SJ/ZgGobOneRAU3WCX4f8DGCYx0tuhlw==",
+      "dev": true,
+      "dependencies": {
+        "dnd-core": "14.0.1"
+      }
+    },
     "node_modules/react-docgen": {
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-5.4.0.tgz",
@@ -31956,6 +32026,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz",
+      "integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
     "node_modules/refractor": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.5.0.tgz",
@@ -43266,15 +43345,15 @@
       "dev": true
     },
     "@primer/octicons-react": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-13.0.0.tgz",
-      "integrity": "sha512-j5XppNRCvgaMZLPsVvvmp6GSh7P5pq6PUbsfLNBWi2Kz3KYDeoGDWbPr5MjoxFOGUn6Hjnt6qjHPRxahd11vLQ==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz",
+      "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==",
       "requires": {}
     },
     "@primer/primitives": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-5.1.0.tgz",
-      "integrity": "sha512-pW8DIh6rZV0/R7lxHnVRJ/tdN4kDVSpAtdcCecxKsvtgK5d9haekt3ERpM6i93xKwB5CJYy9ouuC9C0UqWPI0A=="
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-6.1.0.tgz",
+      "integrity": "sha512-gwSVf5rVf2CMa/bU3/47LZosDHNfODMRJfKi7uJOqHWABVNl6Lf+thDM7Jb8tS9sEQQsUnrLDiGNjCScS81IXA=="
     },
     "@radix-ui/react-polymorphic": {
       "version": "0.0.14",
@@ -43302,6 +43381,24 @@
         "@babel/runtime": "^7.6.2"
       }
     },
+    "@react-dnd/asap": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz",
+      "integrity": "sha512-0XhqJSc6pPoNnf8DhdsPHtUhRzZALVzYMTzRwV4VI6DJNJ/5xxfL9OQUwb8IH5/2x7lSf7nAZrnzUD+16VyOVQ==",
+      "dev": true
+    },
+    "@react-dnd/invariant": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-2.0.0.tgz",
+      "integrity": "sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw==",
+      "dev": true
+    },
+    "@react-dnd/shallowequal": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz",
+      "integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==",
+      "dev": true
+    },
     "@rollup/plugin-commonjs": {
       "version": "19.0.2",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-19.0.2.tgz",
@@ -50661,6 +50758,17 @@
       "integrity": "sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=",
       "dev": true
     },
+    "dnd-core": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.1.tgz",
+      "integrity": "sha512-+PVS2VPTgKFPYWo3vAFEA8WPbTf7/xo43TifH9G8S1KqnrQu0o77A3unrF5yOugy4mIz7K5wAVFHUcha7wsz6A==",
+      "dev": true,
+      "requires": {
+        "@react-dnd/asap": "^4.0.0",
+        "@react-dnd/invariant": "^2.0.0",
+        "redux": "^4.1.1"
+      }
+    },
     "doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -61611,6 +61719,28 @@
         }
       }
     },
+    "react-dnd": {
+      "version": "14.0.4",
+      "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.4.tgz",
+      "integrity": "sha512-AFJJXzUIWp5WAhgvI85ESkDCawM0lhoVvfo/lrseLXwFdH3kEO3v8I2C81QPqBW2UEyJBIPStOhPMGYGFtq/bg==",
+      "dev": true,
+      "requires": {
+        "@react-dnd/invariant": "^2.0.0",
+        "@react-dnd/shallowequal": "^2.0.0",
+        "dnd-core": "14.0.1",
+        "fast-deep-equal": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2"
+      }
+    },
+    "react-dnd-html5-backend": {
+      "version": "14.0.2",
+      "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.0.2.tgz",
+      "integrity": "sha512-QgN6rYrOm4UUj6tIvN8ovImu6uP48xBXF2rzVsp6tvj6d5XQ7OjHI4SJ/ZgGobOneRAU3WCX4f8DGCYx0tuhlw==",
+      "dev": true,
+      "requires": {
+        "dnd-core": "14.0.1"
+      }
+    },
     "react-docgen": {
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-5.4.0.tgz",
@@ -61956,6 +62086,15 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "redux": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz",
+      "integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
     "refractor": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.5.0.tgz",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "31.2.0-rc.c7f73427",
+  "version": "31.2.0-rc.decfca99",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -20,7 +20,8 @@
     "test": "jest",
     "test:update": "npm run test -- --updateSnapshot",
     "release": "npm run build && changeset publish",
-    "size": "size-limit"
+    "size": "size-limit",
+    "typecheck": "npx tsc --project tsconfig.json"
   },
   "repository": "primer/react",
   "keywords": [
@@ -43,8 +44,8 @@
   "author": "GitHub, Inc.",
   "license": "MIT",
   "dependencies": {
-    "@primer/octicons-react": "^13.0.0",
-    "@primer/primitives": "5.1.0",
+    "@primer/octicons-react": "^16.1.0",
+    "@primer/primitives": "6.1.0",
     "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",
@@ -124,6 +125,8 @@
     "lodash.isobject": "3.0.2",
     "prettier": "2.3.2",
     "react": "17.0.2",
+    "react-dnd": "14.0.4",
+    "react-dnd-html5-backend": "14.0.2",
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
     "rollup": "2.56.3",

package/script/build

@@ -14,7 +14,7 @@ npx cross-env NODE_ENV=production rollup -c
 npx cross-env BABEL_MODULE=commonjs babel src --out-dir lib --extensions ".js,.ts,.jsx,.tsx"
 npx babel src --out-dir lib-esm --extensions ".js,.ts,.jsx,.tsx"
 
-# Type check
+# Build type declarations
 npx tsc --project tsconfig.build.json
 
 # Copy type declarations

package/src/ActionList2/Description.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import Box from '../Box'
+import {SxProp, merge} from '../sx'
+import Truncate from '../Truncate'
+import {Slot, ItemContext} from './Item'
+
+export type DescriptionProps = {
+  /**
+   * Secondary text style variations.
+   *
+   * - `"inline"` - Secondary text is positioned beside primary text.
+   * - `"block"` - Secondary text is positioned below primary text.
+   */
+  variant?: 'inline' | 'block'
+} & SxProp
+
+export const Description: React.FC<DescriptionProps> = ({variant = 'inline', sx = {}, ...props}) => {
+  const styles = {
+    color: 'fg.muted',
+    fontSize: 0,
+    lineHeight: '16px',
+    flexGrow: 1,
+    flexBasis: 0,
+    minWidth: 0,
+    marginLeft: variant === 'block' ? 0 : 2
+  }
+
+  return (
+    <Slot name={variant === 'block' ? 'BlockDescription' : 'InlineDescription'}>
+      {({blockDescriptionId, inlineDescriptionId}: ItemContext) =>
+        variant === 'block' ? (
+          <Box as="span" sx={merge(styles, sx as SxProp)} id={blockDescriptionId}>
+            {props.children}
+          </Box>
+        ) : (
+          <Truncate
+            id={inlineDescriptionId}
+            sx={merge(styles, sx as SxProp)}
+            title={props.children as string}
+            inline={true}
+            maxWidth="100%"
+          >
+            {props.children}
+          </Truncate>
+        )
+      }
+    </Slot>
+  )
+}