@primer/components 31.2.0-rc.5ccefd7d → 31.2.0-rc.5e503f97

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.5ccefd7d",
+  "version": "31.2.0-rc.5e503f97",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -15,7 +15,7 @@
     "start": "concurrently npm:start:*",
     "start:docs": "cd docs && npm run develop",
     "start:storybook": "start-storybook -p 6006",
-    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}'",
+    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0",
     "lint:fix": "npm run lint -- --fix",
     "test": "jest",
     "test:update": "npm run test -- --updateSnapshot",
@@ -43,8 +43,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 +124,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

@@ -1,5 +1,7 @@
 #!/bin/bash
 
+set -e
+
 # Clean up
 rm -rf dist
 rm -rf lib

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>
+  )
+}

package/src/ActionList2/Divider.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import Box from '../Box'
+import {get} from '../constants'
+import {Theme} from '../ThemeProvider'
+
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+export function Divider(): JSX.Element {
+  return (
+    <Box
+      as="li"
+      role="separator"
+      sx={{
+        height: 1,
+        backgroundColor: 'actionListItem.inlineDivider',
+        marginTop: (theme: Theme) => `calc(${get('space.2')(theme)} - 1px)`,
+        marginBottom: 2,
+        listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
+      }}
+      data-component="ActionList.Divider"
+    />
+  )
+}

package/src/ActionList2/Group.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import Box from '../Box'
+import {SxProp} from '../sx'
+import {Header, HeaderProps} from './Header'
+import {ListProps} from './List'
+
+export type GroupProps = HeaderProps &
+  SxProp & {
+    selectionVariant?: ListProps['selectionVariant'] | false
+  }
+
+type ContextProps = Pick<GroupProps, 'selectionVariant'>
+export const GroupContext = React.createContext<ContextProps>({})
+
+export const Group: React.FC<GroupProps> = ({title, variant, auxiliaryText, selectionVariant, sx = {}, ...props}) => {
+  return (
+    <Box
+      as="li"
+      sx={{
+        '&:not(:first-child)': {marginTop: 2},
+        listStyle: 'none', // hide the ::marker inserted by browser's stylesheet
+        ...sx
+      }}
+      {...props}
+    >
+      {title && <Header title={title} variant={variant} auxiliaryText={auxiliaryText} />}
+      <GroupContext.Provider value={{selectionVariant}}>
+        <Box as="ul" sx={{paddingInlineStart: 0}}>
+          {props.children}
+        </Box>
+      </GroupContext.Provider>
+    </Box>
+  )
+}

package/src/ActionList2/Header.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import Box from '../Box'
+import {SxProp} from '../sx'
+import {ListContext} from './List'
+
+/**
+ * Contract for props passed to the `Header` component.
+ */
+export type HeaderProps = {
+  /**
+   * Style variations. Usage is discretionary.
+   *
+   * - `"filled"` - Superimposed on a background, offset from nearby content
+   * - `"subtle"` - Relatively less offset from nearby content
+   */
+  variant?: 'subtle' | 'filled'
+
+  /**
+   * Primary text which names a `Group`.
+   */
+  title?: string
+
+  /**
+   * Secondary text which provides additional information about a `Group`.
+   */
+  auxiliaryText?: string
+} & SxProp
+
+/**
+ * Displays the name and description of a `Group`.
+ */
+export const Header = ({variant = 'subtle', title, auxiliaryText, sx = {}, ...props}: HeaderProps): JSX.Element => {
+  const {variant: listVariant} = React.useContext(ListContext)
+
+  const styles = {
+    paddingY: '6px',
+    paddingX: listVariant === 'full' ? 2 : 3,
+    fontSize: 0,
+    fontWeight: 'bold',
+    color: 'fg.muted',
+    ...(variant === 'filled' && {
+      backgroundColor: 'canvas.subtle',
+      marginX: 0,
+      marginBottom: 2,
+      borderTop: '1px solid',
+      borderBottom: '1px solid',
+      borderColor: 'neutral.muted'
+    }),
+    ...sx
+  }
+
+  return (
+    <Box sx={styles} role="heading" {...props}>
+      {title}
+      {auxiliaryText && <span>{auxiliaryText}</span>}
+    </Box>
+  )
+}