@primer/components 33.0.0-rc.b495ba4a → 33.1.0-rc.6856bcf5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "33.0.0-rc.b495ba4a",
+  "version": "33.1.0-rc.6856bcf5",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -65,7 +65,7 @@
     "@babel/cli": "7.14.5",
     "@babel/core": "7.14.8",
     "@babel/eslint-parser": "7.15.7",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.14.5",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.16.0",
     "@babel/plugin-proposal-optional-chaining": "7.14.5",
     "@babel/plugin-transform-modules-commonjs": "7.14.5",
     "@babel/preset-react": "7.14.5",
@@ -75,7 +75,7 @@
     "@github/prettier-config": "0.0.4",
     "@rollup/plugin-commonjs": "19.0.2",
     "@rollup/plugin-node-resolve": "13.0.5",
-    "@size-limit/preset-big-lib": "5.0.2",
+    "@size-limit/preset-big-lib": "7.0.3",
     "@storybook/addon-a11y": "6.3.12",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-essentials": "6.3.12",
@@ -91,6 +91,7 @@
     "@types/jest-axe": "3.5.3",
     "@types/lodash.isempty": "4.4.6",
     "@types/lodash.isobject": "3.0.6",
+    "@types/node": "16.11.11",
     "@typescript-eslint/eslint-plugin": "4.31.2",
     "@typescript-eslint/parser": "4.26.1",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.3",
@@ -99,7 +100,7 @@
     "babel-plugin-add-react-displayname": "0.0.5",
     "babel-plugin-macros": "3.1.0",
     "babel-plugin-preval": "5.0.0",
-    "babel-plugin-styled-components": "1.12.0",
+    "babel-plugin-styled-components": "2.0.2",
     "babel-plugin-transform-replace-expressions": "0.2.0",
     "babel-polyfill": "6.26.0",
     "chroma-js": "2.1.2",
@@ -116,6 +117,7 @@
     "eslint-plugin-primer-react": "0.7.0",
     "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
+    "front-matter": "4.0.2",
     "jest": "27.0.4",
     "jest-axe": "5.0.1",
     "jest-styled-components": "6.3.4",
@@ -128,16 +130,16 @@
     "react-dnd-html5-backend": "14.0.2",
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
-    "rollup": "2.56.3",
+    "rollup": "2.60.2",
     "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-visualizer": "5.5.0",
     "semver": "7.3.5",
-    "size-limit": "5.0.2",
+    "size-limit": "7.0.3",
     "storybook-addon-performance": "0.16.1",
     "styled-components": "4.4.1",
     "ts-toolbelt": "9.6.0",
-    "typescript": "4.2.2"
+    "typescript": "4.4.4"
   },
   "peerDependencies": {
     "react": "^17.0.0",
@@ -156,5 +158,9 @@
       "webpack": false,
       "running": false
     }
-  ]
+  ],
+  "engines": {
+    "node": ">=16",
+    "npm": ">=8"
+  }
 }

package/script/component-status-project/build.ts

