@material-ui/core - npm Package Compare versions

Comparing version 5.0.0-beta.2 to 5.0.0-beta.3

Accordion/accordionClasses.d.ts

@@ -6,5 +6,5 @@ export interface AccordionClasses {
     rounded: string;
-    /** Pseudo-class applied to the root element if `expanded={true}`. */
+    /** State class applied to the root element if `expanded={true}`. */
     expanded: string;
-    /** Pseudo-class applied to the root element if `disabled={true}`. */
+    /** State class applied to the root element if `disabled={true}`. */
     disabled: string;
@@ -11,0 +11,0 @@ /** Styles applied to the root element unless `disableGutters={true}`. */

AccordionActions/accordionActionsClasses.d.ts

@@ -0,0 +0,0 @@ export interface AccordionActionsClasses {

AccordionDetails/accordionDetailsClasses.d.ts

@@ -0,0 +0,0 @@ export interface AccordionDetailsClasses {

AccordionSummary/accordionSummaryClasses.d.ts

 export interface AccordionSummaryClasses {
     /** Styles applied to the root element. */
     root: string;
-    /** Pseudo-class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`. */
+    /** State class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`. */
     expanded: string;
-    /** Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */
+    /** State class applied to the ButtonBase root element if the button is keyboard focused. */
     focusVisible: string;
-    /** Pseudo-class applied to the root element if `disabled={true}`. */
+    /** State class applied to the root element if `disabled={true}`. */
     disabled: string;
@@ -10,0 +10,0 @@ /** Styles applied to the root element unless `disableGutters={true}`. */

Alert/alertClasses.d.ts

@@ -0,0 +0,0 @@ export interface AlertClasses {

AlertTitle/alertTitleClasses.d.ts

@@ -0,0 +0,0 @@ export interface AlertTitleClasses {

AppBar/appBarClasses.d.ts

@@ -0,0 +0,0 @@ export interface AppBarClasses {

Autocomplete/Autocomplete.d.ts

@@ -7,4 +7,4 @@ import * as React from 'react';
 import { OverridableStringUnion } from '@material-ui/types';
-import { AutocompleteClasses } from './autocompleteClasses';
-import useAutocomplete, {
+import {
+  useAutocomplete,
   AutocompleteChangeDetails,
@@ -16,3 +16,4 @@ AutocompleteChangeReason,
   UseAutocompleteProps,
-} from '../useAutocomplete';
+} from '@material-ui/unstyled';
+import { AutocompleteClasses } from './autocompleteClasses';
 
@@ -19,0 +20,0 @@ export {

Autocomplete/Autocomplete.js

@@ -11,3 +11,3 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import { chainPropTypes, integerPropType } from '@material-ui/utils';
-import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
+import { unstable_composeClasses as composeClasses, useAutocomplete, createFilterOptions } from '@material-ui/unstyled';
 import { alpha } from '@material-ui/system';
@@ -21,3 +21,2 @@ import Popper from '../Popper';
 import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
-import useAutocomplete, { createFilterOptions } from '../useAutocomplete';
 import useThemeProps from '../styles/useThemeProps';
@@ -24,0 +23,0 @@ import styled from '../styles/styled';

Autocomplete/autocompleteClasses.d.ts

@@ -6,3 +6,3 @@ export interface AutocompleteClasses {
     fullWidth: string;
-    /** Pseudo-class applied to the root element if focused. */
+    /** State class applied to the root element if focused. */
     focused: string;
@@ -9,0 +9,0 @@ /** Styles applied to the tag elements, e.g. the chips. */

Avatar/avatarClasses.d.ts

@@ -0,0 +0,0 @@ export interface AvatarClasses {

AvatarGroup/avatarGroupClasses.d.ts

@@ -0,0 +0,0 @@ export interface AvatarGroupClasses {

BottomNavigation/bottomNavigationClasses.d.ts

@@ -0,0 +0,0 @@ export interface BottomNavigationClasses {

BottomNavigationAction/bottomNavigationActionClasses.d.ts

 export interface BottomNavigationActionClasses {
     /** Styles applied to the root element. */
     root: string;
-    /** Pseudo-class applied to the root element if selected. */
+    /** State class applied to the root element if selected. */
     selected: string;
-    /** Pseudo-class applied to the root element if `showLabel={false}` and not selected. */
+    /** State class applied to the root element if `showLabel={false}` and not selected. */
     iconOnly: string;
@@ -8,0 +8,0 @@ /** Styles applied to the label's span element. */

Breadcrumbs/breadcrumbsClasses.d.ts

@@ -0,0 +0,0 @@ export interface BreadcrumbsClasses {

Button/buttonClasses.d.ts

@@ -30,5 +30,5 @@ export interface ButtonClasses {
     disableElevation: string;
-    /** Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */
+    /** State class applied to the ButtonBase root element if the button is keyboard focused. */
     focusVisible: string;
-    /** Pseudo-class applied to the root element if `disabled={true}`. */
+    /** State class applied to the root element if `disabled={true}`. */
     disabled: string;
@@ -35,0 +35,0 @@ /** Styles applied to the root element if `color="inherit"`. */

ButtonBase/buttonBaseClasses.d.ts

 export interface ButtonBaseClasses {
     /** Styles applied to the root element. */
     root: string;
-    /** Pseudo-class applied to the root element if `disabled={true}`. */
+    /** State class applied to the root element if `disabled={true}`. */
     disabled: string;
-    /** Pseudo-class applied to the root element if keyboard focused. */
+    /** State class applied to the root element if keyboard focused. */
     focusVisible: string;
@@ -8,0 +8,0 @@ }

ButtonBase/touchRippleClasses.d.ts

@@ -0,0 +0,0 @@ export interface TouchRippleClasses {

ButtonGroup/buttonGroupClasses.d.ts

@@ -12,3 +12,3 @@ export interface ButtonGroupClasses {
     disableElevation: string;
-    /** Pseudo-class applied to the child elements if `disabled={true}`. */
+    /** State class applied to the child elements if `disabled={true}`. */
     disabled: string;
@@ -15,0 +15,0 @@ /** Styles applied to the root element if `fullWidth={true}`. */

Card/cardClasses.d.ts

@@ -0,0 +0,0 @@ export interface CardClasses {

CardActionArea/cardActionAreaClasses.d.ts

 export interface CardActionAreaClasses {
     /** Styles applied to the root element. */
     root: string;
-    /** Pseudo-class applied to the ButtonBase root element if the action area is keyboard focused. */
+    /** State class applied to the ButtonBase root element if the action area is keyboard focused. */
     focusVisible: string;
@@ -6,0 +6,0 @@ /** Styles applied to the overlay that covers the action area when it is keyboard focused. */

CardActions/cardActionsClasses.d.ts

@@ -0,0 +0,0 @@ export interface CardActionsClasses {

CardContent/cardContentClasses.d.ts

@@ -0,0 +0,0 @@ export interface CardContentClasses {

CardHeader/cardHeaderClasses.d.ts

@@ -0,0 +0,0 @@ export interface CardHeaderClasses {

CardMedia/cardMediaClasses.d.ts

@@ -0,0 +0,0 @@ export interface CardMediaClasses {

Checkbox/checkboxClasses.d.ts

 export interface CheckboxClasses {
     /** Styles applied to the root element. */
     root: string;
-    /** Pseudo-class applied to the root element if `checked={true}`. */
+    /** State class applied to the root element if `checked={true}`. */
     checked: string;
-    /** Pseudo-class applied to the root element if `disabled={true}`. */
+    /** State class applied to the root element if `disabled={true}`. */
     disabled: string;
-    /** Pseudo-class applied to the root element if `indeterminate={true}`. */
+    /** State class applied to the root element if `indeterminate={true}`. */
     indeterminate: string;
@@ -10,0 +10,0 @@ /** Styles applied to the root element if `color="primary"`. */

Chip/chipClasses.d.ts

@@ -12,3 +12,3 @@ export interface ChipClasses {
     colorSecondary: string;
-    /** Pseudo-class applied to the root element if `disabled={true}`. */
+    /** State class applied to the root element if `disabled={true}`. */
     disabled: string;
@@ -75,3 +75,3 @@ /** Styles applied to the root element if `onClick` is defined or `clickable={true}`. */
     deleteIconOutlinedColorSecondary: string;
-    /** Pseudo-class applied to the root element if keyboard focused. */
+    /** State class applied to the root element if keyboard focused. */
     focusVisible: string;
@@ -78,0 +78,0 @@ }

CircularProgress/circularProgressClasses.d.ts

@@ -0,0 +0,0 @@ export interface CircularProgressClasses {

ClickAwayListener/ClickAwayListener.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

ClickAwayListener/index.d.ts

 export { default } from './ClickAwayListener';
 export * from './ClickAwayListener';

Collapse/collapseClasses.d.ts

 export interface CollapseClasses {
     /** Styles applied to the root element. */
     root: string;
-    /** Pseudo-class applied to the root element if `orientation="horizontal"`. */
+    /** State class applied to the root element if `orientation="horizontal"`. */
     horizontal: string;
@@ -6,0 +6,0 @@ /** Styles applied to the root element when the transition has entered. */

colors/amber.d.ts

@@ -0,0 +0,0 @@ /* tslint:disable max-line-length */

colors/blue.d.ts

@@ -0,0 +0,0 @@ /* tslint:disable max-line-length */

colors/blueGrey.d.ts

@@ -0,0 +0,0 @@ /* tslint:disable max-line-length */

colors/brown.d.ts

@@ -0,0 +0,0 @@ /* tslint:disable max-line-length */

colors/common.d.ts

@@ -0,0 +0,0 @@ /* tslint:disable max-line-length */

colors/cyan.d.ts

@@ -0,0 +0,0 @@ /* tslint:disable max-line-length */

colors/deepOrange.d.ts

@@ -0,0 +0,0 @@ /* tslint:disable max-line-length */

colors/deepPurple.d.ts

@@ -0,0 +0,0 @@ /* tslint:disable max-line-length */

colors/green.d.ts

@@ -0,0 +0,0 @@ /* tslint:disable max-line-length */

colors/indigo.d.ts

@@ -0,0 +0,0 @@ /* tslint:disable max-line-length */

colors/lightBlue.d.ts

@@ -0,0 +0,0 @@ /* tslint:disable max-line-length */

colors/lightGreen.d.ts

@@ -0,0 +0,0 @@ /* tslint:disable max-line-length */

colors/lime.d.ts

@@ -0,0 +0,0 @@ /* tslint:disable max-line-length */

colors/orange.d.ts

@@ -0,0 +0,0 @@ /* tslint:disable max-line-length */

colors/pink.d.ts

@@ -0,0 +0,0 @@ /* tslint:disable max-line-length */

colors/purple.d.ts

@@ -0,0 +0,0 @@ /* tslint:disable max-line-length */

colors/red.d.ts

@@ -0,0 +0,0 @@ /* tslint:disable max-line-length */

colors/teal.d.ts

@@ -0,0 +0,0 @@ /* tslint:disable max-line-length */

colors/yellow.d.ts

@@ -0,0 +0,0 @@ /* tslint:disable max-line-length */

Container/containerClasses.d.ts

@@ -0,0 +0,0 @@ export interface ContainerClasses {

darkScrollbar/index.d.ts

@@ -0,0 +0,0 @@ export default function darkScrollbar(options?: {

Dialog/dialogClasses.d.ts

@@ -0,0 +0,0 @@ export interface DialogClasses {

Dialog/DialogContext.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

DialogActions/dialogActionsClasses.d.ts

@@ -0,0 +0,0 @@ export interface DialogActionsClasses {

DialogContent/dialogContentClasses.d.ts

@@ -0,0 +0,0 @@ export interface DialogContentClasses {

DialogContentText/dialogContentTextClasses.d.ts

@@ -0,0 +0,0 @@ export interface DialogContentTextClasses {

DialogTitle/dialogTitleClasses.d.ts

@@ -0,0 +0,0 @@ export interface DialogTitleClasses {

Divider/dividerClasses.d.ts

@@ -0,0 +0,0 @@ export interface DividerClasses {

Drawer/drawerClasses.d.ts

@@ -0,0 +0,0 @@ export interface DrawerClasses {

Fab/fabClasses.d.ts

@@ -12,5 +12,5 @@ export interface FabClasses {
     circular: string;
-    /** Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */
+    /** State class applied to the ButtonBase root element if the button is keyboard focused. */
     focusVisible: string;
-    /** Pseudo-class applied to the root element if `disabled={true}`. */
+    /** State class applied to the root element if `disabled={true}`. */
     disabled: string;
@@ -17,0 +17,0 @@ /** Styles applied to the root element if `color="inherit"`. */

FilledInput/filledInputClasses.d.ts

@@ -8,5 +8,5 @@ export interface FilledInputClasses {
     underline: string;
-    /** Pseudo-class applied to the root element if the component is focused. */
+    /** State class applied to the root element if the component is focused. */
     focused: string;
-    /** Pseudo-class applied to the root element if `disabled={true}`. */
+    /** State class applied to the root element if `disabled={true}`. */
     disabled: string;
@@ -17,3 +17,3 @@ /** Styles applied to the root element if `startAdornment` is provided. */
     adornedEnd: string;
-    /** Pseudo-class applied to the root element if `error={true}`. */
+    /** State class applied to the root element if `error={true}`. */
     error: string;
@@ -20,0 +20,0 @@ /** Styles applied to the input element if `size="small"`. */

FormControl/formControlClasses.d.ts

@@ -0,0 +0,0 @@ export interface FormControlClasses {

FormControlLabel/formControlLabelClasses.d.ts

@@ -10,3 +10,3 @@ export interface FormControlLabelClasses {
     labelPlacementBottom: string;
-    /** Pseudo-class applied to the root element if `disabled={true}`. */
+    /** State class applied to the root element if `disabled={true}`. */
     disabled: string;
@@ -13,0 +13,0 @@ /** Styles applied to the label's Typography component. */

FormGroup/formGroupClasses.d.ts

@@ -0,0 +0,0 @@ export interface FormGroupClasses {

FormHelperText/formHelperTextClasses.d.ts

 export interface FormHelperTextClasses {
     /** Styles applied to the root element. */
     root: string;
-    /** Pseudo-class applied to the root element if `error={true}`. */
+    /** State class applied to the root element if `error={true}`. */
     error: string;
-    /** Pseudo-class applied to the root element if `disabled={true}`. */
+    /** State class applied to the root element if `disabled={true}`. */
     disabled: string;
@@ -12,7 +12,7 @@ /** Styles applied to the root element if `size="small"`. */
     contained: string;
-    /** Pseudo-class applied to the root element if `focused={true}`. */
+    /** State class applied to the root element if `focused={true}`. */
     focused: string;
-    /** Pseudo-class applied to the root element if `filled={true}`. */
+    /** State class applied to the root element if `filled={true}`. */
     filled: string;
-    /** Pseudo-class applied to the root element if `required={true}`. */
+    /** State class applied to the root element if `required={true}`. */
     required: string;
@@ -19,0 +19,0 @@ }

FormLabel/formLabelClasses.d.ts

@@ -6,11 +6,11 @@ export interface FormLabelClasses {
     colorSecondary: string;
-    /** Pseudo-class applied to the root element if `focused={true}`. */
+    /** State class applied to the root element if `focused={true}`. */
     focused: string;
-    /** Pseudo-class applied to the root element if `disabled={true}`. */
+    /** State class applied to the root element if `disabled={true}`. */
     disabled: string;
-    /** Pseudo-class applied to the root element if `error={true}`. */
+    /** State class applied to the root element if `error={true}`. */
     error: string;
-    /** Pseudo-class applied to the root element if `filled={true}`. */
+    /** State class applied to the root element if `filled={true}`. */
     filled: string;
-    /** Pseudo-class applied to the root element if `required={true}`. */
+    /** State class applied to the root element if `required={true}`. */
     required: string;
@@ -17,0 +17,0 @@ /** Styles applied to the asterisk element. */

Grid/gridClasses.d.ts

@@ -0,0 +0,0 @@ export interface GridClasses {

Icon/iconClasses.d.ts

@@ -0,0 +0,0 @@ export interface IconClasses {

IconButton/iconButtonClasses.d.ts

@@ -14,3 +14,3 @@ export interface IconButtonClasses {
     colorSecondary: string;
-    /** Pseudo-class applied to the root element if `disabled={true}`. */
+    /** State class applied to the root element if `disabled={true}`. */
     disabled: string;
@@ -17,0 +17,0 @@ /** Styles applied to the root element if `size="small"`. */

ImageList/imageListClasses.d.ts

@@ -0,0 +0,0 @@ export interface ImageListClasses {

ImageListItem/imageListItemClasses.d.ts

@@ -0,0 +0,0 @@ export interface ImageListItemClasses {

ImageListItemBar/imageListItemBarClasses.d.ts

@@ -0,0 +0,0 @@ export interface ImageListItemBarClasses {

index.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v5.0.0-beta.2
+/** @license Material-UI v5.0.0-beta.3
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

Input/inputClasses.d.ts

@@ -14,3 +14,3 @@ export interface InputClasses {
     underline: string;
-    /** Pseudo-class applied to the root element if `error={true}`. */
+    /** State class applied to the root element if `error={true}`. */
     error: string;
@@ -17,0 +17,0 @@ /** Styles applied to the input element if `size="small"`. */

InputAdornment/inputAdornmentClasses.d.ts

@@ -0,0 +0,0 @@ export interface InputAdornmentClasses {

InputBase/inputBaseClasses.d.ts

@@ -14,3 +14,3 @@ export interface InputBaseClasses {
     adornedEnd: string;
-    /** Pseudo-class applied to the root element if `error={true}`. */
+    /** State class applied to the root element if `error={true}`. */
     error: string;
@@ -17,0 +17,0 @@ /** Styles applied to the input element if `size="small"`. */

InputLabel/inputLabelClasses.d.ts

 export interface InputLabelClasses {
     /** Styles applied to the root element. */
     root: string;
-    /** Pseudo-class applied to the root element if `focused={true}`. */
+    /** State class applied to the root element if `focused={true}`. */
     focused: string;
-    /** Pseudo-class applied to the root element if `disabled={true}`. */
+    /** State class applied to the root element if `disabled={true}`. */
     disabled: string;
-    /** Pseudo-class applied to the root element if `error={true}`. */
+    /** State class applied to the root element if `error={true}`. */
     error: string;
-    /** Pseudo-class applied to the root element if `required={true}`. */
+    /** State class applied to the root element if `required={true}`. */
     required: string;
-    /** Pseudo-class applied to the asterisk element. */
+    /** State class applied to the asterisk element. */
     asterisk: string;
@@ -14,0 +14,0 @@ /** Styles applied to the root element if the component is a descendant of `FormControl`. */

internal/svg-icons/ArrowDownward.js

@@ -0,0 +0,0 @@ import * as React from 'react';

internal/svg-icons/ArrowDropDown.js

@@ -0,0 +0,0 @@ import * as React from 'react';

internal/svg-icons/Cancel.js

@@ -0,0 +0,0 @@ import * as React from 'react';

internal/svg-icons/CheckBox.js

@@ -0,0 +0,0 @@ import * as React from 'react';

internal/svg-icons/CheckBoxOutlineBlank.js

@@ -0,0 +0,0 @@ import * as React from 'react';

internal/svg-icons/CheckCircle.js

@@ -0,0 +0,0 @@ import * as React from 'react';

internal/svg-icons/IndeterminateCheckBox.js

@@ -0,0 +0,0 @@ import * as React from 'react';

internal/svg-icons/KeyboardArrowLeft.js

@@ -0,0 +0,0 @@ import * as React from 'react';

internal/svg-icons/KeyboardArrowRight.js

@@ -0,0 +0,0 @@ import * as React from 'react';

internal/svg-icons/MoreHoriz.js

@@ -0,0 +0,0 @@ import * as React from 'react';

internal/svg-icons/Person.js

@@ -0,0 +0,0 @@ import * as React from 'react';

internal/svg-icons/RadioButtonChecked.js

@@ -0,0 +0,0 @@ import * as React from 'react';

internal/svg-icons/RadioButtonUnchecked.js

@@ -0,0 +0,0 @@ import * as React from 'react';

internal/svg-icons/Warning.js

@@ -0,0 +0,0 @@ import * as React from 'react';

internal/switchBaseClasses.d.ts

@@ -0,0 +0,0 @@ export interface SwitchBaseClasses {

legacy/Autocomplete/Autocomplete.js

@@ -11,3 +11,3 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import { chainPropTypes, integerPropType } from '@material-ui/utils';
-import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
+import { unstable_composeClasses as composeClasses, useAutocomplete, createFilterOptions } from '@material-ui/unstyled';
 import { alpha } from '@material-ui/system';
@@ -21,3 +21,2 @@ import Popper from '../Popper';
 import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
-import useAutocomplete, { createFilterOptions } from '../useAutocomplete';
 import useThemeProps from '../styles/useThemeProps';
@@ -24,0 +23,0 @@ import styled from '../styles/styled';

legacy/index.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v5.0.0-beta.2
+/** @license Material-UI v5.0.0-beta.3
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

legacy/internal/svg-icons/ArrowDownward.js

@@ -0,0 +0,0 @@ import * as React from 'react';

legacy/internal/svg-icons/ArrowDropDown.js

@@ -0,0 +0,0 @@ import * as React from 'react';

legacy/internal/svg-icons/Cancel.js

@@ -0,0 +0,0 @@ import * as React from 'react';

legacy/internal/svg-icons/CheckBox.js

@@ -0,0 +0,0 @@ import * as React from 'react';

legacy/internal/svg-icons/CheckBoxOutlineBlank.js

@@ -0,0 +0,0 @@ import * as React from 'react';

legacy/internal/svg-icons/CheckCircle.js

@@ -0,0 +0,0 @@ import * as React from 'react';

legacy/internal/svg-icons/IndeterminateCheckBox.js

@@ -0,0 +0,0 @@ import * as React from 'react';

legacy/internal/svg-icons/KeyboardArrowLeft.js

@@ -0,0 +0,0 @@ import * as React from 'react';

legacy/internal/svg-icons/KeyboardArrowRight.js

@@ -0,0 +0,0 @@ import * as React from 'react';

legacy/internal/svg-icons/MoreHoriz.js

@@ -0,0 +0,0 @@ import * as React from 'react';

legacy/internal/svg-icons/Person.js

@@ -0,0 +0,0 @@ import * as React from 'react';

legacy/internal/svg-icons/RadioButtonChecked.js

@@ -0,0 +0,0 @@ import * as React from 'react';

legacy/internal/svg-icons/RadioButtonUnchecked.js

@@ -0,0 +0,0 @@ import * as React from 'react';

legacy/internal/svg-icons/Warning.js

@@ -0,0 +0,0 @@ import * as React from 'react';

legacy/List/ListContext.js

@@ -0,0 +0,0 @@ import * as React from 'react';

legacy/NativeSelect/NativeSelectInput.js

@@ -102,3 +102,3 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
   }), styleProps.open && {
-    right: 7
+    transform: 'rotate(180deg)'
   }, styleProps.variant === 'filled' && {
@@ -105,0 +105,0 @@ right: 7

legacy/RadioGroup/RadioGroupContext.js

@@ -0,0 +0,0 @@ import * as React from 'react';

legacy/Select/Select.js

@@ -230,3 +230,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
    *
-   * @param {(Event & { target: { value: T; name: string } }) | React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {SelectChangeEvent<T>} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (any).
@@ -233,0 +233,0 @@ * **Warning**: This is a generic event not a change event unless the change event is caused by browser autofill.

legacy/styles/createTheme.js

@@ -52,3 +52,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
   if (process.env.NODE_ENV !== 'production') {
-    var pseudoClasses = ['active', 'checked', 'completed', 'disabled', 'error', 'expanded', 'focused', 'focusVisible', 'required', 'selected'];
+    var stateClasses = ['active', 'checked', 'completed', 'disabled', 'error', 'expanded', 'focused', 'focusVisible', 'required', 'selected'];
 
@@ -61,8 +61,8 @@ var traverse = function traverse(node, component) {
 
-        if (pseudoClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
+        if (stateClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
           if (process.env.NODE_ENV !== 'production') {
-            var pseudoClass = generateUtilityClass('', key);
-            console.error(["Material-UI: The `".concat(component, "` component increases ") + "the CSS specificity of the `".concat(key, "` internal state."), 'You can not override it like this: ', JSON.stringify(node, null, 2), '', "Instead, you need to use the '&.".concat(pseudoClass, "' syntax:"), JSON.stringify({
-              root: _defineProperty({}, "&.".concat(pseudoClass), child)
-            }, null, 2), '', 'https://material-ui.com/r/pseudo-classes-guide'].join('\n'));
+            var stateClass = generateUtilityClass('', key);
+            console.error(["Material-UI: The `".concat(component, "` component increases ") + "the CSS specificity of the `".concat(key, "` internal state."), 'You can not override it like this: ', JSON.stringify(node, null, 2), '', "Instead, you need to use the '&.".concat(stateClass, "' syntax:"), JSON.stringify({
+              root: _defineProperty({}, "&.".concat(stateClass), child)
+            }, null, 2), '', 'https://material-ui.com/r/state-classes-guide'].join('\n'));
           } // Remove the style to prevent global conflicts.
@@ -69,0 +69,0 @@

legacy/styles/index.js

@@ -14,2 +14,7 @@ export { default as adaptV4Theme } from './adaptV4Theme';
 export { default as ThemeProvider } from './ThemeProvider';
-export { StyledEngineProvider } from '@material-ui/system';
+export { StyledEngineProvider } from '@material-ui/system'; // The legacy utilities from @material-ui/styles
+// These are just empty functions that throws when invoked
+
+export { default as makeStyles } from './makeStyles';
+export { default as withStyles } from './withStyles';
+export { default as withTheme } from './withTheme';

legacy/Table/TableContext.js

@@ -0,0 +0,0 @@ import * as React from 'react';

legacy/Table/Tablelvl2Context.js

@@ -0,0 +0,0 @@ import * as React from 'react';

legacy/useAutocomplete/useAutocomplete.js

@@ -1,1108 +0,2 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-
-/* eslint-disable no-constant-condition */
-import * as React from 'react';
-import { setRef, useEventCallback, useControlled, unstable_useId as useId } from '../utils'; // https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript
-// Give up on IE11 support for this feature
-
-function stripDiacritics(string) {
-  return typeof string.normalize !== 'undefined' ? string.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : string;
-}
-
-export function createFilterOptions() {
-  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _config$ignoreAccents = config.ignoreAccents,
-      ignoreAccents = _config$ignoreAccents === void 0 ? true : _config$ignoreAccents,
-      _config$ignoreCase = config.ignoreCase,
-      ignoreCase = _config$ignoreCase === void 0 ? true : _config$ignoreCase,
-      limit = config.limit,
-      _config$matchFrom = config.matchFrom,
-      matchFrom = _config$matchFrom === void 0 ? 'any' : _config$matchFrom,
-      stringify = config.stringify,
-      _config$trim = config.trim,
-      trim = _config$trim === void 0 ? false : _config$trim;
-  return function (options, _ref) {
-    var inputValue = _ref.inputValue,
-        getOptionLabel = _ref.getOptionLabel;
-    var input = trim ? inputValue.trim() : inputValue;
-
-    if (ignoreCase) {
-      input = input.toLowerCase();
-    }
-
-    if (ignoreAccents) {
-      input = stripDiacritics(input);
-    }
-
-    var filteredOptions = options.filter(function (option) {
-      var candidate = (stringify || getOptionLabel)(option);
-
-      if (ignoreCase) {
-        candidate = candidate.toLowerCase();
-      }
-
-      if (ignoreAccents) {
-        candidate = stripDiacritics(candidate);
-      }
-
-      return matchFrom === 'start' ? candidate.indexOf(input) === 0 : candidate.indexOf(input) > -1;
-    });
-    return typeof limit === 'number' ? filteredOptions.slice(0, limit) : filteredOptions;
-  };
-} // To replace with .findIndex() once we stop IE11 support.
-
-function findIndex(array, comp) {
-  for (var i = 0; i < array.length; i += 1) {
-    if (comp(array[i])) {
-      return i;
-    }
-  }
-
-  return -1;
-}
-
-var defaultFilterOptions = createFilterOptions(); // Number of options to jump in list box when pageup and pagedown keys are used.
-
-var pageSize = 5;
-export default function useAutocomplete(props) {
-  var _props$autoComplete = props.autoComplete,
-      autoComplete = _props$autoComplete === void 0 ? false : _props$autoComplete,
-      _props$autoHighlight = props.autoHighlight,
-      autoHighlight = _props$autoHighlight === void 0 ? false : _props$autoHighlight,
-      _props$autoSelect = props.autoSelect,
-      autoSelect = _props$autoSelect === void 0 ? false : _props$autoSelect,
-      _props$blurOnSelect = props.blurOnSelect,
-      blurOnSelect = _props$blurOnSelect === void 0 ? false : _props$blurOnSelect,
-      disabledProp = props.disabled,
-      _props$clearOnBlur = props.clearOnBlur,
-      clearOnBlur = _props$clearOnBlur === void 0 ? !props.freeSolo : _props$clearOnBlur,
-      _props$clearOnEscape = props.clearOnEscape,
-      clearOnEscape = _props$clearOnEscape === void 0 ? false : _props$clearOnEscape,
-      _props$componentName = props.componentName,
-      componentName = _props$componentName === void 0 ? 'useAutocomplete' : _props$componentName,
-      _props$defaultValue = props.defaultValue,
-      defaultValue = _props$defaultValue === void 0 ? props.multiple ? [] : null : _props$defaultValue,
-      _props$disableClearab = props.disableClearable,
-      disableClearable = _props$disableClearab === void 0 ? false : _props$disableClearab,
-      _props$disableCloseOn = props.disableCloseOnSelect,
-      disableCloseOnSelect = _props$disableCloseOn === void 0 ? false : _props$disableCloseOn,
-      _props$disabledItemsF = props.disabledItemsFocusable,
-      disabledItemsFocusable = _props$disabledItemsF === void 0 ? false : _props$disabledItemsF,
-      _props$disableListWra = props.disableListWrap,
-      disableListWrap = _props$disableListWra === void 0 ? false : _props$disableListWra,
-      _props$filterOptions = props.filterOptions,
-      filterOptions = _props$filterOptions === void 0 ? defaultFilterOptions : _props$filterOptions,
-      _props$filterSelected = props.filterSelectedOptions,
-      filterSelectedOptions = _props$filterSelected === void 0 ? false : _props$filterSelected,
-      _props$freeSolo = props.freeSolo,
-      freeSolo = _props$freeSolo === void 0 ? false : _props$freeSolo,
-      getOptionDisabled = props.getOptionDisabled,
-      _props$getOptionLabel = props.getOptionLabel,
-      getOptionLabelProp = _props$getOptionLabel === void 0 ? function (option) {
-    var _option$label;
-
-    return (_option$label = option.label) != null ? _option$label : option;
-  } : _props$getOptionLabel,
-      _props$isOptionEqualT = props.isOptionEqualToValue,
-      isOptionEqualToValue = _props$isOptionEqualT === void 0 ? function (option, value) {
-    return option === value;
-  } : _props$isOptionEqualT,
-      groupBy = props.groupBy,
-      _props$handleHomeEndK = props.handleHomeEndKeys,
-      handleHomeEndKeys = _props$handleHomeEndK === void 0 ? !props.freeSolo : _props$handleHomeEndK,
-      idProp = props.id,
-      _props$includeInputIn = props.includeInputInList,
-      includeInputInList = _props$includeInputIn === void 0 ? false : _props$includeInputIn,
-      inputValueProp = props.inputValue,
-      _props$multiple = props.multiple,
-      multiple = _props$multiple === void 0 ? false : _props$multiple,
-      onChange = props.onChange,
-      onClose = props.onClose,
-      onHighlightChange = props.onHighlightChange,
-      onInputChange = props.onInputChange,
-      onOpen = props.onOpen,
-      openProp = props.open,
-      _props$openOnFocus = props.openOnFocus,
-      openOnFocus = _props$openOnFocus === void 0 ? false : _props$openOnFocus,
-      options = props.options,
-      _props$selectOnFocus = props.selectOnFocus,
-      selectOnFocus = _props$selectOnFocus === void 0 ? !props.freeSolo : _props$selectOnFocus,
-      valueProp = props.value;
-  var id = useId(idProp);
-  var getOptionLabel = getOptionLabelProp;
-
-  getOptionLabel = function getOptionLabel(option) {
-    var optionLabel = getOptionLabelProp(option);
-
-    if (typeof optionLabel !== 'string') {
-      if (process.env.NODE_ENV !== 'production') {
-        var erroneousReturn = optionLabel === undefined ? 'undefined' : "".concat(_typeof(optionLabel), " (").concat(optionLabel, ")");
-        console.error("Material-UI: The `getOptionLabel` method of ".concat(componentName, " returned ").concat(erroneousReturn, " instead of a string for ").concat(JSON.stringify(option), "."));
-      }
-
-      return String(optionLabel);
-    }
-
-    return optionLabel;
-  };
-
-  var ignoreFocus = React.useRef(false);
-  var firstFocus = React.useRef(true);
-  var inputRef = React.useRef(null);
-  var listboxRef = React.useRef(null);
-
-  var _React$useState = React.useState(null),
-      anchorEl = _React$useState[0],
-      setAnchorEl = _React$useState[1];
-
-  var _React$useState2 = React.useState(-1),
-      focusedTag = _React$useState2[0],
-      setFocusedTag = _React$useState2[1];
-
-  var defaultHighlighted = autoHighlight ? 0 : -1;
-  var highlightedIndexRef = React.useRef(defaultHighlighted);
-
-  var _useControlled = useControlled({
-    controlled: valueProp,
-    default: defaultValue,
-    name: componentName
-  }),
-      _useControlled2 = _slicedToArray(_useControlled, 2),
-      value = _useControlled2[0],
-      setValueState = _useControlled2[1];
-
-  var _useControlled3 = useControlled({
-    controlled: inputValueProp,
-    default: '',
-    name: componentName,
-    state: 'inputValue'
-  }),
-      _useControlled4 = _slicedToArray(_useControlled3, 2),
-      inputValue = _useControlled4[0],
-      setInputValueState = _useControlled4[1];
-
-  var _React$useState3 = React.useState(false),
-      focused = _React$useState3[0],
-      setFocused = _React$useState3[1];
-
-  var resetInputValue = React.useCallback(function (event, newValue) {
-    var newInputValue;
-
-    if (multiple) {
-      newInputValue = '';
-    } else if (newValue == null) {
-      newInputValue = '';
-    } else {
-      var optionLabel = getOptionLabel(newValue);
-      newInputValue = typeof optionLabel === 'string' ? optionLabel : '';
-    }
-
-    if (inputValue === newInputValue) {
-      return;
-    }
-
-    setInputValueState(newInputValue);
-
-    if (onInputChange) {
-      onInputChange(event, newInputValue, 'reset');
-    }
-  }, [getOptionLabel, inputValue, multiple, onInputChange, setInputValueState]);
-  var prevValue = React.useRef();
-  React.useEffect(function () {
-    var valueChange = value !== prevValue.current;
-    prevValue.current = value;
-
-    if (focused && !valueChange) {
-      return;
-    }
-
-    resetInputValue(null, value);
-  }, [value, resetInputValue, focused, prevValue]);
-
-  var _useControlled5 = useControlled({
-    controlled: openProp,
-    default: false,
-    name: componentName,
-    state: 'open'
-  }),
-      _useControlled6 = _slicedToArray(_useControlled5, 2),
-      open = _useControlled6[0],
-      setOpenState = _useControlled6[1];
-
-  var _React$useState4 = React.useState(true),
-      inputPristine = _React$useState4[0],
-      setInputPristine = _React$useState4[1];
-
-  var inputValueIsSelectedValue = !multiple && value != null && inputValue === getOptionLabel(value);
-  var popupOpen = open;
-  var filteredOptions = popupOpen ? filterOptions(options.filter(function (option) {
-    if (filterSelectedOptions && (multiple ? value : [value]).some(function (value2) {
-      return value2 !== null && isOptionEqualToValue(option, value2);
-    })) {
-      return false;
-    }
-
-    return true;
-  }), // we use the empty string to manipulate `filterOptions` to not filter any options
-  // i.e. the filter predicate always returns true
-  {
-    inputValue: inputValueIsSelectedValue && inputPristine ? '' : inputValue,
-    getOptionLabel: getOptionLabel
-  }) : [];
-  var listboxAvailable = open && filteredOptions.length > 0;
-
-  if (process.env.NODE_ENV !== 'production') {
-    if (value !== null && !freeSolo && options.length > 0) {
-      var missingValue = (multiple ? value : [value]).filter(function (value2) {
-        return !options.some(function (option) {
-          return isOptionEqualToValue(option, value2);
-        });
-      });
-
-      if (missingValue.length > 0) {
-        console.warn(["Material-UI: The value provided to ".concat(componentName, " is invalid."), "None of the options match with `".concat(missingValue.length > 1 ? JSON.stringify(missingValue) : JSON.stringify(missingValue[0]), "`."), 'You can use the `isOptionEqualToValue` prop to customize the equality test.'].join('\n'));
-      }
-    }
-  }
-
-  var focusTag = useEventCallback(function (tagToFocus) {
-    if (tagToFocus === -1) {
-      inputRef.current.focus();
-    } else {
-      anchorEl.querySelector("[data-tag-index=\"".concat(tagToFocus, "\"]")).focus();
-    }
-  }); // Ensure the focusedTag is never inconsistent
-
-  React.useEffect(function () {
-    if (multiple && focusedTag > value.length - 1) {
-      setFocusedTag(-1);
-      focusTag(-1);
-    }
-  }, [value, multiple, focusedTag, focusTag]);
-
-  function validOptionIndex(index, direction) {
-    if (!listboxRef.current || index === -1) {
-      return -1;
-    }
-
-    var nextFocus = index;
-
-    while (true) {
-      // Out of range
-      if (direction === 'next' && nextFocus === filteredOptions.length || direction === 'previous' && nextFocus === -1) {
-        return -1;
-      }
-
-      var option = listboxRef.current.querySelector("[data-option-index=\"".concat(nextFocus, "\"]")); // Same logic as MenuList.js
-
-      var nextFocusDisabled = disabledItemsFocusable ? false : !option || option.disabled || option.getAttribute('aria-disabled') === 'true';
-
-      if (option && !option.hasAttribute('tabindex') || nextFocusDisabled) {
-        // Move to the next element.
-        nextFocus += direction === 'next' ? 1 : -1;
-      } else {
-        return nextFocus;
-      }
-    }
-  }
-
-  var setHighlightedIndex = useEventCallback(function (_ref2) {
-    var event = _ref2.event,
-        index = _ref2.index,
-        _ref2$reason = _ref2.reason,
-        reason = _ref2$reason === void 0 ? 'auto' : _ref2$reason;
-    highlightedIndexRef.current = index; // does the index exist?
-
-    if (index === -1) {
-      inputRef.current.removeAttribute('aria-activedescendant');
-    } else {
-      inputRef.current.setAttribute('aria-activedescendant', "".concat(id, "-option-").concat(index));
-    }
-
-    if (onHighlightChange) {
-      onHighlightChange(event, index === -1 ? null : filteredOptions[index], reason);
-    }
-
-    if (!listboxRef.current) {
-      return;
-    }
-
-    var prev = listboxRef.current.querySelector('[role="option"].Mui-focused');
-
-    if (prev) {
-      prev.classList.remove('Mui-focused');
-      prev.classList.remove('Mui-focusVisible');
-    }
-
-    var listboxNode = listboxRef.current.parentElement.querySelector('[role="listbox"]'); // "No results"
-
-    if (!listboxNode) {
-      return;
-    }
-
-    if (index === -1) {
-      listboxNode.scrollTop = 0;
-      return;
-    }
-
-    var option = listboxRef.current.querySelector("[data-option-index=\"".concat(index, "\"]"));
-
-    if (!option) {
-      return;
-    }
-
-    option.classList.add('Mui-focused');
-
-    if (reason === 'keyboard') {
-      option.classList.add('Mui-focusVisible');
-    } // Scroll active descendant into view.
-    // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
-    //
-    // Consider this API instead once it has a better browser support:
-    // .scrollIntoView({ scrollMode: 'if-needed', block: 'nearest' });
-
-
-    if (listboxNode.scrollHeight > listboxNode.clientHeight && reason !== 'mouse') {
-      var element = option;
-      var scrollBottom = listboxNode.clientHeight + listboxNode.scrollTop;
-      var elementBottom = element.offsetTop + element.offsetHeight;
-
-      if (elementBottom > scrollBottom) {
-        listboxNode.scrollTop = elementBottom - listboxNode.clientHeight;
-      } else if (element.offsetTop - element.offsetHeight * (groupBy ? 1.3 : 0) < listboxNode.scrollTop) {
-        listboxNode.scrollTop = element.offsetTop - element.offsetHeight * (groupBy ? 1.3 : 0);
-      }
-    }
-  });
-  var changeHighlightedIndex = useEventCallback(function (_ref3) {
-    var event = _ref3.event,
-        diff = _ref3.diff,
-        _ref3$direction = _ref3.direction,
-        direction = _ref3$direction === void 0 ? 'next' : _ref3$direction,
-        _ref3$reason = _ref3.reason,
-        reason = _ref3$reason === void 0 ? 'auto' : _ref3$reason;
-
-    if (!popupOpen) {
-      return;
-    }
-
-    var getNextIndex = function getNextIndex() {
-      var maxIndex = filteredOptions.length - 1;
-
-      if (diff === 'reset') {
-        return defaultHighlighted;
-      }
-
-      if (diff === 'start') {
-        return 0;
-      }
-
-      if (diff === 'end') {
-        return maxIndex;
-      }
-
-      var newIndex = highlightedIndexRef.current + diff;
-
-      if (newIndex < 0) {
-        if (newIndex === -1 && includeInputInList) {
-          return -1;
-        }
-
-        if (disableListWrap && highlightedIndexRef.current !== -1 || Math.abs(diff) > 1) {
-          return 0;
-        }
-
-        return maxIndex;
-      }
-
-      if (newIndex > maxIndex) {
-        if (newIndex === maxIndex + 1 && includeInputInList) {
-          return -1;
-        }
-
-        if (disableListWrap || Math.abs(diff) > 1) {
-          return maxIndex;
-        }
-
-        return 0;
-      }
-
-      return newIndex;
-    };
-
-    var nextIndex = validOptionIndex(getNextIndex(), direction);
-    setHighlightedIndex({
-      index: nextIndex,
-      reason: reason,
-      event: event
-    }); // Sync the content of the input with the highlighted option.
-
-    if (autoComplete && diff !== 'reset') {
-      if (nextIndex === -1) {
-        inputRef.current.value = inputValue;
-      } else {
-        var option = getOptionLabel(filteredOptions[nextIndex]);
-        inputRef.current.value = option; // The portion of the selected suggestion that has not been typed by the user,
-        // a completion string, appears inline after the input cursor in the textbox.
-
-        var index = option.toLowerCase().indexOf(inputValue.toLowerCase());
-
-        if (index === 0 && inputValue.length > 0) {
-          inputRef.current.setSelectionRange(inputValue.length, option.length);
-        }
-      }
-    }
-  });
-  var syncHighlightedIndex = React.useCallback(function () {
-    if (!popupOpen) {
-      return;
-    }
-
-    var valueItem = multiple ? value[0] : value; // The popup is empty, reset
-
-    if (filteredOptions.length === 0 || valueItem == null) {
-      changeHighlightedIndex({
-        diff: 'reset'
-      });
-      return;
-    }
-
-    if (!listboxRef.current) {
-      return;
-    } // Synchronize the value with the highlighted index
-
-
-    if (valueItem != null) {
-      var currentOption = filteredOptions[highlightedIndexRef.current]; // Keep the current highlighted index if possible
-
-      if (multiple && currentOption && findIndex(value, function (val) {
-        return isOptionEqualToValue(currentOption, val);
-      }) !== -1) {
-        return;
-      }
-
-      var itemIndex = findIndex(filteredOptions, function (optionItem) {
-        return isOptionEqualToValue(optionItem, valueItem);
-      });
-
-      if (itemIndex === -1) {
-        changeHighlightedIndex({
-          diff: 'reset'
-        });
-      } else {
-        setHighlightedIndex({
-          index: itemIndex
-        });
-      }
-
-      return;
-    } // Prevent the highlighted index to leak outside the boundaries.
-
-
-    if (highlightedIndexRef.current >= filteredOptions.length - 1) {
-      setHighlightedIndex({
-        index: filteredOptions.length - 1
-      });
-      return;
-    } // Restore the focus to the previous index.
-
-
-    setHighlightedIndex({
-      index: highlightedIndexRef.current
-    }); // Ignore filteredOptions (and options, isOptionEqualToValue, getOptionLabel) not to break the scroll position
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [// Only sync the highlighted index when the option switch between empty and not
-  filteredOptions.length, // Don't sync the highlighted index with the value when multiple
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  multiple ? false : value, filterSelectedOptions, changeHighlightedIndex, setHighlightedIndex, popupOpen, inputValue, multiple]);
-  var handleListboxRef = useEventCallback(function (node) {
-    setRef(listboxRef, node);
-
-    if (!node) {
-      return;
-    }
-
-    syncHighlightedIndex();
-  });
-
-  if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useEffect(function () {
-      if (!inputRef.current || inputRef.current.nodeName !== 'INPUT') {
-        console.error(["Material-UI: Unable to find the input element. It was resolved to ".concat(inputRef.current, " while an HTMLInputElement was expected."), "Instead, ".concat(componentName, " expects an input element."), '', componentName === 'useAutocomplete' ? 'Make sure you have binded getInputProps correctly and that the normal ref/effect resolutions order is guaranteed.' : 'Make sure you have customized the input component correctly.'].join('\n'));
-      }
-    }, [componentName]);
-  }
-
-  React.useEffect(function () {
-    syncHighlightedIndex();
-  }, [syncHighlightedIndex]);
-
-  var handleOpen = function handleOpen(event) {
-    if (open) {
-      return;
-    }
-
-    setOpenState(true);
-    setInputPristine(true);
-
-    if (onOpen) {
-      onOpen(event);
-    }
-  };
-
-  var handleClose = function handleClose(event, reason) {
-    if (!open) {
-      return;
-    }
-
-    setOpenState(false);
-
-    if (onClose) {
-      onClose(event, reason);
-    }
-  };
-
-  var handleValue = function handleValue(event, newValue, reason, details) {
-    if (value === newValue) {
-      return;
-    }
-
-    if (onChange) {
-      onChange(event, newValue, reason, details);
-    }
-
-    setValueState(newValue);
-  };
-
-  var isTouch = React.useRef(false);
-
-  var selectNewValue = function selectNewValue(event, option) {
-    var reasonProp = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'selectOption';
-    var origin = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'options';
-    var reason = reasonProp;
-    var newValue = option;
-
-    if (multiple) {
-      newValue = Array.isArray(value) ? value.slice() : [];
-
-      if (process.env.NODE_ENV !== 'production') {
-        var matches = newValue.filter(function (val) {
-          return isOptionEqualToValue(option, val);
-        });
-
-        if (matches.length > 1) {
-          console.error(["Material-UI: The `isOptionEqualToValue` method of ".concat(componentName, " do not handle the arguments correctly."), "The component expects a single value to match a given option but found ".concat(matches.length, " matches.")].join('\n'));
-        }
-      }
-
-      var itemIndex = findIndex(newValue, function (valueItem) {
-        return isOptionEqualToValue(option, valueItem);
-      });
-
-      if (itemIndex === -1) {
-        newValue.push(option);
-      } else if (origin !== 'freeSolo') {
-        newValue.splice(itemIndex, 1);
-        reason = 'removeOption';
-      }
-    }
-
-    resetInputValue(event, newValue);
-    handleValue(event, newValue, reason, {
-      option: option
-    });
-
-    if (!disableCloseOnSelect && !event.ctrlKey && !event.metaKey) {
-      handleClose(event, reason);
-    }
-
-    if (blurOnSelect === true || blurOnSelect === 'touch' && isTouch.current || blurOnSelect === 'mouse' && !isTouch.current) {
-      inputRef.current.blur();
-    }
-  };
-
-  function validTagIndex(index, direction) {
-    if (index === -1) {
-      return -1;
-    }
-
-    var nextFocus = index;
-
-    while (true) {
-      // Out of range
-      if (direction === 'next' && nextFocus === value.length || direction === 'previous' && nextFocus === -1) {
-        return -1;
-      }
-
-      var option = anchorEl.querySelector("[data-tag-index=\"".concat(nextFocus, "\"]")); // Same logic as MenuList.js
-
-      if (!option || !option.hasAttribute('tabindex') || option.disabled || option.getAttribute('aria-disabled') === 'true') {
-        nextFocus += direction === 'next' ? 1 : -1;
-      } else {
-        return nextFocus;
-      }
-    }
-  }
-
-  var handleFocusTag = function handleFocusTag(event, direction) {
-    if (!multiple) {
-      return;
-    }
-
-    handleClose(event, 'toggleInput');
-    var nextTag = focusedTag;
-
-    if (focusedTag === -1) {
-      if (inputValue === '' && direction === 'previous') {
-        nextTag = value.length - 1;
-      }
-    } else {
-      nextTag += direction === 'next' ? 1 : -1;
-
-      if (nextTag < 0) {
-        nextTag = 0;
-      }
-
-      if (nextTag === value.length) {
-        nextTag = -1;
-      }
-    }
-
-    nextTag = validTagIndex(nextTag, direction);
-    setFocusedTag(nextTag);
-    focusTag(nextTag);
-  };
-
-  var handleClear = function handleClear(event) {
-    ignoreFocus.current = true;
-    setInputValueState('');
-
-    if (onInputChange) {
-      onInputChange(event, '', 'clear');
-    }
-
-    handleValue(event, multiple ? [] : null, 'clear');
-  };
-
-  var handleKeyDown = function handleKeyDown(other) {
-    return function (event) {
-      if (other.onKeyDown) {
-        other.onKeyDown(event);
-      }
-
-      if (event.defaultMuiPrevented) {
-        return;
-      }
-
-      if (focusedTag !== -1 && ['ArrowLeft', 'ArrowRight'].indexOf(event.key) === -1) {
-        setFocusedTag(-1);
-        focusTag(-1);
-      } // Wait until IME is settled.
-
-
-      if (event.which !== 229) {
-        switch (event.key) {
-          case 'Home':
-            if (popupOpen && handleHomeEndKeys) {
-              // Prevent scroll of the page
-              event.preventDefault();
-              changeHighlightedIndex({
-                diff: 'start',
-                direction: 'next',
-                reason: 'keyboard',
-                event: event
-              });
-            }
-
-            break;
-
-          case 'End':
-            if (popupOpen && handleHomeEndKeys) {
-              // Prevent scroll of the page
-              event.preventDefault();
-              changeHighlightedIndex({
-                diff: 'end',
-                direction: 'previous',
-                reason: 'keyboard',
-                event: event
-              });
-            }
-
-            break;
-
-          case 'PageUp':
-            // Prevent scroll of the page
-            event.preventDefault();
-            changeHighlightedIndex({
-              diff: -pageSize,
-              direction: 'previous',
-              reason: 'keyboard',
-              event: event
-            });
-            handleOpen(event);
-            break;
-
-          case 'PageDown':
-            // Prevent scroll of the page
-            event.preventDefault();
-            changeHighlightedIndex({
-              diff: pageSize,
-              direction: 'next',
-              reason: 'keyboard',
-              event: event
-            });
-            handleOpen(event);
-            break;
-
-          case 'ArrowDown':
-            // Prevent cursor move
-            event.preventDefault();
-            changeHighlightedIndex({
-              diff: 1,
-              direction: 'next',
-              reason: 'keyboard',
-              event: event
-            });
-            handleOpen(event);
-            break;
-
-          case 'ArrowUp':
-            // Prevent cursor move
-            event.preventDefault();
-            changeHighlightedIndex({
-              diff: -1,
-              direction: 'previous',
-              reason: 'keyboard',
-              event: event
-            });
-            handleOpen(event);
-            break;
-
-          case 'ArrowLeft':
-            handleFocusTag(event, 'previous');
-            break;
-
-          case 'ArrowRight':
-            handleFocusTag(event, 'next');
-            break;
-
-          case 'Enter':
-            if (highlightedIndexRef.current !== -1 && popupOpen) {
-              var option = filteredOptions[highlightedIndexRef.current];
-              var disabled = getOptionDisabled ? getOptionDisabled(option) : false; // Avoid early form validation, let the end-users continue filling the form.
-
-              event.preventDefault();
-
-              if (disabled) {
-                return;
-              }
-
-              selectNewValue(event, option, 'selectOption'); // Move the selection to the end.
-
-              if (autoComplete) {
-                inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
-              }
-            } else if (freeSolo && inputValue !== '' && inputValueIsSelectedValue === false) {
-              if (multiple) {
-                // Allow people to add new values before they submit the form.
-                event.preventDefault();
-              }
-
-              selectNewValue(event, inputValue, 'createOption', 'freeSolo');
-            }
-
-            break;
-
-          case 'Escape':
-            if (popupOpen) {
-              // Avoid Opera to exit fullscreen mode.
-              event.preventDefault(); // Avoid the Modal to handle the event.
-
-              event.stopPropagation();
-              handleClose(event, 'escape');
-            } else if (clearOnEscape && (inputValue !== '' || multiple && value.length > 0)) {
-              // Avoid Opera to exit fullscreen mode.
-              event.preventDefault(); // Avoid the Modal to handle the event.
-
-              event.stopPropagation();
-              handleClear(event);
-            }
-
-            break;
-
-          case 'Backspace':
-            if (multiple && inputValue === '' && value.length > 0) {
-              var index = focusedTag === -1 ? value.length - 1 : focusedTag;
-              var newValue = value.slice();
-              newValue.splice(index, 1);
-              handleValue(event, newValue, 'removeOption', {
-                option: value[index]
-              });
-            }
-
-            break;
-
-          default:
-        }
-      }
-    };
-  };
-
-  var handleFocus = function handleFocus(event) {
-    setFocused(true);
-
-    if (openOnFocus && !ignoreFocus.current) {
-      handleOpen(event);
-    }
-  };
-
-  var handleBlur = function handleBlur(event) {
-    // Ignore the event when using the scrollbar with IE11
-    if (listboxRef.current !== null && listboxRef.current.parentElement.contains(document.activeElement)) {
-      inputRef.current.focus();
-      return;
-    }
-
-    setFocused(false);
-    firstFocus.current = true;
-    ignoreFocus.current = false;
-
-    if (autoSelect && highlightedIndexRef.current !== -1 && popupOpen) {
-      selectNewValue(event, filteredOptions[highlightedIndexRef.current], 'blur');
-    } else if (autoSelect && freeSolo && inputValue !== '') {
-      selectNewValue(event, inputValue, 'blur', 'freeSolo');
-    } else if (clearOnBlur) {
-      resetInputValue(event, value);
-    }
-
-    handleClose(event, 'blur');
-  };
-
-  var handleInputChange = function handleInputChange(event) {
-    var newValue = event.target.value;
-
-    if (inputValue !== newValue) {
-      setInputValueState(newValue);
-      setInputPristine(false);
-
-      if (onInputChange) {
-        onInputChange(event, newValue, 'input');
-      }
-    }
-
-    if (newValue === '') {
-      if (!disableClearable && !multiple) {
-        handleValue(event, null, 'clear');
-      }
-    } else {
-      handleOpen(event);
-    }
-  };
-
-  var handleOptionMouseOver = function handleOptionMouseOver(event) {
-    setHighlightedIndex({
-      event: event,
-      index: Number(event.currentTarget.getAttribute('data-option-index')),
-      reason: 'mouse'
-    });
-  };
-
-  var handleOptionTouchStart = function handleOptionTouchStart() {
-    isTouch.current = true;
-  };
-
-  var handleOptionClick = function handleOptionClick(event) {
-    var index = Number(event.currentTarget.getAttribute('data-option-index'));
-    selectNewValue(event, filteredOptions[index], 'selectOption');
-    isTouch.current = false;
-  };
-
-  var handleTagDelete = function handleTagDelete(index) {
-    return function (event) {
-      var newValue = value.slice();
-      newValue.splice(index, 1);
-      handleValue(event, newValue, 'removeOption', {
-        option: value[index]
-      });
-    };
-  };
-
-  var handlePopupIndicator = function handlePopupIndicator(event) {
-    if (open) {
-      handleClose(event, 'toggleInput');
-    } else {
-      handleOpen(event);
-    }
-  }; // Prevent input blur when interacting with the combobox
-
-
-  var handleMouseDown = function handleMouseDown(event) {
-    if (event.target.getAttribute('id') !== id) {
-      event.preventDefault();
-    }
-  }; // Focus the input when interacting with the combobox
-
-
-  var handleClick = function handleClick() {
-    inputRef.current.focus();
-
-    if (selectOnFocus && firstFocus.current && inputRef.current.selectionEnd - inputRef.current.selectionStart === 0) {
-      inputRef.current.select();
-    }
-
-    firstFocus.current = false;
-  };
-
-  var handleInputMouseDown = function handleInputMouseDown(event) {
-    if (inputValue === '' || !open) {
-      handlePopupIndicator(event);
-    }
-  };
-
-  var dirty = freeSolo && inputValue.length > 0;
-  dirty = dirty || (multiple ? value.length > 0 : value !== null);
-  var groupedOptions = filteredOptions;
-
-  if (groupBy) {
-    // used to keep track of key and indexes in the result array
-    var indexBy = new Map();
-    var warn = false;
-    groupedOptions = filteredOptions.reduce(function (acc, option, index) {
-      var group = groupBy(option);
-
-      if (acc.length > 0 && acc[acc.length - 1].group === group) {
-        acc[acc.length - 1].options.push(option);
-      } else {
-        if (process.env.NODE_ENV !== 'production') {
-          if (indexBy.get(group) && !warn) {
-            console.warn("Material-UI: The options provided combined with the `groupBy` method of ".concat(componentName, " returns duplicated headers."), 'You can solve the issue by sorting the options with the output of `groupBy`.');
-            warn = true;
-          }
-
-          indexBy.set(group, true);
-        }
-
-        acc.push({
-          key: index,
-          index: index,
-          group: group,
-          options: [option]
-        });
-      }
-
-      return acc;
-    }, []);
-  }
-
-  if (disabledProp && focused) {
-    handleBlur();
-  }
-
-  return {
-    getRootProps: function getRootProps() {
-      var other = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      return _extends({
-        'aria-owns': listboxAvailable ? "".concat(id, "-listbox") : null,
-        role: 'combobox',
-        'aria-expanded': listboxAvailable
-      }, other, {
-        onKeyDown: handleKeyDown(other),
-        onMouseDown: handleMouseDown,
-        onClick: handleClick
-      });
-    },
-    getInputLabelProps: function getInputLabelProps() {
-      return {
-        id: "".concat(id, "-label"),
-        htmlFor: id
-      };
-    },
-    getInputProps: function getInputProps() {
-      return {
-        id: id,
-        value: inputValue,
-        onBlur: handleBlur,
-        onFocus: handleFocus,
-        onChange: handleInputChange,
-        onMouseDown: handleInputMouseDown,
-        // if open then this is handled imperativeley so don't let react override
-        // only have an opinion about this when closed
-        'aria-activedescendant': popupOpen ? '' : null,
-        'aria-autocomplete': autoComplete ? 'both' : 'list',
-        'aria-controls': listboxAvailable ? "".concat(id, "-listbox") : null,
-        // Disable browser's suggestion that might overlap with the popup.
-        // Handle autocomplete but not autofill.
-        autoComplete: 'off',
-        ref: inputRef,
-        autoCapitalize: 'none',
-        spellCheck: 'false'
-      };
-    },
-    getClearProps: function getClearProps() {
-      return {
-        tabIndex: -1,
-        onClick: handleClear
-      };
-    },
-    getPopupIndicatorProps: function getPopupIndicatorProps() {
-      return {
-        tabIndex: -1,
-        onClick: handlePopupIndicator
-      };
-    },
-    getTagProps: function getTagProps(_ref4) {
-      var index = _ref4.index;
-      return {
-        key: index,
-        'data-tag-index': index,
-        tabIndex: -1,
-        onDelete: handleTagDelete(index)
-      };
-    },
-    getListboxProps: function getListboxProps() {
-      return {
-        role: 'listbox',
-        id: "".concat(id, "-listbox"),
-        'aria-labelledby': "".concat(id, "-label"),
-        ref: handleListboxRef,
-        onMouseDown: function onMouseDown(event) {
-          // Prevent blur
-          event.preventDefault();
-        }
-      };
-    },
-    getOptionProps: function getOptionProps(_ref5) {
-      var index = _ref5.index,
-          option = _ref5.option;
-      var selected = (multiple ? value : [value]).some(function (value2) {
-        return value2 != null && isOptionEqualToValue(option, value2);
-      });
-      var disabled = getOptionDisabled ? getOptionDisabled(option) : false;
-      return {
-        key: getOptionLabel(option),
-        tabIndex: -1,
-        role: 'option',
-        id: "".concat(id, "-option-").concat(index),
-        onMouseOver: handleOptionMouseOver,
-        onClick: handleOptionClick,
-        onTouchStart: handleOptionTouchStart,
-        'data-option-index': index,
-        'aria-disabled': disabled,
-        'aria-selected': selected
-      };
-    },
-    id: id,
-    inputValue: inputValue,
-    value: value,
-    dirty: dirty,
-    popupOpen: popupOpen,
-    focused: focused || focusedTag !== -1,
-    anchorEl: anchorEl,
-    setAnchorEl: setAnchorEl,
-    focusedTag: focusedTag,
-    groupedOptions: groupedOptions
-  };
-}
+export { useAutocomplete as default } from '@material-ui/unstyled/AutocompleteUnstyled';
+export * from '@material-ui/unstyled/AutocompleteUnstyled';

LinearProgress/linearProgressClasses.d.ts

@@ -0,0 +0,0 @@ export interface LinearProgressClasses {

Link/linkClasses.d.ts

@@ -12,3 +12,3 @@ export interface LinkClasses {
     button: string;
-    /** Pseudo-class applied to the root element if the link is keyboard focused. */
+    /** State class applied to the root element if the link is keyboard focused. */
     focusVisible: string;
@@ -15,0 +15,0 @@ }

List/listClasses.d.ts

@@ -0,0 +0,0 @@ export interface ListClasses {

List/ListContext.js

@@ -0,0 +0,0 @@ import * as React from 'react';

ListItem/listItemClasses.d.ts

@@ -6,3 +6,3 @@ export interface ListItemClasses {
     container: string;
-    /** Pseudo-class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`. */
+    /** State class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`. */
     focusVisible: string;
@@ -13,3 +13,3 @@ /** Styles applied to the component element if dense. */
     alignItemsFlexStart: string;
-    /** Pseudo-class applied to the inner `component` element if `disabled={true}`. */
+    /** State class applied to the inner `component` element if `disabled={true}`. */
     disabled: string;
@@ -26,3 +26,3 @@ /** Styles applied to the inner `component` element if `divider={true}`. */
     secondaryAction: string;
-    /** Pseudo-class applied to the root element if `selected={true}`. */
+    /** State class applied to the root element if `selected={true}`. */
     selected: string;
@@ -29,0 +29,0 @@ }

ListItemAvatar/listItemAvatarClasses.d.ts

@@ -0,0 +0,0 @@ export interface ListItemAvatarClasses {

ListItemButton/listItemButtonClasses.d.ts

 export interface ListItemButtonClasses {
     /** Styles applied to the root element. */
     root: string;
-    /** Pseudo-class applied to the `component`'s `focusVisibleClassName` prop. */
+    /** State class applied to the `component`'s `focusVisibleClassName` prop. */
     focusVisible: string;
@@ -10,3 +10,3 @@ /** Styles applied to the component element if dense. */
     alignItemsFlexStart: string;
-    /** Pseudo-class applied to the inner `component` element if `disabled={true}`. */
+    /** State class applied to the inner `component` element if `disabled={true}`. */
     disabled: string;
@@ -17,3 +17,3 @@ /** Styles applied to the inner `component` element if `divider={true}`. */
     gutters: string;
-    /** Pseudo-class applied to the root element if `selected={true}`. */
+    /** State class applied to the root element if `selected={true}`. */
     selected: string;
@@ -20,0 +20,0 @@ }

ListItemIcon/listItemIconClasses.d.ts

@@ -0,0 +0,0 @@ export interface ListItemIconClasses {

ListItemSecondaryAction/listItemSecondaryActionClasses.d.ts

@@ -0,0 +0,0 @@ export interface ListItemSecondaryActionClasses {

ListItemText/listItemTextClasses.d.ts

@@ -0,0 +0,0 @@ export interface ListItemTextClasses {

ListSubheader/listSubheaderClasses.d.ts

@@ -0,0 +0,0 @@ export interface ListSubheaderClasses {

locale/index.d.ts

@@ -0,0 +0,0 @@ import { ComponentsPropsList } from '../styles/props';

Menu/menuClasses.d.ts

@@ -0,0 +0,0 @@ export interface MenuClasses {

MenuItem/menuItemClasses.d.ts

 export interface MenuItemClasses {
     /** Styles applied to the root element. */
     root: string;
-    /** Pseudo-class applied to the root element if keyboard focused. */
+    /** State class applied to the root element if keyboard focused. */
     focusVisible: string;
     /** Styles applied to the root element if dense. */
     dense: string;
-    /** Pseudo-class applied to the root element if `disabled={true}`. */
+    /** State class applied to the root element if `disabled={true}`. */
     disabled: string;
@@ -14,3 +14,3 @@ /** Styles applied to the root element if `divider={true}`. */
     gutters: string;
-    /** Pseudo-class applied to the root element if `selected={true}`. */
+    /** State class applied to the root element if `selected={true}`. */
     selected: string;
@@ -17,0 +17,0 @@ }

MobileStepper/mobileStepperClasses.d.ts

@@ -0,0 +0,0 @@ export interface MobileStepperClasses {

modern/Autocomplete/Autocomplete.js

@@ -11,3 +11,3 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import { chainPropTypes, integerPropType } from '@material-ui/utils';
-import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
+import { unstable_composeClasses as composeClasses, useAutocomplete, createFilterOptions } from '@material-ui/unstyled';
 import { alpha } from '@material-ui/system';
@@ -21,3 +21,2 @@ import Popper from '../Popper';
 import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
-import useAutocomplete, { createFilterOptions } from '../useAutocomplete';
 import useThemeProps from '../styles/useThemeProps';
@@ -24,0 +23,0 @@ import styled from '../styles/styled';

modern/index.js

@@ -1,2 +0,2 @@
-/** @license Material-UI v5.0.0-beta.2
+/** @license Material-UI v5.0.0-beta.3
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

modern/internal/svg-icons/ArrowDownward.js

@@ -0,0 +0,0 @@ import * as React from 'react';

modern/internal/svg-icons/ArrowDropDown.js

@@ -0,0 +0,0 @@ import * as React from 'react';

modern/internal/svg-icons/Cancel.js

@@ -0,0 +0,0 @@ import * as React from 'react';

modern/internal/svg-icons/CheckBox.js

@@ -0,0 +0,0 @@ import * as React from 'react';

modern/internal/svg-icons/CheckBoxOutlineBlank.js

@@ -0,0 +0,0 @@ import * as React from 'react';

modern/internal/svg-icons/CheckCircle.js

@@ -0,0 +0,0 @@ import * as React from 'react';

modern/internal/svg-icons/IndeterminateCheckBox.js

@@ -0,0 +0,0 @@ import * as React from 'react';

modern/internal/svg-icons/KeyboardArrowLeft.js

@@ -0,0 +0,0 @@ import * as React from 'react';

modern/internal/svg-icons/KeyboardArrowRight.js

@@ -0,0 +0,0 @@ import * as React from 'react';

modern/internal/svg-icons/MoreHoriz.js

@@ -0,0 +0,0 @@ import * as React from 'react';

modern/internal/svg-icons/Person.js

@@ -0,0 +0,0 @@ import * as React from 'react';

modern/internal/svg-icons/RadioButtonChecked.js

@@ -0,0 +0,0 @@ import * as React from 'react';

modern/internal/svg-icons/RadioButtonUnchecked.js

@@ -0,0 +0,0 @@ import * as React from 'react';

modern/internal/svg-icons/Warning.js

@@ -0,0 +0,0 @@ import * as React from 'react';

modern/List/ListContext.js

@@ -0,0 +0,0 @@ import * as React from 'react';

modern/NativeSelect/NativeSelectInput.js

@@ -109,3 +109,3 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 }, styleProps.open && {
-  right: 7
+  transform: 'rotate(180deg)'
 }, styleProps.variant === 'filled' && {
@@ -112,0 +112,0 @@ right: 7

modern/RadioGroup/RadioGroupContext.js

@@ -0,0 +0,0 @@ import * as React from 'react';

modern/Select/Select.js

@@ -228,3 +228,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
    *
-   * @param {(Event & { target: { value: T; name: string } }) | React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {SelectChangeEvent<T>} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (any).
@@ -231,0 +231,0 @@ * **Warning**: This is a generic event not a change event unless the change event is caused by browser autofill.

modern/styles/createTheme.js

@@ -38,3 +38,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   if (process.env.NODE_ENV !== 'production') {
-    const pseudoClasses = ['active', 'checked', 'completed', 'disabled', 'error', 'expanded', 'focused', 'focusVisible', 'required', 'selected'];
+    const stateClasses = ['active', 'checked', 'completed', 'disabled', 'error', 'expanded', 'focused', 'focusVisible', 'required', 'selected'];
 
@@ -47,10 +47,10 @@ const traverse = (node, component) => {
 
-        if (pseudoClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
+        if (stateClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
           if (process.env.NODE_ENV !== 'production') {
-            const pseudoClass = generateUtilityClass('', key);
-            console.error([`Material-UI: The \`${component}\` component increases ` + `the CSS specificity of the \`${key}\` internal state.`, 'You can not override it like this: ', JSON.stringify(node, null, 2), '', `Instead, you need to use the '&.${pseudoClass}' syntax:`, JSON.stringify({
+            const stateClass = generateUtilityClass('', key);
+            console.error([`Material-UI: The \`${component}\` component increases ` + `the CSS specificity of the \`${key}\` internal state.`, 'You can not override it like this: ', JSON.stringify(node, null, 2), '', `Instead, you need to use the '&.${stateClass}' syntax:`, JSON.stringify({
               root: {
-                [`&.${pseudoClass}`]: child
+                [`&.${stateClass}`]: child
               }
-            }, null, 2), '', 'https://material-ui.com/r/pseudo-classes-guide'].join('\n'));
+            }, null, 2), '', 'https://material-ui.com/r/state-classes-guide'].join('\n'));
           } // Remove the style to prevent global conflicts.
@@ -57,0 +57,0 @@

modern/styles/index.js

@@ -14,2 +14,7 @@ export { default as adaptV4Theme } from './adaptV4Theme';
 export { default as ThemeProvider } from './ThemeProvider';
-export { StyledEngineProvider } from '@material-ui/system';
+export { StyledEngineProvider } from '@material-ui/system'; // The legacy utilities from @material-ui/styles
+// These are just empty functions that throws when invoked
+
+export { default as makeStyles } from './makeStyles';
+export { default as withStyles } from './withStyles';
+export { default as withTheme } from './withTheme';

modern/Table/TableContext.js

@@ -0,0 +0,0 @@ import * as React from 'react';

modern/Table/Tablelvl2Context.js

@@ -0,0 +0,0 @@ import * as React from 'react';

modern/useAutocomplete/useAutocomplete.js

@@ -1,1014 +0,2 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
-/* eslint-disable no-constant-condition */
-import * as React from 'react';
-import { setRef, useEventCallback, useControlled, unstable_useId as useId } from '../utils'; // https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript
-// Give up on IE11 support for this feature
-
-function stripDiacritics(string) {
-  return typeof string.normalize !== 'undefined' ? string.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : string;
-}
-
-export function createFilterOptions(config = {}) {
-  const {
-    ignoreAccents = true,
-    ignoreCase = true,
-    limit,
-    matchFrom = 'any',
-    stringify,
-    trim = false
-  } = config;
-  return (options, {
-    inputValue,
-    getOptionLabel
-  }) => {
-    let input = trim ? inputValue.trim() : inputValue;
-
-    if (ignoreCase) {
-      input = input.toLowerCase();
-    }
-
-    if (ignoreAccents) {
-      input = stripDiacritics(input);
-    }
-
-    const filteredOptions = options.filter(option => {
-      let candidate = (stringify || getOptionLabel)(option);
-
-      if (ignoreCase) {
-        candidate = candidate.toLowerCase();
-      }
-
-      if (ignoreAccents) {
-        candidate = stripDiacritics(candidate);
-      }
-
-      return matchFrom === 'start' ? candidate.indexOf(input) === 0 : candidate.indexOf(input) > -1;
-    });
-    return typeof limit === 'number' ? filteredOptions.slice(0, limit) : filteredOptions;
-  };
-} // To replace with .findIndex() once we stop IE11 support.
-
-function findIndex(array, comp) {
-  for (let i = 0; i < array.length; i += 1) {
-    if (comp(array[i])) {
-      return i;
-    }
-  }
-
-  return -1;
-}
-
-const defaultFilterOptions = createFilterOptions(); // Number of options to jump in list box when pageup and pagedown keys are used.
-
-const pageSize = 5;
-export default function useAutocomplete(props) {
-  const {
-    autoComplete = false,
-    autoHighlight = false,
-    autoSelect = false,
-    blurOnSelect = false,
-    disabled: disabledProp,
-    clearOnBlur = !props.freeSolo,
-    clearOnEscape = false,
-    componentName = 'useAutocomplete',
-    defaultValue = props.multiple ? [] : null,
-    disableClearable = false,
-    disableCloseOnSelect = false,
-    disabledItemsFocusable = false,
-    disableListWrap = false,
-    filterOptions = defaultFilterOptions,
-    filterSelectedOptions = false,
-    freeSolo = false,
-    getOptionDisabled,
-    getOptionLabel: getOptionLabelProp = option => option.label ?? option,
-    isOptionEqualToValue = (option, value) => option === value,
-    groupBy,
-    handleHomeEndKeys = !props.freeSolo,
-    id: idProp,
-    includeInputInList = false,
-    inputValue: inputValueProp,
-    multiple = false,
-    onChange,
-    onClose,
-    onHighlightChange,
-    onInputChange,
-    onOpen,
-    open: openProp,
-    openOnFocus = false,
-    options,
-    selectOnFocus = !props.freeSolo,
-    value: valueProp
-  } = props;
-  const id = useId(idProp);
-  let getOptionLabel = getOptionLabelProp;
-
-  getOptionLabel = option => {
-    const optionLabel = getOptionLabelProp(option);
-
-    if (typeof optionLabel !== 'string') {
-      if (process.env.NODE_ENV !== 'production') {
-        const erroneousReturn = optionLabel === undefined ? 'undefined' : `${typeof optionLabel} (${optionLabel})`;
-        console.error(`Material-UI: The \`getOptionLabel\` method of ${componentName} returned ${erroneousReturn} instead of a string for ${JSON.stringify(option)}.`);
-      }
-
-      return String(optionLabel);
-    }
-
-    return optionLabel;
-  };
-
-  const ignoreFocus = React.useRef(false);
-  const firstFocus = React.useRef(true);
-  const inputRef = React.useRef(null);
-  const listboxRef = React.useRef(null);
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const [focusedTag, setFocusedTag] = React.useState(-1);
-  const defaultHighlighted = autoHighlight ? 0 : -1;
-  const highlightedIndexRef = React.useRef(defaultHighlighted);
-  const [value, setValueState] = useControlled({
-    controlled: valueProp,
-    default: defaultValue,
-    name: componentName
-  });
-  const [inputValue, setInputValueState] = useControlled({
-    controlled: inputValueProp,
-    default: '',
-    name: componentName,
-    state: 'inputValue'
-  });
-  const [focused, setFocused] = React.useState(false);
-  const resetInputValue = React.useCallback((event, newValue) => {
-    let newInputValue;
-
-    if (multiple) {
-      newInputValue = '';
-    } else if (newValue == null) {
-      newInputValue = '';
-    } else {
-      const optionLabel = getOptionLabel(newValue);
-      newInputValue = typeof optionLabel === 'string' ? optionLabel : '';
-    }
-
-    if (inputValue === newInputValue) {
-      return;
-    }
-
-    setInputValueState(newInputValue);
-
-    if (onInputChange) {
-      onInputChange(event, newInputValue, 'reset');
-    }
-  }, [getOptionLabel, inputValue, multiple, onInputChange, setInputValueState]);
-  const prevValue = React.useRef();
-  React.useEffect(() => {
-    const valueChange = value !== prevValue.current;
-    prevValue.current = value;
-
-    if (focused && !valueChange) {
-      return;
-    }
-
-    resetInputValue(null, value);
-  }, [value, resetInputValue, focused, prevValue]);
-  const [open, setOpenState] = useControlled({
-    controlled: openProp,
-    default: false,
-    name: componentName,
-    state: 'open'
-  });
-  const [inputPristine, setInputPristine] = React.useState(true);
-  const inputValueIsSelectedValue = !multiple && value != null && inputValue === getOptionLabel(value);
-  const popupOpen = open;
-  const filteredOptions = popupOpen ? filterOptions(options.filter(option => {
-    if (filterSelectedOptions && (multiple ? value : [value]).some(value2 => value2 !== null && isOptionEqualToValue(option, value2))) {
-      return false;
-    }
-
-    return true;
-  }), // we use the empty string to manipulate `filterOptions` to not filter any options
-  // i.e. the filter predicate always returns true
-  {
-    inputValue: inputValueIsSelectedValue && inputPristine ? '' : inputValue,
-    getOptionLabel
-  }) : [];
-  const listboxAvailable = open && filteredOptions.length > 0;
-
-  if (process.env.NODE_ENV !== 'production') {
-    if (value !== null && !freeSolo && options.length > 0) {
-      const missingValue = (multiple ? value : [value]).filter(value2 => !options.some(option => isOptionEqualToValue(option, value2)));
-
-      if (missingValue.length > 0) {
-        console.warn([`Material-UI: The value provided to ${componentName} is invalid.`, `None of the options match with \`${missingValue.length > 1 ? JSON.stringify(missingValue) : JSON.stringify(missingValue[0])}\`.`, 'You can use the `isOptionEqualToValue` prop to customize the equality test.'].join('\n'));
-      }
-    }
-  }
-
-  const focusTag = useEventCallback(tagToFocus => {
-    if (tagToFocus === -1) {
-      inputRef.current.focus();
-    } else {
-      anchorEl.querySelector(`[data-tag-index="${tagToFocus}"]`).focus();
-    }
-  }); // Ensure the focusedTag is never inconsistent
-
-  React.useEffect(() => {
-    if (multiple && focusedTag > value.length - 1) {
-      setFocusedTag(-1);
-      focusTag(-1);
-    }
-  }, [value, multiple, focusedTag, focusTag]);
-
-  function validOptionIndex(index, direction) {
-    if (!listboxRef.current || index === -1) {
-      return -1;
-    }
-
-    let nextFocus = index;
-
-    while (true) {
-      // Out of range
-      if (direction === 'next' && nextFocus === filteredOptions.length || direction === 'previous' && nextFocus === -1) {
-        return -1;
-      }
-
-      const option = listboxRef.current.querySelector(`[data-option-index="${nextFocus}"]`); // Same logic as MenuList.js
-
-      const nextFocusDisabled = disabledItemsFocusable ? false : !option || option.disabled || option.getAttribute('aria-disabled') === 'true';
-
-      if (option && !option.hasAttribute('tabindex') || nextFocusDisabled) {
-        // Move to the next element.
-        nextFocus += direction === 'next' ? 1 : -1;
-      } else {
-        return nextFocus;
-      }
-    }
-  }
-
-  const setHighlightedIndex = useEventCallback(({
-    event,
-    index,
-    reason = 'auto'
-  }) => {
-    highlightedIndexRef.current = index; // does the index exist?
-
-    if (index === -1) {
-      inputRef.current.removeAttribute('aria-activedescendant');
-    } else {
-      inputRef.current.setAttribute('aria-activedescendant', `${id}-option-${index}`);
-    }
-
-    if (onHighlightChange) {
-      onHighlightChange(event, index === -1 ? null : filteredOptions[index], reason);
-    }
-
-    if (!listboxRef.current) {
-      return;
-    }
-
-    const prev = listboxRef.current.querySelector('[role="option"].Mui-focused');
-
-    if (prev) {
-      prev.classList.remove('Mui-focused');
-      prev.classList.remove('Mui-focusVisible');
-    }
-
-    const listboxNode = listboxRef.current.parentElement.querySelector('[role="listbox"]'); // "No results"
-
-    if (!listboxNode) {
-      return;
-    }
-
-    if (index === -1) {
-      listboxNode.scrollTop = 0;
-      return;
-    }
-
-    const option = listboxRef.current.querySelector(`[data-option-index="${index}"]`);
-
-    if (!option) {
-      return;
-    }
-
-    option.classList.add('Mui-focused');
-
-    if (reason === 'keyboard') {
-      option.classList.add('Mui-focusVisible');
-    } // Scroll active descendant into view.
-    // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
-    //
-    // Consider this API instead once it has a better browser support:
-    // .scrollIntoView({ scrollMode: 'if-needed', block: 'nearest' });
-
-
-    if (listboxNode.scrollHeight > listboxNode.clientHeight && reason !== 'mouse') {
-      const element = option;
-      const scrollBottom = listboxNode.clientHeight + listboxNode.scrollTop;
-      const elementBottom = element.offsetTop + element.offsetHeight;
-
-      if (elementBottom > scrollBottom) {
-        listboxNode.scrollTop = elementBottom - listboxNode.clientHeight;
-      } else if (element.offsetTop - element.offsetHeight * (groupBy ? 1.3 : 0) < listboxNode.scrollTop) {
-        listboxNode.scrollTop = element.offsetTop - element.offsetHeight * (groupBy ? 1.3 : 0);
-      }
-    }
-  });
-  const changeHighlightedIndex = useEventCallback(({
-    event,
-    diff,
-    direction = 'next',
-    reason = 'auto'
-  }) => {
-    if (!popupOpen) {
-      return;
-    }
-
-    const getNextIndex = () => {
-      const maxIndex = filteredOptions.length - 1;
-
-      if (diff === 'reset') {
-        return defaultHighlighted;
-      }
-
-      if (diff === 'start') {
-        return 0;
-      }
-
-      if (diff === 'end') {
-        return maxIndex;
-      }
-
-      const newIndex = highlightedIndexRef.current + diff;
-
-      if (newIndex < 0) {
-        if (newIndex === -1 && includeInputInList) {
-          return -1;
-        }
-
-        if (disableListWrap && highlightedIndexRef.current !== -1 || Math.abs(diff) > 1) {
-          return 0;
-        }
-
-        return maxIndex;
-      }
-
-      if (newIndex > maxIndex) {
-        if (newIndex === maxIndex + 1 && includeInputInList) {
-          return -1;
-        }
-
-        if (disableListWrap || Math.abs(diff) > 1) {
-          return maxIndex;
-        }
-
-        return 0;
-      }
-
-      return newIndex;
-    };
-
-    const nextIndex = validOptionIndex(getNextIndex(), direction);
-    setHighlightedIndex({
-      index: nextIndex,
-      reason,
-      event
-    }); // Sync the content of the input with the highlighted option.
-
-    if (autoComplete && diff !== 'reset') {
-      if (nextIndex === -1) {
-        inputRef.current.value = inputValue;
-      } else {
-        const option = getOptionLabel(filteredOptions[nextIndex]);
-        inputRef.current.value = option; // The portion of the selected suggestion that has not been typed by the user,
-        // a completion string, appears inline after the input cursor in the textbox.
-
-        const index = option.toLowerCase().indexOf(inputValue.toLowerCase());
-
-        if (index === 0 && inputValue.length > 0) {
-          inputRef.current.setSelectionRange(inputValue.length, option.length);
-        }
-      }
-    }
-  });
-  const syncHighlightedIndex = React.useCallback(() => {
-    if (!popupOpen) {
-      return;
-    }
-
-    const valueItem = multiple ? value[0] : value; // The popup is empty, reset
-
-    if (filteredOptions.length === 0 || valueItem == null) {
-      changeHighlightedIndex({
-        diff: 'reset'
-      });
-      return;
-    }
-
-    if (!listboxRef.current) {
-      return;
-    } // Synchronize the value with the highlighted index
-
-
-    if (valueItem != null) {
-      const currentOption = filteredOptions[highlightedIndexRef.current]; // Keep the current highlighted index if possible
-
-      if (multiple && currentOption && findIndex(value, val => isOptionEqualToValue(currentOption, val)) !== -1) {
-        return;
-      }
-
-      const itemIndex = findIndex(filteredOptions, optionItem => isOptionEqualToValue(optionItem, valueItem));
-
-      if (itemIndex === -1) {
-        changeHighlightedIndex({
-          diff: 'reset'
-        });
-      } else {
-        setHighlightedIndex({
-          index: itemIndex
-        });
-      }
-
-      return;
-    } // Prevent the highlighted index to leak outside the boundaries.
-
-
-    if (highlightedIndexRef.current >= filteredOptions.length - 1) {
-      setHighlightedIndex({
-        index: filteredOptions.length - 1
-      });
-      return;
-    } // Restore the focus to the previous index.
-
-
-    setHighlightedIndex({
-      index: highlightedIndexRef.current
-    }); // Ignore filteredOptions (and options, isOptionEqualToValue, getOptionLabel) not to break the scroll position
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [// Only sync the highlighted index when the option switch between empty and not
-  filteredOptions.length, // Don't sync the highlighted index with the value when multiple
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  multiple ? false : value, filterSelectedOptions, changeHighlightedIndex, setHighlightedIndex, popupOpen, inputValue, multiple]);
-  const handleListboxRef = useEventCallback(node => {
-    setRef(listboxRef, node);
-
-    if (!node) {
-      return;
-    }
-
-    syncHighlightedIndex();
-  });
-
-  if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useEffect(() => {
-      if (!inputRef.current || inputRef.current.nodeName !== 'INPUT') {
-        console.error([`Material-UI: Unable to find the input element. It was resolved to ${inputRef.current} while an HTMLInputElement was expected.`, `Instead, ${componentName} expects an input element.`, '', componentName === 'useAutocomplete' ? 'Make sure you have binded getInputProps correctly and that the normal ref/effect resolutions order is guaranteed.' : 'Make sure you have customized the input component correctly.'].join('\n'));
-      }
-    }, [componentName]);
-  }
-
-  React.useEffect(() => {
-    syncHighlightedIndex();
-  }, [syncHighlightedIndex]);
-
-  const handleOpen = event => {
-    if (open) {
-      return;
-    }
-
-    setOpenState(true);
-    setInputPristine(true);
-
-    if (onOpen) {
-      onOpen(event);
-    }
-  };
-
-  const handleClose = (event, reason) => {
-    if (!open) {
-      return;
-    }
-
-    setOpenState(false);
-
-    if (onClose) {
-      onClose(event, reason);
-    }
-  };
-
-  const handleValue = (event, newValue, reason, details) => {
-    if (value === newValue) {
-      return;
-    }
-
-    if (onChange) {
-      onChange(event, newValue, reason, details);
-    }
-
-    setValueState(newValue);
-  };
-
-  const isTouch = React.useRef(false);
-
-  const selectNewValue = (event, option, reasonProp = 'selectOption', origin = 'options') => {
-    let reason = reasonProp;
-    let newValue = option;
-
-    if (multiple) {
-      newValue = Array.isArray(value) ? value.slice() : [];
-
-      if (process.env.NODE_ENV !== 'production') {
-        const matches = newValue.filter(val => isOptionEqualToValue(option, val));
-
-        if (matches.length > 1) {
-          console.error([`Material-UI: The \`isOptionEqualToValue\` method of ${componentName} do not handle the arguments correctly.`, `The component expects a single value to match a given option but found ${matches.length} matches.`].join('\n'));
-        }
-      }
-
-      const itemIndex = findIndex(newValue, valueItem => isOptionEqualToValue(option, valueItem));
-
-      if (itemIndex === -1) {
-        newValue.push(option);
-      } else if (origin !== 'freeSolo') {
-        newValue.splice(itemIndex, 1);
-        reason = 'removeOption';
-      }
-    }
-
-    resetInputValue(event, newValue);
-    handleValue(event, newValue, reason, {
-      option
-    });
-
-    if (!disableCloseOnSelect && !event.ctrlKey && !event.metaKey) {
-      handleClose(event, reason);
-    }
-
-    if (blurOnSelect === true || blurOnSelect === 'touch' && isTouch.current || blurOnSelect === 'mouse' && !isTouch.current) {
-      inputRef.current.blur();
-    }
-  };
-
-  function validTagIndex(index, direction) {
-    if (index === -1) {
-      return -1;
-    }
-
-    let nextFocus = index;
-
-    while (true) {
-      // Out of range
-      if (direction === 'next' && nextFocus === value.length || direction === 'previous' && nextFocus === -1) {
-        return -1;
-      }
-
-      const option = anchorEl.querySelector(`[data-tag-index="${nextFocus}"]`); // Same logic as MenuList.js
-
-      if (!option || !option.hasAttribute('tabindex') || option.disabled || option.getAttribute('aria-disabled') === 'true') {
-        nextFocus += direction === 'next' ? 1 : -1;
-      } else {
-        return nextFocus;
-      }
-    }
-  }
-
-  const handleFocusTag = (event, direction) => {
-    if (!multiple) {
-      return;
-    }
-
-    handleClose(event, 'toggleInput');
-    let nextTag = focusedTag;
-
-    if (focusedTag === -1) {
-      if (inputValue === '' && direction === 'previous') {
-        nextTag = value.length - 1;
-      }
-    } else {
-      nextTag += direction === 'next' ? 1 : -1;
-
-      if (nextTag < 0) {
-        nextTag = 0;
-      }
-
-      if (nextTag === value.length) {
-        nextTag = -1;
-      }
-    }
-
-    nextTag = validTagIndex(nextTag, direction);
-    setFocusedTag(nextTag);
-    focusTag(nextTag);
-  };
-
-  const handleClear = event => {
-    ignoreFocus.current = true;
-    setInputValueState('');
-
-    if (onInputChange) {
-      onInputChange(event, '', 'clear');
-    }
-
-    handleValue(event, multiple ? [] : null, 'clear');
-  };
-
-  const handleKeyDown = other => event => {
-    if (other.onKeyDown) {
-      other.onKeyDown(event);
-    }
-
-    if (event.defaultMuiPrevented) {
-      return;
-    }
-
-    if (focusedTag !== -1 && ['ArrowLeft', 'ArrowRight'].indexOf(event.key) === -1) {
-      setFocusedTag(-1);
-      focusTag(-1);
-    } // Wait until IME is settled.
-
-
-    if (event.which !== 229) {
-      switch (event.key) {
-        case 'Home':
-          if (popupOpen && handleHomeEndKeys) {
-            // Prevent scroll of the page
-            event.preventDefault();
-            changeHighlightedIndex({
-              diff: 'start',
-              direction: 'next',
-              reason: 'keyboard',
-              event
-            });
-          }
-
-          break;
-
-        case 'End':
-          if (popupOpen && handleHomeEndKeys) {
-            // Prevent scroll of the page
-            event.preventDefault();
-            changeHighlightedIndex({
-              diff: 'end',
-              direction: 'previous',
-              reason: 'keyboard',
-              event
-            });
-          }
-
-          break;
-
-        case 'PageUp':
-          // Prevent scroll of the page
-          event.preventDefault();
-          changeHighlightedIndex({
-            diff: -pageSize,
-            direction: 'previous',
-            reason: 'keyboard',
-            event
-          });
-          handleOpen(event);
-          break;
-
-        case 'PageDown':
-          // Prevent scroll of the page
-          event.preventDefault();
-          changeHighlightedIndex({
-            diff: pageSize,
-            direction: 'next',
-            reason: 'keyboard',
-            event
-          });
-          handleOpen(event);
-          break;
-
-        case 'ArrowDown':
-          // Prevent cursor move
-          event.preventDefault();
-          changeHighlightedIndex({
-            diff: 1,
-            direction: 'next',
-            reason: 'keyboard',
-            event
-          });
-          handleOpen(event);
-          break;
-
-        case 'ArrowUp':
-          // Prevent cursor move
-          event.preventDefault();
-          changeHighlightedIndex({
-            diff: -1,
-            direction: 'previous',
-            reason: 'keyboard',
-            event
-          });
-          handleOpen(event);
-          break;
-
-        case 'ArrowLeft':
-          handleFocusTag(event, 'previous');
-          break;
-
-        case 'ArrowRight':
-          handleFocusTag(event, 'next');
-          break;
-
-        case 'Enter':
-          if (highlightedIndexRef.current !== -1 && popupOpen) {
-            const option = filteredOptions[highlightedIndexRef.current];
-            const disabled = getOptionDisabled ? getOptionDisabled(option) : false; // Avoid early form validation, let the end-users continue filling the form.
-
-            event.preventDefault();
-
-            if (disabled) {
-              return;
-            }
-
-            selectNewValue(event, option, 'selectOption'); // Move the selection to the end.
-
-            if (autoComplete) {
-              inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
-            }
-          } else if (freeSolo && inputValue !== '' && inputValueIsSelectedValue === false) {
-            if (multiple) {
-              // Allow people to add new values before they submit the form.
-              event.preventDefault();
-            }
-
-            selectNewValue(event, inputValue, 'createOption', 'freeSolo');
-          }
-
-          break;
-
-        case 'Escape':
-          if (popupOpen) {
-            // Avoid Opera to exit fullscreen mode.
-            event.preventDefault(); // Avoid the Modal to handle the event.
-
-            event.stopPropagation();
-            handleClose(event, 'escape');
-          } else if (clearOnEscape && (inputValue !== '' || multiple && value.length > 0)) {
-            // Avoid Opera to exit fullscreen mode.
-            event.preventDefault(); // Avoid the Modal to handle the event.
-
-            event.stopPropagation();
-            handleClear(event);
-          }
-
-          break;
-
-        case 'Backspace':
-          if (multiple && inputValue === '' && value.length > 0) {
-            const index = focusedTag === -1 ? value.length - 1 : focusedTag;
-            const newValue = value.slice();
-            newValue.splice(index, 1);
-            handleValue(event, newValue, 'removeOption', {
-              option: value[index]
-            });
-          }
-
-          break;
-
-        default:
-      }
-    }
-  };
-
-  const handleFocus = event => {
-    setFocused(true);
-
-    if (openOnFocus && !ignoreFocus.current) {
-      handleOpen(event);
-    }
-  };
-
-  const handleBlur = event => {
-    // Ignore the event when using the scrollbar with IE11
-    if (listboxRef.current !== null && listboxRef.current.parentElement.contains(document.activeElement)) {
-      inputRef.current.focus();
-      return;
-    }
-
-    setFocused(false);
-    firstFocus.current = true;
-    ignoreFocus.current = false;
-
-    if (autoSelect && highlightedIndexRef.current !== -1 && popupOpen) {
-      selectNewValue(event, filteredOptions[highlightedIndexRef.current], 'blur');
-    } else if (autoSelect && freeSolo && inputValue !== '') {
-      selectNewValue(event, inputValue, 'blur', 'freeSolo');
-    } else if (clearOnBlur) {
-      resetInputValue(event, value);
-    }
-
-    handleClose(event, 'blur');
-  };
-
-  const handleInputChange = event => {
-    const newValue = event.target.value;
-
-    if (inputValue !== newValue) {
-      setInputValueState(newValue);
-      setInputPristine(false);
-
-      if (onInputChange) {
-        onInputChange(event, newValue, 'input');
-      }
-    }
-
-    if (newValue === '') {
-      if (!disableClearable && !multiple) {
-        handleValue(event, null, 'clear');
-      }
-    } else {
-      handleOpen(event);
-    }
-  };
-
-  const handleOptionMouseOver = event => {
-    setHighlightedIndex({
-      event,
-      index: Number(event.currentTarget.getAttribute('data-option-index')),
-      reason: 'mouse'
-    });
-  };
-
-  const handleOptionTouchStart = () => {
-    isTouch.current = true;
-  };
-
-  const handleOptionClick = event => {
-    const index = Number(event.currentTarget.getAttribute('data-option-index'));
-    selectNewValue(event, filteredOptions[index], 'selectOption');
-    isTouch.current = false;
-  };
-
-  const handleTagDelete = index => event => {
-    const newValue = value.slice();
-    newValue.splice(index, 1);
-    handleValue(event, newValue, 'removeOption', {
-      option: value[index]
-    });
-  };
-
-  const handlePopupIndicator = event => {
-    if (open) {
-      handleClose(event, 'toggleInput');
-    } else {
-      handleOpen(event);
-    }
-  }; // Prevent input blur when interacting with the combobox
-
-
-  const handleMouseDown = event => {
-    if (event.target.getAttribute('id') !== id) {
-      event.preventDefault();
-    }
-  }; // Focus the input when interacting with the combobox
-
-
-  const handleClick = () => {
-    inputRef.current.focus();
-
-    if (selectOnFocus && firstFocus.current && inputRef.current.selectionEnd - inputRef.current.selectionStart === 0) {
-      inputRef.current.select();
-    }
-
-    firstFocus.current = false;
-  };
-
-  const handleInputMouseDown = event => {
-    if (inputValue === '' || !open) {
-      handlePopupIndicator(event);
-    }
-  };
-
-  let dirty = freeSolo && inputValue.length > 0;
-  dirty = dirty || (multiple ? value.length > 0 : value !== null);
-  let groupedOptions = filteredOptions;
-
-  if (groupBy) {
-    // used to keep track of key and indexes in the result array
-    const indexBy = new Map();
-    let warn = false;
-    groupedOptions = filteredOptions.reduce((acc, option, index) => {
-      const group = groupBy(option);
-
-      if (acc.length > 0 && acc[acc.length - 1].group === group) {
-        acc[acc.length - 1].options.push(option);
-      } else {
-        if (process.env.NODE_ENV !== 'production') {
-          if (indexBy.get(group) && !warn) {
-            console.warn(`Material-UI: The options provided combined with the \`groupBy\` method of ${componentName} returns duplicated headers.`, 'You can solve the issue by sorting the options with the output of `groupBy`.');
-            warn = true;
-          }
-
-          indexBy.set(group, true);
-        }
-
-        acc.push({
-          key: index,
-          index,
-          group,
-          options: [option]
-        });
-      }
-
-      return acc;
-    }, []);
-  }
-
-  if (disabledProp && focused) {
-    handleBlur();
-  }
-
-  return {
-    getRootProps: (other = {}) => _extends({
-      'aria-owns': listboxAvailable ? `${id}-listbox` : null,
-      role: 'combobox',
-      'aria-expanded': listboxAvailable
-    }, other, {
-      onKeyDown: handleKeyDown(other),
-      onMouseDown: handleMouseDown,
-      onClick: handleClick
-    }),
-    getInputLabelProps: () => ({
-      id: `${id}-label`,
-      htmlFor: id
-    }),
-    getInputProps: () => ({
-      id,
-      value: inputValue,
-      onBlur: handleBlur,
-      onFocus: handleFocus,
-      onChange: handleInputChange,
-      onMouseDown: handleInputMouseDown,
-      // if open then this is handled imperativeley so don't let react override
-      // only have an opinion about this when closed
-      'aria-activedescendant': popupOpen ? '' : null,
-      'aria-autocomplete': autoComplete ? 'both' : 'list',
-      'aria-controls': listboxAvailable ? `${id}-listbox` : null,
-      // Disable browser's suggestion that might overlap with the popup.
-      // Handle autocomplete but not autofill.
-      autoComplete: 'off',
-      ref: inputRef,
-      autoCapitalize: 'none',
-      spellCheck: 'false'
-    }),
-    getClearProps: () => ({
-      tabIndex: -1,
-      onClick: handleClear
-    }),
-    getPopupIndicatorProps: () => ({
-      tabIndex: -1,
-      onClick: handlePopupIndicator
-    }),
-    getTagProps: ({
-      index
-    }) => ({
-      key: index,
-      'data-tag-index': index,
-      tabIndex: -1,
-      onDelete: handleTagDelete(index)
-    }),
-    getListboxProps: () => ({
-      role: 'listbox',
-      id: `${id}-listbox`,
-      'aria-labelledby': `${id}-label`,
-      ref: handleListboxRef,
-      onMouseDown: event => {
-        // Prevent blur
-        event.preventDefault();
-      }
-    }),
-    getOptionProps: ({
-      index,
-      option
-    }) => {
-      const selected = (multiple ? value : [value]).some(value2 => value2 != null && isOptionEqualToValue(option, value2));
-      const disabled = getOptionDisabled ? getOptionDisabled(option) : false;
-      return {
-        key: getOptionLabel(option),
-        tabIndex: -1,
-        role: 'option',
-        id: `${id}-option-${index}`,
-        onMouseOver: handleOptionMouseOver,
-        onClick: handleOptionClick,
-        onTouchStart: handleOptionTouchStart,
-        'data-option-index': index,
-        'aria-disabled': disabled,
-        'aria-selected': selected
-      };
-    },
-    id,
-    inputValue,
-    value,
-    dirty,
-    popupOpen,
-    focused: focused || focusedTag !== -1,
-    anchorEl,
-    setAnchorEl,
-    focusedTag,
-    groupedOptions
-  };
-}
+export { useAutocomplete as default } from '@material-ui/unstyled/AutocompleteUnstyled';
+export * from '@material-ui/unstyled/AutocompleteUnstyled';

NativeSelect/nativeSelectClasses.d.ts

@@ -12,3 +12,3 @@ export interface NativeSelectClasses {
     standard: string;
-    /** Pseudo-class applied to the select component `disabled` class. */
+    /** State class applied to the select component `disabled` class. */
     disabled: string;
@@ -15,0 +15,0 @@ /** Styles applied to the icon component. */

NativeSelect/NativeSelectInput.js

@@ -109,3 +109,3 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 }, styleProps.open && {
-  right: 7
+  transform: 'rotate(180deg)'
 }, styleProps.variant === 'filled' && {
@@ -112,0 +112,0 @@ right: 7

node/Autocomplete/Autocomplete.js

@@ -11,3 +11,3 @@ "use strict";
   get: function () {
-    return _useAutocomplete.createFilterOptions;
+    return _unstyled.createFilterOptions;
   }
@@ -47,4 +47,2 @@ });
 
-var _useAutocomplete = _interopRequireWildcard(require("../useAutocomplete"));
-
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
@@ -469,3 +467,3 @@
     groupedOptions
-  } = (0, _useAutocomplete.default)((0, _extends2.default)({}, props, {
+  } = (0, _unstyled.useAutocomplete)((0, _extends2.default)({}, props, {
     componentName: 'Autocomplete'
@@ -472,0 +470,0 @@ }));

node/internal/svg-icons/ArrowDownward.js

@@ -0,0 +0,0 @@ "use strict";

node/internal/svg-icons/ArrowDropDown.js

@@ -0,0 +0,0 @@ "use strict";

node/internal/svg-icons/Cancel.js

@@ -0,0 +0,0 @@ "use strict";

node/internal/svg-icons/CheckBox.js

@@ -0,0 +0,0 @@ "use strict";

node/internal/svg-icons/CheckBoxOutlineBlank.js

@@ -0,0 +0,0 @@ "use strict";

node/internal/svg-icons/CheckCircle.js

@@ -0,0 +0,0 @@ "use strict";

node/internal/svg-icons/IndeterminateCheckBox.js

@@ -0,0 +0,0 @@ "use strict";

node/internal/svg-icons/KeyboardArrowLeft.js

@@ -0,0 +0,0 @@ "use strict";

node/internal/svg-icons/KeyboardArrowRight.js

@@ -0,0 +0,0 @@ "use strict";

node/internal/svg-icons/MoreHoriz.js

@@ -0,0 +0,0 @@ "use strict";

node/internal/svg-icons/Person.js

@@ -0,0 +0,0 @@ "use strict";

node/internal/svg-icons/RadioButtonChecked.js

@@ -0,0 +0,0 @@ "use strict";

node/internal/svg-icons/RadioButtonUnchecked.js

@@ -0,0 +0,0 @@ "use strict";

node/internal/svg-icons/Warning.js

@@ -0,0 +0,0 @@ "use strict";

node/List/ListContext.js

@@ -0,0 +0,0 @@ "use strict";

node/NativeSelect/NativeSelectInput.js

@@ -135,3 +135,3 @@ "use strict";
 }, styleProps.open && {
-  right: 7
+  transform: 'rotate(180deg)'
 }, styleProps.variant === 'filled' && {
@@ -138,0 +138,0 @@ right: 7

node/RadioGroup/RadioGroupContext.js

@@ -0,0 +0,0 @@ "use strict";

node/Select/Select.js

@@ -252,3 +252,3 @@ "use strict";
    *
-   * @param {(Event & { target: { value: T; name: string } }) | React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {SelectChangeEvent<T>} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (any).
@@ -255,0 +255,0 @@ * **Warning**: This is a generic event not a change event unless the change event is caused by browser autofill.

node/styles/createTheme.js

@@ -58,3 +58,3 @@ "use strict";
   if (process.env.NODE_ENV !== 'production') {
-    const pseudoClasses = ['active', 'checked', 'completed', 'disabled', 'error', 'expanded', 'focused', 'focusVisible', 'required', 'selected'];
+    const stateClasses = ['active', 'checked', 'completed', 'disabled', 'error', 'expanded', 'focused', 'focusVisible', 'required', 'selected'];
 
@@ -67,10 +67,10 @@ const traverse = (node, component) => {
 
-        if (pseudoClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
+        if (stateClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
           if (process.env.NODE_ENV !== 'production') {
-            const pseudoClass = (0, _unstyled.generateUtilityClass)('', key);
-            console.error([`Material-UI: The \`${component}\` component increases ` + `the CSS specificity of the \`${key}\` internal state.`, 'You can not override it like this: ', JSON.stringify(node, null, 2), '', `Instead, you need to use the '&.${pseudoClass}' syntax:`, JSON.stringify({
+            const stateClass = (0, _unstyled.generateUtilityClass)('', key);
+            console.error([`Material-UI: The \`${component}\` component increases ` + `the CSS specificity of the \`${key}\` internal state.`, 'You can not override it like this: ', JSON.stringify(node, null, 2), '', `Instead, you need to use the '&.${stateClass}' syntax:`, JSON.stringify({
               root: {
-                [`&.${pseudoClass}`]: child
+                [`&.${stateClass}`]: child
               }
-            }, null, 2), '', 'https://material-ui.com/r/pseudo-classes-guide'].join('\n'));
+            }, null, 2), '', 'https://material-ui.com/r/state-classes-guide'].join('\n'));
           } // Remove the style to prevent global conflicts.
@@ -77,0 +77,0 @@

node/styles/index.js

@@ -170,2 +170,20 @@ "use strict";
 });
+Object.defineProperty(exports, "makeStyles", {
+  enumerable: true,
+  get: function () {
+    return _makeStyles.default;
+  }
+});
+Object.defineProperty(exports, "withStyles", {
+  enumerable: true,
+  get: function () {
+    return _withStyles.default;
+  }
+});
+Object.defineProperty(exports, "withTheme", {
+  enumerable: true,
+  get: function () {
+    return _withTheme.default;
+  }
+});
 
@@ -196,4 +214,10 @@ var _adaptV4Theme = _interopRequireDefault(require("./adaptV4Theme"));
 
+var _makeStyles = _interopRequireDefault(require("./makeStyles"));
+
+var _withStyles = _interopRequireDefault(require("./withStyles"));
+
+var _withTheme = _interopRequireDefault(require("./withTheme"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

node/Table/TableContext.js

@@ -0,0 +0,0 @@ "use strict";

node/Table/Tablelvl2Context.js

@@ -0,0 +0,0 @@ "use strict";

node/useAutocomplete/useAutocomplete.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createFilterOptions = createFilterOptions;
-exports.default = useAutocomplete;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var React = _interopRequireWildcard(require("react"));
-
-var _utils = require("../utils");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-/* eslint-disable no-constant-condition */
-// https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript
-// Give up on IE11 support for this feature
-function stripDiacritics(string) {
-  return typeof string.normalize !== 'undefined' ? string.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : string;
-}
-
-function createFilterOptions(config = {}) {
-  const {
-    ignoreAccents = true,
-    ignoreCase = true,
-    limit,
-    matchFrom = 'any',
-    stringify,
-    trim = false
-  } = config;
-  return (options, {
-    inputValue,
-    getOptionLabel
-  }) => {
-    let input = trim ? inputValue.trim() : inputValue;
-
-    if (ignoreCase) {
-      input = input.toLowerCase();
-    }
-
-    if (ignoreAccents) {
-      input = stripDiacritics(input);
-    }
-
-    const filteredOptions = options.filter(option => {
-      let candidate = (stringify || getOptionLabel)(option);
-
-      if (ignoreCase) {
-        candidate = candidate.toLowerCase();
-      }
-
-      if (ignoreAccents) {
-        candidate = stripDiacritics(candidate);
-      }
-
-      return matchFrom === 'start' ? candidate.indexOf(input) === 0 : candidate.indexOf(input) > -1;
-    });
-    return typeof limit === 'number' ? filteredOptions.slice(0, limit) : filteredOptions;
-  };
-} // To replace with .findIndex() once we stop IE11 support.
-
-
-function findIndex(array, comp) {
-  for (let i = 0; i < array.length; i += 1) {
-    if (comp(array[i])) {
-      return i;
-    }
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _AutocompleteUnstyled.useAutocomplete;
   }
+});
 
-  return -1;
-}
+var _AutocompleteUnstyled = require("@material-ui/unstyled/AutocompleteUnstyled");
 
-const defaultFilterOptions = createFilterOptions(); // Number of options to jump in list box when pageup and pagedown keys are used.
-
-const pageSize = 5;
-
-function useAutocomplete(props) {
-  const {
-    autoComplete = false,
-    autoHighlight = false,
-    autoSelect = false,
-    blurOnSelect = false,
-    disabled: disabledProp,
-    clearOnBlur = !props.freeSolo,
-    clearOnEscape = false,
-    componentName = 'useAutocomplete',
-    defaultValue = props.multiple ? [] : null,
-    disableClearable = false,
-    disableCloseOnSelect = false,
-    disabledItemsFocusable = false,
-    disableListWrap = false,
-    filterOptions = defaultFilterOptions,
-    filterSelectedOptions = false,
-    freeSolo = false,
-    getOptionDisabled,
-    getOptionLabel: getOptionLabelProp = option => {
-      var _option$label;
-
-      return (_option$label = option.label) != null ? _option$label : option;
-    },
-    isOptionEqualToValue = (option, value) => option === value,
-    groupBy,
-    handleHomeEndKeys = !props.freeSolo,
-    id: idProp,
-    includeInputInList = false,
-    inputValue: inputValueProp,
-    multiple = false,
-    onChange,
-    onClose,
-    onHighlightChange,
-    onInputChange,
-    onOpen,
-    open: openProp,
-    openOnFocus = false,
-    options,
-    selectOnFocus = !props.freeSolo,
-    value: valueProp
-  } = props;
-  const id = (0, _utils.unstable_useId)(idProp);
-  let getOptionLabel = getOptionLabelProp;
-
-  getOptionLabel = option => {
-    const optionLabel = getOptionLabelProp(option);
-
-    if (typeof optionLabel !== 'string') {
-      if (process.env.NODE_ENV !== 'production') {
-        const erroneousReturn = optionLabel === undefined ? 'undefined' : `${typeof optionLabel} (${optionLabel})`;
-        console.error(`Material-UI: The \`getOptionLabel\` method of ${componentName} returned ${erroneousReturn} instead of a string for ${JSON.stringify(option)}.`);
-      }
-
-      return String(optionLabel);
+Object.keys(_AutocompleteUnstyled).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AutocompleteUnstyled[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AutocompleteUnstyled[key];
     }
-
-    return optionLabel;
-  };
-
-  const ignoreFocus = React.useRef(false);
-  const firstFocus = React.useRef(true);
-  const inputRef = React.useRef(null);
-  const listboxRef = React.useRef(null);
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const [focusedTag, setFocusedTag] = React.useState(-1);
-  const defaultHighlighted = autoHighlight ? 0 : -1;
-  const highlightedIndexRef = React.useRef(defaultHighlighted);
-  const [value, setValueState] = (0, _utils.useControlled)({
-    controlled: valueProp,
-    default: defaultValue,
-    name: componentName
   });
-  const [inputValue, setInputValueState] = (0, _utils.useControlled)({
-    controlled: inputValueProp,
-    default: '',
-    name: componentName,
-    state: 'inputValue'
-  });
-  const [focused, setFocused] = React.useState(false);
-  const resetInputValue = React.useCallback((event, newValue) => {
-    let newInputValue;
-
-    if (multiple) {
-      newInputValue = '';
-    } else if (newValue == null) {
-      newInputValue = '';
-    } else {
-      const optionLabel = getOptionLabel(newValue);
-      newInputValue = typeof optionLabel === 'string' ? optionLabel : '';
-    }
-
-    if (inputValue === newInputValue) {
-      return;
-    }
-
-    setInputValueState(newInputValue);
-
-    if (onInputChange) {
-      onInputChange(event, newInputValue, 'reset');
-    }
-  }, [getOptionLabel, inputValue, multiple, onInputChange, setInputValueState]);
-  const prevValue = React.useRef();
-  React.useEffect(() => {
-    const valueChange = value !== prevValue.current;
-    prevValue.current = value;
-
-    if (focused && !valueChange) {
-      return;
-    }
-
-    resetInputValue(null, value);
-  }, [value, resetInputValue, focused, prevValue]);
-  const [open, setOpenState] = (0, _utils.useControlled)({
-    controlled: openProp,
-    default: false,
-    name: componentName,
-    state: 'open'
-  });
-  const [inputPristine, setInputPristine] = React.useState(true);
-  const inputValueIsSelectedValue = !multiple && value != null && inputValue === getOptionLabel(value);
-  const popupOpen = open;
-  const filteredOptions = popupOpen ? filterOptions(options.filter(option => {
-    if (filterSelectedOptions && (multiple ? value : [value]).some(value2 => value2 !== null && isOptionEqualToValue(option, value2))) {
-      return false;
-    }
-
-    return true;
-  }), // we use the empty string to manipulate `filterOptions` to not filter any options
-  // i.e. the filter predicate always returns true
-  {
-    inputValue: inputValueIsSelectedValue && inputPristine ? '' : inputValue,
-    getOptionLabel
-  }) : [];
-  const listboxAvailable = open && filteredOptions.length > 0;
-
-  if (process.env.NODE_ENV !== 'production') {
-    if (value !== null && !freeSolo && options.length > 0) {
-      const missingValue = (multiple ? value : [value]).filter(value2 => !options.some(option => isOptionEqualToValue(option, value2)));
-
-      if (missingValue.length > 0) {
-        console.warn([`Material-UI: The value provided to ${componentName} is invalid.`, `None of the options match with \`${missingValue.length > 1 ? JSON.stringify(missingValue) : JSON.stringify(missingValue[0])}\`.`, 'You can use the `isOptionEqualToValue` prop to customize the equality test.'].join('\n'));
-      }
-    }
-  }
-
-  const focusTag = (0, _utils.useEventCallback)(tagToFocus => {
-    if (tagToFocus === -1) {
-      inputRef.current.focus();
-    } else {
-      anchorEl.querySelector(`[data-tag-index="${tagToFocus}"]`).focus();
-    }
-  }); // Ensure the focusedTag is never inconsistent
-
-  React.useEffect(() => {
-    if (multiple && focusedTag > value.length - 1) {
-      setFocusedTag(-1);
-      focusTag(-1);
-    }
-  }, [value, multiple, focusedTag, focusTag]);
-
-  function validOptionIndex(index, direction) {
-    if (!listboxRef.current || index === -1) {
-      return -1;
-    }
-
-    let nextFocus = index;
-
-    while (true) {
-      // Out of range
-      if (direction === 'next' && nextFocus === filteredOptions.length || direction === 'previous' && nextFocus === -1) {
-        return -1;
-      }
-
-      const option = listboxRef.current.querySelector(`[data-option-index="${nextFocus}"]`); // Same logic as MenuList.js
-
-      const nextFocusDisabled = disabledItemsFocusable ? false : !option || option.disabled || option.getAttribute('aria-disabled') === 'true';
-
-      if (option && !option.hasAttribute('tabindex') || nextFocusDisabled) {
-        // Move to the next element.
-        nextFocus += direction === 'next' ? 1 : -1;
-      } else {
-        return nextFocus;
-      }
-    }
-  }
-
-  const setHighlightedIndex = (0, _utils.useEventCallback)(({
-    event,
-    index,
-    reason = 'auto'
-  }) => {
-    highlightedIndexRef.current = index; // does the index exist?
-
-    if (index === -1) {
-      inputRef.current.removeAttribute('aria-activedescendant');
-    } else {
-      inputRef.current.setAttribute('aria-activedescendant', `${id}-option-${index}`);
-    }
-
-    if (onHighlightChange) {
-      onHighlightChange(event, index === -1 ? null : filteredOptions[index], reason);
-    }
-
-    if (!listboxRef.current) {
-      return;
-    }
-
-    const prev = listboxRef.current.querySelector('[role="option"].Mui-focused');
-
-    if (prev) {
-      prev.classList.remove('Mui-focused');
-      prev.classList.remove('Mui-focusVisible');
-    }
-
-    const listboxNode = listboxRef.current.parentElement.querySelector('[role="listbox"]'); // "No results"
-
-    if (!listboxNode) {
-      return;
-    }
-
-    if (index === -1) {
-      listboxNode.scrollTop = 0;
-      return;
-    }
-
-    const option = listboxRef.current.querySelector(`[data-option-index="${index}"]`);
-
-    if (!option) {
-      return;
-    }
-
-    option.classList.add('Mui-focused');
-
-    if (reason === 'keyboard') {
-      option.classList.add('Mui-focusVisible');
-    } // Scroll active descendant into view.
-    // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
-    //
-    // Consider this API instead once it has a better browser support:
-    // .scrollIntoView({ scrollMode: 'if-needed', block: 'nearest' });
-
-
-    if (listboxNode.scrollHeight > listboxNode.clientHeight && reason !== 'mouse') {
-      const element = option;
-      const scrollBottom = listboxNode.clientHeight + listboxNode.scrollTop;
-      const elementBottom = element.offsetTop + element.offsetHeight;
-
-      if (elementBottom > scrollBottom) {
-        listboxNode.scrollTop = elementBottom - listboxNode.clientHeight;
-      } else if (element.offsetTop - element.offsetHeight * (groupBy ? 1.3 : 0) < listboxNode.scrollTop) {
-        listboxNode.scrollTop = element.offsetTop - element.offsetHeight * (groupBy ? 1.3 : 0);
-      }
-    }
-  });
-  const changeHighlightedIndex = (0, _utils.useEventCallback)(({
-    event,
-    diff,
-    direction = 'next',
-    reason = 'auto'
-  }) => {
-    if (!popupOpen) {
-      return;
-    }
-
-    const getNextIndex = () => {
-      const maxIndex = filteredOptions.length - 1;
-
-      if (diff === 'reset') {
-        return defaultHighlighted;
-      }
-
-      if (diff === 'start') {
-        return 0;
-      }
-
-      if (diff === 'end') {
-        return maxIndex;
-      }
-
-      const newIndex = highlightedIndexRef.current + diff;
-
-      if (newIndex < 0) {
-        if (newIndex === -1 && includeInputInList) {
-          return -1;
-        }
-
-        if (disableListWrap && highlightedIndexRef.current !== -1 || Math.abs(diff) > 1) {
-          return 0;
-        }
-
-        return maxIndex;
-      }
-
-      if (newIndex > maxIndex) {
-        if (newIndex === maxIndex + 1 && includeInputInList) {
-          return -1;
-        }
-
-        if (disableListWrap || Math.abs(diff) > 1) {
-          return maxIndex;
-        }
-
-        return 0;
-      }
-
-      return newIndex;
-    };
-
-    const nextIndex = validOptionIndex(getNextIndex(), direction);
-    setHighlightedIndex({
-      index: nextIndex,
-      reason,
-      event
-    }); // Sync the content of the input with the highlighted option.
-
-    if (autoComplete && diff !== 'reset') {
-      if (nextIndex === -1) {
-        inputRef.current.value = inputValue;
-      } else {
-        const option = getOptionLabel(filteredOptions[nextIndex]);
-        inputRef.current.value = option; // The portion of the selected suggestion that has not been typed by the user,
-        // a completion string, appears inline after the input cursor in the textbox.
-
-        const index = option.toLowerCase().indexOf(inputValue.toLowerCase());
-
-        if (index === 0 && inputValue.length > 0) {
-          inputRef.current.setSelectionRange(inputValue.length, option.length);
-        }
-      }
-    }
-  });
-  const syncHighlightedIndex = React.useCallback(() => {
-    if (!popupOpen) {
-      return;
-    }
-
-    const valueItem = multiple ? value[0] : value; // The popup is empty, reset
-
-    if (filteredOptions.length === 0 || valueItem == null) {
-      changeHighlightedIndex({
-        diff: 'reset'
-      });
-      return;
-    }
-
-    if (!listboxRef.current) {
-      return;
-    } // Synchronize the value with the highlighted index
-
-
-    if (valueItem != null) {
-      const currentOption = filteredOptions[highlightedIndexRef.current]; // Keep the current highlighted index if possible
-
-      if (multiple && currentOption && findIndex(value, val => isOptionEqualToValue(currentOption, val)) !== -1) {
-        return;
-      }
-
-      const itemIndex = findIndex(filteredOptions, optionItem => isOptionEqualToValue(optionItem, valueItem));
-
-      if (itemIndex === -1) {
-        changeHighlightedIndex({
-          diff: 'reset'
-        });
-      } else {
-        setHighlightedIndex({
-          index: itemIndex
-        });
-      }
-
-      return;
-    } // Prevent the highlighted index to leak outside the boundaries.
-
-
-    if (highlightedIndexRef.current >= filteredOptions.length - 1) {
-      setHighlightedIndex({
-        index: filteredOptions.length - 1
-      });
-      return;
-    } // Restore the focus to the previous index.
-
-
-    setHighlightedIndex({
-      index: highlightedIndexRef.current
-    }); // Ignore filteredOptions (and options, isOptionEqualToValue, getOptionLabel) not to break the scroll position
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [// Only sync the highlighted index when the option switch between empty and not
-  filteredOptions.length, // Don't sync the highlighted index with the value when multiple
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  multiple ? false : value, filterSelectedOptions, changeHighlightedIndex, setHighlightedIndex, popupOpen, inputValue, multiple]);
-  const handleListboxRef = (0, _utils.useEventCallback)(node => {
-    (0, _utils.setRef)(listboxRef, node);
-
-    if (!node) {
-      return;
-    }
-
-    syncHighlightedIndex();
-  });
-
-  if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useEffect(() => {
-      if (!inputRef.current || inputRef.current.nodeName !== 'INPUT') {
-        console.error([`Material-UI: Unable to find the input element. It was resolved to ${inputRef.current} while an HTMLInputElement was expected.`, `Instead, ${componentName} expects an input element.`, '', componentName === 'useAutocomplete' ? 'Make sure you have binded getInputProps correctly and that the normal ref/effect resolutions order is guaranteed.' : 'Make sure you have customized the input component correctly.'].join('\n'));
-      }
-    }, [componentName]);
-  }
-
-  React.useEffect(() => {
-    syncHighlightedIndex();
-  }, [syncHighlightedIndex]);
-
-  const handleOpen = event => {
-    if (open) {
-      return;
-    }
-
-    setOpenState(true);
-    setInputPristine(true);
-
-    if (onOpen) {
-      onOpen(event);
-    }
-  };
-
-  const handleClose = (event, reason) => {
-    if (!open) {
-      return;
-    }
-
-    setOpenState(false);
-
-    if (onClose) {
-      onClose(event, reason);
-    }
-  };
-
-  const handleValue = (event, newValue, reason, details) => {
-    if (value === newValue) {
-      return;
-    }
-
-    if (onChange) {
-      onChange(event, newValue, reason, details);
-    }
-
-    setValueState(newValue);
-  };
-
-  const isTouch = React.useRef(false);
-
-  const selectNewValue = (event, option, reasonProp = 'selectOption', origin = 'options') => {
-    let reason = reasonProp;
-    let newValue = option;
-
-    if (multiple) {
-      newValue = Array.isArray(value) ? value.slice() : [];
-
-      if (process.env.NODE_ENV !== 'production') {
-        const matches = newValue.filter(val => isOptionEqualToValue(option, val));
-
-        if (matches.length > 1) {
-          console.error([`Material-UI: The \`isOptionEqualToValue\` method of ${componentName} do not handle the arguments correctly.`, `The component expects a single value to match a given option but found ${matches.length} matches.`].join('\n'));
-        }
-      }
-
-      const itemIndex = findIndex(newValue, valueItem => isOptionEqualToValue(option, valueItem));
-
-      if (itemIndex === -1) {
-        newValue.push(option);
-      } else if (origin !== 'freeSolo') {
-        newValue.splice(itemIndex, 1);
-        reason = 'removeOption';
-      }
-    }
-
-    resetInputValue(event, newValue);
-    handleValue(event, newValue, reason, {
-      option
-    });
-
-    if (!disableCloseOnSelect && !event.ctrlKey && !event.metaKey) {
-      handleClose(event, reason);
-    }
-
-    if (blurOnSelect === true || blurOnSelect === 'touch' && isTouch.current || blurOnSelect === 'mouse' && !isTouch.current) {
-      inputRef.current.blur();
-    }
-  };
-
-  function validTagIndex(index, direction) {
-    if (index === -1) {
-      return -1;
-    }
-
-    let nextFocus = index;
-
-    while (true) {
-      // Out of range
-      if (direction === 'next' && nextFocus === value.length || direction === 'previous' && nextFocus === -1) {
-        return -1;
-      }
-
-      const option = anchorEl.querySelector(`[data-tag-index="${nextFocus}"]`); // Same logic as MenuList.js
-
-      if (!option || !option.hasAttribute('tabindex') || option.disabled || option.getAttribute('aria-disabled') === 'true') {
-        nextFocus += direction === 'next' ? 1 : -1;
-      } else {
-        return nextFocus;
-      }
-    }
-  }
-
-  const handleFocusTag = (event, direction) => {
-    if (!multiple) {
-      return;
-    }
-
-    handleClose(event, 'toggleInput');
-    let nextTag = focusedTag;
-
-    if (focusedTag === -1) {
-      if (inputValue === '' && direction === 'previous') {
-        nextTag = value.length - 1;
-      }
-    } else {
-      nextTag += direction === 'next' ? 1 : -1;
-
-      if (nextTag < 0) {
-        nextTag = 0;
-      }
-
-      if (nextTag === value.length) {
-        nextTag = -1;
-      }
-    }
-
-    nextTag = validTagIndex(nextTag, direction);
-    setFocusedTag(nextTag);
-    focusTag(nextTag);
-  };
-
-  const handleClear = event => {
-    ignoreFocus.current = true;
-    setInputValueState('');
-
-    if (onInputChange) {
-      onInputChange(event, '', 'clear');
-    }
-
-    handleValue(event, multiple ? [] : null, 'clear');
-  };
-
-  const handleKeyDown = other => event => {
-    if (other.onKeyDown) {
-      other.onKeyDown(event);
-    }
-
-    if (event.defaultMuiPrevented) {
-      return;
-    }
-
-    if (focusedTag !== -1 && ['ArrowLeft', 'ArrowRight'].indexOf(event.key) === -1) {
-      setFocusedTag(-1);
-      focusTag(-1);
-    } // Wait until IME is settled.
-
-
-    if (event.which !== 229) {
-      switch (event.key) {
-        case 'Home':
-          if (popupOpen && handleHomeEndKeys) {
-            // Prevent scroll of the page
-            event.preventDefault();
-            changeHighlightedIndex({
-              diff: 'start',
-              direction: 'next',
-              reason: 'keyboard',
-              event
-            });
-          }
-
-          break;
-
-        case 'End':
-          if (popupOpen && handleHomeEndKeys) {
-            // Prevent scroll of the page
-            event.preventDefault();
-            changeHighlightedIndex({
-              diff: 'end',
-              direction: 'previous',
-              reason: 'keyboard',
-              event
-            });
-          }
-
-          break;
-
-        case 'PageUp':
-          // Prevent scroll of the page
-          event.preventDefault();
-          changeHighlightedIndex({
-            diff: -pageSize,
-            direction: 'previous',
-            reason: 'keyboard',
-            event
-          });
-          handleOpen(event);
-          break;
-
-        case 'PageDown':
-          // Prevent scroll of the page
-          event.preventDefault();
-          changeHighlightedIndex({
-            diff: pageSize,
-            direction: 'next',
-            reason: 'keyboard',
-            event
-          });
-          handleOpen(event);
-          break;
-
-        case 'ArrowDown':
-          // Prevent cursor move
-          event.preventDefault();
-          changeHighlightedIndex({
-            diff: 1,
-            direction: 'next',
-            reason: 'keyboard',
-            event
-          });
-          handleOpen(event);
-          break;
-
-        case 'ArrowUp':
-          // Prevent cursor move
-          event.preventDefault();
-          changeHighlightedIndex({
-            diff: -1,
-            direction: 'previous',
-            reason: 'keyboard',
-            event
-          });
-          handleOpen(event);
-          break;
-
-        case 'ArrowLeft':
-          handleFocusTag(event, 'previous');
-          break;
-
-        case 'ArrowRight':
-          handleFocusTag(event, 'next');
-          break;
-
-        case 'Enter':
-          if (highlightedIndexRef.current !== -1 && popupOpen) {
-            const option = filteredOptions[highlightedIndexRef.current];
-            const disabled = getOptionDisabled ? getOptionDisabled(option) : false; // Avoid early form validation, let the end-users continue filling the form.
-
-            event.preventDefault();
-
-            if (disabled) {
-              return;
-            }
-
-            selectNewValue(event, option, 'selectOption'); // Move the selection to the end.
-
-            if (autoComplete) {
-              inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
-            }
-          } else if (freeSolo && inputValue !== '' && inputValueIsSelectedValue === false) {
-            if (multiple) {
-              // Allow people to add new values before they submit the form.
-              event.preventDefault();
-            }
-
-            selectNewValue(event, inputValue, 'createOption', 'freeSolo');
-          }
-
-          break;
-
-        case 'Escape':
-          if (popupOpen) {
-            // Avoid Opera to exit fullscreen mode.
-            event.preventDefault(); // Avoid the Modal to handle the event.
-
-            event.stopPropagation();
-            handleClose(event, 'escape');
-          } else if (clearOnEscape && (inputValue !== '' || multiple && value.length > 0)) {
-            // Avoid Opera to exit fullscreen mode.
-            event.preventDefault(); // Avoid the Modal to handle the event.
-
-            event.stopPropagation();
-            handleClear(event);
-          }
-
-          break;
-
-        case 'Backspace':
-          if (multiple && inputValue === '' && value.length > 0) {
-            const index = focusedTag === -1 ? value.length - 1 : focusedTag;
-            const newValue = value.slice();
-            newValue.splice(index, 1);
-            handleValue(event, newValue, 'removeOption', {
-              option: value[index]
-            });
-          }
-
-          break;
-
-        default:
-      }
-    }
-  };
-
-  const handleFocus = event => {
-    setFocused(true);
-
-    if (openOnFocus && !ignoreFocus.current) {
-      handleOpen(event);
-    }
-  };
-
-  const handleBlur = event => {
-    // Ignore the event when using the scrollbar with IE11
-    if (listboxRef.current !== null && listboxRef.current.parentElement.contains(document.activeElement)) {
-      inputRef.current.focus();
-      return;
-    }
-
-    setFocused(false);
-    firstFocus.current = true;
-    ignoreFocus.current = false;
-
-    if (autoSelect && highlightedIndexRef.current !== -1 && popupOpen) {
-      selectNewValue(event, filteredOptions[highlightedIndexRef.current], 'blur');
-    } else if (autoSelect && freeSolo && inputValue !== '') {
-      selectNewValue(event, inputValue, 'blur', 'freeSolo');
-    } else if (clearOnBlur) {
-      resetInputValue(event, value);
-    }
-
-    handleClose(event, 'blur');
-  };
-
-  const handleInputChange = event => {
-    const newValue = event.target.value;
-
-    if (inputValue !== newValue) {
-      setInputValueState(newValue);
-      setInputPristine(false);
-
-      if (onInputChange) {
-        onInputChange(event, newValue, 'input');
-      }
-    }
-
-    if (newValue === '') {
-      if (!disableClearable && !multiple) {
-        handleValue(event, null, 'clear');
-      }
-    } else {
-      handleOpen(event);
-    }
-  };
-
-  const handleOptionMouseOver = event => {
-    setHighlightedIndex({
-      event,
-      index: Number(event.currentTarget.getAttribute('data-option-index')),
-      reason: 'mouse'
-    });
-  };
-
-  const handleOptionTouchStart = () => {
-    isTouch.current = true;
-  };
-
-  const handleOptionClick = event => {
-    const index = Number(event.currentTarget.getAttribute('data-option-index'));
-    selectNewValue(event, filteredOptions[index], 'selectOption');
-    isTouch.current = false;
-  };
-
-  const handleTagDelete = index => event => {
-    const newValue = value.slice();
-    newValue.splice(index, 1);
-    handleValue(event, newValue, 'removeOption', {
-      option: value[index]
-    });
-  };
-
-  const handlePopupIndicator = event => {
-    if (open) {
-      handleClose(event, 'toggleInput');
-    } else {
-      handleOpen(event);
-    }
-  }; // Prevent input blur when interacting with the combobox
-
-
-  const handleMouseDown = event => {
-    if (event.target.getAttribute('id') !== id) {
-      event.preventDefault();
-    }
-  }; // Focus the input when interacting with the combobox
-
-
-  const handleClick = () => {
-    inputRef.current.focus();
-
-    if (selectOnFocus && firstFocus.current && inputRef.current.selectionEnd - inputRef.current.selectionStart === 0) {
-      inputRef.current.select();
-    }
-
-    firstFocus.current = false;
-  };
-
-  const handleInputMouseDown = event => {
-    if (inputValue === '' || !open) {
-      handlePopupIndicator(event);
-    }
-  };
-
-  let dirty = freeSolo && inputValue.length > 0;
-  dirty = dirty || (multiple ? value.length > 0 : value !== null);
-  let groupedOptions = filteredOptions;
-
-  if (groupBy) {
-    // used to keep track of key and indexes in the result array
-    const indexBy = new Map();
-    let warn = false;
-    groupedOptions = filteredOptions.reduce((acc, option, index) => {
-      const group = groupBy(option);
-
-      if (acc.length > 0 && acc[acc.length - 1].group === group) {
-        acc[acc.length - 1].options.push(option);
-      } else {
-        if (process.env.NODE_ENV !== 'production') {
-          if (indexBy.get(group) && !warn) {
-            console.warn(`Material-UI: The options provided combined with the \`groupBy\` method of ${componentName} returns duplicated headers.`, 'You can solve the issue by sorting the options with the output of `groupBy`.');
-            warn = true;
-          }
-
-          indexBy.set(group, true);
-        }
-
-        acc.push({
-          key: index,
-          index,
-          group,
-          options: [option]
-        });
-      }
-
-      return acc;
-    }, []);
-  }
-
-  if (disabledProp && focused) {
-    handleBlur();
-  }
-
-  return {
-    getRootProps: (other = {}) => (0, _extends2.default)({
-      'aria-owns': listboxAvailable ? `${id}-listbox` : null,
-      role: 'combobox',
-      'aria-expanded': listboxAvailable
-    }, other, {
-      onKeyDown: handleKeyDown(other),
-      onMouseDown: handleMouseDown,
-      onClick: handleClick
-    }),
-    getInputLabelProps: () => ({
-      id: `${id}-label`,
-      htmlFor: id
-    }),
-    getInputProps: () => ({
-      id,
-      value: inputValue,
-      onBlur: handleBlur,
-      onFocus: handleFocus,
-      onChange: handleInputChange,
-      onMouseDown: handleInputMouseDown,
-      // if open then this is handled imperativeley so don't let react override
-      // only have an opinion about this when closed
-      'aria-activedescendant': popupOpen ? '' : null,
-      'aria-autocomplete': autoComplete ? 'both' : 'list',
-      'aria-controls': listboxAvailable ? `${id}-listbox` : null,
-      // Disable browser's suggestion that might overlap with the popup.
-      // Handle autocomplete but not autofill.
-      autoComplete: 'off',
-      ref: inputRef,
-      autoCapitalize: 'none',
-      spellCheck: 'false'
-    }),
-    getClearProps: () => ({
-      tabIndex: -1,
-      onClick: handleClear
-    }),
-    getPopupIndicatorProps: () => ({
-      tabIndex: -1,
-      onClick: handlePopupIndicator
-    }),
-    getTagProps: ({
-      index
-    }) => ({
-      key: index,
-      'data-tag-index': index,
-      tabIndex: -1,
-      onDelete: handleTagDelete(index)
-    }),
-    getListboxProps: () => ({
-      role: 'listbox',
-      id: `${id}-listbox`,
-      'aria-labelledby': `${id}-label`,
-      ref: handleListboxRef,
-      onMouseDown: event => {
-        // Prevent blur
-        event.preventDefault();
-      }
-    }),
-    getOptionProps: ({
-      index,
-      option
-    }) => {
-      const selected = (multiple ? value : [value]).some(value2 => value2 != null && isOptionEqualToValue(option, value2));
-      const disabled = getOptionDisabled ? getOptionDisabled(option) : false;
-      return {
-        key: getOptionLabel(option),
-        tabIndex: -1,
-        role: 'option',
-        id: `${id}-option-${index}`,
-        onMouseOver: handleOptionMouseOver,
-        onClick: handleOptionClick,
-        onTouchStart: handleOptionTouchStart,
-        'data-option-index': index,
-        'aria-disabled': disabled,
-        'aria-selected': selected
-      };
-    },
-    id,
-    inputValue,
-    value,
-    dirty,
-    popupOpen,
-    focused: focused || focusedTag !== -1,
-    anchorEl,
-    setAnchorEl,
-    focusedTag,
-    groupedOptions
-  };
-}
+});

OutlinedInput/outlinedInputClasses.d.ts

@@ -14,3 +14,3 @@ export interface OutlinedInputClasses {
     adornedEnd: string;
-    /** Pseudo-class applied to the root element if `error={true}`. */
+    /** State class applied to the root element if `error={true}`. */
     error: string;
@@ -17,0 +17,0 @@ /** Styles applied to the input element if `size="small"`. */

package.json

 {
   "name": "@material-ui/core",
-  "version": "5.0.0-beta.2",
+  "version": "5.0.0-beta.3",
   "private": false,
@@ -48,5 +48,5 @@ "author": "Material-UI Team",
     "@babel/runtime": "^7.4.4",
-    "@material-ui/system": "5.0.0-beta.2",
-    "@material-ui/types": "6.0.1",
-    "@material-ui/unstyled": "5.0.0-alpha.41",
+    "@material-ui/system": "5.0.0-beta.3",
+    "@material-ui/types": "6.0.2",
+    "@material-ui/unstyled": "5.0.0-alpha.42",
     "@material-ui/utils": "5.0.0-beta.1",
@@ -53,0 +53,0 @@ "@popperjs/core": "^2.4.4",

Pagination/paginationClasses.d.ts

@@ -0,0 +0,0 @@ export interface PaginationClasses {

PaginationItem/paginationItemClasses.d.ts

@@ -30,7 +30,7 @@ export interface PaginationItemClasses {
     previousNext: string;
-    /** Pseudo-class applied to the root element if keyboard focused. */
+    /** State class applied to the root element if keyboard focused. */
     focusVisible: string;
-    /** Pseudo-class applied to the root element if `disabled={true}`. */
+    /** State class applied to the root element if `disabled={true}`. */
     disabled: string;
-    /** Pseudo-class applied to the root element if `selected={true}`. */
+    /** State class applied to the root element if `selected={true}`. */
     selected: string;
@@ -37,0 +37,0 @@ /** Styles applied to the icon to display. */

Paper/paperClasses.d.ts

@@ -0,0 +0,0 @@ export interface PaperClasses {

Popover/popoverClasses.d.ts

@@ -0,0 +0,0 @@ export interface PopoverClasses {

Radio/radioClasses.d.ts

 export interface RadioClasses {
     /** Styles applied to the root element. */
     root: string;
-    /** Pseudo-class applied to the root element if `checked={true}`. */
+    /** State class applied to the root element if `checked={true}`. */
     checked: string;
-    /** Pseudo-class applied to the root element if `disabled={true}`. */
+    /** State class applied to the root element if `disabled={true}`. */
     disabled: string;
@@ -8,0 +8,0 @@ /** Styles applied to the root element if `color="primary"`. */

RadioGroup/RadioGroupContext.js

@@ -0,0 +0,0 @@ import * as React from 'react';

Rating/ratingClasses.d.ts

@@ -12,5 +12,5 @@ export interface RatingClasses {
     readOnly: string;
-    /** Pseudo-class applied to the root element if `disabled={true}`. */
+    /** State class applied to the root element if `disabled={true}`. */
     disabled: string;
-    /** Pseudo-class applied to the root element if keyboard focused. */
+    /** State class applied to the root element if keyboard focused. */
     focusVisible: string;
@@ -17,0 +17,0 @@ /** Visually hide an element. */

README.md

@@ -77,4 +77,5 @@ <p align="center">
 <p style="display: flex; justify-content: center;">
-  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="tidelift" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://github.com/tidelift.png?size=96" srcset="https://github.com/tidelift.png?size=192 2x" alt="tidelift" title="Enterprise-ready open source software" loading="lazy" /></a>
-  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="bitsrc" href="https://bit.dev" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://github.com/teambit.png?size=96" srcset="https://github.com/teambit.png?size=192 2x" alt="bitsrc" title="The fastest way to share code" loading="lazy" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="tidelift" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://github.com/tidelift.png?size=192" alt="tidelift" title="Enterprise-ready open source software" loading="lazy" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="bitsrc" href="https://bit.dev" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://github.com/teambit.png?size=192" alt="bitsrc" title="The fastest way to share code" loading="lazy" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="movavi" href="https://spicefactory.co/" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://avatars.githubusercontent.com/u/13365608?s=192" alt="Next gen digital product studio." loading="lazy" /></a>
 </p>
@@ -85,6 +86,6 @@
 <p style="display: flex; justify-content: center; flex-wrap: wrap;">
-  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="textemall" href="https://www.text-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/callemall/a6946da/logo/96.png" srcset="https://images.opencollective.com/callemall/a6946da/logo/192.png 2x" alt="call-em-all" title="Mass Text Messaging & Automated Calling" height="96" width="96" loading="lazy"></a>
-  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="canadacasino" href="https://www.canadacasino.ca/" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/canadacasino/5b19004/logo/96.png" srcset="https://images.opencollective.com/canadacasino/5b19004/logo/192.png 2x" alt="canadacasino" loading="lazy" /></a>
-  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="hoodiebees" href="https://hoodiebees.com/" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/hoodiebees1/617b451/logo/96.png" srcset="https://images.opencollective.com/hoodiebees1/617b451/logo/192.png 2x" alt="hoodiebees" loading="lazy" /></a>
-  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="movavi" href="https://www.movavi.com/" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/movavi-software/a1d0167/logo/96.png" srcset="https://images.opencollective.com/movavi-software/a1d0167/logo/192.png 2x" alt="Screen recorder for Mac" loading="lazy" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="textemall" href="https://www.text-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/callemall/a6946da/logo/192.png" alt="call-em-all" title="Mass Text Messaging & Automated Calling" height="96" width="96" loading="lazy"></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="canadacasino" href="https://www.canadacasino.ca/" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/canadacasino/5b19004/logo/192.png" alt="canadacasino" loading="lazy" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="hoodiebees" href="https://hoodiebees.com/" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/hoodiebees1/617b451/logo/192.png" alt="hoodiebees" loading="lazy" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="movavi" href="https://www.movavi.com/" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/movavi-software/a1d0167/logo/192.png" alt="Screen recorder for Mac" loading="lazy" /></a>
 </p>
@@ -91,0 +92,0 @@

ScopedCssBaseline/scopedCssBaselineClasses.d.ts

@@ -0,0 +0,0 @@ export interface ScopedCssBaselineClasses {

Select/Select.d.ts

@@ -91,3 +91,3 @@ import * as React from 'react';
    *
-   * @param {(Event & { target: { value: T; name: string } }) | React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {SelectChangeEvent<T>} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (any).
@@ -94,0 +94,0 @@ * **Warning**: This is a generic event not a change event unless the change event is caused by browser autofill.

Select/Select.js

@@ -228,3 +228,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
    *
-   * @param {(Event & { target: { value: T; name: string } }) | React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {SelectChangeEvent<T>} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (any).
@@ -231,0 +231,0 @@ * **Warning**: This is a generic event not a change event unless the change event is caused by browser autofill.

Select/selectClasses.d.ts

@@ -12,3 +12,3 @@ export interface SelectClasses {
     standard: string;
-    /** Pseudo-class applied to the select component `disabled` class. */
+    /** State class applied to the select component `disabled` class. */
     disabled: string;
@@ -15,0 +15,0 @@ /** Styles applied to the icon component. */

Skeleton/skeletonClasses.d.ts

@@ -0,0 +0,0 @@ export interface SkeletonClasses {

Snackbar/snackbarClasses.d.ts

@@ -0,0 +0,0 @@ export interface SnackbarClasses {

SnackbarContent/snackbarContentClasses.d.ts

@@ -0,0 +0,0 @@ export interface SnackbarContentClasses {

SpeedDial/speedDialClasses.d.ts

@@ -0,0 +0,0 @@ export interface SpeedDialClasses {

SpeedDialAction/speedDialActionClasses.d.ts

@@ -0,0 +0,0 @@ export interface SpeedDialActionClasses {

SpeedDialIcon/speedDialIconClasses.d.ts

@@ -0,0 +0,0 @@ export interface SpeedDialIconClasses {

Step/stepClasses.d.ts

@@ -10,3 +10,3 @@ export interface StepClasses {
     alternativeLabel: string;
-    /** Pseudo-class applied to the root element if `completed={true}`. */
+    /** State class applied to the root element if `completed={true}`. */
     completed: string;
@@ -13,0 +13,0 @@ }

StepButton/stepButtonClasses.d.ts

@@ -0,0 +0,0 @@ export interface StepButtonClasses {

StepConnector/stepConnectorClasses.d.ts

@@ -10,7 +10,7 @@ export interface StepConnectorClasses {
     alternativeLabel: string;
-    /** Pseudo-class applied to the root element if `active={true}`. */
+    /** State class applied to the root element if `active={true}`. */
     active: string;
-    /** Pseudo-class applied to the root element if `completed={true}`. */
+    /** State class applied to the root element if `completed={true}`. */
     completed: string;
-    /** Pseudo-class applied to the root element if `disabled={true}`. */
+    /** State class applied to the root element if `disabled={true}`. */
     disabled: string;
@@ -17,0 +17,0 @@ /** Styles applied to the line element. */

StepContent/stepContentClasses.d.ts

@@ -0,0 +0,0 @@ export interface StepContentClasses {

StepIcon/stepIconClasses.d.ts

@@ -6,7 +6,7 @@ export interface StepIconClasses {
     text: string;
-    /** Pseudo-class applied to the root element if `active={true}`. */
+    /** State class applied to the root element if `active={true}`. */
     active: string;
-    /** Pseudo-class applied to the root element if `completed={true}`. */
+    /** State class applied to the root element if `completed={true}`. */
     completed: string;
-    /** Pseudo-class applied to the root element if `error={true}`. */
+    /** State class applied to the root element if `error={true}`. */
     error: string;
@@ -13,0 +13,0 @@ }

StepLabel/stepLabelClasses.d.ts

@@ -10,13 +10,13 @@ export interface StepLabelClasses {
     label: string;
-    /** Pseudo-class applied to the label element if `active={true}`. */
+    /** State class applied to the label element if `active={true}`. */
     active: string;
-    /** Pseudo-class applied to the label element if `completed={true}`. */
+    /** State class applied to the label element if `completed={true}`. */
     completed: string;
-    /** Pseudo-class applied to the root and label elements if `error={true}`. */
+    /** State class applied to the root and label elements if `error={true}`. */
     error: string;
-    /** Pseudo-class applied to the root and label elements if `disabled={true}`. */
+    /** State class applied to the root and label elements if `disabled={true}`. */
     disabled: string;
     /** Styles applied to the `icon` container element. */
     iconContainer: string;
-    /** Pseudo-class applied to the root and icon container and label if `alternativeLabel={true}`. */
+    /** State class applied to the root and icon container and label if `alternativeLabel={true}`. */
     alternativeLabel: string;
@@ -23,0 +23,0 @@ /** Styles applied to the container element which wraps label and `optional`. */

Stepper/stepperClasses.d.ts

@@ -0,0 +0,0 @@ export interface StepperClasses {

styles/createTheme.js

@@ -38,3 +38,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   if (process.env.NODE_ENV !== 'production') {
-    const pseudoClasses = ['active', 'checked', 'completed', 'disabled', 'error', 'expanded', 'focused', 'focusVisible', 'required', 'selected'];
+    const stateClasses = ['active', 'checked', 'completed', 'disabled', 'error', 'expanded', 'focused', 'focusVisible', 'required', 'selected'];
 
@@ -47,10 +47,10 @@ const traverse = (node, component) => {
 
-        if (pseudoClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
+        if (stateClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
           if (process.env.NODE_ENV !== 'production') {
-            const pseudoClass = generateUtilityClass('', key);
-            console.error([`Material-UI: The \`${component}\` component increases ` + `the CSS specificity of the \`${key}\` internal state.`, 'You can not override it like this: ', JSON.stringify(node, null, 2), '', `Instead, you need to use the '&.${pseudoClass}' syntax:`, JSON.stringify({
+            const stateClass = generateUtilityClass('', key);
+            console.error([`Material-UI: The \`${component}\` component increases ` + `the CSS specificity of the \`${key}\` internal state.`, 'You can not override it like this: ', JSON.stringify(node, null, 2), '', `Instead, you need to use the '&.${stateClass}' syntax:`, JSON.stringify({
               root: {
-                [`&.${pseudoClass}`]: child
+                [`&.${stateClass}`]: child
               }
-            }, null, 2), '', 'https://material-ui.com/r/pseudo-classes-guide'].join('\n'));
+            }, null, 2), '', 'https://material-ui.com/r/state-classes-guide'].join('\n'));
           } // Remove the style to prevent global conflicts.
@@ -57,0 +57,0 @@

styles/index.d.ts

@@ -78,1 +78,5 @@ export {
 }
+
+export { default as makeStyles } from './makeStyles';
+export { default as withStyles } from './withStyles';
+export { default as withTheme } from './withTheme';

styles/index.js

@@ -14,2 +14,7 @@ export { default as adaptV4Theme } from './adaptV4Theme';
 export { default as ThemeProvider } from './ThemeProvider';
-export { StyledEngineProvider } from '@material-ui/system';
+export { StyledEngineProvider } from '@material-ui/system'; // The legacy utilities from @material-ui/styles
+// These are just empty functions that throws when invoked
+
+export { default as makeStyles } from './makeStyles';
+export { default as withStyles } from './withStyles';
+export { default as withTheme } from './withTheme';

styles/useTheme.d.ts

 import { Theme } from './createTheme';
 
 export default function useTheme<T = Theme>(): T;

SvgIcon/svgIconClasses.d.ts

@@ -0,0 +0,0 @@ export interface SvgIconClasses {

Switch/switchClasses.d.ts

@@ -18,5 +18,5 @@ export interface SwitchClasses {
     sizeMedium: string;
-    /** Pseudo-class applied to the internal `SwitchBase` component's `checked` class. */
+    /** State class applied to the internal `SwitchBase` component's `checked` class. */
     checked: string;
-    /** Pseudo-class applied to the internal SwitchBase component's disabled class. */
+    /** State class applied to the internal SwitchBase component's disabled class. */
     disabled: string;
@@ -23,0 +23,0 @@ /** Styles applied to the internal SwitchBase component's input element. */

Tab/tabClasses.d.ts

@@ -12,5 +12,5 @@ export interface TabClasses {
     textColorSecondary: string;
-    /** Pseudo-class applied to the root element if `selected={true}` (controlled by the Tabs component). */
+    /** State class applied to the root element if `selected={true}` (controlled by the Tabs component). */
     selected: string;
-    /** Pseudo-class applied to the root element if `disabled={true}` (controlled by the Tabs component). */
+    /** State class applied to the root element if `disabled={true}` (controlled by the Tabs component). */
     disabled: string;
@@ -17,0 +17,0 @@ /** Styles applied to the root element if `fullWidth={true}` (controlled by the Tabs component). */

Table/tableClasses.d.ts

@@ -0,0 +0,0 @@ export interface TableClasses {

Table/TableContext.js

@@ -0,0 +0,0 @@ import * as React from 'react';

Table/Tablelvl2Context.js

@@ -0,0 +0,0 @@ import * as React from 'react';

TableBody/tableBodyClasses.d.ts

@@ -0,0 +0,0 @@ export interface TableBodyClasses {

TableCell/tableCellClasses.d.ts

@@ -0,0 +0,0 @@ export interface TableCellClasses {

TableContainer/tableContainerClasses.d.ts

@@ -0,0 +0,0 @@ export interface TableContainerClasses {

TableFooter/tableFooterClasses.d.ts

@@ -0,0 +0,0 @@ export interface TableFooterClasses {

TableHead/tableHeadClasses.d.ts

@@ -0,0 +0,0 @@ export interface TableHeadClasses {

TablePagination/tablePaginationClasses.d.ts

@@ -0,0 +0,0 @@ export interface TablePaginationClasses {

TableRow/tableRowClasses.d.ts

 export interface TableRowClasses {
     /** Styles applied to the root element. */
     root: string;
-    /** Pseudo-class applied to the root element if `selected={true}`. */
+    /** State class applied to the root element if `selected={true}`. */
     selected: string;
-    /** Pseudo-class applied to the root element if `hover={true}`. */
+    /** State class applied to the root element if `hover={true}`. */
     hover: string;
@@ -8,0 +8,0 @@ /** Styles applied to the root element if table variant="head". */

TableSortLabel/tableSortLabelClasses.d.ts

 export interface TableSortLabelClasses {
     /** Styles applied to the root element. */
     root: string;
-    /** Pseudo-class applied to the root element if `active={true}`. */
+    /** State class applied to the root element if `active={true}`. */
     active: string;
@@ -6,0 +6,0 @@ /** Styles applied to the icon component. */

Tabs/tabsClasses.d.ts

@@ -0,0 +0,0 @@ export interface TabsClasses {

TabScrollButton/tabScrollButtonClasses.d.ts

@@ -6,3 +6,3 @@ export interface TabScrollButtonClasses {
     vertical: string;
-    /** Pseudo-class applied to the root element if `disabled={true}`. */
+    /** State class applied to the root element if `disabled={true}`. */
     disabled: string;
@@ -9,0 +9,0 @@ }

TextField/textFieldClasses.d.ts

@@ -0,0 +0,0 @@ export interface TextFieldClasses {

ToggleButton/toggleButtonClasses.d.ts

 export interface ToggleButtonClasses {
     /** Styles applied to the root element. */
     root: string;
-    /** Pseudo-class applied to the root element if `disabled={true}`. */
+    /** State class applied to the root element if `disabled={true}`. */
     disabled: string;
-    /** Pseudo-class applied to the root element if `selected={true}`. */
+    /** State class applied to the root element if `selected={true}`. */
     selected: string;
-    /** Pseudo-class applied to the root element if `color="standard"`. */
+    /** State class applied to the root element if `color="standard"`. */
     standard: string;
-    /** Pseudo-class applied to the root element if `color="primary"`. */
+    /** State class applied to the root element if `color="primary"`. */
     primary: string;
-    /** Pseudo-class applied to the root element if `color="secondary"`. */
+    /** State class applied to the root element if `color="secondary"`. */
     secondary: string;
@@ -14,0 +14,0 @@ /** Styles applied to the root element if `size="small"`. */

ToggleButtonGroup/toggleButtonGroupClasses.d.ts

@@ -0,0 +0,0 @@ export interface ToggleButtonGroupClasses {

Toolbar/toolbarClasses.d.ts

@@ -0,0 +0,0 @@ export interface ToolbarClasses {

Tooltip/tooltipClasses.d.ts

@@ -0,0 +0,0 @@ export interface TooltipClasses {

transitions/index.d.ts

 export * from './transition';

transitions/transition.d.ts

@@ -0,0 +0,0 @@ import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';

transitions/utils.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

Typography/typographyClasses.d.ts

@@ -0,0 +0,0 @@ export interface TypographyClasses {

useAutocomplete/useAutocomplete.d.ts

@@ -1,334 +0,16 @@
-import * as React from 'react';
-
-export interface CreateFilterOptionsConfig<T> {
-  ignoreAccents?: boolean;
-  ignoreCase?: boolean;
-  limit?: number;
-  matchFrom?: 'any' | 'start';
-  stringify?: (option: T) => string;
-  trim?: boolean;
-}
-
-export interface FilterOptionsState<T> {
-  inputValue: string;
-  getOptionLabel: (option: T) => string;
-}
-
-export interface AutocompleteGroupedOption<T = string> {
-  key: number;
-  index: number;
-  group: string;
-  options: T[];
-}
-
-export function createFilterOptions<T>(
-  config?: CreateFilterOptionsConfig<T>,
-): (options: T[], state: FilterOptionsState<T>) => T[];
-
-export type AutocompleteFreeSoloValueMapping<FreeSolo> = FreeSolo extends true ? string : never;
-
-export type Value<T, Multiple, DisableClearable, FreeSolo> = Multiple extends undefined | false
-  ? DisableClearable extends true
-    ? NonNullable<T | AutocompleteFreeSoloValueMapping<FreeSolo>>
-    : T | null | AutocompleteFreeSoloValueMapping<FreeSolo>
-  : Array<T | AutocompleteFreeSoloValueMapping<FreeSolo>>;
-
-export interface UseAutocompleteProps<
-  T,
-  Multiple extends boolean | undefined,
-  DisableClearable extends boolean | undefined,
-  FreeSolo extends boolean | undefined,
-> {
-  /**
-   * If `true`, the portion of the selected suggestion that has not been typed by the user,
-   * known as the completion string, appears inline after the input cursor in the textbox.
-   * The inline completion string is visually highlighted and has a selected state.
-   * @default false
-   */
-  autoComplete?: boolean;
-  /**
-   * If `true`, the first option is automatically highlighted.
-   * @default false
-   */
-  autoHighlight?: boolean;
-  /**
-   * If `true`, the selected option becomes the value of the input
-   * when the Autocomplete loses focus unless the user chooses
-   * a different option or changes the character string in the input.
-   * @default false
-   */
-  autoSelect?: boolean;
-  /**
-   * Control if the input should be blurred when an option is selected:
-   *
-   * - `false` the input is not blurred.
-   * - `true` the input is always blurred.
-   * - `touch` the input is blurred after a touch event.
-   * - `mouse` the input is blurred after a mouse event.
-   * @default false
-   */
-  blurOnSelect?: 'touch' | 'mouse' | true | false;
-  /**
-   * If `true`, the input's text is cleared on blur if no value is selected.
-   *
-   * Set to `true` if you want to help the user enter a new value.
-   * Set to `false` if you want to help the user resume his search.
-   * @default !props.freeSolo
-   */
-  clearOnBlur?: boolean;
-  /**
-   * If `true`, clear all values when the user presses escape and the popup is closed.
-   * @default false
-   */
-  clearOnEscape?: boolean;
-  /**
-   * The component name that is using this hook. Used for warnings.
-   */
-  componentName?: string;
-  /**
-   * If `true`, the input can't be cleared.
-   * @default false
-   */
-  disableClearable?: DisableClearable;
-  /**
-   * If `true`, the popup won't close when a value is selected.
-   * @default false
-   */
-  disableCloseOnSelect?: boolean;
-  /**
-   * If `true`, will allow focus on disabled items.
-   * @default false
-   */
-  disabledItemsFocusable?: boolean;
-  /**
-   * If `true`, the list box in the popup will not wrap focus.
-   * @default false
-   */
-  disableListWrap?: boolean;
-  /**
-   * A filter function that determines the options that are eligible.
-   *
-   * @param {T[]} options The options to render.
-   * @param {object} state The state of the component.
-   * @returns {T[]}
-   */
-  filterOptions?: (options: T[], state: FilterOptionsState<T>) => T[];
-  /**
-   * If `true`, hide the selected options from the list box.
-   * @default false
-   */
-  filterSelectedOptions?: boolean;
-  /**
-   * If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options.
-   * @default false
-   */
-  freeSolo?: FreeSolo;
-  /**
-   * Used to determine the disabled state for a given option.
-   *
-   * @param {T} option The option to test.
-   * @returns {boolean}
-   */
-  getOptionDisabled?: (option: T) => boolean;
-  /**
-   * Used to determine the string value for a given option.
-   * It's used to fill the input (and the list box options if `renderOption` is not provided).
-   *
-   * @param {T} option
-   * @returns {string}
-   * @default (option) => option.label ?? option
-   */
-  getOptionLabel?: (option: T) => string;
-  /**
-   * Used to determine if the option represents the given value.
-   * Uses strict equality by default.
-   * ⚠️ Both arguments need to be handled, an option can only match with one value.
-   *
-   * @param {T} option The option to test.
-   * @param {T} value The value to test against.
-   * @returns {boolean}
-   */
-  isOptionEqualToValue?: (option: T, value: T) => boolean;
-  /**
-   * If provided, the options will be grouped under the returned string.
-   * The groupBy value is also used as the text for group headings when `renderGroup` is not provided.
-   *
-   * @param {T} options The options to group.
-   * @returns {string}
-   */
-  groupBy?: (option: T) => string;
-  /**
-   * If `true`, the component handles the "Home" and "End" keys when the popup is open.
-   * It should move focus to the first option and last option, respectively.
-   * @default !props.freeSolo
-   */
-  handleHomeEndKeys?: boolean;
-  /**
-   * This prop is used to help implement the accessibility logic.
-   * If you don't provide an id it will fall back to a randomly generated one.
-   */
-  id?: string;
-  /**
-   * If `true`, the highlight can move to the input.
-   * @default false
-   */
-  includeInputInList?: boolean;
-  /**
-   * The input value.
-   */
-  inputValue?: string;
-  /**
-   * Callback fired when the popup requests to be closed.
-   * Use in controlled mode (see open).
-   *
-   * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {string} reason Can be: `"toggleInput"`, `"escape"`, `"selectOption"`, `"removeOption"`, `"blur"`.
-   */
-  onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => void;
-  /**
-   * Callback fired when the input value changes.
-   *
-   * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {string} value The new value of the text input.
-   * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`.
-   */
-  onInputChange?: (
-    event: React.SyntheticEvent,
-    value: string,
-    reason: AutocompleteInputChangeReason,
-  ) => void;
-  /**
-   * Callback fired when the popup requests to be opened.
-   * Use in controlled mode (see open).
-   *
-   * @param {React.SyntheticEvent} event The event source of the callback.
-   */
-  onOpen?: (event: React.SyntheticEvent) => void;
-  /**
-   * Callback fired when the highlight option changes.
-   *
-   * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {T} option The highlighted option.
-   * @param {string} reason Can be: `"keyboard"`, `"auto"`, `"mouse"`.
-   */
-  onHighlightChange?: (
-    event: React.SyntheticEvent,
-    option: T | null,
-    reason: AutocompleteHighlightChangeReason,
-  ) => void;
-  /**
-   * If `true`, the component is shown.
-   */
-  open?: boolean;
-  /**
-   * If `true`, the popup will open on input focus.
-   * @default false
-   */
-  openOnFocus?: boolean;
-  /**
-   * Array of options.
-   */
-  options: ReadonlyArray<T>;
-  /**
-   * If `true`, the input's text is selected on focus.
-   * It helps the user clear the selected value.
-   * @default !props.freeSolo
-   */
-  selectOnFocus?: boolean;
-  /**
-   * If `true`, `value` must be an array and the menu will support multiple selections.
-   * @default false
-   */
-  multiple?: Multiple;
-  /**
-   * The value of the autocomplete.
-   *
-   * The value must have reference equality with the option in order to be selected.
-   * You can customize the equality behavior with the `isOptionEqualToValue` prop.
-   */
-  value?: Value<T, Multiple, DisableClearable, FreeSolo>;
-  /**
-   * The default value. Use when the component is not controlled.
-   * @default props.multiple ? [] : null
-   */
-  defaultValue?: Value<T, Multiple, DisableClearable, FreeSolo>;
-  /**
-   * Callback fired when the value changes.
-   *
-   * @param {React.SyntheticEvent} event The event source of the callback.
-   * @param {T|T[]} value The new value of the component.
-   * @param {string} reason One of "createOption", "selectOption", "removeOption", "blur" or "clear".
-   * @param {string} [details]
-   */
-  onChange?: (
-    event: React.SyntheticEvent,
-    value: Value<T, Multiple, DisableClearable, FreeSolo>,
-    reason: AutocompleteChangeReason,
-    details?: AutocompleteChangeDetails<T>,
-  ) => void;
-}
-
-export type AutocompleteHighlightChangeReason = 'keyboard' | 'mouse' | 'auto';
-
-export type AutocompleteChangeReason =
-  | 'createOption'
-  | 'selectOption'
-  | 'removeOption'
-  | 'clear'
-  | 'blur';
-export interface AutocompleteChangeDetails<T = string> {
-  option: T;
-}
-export type AutocompleteCloseReason =
-  | 'createOption'
-  | 'toggleInput'
-  | 'escape'
-  | 'selectOption'
-  | 'removeOption'
-  | 'blur';
-export type AutocompleteInputChangeReason = 'input' | 'reset' | 'clear';
-
-export type AutocompleteGetTagProps = ({ index }: { index: number }) => {
-  key: number;
-  'data-tag-index': number;
-  tabIndex: -1;
-  onDelete: (event: any) => void;
-};
-
-export default function useAutocomplete<
-  T,
-  Multiple extends boolean | undefined = undefined,
-  DisableClearable extends boolean | undefined = undefined,
-  FreeSolo extends boolean | undefined = undefined,
->(
-  props: UseAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>,
-): {
-  getRootProps: () => React.HTMLAttributes<HTMLDivElement>;
-  getInputProps: () => React.HTMLAttributes<HTMLInputElement>;
-  // We pass `getInputLabelProps()` to `@material-ui/core/InputLabel` which does not implement HTMLLabelElement#color.
-  getInputLabelProps: () => Omit<React.HTMLAttributes<HTMLLabelElement>, 'color'>;
-  getClearProps: () => React.HTMLAttributes<HTMLDivElement>;
-  getPopupIndicatorProps: () => React.HTMLAttributes<HTMLDivElement>;
-  getTagProps: AutocompleteGetTagProps;
-  getListboxProps: () => React.HTMLAttributes<HTMLUListElement>;
-  getOptionProps: ({
-    option,
-    index,
-  }: {
-    option: T;
-    index: number;
-  }) => React.HTMLAttributes<HTMLLIElement>;
-  id: string;
-  inputValue: string;
-  value: Value<T, Multiple, DisableClearable, FreeSolo>;
-  dirty: boolean;
-  popupOpen: boolean;
-  focused: boolean;
-  anchorEl: null | HTMLElement;
-  setAnchorEl: () => void;
-  focusedTag: number;
-  /**
-   * The options to render. It's either `T[]` or `AutocompleteGroupedOption<T>[]` if the groupBy prop is provided.
-   */
-  groupedOptions: T[] | Array<AutocompleteGroupedOption<T>>;
-};
+export {
+  useAutocomplete as default,
+  AutocompleteChangeDetails,
+  AutocompleteChangeReason,
+  AutocompleteCloseReason,
+  AutocompleteFreeSoloValueMapping,
+  AutocompleteGetTagProps,
+  AutocompleteGroupedOption,
+  AutocompleteHighlightChangeReason,
+  AutocompleteInputChangeReason,
+  AutocompleteValue as Value,
+  createFilterOptions,
+  CreateFilterOptionsConfig,
+  FilterOptionsState,
+  UseAutocompleteProps,
+} from '@material-ui/unstyled/AutocompleteUnstyled';

useAutocomplete/useAutocomplete.js

@@ -1,1018 +0,2 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
-/* eslint-disable no-constant-condition */
-import * as React from 'react';
-import { setRef, useEventCallback, useControlled, unstable_useId as useId } from '../utils'; // https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript
-// Give up on IE11 support for this feature
-
-function stripDiacritics(string) {
-  return typeof string.normalize !== 'undefined' ? string.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : string;
-}
-
-export function createFilterOptions(config = {}) {
-  const {
-    ignoreAccents = true,
-    ignoreCase = true,
-    limit,
-    matchFrom = 'any',
-    stringify,
-    trim = false
-  } = config;
-  return (options, {
-    inputValue,
-    getOptionLabel
-  }) => {
-    let input = trim ? inputValue.trim() : inputValue;
-
-    if (ignoreCase) {
-      input = input.toLowerCase();
-    }
-
-    if (ignoreAccents) {
-      input = stripDiacritics(input);
-    }
-
-    const filteredOptions = options.filter(option => {
-      let candidate = (stringify || getOptionLabel)(option);
-
-      if (ignoreCase) {
-        candidate = candidate.toLowerCase();
-      }
-
-      if (ignoreAccents) {
-        candidate = stripDiacritics(candidate);
-      }
-
-      return matchFrom === 'start' ? candidate.indexOf(input) === 0 : candidate.indexOf(input) > -1;
-    });
-    return typeof limit === 'number' ? filteredOptions.slice(0, limit) : filteredOptions;
-  };
-} // To replace with .findIndex() once we stop IE11 support.
-
-function findIndex(array, comp) {
-  for (let i = 0; i < array.length; i += 1) {
-    if (comp(array[i])) {
-      return i;
-    }
-  }
-
-  return -1;
-}
-
-const defaultFilterOptions = createFilterOptions(); // Number of options to jump in list box when pageup and pagedown keys are used.
-
-const pageSize = 5;
-export default function useAutocomplete(props) {
-  const {
-    autoComplete = false,
-    autoHighlight = false,
-    autoSelect = false,
-    blurOnSelect = false,
-    disabled: disabledProp,
-    clearOnBlur = !props.freeSolo,
-    clearOnEscape = false,
-    componentName = 'useAutocomplete',
-    defaultValue = props.multiple ? [] : null,
-    disableClearable = false,
-    disableCloseOnSelect = false,
-    disabledItemsFocusable = false,
-    disableListWrap = false,
-    filterOptions = defaultFilterOptions,
-    filterSelectedOptions = false,
-    freeSolo = false,
-    getOptionDisabled,
-    getOptionLabel: getOptionLabelProp = option => {
-      var _option$label;
-
-      return (_option$label = option.label) != null ? _option$label : option;
-    },
-    isOptionEqualToValue = (option, value) => option === value,
-    groupBy,
-    handleHomeEndKeys = !props.freeSolo,
-    id: idProp,
-    includeInputInList = false,
-    inputValue: inputValueProp,
-    multiple = false,
-    onChange,
-    onClose,
-    onHighlightChange,
-    onInputChange,
-    onOpen,
-    open: openProp,
-    openOnFocus = false,
-    options,
-    selectOnFocus = !props.freeSolo,
-    value: valueProp
-  } = props;
-  const id = useId(idProp);
-  let getOptionLabel = getOptionLabelProp;
-
-  getOptionLabel = option => {
-    const optionLabel = getOptionLabelProp(option);
-
-    if (typeof optionLabel !== 'string') {
-      if (process.env.NODE_ENV !== 'production') {
-        const erroneousReturn = optionLabel === undefined ? 'undefined' : `${typeof optionLabel} (${optionLabel})`;
-        console.error(`Material-UI: The \`getOptionLabel\` method of ${componentName} returned ${erroneousReturn} instead of a string for ${JSON.stringify(option)}.`);
-      }
-
-      return String(optionLabel);
-    }
-
-    return optionLabel;
-  };
-
-  const ignoreFocus = React.useRef(false);
-  const firstFocus = React.useRef(true);
-  const inputRef = React.useRef(null);
-  const listboxRef = React.useRef(null);
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const [focusedTag, setFocusedTag] = React.useState(-1);
-  const defaultHighlighted = autoHighlight ? 0 : -1;
-  const highlightedIndexRef = React.useRef(defaultHighlighted);
-  const [value, setValueState] = useControlled({
-    controlled: valueProp,
-    default: defaultValue,
-    name: componentName
-  });
-  const [inputValue, setInputValueState] = useControlled({
-    controlled: inputValueProp,
-    default: '',
-    name: componentName,
-    state: 'inputValue'
-  });
-  const [focused, setFocused] = React.useState(false);
-  const resetInputValue = React.useCallback((event, newValue) => {
-    let newInputValue;
-
-    if (multiple) {
-      newInputValue = '';
-    } else if (newValue == null) {
-      newInputValue = '';
-    } else {
-      const optionLabel = getOptionLabel(newValue);
-      newInputValue = typeof optionLabel === 'string' ? optionLabel : '';
-    }
-
-    if (inputValue === newInputValue) {
-      return;
-    }
-
-    setInputValueState(newInputValue);
-
-    if (onInputChange) {
-      onInputChange(event, newInputValue, 'reset');
-    }
-  }, [getOptionLabel, inputValue, multiple, onInputChange, setInputValueState]);
-  const prevValue = React.useRef();
-  React.useEffect(() => {
-    const valueChange = value !== prevValue.current;
-    prevValue.current = value;
-
-    if (focused && !valueChange) {
-      return;
-    }
-
-    resetInputValue(null, value);
-  }, [value, resetInputValue, focused, prevValue]);
-  const [open, setOpenState] = useControlled({
-    controlled: openProp,
-    default: false,
-    name: componentName,
-    state: 'open'
-  });
-  const [inputPristine, setInputPristine] = React.useState(true);
-  const inputValueIsSelectedValue = !multiple && value != null && inputValue === getOptionLabel(value);
-  const popupOpen = open;
-  const filteredOptions = popupOpen ? filterOptions(options.filter(option => {
-    if (filterSelectedOptions && (multiple ? value : [value]).some(value2 => value2 !== null && isOptionEqualToValue(option, value2))) {
-      return false;
-    }
-
-    return true;
-  }), // we use the empty string to manipulate `filterOptions` to not filter any options
-  // i.e. the filter predicate always returns true
-  {
-    inputValue: inputValueIsSelectedValue && inputPristine ? '' : inputValue,
-    getOptionLabel
-  }) : [];
-  const listboxAvailable = open && filteredOptions.length > 0;
-
-  if (process.env.NODE_ENV !== 'production') {
-    if (value !== null && !freeSolo && options.length > 0) {
-      const missingValue = (multiple ? value : [value]).filter(value2 => !options.some(option => isOptionEqualToValue(option, value2)));
-
-      if (missingValue.length > 0) {
-        console.warn([`Material-UI: The value provided to ${componentName} is invalid.`, `None of the options match with \`${missingValue.length > 1 ? JSON.stringify(missingValue) : JSON.stringify(missingValue[0])}\`.`, 'You can use the `isOptionEqualToValue` prop to customize the equality test.'].join('\n'));
-      }
-    }
-  }
-
-  const focusTag = useEventCallback(tagToFocus => {
-    if (tagToFocus === -1) {
-      inputRef.current.focus();
-    } else {
-      anchorEl.querySelector(`[data-tag-index="${tagToFocus}"]`).focus();
-    }
-  }); // Ensure the focusedTag is never inconsistent
-
-  React.useEffect(() => {
-    if (multiple && focusedTag > value.length - 1) {
-      setFocusedTag(-1);
-      focusTag(-1);
-    }
-  }, [value, multiple, focusedTag, focusTag]);
-
-  function validOptionIndex(index, direction) {
-    if (!listboxRef.current || index === -1) {
-      return -1;
-    }
-
-    let nextFocus = index;
-
-    while (true) {
-      // Out of range
-      if (direction === 'next' && nextFocus === filteredOptions.length || direction === 'previous' && nextFocus === -1) {
-        return -1;
-      }
-
-      const option = listboxRef.current.querySelector(`[data-option-index="${nextFocus}"]`); // Same logic as MenuList.js
-
-      const nextFocusDisabled = disabledItemsFocusable ? false : !option || option.disabled || option.getAttribute('aria-disabled') === 'true';
-
-      if (option && !option.hasAttribute('tabindex') || nextFocusDisabled) {
-        // Move to the next element.
-        nextFocus += direction === 'next' ? 1 : -1;
-      } else {
-        return nextFocus;
-      }
-    }
-  }
-
-  const setHighlightedIndex = useEventCallback(({
-    event,
-    index,
-    reason = 'auto'
-  }) => {
-    highlightedIndexRef.current = index; // does the index exist?
-
-    if (index === -1) {
-      inputRef.current.removeAttribute('aria-activedescendant');
-    } else {
-      inputRef.current.setAttribute('aria-activedescendant', `${id}-option-${index}`);
-    }
-
-    if (onHighlightChange) {
-      onHighlightChange(event, index === -1 ? null : filteredOptions[index], reason);
-    }
-
-    if (!listboxRef.current) {
-      return;
-    }
-
-    const prev = listboxRef.current.querySelector('[role="option"].Mui-focused');
-
-    if (prev) {
-      prev.classList.remove('Mui-focused');
-      prev.classList.remove('Mui-focusVisible');
-    }
-
-    const listboxNode = listboxRef.current.parentElement.querySelector('[role="listbox"]'); // "No results"
-
-    if (!listboxNode) {
-      return;
-    }
-
-    if (index === -1) {
-      listboxNode.scrollTop = 0;
-      return;
-    }
-
-    const option = listboxRef.current.querySelector(`[data-option-index="${index}"]`);
-
-    if (!option) {
-      return;
-    }
-
-    option.classList.add('Mui-focused');
-
-    if (reason === 'keyboard') {
-      option.classList.add('Mui-focusVisible');
-    } // Scroll active descendant into view.
-    // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
-    //
-    // Consider this API instead once it has a better browser support:
-    // .scrollIntoView({ scrollMode: 'if-needed', block: 'nearest' });
-
-
-    if (listboxNode.scrollHeight > listboxNode.clientHeight && reason !== 'mouse') {
-      const element = option;
-      const scrollBottom = listboxNode.clientHeight + listboxNode.scrollTop;
-      const elementBottom = element.offsetTop + element.offsetHeight;
-
-      if (elementBottom > scrollBottom) {
-        listboxNode.scrollTop = elementBottom - listboxNode.clientHeight;
-      } else if (element.offsetTop - element.offsetHeight * (groupBy ? 1.3 : 0) < listboxNode.scrollTop) {
-        listboxNode.scrollTop = element.offsetTop - element.offsetHeight * (groupBy ? 1.3 : 0);
-      }
-    }
-  });
-  const changeHighlightedIndex = useEventCallback(({
-    event,
-    diff,
-    direction = 'next',
-    reason = 'auto'
-  }) => {
-    if (!popupOpen) {
-      return;
-    }
-
-    const getNextIndex = () => {
-      const maxIndex = filteredOptions.length - 1;
-
-      if (diff === 'reset') {
-        return defaultHighlighted;
-      }
-
-      if (diff === 'start') {
-        return 0;
-      }
-
-      if (diff === 'end') {
-        return maxIndex;
-      }
-
-      const newIndex = highlightedIndexRef.current + diff;
-
-      if (newIndex < 0) {
-        if (newIndex === -1 && includeInputInList) {
-          return -1;
-        }
-
-        if (disableListWrap && highlightedIndexRef.current !== -1 || Math.abs(diff) > 1) {
-          return 0;
-        }
-
-        return maxIndex;
-      }
-
-      if (newIndex > maxIndex) {
-        if (newIndex === maxIndex + 1 && includeInputInList) {
-          return -1;
-        }
-
-        if (disableListWrap || Math.abs(diff) > 1) {
-          return maxIndex;
-        }
-
-        return 0;
-      }
-
-      return newIndex;
-    };
-
-    const nextIndex = validOptionIndex(getNextIndex(), direction);
-    setHighlightedIndex({
-      index: nextIndex,
-      reason,
-      event
-    }); // Sync the content of the input with the highlighted option.
-
-    if (autoComplete && diff !== 'reset') {
-      if (nextIndex === -1) {
-        inputRef.current.value = inputValue;
-      } else {
-        const option = getOptionLabel(filteredOptions[nextIndex]);
-        inputRef.current.value = option; // The portion of the selected suggestion that has not been typed by the user,
-        // a completion string, appears inline after the input cursor in the textbox.
-
-        const index = option.toLowerCase().indexOf(inputValue.toLowerCase());
-
-        if (index === 0 && inputValue.length > 0) {
-          inputRef.current.setSelectionRange(inputValue.length, option.length);
-        }
-      }
-    }
-  });
-  const syncHighlightedIndex = React.useCallback(() => {
-    if (!popupOpen) {
-      return;
-    }
-
-    const valueItem = multiple ? value[0] : value; // The popup is empty, reset
-
-    if (filteredOptions.length === 0 || valueItem == null) {
-      changeHighlightedIndex({
-        diff: 'reset'
-      });
-      return;
-    }
-
-    if (!listboxRef.current) {
-      return;
-    } // Synchronize the value with the highlighted index
-
-
-    if (valueItem != null) {
-      const currentOption = filteredOptions[highlightedIndexRef.current]; // Keep the current highlighted index if possible
-
-      if (multiple && currentOption && findIndex(value, val => isOptionEqualToValue(currentOption, val)) !== -1) {
-        return;
-      }
-
-      const itemIndex = findIndex(filteredOptions, optionItem => isOptionEqualToValue(optionItem, valueItem));
-
-      if (itemIndex === -1) {
-        changeHighlightedIndex({
-          diff: 'reset'
-        });
-      } else {
-        setHighlightedIndex({
-          index: itemIndex
-        });
-      }
-
-      return;
-    } // Prevent the highlighted index to leak outside the boundaries.
-
-
-    if (highlightedIndexRef.current >= filteredOptions.length - 1) {
-      setHighlightedIndex({
-        index: filteredOptions.length - 1
-      });
-      return;
-    } // Restore the focus to the previous index.
-
-
-    setHighlightedIndex({
-      index: highlightedIndexRef.current
-    }); // Ignore filteredOptions (and options, isOptionEqualToValue, getOptionLabel) not to break the scroll position
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [// Only sync the highlighted index when the option switch between empty and not
-  filteredOptions.length, // Don't sync the highlighted index with the value when multiple
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  multiple ? false : value, filterSelectedOptions, changeHighlightedIndex, setHighlightedIndex, popupOpen, inputValue, multiple]);
-  const handleListboxRef = useEventCallback(node => {
-    setRef(listboxRef, node);
-
-    if (!node) {
-      return;
-    }
-
-    syncHighlightedIndex();
-  });
-
-  if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useEffect(() => {
-      if (!inputRef.current || inputRef.current.nodeName !== 'INPUT') {
-        console.error([`Material-UI: Unable to find the input element. It was resolved to ${inputRef.current} while an HTMLInputElement was expected.`, `Instead, ${componentName} expects an input element.`, '', componentName === 'useAutocomplete' ? 'Make sure you have binded getInputProps correctly and that the normal ref/effect resolutions order is guaranteed.' : 'Make sure you have customized the input component correctly.'].join('\n'));
-      }
-    }, [componentName]);
-  }
-
-  React.useEffect(() => {
-    syncHighlightedIndex();
-  }, [syncHighlightedIndex]);
-
-  const handleOpen = event => {
-    if (open) {
-      return;
-    }
-
-    setOpenState(true);
-    setInputPristine(true);
-
-    if (onOpen) {
-      onOpen(event);
-    }
-  };
-
-  const handleClose = (event, reason) => {
-    if (!open) {
-      return;
-    }
-
-    setOpenState(false);
-
-    if (onClose) {
-      onClose(event, reason);
-    }
-  };
-
-  const handleValue = (event, newValue, reason, details) => {
-    if (value === newValue) {
-      return;
-    }
-
-    if (onChange) {
-      onChange(event, newValue, reason, details);
-    }
-
-    setValueState(newValue);
-  };
-
-  const isTouch = React.useRef(false);
-
-  const selectNewValue = (event, option, reasonProp = 'selectOption', origin = 'options') => {
-    let reason = reasonProp;
-    let newValue = option;
-
-    if (multiple) {
-      newValue = Array.isArray(value) ? value.slice() : [];
-
-      if (process.env.NODE_ENV !== 'production') {
-        const matches = newValue.filter(val => isOptionEqualToValue(option, val));
-
-        if (matches.length > 1) {
-          console.error([`Material-UI: The \`isOptionEqualToValue\` method of ${componentName} do not handle the arguments correctly.`, `The component expects a single value to match a given option but found ${matches.length} matches.`].join('\n'));
-        }
-      }
-
-      const itemIndex = findIndex(newValue, valueItem => isOptionEqualToValue(option, valueItem));
-
-      if (itemIndex === -1) {
-        newValue.push(option);
-      } else if (origin !== 'freeSolo') {
-        newValue.splice(itemIndex, 1);
-        reason = 'removeOption';
-      }
-    }
-
-    resetInputValue(event, newValue);
-    handleValue(event, newValue, reason, {
-      option
-    });
-
-    if (!disableCloseOnSelect && !event.ctrlKey && !event.metaKey) {
-      handleClose(event, reason);
-    }
-
-    if (blurOnSelect === true || blurOnSelect === 'touch' && isTouch.current || blurOnSelect === 'mouse' && !isTouch.current) {
-      inputRef.current.blur();
-    }
-  };
-
-  function validTagIndex(index, direction) {
-    if (index === -1) {
-      return -1;
-    }
-
-    let nextFocus = index;
-
-    while (true) {
-      // Out of range
-      if (direction === 'next' && nextFocus === value.length || direction === 'previous' && nextFocus === -1) {
-        return -1;
-      }
-
-      const option = anchorEl.querySelector(`[data-tag-index="${nextFocus}"]`); // Same logic as MenuList.js
-
-      if (!option || !option.hasAttribute('tabindex') || option.disabled || option.getAttribute('aria-disabled') === 'true') {
-        nextFocus += direction === 'next' ? 1 : -1;
-      } else {
-        return nextFocus;
-      }
-    }
-  }
-
-  const handleFocusTag = (event, direction) => {
-    if (!multiple) {
-      return;
-    }
-
-    handleClose(event, 'toggleInput');
-    let nextTag = focusedTag;
-
-    if (focusedTag === -1) {
-      if (inputValue === '' && direction === 'previous') {
-        nextTag = value.length - 1;
-      }
-    } else {
-      nextTag += direction === 'next' ? 1 : -1;
-
-      if (nextTag < 0) {
-        nextTag = 0;
-      }
-
-      if (nextTag === value.length) {
-        nextTag = -1;
-      }
-    }
-
-    nextTag = validTagIndex(nextTag, direction);
-    setFocusedTag(nextTag);
-    focusTag(nextTag);
-  };
-
-  const handleClear = event => {
-    ignoreFocus.current = true;
-    setInputValueState('');
-
-    if (onInputChange) {
-      onInputChange(event, '', 'clear');
-    }
-
-    handleValue(event, multiple ? [] : null, 'clear');
-  };
-
-  const handleKeyDown = other => event => {
-    if (other.onKeyDown) {
-      other.onKeyDown(event);
-    }
-
-    if (event.defaultMuiPrevented) {
-      return;
-    }
-
-    if (focusedTag !== -1 && ['ArrowLeft', 'ArrowRight'].indexOf(event.key) === -1) {
-      setFocusedTag(-1);
-      focusTag(-1);
-    } // Wait until IME is settled.
-
-
-    if (event.which !== 229) {
-      switch (event.key) {
-        case 'Home':
-          if (popupOpen && handleHomeEndKeys) {
-            // Prevent scroll of the page
-            event.preventDefault();
-            changeHighlightedIndex({
-              diff: 'start',
-              direction: 'next',
-              reason: 'keyboard',
-              event
-            });
-          }
-
-          break;
-
-        case 'End':
-          if (popupOpen && handleHomeEndKeys) {
-            // Prevent scroll of the page
-            event.preventDefault();
-            changeHighlightedIndex({
-              diff: 'end',
-              direction: 'previous',
-              reason: 'keyboard',
-              event
-            });
-          }
-
-          break;
-
-        case 'PageUp':
-          // Prevent scroll of the page
-          event.preventDefault();
-          changeHighlightedIndex({
-            diff: -pageSize,
-            direction: 'previous',
-            reason: 'keyboard',
-            event
-          });
-          handleOpen(event);
-          break;
-
-        case 'PageDown':
-          // Prevent scroll of the page
-          event.preventDefault();
-          changeHighlightedIndex({
-            diff: pageSize,
-            direction: 'next',
-            reason: 'keyboard',
-            event
-          });
-          handleOpen(event);
-          break;
-
-        case 'ArrowDown':
-          // Prevent cursor move
-          event.preventDefault();
-          changeHighlightedIndex({
-            diff: 1,
-            direction: 'next',
-            reason: 'keyboard',
-            event
-          });
-          handleOpen(event);
-          break;
-
-        case 'ArrowUp':
-          // Prevent cursor move
-          event.preventDefault();
-          changeHighlightedIndex({
-            diff: -1,
-            direction: 'previous',
-            reason: 'keyboard',
-            event
-          });
-          handleOpen(event);
-          break;
-
-        case 'ArrowLeft':
-          handleFocusTag(event, 'previous');
-          break;
-
-        case 'ArrowRight':
-          handleFocusTag(event, 'next');
-          break;
-
-        case 'Enter':
-          if (highlightedIndexRef.current !== -1 && popupOpen) {
-            const option = filteredOptions[highlightedIndexRef.current];
-            const disabled = getOptionDisabled ? getOptionDisabled(option) : false; // Avoid early form validation, let the end-users continue filling the form.
-
-            event.preventDefault();
-
-            if (disabled) {
-              return;
-            }
-
-            selectNewValue(event, option, 'selectOption'); // Move the selection to the end.
-
-            if (autoComplete) {
-              inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
-            }
-          } else if (freeSolo && inputValue !== '' && inputValueIsSelectedValue === false) {
-            if (multiple) {
-              // Allow people to add new values before they submit the form.
-              event.preventDefault();
-            }
-
-            selectNewValue(event, inputValue, 'createOption', 'freeSolo');
-          }
-
-          break;
-
-        case 'Escape':
-          if (popupOpen) {
-            // Avoid Opera to exit fullscreen mode.
-            event.preventDefault(); // Avoid the Modal to handle the event.
-
-            event.stopPropagation();
-            handleClose(event, 'escape');
-          } else if (clearOnEscape && (inputValue !== '' || multiple && value.length > 0)) {
-            // Avoid Opera to exit fullscreen mode.
-            event.preventDefault(); // Avoid the Modal to handle the event.
-
-            event.stopPropagation();
-            handleClear(event);
-          }
-
-          break;
-
-        case 'Backspace':
-          if (multiple && inputValue === '' && value.length > 0) {
-            const index = focusedTag === -1 ? value.length - 1 : focusedTag;
-            const newValue = value.slice();
-            newValue.splice(index, 1);
-            handleValue(event, newValue, 'removeOption', {
-              option: value[index]
-            });
-          }
-
-          break;
-
-        default:
-      }
-    }
-  };
-
-  const handleFocus = event => {
-    setFocused(true);
-
-    if (openOnFocus && !ignoreFocus.current) {
-      handleOpen(event);
-    }
-  };
-
-  const handleBlur = event => {
-    // Ignore the event when using the scrollbar with IE11
-    if (listboxRef.current !== null && listboxRef.current.parentElement.contains(document.activeElement)) {
-      inputRef.current.focus();
-      return;
-    }
-
-    setFocused(false);
-    firstFocus.current = true;
-    ignoreFocus.current = false;
-
-    if (autoSelect && highlightedIndexRef.current !== -1 && popupOpen) {
-      selectNewValue(event, filteredOptions[highlightedIndexRef.current], 'blur');
-    } else if (autoSelect && freeSolo && inputValue !== '') {
-      selectNewValue(event, inputValue, 'blur', 'freeSolo');
-    } else if (clearOnBlur) {
-      resetInputValue(event, value);
-    }
-
-    handleClose(event, 'blur');
-  };
-
-  const handleInputChange = event => {
-    const newValue = event.target.value;
-
-    if (inputValue !== newValue) {
-      setInputValueState(newValue);
-      setInputPristine(false);
-
-      if (onInputChange) {
-        onInputChange(event, newValue, 'input');
-      }
-    }
-
-    if (newValue === '') {
-      if (!disableClearable && !multiple) {
-        handleValue(event, null, 'clear');
-      }
-    } else {
-      handleOpen(event);
-    }
-  };
-
-  const handleOptionMouseOver = event => {
-    setHighlightedIndex({
-      event,
-      index: Number(event.currentTarget.getAttribute('data-option-index')),
-      reason: 'mouse'
-    });
-  };
-
-  const handleOptionTouchStart = () => {
-    isTouch.current = true;
-  };
-
-  const handleOptionClick = event => {
-    const index = Number(event.currentTarget.getAttribute('data-option-index'));
-    selectNewValue(event, filteredOptions[index], 'selectOption');
-    isTouch.current = false;
-  };
-
-  const handleTagDelete = index => event => {
-    const newValue = value.slice();
-    newValue.splice(index, 1);
-    handleValue(event, newValue, 'removeOption', {
-      option: value[index]
-    });
-  };
-
-  const handlePopupIndicator = event => {
-    if (open) {
-      handleClose(event, 'toggleInput');
-    } else {
-      handleOpen(event);
-    }
-  }; // Prevent input blur when interacting with the combobox
-
-
-  const handleMouseDown = event => {
-    if (event.target.getAttribute('id') !== id) {
-      event.preventDefault();
-    }
-  }; // Focus the input when interacting with the combobox
-
-
-  const handleClick = () => {
-    inputRef.current.focus();
-
-    if (selectOnFocus && firstFocus.current && inputRef.current.selectionEnd - inputRef.current.selectionStart === 0) {
-      inputRef.current.select();
-    }
-
-    firstFocus.current = false;
-  };
-
-  const handleInputMouseDown = event => {
-    if (inputValue === '' || !open) {
-      handlePopupIndicator(event);
-    }
-  };
-
-  let dirty = freeSolo && inputValue.length > 0;
-  dirty = dirty || (multiple ? value.length > 0 : value !== null);
-  let groupedOptions = filteredOptions;
-
-  if (groupBy) {
-    // used to keep track of key and indexes in the result array
-    const indexBy = new Map();
-    let warn = false;
-    groupedOptions = filteredOptions.reduce((acc, option, index) => {
-      const group = groupBy(option);
-
-      if (acc.length > 0 && acc[acc.length - 1].group === group) {
-        acc[acc.length - 1].options.push(option);
-      } else {
-        if (process.env.NODE_ENV !== 'production') {
-          if (indexBy.get(group) && !warn) {
-            console.warn(`Material-UI: The options provided combined with the \`groupBy\` method of ${componentName} returns duplicated headers.`, 'You can solve the issue by sorting the options with the output of `groupBy`.');
-            warn = true;
-          }
-
-          indexBy.set(group, true);
-        }
-
-        acc.push({
-          key: index,
-          index,
-          group,
-          options: [option]
-        });
-      }
-
-      return acc;
-    }, []);
-  }
-
-  if (disabledProp && focused) {
-    handleBlur();
-  }
-
-  return {
-    getRootProps: (other = {}) => _extends({
-      'aria-owns': listboxAvailable ? `${id}-listbox` : null,
-      role: 'combobox',
-      'aria-expanded': listboxAvailable
-    }, other, {
-      onKeyDown: handleKeyDown(other),
-      onMouseDown: handleMouseDown,
-      onClick: handleClick
-    }),
-    getInputLabelProps: () => ({
-      id: `${id}-label`,
-      htmlFor: id
-    }),
-    getInputProps: () => ({
-      id,
-      value: inputValue,
-      onBlur: handleBlur,
-      onFocus: handleFocus,
-      onChange: handleInputChange,
-      onMouseDown: handleInputMouseDown,
-      // if open then this is handled imperativeley so don't let react override
-      // only have an opinion about this when closed
-      'aria-activedescendant': popupOpen ? '' : null,
-      'aria-autocomplete': autoComplete ? 'both' : 'list',
-      'aria-controls': listboxAvailable ? `${id}-listbox` : null,
-      // Disable browser's suggestion that might overlap with the popup.
-      // Handle autocomplete but not autofill.
-      autoComplete: 'off',
-      ref: inputRef,
-      autoCapitalize: 'none',
-      spellCheck: 'false'
-    }),
-    getClearProps: () => ({
-      tabIndex: -1,
-      onClick: handleClear
-    }),
-    getPopupIndicatorProps: () => ({
-      tabIndex: -1,
-      onClick: handlePopupIndicator
-    }),
-    getTagProps: ({
-      index
-    }) => ({
-      key: index,
-      'data-tag-index': index,
-      tabIndex: -1,
-      onDelete: handleTagDelete(index)
-    }),
-    getListboxProps: () => ({
-      role: 'listbox',
-      id: `${id}-listbox`,
-      'aria-labelledby': `${id}-label`,
-      ref: handleListboxRef,
-      onMouseDown: event => {
-        // Prevent blur
-        event.preventDefault();
-      }
-    }),
-    getOptionProps: ({
-      index,
-      option
-    }) => {
-      const selected = (multiple ? value : [value]).some(value2 => value2 != null && isOptionEqualToValue(option, value2));
-      const disabled = getOptionDisabled ? getOptionDisabled(option) : false;
-      return {
-        key: getOptionLabel(option),
-        tabIndex: -1,
-        role: 'option',
-        id: `${id}-option-${index}`,
-        onMouseOver: handleOptionMouseOver,
-        onClick: handleOptionClick,
-        onTouchStart: handleOptionTouchStart,
-        'data-option-index': index,
-        'aria-disabled': disabled,
-        'aria-selected': selected
-      };
-    },
-    id,
-    inputValue,
-    value,
-    dirty,
-    popupOpen,
-    focused: focused || focusedTag !== -1,
-    anchorEl,
-    setAnchorEl,
-    focusedTag,
-    groupedOptions
-  };
-}
+export { useAutocomplete as default } from '@material-ui/unstyled/AutocompleteUnstyled';
+export * from '@material-ui/unstyled/AutocompleteUnstyled';

useTouchRipple/index.d.ts

 export { default } from './useTouchRipple';

useTouchRipple/useTouchRipple.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

utils/createSvgIcon.d.ts

 import SvgIcon from '@material-ui/core/SvgIcon';
 
 export default function createSvgIcon(path: React.ReactNode, displayName: string): typeof SvgIcon;

utils/getScrollbarSize.d.ts

 import { unstable_getScrollbarSize as getScrollbarSize } from '@material-ui/utils';
 export default getScrollbarSize;

utils/ownerDocument.d.ts

 import { unstable_ownerDocument as ownerDocument } from '@material-ui/utils';
 export default ownerDocument;

utils/ownerWindow.d.ts

 import { unstable_ownerWindow as ownerWindow } from '@material-ui/utils';
 export default ownerWindow;

utils/setRef.d.ts

 import { unstable_setRef as setRef } from '@material-ui/utils';
 export default setRef;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

2615

increased by0.58%

Number of lines in readme file

185

increased by0.54%

Number of low supply chain risk alerts

884

decreased by-0.9%

Worsened metrics

Total package byte prevSize

9225972

decreased by-1.1%

Lines of code

218307

decreased by-1.39%

Dependency changes

• + Added@material-ui/system@5.0.0-beta.3(transitive)

• + Added@material-ui/types@6.0.2(transitive)

• + Added@material-ui/unstyled@5.0.0-alpha.42(transitive)

• - Removed@material-ui/system@5.0.0-beta.2(transitive)

• - Removed@material-ui/types@6.0.1(transitive)

• - Removed@material-ui/unstyled@5.0.0-alpha.41(transitive)

• Updated@material-ui/system@5.0.0-beta.3

• Updated@material-ui/types@6.0.2

• Updated@material-ui/unstyled@5.0.0-alpha.42