diff --git a/.changeset/actionlist2-actionmenu2-prefix-types.md b/.changeset/actionlist2-actionmenu2-prefix-types.md new file mode 100644 index 00000000000..b7d4cd11224 --- /dev/null +++ b/.changeset/actionlist2-actionmenu2-prefix-types.md @@ -0,0 +1,21 @@ +--- +'@primer/react': major +--- + +`ActionList2` exported types are now prefixed with `ActionList`: + +``` +ListProps → ActionListProps +GroupProps → ActionListGroupProps +ItemProps → ActionListItemProps +DescriptionProps → ActionListDescriptionProps +LeadingVisualProps → ActionListLeadingVisualProps, +TrailingVisualProps → ActionListTrailingVisualProps +``` + +`ActionMenu2` exported types are now prefixed with `ActionMenu`: + +``` +MenuButtonProps → ActionMenuButtonProps +MenuAnchorProps → ActionMenuAnchorProps +``` diff --git a/.changeset/actionmenu-add-align-prop.md b/.changeset/actionmenu-add-align-prop.md new file mode 100644 index 00000000000..b790321d604 --- /dev/null +++ b/.changeset/actionmenu-add-align-prop.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Add align prop on ActionMenu.Overlay to pass through to AnchoredOverlay diff --git a/.changeset/actionmenu-button-caret-spacing.md b/.changeset/actionmenu-button-caret-spacing.md new file mode 100644 index 00000000000..7e58b5b8db3 --- /dev/null +++ b/.changeset/actionmenu-button-caret-spacing.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +ActionMenu.Button: Fix spacing between text and caret diff --git a/.changeset/deprecate-actionlistv1-promote-actionlistv2.md b/.changeset/deprecate-actionlistv1-promote-actionlistv2.md new file mode 100644 index 00000000000..d4f44de7b0d --- /dev/null +++ b/.changeset/deprecate-actionlistv1-promote-actionlistv2.md @@ -0,0 +1,155 @@ +--- +'@primer/react': major +--- +
+ +### ActionList + +ActionList has been rewritten with a composable API, design updates and accessibility fixes. + +See full list of props and examples: https://primer.style/react/ActionList + + + + + + + + + + + + + + + + + +
Before (v34) After (v35)
+ +```jsx + +``` + + + +```jsx + + New file + Copy link + Edit file + + Delete file + +``` + +
+ +```jsx + , + text: 'mona', + description: 'Monalisa Octocat', + descriptionVariant: 'block' + }, + { + key: '2', + leadingVisual: GearIcon, + text: 'View Settings', + trailingVisual: ArrowRightIcon + } + ]} +/> +``` + + + +```jsx + + + + + + github/primer + + + + + + mona + Monalisa Octocat + + + + + + View settings + + + + + +``` + +
+ +```jsx + +``` + + + +```jsx + + + repo:github/github + + + + + Table + Board Description + + + + View settings + +``` + +
+ +To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`: + +```js +import {ActionList} from '@primer/react/deprecated' +``` + +You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically. diff --git a/.changeset/deprecate-actionmenuv1-promote-actionmenuv2.md b/.changeset/deprecate-actionmenuv1-promote-actionmenuv2.md new file mode 100644 index 00000000000..d4f97523f19 --- /dev/null +++ b/.changeset/deprecate-actionmenuv1-promote-actionmenuv2.md @@ -0,0 +1,71 @@ +--- +'@primer/react': major +--- + +
+ +### ActionMenu + +ActionMenu has been rewritten with a composable API, design updates and accessibility fixes. + +See full list of props and examples: https://primer.style/react/ActionMenu + +Main changes: + +1. Instead of using `items` prop, use `ActionList` inside `ActionMenu` +2. Instead of using `anchorContent` on `ActionMenu`, use `ActionMenu.Button` with `children` +3. Instead of using `onAction` prop on `ActionMenu`, use `onSelect` prop on `ActionList.Item` +4. Instead of using `groupMetadata` on `ActionMenu`, use `ActionList.Group` +5. Instead of `overlayProps` on `ActionMenu`, use `ActionMenu.Overlay` + + + + + + + + + +
Before (v34) After (v35)
+ +```jsx + +``` + + + +```jsx + + Menu + + + New file + Copy link + Edit file + + Delete file + + + +``` + +
+ +To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`: + +```js +import {ActionMenu} from '@primer/react/deprecated' +``` + +You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically. diff --git a/.changeset/deprecate-dropdownmenu.md b/.changeset/deprecate-dropdownmenu.md new file mode 100644 index 00000000000..4afcd361ad7 --- /dev/null +++ b/.changeset/deprecate-dropdownmenu.md @@ -0,0 +1,109 @@ +--- +'@primer/react': major +--- + +
+ +### DropdownMenu + +DropdownMenu has been deprecated in favor of ActionMenu with ActionList + +See example with selection: https://primer.style/react/ActionMenu#with-selection + +Migration guide: + +1. Instead of using `items` prop, use `ActionList` inside `ActionMenu` +2. Use `selectionVariant="single"` on `ActionList` to set the right semantics for selection +3. Instead of using `selectedItem` prop, use `selected` prop on `ActionList.Item` +4. Instead of using `renderAnchor` and `placeholder` props on `DropdownMenu`, use `ActionMenu.Button` or `ActionMenu.Anchor` +5. Instead of using `onChange` prop on `DropdownMenu`, use `onSelect` prop on `ActionList.Item` +6. Instead of using `groupMetadata` on `DropdownMenu`, use `ActionList.Group` +7. Instead of `overlayProps` on `DropdownMenu`, use `ActionMenu.Overlay` + + + + + + + + + +
Before (v34) After (v35)
+ +```js +const fieldTypes = [ + {key: 0, text: 'Text'}, + {key: 1, text: 'Number'}, + {key: 3, text: 'Date'}, + {key: 4, text: 'Single select'}, + {key: 5, text: 'Iteration'} +] + +const Example = () => { + const [selectedType, setSelectedType] = React.useState() + + return ( + ( + + {children} + + )} + placeholder="Field type" + items={fieldTypes} + selectedItem={selectedType} + onChange={setSelectedType} + overlayProps={{width: 'medium'}} + /> + ) +} +``` + + + +```jsx +const fieldTypes = [ + {id: 0, text: 'Text'}, + {id: 1, text: 'Number'}, + {id: 3, text: 'Date'}, + {id: 4, text: 'Single select'}, + {id: 5, text: 'Iteration'} +] + +const Example = () => { + const [selectedType, setSelectedType] = React.useState() + + render( + + {selectedType.name || 'Field type'} + + + {fieldTypes.map(type => ( + setSelectedType(type)} + > + {type.name} + + ))} + + + + ) +} +``` + +
+ +To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`: + +```js +import {DropdownMenu} from '@primer/react/deprecated' +``` + +You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically. + +### drafts/DropdownMenu2 + +DropdownMenu2 has been removed in favor of ActionMenu with ActionList diff --git a/.changeset/healthy-dots-chew.md b/.changeset/healthy-dots-chew.md new file mode 100644 index 00000000000..65e4bdcc842 --- /dev/null +++ b/.changeset/healthy-dots-chew.md @@ -0,0 +1,6 @@ +--- +"@primer/react": patch +--- + +- Update styles for default variant of Button's active state +- Use active state for Button when it is used to open an Overlay diff --git a/.changeset/heavy-points-marry.md b/.changeset/heavy-points-marry.md new file mode 100644 index 00000000000..e2ab675ccde --- /dev/null +++ b/.changeset/heavy-points-marry.md @@ -0,0 +1,69 @@ +--- +'@primer/react': major +--- + +
+ +### Label + +The Label component's API and visual design have been updated to be consistent with its counterpart in [Primer ViewComponents' Label component](https://primer.style/view-components/components/label). + +Major changes in the new Label component: + +- No more `medium` size - only `small` and `large` +- Labels are outlined by default, so the `outline` prop has been removed +- Custom text and background colors are discouraged, but still possible via the `sx` prop + +If you were using the `Label` component to render issue/PR labels, use the [IssueLabelToken](https://primer.style/react/Token#issuelabeltoken) component instead. + + + + + + + + + +
Before (v34) After (v35)
+ +```jsx +import {Label} from '@primer/react' + +function Example() { + return ( + <> + + + + ) +} +``` + + + +```jsx +import {Label} from '@primer/react' + +function Example() { + return ( + <> + + + + ) +} +``` + +
+ +To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`: + +```js +import {Label} from '@primer/react/deprecated' +``` + +You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically. diff --git a/.changeset/many-roses-hammer.md b/.changeset/many-roses-hammer.md new file mode 100644 index 00000000000..6da3e28aa36 --- /dev/null +++ b/.changeset/many-roses-hammer.md @@ -0,0 +1,140 @@ +--- +'@primer/react': major +--- + +
+ +### Button + +Before `v35`, `Button` was a set of seven independent components. In `v35`, we've simplified the `Button` API. + +#### Button variants + +We now support a variant property which takes values `primary`, `invisible`, `outline` and `danger` + + + + + + + + + +
Before (v34) After (v35)
+ +```jsx +import {ButtonPrimary, ButtonInvisible, ButtonOutline, ButtonDanger} from '@primer/react' + +function Example() { + return ( + <> + Primary Button + Invisible Button + Outline Button + Danger Button + + ) +} +``` + + + +```jsx +import {Button} from '@primer/react' + +function Example() { + return ( + <> + + + + + + ) +} +``` + +
+ +#### Leading and trailing icons + +Previously including icons inside buttons required a lot of custom styling. In the new `Button` component, we now support first-class `leadingIcon` and `trailingIcon` props: + + + + + + + + + +
Before (v34) After (v35)
+ +```jsx + +``` + + + +```jsx + +``` + +
+ +#### Icon buttons + +Icon-only buttons are common in many applications. We now have a component designed for this use-case: + + + + + + + + + +
Before (v34) After (v35)
+ +```jsx + +``` + + + +```jsx + +``` + +
+ +#### Size property + +Previously, we used a `variant` prop to set the size of buttons. We now have a prop called `size` which is more semantically correct. + + + + + + + + + +
Before (v34) After (v35)
+ +```jsx + +``` + + + +```jsx + +``` + +
diff --git a/.changeset/nervous-pets-sleep.md b/.changeset/nervous-pets-sleep.md new file mode 100644 index 00000000000..3760edf640a --- /dev/null +++ b/.changeset/nervous-pets-sleep.md @@ -0,0 +1,117 @@ +--- +'@primer/react': major +--- + +
+ +### ChoiceFieldset + +The `CheckboxGroup` and `RadioGroup` components are replacing the `ChoiceFieldset` component. + +`CheckboxGroup` and `RadioGroup` have the ability to render contextual content with your fieldset: labels, validation statuses, captions. They also handle the ARIA attributes that make the form controls accessible to assistive technology. + + + + + + + + + +
Before (v34) After (v35)
+ +```jsx +import {ChoiceFieldset} from '@primer/react' + +function Example() { + return ( + <> + {/* Multi-select */} + + Preferred Primer component interface + + Figma library + Primer CSS + Primer React components + Primer ViewComponents + + + + {/* Single select */} + + Preferred Primer component interface + + Figma library + Primer CSS + Primer React components + Primer ViewComponents + + + + ) +} +``` + + + +```jsx +import {CheckboxGroup, RadioGroup, FormControl, Checkbox, Radio} from '@primer/react' + +function Example() { + return ( + <> + {/* Multi-select */} + + Preferred Primer component interface + + + Figma + + + + CSS + + + + Primer React components + + + + Primer ViewComponents + + + + {/* Single select */} + + Preferred Primer component interface + + + Figma + + + + CSS + + + + Primer React components + + + + Primer ViewComponents + + + + ) +} +``` + +
+ +To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`: + +```js +import {ChoiceFieldset} from '@primer/react/deprecated' +``` + +You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically. diff --git a/.changeset/odd-apes-guess.md b/.changeset/odd-apes-guess.md new file mode 100644 index 00000000000..c92e0bb1a46 --- /dev/null +++ b/.changeset/odd-apes-guess.md @@ -0,0 +1,16 @@ +--- +"@primer/react": major +--- + +
+ +### PageLayout + +`PageLayout` is being graduated from the `drafts` bundle to the `main` bundle. + +To upgrade, rewrite your imports accordingly: + +```diff +- import {PageLayout} from '@primer/react/drafts' ++ import {PageLayout} from '@primer/react' +``` diff --git a/.changeset/olive-bears-act.md b/.changeset/olive-bears-act.md new file mode 100644 index 00000000000..d946f2f815f --- /dev/null +++ b/.changeset/olive-bears-act.md @@ -0,0 +1,110 @@ +--- +'@primer/react': major +--- + +
+ +### FormGroup, InputField, ChoiceInputField + +The `FormControl` component is replacing the `FormGroup`, `InputField`, and `ChoiceInputField` components. It has the ability to render contextual content with your inputs: labels, validation statuses, captions. It also handles the ARIA attributes that make the form controls accessible to assistive technology. + + + + + + + + + + + + + +
Before (v34) After (v35)
+ +```jsx +import {FormControl, Checkbox, TextInput} from '@primer/react' + +function Example() { + return ( + <> + + Example text + + + {/* OR */} + + Example text + + + {/* OR */} + + Example text + + + + ) +} +``` + + + +```jsx +import {FormGroup, TextInput} from '@primer/react' + +function Example() { + return ( + <> + + Example text + + + {/* OR */} + + Example text + + + + ) +} +``` + +
+ +```jsx +import {InputField, TextInput} from '@primer/react' + +function Example() { + return ( + + Example text + + + ) +} +``` + + + +```jsx +import {FormControl, TextInput} from '@primer/react' + +function Example() { + return ( + + Example text + + + ) +} +``` + +
+ +To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`: + +```js +import {FormGroup, ChoiceInputField, InputField} from '@primer/react/deprecated' +``` + +You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically. diff --git a/.changeset/smooth-cameras-prove.md b/.changeset/smooth-cameras-prove.md new file mode 100644 index 00000000000..327e4850c58 --- /dev/null +++ b/.changeset/smooth-cameras-prove.md @@ -0,0 +1,264 @@ +--- +'@primer/react': major +--- + +
+ +### SelectMenu + +⚠️ `SelectMenu` has been deprecated. Please use `ActionMenu` instead. + + + + + + + + + +
Before After
+ +```jsx + + + + Projects + + Primer React bugs + Primer React roadmap + Project 3 + Project 4 + + + +``` + + + +```jsx + + Projects + + + + Primer React bugs + Primer React roadmap + Project three + Project four + + + + +``` + +
+ +See [https://primer.style/react/ActionMenu](https://primer.style/react/ActionMenu) for more migration examples. + +### Dropdown + +⚠️ `Dropdown` has been deprecated. Please use `ActionMenu` instead. + + + + + + + + + +
Before After
+ +```jsx +const fieldTypes = [ + {leadingVisual: TypographyIcon, text: 'Text'}, + {leadingVisual: NumberIcon, text: 'Number'} +] + +const Example = () => { + const [selectedItem, setSelectedItem] = React.useState() + + return ( + {children}} + placeholder="Select a field type" + items={fieldTypes} + selectedItem={selectedItem} + onChange={() => setSelectedIndex(index)} + /> + ) +} +``` + + + +```jsx +const fieldTypes = [ + {icon: , name: 'Text'}, + {icon: , name: 'Number'} +] + +const Example = () => { + const [selectedItem, setSelectedItem] = React.useState() + + return ( + + {selectedItem ? selectedItem.name : 'Select a field type'} + + + {fieldTypes.map(field => ( + setSelectedItem(field)} key={field.name}> + {field.icon} + {field.name} + + ))} + + + + ) +} +``` + +
+ +See [https://primer.style/react/ActionMenu](https://primer.style/react/ActionMenu) for more migration examples. + +### Flex + +⚠️ `Flex` has been deprecated. Please use [`Box`](https://primer.style/react/Box) instead. + + + + + + + + + +
Before After
+ +```jsx + + + Item 1 + + +``` + + + +```jsx + + + Item 1 + + +``` + +
+ +### Grid + +⚠️ `Grid` has been deprecated. Please use [`Box`](https://primer.style/react/Box) instead. + + + + + + + + + +
Before After
+ +```jsx + + + 1 + + + 2 + + +``` + + + +```jsx + + + 1 + + + 2 + + +``` + +
+ +### BorderBox + +⚠️ `BorderBox` has been deprecated. Please use [`Box`](https://primer.style/react/Box) instead. + + + + + + + + + +
Before After
+ +```jsx +Item 1 +``` + + + +```jsx + + Item 1 + +``` + +
+ +### Position + +⚠️ `Position` has been deprecated. Please use [`Box`](https://primer.style/react/Box) instead. + + + + + + + + + +
Before After
+ +```jsx +<> + ... + ... + ... + ... + ... + +``` + + + +```jsx +<> + ... + ... + ... + ... + ... + +``` + +
diff --git a/.changeset/twenty-weeks-battle.md b/.changeset/twenty-weeks-battle.md new file mode 100644 index 00000000000..6b732f806c9 --- /dev/null +++ b/.changeset/twenty-weeks-battle.md @@ -0,0 +1,21 @@ +--- +'@primer/react': patch +--- + +Surfaced the following components and hooks from the root index: + +- Portal +- AnchoredOverlay +- useFocusTrap +- useFocusZone (and types) +- sx (and types) +- ConfirmationDialogProps + +These exports can now be imported from the root index, rather than from their nested subfolders. + +E.g. + +```diff +- import { ConfirmationDialogProps } from '@primer/react/lib-esm/Dialog/ConfirmationDialog'; ++ import { ConfirmationDialogProps } from '@primer/react'; +``` diff --git a/contributor-docs/CONTRIBUTING.md b/contributor-docs/CONTRIBUTING.md index 55ac6349fb2..70ad42fb4ef 100644 --- a/contributor-docs/CONTRIBUTING.md +++ b/contributor-docs/CONTRIBUTING.md @@ -29,7 +29,7 @@ If you're looking for something to work on, a great place to start is our issues A common question asked about Primer Components is how to know what should be added to Primer Components and what is best left as a local component in a consuming application. Though there are no hard & fast rules about what can and cannot be added to Primer Components, here are a few things we take into consideration: -- Is the new feature an existing pattern in Primer CSS or related to UI built at GitHub? Primer Components is first and foremost a library for building UI at GitHub - patterns that aren't currently being used in GitHub UI (either on github.com or in a GitHub owned project outside of github.com) probably shouldn't be added to Primer Components. Exceptions to this could be helper components that don't necessarily render UI but help with the development process (like `Flex`, `Grid`, or `Box`). +- Is the new feature an existing pattern in Primer CSS or related to UI built at GitHub? Primer Components is first and foremost a library for building UI at GitHub - patterns that aren't currently being used in GitHub UI (either on github.com or in a GitHub owned project outside of github.com) probably shouldn't be added to Primer Components. Exceptions to this could be helper components that don't necessarily render UI but help with the development process (like `Box`). - Does the proposed component get used in more than one or two places across GitHub UI? A component that's only meant to be used in one place and doesn't have potential to be reused in many places probably should exist as a local component. An example of something like this might be a component that renders content specific to a single GitHub product. diff --git a/deprecated/package.json b/deprecated/package.json new file mode 100644 index 00000000000..e7a211fd303 --- /dev/null +++ b/deprecated/package.json @@ -0,0 +1,9 @@ +{ + "_comment1": "this is required only for typescript. once this is fixed https://github.com/microsoft/TypeScript/issues/33079 we can remove this hack", + "name": "@primer/react/deprecated", + "types": "../lib-esm/deprecated/index.d.ts", + "main": "../lib-esm/deprecated/index.js", + "type": "module", + "sideEffects": false + } + \ No newline at end of file diff --git a/docs/content/ActionList.mdx b/docs/content/ActionList.mdx index 7eb5066cca2..02c2fb4b032 100644 --- a/docs/content/ActionList.mdx +++ b/docs/content/ActionList.mdx @@ -3,98 +3,446 @@ componentId: action_list title: ActionList status: Alpha source: https://github.com/primer/react/tree/main/src/ActionList +storybook: '/react/storybook?path=/story/composite-components-actionlist' +description: An ActionList is a list of items that can be activated or selected. ActionList is the base component for many menu-type components, including ActionMenu and SelectPanel. --- -An `ActionList` is a list of items which can be activated or selected. `ActionList` is the base component for many of our menu-type components, including `DropdownMenu` and `ActionMenu`. +import {Avatar} from '@primer/react' +import {ActionList} from '@primer/react' +import {LinkIcon, AlertIcon, ArrowRightIcon} from '@primer/octicons-react' +import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code' -## Minimal example + + + + + + + github.com/primer + + A React implementation of GitHub's Primer Design System + + + + + + + mona + Monalisa Octocat + + + + + + 4 vulnerabilities + + + + + + + +```js +import {ActionList} from '@primer/react' +``` + +## Examples + +### Minimal example ```jsx live - + + New file + Copy link + Edit file + + Delete file + ``` -## Example with grouped items +### With leading visual + +Leading visuals are optional and appear at the start of an item. They can be octicons, avatars, and other custom visuals that fit a small area. + ```jsx live - + + + + github.com/primer + + + + 4 vulnerabilities + + + + mona + + + ``` -## Example with custom item renderer - -```jsx - - }, - { - text: 'React Router link', - renderItem: props => - }, - { - text: 'NextJS style', - renderItem: props => ( - - - - ) - } - ]} -/> +### With trailing visual + +Trailing visual and trailing text can display auxiliary information. They're placed at the right of the item, and can denote status, keyboard shortcuts, or be used to set expectations about what the action does. + +```jsx live + + + New file + ⌘ + N + + + Copy link + ⌘ + C + + + Edit file + ⌘ + E + + + Delete file + ⌫ + + +``` + +### With description and dividers + +Item dividers allow users to parse heavier amounts of information. They're placed between items and are useful in complex lists, particularly when descriptions or multi-line text is present. + +```jsx live + + + + + + mona + Monalisa Octocat + + + + + + hubot + Hubot + + + + + + primer-css + GitHub Design Systems Bot + + +``` + +### With links + +When you want to add links to the List instead of actions, use `ActionList.LinkItem` + + +```jsx live + + + + + + github/primer + + + + + + MIT License + + + + + + 1.4k stars + + +``` + +### With groups + +```javascript live noinline +const SelectFields = () => { + const [options, setOptions] = React.useState([ + {text: 'Status', selected: true}, + {text: 'Stage', selected: true}, + {text: 'Assignee', selected: true}, + {text: 'Team', selected: true}, + {text: 'Estimate', selected: false}, + {text: 'Due Date', selected: false} + ]) + + const visibleOptions = options.filter(option => option.selected) + const hiddenOptions = options.filter(option => !option.selected) + + const toggle = text => { + setOptions( + options.map(option => { + if (option.text === text) option.selected = !option.selected + return option + }) + ) + } + + return ( + + + {visibleOptions.map(option => ( + toggle(option.text)}> + {option.text} + + ))} + + + {hiddenOptions.map((option, index) => ( + toggle(option.text)}> + {option.text} + + ))} + {hiddenOptions.length === 0 && No hidden fields} + + + ) +} + +render() ``` ## Props -| Name | Type | Default | Description | -| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :---------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------ | -| items | `(ItemProps & Omit, keyof ItemProps>) \| ((Partial & {renderItem: RenderItemFn}) & {key?: Key})` | `undefined` | Required. A list of item objects conforming to the `ActionList.Item` props interface. | -| renderItem | `(props: ItemProps) => JSX.Element` | `ActionList.Item` | Optional. If defined, each item in `items` will be passed to this function, allowing for `ActionList`-wide custom item rendering. | -| groupMetadata | `GroupProps[]` | `undefined` | Optional. If defined, `ActionList` will group `items` into `ActionList.Group`s separated by `ActionList.Divider` according to their `groupId` property. | -| showItemDividers | `boolean` | `false` | Optional. If `true` dividers will be displayed above each `ActionList.Item` which does not follow an `ActionList.Header` or `ActionList.Divider` | +### ActionList + + + + + inset children are offset (vertically and horizontally) from list edges.{' '} + full children are flush (vertically and horizontally) with list edges + + } + /> + + + AriaRole + } + description={ + <> + ARIA role describing the function of the list. listbox and{' '} + menu are a common values. + + } + /> + + + +### ActionList.Item + + + + + danger indicates that the item is destructive. + + } + /> + + + + AriaRole + } + description={ + <> + ARIA role describing the function of the item. option is a common value. + + } + /> + + + +### ActionList.LinkItem + + + + MDN + } + /> + + +### ActionList.LeadingVisual + + + + + + +### ActionList.TrailingVisual + + + + + + +### ActionList.Description + + + + + inline descriptions are positioned beside primary text. block{' '} + descriptions are positioned below primary text. + + } + /> + + + +### ActionList.Group + + + + + + + inline descriptions are positioned beside primary text. block{' '} + descriptions are positioned below primary text. + + } + /> + + Set selectionVariant at the group level. + + } + /> + AriaRole + } + description={ + <> + ARIA role describing the function of the list inside the group. listbox and{' '} + menu are a common values. + + } + /> + + + +## Status + + + +## Further reading + +- [Interface guidelines: Action List](https://primer.style/design/components/action-list) + +## Related components + +- [ActionMenu](/ActionMenu) +- [SelectPanel](/SelectPanel) diff --git a/docs/content/ActionMenu.mdx b/docs/content/ActionMenu.mdx index 1c0e13ecd9b..166375246c1 100644 --- a/docs/content/ActionMenu.mdx +++ b/docs/content/ActionMenu.mdx @@ -2,81 +2,381 @@ componentId: action_menu title: ActionMenu status: Alpha +source: https://github.com/primer/react/tree/main/src/ActionMenu.tsx +storybook: '/react/storybook?path=/story/composite-components-actionmenu' +description: An ActionMenu is an ActionList-based component for creating a menu of actions that expands through a trigger button. --- -An `ActionMenu` is an ActionList-based component for creating a menu of actions that expands through a trigger button. +import {Box, Avatar, ActionList, ActionMenu} from '@primer/react' -## Default example +
+ + + + Menu + + + + Copy link + ⌘C + + + Quote reply + ⌘Q + + + Edit comment + ⌘E + + + + Delete file + ⌘D + + + + + + +
+ +```js +import {ActionMenu} from '@primer/react/drafts' +``` + +
+ +## Examples + +### Minimal example + +`ActionMenu` ships with `ActionMenu.Button` which is an accessible trigger for the overlay. It's recommended to compose `ActionList` with `ActionMenu.Overlay` + +  ```jsx live - console.log(text)} - items={[ - {text: 'New file', key: 'new-file'}, - ActionMenu.Divider, - {text: 'Copy link', key: 'copy-link'}, - {text: 'Edit file', key: 'edit-file'}, - {text: 'Delete file', variant: 'danger', key: 'delete-file'} - ]} -/> + + Menu + + + + console.log('New file')}>New file + Copy link + Edit file + + Delete file + + + ``` -## Example with grouped items +### With a custom anchor + +You can choose to have a different _anchor_ for the Menu dependending on the application's context. + +  ```jsx live - console.log(text)} - groupMetadata={[ - {groupId: '0'}, - {groupId: '1', header: {title: 'Live query', variant: 'subtle'}}, - {groupId: '2', header: {title: 'Layout', variant: 'subtle'}}, - {groupId: '3'}, - {groupId: '4'} - ]} - items={[ - {key: '1', leadingVisual: TypographyIcon, text: 'Rename', groupId: '0'}, - {key: '2', leadingVisual: VersionsIcon, text: 'Duplicate', groupId: '0'}, - {key: '3', leadingVisual: SearchIcon, text: 'repo:github/github', groupId: '1'}, - { - key: '4', - leadingVisual: NoteIcon, - text: 'Table', - description: 'Information-dense table optimized for operations across teams', - descriptionVariant: 'block', - groupId: '2' - }, - { - key: '5', - leadingVisual: ProjectIcon, - text: 'Board', - description: 'Kanban-style board focused on visual states', - descriptionVariant: 'block', - groupId: '2' - }, - { - key: '6', - leadingVisual: FilterIcon, - text: 'Save sort and filters to current view', - disabled: true, - groupId: '3' - }, - {key: '7', leadingVisual: FilterIcon, text: 'Save sort and filters to new view', groupId: '3'}, - {key: '8', leadingVisual: GearIcon, text: 'View settings', groupId: '4'} - ]} -/> + + + + + + + + + + + + Rename + + + + + + Archive all cards + + + + + + Delete + + + + +``` + +### With Groups + +```jsx live + + Open column menu + + + + + + + + + repo:github/memex,github/github + + + + + + + + + Table + + Information-dense table optimized for operations across teams + + + + + + + Board + Kanban-style board focused on visual states + + + + + + + + + Save sort and filters to current view + + + + + + Save sort and filters to new view + + + + + + + + + View settings + + + + + +``` + +### With selection + +Use `selectionVariant` on `ActionList` to create a menu with single or multiple selection. + +```javascript live noinline +const fieldTypes = [ + {icon: TypographyIcon, name: 'Text'}, + {icon: NumberIcon, name: 'Number'}, + {icon: CalendarIcon, name: 'Date'}, + {icon: SingleSelectIcon, name: 'Single select'}, + {icon: IterationsIcon, name: 'Iteration'} +] + +const Example = () => { + const [selectedIndex, setSelectedIndex] = React.useState(1) + const selectedType = fieldTypes[selectedIndex] + + return ( + + + {selectedType.name} + + + + {fieldTypes.map((type, index) => ( + setSelectedIndex(index)}> + + + + {type.name} + + ))} + + + + ) +} + +render() ``` -## Component props - -| Name | Type | Default | Description | -| :------------ | :------------------------------------ | :---------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| items | `ItemProps[]` | `undefined` | Required. A list of item objects conforming to the `ActionList.Item` props interface. | -| renderItem | `(props: ItemProps) => JSX.Element` | `ActionList.Item` | Optional. If defined, each item in `items` will be passed to this function, allowing for `ActionList`-wide custom item rendering. | -| groupMetadata | `GroupProps[]` | `undefined` | Optional. If defined, `ActionList` will group `items` into `ActionList.Group`s separated by `ActionList.Divider` according to their `groupId` property. | -| renderAnchor | `(props: ButtonProps) => JSX.Element` | `Button` | Optional. If defined, provided component will be used to render the menu anchor. Will receive the selected `Item` text as `children` prop when an item is activated. | -| anchorContent | React.ReactNode | `undefined` | Optional. If defined, it will be passed to the trigger as the elements child. | -| onAction | (props: ItemProps) => void | `undefined` | Optional. If defined, this function will be called when a menu item is activated either by a click or a keyboard press. | -| open | boolean | `undefined` | Optional. If defined, ActionMenu will use this to control the open/closed state of the Overlay instead of controlling the state internally. Should be used in conjunction with the `setOpen` prop. | -| setOpen | (state: boolean) => void | `undefined` | Optional. If defined, ActionMenu will use this to control the open/closed state of the Overlay instead of controlling the state internally. Should be used in conjunction with the `open` prop. | +### With External Anchor + +To create an anchor outside of the menu, you need to switch to controlled mode for the menu and pass it as `anchorRef` to `ActionMenu`. Make sure you add `aria-expanded` and `aria-haspopup` to the external anchor: + +```javascript live noinline +const Example = () => { + const [open, setOpen] = React.useState(false) + const anchorRef = React.createRef() + + return ( + <> + + + + + + Copy link + Quote reply + Edit comment + + Delete file + + + + + ) +} + +render() +``` + +### With Overlay Props + +To create an anchor outside of the menu, you need to switch to controlled mode for the menu and pass it as `anchorRef` to `ActionMenu`: + +```javascript live noinline +const handleEscape = () => alert('you hit escape!') + +render( + + Open Actions Menu + + + + Open current Codespace + + Your existing Codespace will be opened to its previous state, and you'll be asked to manually switch to + new-branch. + + ⌘O + + + Create new Codespace + + Create a brand new Codespace with a fresh image and checkout this branch. + + ⌘C + + + + +) +``` + +## Props / API reference + +### ActionMenu + + + + Recommended: ActionMenu.Button or ActionMenu.Anchor with{' '} + ActionMenu.Overlay + + } + /> + + If defined, will control the open/closed state of the overlay. Must be used in conjuction with{' '} + onOpenChange. + + } + /> + + If defined, will control the open/closed state of the overlay. Must be used in conjuction with{' '} + open. + + } + /> + + + +### ActionMenu.Button + + + + Button docs} + /> + + +### ActionMenu.Anchor + + + + + +### ActionMenu.Overlay + + + + + Overlay docs} + /> + + +## Status + + + +## Further reading + +[Interface guidelines: Action List + Menu](https://primer.style/design/components/action-list) + +## Related components + +- [ActionList](/ActionList) +- [SelectPanel](/SelectPanel) +- [Button](/drafts/Button2) diff --git a/docs/content/AnchoredOverlay.mdx b/docs/content/AnchoredOverlay.mdx index 92af9e42515..6ccd4cd7b27 100644 --- a/docs/content/AnchoredOverlay.mdx +++ b/docs/content/AnchoredOverlay.mdx @@ -20,7 +20,11 @@ See also [Overlay positioning](/Overlay#positioning). const closeOverlay = React.useCallback(() => setIsOpen(false), [setIsOpen]) return ( Click me to open} + renderAnchor={anchorProps => ( + + )} open={isOpen} onOpen={openOverlay} onClose={closeOverlay} diff --git a/docs/content/Autocomplete.mdx b/docs/content/Autocomplete.mdx index a5a55aa63a6..1a0454b74da 100644 --- a/docs/content/Autocomplete.mdx +++ b/docs/content/Autocomplete.mdx @@ -374,7 +374,11 @@ const InOverlayWithCustomScrollContainerRef = () => { height="xsmall" focusTrapSettings={{initialFocusRef: inputRef}} side="inside-top" - renderAnchor={props => Pick branches} + renderAnchor={props => ( + + )} > Pick branches diff --git a/docs/content/drafts/Button2.mdx b/docs/content/Button.mdx similarity index 89% rename from docs/content/drafts/Button2.mdx rename to docs/content/Button.mdx index 95dfde29c8b..e3adc9f2921 100644 --- a/docs/content/drafts/Button2.mdx +++ b/docs/content/Button.mdx @@ -1,15 +1,13 @@ --- -componentId: button_v2 -title: Button v2 +componentId: button +title: Button status: Alpha source: https://github.com/primer/react/tree/main/src/Button2 storybook: '/react/storybook?path=/story/composite-components-button2' description: Use button for the main actions on a page or form. --- -import {Props} from '../../src/props' -import {ComponentChecklist} from '../../src/component-checklist' -import {Button} from '@primer/react/drafts' +import {Button, IconButton, LinkButton} from '@primer/react/drafts' ## Usage @@ -85,12 +83,29 @@ It is recommended to use an octicon here. ### Icon only button A separate component called `IconButton` is used if the action shows only an icon with no text. This button will remain square in shape. -Read more at [IconButton docs](/drafts/IconButton) ```jsx live drafts Search ``` +### Different sized icon buttons + +`IconButton` also supports the three different sizes. `small`, `medium`, `large`. + +```jsx live drafts +<> + + Search + + + Search + + + Search + + +``` + ### Counter component A common use case for primer is a button with a counter component which shows the child count value. diff --git a/docs/content/Checkbox.mdx b/docs/content/Checkbox.mdx index 472e13132da..4cfe9901f8e 100644 --- a/docs/content/Checkbox.mdx +++ b/docs/content/Checkbox.mdx @@ -7,8 +7,6 @@ storybook: '/react/storybook?path=/story/forms-checkbox--default' componentId: checkbox --- -import {ComponentChecklist} from '../src/component-checklist' - ## Examples diff --git a/docs/content/CheckboxGroup.mdx b/docs/content/CheckboxGroup.mdx index 53c31d75278..a0eb1fcee03 100644 --- a/docs/content/CheckboxGroup.mdx +++ b/docs/content/CheckboxGroup.mdx @@ -8,7 +8,6 @@ storybook: '/react/storybook/?path=/story/forms-checkboxgroup-examples--basic' import {CheckboxGroup, Checkbox, Box} from '@primer/components' import {CheckIcon, XIcon, AlertIcon} from '@primer/octicons-react' -import {ComponentChecklist} from '../src/component-checklist' ## Examples diff --git a/docs/content/CounterLabel.mdx b/docs/content/CounterLabel.mdx index e66ac9c1bae..50c0041dd60 100644 --- a/docs/content/CounterLabel.mdx +++ b/docs/content/CounterLabel.mdx @@ -6,9 +6,6 @@ status: Alpha source: https://github.com/primer/react/blob/main/src/CounterLabel.tsx --- -import {ComponentChecklist} from '../src/component-checklist' -import {PropsTable} from '../src/props-table' - ## Example ```jsx live @@ -22,7 +19,7 @@ import {PropsTable} from '../src/props-table' ## Props - - + GitHub diff --git a/docs/content/drafts/IconButton.mdx b/docs/content/IconButton.mdx similarity index 95% rename from docs/content/drafts/IconButton.mdx rename to docs/content/IconButton.mdx index 3d6c9e5c2c6..68409d6d40e 100644 --- a/docs/content/drafts/IconButton.mdx +++ b/docs/content/IconButton.mdx @@ -6,9 +6,6 @@ storybook: '/react/storybook?path=/story/composite-components-button2' description: An accessible button component with no text and only icon. --- -import {Props} from '../../src/props' -import {ComponentChecklist} from '../../src/component-checklist' - ## Usage ### Installation diff --git a/docs/content/Label.mdx b/docs/content/Label.mdx index 37ccd68e25c..1a28230a651 100644 --- a/docs/content/Label.mdx +++ b/docs/content/Label.mdx @@ -1,52 +1,76 @@ --- title: Label -description: Use Label components to add contextual metadata to a design. -status: Alpha -source: https://github.com/primer/react/blob/main/src/Label.tsx componentId: label +status: Alpha +source: https://github.com/primer/react/tree/main/src/Label +storybook: '/react/storybook?path=story/labels-label--label' +description: Use Label components to add contextual metadata to a design. --- -## Example +## Examples -```jsx live -<> - - - - +### Basic - - - - - - - +```javascript live noinline +render() +``` + +### Variants + +```javascript live noinline +render( + <> + + + + + + + + + + + +) +``` + +### Sizes + +```javascript live noinline +render( + <> + + + +) ``` ## Props +### Label + - - - - + + ## Status @@ -54,12 +78,13 @@ componentId: label + Link to Primer + +``` + +### Other examples of using a LinkButton + +`LinkButton` also + +- supports the three different sizes. `small`, `medium`, `large`. +- supports the different variants in [Button]('../Button2') +- supports leadingIcon and trailingIcon + +```jsx live drafts + + Small link + + Large link + + + Invisible link + + + Danger link + + + Link with arrow + + +``` + +## API reference + +Native ` Button danger diff --git a/docs/content/ChoiceFieldset.mdx b/docs/content/deprecated/ChoiceFieldset.mdx similarity index 98% rename from docs/content/ChoiceFieldset.mdx rename to docs/content/deprecated/ChoiceFieldset.mdx index 549f8f77795..431992cd82b 100644 --- a/docs/content/ChoiceFieldset.mdx +++ b/docs/content/deprecated/ChoiceFieldset.mdx @@ -7,7 +7,6 @@ storybook: '/react/storybook/?path=/story/forms-choicefieldset--radio-group' import {ChoiceFieldset, Box} from '@primer/components' import {CheckIcon, XIcon, AlertIcon} from '@primer/octicons-react' -import {ComponentChecklist} from '../src/component-checklist' A `ChoiceFieldset` is a controlled component that is used to render a related set of checkbox or radio inputs. @@ -19,7 +18,7 @@ Use [CheckboxGroup](/CheckboxGroup) or [RadioGroup](/RadioGroup) instead. ### Basic -```jsx live +```jsx live deprecated Color mode @@ -33,7 +32,7 @@ Use [CheckboxGroup](/CheckboxGroup) or [RadioGroup](/RadioGroup) instead. ### Using an onSelect handler -```javascript live noinline +```javascript live noinline deprecated const WithOnSelectHandler = () => { const [selectedChoices, setSelectedChoices] = React.useState([]) const choices = [ @@ -94,7 +93,7 @@ render() ### Checkbox group -```jsx live +```jsx live deprecated Prefered Primer component interface @@ -109,7 +108,7 @@ render() ### Disabled -```jsx live +```jsx live deprecated Color mode @@ -123,7 +122,7 @@ render() ### Required -```jsx live +```jsx live deprecated Color mode @@ -137,7 +136,7 @@ render() ### With pre-selected choices -```jsx live +```jsx live deprecated Prefered Primer component interface @@ -152,7 +151,7 @@ render() ### With validation -```javascript live noinline +```javascript live noinline deprecated const choices = [ { value: 'figma', @@ -222,7 +221,7 @@ render() ### A visually hidden legend -```jsx live +```jsx live deprecated Color mode @@ -236,7 +235,7 @@ render() ### With a ChoiceFieldset.Description -```jsx live +```jsx live deprecated Notification preferences @@ -271,7 +270,7 @@ render() ### With one disabled item -```jsx live +```jsx live deprecated Color mode @@ -287,7 +286,7 @@ render() ### Items with a caption and a leading visual -```jsx live +```jsx live deprecated Notification preferences diff --git a/docs/content/ChoiceInputField.mdx b/docs/content/deprecated/ChoiceInputField.mdx similarity index 87% rename from docs/content/ChoiceInputField.mdx rename to docs/content/deprecated/ChoiceInputField.mdx index fee25034321..d4c9b640c31 100644 --- a/docs/content/ChoiceInputField.mdx +++ b/docs/content/deprecated/ChoiceInputField.mdx @@ -7,10 +7,8 @@ source: https://github.com/primer/react/blob/main/src/ChoiceInputField.tsx storybook: '/react/storybook?path=/story/forms-choiceinputfield--checkbox-input-field' --- -import {ChoiceInputField, Checkbox, Radio} from '@primer/react' +import {Checkbox, Radio} from '@primer/react' import {MarkGithubIcon} from '@primer/octicons-react' -import {PropsTable} from '../src/props-table' -import {ComponentChecklist} from '../src/component-checklist' ## Deprecation @@ -20,7 +18,7 @@ Use [FormControl](/FormControl) instead. ### Checkbox -```jsx live +```jsx live deprecated Option one @@ -29,7 +27,7 @@ Use [FormControl](/FormControl) instead. ### Radio -```jsx live +```jsx live deprecated
Option one @@ -44,7 +42,7 @@ Use [FormControl](/FormControl) instead. ### Disabled field -```jsx live +```jsx live deprecated Option one @@ -53,7 +51,7 @@ Use [FormControl](/FormControl) instead. ### With a caption -```jsx live +```jsx live deprecated Option One @@ -63,7 +61,7 @@ Use [FormControl](/FormControl) instead. ### With a LeadingVisual -```jsx live +```jsx live deprecated <> Option one @@ -93,18 +91,18 @@ The container that handles the layout and passes the relevant IDs and ARIA attri `ChoiceInputField.Label` and `ChoiceInputField.Input` are required children. - - - - + ### ChoiceInputField.Caption @@ -125,7 +123,7 @@ A `ChoiceInputField.Label` must be passed, but it may be visually hidden. If this field needs additional context, a `ChoiceInputField.Caption` may be used to render hint text. - - - -## Related components - -- [ChoiceFieldset](/ChoiceFieldset) -- [Checkbox](/Checkbox) -- [Radio](/Radio) diff --git a/docs/content/deprecated/Dialog.md b/docs/content/deprecated/Dialog.md index aafa7065703..dcd79b30623 100644 --- a/docs/content/deprecated/Dialog.md +++ b/docs/content/deprecated/Dialog.md @@ -9,7 +9,7 @@ Use [Dialog2](/Dialog2) instead. **Before** -```jsx +```jsx deprecated setOpen(false)} aria-labelledby="header-id"> Title @@ -20,7 +20,7 @@ Use [Dialog2](/Dialog2) instead. **After** -```jsx +```jsx deprecated { open && ( {([isOpen, setIsOpen]) => { const returnFocusRef = React.useRef(null) @@ -87,7 +87,7 @@ If you're running into z-index issues or are rendering the component inside of a You can also pass any non-text content into the header: -```jsx live +```jsx deprecated live {([isOpen, setIsOpen]) => { const returnFocusRef = React.useRef(null) diff --git a/docs/content/deprecated/Dropdown.md b/docs/content/deprecated/Dropdown.md index b53bb11d42a..f08fd426d2f 100644 --- a/docs/content/deprecated/Dropdown.md +++ b/docs/content/deprecated/Dropdown.md @@ -5,7 +5,7 @@ status: Deprecated ## Deprecation -Use [DropdownMenu](/DropdownMenu) instead. +Use [ActionMenu](/ActionMenu) instead. --- @@ -17,7 +17,7 @@ Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to thi ## Default example -```jsx live +```jsx live deprecated Dropdown @@ -30,7 +30,7 @@ Dropdown.Menu wraps your menu content. Be sure to pass a `direction` prop to thi ## With custom button -```jsx live +```jsx live deprecated Dropdown diff --git a/docs/content/DropdownMenu.mdx b/docs/content/deprecated/DropdownMenu.mdx similarity index 65% rename from docs/content/DropdownMenu.mdx rename to docs/content/deprecated/DropdownMenu.mdx index f74fbda16f2..df48fbc532c 100644 --- a/docs/content/DropdownMenu.mdx +++ b/docs/content/deprecated/DropdownMenu.mdx @@ -1,14 +1,91 @@ --- componentId: dropdown_menu title: DropdownMenu -status: Alpha +status: Deprecated --- A `DropdownMenu` provides an anchor (button by default) that will open a floating menu of selectable items. The menu can be opened and navigated using keyboard or mouse. When an item is selected, the menu will close and the `onChange` callback will be called. If the default anchor button is used, the anchor contents will be updated with the selection. +## Deprecation + +Use [new version of ActionMenu](/ActionMenu#with-selection) with composable API, design updates and accessibility fixes. + +**Before** + +```jsx +const fieldTypes = [ + {key: 0, text: 'Text'}, + {key: 1, text: 'Number'}, + {key: 3, text: 'Date'}, + {key: 4, text: 'Single select'}, + {key: 5, text: 'Iteration'} +] + +const Example = () => { + const [selectedType, setSelectedType] = React.useState() + + return ( + ( + + {children} + + )} + placeholder="Field type" + items={fieldTypes} + selectedItem={selectedType} + onChange={setSelectedType} + /> + ) +} +``` + +**After** + +Instead of `DropdownMenu`, you can use the `ActionMenu` with `ActionList selectionVariant=single`, this will give menu items the correct semantics: + +```jsx +const fieldTypes = [ + {id: 0, text: 'Text'}, + {id: 1, text: 'Number'}, + {id: 3, text: 'Date'}, + {id: 4, text: 'Single select'}, + {id: 5, text: 'Iteration'} +] + +const Example = () => { + const [selectedType, setSelectedType] = React.useState() + + render( + + {selectedType.name || 'Field type'} + + + {fieldTypes.map(type => ( + setSelectedType(type)} + > + {type.name} + + ))} + + + + ) +} +``` + +Or continue using deprecated API: + +```js +import {DropdownMenu} from '@primer/react/deprecated' +``` + ## Example -```javascript live noinline +```javascript live noinline deprecated function DemoComponent() { const items = React.useMemo( () => [ diff --git a/docs/content/deprecated/Flex.md b/docs/content/deprecated/Flex.md index 67e7fa385b7..5ad6838dfc8 100644 --- a/docs/content/deprecated/Flex.md +++ b/docs/content/deprecated/Flex.md @@ -12,7 +12,7 @@ Use [Box](/Box) instead. **Before** -```jsx +```jsx deprecated Item 1 @@ -22,7 +22,7 @@ Use [Box](/Box) instead. **After** -```jsx +```jsx deprecated Item 1 @@ -32,7 +32,7 @@ Use [Box](/Box) instead. ## Default example -```jsx live +```jsx deprecated live diff --git a/docs/content/FormGroup.md b/docs/content/deprecated/FormGroup.md similarity index 98% rename from docs/content/FormGroup.md rename to docs/content/deprecated/FormGroup.md index 7ed49c395af..143c750db0e 100644 --- a/docs/content/FormGroup.md +++ b/docs/content/deprecated/FormGroup.md @@ -12,7 +12,7 @@ Use [FormControl](/FormControl) instead. ## Default example -```jsx live +```jsx live deprecated <> Example text diff --git a/docs/content/deprecated/Grid.md b/docs/content/deprecated/Grid.md index 305bed992be..905630fe9e7 100644 --- a/docs/content/deprecated/Grid.md +++ b/docs/content/deprecated/Grid.md @@ -12,7 +12,7 @@ Use [Box](/Box) instead. **Before** -```jsx +```jsx deprecated 1 @@ -25,7 +25,7 @@ Use [Box](/Box) instead. **After** -```jsx +```jsx deprecated 1 @@ -38,7 +38,7 @@ Use [Box](/Box) instead. ## Default example -```jsx live +```jsx deprecated live 1 diff --git a/docs/content/InputField.mdx b/docs/content/deprecated/InputField.mdx similarity index 96% rename from docs/content/InputField.mdx rename to docs/content/deprecated/InputField.mdx index d92ce7cbb91..6da7689f800 100644 --- a/docs/content/InputField.mdx +++ b/docs/content/deprecated/InputField.mdx @@ -7,7 +7,7 @@ source: https://github.com/primer/react/blob/main/src/InputField/InputField.tsx storybook: '/react/storybook?path=/story/forms-inputfield--text-input-field' --- -import {InputField, TextInputWithTokens, Autocomplete, Select} from '@primer/react' +import {TextInputWithTokens, Autocomplete, Select} from '@primer/react' ## Deprecation @@ -17,7 +17,7 @@ Use [FormControl](/FormControl) instead. ### Basic -```jsx live +```jsx live deprecated Name @@ -26,7 +26,7 @@ Use [FormControl](/FormControl) instead. ### Required -```jsx live +```jsx live deprecated Name @@ -35,7 +35,7 @@ Use [FormControl](/FormControl) instead. ### Disabled -```jsx live +```jsx live deprecated Name @@ -44,7 +44,7 @@ Use [FormControl](/FormControl) instead. ### Using different input components -```javascript live noinline +```javascript live noinline deprecated const TextInputWithTokensExample = () => { const [tokens, setTokens] = React.useState([ {text: 'zero', id: 0}, @@ -115,7 +115,7 @@ Every input must have a corresponding label to be accessible to assistive techno -```jsx live +```jsx live deprecated Name @@ -124,7 +124,7 @@ Every input must have a corresponding label to be accessible to assistive techno ### With a caption -```jsx live +```jsx live deprecated Name @@ -134,7 +134,7 @@ Every input must have a corresponding label to be accessible to assistive techno ### With validation -```javascript live noinline +```javascript live noinline deprecated const ValidationExample = () => { const [value, setValue] = React.useState('mona lisa') const [validationResult, setValidationResult] = React.useState() diff --git a/docs/content/deprecated/Label.mdx b/docs/content/deprecated/Label.mdx new file mode 100644 index 00000000000..6546cc905ec --- /dev/null +++ b/docs/content/deprecated/Label.mdx @@ -0,0 +1,74 @@ +--- +title: Label +description: Use Label components to add contextual metadata to a design. +status: Deprecated +source: https://github.com/primer/react/blob/main/src/Label.tsx +componentId: legacy_label +--- + +## Deprecation + +Use the new [Label](/Label) instead. + +## Example + +```jsx live deprecated +<> + + + + + + + + + + + + +``` + +## Props + + + + + + + + +## Status + + diff --git a/docs/content/deprecated/Position.md b/docs/content/deprecated/Position.md index 74212be10fa..fb2006117ca 100644 --- a/docs/content/deprecated/Position.md +++ b/docs/content/deprecated/Position.md @@ -12,7 +12,7 @@ Use [Box](/Box) instead. **Before** -```jsx +```jsx deprecated <> ... ... @@ -24,7 +24,7 @@ Use [Box](/Box) instead. **After** -```jsx +```jsx deprecated <> ... ... @@ -36,7 +36,7 @@ Use [Box](/Box) instead. ## Default examples -```jsx live +```jsx deprecated live Relative + Absolute diff --git a/docs/content/deprecated/SelectMenu.md b/docs/content/deprecated/SelectMenu.md index 12db537bc78..85475d0a187 100644 --- a/docs/content/deprecated/SelectMenu.md +++ b/docs/content/deprecated/SelectMenu.md @@ -3,13 +3,19 @@ title: SelectMenu status: Deprecated --- +## Deprecation + +Use [ActionMenu](/ActionMenu) instead. + +--- + The `SelectMenu` components are a suite of components which can be combined together to make several different variations of our GitHub select menu. At it's most basic form, a select menu is comprised of a `SelectMenu` wrapper, which contains a `summary` component of your choice and a `Select.Modal` which contains the select menu content. Use `SelectMenu.List` to wrap items in the select menu, and `SelectMenu.Item` to wrap each item. Several additional components exist to provide even more functionality: `SelectMenu.Header`, `SelectMenu.Filter`, `SelectMenu.Tabs`, `SelectMenu.TabPanel` `SelectMenu.Footer` and `SelectMenu.Divider`. ## Basic Example -```jsx live +```jsx deprecated live @@ -28,7 +34,7 @@ Several additional components exist to provide even more functionality: `SelectM Main wrapper component for select menu. -```jsx +```jsx deprecated {/* all other sub components are wrapped here*/} ``` @@ -56,7 +62,7 @@ SelectMenu.MenuContext is a [context object](https://reactjs.org/docs/context.ht ### Example Usage -```jsx +```jsx deprecated import {SelectMenu, Button} from `@primer/react` import React, {useContext} from 'react' @@ -83,7 +89,7 @@ const MyButton = () => { Used to wrap the content in a `SelectMenu`. -```jsx +```jsx deprecated {/* all menu content is wrapped in the modal*/} ``` @@ -91,7 +97,7 @@ Used to wrap the content in a `SelectMenu`. Use the `align='right'` prop to align the modal to the right. Note that this only modifies alignment for the modal, and not the SelectMenu itself. You will need to wrap the SelectMenu in a relatively positioned element for this to work properly. -```jsx live +```jsx deprecated live @@ -120,7 +126,7 @@ Use the `align='right'` prop to align the modal to the right. Note that this onl Used to wrap the select menu list content. All menu items **must** be wrapped in a SelectMenu.List in order for the accessibility keyboard handling to function properly. If you are using the `SelectMenu.TabPanel` you do not need to provide a `SelectMenu.List` as that component renders a `SelectMenu.List` as a wrapper. -```jsx +```jsx deprecated {/* all menu list items are wrapped in the list*/} ``` @@ -136,7 +142,7 @@ Individual items in a select menu. SelectMenu.Item renders an anchor tag by defa You can use a `button` tag instead by utilizing the [`as` prop](/core-concepts#the-as-prop). Be sure to consider [which HTML element is the right choice](https://marcysutton.com/links-vs-buttons-in-modern-web-applications) for your usage of the component. -```jsx +```jsx deprecated {/* wraps an individual list item*/} @@ -154,7 +160,7 @@ You can use a `button` tag instead by utilizing the [`as` prop](/core-concepts#t Use a `SelectMenu.Filter` to add a filter UI to your select menu. Users are expected to implement their own filtering and manage the state of the `value` prop on the input. This gives users more flexibility over the type of filtering and type of content passed into each select menu item. -```jsx live +```jsx deprecated live @@ -192,7 +198,7 @@ Each `Select.Menu` tab will need to have an `index` prop. The first tab should b If you need access to the selected tab state, you can find it in the MenuContext object exported from `SelectMenu` as `MenuContext.selectedTab`. -```jsx live +```jsx deprecated live @@ -227,7 +233,7 @@ Used for each individual tab inside of a `SelectMenu.Tabs`. Be sure to set the ` The `onClick` prop is optional and can be used for any events or data fetching you might need to trigger on tab clicks. -```jsx +```jsx deprecated <> @@ -249,7 +255,7 @@ Wraps the content for each tab. Make sure to use the `tabName` prop to identify **Note**: SelectMenu.TabPanel wraps content in a SelectMenu.List, so adding a SelectMenu.List manually is not necessary. -```jsx +```jsx deprecated {/* Wraps content for each tab */} ``` @@ -264,7 +270,7 @@ Wraps the content for each tab. Make sure to use the `tabName` prop to identify Use a `SelectMenu.Divider` to add information between items in a `SelectMenu.List`. -```jsx live +```jsx deprecated live @@ -290,7 +296,7 @@ Use a `SelectMenu.Divider` to add information between items in a `SelectMenu.Lis Use a `SelectMenu.Footer` to add content to the bottom of the select menu. -```jsx live +```jsx deprecated live @@ -316,7 +322,7 @@ Use a `SelectMenu.Footer` to add content to the bottom of the select menu. Use a `SelectMenu.Header` to add a header to the top of the select menu content. -```jsx live +```jsx deprecated live @@ -344,7 +350,7 @@ Use a `SelectMenu.LoadingAnimation` to add a loading animation inside of the Sel **Note**: You will need to handle showing/hiding the appropriate modal content for your application during the loading state. We recommend always showing the `SelectMenu.Filter` and `SelectMenu.Header` (if used) and hiding the rest of the modal content during the loading state. -```jsx live +```jsx deprecated live diff --git a/docs/content/drafts/ActionList2.mdx b/docs/content/drafts/ActionList2.mdx deleted file mode 100644 index bf842be1fe6..00000000000 --- a/docs/content/drafts/ActionList2.mdx +++ /dev/null @@ -1,449 +0,0 @@ ---- -componentId: action_list2 -title: ActionList v2 -status: Alpha -source: https://github.com/primer/react/tree/main/src/ActionList2 -storybook: '/react/storybook?path=/story/composite-components-actionlist2' -description: An ActionList is a list of items that can be activated or selected. ActionList is the base component for many menu-type components, including DropdownMenu and ActionMenu. ---- - -import {Avatar} from '@primer/react' -import {ActionList} from '@primer/react/drafts' -import {LinkIcon, AlertIcon, ArrowRightIcon} from '@primer/octicons-react' -import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code' - - - - - - - - github.com/primer - - A React implementation of GitHub's Primer Design System - - - - - - - mona - Monalisa Octocat - - - - - - 4 vulnerabilities - - - - - - - -```js -import {ActionList} from '@primer/react/drafts' -``` - -## Examples - -### Minimal example - -```jsx live drafts - - New file - Copy link - Edit file - - Delete file - -``` - -### With leading visual - -Leading visuals are optional and appear at the start of an item. They can be octicons, avatars, and other custom visuals that fit a small area. - - -```jsx live drafts - - - - github.com/primer - - - - 4 vulnerabilities - - - - mona - - - -``` - -### With trailing visual - -Trailing visual and trailing text can display auxiliary information. They're placed at the right of the item, and can denote status, keyboard shortcuts, or be used to set expectations about what the action does. - -```jsx live drafts - - - New file - ⌘ + N - - - Copy link - ⌘ + C - - - Edit file - ⌘ + E - - - Delete file - ⌫ - - -``` - -### With description and dividers - -Item dividers allow users to parse heavier amounts of information. They're placed between items and are useful in complex lists, particularly when descriptions or multi-line text is present. - -```jsx live drafts - - - - - - mona - Monalisa Octocat - - - - - - hubot - Hubot - - - - - - primer-css - GitHub Design Systems Bot - - -``` - -### With links - -When you want to add links to the List instead of actions, use `ActionList.LinkItem` - - -```jsx live drafts - - - - - - github/primer - - - - - - MIT License - - - - - - 1.4k stars - - -``` - -### With groups - -```javascript live noinline drafts -const SelectFields = () => { - const [options, setOptions] = React.useState([ - {text: 'Status', selected: true}, - {text: 'Stage', selected: true}, - {text: 'Assignee', selected: true}, - {text: 'Team', selected: true}, - {text: 'Estimate', selected: false}, - {text: 'Due Date', selected: false} - ]) - - const visibleOptions = options.filter(option => option.selected) - const hiddenOptions = options.filter(option => !option.selected) - - const toggle = text => { - setOptions( - options.map(option => { - if (option.text === text) option.selected = !option.selected - return option - }) - ) - } - - return ( - - - {visibleOptions.map(option => ( - toggle(option.text)}> - {option.text} - - ))} - - - {hiddenOptions.map((option, index) => ( - toggle(option.text)}> - {option.text} - - ))} - {hiddenOptions.length === 0 && No hidden fields} - - - ) -} - -render() -``` - -## Props - -### ActionList - - - - - inset children are offset (vertically and horizontally) from list edges.{' '} - full children are flush (vertically and horizontally) with list edges - - } - /> - - - AriaRole - } - description={ - <> - ARIA role describing the function of the list. listbox and{' '} - menu are a common values. - - } - /> - - - -### ActionList.Item - - - - - danger indicates that the item is destructive. - - } - /> - - - - AriaRole - } - description={ - <> - ARIA role describing the function of the item. option is a common value. - - } - /> - - - -### ActionList.LinkItem - - - - MDN - } - /> - - -### ActionList.LeadingVisual - - - - - - -### ActionList.TrailingVisual - - - - - - -### ActionList.Description - - - - - inline descriptions are positioned beside primary text. block{' '} - descriptions are positioned below primary text. - - } - /> - - - -### ActionList.Group - - - - - - - inline descriptions are positioned beside primary text. block{' '} - descriptions are positioned below primary text. - - } - /> - - Set selectionVariant at the group level. - - } - /> - AriaRole - } - description={ - <> - ARIA role describing the function of the list inside the group. listbox and{' '} - menu are a common values. - - } - /> - - - -## Status - - - -## Further reading - -- [Interface guidelines: Action List](https://primer.style/design/components/action-list) - -## Related components - -- [ActionMenu](/drafts/ActionMenu2) -- [DropdownMenu](/DropdownMenu) -- [SelectPanel](/SelectPanel) diff --git a/docs/content/drafts/ActionMenu2.mdx b/docs/content/drafts/ActionMenu2.mdx deleted file mode 100644 index ba7e2357b54..00000000000 --- a/docs/content/drafts/ActionMenu2.mdx +++ /dev/null @@ -1,341 +0,0 @@ ---- -componentId: action_menu2 -title: ActionMenu v2 -status: Alpha -source: https://github.com/primer/react/tree/main/src/ActionMenu -storybook: '/react/storybook?path=/story/composite-components-actionmenu2' -description: An ActionMenu is an ActionList-based component for creating a menu of actions that expands through a trigger button. ---- - -import {Box, Avatar} from '@primer/react' -import {ActionMenu, ActionList} from '@primer/react/drafts' -import {Props} from '../../src/props' - -
- - - - Menu - - - - Copy link - ⌘C - - - Quote reply - ⌘Q - - - Edit comment - ⌘E - - - - Delete file - ⌘D - - - - - - -
- -```js -import {ActionMenu} from '@primer/react/drafts' -``` - -
- -## Examples - -### Minimal example - -`ActionMenu` ships with `ActionMenu.Button` which is an accessible trigger for the overlay. It's recommended to compose `ActionList` with `ActionMenu.Overlay` - -  - -```jsx live drafts - - Menu - - - - console.log('New file')}>New file - Copy link - Edit file - - Delete file - - - -``` - -### With a custom anchor - -You can choose to have a different _anchor_ for the Menu depending on the application's context. - -  - -```jsx live drafts - - - - - - - - - - - - - - Rename - - - - - - Archive all cards - - - - - - Delete - - - - -``` - -### With Groups - -```jsx live drafts - - Open column menu - - - - - - - - - repo:github/memex,github/github - - - - - - - - - Table - - Information-dense table optimized for operations across teams - - - - - - - Board - Kanban-style board focused on visual states - - - - - - - - - Save sort and filters to current view - - - - - - Save sort and filters to new view - - - - - - - - - View settings - - - - - -``` - -### With selection - -Use `selectionVariant` on `ActionList` to create a menu with single or multiple selection. - -```javascript live noinline drafts -const fieldTypes = [ - {icon: TypographyIcon, name: 'Text'}, - {icon: NumberIcon, name: 'Number'}, - {icon: CalendarIcon, name: 'Date'}, - {icon: SingleSelectIcon, name: 'Single select'}, - {icon: IterationsIcon, name: 'Iteration'} -] - -const Example = () => { - const [selectedIndex, setSelectedIndex] = React.useState(1) - const selectedType = fieldTypes[selectedIndex] - - return ( - - - {selectedType.name} - - - - {fieldTypes.map((type, index) => ( - setSelectedIndex(index)}> - {type.name} - - ))} - - - - ) -} - -render() -``` - -### With External Anchor - -To create an anchor outside of the menu, you need to switch to controlled mode for the menu and pass it as `anchorRef` to `ActionMenu`. Make sure you add `aria-expanded` and `aria-haspopup` to the external anchor: - -```javascript live noinline drafts -const Example = () => { - const [open, setOpen] = React.useState(false) - const anchorRef = React.createRef() - - return ( - <> - - - - - - Copy link - Quote reply - Edit comment - - Delete file - - - - - ) -} - -render() -``` - -### With Overlay Props - -To create an anchor outside of the menu, you need to switch to controlled mode for the menu and pass it as `anchorRef` to `ActionMenu`: - -```javascript live noinline drafts -const handleEscape = () => alert('you hit escape!') - -render( - - Open Actions Menu - - - - Open current Codespace - - Your existing Codespace will be opened to its previous state, and you'll be asked to manually switch to - new-branch. - - ⌘O - - - Create new Codespace - - Create a brand new Codespace with a fresh image and checkout this branch. - - ⌘C - - - - -) -``` - -## Props / API reference - -### ActionMenu - -| Name | Type | Default | Description | -| :----------- | :----------------------------- | :-----: | :----------------------------------------------------------------------------------------------------------------------- | -| children\* | `React.ReactElement[]` | - | Required. Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay` | -| open | `boolean` | - | Optional. If defined, will control the open/closed state of the overlay. Must be used in conjunction with `onOpenChange`. | -| onOpenChange | `(open: boolean) => void` | - | Optional. If defined, will control the open/closed state of the overlay. Must be used in conjunction with `open`. | -| anchorRef | `React.RefObject` | - | Optional. Useful for defining an external anchor | - -### ActionMenu.Button - -| Type | Default | Description | -| :----------------------------------------------- | :-----: | :---------------------------------------------------------------------------------------------------------------- | -| [Button v2 props](/drafts/Button2#api-reference) | - | You can pass all of the props that you would pass to a [`Button`](/drafts/Button2) component like `variant`, `sx` | - -### ActionMenu.Anchor - -| Name | Type | Default | Description | -| :--------- | :------------------- | :-----: | :-------------------------------- | -| children\* | `React.ReactElement` | - | Required. Accepts a single child. | - -### ActionMenu.Overlay - -| Name | Type | Default | Description | -| :--------------------------------------- | :-------------------- | :-----------------: | :-------------------------------------------------------------------------------------------- | -| children\* | `React.ReactElement[] | React.ReactElement` | Required. Recommended: [`ActionList`](/drafts/ActionList2) | -| [OverlayProps](/Overlay#component-props) | - | - | Optional. Props to be spread on the internal [`AnchoredOverlay`](/AnchoredOverlay) component. | - -## Status - - - -## Further reading - -[Interface guidelines: Action List + Menu](https://primer.style/design/components/action-list) - -## Related components - -- [ActionList](/drafts/ActionList2) -- [SelectPanel](/SelectPanel) -- [Button](/drafts/Button2) diff --git a/docs/content/drafts/DropdownMenu2.mdx b/docs/content/drafts/DropdownMenu2.mdx deleted file mode 100644 index cdd634c13ee..00000000000 --- a/docs/content/drafts/DropdownMenu2.mdx +++ /dev/null @@ -1,364 +0,0 @@ ---- -component_id: dropdown_menu -title: DropdownMenu v2 -status: Alpha -source: https://github.com/primer/react/tree/main/src/DropdownMenu2.tsx -storybook: '/react/storybook?path=/story/composite-components-dropdownmenu2' -description: Use DropdownMenu to select a single option from a list of menu options. ---- - -import {Box, Avatar} from '@primer/react' -import {DropdownMenu, ActionList} from '@primer/react/drafts' -import {Props} from '../../src/props' -import State from '../../components/State' -import {CalendarIcon, IterationsIcon, NumberIcon, SingleSelectIcon, TypographyIcon} from '@primer/octicons-react' - -
- - - {([selectedIndex, setSelectedIndex]) => { - const fieldTypes = [ - {icon: TypographyIcon, name: 'Text'}, - {icon: NumberIcon, name: 'Number'}, - {icon: CalendarIcon, name: 'Date'}, - {icon: SingleSelectIcon, name: 'Single select'}, - {icon: IterationsIcon, name: 'Iteration'} - ] - const selectedType = fieldTypes[selectedIndex] - return ( - - - - {selectedType.name} - - - - {fieldTypes.map(({icon: Icon, name}, index) => ( - setSelectedIndex(index)} - > - {name} - - ))} - - - - - ) - }} - - -
- -```js -import {DropdownMenu} from '@primer/react/drafts' -``` - -
- -## Examples - -### Minimal example - -`DropdownMenu` ships with `DropdownMenu.Button` which is an accessible trigger for the overlay. It's recommended to compose `ActionList` with `DropdownMenu.Overlay` - -  - -```javascript live noinline drafts -const fieldTypes = [ - {icon: TypographyIcon, name: 'Text'}, - {icon: NumberIcon, name: 'Number'}, - {icon: CalendarIcon, name: 'Date'}, - {icon: SingleSelectIcon, name: 'Single select'}, - {icon: IterationsIcon, name: 'Iteration'} -] - -const Example = () => { - const [selectedIndex, setSelectedIndex] = React.useState(1) - const selectedType = fieldTypes[selectedIndex] - - return ( - - - {selectedType.name} - - - - {fieldTypes.map((type, index) => ( - setSelectedIndex(index)}> - {type.name} - - ))} - - - - ) -} - -render() -``` - -### Customise Button - -`Dropdown.Button` uses `Button v2` so you can pass props like `variant` and `leadingIcon` that `Button v2` accepts. - -```javascript live noinline drafts -const Example = () => { - const [duration, setDuration] = React.useState(1) - - return ( - - - {duration} {duration > 1 ? 'weeks' : 'week'} - - - - {[1, 2, 3, 4, 5, 6].map(weeks => ( - setDuration(weeks)}> - {weeks} {weeks > 1 ? 'weeks' : 'week'} - - ))} - - - - ) -} - -render() -``` - -### With External Anchor - -To create an anchor outside of the menu, you need to switch to controlled mode for the menu and pass `open` and `onOpenChange` along with an `anchorRef` to `DropdownMenu`: - -```javascript live noinline drafts -const Example = () => { - const [open, setOpen] = React.useState(false) - const anchorRef = React.createRef() - - return ( - <> - - - - - - Text - Number - Date - Iteration - - - - - ) -} - -render() -``` - -### With Overlay Props - -```javascript live noinline drafts -const fieldTypes = [ - {icon: TypographyIcon, name: 'Text'}, - {icon: NumberIcon, name: 'Number'}, - {icon: CalendarIcon, name: 'Date'}, - {icon: SingleSelectIcon, name: 'Single select'}, - {icon: IterationsIcon, name: 'Iteration'} -] - -const Example = () => { - const handleEscape = () => alert('you hit escape!') - - const [selectedIndex, setSelectedIndex] = React.useState(1) - const selectedType = fieldTypes[selectedIndex] - - return ( - - - {selectedType.name} - - - - {fieldTypes.map((type, index) => ( - setSelectedIndex(index)}> - {type.name} - - ))} - - - - ) -} - -render() -``` - -### With a custom anchor - -You can choose to have a different _anchor_ for the Menu depending on the application's context. - -  - -```javascript live noinline drafts -render( - - - - - - - - Text - Number - Date - Iteration - - - -) -``` - - - -Use `DropdownMenu` to select an option from a small list. If you’re looking for filters or multiple selection, use [SelectPanel](/SelectPanel) instead. - - - -## Props - -### DropdownMenu - - - - Recommended: DropdownMenu.Button or DropdownMenu.Anchor with{' '} - DropdownMenu.Overlay - - } - /> - - If defined, will control the open/closed state of the overlay. Must be used in conjunction with{' '} - onOpenChange - - } - /> - - If defined, will control the open/closed state of the overlay. Must be used in conjunction with{' '} - open - - } - /> - - - -### DropdownMenu.Button - - - - ButtonProps - - } - description={ - <> - You can pass all of the props that you would pass to a{' '} - - Button - {' '} - component like variant, leadingIcon,{' '} - sx, etc. - - } - /> - - -### DropdownMenu.Anchor - - - - - -### DropdownMenu.Overlay - - - - Recommended:{' '} - - ActionList - - - } - /> - - Props to be spread on the internal{' '} - - AnchoredOverlay - - - } - /> - - -## Status - - - -## Further reading - -[Interface guidelines: Action List + Menu](https://primer.style/design/components/action-list) - -## Related components - -- [ActionList](/drafts/ActionList2) -- [ActionMenu](/ActionMenu2) -- [SelectPanel](/SelectPanel) diff --git a/docs/content/drafts/Label2.mdx b/docs/content/drafts/Label2.mdx deleted file mode 100644 index 5687f1e9cea..00000000000 --- a/docs/content/drafts/Label2.mdx +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Label v2 -componentId: label2 -status: Alpha -source: https://github.com/primer/react/tree/main/src/Label2 -storybook: '/react/storybook?path=story/labels-label--label' -description: Use Label components to add contextual metadata to a design. ---- - -## Examples - -### Basic - -```javascript live noinline -// import {Label} from '@primer/react/drafts' -const {Label} = drafts // ignore docs silliness; import like that ↑ - -render() -``` - -### Variants - -```javascript live noinline -// import {Label} from '@primer/react/drafts' -const {Label} = drafts // ignore docs silliness; import like that ↑ -render( - <> - - - - - - - - - - - -) -``` - -### Sizes - -```javascript live noinline -// import {Label} from '@primer/react/drafts' -const {Label} = drafts // ignore docs silliness; import like that ↑ -render( - <> - - - -) -``` - -## Props - -### Label - - - - - - -## Status - - diff --git a/docs/content/getting-started.md b/docs/content/getting-started.md index b4a857c30c3..6e2f2da5e49 100644 --- a/docs/content/getting-started.md +++ b/docs/content/getting-started.md @@ -18,12 +18,12 @@ You can now import Primer React from the main package module: ```javascript // using import syntax -import {Box, Flex} from '@primer/react' +import {Box} from '@primer/react' ``` ```javascript // using require syntax -const {Box, Flex} = require('@primer/react') +const {Box} = require('@primer/react') ``` ### Polyfills & Browser Support @@ -41,13 +41,11 @@ Module bundlers that use ECMAScript modules (ESM) will automatically tree-shake ```javascript // using import syntax import Box from '@primer/react/lib/Box' -import Flex from '@primer/react/lib/Flex' ``` ```javascript // using require syntax const Box = require('@primer/react/lib/Box') -const Flex = require('@primer/react/lib/Flex') ``` Note that the modules in the `lib` folder are CommonJS-style modules; if you're using ESM and a compatible module bundler, importing files individually from `lib` provides no benefit. @@ -59,8 +57,8 @@ Primer React ships with a few libraries labeled as peer dependencies. These libr Primer React requires the following libraries to be installed along with it: - `styled-components` at version 4.0.0 or higher -- `react` at versions 16.8.0 or higher -- `react-dom` at versions 16.8.0 or higher +- `react` at versions 17.x or higher +- `react-dom` at versions 17.x or higher ## ThemeProvider diff --git a/docs/content/philosophy.md b/docs/content/philosophy.md index e736ea90373..8cbe6ac77c5 100644 --- a/docs/content/philosophy.md +++ b/docs/content/philosophy.md @@ -3,21 +3,21 @@ title: Primer React Philosophy --- ## Presentational Components - We are focusing primarily on presentational components that help standardize common design patterns. Primer React components don't handle fetching and submitting data to/from APIs. If you would like to handle data in a Primer Component, feel free to create a wrapper around the Primer Component to do so. + +We are focusing primarily on presentational components that help standardize common design patterns. Primer React components don't handle fetching and submitting data to/from APIs. If you would like to handle data in a Primer Component, feel free to create a wrapper around the Primer Component to do so. ## Assume that people will break the rules, provide safe ways for them to do so -While we aim to standardize design in Primer React, we also provide some flexibility with constraint-based props. We offer system props via [styled-system](https://github.com/styled-system/styled-system) to allow users of the components to make small customizations, such as color and spacing, using values from the theme. Users also have the option to override the theme with a theme of their own. +While we aim to standardize design in Primer React, we also provide additional styling flexibility through the [`sx` prop](/overriding-styles). This enables small customizations to color and spacing, using values from the theme. Users also have the option to override the theme with a theme of their own. ## Pattern Components vs Helper Components Our components can roughly be categorized into two different component types: - - Pattern Components Pattern components help us repeat commonly used UI patterns and interactions in order to maintain our brand and provide a great user experience. Some examples of pattern components are `Button`, `Avatar`, or `Label`. - Helper Components -Helper components are components that help the user achieve common CSS patterns while maintaining some control over values used. Some examples of helper components are `Flex`, `Text`, `Grid`, and the `Position` components. +Helper components are components that help the user achieve common CSS patterns while maintaining some control over values used. An example of a helper component is `Box`. diff --git a/docs/content/system-props.mdx b/docs/content/system-props.mdx index 42dbb7bf8a3..5aff41be4cf 100644 --- a/docs/content/system-props.mdx +++ b/docs/content/system-props.mdx @@ -2,7 +2,7 @@ title: System Props --- -import {PropsList, COMMON, LAYOUT, BORDER, TYPOGRAPHY, FLEX, POSITION, GRID} from '../components' +import {PropsList, COMMON, LAYOUT, BORDER, TYPOGRAPHY} from '../components' @@ -20,7 +20,7 @@ All Primer React components have access to the `as` prop, provided by [styled-co For example, if you wanted to add some flex utilities to the `Text` component, you could do: -```jsx live +```jsx live deprecated Hello! ``` @@ -32,6 +32,3 @@ For example, if you wanted to add some flex utilities to the `Text` component, y | `TYPOGRAPHY` | | [styled-system typography docs](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#typography) | | `BORDER` | | [styled-system border docs](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#border) | | `LAYOUT` | | [styled-system layout docs](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#layout)
[styled-system misc docs](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#misc) | -| `POSITION` | | [styled-system position docs](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#position) | -| `FLEX` | | [styled-system flexbox docs](https://github.com/jxnblk/styled-system/blob/master/docs/table.md#flexbox) | -| `GRID` | | [styled-system grid docs](https://github.com/styled-system/styled-system/blob/master/docs/table.md#grid-layout) | diff --git a/docs/content/theming.md b/docs/content/theming.md index f5466afc3ea..94694d31730 100644 --- a/docs/content/theming.md +++ b/docs/content/theming.md @@ -50,7 +50,7 @@ Some components may break if your custom theme does not include all the same key ## Referencing theme values -You can reference theme values in your application using [system props](/system-props), the [`sx` prop](/overriding-styles), the `themeGet` function, or the `useTheme` hook. +You can reference theme values in your application using the [`sx` prop](/overriding-styles), the `themeGet` function, or the `useTheme` hook. diff --git a/docs/package-lock.json b/docs/package-lock.json index 97ba4dc1147..f7109a43471 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -8,7 +8,7 @@ "name": "docs", "version": "1.0.0", "dependencies": { - "@primer/gatsby-theme-doctocat": "^3.2.0", + "@primer/gatsby-theme-doctocat": "^3.2.1", "@primer/octicons-react": "^16.1.0", "@primer/primitives": "4.1.0", "@styled-system/prop-types": "^5.1.0", @@ -2719,69 +2719,28 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, + "node_modules/@primer/behaviors": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.1.0.tgz", + "integrity": "sha512-Ej2OUc3ZIFaR7WwIUqESO1DTzmpb7wc8xbTVRT9s52jZQDjN7g5iljoK3ocYZm+BIAcKn3MvcwB42hEk4Ga4xQ==" + }, "node_modules/@primer/component-metadata": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/@primer/component-metadata/-/component-metadata-0.4.1.tgz", "integrity": "sha512-iy5ZEeIRN6pFFG7px2ruuA726yVB/n4lsgM3msfdg9qJzfS9qE2JCqq2OuvQ+yXUTxb3JKROaDSH403kdpFR4Q==" }, - "node_modules/@primer/components": { - "version": "30.3.0", - "resolved": "https://registry.npmjs.org/@primer/components/-/components-30.3.0.tgz", - "integrity": "sha512-5W2WQtTzBsGE12+SIcc49RlosgkoamFDMkwNh5kKuQq1Ni9fXjxfWQaykh8CaWydcywMfnZbPcESKnuu+KfLZQ==", - "deprecated": "@primer/components has been renamed @primer/react. Use @primer/react instead.", - "dependencies": { - "@primer/octicons-react": "^13.0.0", - "@primer/primitives": "4.8.1", - "@radix-ui/react-polymorphic": "0.0.14", - "@react-aria/ssr": "3.1.0", - "@styled-system/css": "5.1.5", - "@styled-system/props": "5.1.5", - "@styled-system/theme-get": "5.1.2", - "@types/history": "4.7.8", - "@types/styled-components": "5.1.11", - "@types/styled-system": "5.1.12", - "@types/styled-system__css": "5.0.16", - "@types/styled-system__theme-get": "5.0.1", - "classnames": "2.3.1", - "color2k": "1.2.4", - "deepmerge": "4.2.2", - "focus-visible": "5.2.0", - "styled-system": "5.1.5" - }, - "peerDependencies": { - "react": "^17.0.0", - "react-dom": "^17.0.0", - "styled-components": "4.x || 5.x" - } - }, - "node_modules/@primer/components/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==", - "engines": { - "node": ">=8" - }, - "peerDependencies": { - "react": ">=15" - } - }, - "node_modules/@primer/components/node_modules/@primer/primitives": { - "version": "4.8.1", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.8.1.tgz", - "integrity": "sha512-mgr6+EKpn4DixuhLt3drk7QmNQO8M7RYONWovg1nkV7p56jklhDLfZmp1luLUee37eQGAxx3ToStL6gqINFjnQ==" - }, "node_modules/@primer/gatsby-theme-doctocat": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-3.2.0.tgz", - "integrity": "sha512-C/8X4xHKWmVf+TKlzWzvj65+BRbcTv6rWr1VoiFQsf6hQacEvzxe6BiTvuvZTFQ+P7Ei1TWKPnTOGbqg0VUSnw==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-3.2.1.tgz", + "integrity": "sha512-fwt/gttBmy8cwH2MaSb+/CQayytiRzxvLc9L7QoqxBUsEHkqiqkzjNX46TK+tv+Ntzs/pKyacR5yqXVN5GtfOw==", "dependencies": { "@babel/preset-env": "^7.5.5", "@babel/preset-react": "^7.0.0", "@mdx-js/mdx": "^1.0.21", "@mdx-js/react": "^1.0.21", "@primer/component-metadata": "^0.4.0", - "@primer/components": "^30.0.0", "@primer/octicons-react": "^16.0.0", + "@primer/react": "^34.5.0", "@styled-system/theme-get": "^5.0.12", "@testing-library/jest-dom": "^4.1.0", "@testing-library/react": "^9.1.3", @@ -2849,6 +2808,56 @@ "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.1.0.tgz", "integrity": "sha512-bACUj3Xl2z5dnYKE/76BpNqN4/JXFngf26dbb7Goph2PU5wcf+Z2Kk3nXwtJPGG8JByO+FcU3gpZjLNoyuLMHQ==" }, + "node_modules/@primer/react": { + "version": "34.6.0", + "resolved": "https://registry.npmjs.org/@primer/react/-/react-34.6.0.tgz", + "integrity": "sha512-a0Mh6YmpEyQF6ad0mnfOJoC+y1heDM4uuvBcQQKJQ28DVeif5mn+slCD2C9ZQvnhkl4qnh3iqXOTxmKN5fCHNQ==", + "dependencies": { + "@primer/behaviors": "1.1.0", + "@primer/octicons-react": "16.1.1", + "@primer/primitives": "7.1.1", + "@radix-ui/react-polymorphic": "0.0.14", + "@react-aria/ssr": "3.1.0", + "@styled-system/css": "5.1.5", + "@styled-system/props": "5.1.5", + "@styled-system/theme-get": "5.1.2", + "@types/styled-components": "5.1.11", + "@types/styled-system": "5.1.12", + "@types/styled-system__css": "5.0.16", + "@types/styled-system__theme-get": "5.0.1", + "classnames": "2.3.1", + "color2k": "1.2.4", + "deepmerge": "4.2.2", + "focus-visible": "5.2.0", + "history": "5.0.0", + "styled-system": "5.1.5" + }, + "engines": { + "node": ">=12", + "npm": ">=7" + }, + "peerDependencies": { + "react": "^17.0.0", + "react-dom": "^17.0.0", + "styled-components": "4.x || 5.x" + } + }, + "node_modules/@primer/react/node_modules/@primer/octicons-react": { + "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" + }, + "peerDependencies": { + "react": ">=15" + } + }, + "node_modules/@primer/react/node_modules/@primer/primitives": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.1.1.tgz", + "integrity": "sha512-+Gwo89YK1OFi6oubTlah/zPxxzMNaMLy+inECAYI646KIFdzzhAsKWb3z5tSOu5Ff7no4isRV64rWfMSKLZclw==" + }, "node_modules/@radix-ui/react-polymorphic": { "version": "0.0.14", "resolved": "https://registry.npmjs.org/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz", @@ -3310,11 +3319,6 @@ "@types/unist": "*" } }, - "node_modules/@types/history": { - "version": "4.7.8", - "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz", - "integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==" - }, "node_modules/@types/hoist-non-react-statics": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", @@ -14726,6 +14730,14 @@ "node": "*" } }, + "node_modules/history": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.0.0.tgz", + "integrity": "sha512-3NyRMKIiFSJmIPdq7FxkNMJkQ7ZEtVblOQ38VtKaA0zZMW1Eo6Q6W8oDKEflr1kNNTItSnk4JMCO1deeSgbLLg==", + "dependencies": { + "@babel/runtime": "^7.7.6" + } + }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -20423,9 +20435,9 @@ } }, "node_modules/prismjs": { - "version": "1.27.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz", - "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==", + "version": "1.26.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.26.0.tgz", + "integrity": "sha512-HUoH9C5Z3jKkl3UunCyiD5jwk0+Hz0fIgQ2nbwU2Oo/ceuTAQAg+pPVnfdt2TJWRVLcxKh9iuoYDUSc8clb5UQ==", "engines": { "node": ">=6" } @@ -25523,9 +25535,9 @@ } }, "node_modules/url-parse": { - "version": "1.5.9", - "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.9.tgz", - "integrity": "sha512-HpOvhKBvre8wYez+QhHcYiVvVmeF6DVnuSOOPhe3cTum3BnqHhvKaZm8FU5yTiOu/Jut2ZpB2rA/SbBA1JIGlQ==", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz", + "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==", "dependencies": { "querystringify": "^2.1.1", "requires-port": "^1.0.0" @@ -28867,60 +28879,28 @@ } } }, + "@primer/behaviors": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.1.0.tgz", + "integrity": "sha512-Ej2OUc3ZIFaR7WwIUqESO1DTzmpb7wc8xbTVRT9s52jZQDjN7g5iljoK3ocYZm+BIAcKn3MvcwB42hEk4Ga4xQ==" + }, "@primer/component-metadata": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/@primer/component-metadata/-/component-metadata-0.4.1.tgz", "integrity": "sha512-iy5ZEeIRN6pFFG7px2ruuA726yVB/n4lsgM3msfdg9qJzfS9qE2JCqq2OuvQ+yXUTxb3JKROaDSH403kdpFR4Q==" }, - "@primer/components": { - "version": "30.3.0", - "resolved": "https://registry.npmjs.org/@primer/components/-/components-30.3.0.tgz", - "integrity": "sha512-5W2WQtTzBsGE12+SIcc49RlosgkoamFDMkwNh5kKuQq1Ni9fXjxfWQaykh8CaWydcywMfnZbPcESKnuu+KfLZQ==", - "requires": { - "@primer/octicons-react": "^13.0.0", - "@primer/primitives": "4.8.1", - "@radix-ui/react-polymorphic": "0.0.14", - "@react-aria/ssr": "3.1.0", - "@styled-system/css": "5.1.5", - "@styled-system/props": "5.1.5", - "@styled-system/theme-get": "5.1.2", - "@types/history": "4.7.8", - "@types/styled-components": "5.1.11", - "@types/styled-system": "5.1.12", - "@types/styled-system__css": "5.0.16", - "@types/styled-system__theme-get": "5.0.1", - "classnames": "2.3.1", - "color2k": "1.2.4", - "deepmerge": "4.2.2", - "focus-visible": "5.2.0", - "styled-system": "5.1.5" - }, - "dependencies": { - "@primer/octicons-react": { - "version": "13.0.0", - "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-13.0.0.tgz", - "integrity": "sha512-j5XppNRCvgaMZLPsVvvmp6GSh7P5pq6PUbsfLNBWi2Kz3KYDeoGDWbPr5MjoxFOGUn6Hjnt6qjHPRxahd11vLQ==", - "requires": {} - }, - "@primer/primitives": { - "version": "4.8.1", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.8.1.tgz", - "integrity": "sha512-mgr6+EKpn4DixuhLt3drk7QmNQO8M7RYONWovg1nkV7p56jklhDLfZmp1luLUee37eQGAxx3ToStL6gqINFjnQ==" - } - } - }, "@primer/gatsby-theme-doctocat": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-3.2.0.tgz", - "integrity": "sha512-C/8X4xHKWmVf+TKlzWzvj65+BRbcTv6rWr1VoiFQsf6hQacEvzxe6BiTvuvZTFQ+P7Ei1TWKPnTOGbqg0VUSnw==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-3.2.1.tgz", + "integrity": "sha512-fwt/gttBmy8cwH2MaSb+/CQayytiRzxvLc9L7QoqxBUsEHkqiqkzjNX46TK+tv+Ntzs/pKyacR5yqXVN5GtfOw==", "requires": { "@babel/preset-env": "^7.5.5", "@babel/preset-react": "^7.0.0", "@mdx-js/mdx": "^1.0.21", "@mdx-js/react": "^1.0.21", "@primer/component-metadata": "^0.4.0", - "@primer/components": "^30.0.0", "@primer/octicons-react": "^16.0.0", + "@primer/react": "^34.5.0", "@styled-system/theme-get": "^5.0.12", "@testing-library/jest-dom": "^4.1.0", "@testing-library/react": "^9.1.3", @@ -28978,6 +28958,44 @@ "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.1.0.tgz", "integrity": "sha512-bACUj3Xl2z5dnYKE/76BpNqN4/JXFngf26dbb7Goph2PU5wcf+Z2Kk3nXwtJPGG8JByO+FcU3gpZjLNoyuLMHQ==" }, + "@primer/react": { + "version": "34.6.0", + "resolved": "https://registry.npmjs.org/@primer/react/-/react-34.6.0.tgz", + "integrity": "sha512-a0Mh6YmpEyQF6ad0mnfOJoC+y1heDM4uuvBcQQKJQ28DVeif5mn+slCD2C9ZQvnhkl4qnh3iqXOTxmKN5fCHNQ==", + "requires": { + "@primer/behaviors": "1.1.0", + "@primer/octicons-react": "16.1.1", + "@primer/primitives": "7.1.1", + "@radix-ui/react-polymorphic": "0.0.14", + "@react-aria/ssr": "3.1.0", + "@styled-system/css": "5.1.5", + "@styled-system/props": "5.1.5", + "@styled-system/theme-get": "5.1.2", + "@types/styled-components": "5.1.11", + "@types/styled-system": "5.1.12", + "@types/styled-system__css": "5.0.16", + "@types/styled-system__theme-get": "5.0.1", + "classnames": "2.3.1", + "color2k": "1.2.4", + "deepmerge": "4.2.2", + "focus-visible": "5.2.0", + "history": "5.0.0", + "styled-system": "5.1.5" + }, + "dependencies": { + "@primer/octicons-react": { + "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": "7.1.1", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.1.1.tgz", + "integrity": "sha512-+Gwo89YK1OFi6oubTlah/zPxxzMNaMLy+inECAYI646KIFdzzhAsKWb3z5tSOu5Ff7no4isRV64rWfMSKLZclw==" + } + } + }, "@radix-ui/react-polymorphic": { "version": "0.0.14", "resolved": "https://registry.npmjs.org/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz", @@ -29387,11 +29405,6 @@ "@types/unist": "*" } }, - "@types/history": { - "version": "4.7.8", - "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz", - "integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==" - }, "@types/hoist-non-react-statics": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", @@ -38224,6 +38237,14 @@ "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==" }, + "history": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.0.0.tgz", + "integrity": "sha512-3NyRMKIiFSJmIPdq7FxkNMJkQ7ZEtVblOQ38VtKaA0zZMW1Eo6Q6W8oDKEflr1kNNTItSnk4JMCO1deeSgbLLg==", + "requires": { + "@babel/runtime": "^7.7.6" + } + }, "hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -42601,9 +42622,9 @@ "requires": {} }, "prismjs": { - "version": "1.27.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz", - "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==" + "version": "1.26.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.26.0.tgz", + "integrity": "sha512-HUoH9C5Z3jKkl3UunCyiD5jwk0+Hz0fIgQ2nbwU2Oo/ceuTAQAg+pPVnfdt2TJWRVLcxKh9iuoYDUSc8clb5UQ==" }, "process-nextick-args": { "version": "2.0.1", @@ -46528,9 +46549,9 @@ } }, "url-parse": { - "version": "1.5.9", - "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.9.tgz", - "integrity": "sha512-HpOvhKBvre8wYez+QhHcYiVvVmeF6DVnuSOOPhe3cTum3BnqHhvKaZm8FU5yTiOu/Jut2ZpB2rA/SbBA1JIGlQ==", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz", + "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==", "requires": { "querystringify": "^2.1.1", "requires-port": "^1.0.0" diff --git a/docs/package.json b/docs/package.json index 0346db00bfa..65bc766c8a2 100644 --- a/docs/package.json +++ b/docs/package.json @@ -13,7 +13,7 @@ "npm": ">=7" }, "dependencies": { - "@primer/gatsby-theme-doctocat": "^3.2.0", + "@primer/gatsby-theme-doctocat": "^3.2.1", "@primer/octicons-react": "^16.1.0", "@primer/primitives": "4.1.0", "@styled-system/prop-types": "^5.1.0", diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js b/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js index b110b75b748..80e851b9ca9 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +++ b/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js @@ -1,4 +1,5 @@ -import {BaseStyles, Box, ThemeProvider, useTheme, DropdownMenu, DropdownButton} from '@primer/react' +import {BaseStyles, Box, ThemeProvider, useTheme} from '@primer/react' +import {DropdownMenu, DropdownButton} from '@primer/react/deprecated' import React from 'react' function ThemeSwitcher() { diff --git a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js index d8ee2ede36d..6532f85324d 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +++ b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js @@ -18,7 +18,7 @@ import { MarkGithubIcon, NoteIcon, NumberIcon, - OctofaceIcon, + SmileyIcon, PencilIcon, PersonIcon, ProjectIcon, @@ -29,10 +29,12 @@ import { TypographyIcon, VersionsIcon, XIcon, - ZapIcon + ZapIcon, + TriangleDownIcon } from '@primer/octicons-react' import * as primerComponents from '@primer/react' import * as drafts from '@primer/react/drafts' +import * as deprecated from '@primer/react/deprecated' import {Placeholder} from '@primer/react/Placeholder' import React from 'react' import {AnchoredOverlay} from '../../../../src/AnchoredOverlay' @@ -51,6 +53,7 @@ export default function resolveScope(metastring) { ...doctocatComponents, ...primerComponents, ...(metastring.includes('drafts') ? drafts : {}), + ...(metastring.includes('deprecated') ? deprecated : {}), ReactRouterLink, State, CheckIcon, @@ -58,7 +61,7 @@ export default function resolveScope(metastring) { ZapIcon, XIcon, DotIcon, - OctofaceIcon, + SmileyIcon, PersonIcon, MailIcon, GitCommitIcon, @@ -83,6 +86,7 @@ export default function resolveScope(metastring) { IterationsIcon, NumberIcon, SingleSelectIcon, + TriangleDownIcon, Dialog2, ConfirmationDialog, useConfirm, diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index c73fc657523..30143970b9c 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -35,6 +35,10 @@ # url: /useOverlay - title: Components children: + - title: ActionList + url: /ActionList + - title: ActionMenu + url: /ActionMenu - title: Autocomplete url: /Autocomplete - title: Avatar @@ -49,8 +53,8 @@ url: /BranchName - title: Breadcrumbs url: /Breadcrumbs - - title: Buttons - url: /Buttons + - title: Button + url: /Button - title: Checkbox url: /Checkbox - title: CheckboxGroup @@ -75,16 +79,22 @@ url: /Header - title: Heading url: /Heading + - title: IconButton + url: /IconButton - title: Label url: /Label - title: LabelGroup url: /LabelGroup - title: Link url: /Link + - title: LinkButton + url: /LinkButton - title: Overlay url: /Overlay - title: Pagehead url: /Pagehead + - title: PageLayout + url: /PageLayout - title: Pagination url: /Pagination - title: PointerBox @@ -135,31 +145,37 @@ url: /UnderlineNav - title: Drafts children: - - title: Button v2 - url: /drafts/Button2 - - title: LinkButton - url: /drafts/LinkButton - - title: IconButton - url: /drafts/IconButton - - title: ActionList v2 - url: /drafts/ActionList2 - - title: ActionMenu v2 - url: /drafts/ActionMenu2 - title: Deprecated children: + - title: ActionList + url: /deprecated/ActionList + - title: ActionMenu + url: /deprecated/ActionMenu - title: BorderBox url: /deprecated/BorderBox + - title: Buttons + url: /deprecated/Buttons + - title: ChoiceFieldset + url: /deprecated/ChoiceFieldset + - title: ChoiceInputField + url: /deprecated/ChoiceInputField + - title: Dialog + url: /deprecated/Dialog + - title: Dropdown + url: /deprecated/Dropdown + - title: DropdownMenu + url: /deprecated/DropdownMenu - title: Flex url: /deprecated/Flex + - title: FormGroup + url: /deprecated/FormGroup - title: Grid url: /deprecated/Grid + - title: InputField + url: /deprecated/InputField + - title: Label + url: /deprecated/Label - title: Position url: /deprecated/Position - - title: Dialog - url: /deprecated/Dialog - - title: Dropdown - url: /deprecated/Dropdown - - title: FormGroup - url: /FormGroup - title: SelectMenu url: /deprecated/SelectMenu diff --git a/package-lock.json b/package-lock.json index 154ba728086..8826b5bd6e7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@babel/cli": "7.14.5", - "@babel/core": "7.17.5", + "@babel/core": "7.14.8", "@babel/eslint-parser": "7.15.7", "@babel/plugin-proposal-nullish-coalescing-operator": "7.16.0", "@babel/plugin-proposal-optional-chaining": "7.14.5", @@ -73,13 +73,13 @@ "babel-polyfill": "6.26.0", "chroma-js": "2.1.2", "chromatic": "6.1.0", - "concurrently": "7.0.0", + "concurrently": "6.4.0", "copyfiles": "2.4.1", "cross-env": "7.0.3", "enzyme": "3.11.0", "eslint": "7.28.0", "eslint-plugin-github": "4.1.3", - "eslint-plugin-jest": "26.1.0", + "eslint-plugin-jest": "24.3.6", "eslint-plugin-jsx-a11y": "6.4.1", "eslint-plugin-mdx": "1.15.1", "eslint-plugin-prettier": "3.4.0", @@ -122,18 +122,6 @@ "styled-components": "4.x || 5.x" } }, - "node_modules/@ampproject/remapping": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz", - "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==", - "dev": true, - "dependencies": { - "@jridgewell/trace-mapping": "^0.3.0" - }, - "engines": { - "node": ">=6.0.0" - } - }, "node_modules/@babel/cli": { "version": "7.14.5", "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.14.5.tgz", @@ -324,35 +312,35 @@ } }, "node_modules/@babel/compat-data": { - "version": "7.17.0", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.0.tgz", - "integrity": "sha512-392byTlpGWXMv4FbyWw3sAZ/FrW/DrwqLGXpy0mbyNe9Taqv1mg9yON5/o0cnr8XYCkFTZbC1eV+c+LAROgrng==", + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.5.tgz", + "integrity": "sha512-kixrYn4JwfAVPa0f2yfzc2AWti6WRRyO3XjWW5PJAvtE11qhSayrrcrEnee05KAtNaPC+EwehE8Qt1UedEVB8w==", "dev": true, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/core": { - "version": "7.17.5", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.5.tgz", - "integrity": "sha512-/BBMw4EvjmyquN5O+t5eh0+YqB3XXJkYD2cjKpYtWOfFy4lQ4UozNSmxAcWT8r2XtZs0ewG+zrfsqeR15i1ajA==", - "dev": true, - "dependencies": { - "@ampproject/remapping": "^2.1.0", - "@babel/code-frame": "^7.16.7", - "@babel/generator": "^7.17.3", - "@babel/helper-compilation-targets": "^7.16.7", - "@babel/helper-module-transforms": "^7.16.7", - "@babel/helpers": "^7.17.2", - "@babel/parser": "^7.17.3", - "@babel/template": "^7.16.7", - "@babel/traverse": "^7.17.3", - "@babel/types": "^7.17.0", + "version": "7.14.8", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.8.tgz", + "integrity": "sha512-/AtaeEhT6ErpDhInbXmjHcUQXH0L0TEgscfcxk1qbOvLuKCa5aZT0SOOtDKFY96/CLROwbLSKyFor6idgNaU4Q==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.14.5", + "@babel/generator": "^7.14.8", + "@babel/helper-compilation-targets": "^7.14.5", + "@babel/helper-module-transforms": "^7.14.8", + "@babel/helpers": "^7.14.8", + "@babel/parser": "^7.14.8", + "@babel/template": "^7.14.5", + "@babel/traverse": "^7.14.8", + "@babel/types": "^7.14.8", "convert-source-map": "^1.7.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.1.2", - "semver": "^6.3.0" + "semver": "^6.3.0", + "source-map": "^0.5.0" }, "engines": { "node": ">=6.9.0" @@ -362,6 +350,51 @@ "url": "https://opencollective.com/babel" } }, + "node_modules/@babel/core/node_modules/@babel/helper-module-transforms": { + "version": "7.14.8", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.8.tgz", + "integrity": "sha512-RyE+NFOjXn5A9YU1dkpeBaduagTlZ0+fccnIcAGbv1KGUlReBj7utF7oEth8IdIBQPcux0DDgW5MFBH2xu9KcA==", + "dev": true, + "dependencies": { + "@babel/helper-module-imports": "^7.14.5", + "@babel/helper-replace-supers": "^7.14.5", + "@babel/helper-simple-access": "^7.14.8", + "@babel/helper-split-export-declaration": "^7.14.5", + "@babel/helper-validator-identifier": "^7.14.8", + "@babel/template": "^7.14.5", + "@babel/traverse": "^7.14.8", + "@babel/types": "^7.14.8" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/core/node_modules/@babel/helper-simple-access": { + "version": "7.14.8", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.8.tgz", + "integrity": "sha512-TrFN4RHh9gnWEU+s7JloIho2T76GPwRHhdzOWLqTrMnlas8T9O7ec+oEDNsRXndOmru9ymH9DFrEOxpzPoSbdg==", + "dev": true, + "dependencies": { + "@babel/types": "^7.14.8" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/core/node_modules/@babel/helpers": { + "version": "7.14.8", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.8.tgz", + "integrity": "sha512-ZRDmI56pnV+p1dH6d+UN6GINGz7Krps3+270qqI9UJ4wxYThfAIcI5i7j5vXC4FJ3Wap+S9qcebxeYiqn87DZw==", + "dev": true, + "dependencies": { + "@babel/template": "^7.14.5", + "@babel/traverse": "^7.14.8", + "@babel/types": "^7.14.8" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/core/node_modules/debug": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz", @@ -422,12 +455,12 @@ } }, "node_modules/@babel/generator": { - "version": "7.17.3", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.3.tgz", - "integrity": "sha512-+R6Dctil/MgUsZsZAkYgK+ADNSZzJRRy0TvY65T71z/CR854xHQ1EweBYXdfT+HNeN7w0cSJJEzgxZMv40pxsg==", + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.7.tgz", + "integrity": "sha512-/ST3Sg8MLGY5HVYmrjOgL60ENux/HfO/CsUh7y4MalThufhE/Ff/6EibFDHi4jiDCaWfJKoqbE6oTh21c5hrRg==", "dev": true, "dependencies": { - "@babel/types": "^7.17.0", + "@babel/types": "^7.16.7", "jsesc": "^2.5.1", "source-map": "^0.5.0" }, @@ -461,14 +494,14 @@ } }, "node_modules/@babel/helper-compilation-targets": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.7.tgz", - "integrity": "sha512-mGojBwIWcwGD6rfqgRXVlVYmPAv7eOpIemUG3dGnDdCY4Pae70ROij3XmfrH6Fa1h1aiDylpglbZyktfzyo/hA==", + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.14.5.tgz", + "integrity": "sha512-v+QtZqXEiOnpO6EYvlImB6zCD2Lel06RzOPzmkz/D/XgQiUu3C/Jb1LOqSt/AIA34TYi/Q+KlT8vTQrgdxkbLw==", "dev": true, "dependencies": { - "@babel/compat-data": "^7.16.4", - "@babel/helper-validator-option": "^7.16.7", - "browserslist": "^4.17.5", + "@babel/compat-data": "^7.14.5", + "@babel/helper-validator-option": "^7.14.5", + "browserslist": "^4.16.6", "semver": "^6.3.0" }, "engines": { @@ -650,31 +683,31 @@ } }, "node_modules/@babel/helper-module-imports": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz", - "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz", + "integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==", "dev": true, "dependencies": { - "@babel/types": "^7.16.7" + "@babel/types": "^7.16.0" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-module-transforms": { - "version": "7.17.6", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.17.6.tgz", - "integrity": "sha512-2ULmRdqoOMpdvkbT8jONrZML/XALfzxlb052bldftkicAUy8AxSCkD5trDPQcwHNmolcl7wP6ehNqMlyUw6AaA==", + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz", + "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==", "dev": true, "dependencies": { - "@babel/helper-environment-visitor": "^7.16.7", - "@babel/helper-module-imports": "^7.16.7", - "@babel/helper-simple-access": "^7.16.7", - "@babel/helper-split-export-declaration": "^7.16.7", - "@babel/helper-validator-identifier": "^7.16.7", - "@babel/template": "^7.16.7", - "@babel/traverse": "^7.17.3", - "@babel/types": "^7.17.0" + "@babel/helper-module-imports": "^7.14.5", + "@babel/helper-replace-supers": "^7.14.5", + "@babel/helper-simple-access": "^7.14.5", + "@babel/helper-split-export-declaration": "^7.14.5", + "@babel/helper-validator-identifier": "^7.14.5", + "@babel/template": "^7.14.5", + "@babel/traverse": "^7.14.5", + "@babel/types": "^7.14.5" }, "engines": { "node": ">=6.9.0" @@ -732,12 +765,12 @@ } }, "node_modules/@babel/helper-simple-access": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.16.7.tgz", - "integrity": "sha512-ZIzHVyoeLMvXMN/vok/a4LWRy8G2v205mNP0XOuf9XRLyX5/u9CnVulUtDgUTama3lT+bf/UqucuZjqiGuTS1g==", + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz", + "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==", "dev": true, "dependencies": { - "@babel/types": "^7.16.7" + "@babel/types": "^7.14.5" }, "engines": { "node": ">=6.9.0" @@ -777,9 +810,9 @@ } }, "node_modules/@babel/helper-validator-option": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz", - "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==", + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz", + "integrity": "sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==", "dev": true, "engines": { "node": ">=6.9.0" @@ -801,14 +834,14 @@ } }, "node_modules/@babel/helpers": { - "version": "7.17.2", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.17.2.tgz", - "integrity": "sha512-0Qu7RLR1dILozr/6M0xgj+DFPmi6Bnulgm9M8BVa9ZCWxDqlSnqt3cf8IDPB5m45sVXUZ0kuQAgUrdSFFH79fQ==", + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.5.tgz", + "integrity": "sha512-xtcWOuN9VL6nApgVHtq3PPcQv5qFBJzoSZzJ/2c0QK/IP/gxVcoWSNQwFEGvmbQsuS9rhYqjILDGGXcTkA705Q==", "dev": true, "dependencies": { - "@babel/template": "^7.16.7", - "@babel/traverse": "^7.17.0", - "@babel/types": "^7.17.0" + "@babel/template": "^7.14.5", + "@babel/traverse": "^7.14.5", + "@babel/types": "^7.14.5" }, "engines": { "node": ">=6.9.0" @@ -829,9 +862,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.17.3", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.3.tgz", - "integrity": "sha512-7yJPvPV+ESz2IUTPbOL+YkIGyCqOyNIzdguKQuJGnH7bg1WTIifuM21YqokFt/THWh1AkCRn9IgoykTRCBVpzA==", + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.7.tgz", + "integrity": "sha512-sR4eaSrnM7BV7QPzGfEX5paG/6wrZM3I0HDzfIAK06ESvo9oy3xBuVBxE3MbQaKNhvg8g/ixjMWo2CGpzpHsDA==", "dev": true, "bin": { "parser": "bin/babel-parser.js" @@ -1069,6 +1102,33 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-proposal-object-rest-spread/node_modules/@babel/compat-data": { + "version": "7.15.0", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.15.0.tgz", + "integrity": "sha512-0NqAC1IJE0S0+lL1SWFMxMkz1pKCNCjI4tr2Zx4LJSXxCLAdr6KyArnY+sno5m3yH9g737ygOyPABDsnXkpxiA==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/plugin-proposal-object-rest-spread/node_modules/@babel/helper-compilation-targets": { + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.15.4.tgz", + "integrity": "sha512-rMWPCirulnPSe4d+gwdWXLfAXTTBj8M3guAf5xFQJ0nvFY7tfNAFnWdqaHegHlgDZOCT4qvhF3BYlSJag8yhqQ==", + "dev": true, + "dependencies": { + "@babel/compat-data": "^7.15.0", + "@babel/helper-validator-option": "^7.14.5", + "browserslist": "^4.16.6", + "semver": "^6.3.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, "node_modules/@babel/plugin-proposal-object-rest-spread/node_modules/@babel/plugin-transform-parameters": { "version": "7.15.4", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.15.4.tgz", @@ -1084,6 +1144,15 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-proposal-object-rest-spread/node_modules/semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + } + }, "node_modules/@babel/plugin-proposal-optional-catch-binding": { "version": "7.14.5", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.14.5.tgz", @@ -1710,6 +1779,37 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-transform-modules-systemjs/node_modules/@babel/helper-module-transforms": { + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.15.8.tgz", + "integrity": "sha512-DfAfA6PfpG8t4S6npwzLvTUpp0sS7JrcuaMiy1Y5645laRJIp/LiLGIBbQKaXSInK8tiGNI7FL7L8UvB8gdUZg==", + "dev": true, + "dependencies": { + "@babel/helper-module-imports": "^7.15.4", + "@babel/helper-replace-supers": "^7.15.4", + "@babel/helper-simple-access": "^7.15.4", + "@babel/helper-split-export-declaration": "^7.15.4", + "@babel/helper-validator-identifier": "^7.15.7", + "@babel/template": "^7.15.4", + "@babel/traverse": "^7.15.4", + "@babel/types": "^7.15.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/plugin-transform-modules-systemjs/node_modules/@babel/helper-simple-access": { + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.15.4.tgz", + "integrity": "sha512-UzazrDoIVOZZcTeHHEPYrr1MvTR/K+wgLg6MY6e1CJyaRhbibftF6fR2KU2sFRtI/nERUZR9fBd6aKgBlIBaPg==", + "dev": true, + "dependencies": { + "@babel/types": "^7.15.4" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/plugin-transform-modules-umd": { "version": "7.14.5", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.14.5.tgz", @@ -2120,6 +2220,64 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/preset-env/node_modules/@babel/compat-data": { + "version": "7.15.0", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.15.0.tgz", + "integrity": "sha512-0NqAC1IJE0S0+lL1SWFMxMkz1pKCNCjI4tr2Zx4LJSXxCLAdr6KyArnY+sno5m3yH9g737ygOyPABDsnXkpxiA==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/preset-env/node_modules/@babel/helper-compilation-targets": { + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.15.4.tgz", + "integrity": "sha512-rMWPCirulnPSe4d+gwdWXLfAXTTBj8M3guAf5xFQJ0nvFY7tfNAFnWdqaHegHlgDZOCT4qvhF3BYlSJag8yhqQ==", + "dev": true, + "dependencies": { + "@babel/compat-data": "^7.15.0", + "@babel/helper-validator-option": "^7.14.5", + "browserslist": "^4.16.6", + "semver": "^6.3.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/preset-env/node_modules/@babel/helper-module-transforms": { + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.15.8.tgz", + "integrity": "sha512-DfAfA6PfpG8t4S6npwzLvTUpp0sS7JrcuaMiy1Y5645laRJIp/LiLGIBbQKaXSInK8tiGNI7FL7L8UvB8gdUZg==", + "dev": true, + "dependencies": { + "@babel/helper-module-imports": "^7.15.4", + "@babel/helper-replace-supers": "^7.15.4", + "@babel/helper-simple-access": "^7.15.4", + "@babel/helper-split-export-declaration": "^7.15.4", + "@babel/helper-validator-identifier": "^7.15.7", + "@babel/template": "^7.15.4", + "@babel/traverse": "^7.15.4", + "@babel/types": "^7.15.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/preset-env/node_modules/@babel/helper-simple-access": { + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.15.4.tgz", + "integrity": "sha512-UzazrDoIVOZZcTeHHEPYrr1MvTR/K+wgLg6MY6e1CJyaRhbibftF6fR2KU2sFRtI/nERUZR9fBd6aKgBlIBaPg==", + "dev": true, + "dependencies": { + "@babel/types": "^7.15.4" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/preset-env/node_modules/@babel/plugin-transform-modules-commonjs": { "version": "7.15.4", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.15.4.tgz", @@ -2290,19 +2448,19 @@ } }, "node_modules/@babel/traverse": { - "version": "7.17.3", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.3.tgz", - "integrity": "sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==", + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.7.tgz", + "integrity": "sha512-8KWJPIb8c2VvY8AJrydh6+fVRo2ODx1wYBU2398xJVq0JomuLBZmVQzLPBblJgHIGYG4znCpUZUZ0Pt2vdmVYQ==", "dev": true, "dependencies": { "@babel/code-frame": "^7.16.7", - "@babel/generator": "^7.17.3", + "@babel/generator": "^7.16.7", "@babel/helper-environment-visitor": "^7.16.7", "@babel/helper-function-name": "^7.16.7", "@babel/helper-hoist-variables": "^7.16.7", "@babel/helper-split-export-declaration": "^7.16.7", - "@babel/parser": "^7.17.3", - "@babel/types": "^7.17.0", + "@babel/parser": "^7.16.7", + "@babel/types": "^7.16.7", "debug": "^4.1.0", "globals": "^11.1.0" }, @@ -2334,9 +2492,9 @@ "dev": true }, "node_modules/@babel/types": { - "version": "7.17.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz", - "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==", + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", + "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", "dev": true, "dependencies": { "@babel/helper-validator-identifier": "^7.16.7", @@ -5186,31 +5344,6 @@ "node": ">=8" } }, - "node_modules/@jridgewell/resolve-uri": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz", - "integrity": "sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==", - "dev": true, - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/@jridgewell/sourcemap-codec": { - "version": "1.4.11", - "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz", - "integrity": "sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==", - "dev": true - }, - "node_modules/@jridgewell/trace-mapping": { - "version": "0.3.4", - "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz", - "integrity": "sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==", - "dev": true, - "dependencies": { - "@jridgewell/resolve-uri": "^3.0.3", - "@jridgewell/sourcemap-codec": "^1.4.10" - } - }, "node_modules/@manypkg/find-root": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@manypkg/find-root/-/find-root-1.1.0.tgz", @@ -10312,6 +10445,30 @@ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "dev": true }, + "node_modules/@typescript-eslint/experimental-utils": { + "version": "4.26.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.26.1.tgz", + "integrity": "sha512-sQHBugRhrXzRCs9PaGg6rowie4i8s/iD/DpTB+EXte8OMDfdCG5TvO73XlO9Wc/zi0uyN4qOmX9hIjQEyhnbmQ==", + "dev": true, + "dependencies": { + "@types/json-schema": "^7.0.7", + "@typescript-eslint/scope-manager": "4.26.1", + "@typescript-eslint/types": "4.26.1", + "@typescript-eslint/typescript-estree": "4.26.1", + "eslint-scope": "^5.1.1", + "eslint-utils": "^3.0.0" + }, + "engines": { + "node": "^10.12.0 || >=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "*" + } + }, "node_modules/@typescript-eslint/parser": { "version": "4.26.1", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.26.1.tgz", @@ -12305,16 +12462,16 @@ } }, "node_modules/browserslist": { - "version": "4.19.3", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.3.tgz", - "integrity": "sha512-XK3X4xtKJ+Txj8G5c30B4gsm71s69lqXlkYui4s6EkKxuv49qjYlY6oVd+IFJ73d4YymtM3+djvvt/R/iJwwDg==", + "version": "4.16.6", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz", + "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==", "dev": true, "dependencies": { - "caniuse-lite": "^1.0.30001312", - "electron-to-chromium": "^1.4.71", + "caniuse-lite": "^1.0.30001219", + "colorette": "^1.2.2", + "electron-to-chromium": "^1.3.723", "escalade": "^3.1.1", - "node-releases": "^2.0.2", - "picocolors": "^1.0.0" + "node-releases": "^1.1.71" }, "bin": { "browserslist": "cli.js" @@ -12794,9 +12951,9 @@ "dev": true }, "node_modules/caniuse-lite": { - "version": "1.0.30001312", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz", - "integrity": "sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==", + "version": "1.0.30001237", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001237.tgz", + "integrity": "sha512-pDHgRndit6p1NR2GhzMbQ6CkRrp4VKuSsqbcLeOQppYPKOYkKT/6ZvZDvKJUqcmtyWIAHuZq3SVS2vc1egCZzw==", "dev": true, "funding": { "type": "opencollective", @@ -12953,7 +13110,7 @@ "version": "2.1.8", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz", "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==", - "deprecated": "Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.", + "deprecated": "Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies", "dev": true, "optional": true, "dependencies": { @@ -13514,6 +13671,12 @@ "resolved": "https://registry.npmjs.org/color2k/-/color2k-1.2.4.tgz", "integrity": "sha512-DiwdBwc0BryPFFXoCrW8XQGXl2rEtMToODybxZjKnN5IJXt/tV/FsN02pCK/b7KcWvJEioz3c74lQSmayFvS4Q==" }, + "node_modules/colorette": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz", + "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==", + "dev": true + }, "node_modules/colors": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz", @@ -13630,9 +13793,9 @@ } }, "node_modules/concurrently": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-7.0.0.tgz", - "integrity": "sha512-WKM7PUsI8wyXpF80H+zjHP32fsgsHNQfPLw/e70Z5dYkV7hF+rf8q3D+ScWJIEr57CpkO3OWBko6hwhQLPR8Pw==", + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-6.4.0.tgz", + "integrity": "sha512-HZ3D0RTQMH3oS4gvtYj1P+NBc6PzE2McEra6yEFcQKrUQ9HvtTGU4Dbne083F034p+LRb7kWU0tPRNvSGs1UCQ==", "dev": true, "dependencies": { "chalk": "^4.1.0", @@ -13645,10 +13808,10 @@ "yargs": "^16.2.0" }, "bin": { - "concurrently": "dist/bin/concurrently.js" + "concurrently": "bin/concurrently.js" }, "engines": { - "node": "^12.20.0 || ^14.13.0 || >=16.0.0" + "node": ">=10.0.0" } }, "node_modules/concurrently/node_modules/ansi-regex": { @@ -14156,6 +14319,51 @@ "url": "https://opencollective.com/core-js" } }, + "node_modules/core-js-compat/node_modules/browserslist": { + "version": "4.17.5", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.5.tgz", + "integrity": "sha512-I3ekeB92mmpctWBoLXe0d5wPS2cBuRvvW0JyyJHMrk9/HmP2ZjrTboNAZ8iuGqaEIlKguljbQY32OkOJIRrgoA==", + "dev": true, + "dependencies": { + "caniuse-lite": "^1.0.30001271", + "electron-to-chromium": "^1.3.878", + "escalade": "^3.1.1", + "node-releases": "^2.0.1", + "picocolors": "^1.0.0" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + } + }, + "node_modules/core-js-compat/node_modules/caniuse-lite": { + "version": "1.0.30001271", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001271.tgz", + "integrity": "sha512-BBruZFWmt3HFdVPS8kceTBIguKxu4f99n5JNp06OlPD/luoAMIaIK5ieV5YjnBLH3Nysai9sxj9rpJj4ZisXOA==", + "dev": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + } + }, + "node_modules/core-js-compat/node_modules/electron-to-chromium": { + "version": "1.3.879", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.879.tgz", + "integrity": "sha512-zJo+D9GwbJvM31IdFmwcGvychhk4KKbKYo2GWlsn+C/dxz2NwmbhGJjWwTfFSF2+eFH7VvfA8MCZ8SOqTrlnpw==", + "dev": true + }, + "node_modules/core-js-compat/node_modules/node-releases": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz", + "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==", + "dev": true + }, "node_modules/core-js-compat/node_modules/semver": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz", @@ -15294,9 +15502,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.4.73", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.73.tgz", - "integrity": "sha512-RlCffXkE/LliqfA5m29+dVDPB2r72y2D2egMMfIy3Le8ODrxjuZNVo4NIC2yPL01N4xb4nZQLwzi6Z5tGIGLnA==", + "version": "1.3.752", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz", + "integrity": "sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A==", "dev": true }, "node_modules/element-resize-detector": { @@ -16184,159 +16392,26 @@ } }, "node_modules/eslint-plugin-jest": { - "version": "26.1.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-26.1.0.tgz", - "integrity": "sha512-vjF6RvcKm4xZSJgCmXb9fXmhzTva+I9jtj9Qv5JeZQTRocU7WT1g3Kx0cZ+00SekPe2DtSWDawHtSj4RaxFhXQ==", + "version": "24.3.6", + "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-24.3.6.tgz", + "integrity": "sha512-WOVH4TIaBLIeCX576rLcOgjNXqP+jNlCiEmRgFTfQtJ52DpwnIQKAVGlGPAN7CZ33bW6eNfHD6s8ZbEUTQubJg==", "dev": true, "dependencies": { - "@typescript-eslint/utils": "^5.10.0" + "@typescript-eslint/experimental-utils": "^4.0.1" }, "engines": { - "node": "^12.13.0 || ^14.15.0 || >=16.0.0" + "node": ">=10" }, "peerDependencies": { - "@typescript-eslint/eslint-plugin": "^5.0.0", - "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" + "@typescript-eslint/eslint-plugin": ">= 4", + "eslint": ">=5" }, "peerDependenciesMeta": { "@typescript-eslint/eslint-plugin": { "optional": true - }, - "jest": { - "optional": true } } }, - "node_modules/eslint-plugin-jest/node_modules/@typescript-eslint/scope-manager": { - "version": "5.10.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.10.2.tgz", - "integrity": "sha512-39Tm6f4RoZoVUWBYr3ekS75TYgpr5Y+X0xLZxXqcZNDWZdJdYbKd3q2IR4V9y5NxxiPu/jxJ8XP7EgHiEQtFnw==", - "dev": true, - "dependencies": { - "@typescript-eslint/types": "5.10.2", - "@typescript-eslint/visitor-keys": "5.10.2" - }, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - } - }, - "node_modules/eslint-plugin-jest/node_modules/@typescript-eslint/types": { - "version": "5.10.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.10.2.tgz", - "integrity": "sha512-Qfp0qk/5j2Rz3p3/WhWgu4S1JtMcPgFLnmAKAW061uXxKSa7VWKZsDXVaMXh2N60CX9h6YLaBoy9PJAfCOjk3w==", - "dev": true, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - } - }, - "node_modules/eslint-plugin-jest/node_modules/@typescript-eslint/typescript-estree": { - "version": "5.10.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.2.tgz", - "integrity": "sha512-WHHw6a9vvZls6JkTgGljwCsMkv8wu8XU8WaYKeYhxhWXH/atZeiMW6uDFPLZOvzNOGmuSMvHtZKd6AuC8PrwKQ==", - "dev": true, - "dependencies": { - "@typescript-eslint/types": "5.10.2", - "@typescript-eslint/visitor-keys": "5.10.2", - "debug": "^4.3.2", - "globby": "^11.0.4", - "is-glob": "^4.0.3", - "semver": "^7.3.5", - "tsutils": "^3.21.0" - }, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } - } - }, - "node_modules/eslint-plugin-jest/node_modules/@typescript-eslint/utils": { - "version": "5.10.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.10.2.tgz", - "integrity": "sha512-vuJaBeig1NnBRkf7q9tgMLREiYD7zsMrsN1DA3wcoMDvr3BTFiIpKjGiYZoKPllfEwN7spUjv7ZqD+JhbVjEPg==", - "dev": true, - "dependencies": { - "@types/json-schema": "^7.0.9", - "@typescript-eslint/scope-manager": "5.10.2", - "@typescript-eslint/types": "5.10.2", - "@typescript-eslint/typescript-estree": "5.10.2", - "eslint-scope": "^5.1.1", - "eslint-utils": "^3.0.0" - }, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - }, - "peerDependencies": { - "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" - } - }, - "node_modules/eslint-plugin-jest/node_modules/@typescript-eslint/visitor-keys": { - "version": "5.10.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.10.2.tgz", - "integrity": "sha512-zHIhYGGGrFJvvyfwHk5M08C5B5K4bewkm+rrvNTKk1/S15YHR+SA/QUF8ZWscXSfEaB8Nn2puZj+iHcoxVOD/Q==", - "dev": true, - "dependencies": { - "@typescript-eslint/types": "5.10.2", - "eslint-visitor-keys": "^3.0.0" - }, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - } - }, - "node_modules/eslint-plugin-jest/node_modules/debug": { - "version": "4.3.3", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz", - "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==", - "dev": true, - "dependencies": { - "ms": "2.1.2" - }, - "engines": { - "node": ">=6.0" - }, - "peerDependenciesMeta": { - "supports-color": { - "optional": true - } - } - }, - "node_modules/eslint-plugin-jest/node_modules/eslint-visitor-keys": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.2.0.tgz", - "integrity": "sha512-IOzT0X126zn7ALX0dwFiUQEdsfzrm4+ISsQS8nukaJXwEyYKRSnEIIDULYg1mCtGp7UUXgfGl7BIolXREQK+XQ==", - "dev": true, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - } - }, - "node_modules/eslint-plugin-jest/node_modules/ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", - "dev": true - }, "node_modules/eslint-plugin-jsx-a11y": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.4.1.tgz", @@ -20117,9 +20192,9 @@ } }, "node_modules/is-glob": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", - "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz", + "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==", "dev": true, "dependencies": { "is-extglob": "^2.1.1" @@ -27451,9 +27526,9 @@ "optional": true }, "node_modules/nanoid": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz", - "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==", + "version": "3.1.30", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz", + "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==", "dev": true, "bin": { "nanoid": "bin/nanoid.cjs" @@ -27663,9 +27738,9 @@ } }, "node_modules/node-releases": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.2.tgz", - "integrity": "sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==", + "version": "1.1.73", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz", + "integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==", "dev": true }, "node_modules/noms": { @@ -35114,15 +35189,6 @@ } }, "dependencies": { - "@ampproject/remapping": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz", - "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==", - "dev": true, - "requires": { - "@jridgewell/trace-mapping": "^0.3.0" - } - }, "@babel/cli": { "version": "7.14.5", "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.14.5.tgz", @@ -35261,34 +35327,70 @@ } }, "@babel/compat-data": { - "version": "7.17.0", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.0.tgz", - "integrity": "sha512-392byTlpGWXMv4FbyWw3sAZ/FrW/DrwqLGXpy0mbyNe9Taqv1mg9yON5/o0cnr8XYCkFTZbC1eV+c+LAROgrng==", + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.5.tgz", + "integrity": "sha512-kixrYn4JwfAVPa0f2yfzc2AWti6WRRyO3XjWW5PJAvtE11qhSayrrcrEnee05KAtNaPC+EwehE8Qt1UedEVB8w==", "dev": true }, "@babel/core": { - "version": "7.17.5", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.5.tgz", - "integrity": "sha512-/BBMw4EvjmyquN5O+t5eh0+YqB3XXJkYD2cjKpYtWOfFy4lQ4UozNSmxAcWT8r2XtZs0ewG+zrfsqeR15i1ajA==", - "dev": true, - "requires": { - "@ampproject/remapping": "^2.1.0", - "@babel/code-frame": "^7.16.7", - "@babel/generator": "^7.17.3", - "@babel/helper-compilation-targets": "^7.16.7", - "@babel/helper-module-transforms": "^7.16.7", - "@babel/helpers": "^7.17.2", - "@babel/parser": "^7.17.3", - "@babel/template": "^7.16.7", - "@babel/traverse": "^7.17.3", - "@babel/types": "^7.17.0", + "version": "7.14.8", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.8.tgz", + "integrity": "sha512-/AtaeEhT6ErpDhInbXmjHcUQXH0L0TEgscfcxk1qbOvLuKCa5aZT0SOOtDKFY96/CLROwbLSKyFor6idgNaU4Q==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.14.5", + "@babel/generator": "^7.14.8", + "@babel/helper-compilation-targets": "^7.14.5", + "@babel/helper-module-transforms": "^7.14.8", + "@babel/helpers": "^7.14.8", + "@babel/parser": "^7.14.8", + "@babel/template": "^7.14.5", + "@babel/traverse": "^7.14.8", + "@babel/types": "^7.14.8", "convert-source-map": "^1.7.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.1.2", - "semver": "^6.3.0" + "semver": "^6.3.0", + "source-map": "^0.5.0" }, "dependencies": { + "@babel/helper-module-transforms": { + "version": "7.14.8", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.8.tgz", + "integrity": "sha512-RyE+NFOjXn5A9YU1dkpeBaduagTlZ0+fccnIcAGbv1KGUlReBj7utF7oEth8IdIBQPcux0DDgW5MFBH2xu9KcA==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "^7.14.5", + "@babel/helper-replace-supers": "^7.14.5", + "@babel/helper-simple-access": "^7.14.8", + "@babel/helper-split-export-declaration": "^7.14.5", + "@babel/helper-validator-identifier": "^7.14.8", + "@babel/template": "^7.14.5", + "@babel/traverse": "^7.14.8", + "@babel/types": "^7.14.8" + } + }, + "@babel/helper-simple-access": { + "version": "7.14.8", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.8.tgz", + "integrity": "sha512-TrFN4RHh9gnWEU+s7JloIho2T76GPwRHhdzOWLqTrMnlas8T9O7ec+oEDNsRXndOmru9ymH9DFrEOxpzPoSbdg==", + "dev": true, + "requires": { + "@babel/types": "^7.14.8" + } + }, + "@babel/helpers": { + "version": "7.14.8", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.8.tgz", + "integrity": "sha512-ZRDmI56pnV+p1dH6d+UN6GINGz7Krps3+270qqI9UJ4wxYThfAIcI5i7j5vXC4FJ3Wap+S9qcebxeYiqn87DZw==", + "dev": true, + "requires": { + "@babel/template": "^7.14.5", + "@babel/traverse": "^7.14.8", + "@babel/types": "^7.14.8" + } + }, "debug": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz", @@ -35332,12 +35434,12 @@ } }, "@babel/generator": { - "version": "7.17.3", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.3.tgz", - "integrity": "sha512-+R6Dctil/MgUsZsZAkYgK+ADNSZzJRRy0TvY65T71z/CR854xHQ1EweBYXdfT+HNeN7w0cSJJEzgxZMv40pxsg==", + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.7.tgz", + "integrity": "sha512-/ST3Sg8MLGY5HVYmrjOgL60ENux/HfO/CsUh7y4MalThufhE/Ff/6EibFDHi4jiDCaWfJKoqbE6oTh21c5hrRg==", "dev": true, "requires": { - "@babel/types": "^7.17.0", + "@babel/types": "^7.16.7", "jsesc": "^2.5.1", "source-map": "^0.5.0" } @@ -35362,14 +35464,14 @@ } }, "@babel/helper-compilation-targets": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.7.tgz", - "integrity": "sha512-mGojBwIWcwGD6rfqgRXVlVYmPAv7eOpIemUG3dGnDdCY4Pae70ROij3XmfrH6Fa1h1aiDylpglbZyktfzyo/hA==", + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.14.5.tgz", + "integrity": "sha512-v+QtZqXEiOnpO6EYvlImB6zCD2Lel06RzOPzmkz/D/XgQiUu3C/Jb1LOqSt/AIA34TYi/Q+KlT8vTQrgdxkbLw==", "dev": true, "requires": { - "@babel/compat-data": "^7.16.4", - "@babel/helper-validator-option": "^7.16.7", - "browserslist": "^4.17.5", + "@babel/compat-data": "^7.14.5", + "@babel/helper-validator-option": "^7.14.5", + "browserslist": "^4.16.6", "semver": "^6.3.0" }, "dependencies": { @@ -35502,28 +35604,28 @@ } }, "@babel/helper-module-imports": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz", - "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==", + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz", + "integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==", "dev": true, "requires": { - "@babel/types": "^7.16.7" + "@babel/types": "^7.16.0" } }, "@babel/helper-module-transforms": { - "version": "7.17.6", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.17.6.tgz", - "integrity": "sha512-2ULmRdqoOMpdvkbT8jONrZML/XALfzxlb052bldftkicAUy8AxSCkD5trDPQcwHNmolcl7wP6ehNqMlyUw6AaA==", + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz", + "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==", "dev": true, "requires": { - "@babel/helper-environment-visitor": "^7.16.7", - "@babel/helper-module-imports": "^7.16.7", - "@babel/helper-simple-access": "^7.16.7", - "@babel/helper-split-export-declaration": "^7.16.7", - "@babel/helper-validator-identifier": "^7.16.7", - "@babel/template": "^7.16.7", - "@babel/traverse": "^7.17.3", - "@babel/types": "^7.17.0" + "@babel/helper-module-imports": "^7.14.5", + "@babel/helper-replace-supers": "^7.14.5", + "@babel/helper-simple-access": "^7.14.5", + "@babel/helper-split-export-declaration": "^7.14.5", + "@babel/helper-validator-identifier": "^7.14.5", + "@babel/template": "^7.14.5", + "@babel/traverse": "^7.14.5", + "@babel/types": "^7.14.5" } }, "@babel/helper-optimise-call-expression": { @@ -35566,12 +35668,12 @@ } }, "@babel/helper-simple-access": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.16.7.tgz", - "integrity": "sha512-ZIzHVyoeLMvXMN/vok/a4LWRy8G2v205mNP0XOuf9XRLyX5/u9CnVulUtDgUTama3lT+bf/UqucuZjqiGuTS1g==", + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz", + "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==", "dev": true, "requires": { - "@babel/types": "^7.16.7" + "@babel/types": "^7.14.5" } }, "@babel/helper-skip-transparent-expression-wrappers": { @@ -35599,9 +35701,9 @@ "dev": true }, "@babel/helper-validator-option": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz", - "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==", + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz", + "integrity": "sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==", "dev": true }, "@babel/helper-wrap-function": { @@ -35617,14 +35719,14 @@ } }, "@babel/helpers": { - "version": "7.17.2", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.17.2.tgz", - "integrity": "sha512-0Qu7RLR1dILozr/6M0xgj+DFPmi6Bnulgm9M8BVa9ZCWxDqlSnqt3cf8IDPB5m45sVXUZ0kuQAgUrdSFFH79fQ==", + "version": "7.14.5", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.5.tgz", + "integrity": "sha512-xtcWOuN9VL6nApgVHtq3PPcQv5qFBJzoSZzJ/2c0QK/IP/gxVcoWSNQwFEGvmbQsuS9rhYqjILDGGXcTkA705Q==", "dev": true, "requires": { - "@babel/template": "^7.16.7", - "@babel/traverse": "^7.17.0", - "@babel/types": "^7.17.0" + "@babel/template": "^7.14.5", + "@babel/traverse": "^7.14.5", + "@babel/types": "^7.14.5" } }, "@babel/highlight": { @@ -35639,9 +35741,9 @@ } }, "@babel/parser": { - "version": "7.17.3", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.3.tgz", - "integrity": "sha512-7yJPvPV+ESz2IUTPbOL+YkIGyCqOyNIzdguKQuJGnH7bg1WTIifuM21YqokFt/THWh1AkCRn9IgoykTRCBVpzA==", + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.7.tgz", + "integrity": "sha512-sR4eaSrnM7BV7QPzGfEX5paG/6wrZM3I0HDzfIAK06ESvo9oy3xBuVBxE3MbQaKNhvg8g/ixjMWo2CGpzpHsDA==", "dev": true }, "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": { @@ -35794,6 +35896,24 @@ "@babel/plugin-transform-parameters": "^7.15.4" }, "dependencies": { + "@babel/compat-data": { + "version": "7.15.0", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.15.0.tgz", + "integrity": "sha512-0NqAC1IJE0S0+lL1SWFMxMkz1pKCNCjI4tr2Zx4LJSXxCLAdr6KyArnY+sno5m3yH9g737ygOyPABDsnXkpxiA==", + "dev": true + }, + "@babel/helper-compilation-targets": { + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.15.4.tgz", + "integrity": "sha512-rMWPCirulnPSe4d+gwdWXLfAXTTBj8M3guAf5xFQJ0nvFY7tfNAFnWdqaHegHlgDZOCT4qvhF3BYlSJag8yhqQ==", + "dev": true, + "requires": { + "@babel/compat-data": "^7.15.0", + "@babel/helper-validator-option": "^7.14.5", + "browserslist": "^4.16.6", + "semver": "^6.3.0" + } + }, "@babel/plugin-transform-parameters": { "version": "7.15.4", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.15.4.tgz", @@ -35802,6 +35922,12 @@ "requires": { "@babel/helper-plugin-utils": "^7.14.5" } + }, + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true } } }, @@ -36210,6 +36336,33 @@ "@babel/helper-plugin-utils": "^7.14.5", "@babel/helper-validator-identifier": "^7.14.9", "babel-plugin-dynamic-import-node": "^2.3.3" + }, + "dependencies": { + "@babel/helper-module-transforms": { + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.15.8.tgz", + "integrity": "sha512-DfAfA6PfpG8t4S6npwzLvTUpp0sS7JrcuaMiy1Y5645laRJIp/LiLGIBbQKaXSInK8tiGNI7FL7L8UvB8gdUZg==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "^7.15.4", + "@babel/helper-replace-supers": "^7.15.4", + "@babel/helper-simple-access": "^7.15.4", + "@babel/helper-split-export-declaration": "^7.15.4", + "@babel/helper-validator-identifier": "^7.15.7", + "@babel/template": "^7.15.4", + "@babel/traverse": "^7.15.4", + "@babel/types": "^7.15.6" + } + }, + "@babel/helper-simple-access": { + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.15.4.tgz", + "integrity": "sha512-UzazrDoIVOZZcTeHHEPYrr1MvTR/K+wgLg6MY6e1CJyaRhbibftF6fR2KU2sFRtI/nERUZR9fBd6aKgBlIBaPg==", + "dev": true, + "requires": { + "@babel/types": "^7.15.4" + } + } } }, "@babel/plugin-transform-modules-umd": { @@ -36495,6 +36648,49 @@ "semver": "^6.3.0" }, "dependencies": { + "@babel/compat-data": { + "version": "7.15.0", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.15.0.tgz", + "integrity": "sha512-0NqAC1IJE0S0+lL1SWFMxMkz1pKCNCjI4tr2Zx4LJSXxCLAdr6KyArnY+sno5m3yH9g737ygOyPABDsnXkpxiA==", + "dev": true + }, + "@babel/helper-compilation-targets": { + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.15.4.tgz", + "integrity": "sha512-rMWPCirulnPSe4d+gwdWXLfAXTTBj8M3guAf5xFQJ0nvFY7tfNAFnWdqaHegHlgDZOCT4qvhF3BYlSJag8yhqQ==", + "dev": true, + "requires": { + "@babel/compat-data": "^7.15.0", + "@babel/helper-validator-option": "^7.14.5", + "browserslist": "^4.16.6", + "semver": "^6.3.0" + } + }, + "@babel/helper-module-transforms": { + "version": "7.15.8", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.15.8.tgz", + "integrity": "sha512-DfAfA6PfpG8t4S6npwzLvTUpp0sS7JrcuaMiy1Y5645laRJIp/LiLGIBbQKaXSInK8tiGNI7FL7L8UvB8gdUZg==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "^7.15.4", + "@babel/helper-replace-supers": "^7.15.4", + "@babel/helper-simple-access": "^7.15.4", + "@babel/helper-split-export-declaration": "^7.15.4", + "@babel/helper-validator-identifier": "^7.15.7", + "@babel/template": "^7.15.4", + "@babel/traverse": "^7.15.4", + "@babel/types": "^7.15.6" + } + }, + "@babel/helper-simple-access": { + "version": "7.15.4", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.15.4.tgz", + "integrity": "sha512-UzazrDoIVOZZcTeHHEPYrr1MvTR/K+wgLg6MY6e1CJyaRhbibftF6fR2KU2sFRtI/nERUZR9fBd6aKgBlIBaPg==", + "dev": true, + "requires": { + "@babel/types": "^7.15.4" + } + }, "@babel/plugin-transform-modules-commonjs": { "version": "7.15.4", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.15.4.tgz", @@ -36616,19 +36812,19 @@ } }, "@babel/traverse": { - "version": "7.17.3", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.3.tgz", - "integrity": "sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==", + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.7.tgz", + "integrity": "sha512-8KWJPIb8c2VvY8AJrydh6+fVRo2ODx1wYBU2398xJVq0JomuLBZmVQzLPBblJgHIGYG4znCpUZUZ0Pt2vdmVYQ==", "dev": true, "requires": { "@babel/code-frame": "^7.16.7", - "@babel/generator": "^7.17.3", + "@babel/generator": "^7.16.7", "@babel/helper-environment-visitor": "^7.16.7", "@babel/helper-function-name": "^7.16.7", "@babel/helper-hoist-variables": "^7.16.7", "@babel/helper-split-export-declaration": "^7.16.7", - "@babel/parser": "^7.17.3", - "@babel/types": "^7.17.0", + "@babel/parser": "^7.16.7", + "@babel/types": "^7.16.7", "debug": "^4.1.0", "globals": "^11.1.0" }, @@ -36651,9 +36847,9 @@ } }, "@babel/types": { - "version": "7.17.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz", - "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==", + "version": "7.16.7", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", + "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", "dev": true, "requires": { "@babel/helper-validator-identifier": "^7.16.7", @@ -38930,28 +39126,6 @@ } } }, - "@jridgewell/resolve-uri": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz", - "integrity": "sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==", - "dev": true - }, - "@jridgewell/sourcemap-codec": { - "version": "1.4.11", - "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz", - "integrity": "sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==", - "dev": true - }, - "@jridgewell/trace-mapping": { - "version": "0.3.4", - "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz", - "integrity": "sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==", - "dev": true, - "requires": { - "@jridgewell/resolve-uri": "^3.0.3", - "@jridgewell/sourcemap-codec": "^1.4.10" - } - }, "@manypkg/find-root": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@manypkg/find-root/-/find-root-1.1.0.tgz", @@ -42734,6 +42908,20 @@ } } }, + "@typescript-eslint/experimental-utils": { + "version": "4.26.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.26.1.tgz", + "integrity": "sha512-sQHBugRhrXzRCs9PaGg6rowie4i8s/iD/DpTB+EXte8OMDfdCG5TvO73XlO9Wc/zi0uyN4qOmX9hIjQEyhnbmQ==", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.7", + "@typescript-eslint/scope-manager": "4.26.1", + "@typescript-eslint/types": "4.26.1", + "@typescript-eslint/typescript-estree": "4.26.1", + "eslint-scope": "^5.1.1", + "eslint-utils": "^3.0.0" + } + }, "@typescript-eslint/parser": { "version": "4.26.1", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.26.1.tgz", @@ -44346,16 +44534,16 @@ } }, "browserslist": { - "version": "4.19.3", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.3.tgz", - "integrity": "sha512-XK3X4xtKJ+Txj8G5c30B4gsm71s69lqXlkYui4s6EkKxuv49qjYlY6oVd+IFJ73d4YymtM3+djvvt/R/iJwwDg==", + "version": "4.16.6", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz", + "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==", "dev": true, "requires": { - "caniuse-lite": "^1.0.30001312", - "electron-to-chromium": "^1.4.71", + "caniuse-lite": "^1.0.30001219", + "colorette": "^1.2.2", + "electron-to-chromium": "^1.3.723", "escalade": "^3.1.1", - "node-releases": "^2.0.2", - "picocolors": "^1.0.0" + "node-releases": "^1.1.71" } }, "bser": { @@ -44720,9 +44908,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30001312", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz", - "integrity": "sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==", + "version": "1.0.30001237", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001237.tgz", + "integrity": "sha512-pDHgRndit6p1NR2GhzMbQ6CkRrp4VKuSsqbcLeOQppYPKOYkKT/6ZvZDvKJUqcmtyWIAHuZq3SVS2vc1egCZzw==", "dev": true }, "capture-exit": { @@ -45253,6 +45441,12 @@ "resolved": "https://registry.npmjs.org/color2k/-/color2k-1.2.4.tgz", "integrity": "sha512-DiwdBwc0BryPFFXoCrW8XQGXl2rEtMToODybxZjKnN5IJXt/tV/FsN02pCK/b7KcWvJEioz3c74lQSmayFvS4Q==" }, + "colorette": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz", + "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==", + "dev": true + }, "colors": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz", @@ -45347,9 +45541,9 @@ } }, "concurrently": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-7.0.0.tgz", - "integrity": "sha512-WKM7PUsI8wyXpF80H+zjHP32fsgsHNQfPLw/e70Z5dYkV7hF+rf8q3D+ScWJIEr57CpkO3OWBko6hwhQLPR8Pw==", + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-6.4.0.tgz", + "integrity": "sha512-HZ3D0RTQMH3oS4gvtYj1P+NBc6PzE2McEra6yEFcQKrUQ9HvtTGU4Dbne083F034p+LRb7kWU0tPRNvSGs1UCQ==", "dev": true, "requires": { "chalk": "^4.1.0", @@ -45740,6 +45934,37 @@ "semver": "7.0.0" }, "dependencies": { + "browserslist": { + "version": "4.17.5", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.5.tgz", + "integrity": "sha512-I3ekeB92mmpctWBoLXe0d5wPS2cBuRvvW0JyyJHMrk9/HmP2ZjrTboNAZ8iuGqaEIlKguljbQY32OkOJIRrgoA==", + "dev": true, + "requires": { + "caniuse-lite": "^1.0.30001271", + "electron-to-chromium": "^1.3.878", + "escalade": "^3.1.1", + "node-releases": "^2.0.1", + "picocolors": "^1.0.0" + } + }, + "caniuse-lite": { + "version": "1.0.30001271", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001271.tgz", + "integrity": "sha512-BBruZFWmt3HFdVPS8kceTBIguKxu4f99n5JNp06OlPD/luoAMIaIK5ieV5YjnBLH3Nysai9sxj9rpJj4ZisXOA==", + "dev": true + }, + "electron-to-chromium": { + "version": "1.3.879", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.879.tgz", + "integrity": "sha512-zJo+D9GwbJvM31IdFmwcGvychhk4KKbKYo2GWlsn+C/dxz2NwmbhGJjWwTfFSF2+eFH7VvfA8MCZ8SOqTrlnpw==", + "dev": true + }, + "node-releases": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz", + "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==", + "dev": true + }, "semver": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz", @@ -46657,9 +46882,9 @@ "dev": true }, "electron-to-chromium": { - "version": "1.4.73", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.73.tgz", - "integrity": "sha512-RlCffXkE/LliqfA5m29+dVDPB2r72y2D2egMMfIy3Le8ODrxjuZNVo4NIC2yPL01N4xb4nZQLwzi6Z5tGIGLnA==", + "version": "1.3.752", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz", + "integrity": "sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A==", "dev": true }, "element-resize-detector": { @@ -47576,90 +47801,12 @@ } }, "eslint-plugin-jest": { - "version": "26.1.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-26.1.0.tgz", - "integrity": "sha512-vjF6RvcKm4xZSJgCmXb9fXmhzTva+I9jtj9Qv5JeZQTRocU7WT1g3Kx0cZ+00SekPe2DtSWDawHtSj4RaxFhXQ==", + "version": "24.3.6", + "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-24.3.6.tgz", + "integrity": "sha512-WOVH4TIaBLIeCX576rLcOgjNXqP+jNlCiEmRgFTfQtJ52DpwnIQKAVGlGPAN7CZ33bW6eNfHD6s8ZbEUTQubJg==", "dev": true, "requires": { - "@typescript-eslint/utils": "^5.10.0" - }, - "dependencies": { - "@typescript-eslint/scope-manager": { - "version": "5.10.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.10.2.tgz", - "integrity": "sha512-39Tm6f4RoZoVUWBYr3ekS75TYgpr5Y+X0xLZxXqcZNDWZdJdYbKd3q2IR4V9y5NxxiPu/jxJ8XP7EgHiEQtFnw==", - "dev": true, - "requires": { - "@typescript-eslint/types": "5.10.2", - "@typescript-eslint/visitor-keys": "5.10.2" - } - }, - "@typescript-eslint/types": { - "version": "5.10.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.10.2.tgz", - "integrity": "sha512-Qfp0qk/5j2Rz3p3/WhWgu4S1JtMcPgFLnmAKAW061uXxKSa7VWKZsDXVaMXh2N60CX9h6YLaBoy9PJAfCOjk3w==", - "dev": true - }, - "@typescript-eslint/typescript-estree": { - "version": "5.10.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.2.tgz", - "integrity": "sha512-WHHw6a9vvZls6JkTgGljwCsMkv8wu8XU8WaYKeYhxhWXH/atZeiMW6uDFPLZOvzNOGmuSMvHtZKd6AuC8PrwKQ==", - "dev": true, - "requires": { - "@typescript-eslint/types": "5.10.2", - "@typescript-eslint/visitor-keys": "5.10.2", - "debug": "^4.3.2", - "globby": "^11.0.4", - "is-glob": "^4.0.3", - "semver": "^7.3.5", - "tsutils": "^3.21.0" - } - }, - "@typescript-eslint/utils": { - "version": "5.10.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.10.2.tgz", - "integrity": "sha512-vuJaBeig1NnBRkf7q9tgMLREiYD7zsMrsN1DA3wcoMDvr3BTFiIpKjGiYZoKPllfEwN7spUjv7ZqD+JhbVjEPg==", - "dev": true, - "requires": { - "@types/json-schema": "^7.0.9", - "@typescript-eslint/scope-manager": "5.10.2", - "@typescript-eslint/types": "5.10.2", - "@typescript-eslint/typescript-estree": "5.10.2", - "eslint-scope": "^5.1.1", - "eslint-utils": "^3.0.0" - } - }, - "@typescript-eslint/visitor-keys": { - "version": "5.10.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.10.2.tgz", - "integrity": "sha512-zHIhYGGGrFJvvyfwHk5M08C5B5K4bewkm+rrvNTKk1/S15YHR+SA/QUF8ZWscXSfEaB8Nn2puZj+iHcoxVOD/Q==", - "dev": true, - "requires": { - "@typescript-eslint/types": "5.10.2", - "eslint-visitor-keys": "^3.0.0" - } - }, - "debug": { - "version": "4.3.3", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz", - "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==", - "dev": true, - "requires": { - "ms": "2.1.2" - } - }, - "eslint-visitor-keys": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.2.0.tgz", - "integrity": "sha512-IOzT0X126zn7ALX0dwFiUQEdsfzrm4+ISsQS8nukaJXwEyYKRSnEIIDULYg1mCtGp7UUXgfGl7BIolXREQK+XQ==", - "dev": true - }, - "ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", - "dev": true - } + "@typescript-eslint/experimental-utils": "^4.0.1" } }, "eslint-plugin-jsx-a11y": { @@ -50276,9 +50423,9 @@ "dev": true }, "is-glob": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", - "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz", + "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==", "dev": true, "requires": { "is-extglob": "^2.1.1" @@ -55884,9 +56031,9 @@ "optional": true }, "nanoid": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz", - "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==", + "version": "3.1.30", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz", + "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==", "dev": true }, "nanomatch": { @@ -56071,9 +56218,9 @@ "dev": true }, "node-releases": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.2.tgz", - "integrity": "sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==", + "version": "1.1.73", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz", + "integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==", "dev": true }, "noms": { diff --git a/package.json b/package.json index f0317d7a133..c38424360c5 100644 --- a/package.json +++ b/package.json @@ -7,12 +7,19 @@ "exports": { ".": { "node": "./lib/index.js", + "require": "./lib/index.js", "default": "./lib-esm/index.js" }, "./drafts": { "node": "./lib/drafts/index.js", + "require": "./lib/drafts/index.js", "default": "./lib-esm/drafts/index.js" }, + "./deprecated": { + "node": "./lib/deprecated/index.js", + "require": "./lib/deprecated/index.js", + "default": "./lib-esm/deprecated/index.js" + }, "./lib-esm/*": { "node": [ "./lib/*.js", @@ -88,7 +95,7 @@ }, "devDependencies": { "@babel/cli": "7.14.5", - "@babel/core": "7.17.5", + "@babel/core": "7.14.8", "@babel/eslint-parser": "7.15.7", "@babel/plugin-proposal-nullish-coalescing-operator": "7.16.0", "@babel/plugin-proposal-optional-chaining": "7.14.5", @@ -131,13 +138,13 @@ "babel-polyfill": "6.26.0", "chroma-js": "2.1.2", "chromatic": "6.1.0", - "concurrently": "7.0.0", + "concurrently": "6.4.0", "copyfiles": "2.4.1", "cross-env": "7.0.3", "enzyme": "3.11.0", "eslint": "7.28.0", "eslint-plugin-github": "4.1.3", - "eslint-plugin-jest": "26.1.0", + "eslint-plugin-jest": "24.3.6", "eslint-plugin-jsx-a11y": "6.4.1", "eslint-plugin-mdx": "1.15.1", "eslint-plugin-prettier": "3.4.0", diff --git a/src/ActionList2/ActionListContainerContext.tsx b/src/ActionList/ActionListContainerContext.tsx similarity index 100% rename from src/ActionList2/ActionListContainerContext.tsx rename to src/ActionList/ActionListContainerContext.tsx diff --git a/src/ActionList2/Description.tsx b/src/ActionList/Description.tsx similarity index 89% rename from src/ActionList2/Description.tsx rename to src/ActionList/Description.tsx index b82b3486730..f3feff2f86c 100644 --- a/src/ActionList2/Description.tsx +++ b/src/ActionList/Description.tsx @@ -4,7 +4,7 @@ import {SxProp, merge} from '../sx' import Truncate from '../Truncate' import {Slot, ItemContext} from './Item' -export type DescriptionProps = { +export type ActionListDescriptionProps = { /** * Secondary text style variations. * @@ -14,7 +14,7 @@ export type DescriptionProps = { variant?: 'inline' | 'block' } & SxProp -export const Description: React.FC = ({variant = 'inline', sx = {}, ...props}) => { +export const Description: React.FC = ({variant = 'inline', sx = {}, ...props}) => { const styles = { fontSize: 0, lineHeight: '16px', diff --git a/src/ActionList/Divider.tsx b/src/ActionList/Divider.tsx index 0513b60f1ce..e286448eb42 100644 --- a/src/ActionList/Divider.tsx +++ b/src/ActionList/Divider.tsx @@ -1,25 +1,29 @@ import React from 'react' -import styled from 'styled-components' +import Box from '../Box' import {get} from '../constants' - -export const StyledDivider = styled.div` - height: 1px; - background: ${get('colors.border.muted')}; - margin-top: calc(${get('space.2')} - 1px); - margin-bottom: ${get('space.2')}; -` +import {Theme} from '../ThemeProvider' +import {SxProp, merge} from '../sx' /** * Visually separates `Item`s or `Group`s in an `ActionList`. */ -export function Divider(): JSX.Element { - return -} -/** - * `Divider` fulfills the `ItemPropsWithCustomRenderer` contract, - * so it can be used inline in an `ActionList`’s `items` prop. - * In other words, `items={[ActionList.Divider]}` is supported as a concise - * alternative to `items={[{renderItem: () => }]}`. - */ -Divider.renderItem = Divider +export const Divider: React.FC = ({sx = {}}) => { + return ( +