@@ -0,0 +1,100 @@
+import fs from 'fs'
+import path from 'path'
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const fm = require('front-matter') // FIXME after this bugfix is merged https://github.com/jxson/front-matter/pull/77
+
+const sourceDirectory = path.resolve(__dirname, '../../docs/content/')
+const outputDir = path.resolve(__dirname, '../../dist/')
+
+type ComponentStatus = {
+  [component: string]: string
+}
+
+/**
+ * Extracts the component status for each file in the given directory.
+ *
+ * @param filenames Array of filenames to read front-matter from
+ * @param dir Absolute path to directory containing files
+ * @returns A promise that resolves to an array containing outcome of file front-matter extraction
+ */
+function getComponentStatuses(filenames: string[], dir: string) {
+  const promises: Promise<ComponentStatus | null>[] = []
+
+  const handleCallback = (
+    filename: string,
+    resolve: (value: ComponentStatus | null) => void,
+    reject: (value: unknown) => void
+  ) => {
+    fs.readFile(path.resolve(dir, filename), 'utf-8', (err, content) => {
+      if (err) return reject(err)
+
+      if (fm.test(content)) {
+        const {
+          attributes: {title, status}
+        } = fm(content)
+
+        if (status) {
+          return resolve({[title]: status})
+        }
+      }
+
+      resolve(null)
+    })
+  }
+
+  for (const filename of filenames) {
+    const promise: Promise<ComponentStatus | null> = new Promise((resolve, reject) => {
+      return handleCallback(filename, resolve, reject)
+    })
+    promises.push(promise)
+  }
+
+  return Promise.all(promises)
+}
+
+/**
+ * Orchestrates the process of reading component status for each file in the given directory.
+ *
+ * @param dir Directory to source files where status will be extracted from
+ * @returns A promise that resolves to an object containing component statuses
+ */
+async function readFiles(dir: string) {
+  try {
+    const dirContents = fs.readdirSync(dir, {withFileTypes: true})
+    const filenames = dirContents.filter(dirent => dirent.isFile()).map(dirent => dirent.name)
+    const componentStatuses = await getComponentStatuses(filenames, dir)
+
+    return componentStatuses
+      .filter(Boolean)
+      .reverse()
+      .reduce(
+        (acc, file) => ({
+          ...acc,
+          ...file
+        }),
+        {}
+      )
+  } catch (err) {
+    throw new Error(`error reading files: ${err}`)
+  }
+}
+
+/**
+ * Writes the component status to the given file.
+ */
+async function build() {
+  try {
+    const componentStatuses = await readFiles(sourceDirectory)
+
+    if (!fs.existsSync(outputDir)) {
+      fs.mkdirSync(outputDir)
+    }
+
+    fs.writeFileSync(`${outputDir}/component-status.json`, JSON.stringify(componentStatuses))
+  } catch (error) {
+    throw new Error(`error building component status object: ${error}`)
+  }
+}
+
+build()

package/script/component-status-project/deploy.rb

