From d08ff798535b595261c2ffca8e9d72f217c61ebf Mon Sep 17 00:00:00 2001 From: Chance Strickland Date: Fri, 6 Mar 2020 08:39:58 -0800 Subject: [PATCH] update docs with listbox --- website/src/components/Layout.js | 2 + website/src/components/mdx-layout.js | 38 +- website/src/pages/listbox.mdx | 649 +++++++++++++++++++++++++++ website/yarn.lock | 122 +---- 4 files changed, 699 insertions(+), 112 deletions(-) create mode 100644 website/src/pages/listbox.mdx diff --git a/website/src/components/Layout.js b/website/src/components/Layout.js index 46cac45a6..59b58de37 100644 --- a/website/src/components/Layout.js +++ b/website/src/components/Layout.js @@ -22,6 +22,7 @@ import "@reach/combobox/styles.css"; import "@reach/slider/styles.css"; import "@reach/checkbox/styles.css"; import "@reach/accordion/styles.css"; +import "@reach/listbox/styles.css"; import "../styles/app.scss"; const NavLink = forwardRef(function NavLink({ children, ...props }, ref) { @@ -225,6 +226,7 @@ function Nav({ media }) { Combobox Dialog (Modal) Disclosure + Listbox Menu Button Portal Skip Nav diff --git a/website/src/components/mdx-layout.js b/website/src/components/mdx-layout.js index 1c7c8c16c..119430a66 100644 --- a/website/src/components/mdx-layout.js +++ b/website/src/components/mdx-layout.js @@ -4,7 +4,7 @@ import { Accordion, AccordionButton, AccordionItem, - AccordionPanel + AccordionPanel, } from "@reach/accordion"; import Alert from "@reach/alert"; import { @@ -12,12 +12,12 @@ import { AlertDialogLabel, AlertDialogDescription, AlertDialogOverlay, - AlertDialogContent + AlertDialogContent, } from "@reach/alert-dialog"; import { Disclosure, DisclosureButton, - DisclosurePanel + DisclosurePanel, } from "@reach/disclosure"; import { useId } from "@reach/auto-id"; import { @@ -25,7 +25,7 @@ import { CustomCheckboxContainer, CustomCheckboxInput, MixedCheckbox, - useMixedCheckbox + useMixedCheckbox, } from "@reach/checkbox"; import { Combobox, @@ -33,8 +33,19 @@ import { ComboboxPopover, ComboboxList, ComboboxOption, - ComboboxOptionText + ComboboxOptionText, } from "@reach/combobox"; +import { + Listbox, + ListboxInput, + ListboxButton, + ListboxArrow, + ListboxPopover, + ListboxList, + ListboxOption, + ListboxGroup, + ListboxGroupLabel, +} from "@reach/listbox"; import Component from "@reach/component-component"; import { Dialog, DialogOverlay, DialogContent } from "@reach/dialog"; import { @@ -44,7 +55,7 @@ import { MenuItem, MenuItems, MenuPopover, - MenuLink + MenuLink, } from "@reach/menu-button"; import Portal from "@reach/portal"; import Rect, { useRect } from "@reach/rect"; @@ -54,7 +65,7 @@ import { SliderTrack, SliderTrackHighlight, SliderHandle, - SliderMarker + SliderMarker, } from "@reach/slider"; import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@reach/tabs"; import Tooltip, { useTooltip, TooltipPopup } from "@reach/tooltip"; @@ -137,6 +148,15 @@ function MyPageLayout({ children }) { DisclosureButton, DisclosurePanel, GatsbyLink, + Listbox, + ListboxInput, + ListboxButton, + ListboxArrow, + ListboxPopover, + ListboxList, + ListboxOption, + ListboxGroup, + ListboxGroupLabel, matchSorter, Menu, MenuButton, @@ -170,12 +190,12 @@ function MyPageLayout({ children }) { useTransition, useWindowSize, VisuallyHidden, - WindowSize + WindowSize, }} /> ); }, - table: Table + table: Table, }} >
diff --git a/website/src/pages/listbox.mdx b/website/src/pages/listbox.mdx new file mode 100644 index 000000000..bbb4dc2df --- /dev/null +++ b/website/src/pages/listbox.mdx @@ -0,0 +1,649 @@ +import SEO from "../components/SEO"; +import { TOC, TOCList, TOCLink } from "../components/TOC"; + + + +# Listbox + + + + Listbox + ListboxInput + ListboxButton + ListboxArrow + ListboxPopover + ListboxList + ListboxOption + ListboxGroup + ListboxGroupLabel + + + +- Source: https://github.com/reach/reach-ui/tree/master/packages/listbox +- WAI-ARIA: https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox + +A listbox presents a list of selectable options in a popover, which is toggled on or off by a button. Visually and behaviorally it is similar to [`@reach/menu-button`](https://reacttraining.com/reach-ui/menu-button) except that `ListboxOption` components hold a value. In this sense they are more directly comparable to HTML select elements. + +```jsx +// jsx-demo +(() => { + function BasicExample() { + let labelId = `taco-label--${useId()}`; + return ( +
+ Choose a taco + + Choose a taco + Carne Asada + + Pollo Sold Out! + +
+ + Pastor Fan favorite! + +
+ Lengua + +
+ ); + } + + function Tag(props) { + return ( + + ); + } + + return ; +})(); +``` + +You can use `Listbox` as a simple standalone component, or compose its parts with `ListboxInput`. + +```jsx +// jsx-demo +(() => { + function ComposedExample() { + let labelId = `taco-label--${useId()}`; + let [value, setValue] = useState("pollo"); + return ( +
+ Choose a taco + setValue(value)} + > + + + + Choose a taco + Carne Asada + Pollo + Pastor + Lengua + +
+

I really like tacos. I hope you enjoy them as well!

+
+ + +
+ ); + } + + return ; +})(); +``` + +## Installation + +From the command line in your project directory, run `npm install @reach/listbox` or `yarn add @reach/listbox`. Then import the components and styles that you need: + +```bash +npm install @reach/listbox +# or +yarn add @reach/listbox +``` + +```js +import { + Listbox, + ListboxInput, + ListboxButton, + ListboxPopover, + ListboxList, + ListboxOption, +} from "@reach/listbox"; +import "@reach/listbox/styles.css"; +``` + +## Usage + +```jsx +// Basic listbox +function Example() { + return ( + + Bojangles' + Church's + KFC + Popeyes + + ); +} + +// Composed listbox components +function ExampleComposed() { + return ( + + + + + Bojangles' + Church's + KFC + Popeyes + + + + ); +} +``` + +## Component API + +### Listbox + +The wrapper component for the high-level listbox API. + +```jsx +
+ Choose a topic + + Drama + Comedy + Suspense + Horror + +
+``` + +#### Controlled Listbox + +If you want to control the state of the listbox's value, you can do so by passing [`value`](#listboxinput-value) and [`onChange`](#listboxinput-onchange) props. The value corresponds with the value of the selected `ListboxOption`. + +```jsx +const [value, setValue] = useState("comedy"); +return ( +
+ Choose a movie genre + + Drama + Comedy + Suspense + Horror + +
+); +``` + +#### Listbox Props + +| Prop | Type | Required | +| --------------------------------------- | ----------------- | -------- | +| [`arrow`](#listbox-arrow) | `boolean \| node` | false | +| [`button`](#listbox-button) | `node \| func` | false | +| [`children`](#listbox-children) | `node \| func` | true | +| [`defaultValue`](#listbox-defaultvalue) | `string` | false | +| [`disabled`](#listbox-disabled) | `boolean` | false | +| [`form`](#listbox-form) | `string` | false | +| [`name`](#listbox-name) | `string` | false | +| [`onChange`](#listbox-onchange) | `func` | false | +| [`required`](#listbox-required) | `boolean` | false | +| [`value`](#listbox-value) | `string` | false | + +##### Listbox `arrow` + +`arrow?: boolean | React.ReactNode` + +Renders a text string or React node to represent an arrow inside the `ListboxButton`. + +```jsx + // renders a default arrow character +▼} /> // renders a component as an arrow character +``` + +If you want to customize the appearance and placement of the arrow inside the button further, you can drop down to the composed API and [render the button's children](#listboxbutton-children). + +##### Listbox `button` + +`button?: React.ReactNode | ((props: { value: string | null; label: string | null; }) => React.ReactNode)` + +A render function or React node to to render the Listbox button's inner content. [See the API for the ListboxButton children prop for details.](#listboxbutton-children) + +##### Listbox `children` + +`children: React.ReactNode` + +`Listbox` should accept `ListboxOption` components as children. + +You can also pass arbitrary elements as needed, but be careful when passing elements that have semantic value into listbox directly (such as `button`). If you need such elements in the popover, chances are they either need to be nested inside an option or elsewhere outside of the list of options. In the latter case, use `ListboxInput` and the composed API. + +##### Listbox `defaultValue` + +`defaultValue?: string` + +The default value of an uncontrolled listbox. + +##### Listbox `disabled` + +`disabled?: boolean` + +Whether or not the listbox is disabled. + +##### Listbox `form` + +`form?: string` + +The ID of a form associated with the listbox and its hidden input field. If Listbox is passed directly inside of its associated form this prop can be omitted so long as the `name` prop is used. + +##### Listbox `name` + +`name?: string` + +The name used for the listbo input's form value. + +##### Listbox `onChange` + +`onChange?(newValue: string): void;` + +The callback that fires when the listbox value changes. + +##### Listbox `required` + +`required?: boolean;` + +Whether or not the listbox input's form field is required. + +##### Listbox `value` + +`value?: string` + +The current value of a controlled listbox. + +### ListboxInput + +The top-level component and context provider for the listbox. + +```jsx +
+ Choose a topic + + + + + Drama + Comedy + Suspense + Horror + + + +
+``` + +#### ListboxInput CSS Selectors + +Please see the [styling guide](/styling). + +```css +[data-reach-listbox-input] { +} +[data-reach-listbox-input][data-state="idle"] { +} +[data-reach-listbox-input][data-value="VALUE_REF"] { +} +``` + +#### ListboxInput Props + +| Prop | Type | Required | +| -------------------------------------------- | -------------- | -------- | +| [`children`](#listboxinput-children) | `node \| func` | true | +| [`defaultValue`](#listboxinput-defaultvalue) | `string` | false | +| [`disabled`](#listboxinput-disabled) | `boolean` | false | +| [`form`](#listboxinput-form) | `string` | false | +| [`name`](#listboxinput-name) | `string` | false | +| [`onChange`](#listboxinput-onchange) | `func` | false | +| [`required`](#listboxinput-required) | `boolean` | false | +| [`value`](#listboxinput-value) | `string` | false | + +##### ListboxInput `children` + +`children: React.ReactNode | ((props: { value: string | null; valueLabel: string | null; }) => React.ReactNode)` + +The composed listbox expects to receive `ListboxButton` and `ListboxPopover` as children. You can also pass in arbitrary wrapper elements if desired. + +If you want access to the listbox's current value and associated label, you can use a render function. + +```jsx + + {({ value, valueLabel }) => ( + + {valueLabel} + + + + Apple 🍏 + Orange 🍊 + Banana 🍌 + + + )} + +``` + +##### ListboxInput `defaultValue` + +`defaultValue?: string` + +The default value of an uncontrolled listbox. + +##### ListboxInput `disabled` + +`disabled?: boolean` + +Whether or not the listbox is disabled. + +##### ListboxInput `form` + +`form?: string` + +The ID of a form associated with the listbox and its hidden input field. If Listbox is passed directly inside of its associated form this prop can be omitted so long as the `name` prop is used. + +##### ListboxInput `name` + +`name?: string` + +The name used for the listbo input's form value. + +##### ListboxInput `onChange` + +`onChange?(newValue: string): void;` + +The callback that fires when the listbox value changes. + +##### ListboxInput `required` + +`required?: boolean;` + +Whether or not the listbox input's form field is required. + +##### ListboxInput `value` + +`value?: string` + +The current value of a controlled listbox. + +### ListboxButton + +The interactive toggle button that triggers the popover for the listbox. + +#### ListboxButton CSS Selectors + +Please see the [styling guide](/styling). + +```css +[data-reach-listbox-button] { +} +[data-reach-listbox-button][aria-expaned="true"] { +} +[data-reach-listbox-button][aria-disabled="true"] { +} +``` + +#### ListboxButton Props + +| Prop | Type | Required | +| ------------------------------------- | ----------------- | -------- | +| [`arrow`](#listboxbutton-arrow) | `boolean \| node` | false | +| [`children`](#listboxbutton-children) | `node \| func` | true | + +##### ListboxButton `arrow` + +`arrow?: boolean | React.ReactNode` + +Renders a text string or React node to represent an arrow inside the button`. + +##### ListboxButton `children` + +`children: React.ReactNode | ((props: { value: string | null; label: string; expanded: boolean; }) => React.ReactNode)` + +A render function or React node to to render the button's inner content. + +By default, the button will display the text label of the selected option as its inner content. This label can be pulled from the option's inner text content or explicitly provided to the ListboxOption component via the label prop. If you want to render the button differently from its default, you must pass children. + +##### Rendering ListboxButton on the server + +It's important to note that the ListboxButton's default inner content cannot be server-side rendered. On the initial render, the button has no contextual information about the available options in a Listbox. As each ListboxOption is rendered, it is registered in a context object and updated at the top of the Listbox tree, which evaluates the options and their props to determine which option is selectable and which label to display inside the button. If you need the inner content of the button on the first render you must control the listbox's state and keep its options' values and labels in data at the top of the tree, and render the button directly via children. + +```jsx +let options = { one: "One option", two: "Another option" }; +let [value, setValue] = useState(options.one); +return ( + + {options[value]} + + + {Object.keys(options).map(option => ( + + {options[option]} + + ))} + + + +); +``` + +### ListboxArrow + +A wrapper component for an arrow to display in the `ListboxButton`. + +You can use your own wrapper component if you prefer, but if its inner content contains anything that can be read by assistive devices you should use `aria-hidden` on the wrapper element, as the arrow should have no semantic value. + +#### ListboxArrow CSS Selectors + +Please see the [styling guide](/styling). + +```css +[data-reach-listbox-arrow] { +} +[data-reach-listbox-button][data-expaned] { +} +``` + +#### ListboxArrow Props + +| Prop | Type | Required | +| ------------------------------------ | -------------- | -------- | +| [`children`](#listboxarrow-children) | `node \| func` | true | + +##### ListboxArrow `children` + +`children: React.ReactNode | ((props: { expanded: boolean }) => React.ReactNode)` + +Children to render as the listbox button's arrow. This can be a render function that accepts the listbox's `expanded` state as an argument. + +### ListboxPopover + +The popover containing the list of options. + +#### ListboxPopover CSS Selectors + +Please see the [styling guide](/styling). + +```css +[data-reach-listbox-popover] { +} +[data-reach-listbox-popover][hidden] { +} +``` + +#### ListboxPopover Props + +| Prop | Type | Required | +| -------------------------------------- | --------- | -------- | +| [`children`](#listboxpopover-children) | `node` | true | +| [`portal`](#listboxpopover-portal) | `boolean` | false | +| [`position`](#listboxpopover-position) | `func` | false | + +##### ListboxPopover `children` + +`children: React.ReactNode` + +`ListboxPopover` expects to receive `ListboxList` as its children. + +##### ListboxPopover `portal` + +`portal?: boolean` + +Whether or not the popover should be rendered inside a portal. Defaults to `true`. + +##### ListboxPopover `position` + +`position?(targetRect?: DOMRect | null; popoverRect?: DOMRect | null): React.CSSProperties` + +The positioning function for the popover. + +### ListboxList + +The list containing all listbox options. + +#### ListboxList CSS Selectors + +Please see the [styling guide](/styling). + +```css +[data-reach-listbox-list] { +} +``` + +### ListboxOption + +A selectable option for the listbox. + +#### ListboxOption CSS Selectors + +Please see the [styling guide](/styling). + +```css +[data-reach-listbox-option] { +} +[data-reach-listbox-option][data-highlighted] { +} +[data-reach-listbox-option][aria-selected="true"] { +} +[data-reach-listbox-option][aria-disabled="true"] { +} +``` + +#### ListboxOption Props + +| Prop | Type | Required | +| ------------------------------------- | --------- | -------- | +| [`disabled`](#listboxoption-disabled) | `boolean` | false | +| [`label`](#listboxoption-label) | `string` | false | +| [`value`](#listboxoption-value) | `string` | true | + +##### ListboxOption `disabled` + +`disabled?: boolean` + +Whether or not the option is disabled from selection and navigation. + +##### ListboxOption `label` + +`label?: string` + +The option's human-readable label. This prop is optional but highly encouraged if your option has multiple text nodes that may or may not correlate with the intended value, or if the inner text is really long (all text will be read by a screen reader by default, which can create a confusing experience). + +It is also useful if the inner text node begins with a character other than a readable letter (like an emoji or symbol) so that typeahead works as expected for the user. + +##### ListboxOption `value` + +`value: string` + +The option's value. This will be passed into a hidden input field for use in forms when the option is selected. + +### ListboxGroup + +A group of related listbox options. + +#### ListboxGroup CSS Selectors + +Please see the [styling guide](/styling). + +```css +[data-reach-listbox-group] { +} +``` + +#### ListboxGroup Props + +| Prop | Type | Required | +| ------------------------------ | -------- | -------- | +| [`label`](#listboxgroup-label) | `string` | false | + +##### ListboxGroup `label` + +`label?: string` + +The text label to use for the listbox group. This can be omitted if a group contains a `ListboxGroupLabel` component. The label should always be human-readable. + +### ListboxGroupLabel + +A label identifier for a `ListboxGroup`. This can be used in lieu of the `label` prop in `ListboxGroup`. + +```jsx + + Veggies + Broccoli 🥦 + Carrot 🥕 + Tomato 🍅 + +``` + +#### ListboxGroup CSS Selectors + +Please see the [styling guide](/styling). + +```css +[data-reach-listbox-group-label] { +} +``` diff --git a/website/yarn.lock b/website/yarn.lock index c131c72b2..1c1722f25 100644 --- a/website/yarn.lock +++ b/website/yarn.lock @@ -1258,6 +1258,7 @@ "@reach/auto-id@file:../packages/auto-id": version "0.8.5" dependencies: + "@reach/utils" "^0.8.5" tslib "^1.10.0" "@reach/checkbox@file:../packages/checkbox": @@ -1326,7 +1327,16 @@ tslib "^1.10.0" warning "^4.0.3" -"@reach/machine@0.1.0": +"@reach/listbox@file:../packages/listbox": + version "0.1.0" + dependencies: + "@reach/descendants" "^0.8.5" + "@reach/machine" "^0.1.0" + "@reach/popover" "^0.8.5" + "@reach/utils" "^0.8.5" + prop-types "^15.7.2" + +"@reach/machine@0.1.0", "@reach/machine@^0.1.0": version "0.1.0" resolved "https://registry.yarnpkg.com/@reach/machine/-/machine-0.1.0.tgz#3d9b2ca077232a07e652a59049a1482fb71c3801" integrity sha512-4lcR+49DknkodvXS+oA//8GvGiuYLote6EPCifmsK5/ydPwYBA2vLRfQ9Sd1N4sDk2mTYs1VJHR2W497JRpyIA== @@ -1381,6 +1391,7 @@ "@reach/portal@file:../packages/portal": version "0.8.5" dependencies: + "@reach/utils" "^0.8.5" tslib "^1.10.0" "@reach/rect@^0.8.2": @@ -1396,6 +1407,7 @@ version "0.8.2" dependencies: "@reach/observe-rect" "^1.0.5" + "@reach/utils" "^0.8.5" prop-types "^15.7.2" tslib "^1.10.0" @@ -4330,7 +4342,7 @@ detect-indent@^6.0.0: resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd" integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA== -detect-libc@^1.0.2, detect-libc@^1.0.3: +detect-libc@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b" integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups= @@ -5672,13 +5684,6 @@ fs-extra@^8.1.0: jsonfile "^4.0.0" universalify "^0.1.0" -fs-minipass@^1.2.5: - version "1.2.7" - resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7" - integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA== - dependencies: - minipass "^2.6.0" - fs-minipass@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb" @@ -6987,7 +6992,7 @@ human-signals@^1.1.1: resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3" integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw== -iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@^0.4.4: +iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA== @@ -7016,13 +7021,6 @@ iferr@^0.1.5: resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501" integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE= -ignore-walk@^3.0.1: - version "3.0.3" - resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37" - integrity sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw== - dependencies: - minimatch "^3.0.4" - ignore@^3.3.5: version "3.3.10" resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043" @@ -8829,14 +8827,6 @@ minimist@^1.1.3, minimist@^1.2.0: resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284" integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ= -minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0: - version "2.9.0" - resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6" - integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg== - dependencies: - safe-buffer "^5.1.2" - yallist "^3.0.0" - minipass@^3.0.0: version "3.1.1" resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.1.tgz#7607ce778472a185ad6d89082aa2070f79cedcd5" @@ -8844,13 +8834,6 @@ minipass@^3.0.0: dependencies: yallist "^4.0.0" -minizlib@^1.2.1: - version "1.3.3" - resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d" - integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q== - dependencies: - minipass "^2.9.0" - minizlib@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.0.tgz#fd52c645301ef09a63a2c209697c294c6ce02cf3" @@ -8996,15 +8979,6 @@ natural-compare@^1.4.0: resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc= -needle@^2.2.1: - version "2.3.3" - resolved "https://registry.yarnpkg.com/needle/-/needle-2.3.3.tgz#a041ad1d04a871b0ebb666f40baaf1fb47867117" - integrity sha512-EkY0GeSq87rWp1hoq/sH/wnTWgFVhYlnIkbJ0YJFfRgEFlz2RraCjBpFQ+vrEgEdp0ThfyHADmkChEhcb7PKyw== - dependencies: - debug "^3.2.6" - iconv-lite "^0.4.4" - sax "^1.2.4" - negotiator@0.6.2: version "0.6.2" resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb" @@ -9130,22 +9104,6 @@ node-object-hash@^2.0.0: resolved "https://registry.yarnpkg.com/node-object-hash/-/node-object-hash-2.0.0.tgz#9971fcdb7d254f05016bd9ccf508352bee11116b" integrity sha512-VZR0zroAusy1ETZMZiGeLkdu50LGjG5U1KHZqTruqtTyQ2wfWhHG2Ow4nsUbfTFGlaREgNHcCWoM/OzEm6p+NQ== -node-pre-gyp@*: - version "0.14.0" - resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83" - integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA== - dependencies: - detect-libc "^1.0.2" - mkdirp "^0.5.1" - needle "^2.2.1" - nopt "^4.0.1" - npm-packlist "^1.1.6" - npmlog "^4.0.2" - rc "^1.2.7" - rimraf "^2.6.1" - semver "^5.3.0" - tar "^4.4.2" - node-releases@^1.1.50: version "1.1.50" resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.50.tgz#803c40d2c45db172d0410e4efec83aa8c6ad0592" @@ -9196,14 +9154,6 @@ noop-logger@^0.1.1: dependencies: abbrev "1" -nopt@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d" - integrity sha1-0NRoWv1UFRk8jHUFYC0NF81kR00= - dependencies: - abbrev "1" - osenv "^0.1.4" - normalize-package-data@^2.3.2, normalize-package-data@^2.3.4: version "2.5.0" resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8" @@ -9260,13 +9210,6 @@ normalize-url@^4.1.0: resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129" integrity sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ== -npm-bundled@^1.0.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b" - integrity sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA== - dependencies: - npm-normalize-package-bin "^1.0.1" - npm-conf@^1.1.0: version "1.1.3" resolved "https://registry.yarnpkg.com/npm-conf/-/npm-conf-1.1.3.tgz#256cc47bd0e218c259c4e9550bf413bc2192aff9" @@ -9275,20 +9218,6 @@ npm-conf@^1.1.0: config-chain "^1.1.11" pify "^3.0.0" -npm-normalize-package-bin@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2" - integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA== - -npm-packlist@^1.1.6: - version "1.4.8" - resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.8.tgz#56ee6cc135b9f98ad3d51c1c95da22bbb9b2ef3e" - integrity sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A== - dependencies: - ignore-walk "^3.0.1" - npm-bundled "^1.0.1" - npm-normalize-package-bin "^1.0.1" - npm-run-path@^2.0.0: version "2.0.2" resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f" @@ -9303,7 +9232,7 @@ npm-run-path@^4.0.0: dependencies: path-key "^3.0.0" -"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.1, npmlog@^4.0.2, npmlog@^4.1.2: +"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.1, npmlog@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b" integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg== @@ -9585,7 +9514,7 @@ os-tmpdir@^1.0.0, os-tmpdir@~1.0.2: resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274" integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ= -osenv@0, osenv@^0.1.4: +osenv@0: version "0.1.5" resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410" integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g== @@ -11934,7 +11863,7 @@ sass-loader@^7.3.1: pify "^4.0.1" semver "^6.3.0" -sax@>=0.6.0, sax@^1.2.4, sax@~1.2.4: +sax@>=0.6.0, sax@~1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== @@ -13074,19 +13003,6 @@ tar@^2.0.0: fstream "^1.0.12" inherits "2" -tar@^4.4.2: - version "4.4.13" - resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525" - integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA== - dependencies: - chownr "^1.1.1" - fs-minipass "^1.2.5" - minipass "^2.8.6" - minizlib "^1.2.1" - mkdirp "^0.5.0" - safe-buffer "^5.1.2" - yallist "^3.0.3" - tar@^5.0.5: version "5.0.5" resolved "https://registry.yarnpkg.com/tar/-/tar-5.0.5.tgz#03fcdb7105bc8ea3ce6c86642b9c942495b04f93" @@ -14328,7 +14244,7 @@ yallist@^2.0.0, yallist@^2.1.2: resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52" integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI= -yallist@^3.0.0, yallist@^3.0.2, yallist@^3.0.3: +yallist@^3.0.2: version "3.1.1" resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd" integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==