@@ -0,0 +1,142 @@
+#!/usr/bin/env ruby
+# Adapted from https://github.com/primer/view_components/blob/main/script/update-statuses-project.rb
+# Usage: script/update-statuses-project
+# frozen_string_literal: true
+
+require "graphql/client"
+require "graphql/client/http"
+
+statuses = File.read(File.join(File.dirname(__FILE__), "../../dist/component-status.json"))
+statuses_json = JSON.parse(statuses)
+
+class QueryExecutionError < StandardError; end
+NOTE_SEPARATOR = " --- "
+
+module Github
+  GITHUB_ACCESS_TOKEN = ENV.fetch("GITHUB_TOKEN")
+  URL = "https://api.github.com/graphql"
+  HttpAdapter = GraphQL::Client::HTTP.new(URL) do
+    def headers(_)
+      {
+        "Authorization" => "Bearer #{GITHUB_ACCESS_TOKEN}",
+        "User-Agent" => "Ruby"
+      }
+    end
+  end
+  Schema = GraphQL::Client.load_schema(HttpAdapter)
+  Client = GraphQL::Client.new(schema: Schema, execute: HttpAdapter)
+end
+
+# Project is a GraphQL wrapper for interacting with GitHub projects
+class Project
+  ProjectQuery = Github::Client.parse <<-'GRAPHQL'
+    query {
+      repository(owner: "primer", name: "react") {
+        project(number: 5) {
+          columns(first: 100) {
+            nodes {
+              name
+              id
+              databaseId
+              cards {
+                nodes {
+                  id
+                  databaseId
+                  note
+                  column {
+                    name
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  GRAPHQL
+
+  CreateCard = Github::Client.parse <<-'GRAPHQL'
+    mutation($note: String!, $projectColumnId: ID!) {
+      addProjectCard(input:{note: $note, projectColumnId: $projectColumnId, clientMutationId: "prc-actions"}) {
+        __typename
+      }
+    }
+  GRAPHQL
+
+  MoveCard = Github::Client.parse <<-'GRAPHQL'
+    mutation($cardId: ID!, $columnId: ID!) {
+      moveProjectCard(input:{cardId: $cardId, columnId: $columnId, clientMutationId: "prc-actions"}) {
+        __typename
+      }
+    }
+  GRAPHQL
+
+  def self.create_card(note:, column_id:)
+    response = Github::Client.query(CreateCard, variables: { note: note, projectColumnId: column_id })
+    return unless response.errors.any?
+
+    raise QueryExecutionError, response.errors[:data].join(", ")
+  end
+
+  def self.move_card(card_id:, column_id:)
+    response = Github::Client.query(MoveCard, variables: { cardId: card_id, columnId: column_id })
+    return unless response.errors.any?
+
+    raise(QueryExecutionError, response.errors[:data].join(", "))
+  end
+
+  def self.fetch_columns
+    response = Github::Client.query(ProjectQuery)
+    return response.data.repository.project.columns unless response.errors.any?
+
+    raise(QueryExecutionError, response.errors[:data].join(", "))
+  end
+end
+
+columns = Project.fetch_columns.nodes
+
+@column_mapping = {}
+columns.each do |column|
+  @column_mapping[column.name.downcase] = column.id
+end
+
+@cards = columns.map(&:cards).map(&:nodes).flatten
+
+def get_card(name_prefix:)
+  @cards.find { |card| card.note.start_with?(name_prefix) }
+end
+
+def on_correct_column?(card_id:, status:)
+  card = @cards.find { |c| c.id == card_id }
+  card.column.name.casecmp(status).zero?
+end
+
+def move_card(card_id:, status:)
+  column_id = @column_mapping[status.downcase]
+
+  puts "move card with #{card_id} to #{status} on column #{column_id}"
+
+  Project.move_card(card_id: card_id, column_id: column_id)
+end
+
+def create_card(component_name:, status:)
+  column_id = @column_mapping[status.downcase]
+
+  puts "create card with #{component_name} on #{status} on column #{column_id}"
+
+  Project.create_card(note: component_name, column_id: column_id)
+end
+
+statuses_json.each do |component_name, component_status|
+  card = get_card(name_prefix: component_name)
+
+  if card
+    if on_correct_column?(card_id: card.id, status: component_status)
+      puts "#{card.id} is on the right column. noop"
+    else
+      move_card(card_id: card.id, status: component_status)
+    end
+  else
+    create_card(component_name: component_name, status: component_status)
+  end
+end

package/src/ActionList2/ActionListContainerContext.tsx

@@ -0,0 +1,14 @@
+/** This context can be used by components that compose ActionList inside a Menu */
+
+import React from 'react'
+
+type ContextProps = {
+  container?: string
+  listRole?: string
+  itemRole?: string
+  // This can be any function, we don't know anything about the arguments
+  // to be more specific here, this is as good as (...args: any[]) => unknown
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  afterSelect?: Function
+}
+export const ActionListContainerContext = React.createContext<ContextProps>({})

package/src/ActionList2/Divider.tsx

@@ -2,22 +2,27 @@ import React from 'react'
 import Box from '../Box'
 import {get} from '../constants'
 import {Theme} from '../ThemeProvider'
+import {SxProp, merge} from '../sx'
 
 /**
  * Visually separates `Item`s or `Group`s in an `ActionList`.
  */
-export function Divider(): JSX.Element {
+
+export const Divider: React.FC<SxProp> = ({sx = {}}) => {
   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
-      }}
+      sx={merge(
+        {
+          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
+        },
+        sx as SxProp
+      )}
       data-component="ActionList.Divider"
     />
   )

package/src/ActionList2/Item.tsx

@@ -8,6 +8,7 @@ import sx, {SxProp, merge} from '../sx'
 import createSlots from '../utils/create-slots'
 import {AriaRole} from '../utils/types'
 import {ListContext} from './List'
+import {ActionListContainerContext} from './ActionListContainerContext'
 import {Selection} from './Selection'
 
 export const getVariantStyles = (variant: ItemProps['variant'], disabled: ItemProps['disabled']) => {
@@ -94,12 +95,14 @@ export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
       onSelect,
       sx: sxProp = {},
       id,
+      role,
       _PrivateItemWrapper,
       ...props
     },
     forwardedRef
   ): JSX.Element => {
     const {variant: listVariant, showDividers} = React.useContext(ListContext)
+    const {itemRole, afterSelect} = React.useContext(ActionListContainerContext)
 
     const {theme} = useTheme()
 
@@ -168,22 +171,26 @@ export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
 
     const clickHandler = React.useCallback(
       event => {
-        if (typeof onSelect !== 'function') return
         if (disabled) return
-        if (!event.defaultPrevented) onSelect(event)
+        if (!event.defaultPrevented) {
+          if (typeof onSelect === 'function') onSelect(event)
+          // if this Item is inside a Menu, close the Menu
+          if (typeof afterSelect === 'function') afterSelect()
+        }
       },
-      [onSelect, disabled]
+      [onSelect, disabled, afterSelect]
     )
 
     const keyPressHandler = React.useCallback(
       event => {
-        if (typeof onSelect !== 'function') return
         if (disabled) return
         if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
-          onSelect(event)
+          if (typeof onSelect === 'function') onSelect(event)
+          // if this Item is inside a Menu, close the Menu
+          if (typeof afterSelect === 'function') afterSelect()
         }
       },
-      [onSelect, disabled]
+      [onSelect, disabled, afterSelect]
     )
 
     // use props.id if provided, otherwise generate one.
@@ -206,6 +213,7 @@ export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
             tabIndex={disabled || _PrivateItemWrapper ? undefined : 0}
             aria-labelledby={`${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`}
             aria-describedby={slots.BlockDescription ? blockDescriptionId : undefined}
+            role={role || itemRole}
             {...props}
           >
             <ItemWrapper>

package/src/ActionList2/List.tsx

@@ -3,6 +3,7 @@ import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/r
 import styled from 'styled-components'
 import sx, {SxProp, merge} from '../sx'
 import {AriaRole} from '../utils/types'
+import {ActionListContainerContext} from './ActionListContainerContext'
 
 export type ListProps = {
   /**
@@ -30,7 +31,7 @@ const ListBox = styled.ul<SxProp>(sx)
 
 export const List = React.forwardRef<HTMLUListElement, ListProps>(
   (
-    {variant = 'inset', selectionVariant, showDividers = false, sx: sxProp = {}, ...props},
+    {variant = 'inset', selectionVariant, showDividers = false, role, sx: sxProp = {}, ...props},
     forwardedRef
   ): JSX.Element => {
     const styles = {
@@ -39,8 +40,11 @@ export const List = React.forwardRef<HTMLUListElement, ListProps>(
       paddingY: variant === 'inset' ? 2 : 0
     }
 
+    /** if list is inside a Menu, it will get a role from the Menu */
+    const {listRole} = React.useContext(ActionListContainerContext)
+
     return (
-      <ListBox sx={merge(styles, sxProp as SxProp)} {...props} ref={forwardedRef}>
+      <ListBox sx={merge(styles, sxProp as SxProp)} role={role || listRole} {...props} ref={forwardedRef}>
         <ListContext.Provider value={{variant, selectionVariant, showDividers}}>{props.children}</ListContext.Provider>
       </ListBox>
     )

package/src/ActionList2/Selection.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import {CheckIcon} from '@primer/octicons-react'
 import {ListContext} from './List'
 import {GroupContext} from './Group'
+import {ActionListContainerContext} from './ActionListContainerContext'
 import {ItemProps} from './Item'
 import {LeadingVisualContainer} from './Visuals'
 
@@ -9,6 +10,7 @@ type SelectionProps = Pick<ItemProps, 'selected'>
 export const Selection: React.FC<SelectionProps> = ({selected}) => {
   const {selectionVariant: listSelectionVariant} = React.useContext(ListContext)
   const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
+  const {container} = React.useContext(ActionListContainerContext)
 
   /** selectionVariant in Group can override the selectionVariant in List root */
   const selectionVariant = typeof groupSelectionVariant !== 'undefined' ? groupSelectionVariant : listSelectionVariant
@@ -23,6 +25,13 @@ export const Selection: React.FC<SelectionProps> = ({selected}) => {
     return null
   }
 
+  if (container === 'ActionMenu') {
+    throw new Error(
+      'ActionList cannot have a selectionVariant inside ActionMenu, please use DropdownMenu or SelectPanel instead. More information: https://primer.style/design/components/action-list#application'
+    )
+    return null
+  }
+
   if (selectionVariant === 'single') {
     return <LeadingVisualContainer>{selected && <CheckIcon />}</LeadingVisualContainer>
   }

package/src/ActionMenu2.tsx

@@ -0,0 +1,116 @@
+import Button, {ButtonProps} from './Button'
+import React from 'react'
+import {AnchoredOverlay, AnchoredOverlayProps} from './AnchoredOverlay'
+import {OverlayProps} from './Overlay'
+import {useProvidedRefOrCreate, useProvidedStateOrCreate} from './hooks'
+import {Divider} from './ActionList2/Divider'
+import {ActionListContainerContext} from './ActionList2/ActionListContainerContext'
+import {MandateProps} from './utils/types'
+
+type MenuContextProps = Pick<AnchoredOverlayProps, 'anchorRef' | 'renderAnchor' | 'open' | 'onOpen' | 'onClose'>
+export const MenuContext = React.createContext<MenuContextProps>({renderAnchor: null, open: false})
+
+export type ActionMenuProps = {
+  /**
+   * Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay`
+   */
+  children: React.ReactElement[] | React.ReactElement
+
+  /**
+   * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `onOpenChange`.
+   */
+  open?: boolean
+
+  /**
+   * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`.
+   */
+  onOpenChange?: (s: boolean) => void
+} & Pick<AnchoredOverlayProps, 'anchorRef'>
+
+const Menu: React.FC<ActionMenuProps> = ({
+  anchorRef: externalAnchorRef,
+  open,
+  onOpenChange,
+  children
+}: ActionMenuProps) => {
+  const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate(open, onOpenChange, false)
+  const onOpen = React.useCallback(() => setCombinedOpenState(true), [setCombinedOpenState])
+  const onClose = React.useCallback(() => setCombinedOpenState(false), [setCombinedOpenState])
+
+  const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
+  let renderAnchor: AnchoredOverlayProps['renderAnchor'] = null
+
+  // 🚨 Hack for good API!
+  // we strip out Anchor from children and pass it to AnchoredOverlay to render
+  // with additional props for accessibility
+  const contents = React.Children.map(children, child => {
+    if (child.type === MenuButton || child.type === Anchor) {
+      renderAnchor = anchorProps => React.cloneElement(child, anchorProps)
+      return null
+    }
+    return child
+  })
+
+  return (
+    <MenuContext.Provider value={{anchorRef, renderAnchor, open: combinedOpenState, onOpen, onClose}}>
+      {contents}
+    </MenuContext.Provider>
+  )
+}
+
+export type MenuAnchorProps = {children: React.ReactElement}
+const Anchor = React.forwardRef<AnchoredOverlayProps['anchorRef'], MenuAnchorProps>(
+  ({children, ...anchorProps}, anchorRef) => {
+    return React.cloneElement(children, {...anchorProps, ref: anchorRef})
+  }
+)
+
+/** this component is syntactical sugar 🍭 */
+export type MenuButtonProps = ButtonProps
+const MenuButton = React.forwardRef<AnchoredOverlayProps['anchorRef'], ButtonProps>((props, anchorRef) => {
+  return (
+    <Anchor ref={anchorRef}>
+      <Button {...props} />
+    </Anchor>
+  )
+})
+
+type MenuOverlayProps = Partial<OverlayProps> & {
+  /**
+   * Recommended: `ActionList`
+   */
+  children: React.ReactElement[] | React.ReactElement
+}
+const Overlay: React.FC<MenuOverlayProps> = ({children, ...overlayProps}) => {
+  // we typecast anchorRef as required instead of optional
+  // because we know that we're setting it in context in Menu
+  const {anchorRef, renderAnchor, open, onOpen, onClose} = React.useContext(MenuContext) as MandateProps<
+    MenuContextProps,
+    'anchorRef'
+  >
+
+  return (
+    <AnchoredOverlay
+      anchorRef={anchorRef}
+      renderAnchor={renderAnchor}
+      open={open}
+      onOpen={onOpen}
+      onClose={onClose}
+      overlayProps={overlayProps}
+    >
+      <ActionListContainerContext.Provider
+        value={{
+          container: 'ActionMenu',
+          listRole: 'menu',
+          itemRole: 'menuitem',
+          afterSelect: onClose
+        }}
+      >
+        {children}
+      </ActionListContainerContext.Provider>
+    </AnchoredOverlay>
+  )
+}
+
+Menu.displayName = 'ActionMenu'
+export const ActionMenu = Object.assign(Menu, {Button: MenuButton, Anchor, Overlay, Divider})

package/src/BranchName.tsx

@@ -8,9 +8,10 @@ const BranchName = styled.a<SxProp>`
   padding: 2px 6px;
   font-size: ${get('fontSizes.0')};
   font-family: ${get('fonts.mono')};
-  color: ${get('colors.fg.muted')};
+  color: ${get('colors.accent.fg')};
   background-color: ${get('colors.accent.subtle')};
   border-radius: ${get('radii.2')};
+  text-decoration: none;
 
   ${sx};
 `