@material-ui/unstyled - npm Package Compare versions

Comparing version 5.0.0-alpha.43 to 5.0.0-alpha.44

BackdropUnstyled/BackdropUnstyled.d.ts

@@ -26,3 +26,3 @@ import * as React from 'react';
         as: React.ElementType;
-        styleProps?: Omit<BackdropUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
+        ownerState?: Omit<BackdropUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
       };
@@ -29,0 +29,0 @@ };

BackdropUnstyled/BackdropUnstyled.js

@@ -12,7 +12,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-const useUtilityClasses = styleProps => {
+const useUtilityClasses = ownerState => {
   const {
     classes,
     invisible
-  } = styleProps;
+  } = ownerState;
   const slots = {
@@ -38,3 +38,3 @@ root: ['root', invisible && 'invisible']
 
-  const styleProps = _extends({}, props, {
+  const ownerState = _extends({}, props, {
     classes: classesProp,
@@ -44,3 +44,3 @@ invisible
 
-  const classes = useUtilityClasses(styleProps);
+  const classes = useUtilityClasses(ownerState);
   const Root = components.Root || component;
@@ -52,3 +52,3 @@ const rootProps = componentsProps.root || {};
     as: component,
-    styleProps: _extends({}, styleProps, rootProps.styleProps),
+    ownerState: _extends({}, ownerState, rootProps.ownerState),
     theme
@@ -55,0 +55,0 @@ }, {

BackdropUnstyled/backdropUnstyledClasses.d.ts

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

BadgeUnstyled/BadgeUnstyled.d.ts

@@ -36,7 +36,7 @@ import * as React from 'react';
         as: React.ElementType;
-        styleProps?: Omit<BadgeUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
+        ownerState?: Omit<BadgeUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
       };
       badge?: {
         as?: React.ElementType;
-        styleProps?: Omit<BadgeUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
+        ownerState?: Omit<BadgeUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
       };
@@ -43,0 +43,0 @@ };

BadgeUnstyled/BadgeUnstyled.js

@@ -14,3 +14,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-const useUtilityClasses = styleProps => {
+const useUtilityClasses = ownerState => {
   const {
@@ -22,3 +22,3 @@ variant,
     classes
-  } = styleProps;
+  } = ownerState;
   const slots = {
@@ -76,3 +76,3 @@ root: ['root'],
 
-  const styleProps = _extends({}, props, {
+  const ownerState = _extends({}, props, {
     anchorOrigin,
@@ -93,3 +93,3 @@ badgeContent,
 
-  const classes = useUtilityClasses(styleProps);
+  const classes = useUtilityClasses(ownerState);
   const Root = components.Root || component;
@@ -101,3 +101,3 @@ const rootProps = componentsProps.root || {};
     as: component,
-    styleProps: _extends({}, styleProps, rootProps.styleProps),
+    ownerState: _extends({}, ownerState, rootProps.ownerState),
     theme
@@ -109,3 +109,3 @@ }, {
     children: [children, /*#__PURE__*/_jsx(Badge, _extends({}, badgeProps, !isHostComponent(Badge) && {
-      styleProps: _extends({}, styleProps, badgeProps.styleProps),
+      ownerState: _extends({}, ownerState, badgeProps.ownerState),
       theme
@@ -112,0 +112,0 @@ }, {

BadgeUnstyled/badgeUnstyledClasses.d.ts

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

composeClasses/composeClasses.d.ts

 export default function composeClasses<ClassKey extends string>(slots: Record<ClassKey, ReadonlyArray<string | false | undefined | null>>, getUtilityClass: (slot: string) => string, classes: Record<string, string> | undefined): Record<ClassKey, string>;

composeClasses/index.d.ts

 export { default } from './composeClasses';

FormControlUnstyled/FormControlContext.d.ts

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

FormControlUnstyled/FormControlUnstyled.d.ts

 import { OverridableComponent } from '@material-ui/types';
 import FormControlUnstyledProps, { FormControlUnstyledOwnProps, FormControlUnstyledTypeMap } from './FormControlUnstyledProps';
-declare type NonOptionalStyleProps = 'disabled' | 'error' | 'focused' | 'required';
-export declare type FormControlUnstyledStyleProps = Omit<FormControlUnstyledOwnProps, NonOptionalStyleProps> & Required<Pick<FormControlUnstyledProps, NonOptionalStyleProps>> & {
+declare type NonOptionalOwnerState = 'disabled' | 'error' | 'focused' | 'required';
+export declare type FormControlUnstyledOwnerState = Omit<FormControlUnstyledOwnProps, NonOptionalOwnerState> & Required<Pick<FormControlUnstyledProps, NonOptionalOwnerState>> & {
     filled: boolean;
@@ -6,0 +6,0 @@ };

FormControlUnstyled/FormControlUnstyled.js

@@ -9,3 +9,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import FormControlUnstyledContext from './FormControlContext';
-import appendStyleProps from '../utils/appendStyleProps';
+import appendOwnerState from '../utils/appendOwnerState';
 import classes from './formControlUnstyledClasses';
@@ -84,3 +84,3 @@ import { jsx as _jsx } from "react/jsx-runtime";
 
-  const styleProps = _extends({}, props, {
+  const ownerState = _extends({}, props, {
     disabled,
@@ -133,3 +133,3 @@ error,
   const Root = (_ref = component != null ? component : components.Root) != null ? _ref : 'div';
-  const rootProps = appendStyleProps(Root, _extends({}, other, componentsProps.root), styleProps);
+  const rootProps = appendOwnerState(Root, _extends({}, other, componentsProps.root), ownerState);
   return /*#__PURE__*/_jsx(FormControlUnstyledContext.Provider, {
@@ -136,0 +136,0 @@ value: childContext,

FormControlUnstyled/formControlUnstyledClasses.d.ts

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

FormControlUnstyled/FormControlUnstyledProps.d.ts

@@ -0,0 +0,0 @@ import { OverrideProps } from '@material-ui/types';

FormControlUnstyled/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './FormControlUnstyled';

FormControlUnstyled/useFormControl.d.ts

 export default function useFormControlUnstyled(): import("./FormControlContext").FormControlUnstyledState | undefined;

generateUtilityClass/generateUtilityClass.d.ts

 export default function generateUtilityClass(componentName: string, slot: string): string;

generateUtilityClass/index.d.ts

 export { default } from './generateUtilityClass';

generateUtilityClasses/generateUtilityClasses.d.ts

 export default function generateUtilityClasses<T extends string>(componentName: string, slots: T[]): Record<T, string>;

generateUtilityClasses/index.d.ts

 export { default } from './generateUtilityClasses';

index.js

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

legacy/BackdropUnstyled/BackdropUnstyled.js

@@ -11,5 +11,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-var useUtilityClasses = function useUtilityClasses(styleProps) {
-  var classes = styleProps.classes,
-      invisible = styleProps.invisible;
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes,
+      invisible = ownerState.invisible;
   var slots = {
@@ -35,3 +35,3 @@ root: ['root', invisible && 'invisible']
 
-  var styleProps = _extends({}, props, {
+  var ownerState = _extends({}, props, {
     classes: classesProp,
@@ -41,3 +41,3 @@ invisible: invisible
 
-  var classes = useUtilityClasses(styleProps);
+  var classes = useUtilityClasses(ownerState);
   var Root = components.Root || component;
@@ -49,3 +49,3 @@ var rootProps = componentsProps.root || {};
     as: component,
-    styleProps: _extends({}, styleProps, rootProps.styleProps),
+    ownerState: _extends({}, ownerState, rootProps.ownerState),
     theme: theme
@@ -52,0 +52,0 @@ }, {

legacy/BadgeUnstyled/BadgeUnstyled.js

@@ -13,8 +13,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-var useUtilityClasses = function useUtilityClasses(styleProps) {
-  var variant = styleProps.variant,
-      anchorOrigin = styleProps.anchorOrigin,
-      overlap = styleProps.overlap,
-      invisible = styleProps.invisible,
-      classes = styleProps.classes;
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var variant = ownerState.variant,
+      anchorOrigin = ownerState.anchorOrigin,
+      overlap = ownerState.overlap,
+      invisible = ownerState.invisible,
+      classes = ownerState.classes;
   var slots = {
@@ -79,3 +79,3 @@ root: ['root'],
 
-  var styleProps = _extends({}, props, {
+  var ownerState = _extends({}, props, {
     anchorOrigin: anchorOrigin,
@@ -96,3 +96,3 @@ badgeContent: badgeContent,
 
-  var classes = useUtilityClasses(styleProps);
+  var classes = useUtilityClasses(ownerState);
   var Root = components.Root || component;
@@ -104,3 +104,3 @@ var rootProps = componentsProps.root || {};
     as: component,
-    styleProps: _extends({}, styleProps, rootProps.styleProps),
+    ownerState: _extends({}, ownerState, rootProps.ownerState),
     theme: theme
@@ -112,3 +112,3 @@ }, {
     children: [children, /*#__PURE__*/_jsx(Badge, _extends({}, badgeProps, !isHostComponent(Badge) && {
-      styleProps: _extends({}, styleProps, badgeProps.styleProps),
+      ownerState: _extends({}, ownerState, badgeProps.ownerState),
       theme: theme
@@ -115,0 +115,0 @@ }, {

legacy/FormControlUnstyled/FormControlUnstyled.js

@@ -9,3 +9,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import FormControlUnstyledContext from './FormControlContext';
-import appendStyleProps from '../utils/appendStyleProps';
+import appendOwnerState from '../utils/appendOwnerState';
 import classes from './formControlUnstyledClasses';
@@ -95,3 +95,3 @@ import { jsx as _jsx } from "react/jsx-runtime";
 
-  var styleProps = _extends({}, props, {
+  var ownerState = _extends({}, props, {
     disabled: disabled,
@@ -144,3 +144,3 @@ error: error,
   var Root = (_ref = component != null ? component : components.Root) != null ? _ref : 'div';
-  var rootProps = appendStyleProps(Root, _extends({}, other, componentsProps.root), styleProps);
+  var rootProps = appendOwnerState(Root, _extends({}, other, componentsProps.root), ownerState);
   return /*#__PURE__*/_jsx(FormControlUnstyledContext.Provider, {
@@ -147,0 +147,0 @@ value: childContext,

legacy/index.js

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

legacy/ModalUnstyled/ModalUnstyled.js

@@ -16,6 +16,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-var useUtilityClasses = function useUtilityClasses(styleProps) {
-  var open = styleProps.open,
-      exited = styleProps.exited,
-      classes = styleProps.classes;
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var open = ownerState.open,
+      exited = ownerState.exited,
+      classes = ownerState.classes;
   var slots = {
@@ -162,3 +162,3 @@ root: ['root', !open && exited && 'hidden']
 
-  var styleProps = _extends({}, props, {
+  var ownerState = _extends({}, props, {
     classes: classesProp,
@@ -177,3 +177,3 @@ closeAfterTransition: closeAfterTransition,
 
-  var classes = useUtilityClasses(styleProps);
+  var classes = useUtilityClasses(ownerState);
 
@@ -265,3 +265,3 @@ if (!keepMounted && !open && (!hasTransition || exited)) {
       as: component,
-      styleProps: _extends({}, styleProps, rootProps.styleProps),
+      ownerState: _extends({}, ownerState, rootProps.ownerState),
       theme: theme
@@ -268,0 +268,0 @@ }, other, {

legacy/SliderUnstyled/SliderUnstyled.js

@@ -173,2 +173,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 // in August 2020.
+// Utilizing the CSS.supports method to check if touch-action is supported.
+// Since CSS.supports is supported on all but Edge@12 and IE and touch-action
+// is supported on both Edge@12 and IE if CSS.supports is not available that means that
+// touch-action will be supported
 
@@ -180,7 +184,7 @@
   if (cachedSupportsTouchActionNone === undefined) {
-    var element = document.createElement('div');
-    element.style.touchAction = 'none';
-    document.body.appendChild(element);
-    cachedSupportsTouchActionNone = window.getComputedStyle(element).touchAction === 'none';
-    element.parentElement.removeChild(element);
+    if (typeof CSS !== 'undefined' && typeof CSS.supports === 'function') {
+      cachedSupportsTouchActionNone = CSS.supports('touch-action', 'none');
+    } else {
+      cachedSupportsTouchActionNone = true;
+    }
   }
@@ -191,9 +195,9 @@
 
-var useUtilityClasses = function useUtilityClasses(styleProps) {
-  var disabled = styleProps.disabled,
-      dragging = styleProps.dragging,
-      marked = styleProps.marked,
-      orientation = styleProps.orientation,
-      track = styleProps.track,
-      classes = styleProps.classes;
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var disabled = ownerState.disabled,
+      dragging = ownerState.dragging,
+      marked = ownerState.marked,
+      orientation = ownerState.orientation,
+      track = ownerState.track,
+      classes = ownerState.classes;
   var slots = {
@@ -709,3 +713,3 @@ root: ['root', disabled && 'disabled', dragging && 'dragging', marked && 'marked', orientation === 'vertical' && 'vertical', track === 'inverted' && 'trackInverted', track === false && 'trackFalse'],
 
-  var styleProps = _extends({}, props, {
+  var ownerState = _extends({}, props, {
     classes: classesProp,
@@ -728,3 +732,3 @@ disabled: disabled,
 
-  var classes = useUtilityClasses(styleProps);
+  var classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(Root, _extends({
@@ -735,11 +739,11 @@ ref: handleRef,
     as: component,
-    styleProps: _extends({}, styleProps, rootProps.styleProps)
+    ownerState: _extends({}, ownerState, rootProps.ownerState)
   }, other, {
     className: clsx(classes.root, rootProps.className, className),
     children: [/*#__PURE__*/_jsx(Rail, _extends({}, railProps, !isHostComponent(Rail) && {
-      styleProps: _extends({}, styleProps, railProps.styleProps)
+      ownerState: _extends({}, ownerState, railProps.ownerState)
     }, {
       className: clsx(classes.rail, railProps.className)
     })), /*#__PURE__*/_jsx(Track, _extends({}, trackProps, !isHostComponent(Track) && {
-      styleProps: _extends({}, styleProps, trackProps.styleProps)
+      ownerState: _extends({}, ownerState, trackProps.ownerState)
     }, {
@@ -763,6 +767,5 @@ className: clsx(classes.track, trackProps.className),
         }, markProps, !isHostComponent(Mark) && {
-          styleProps: _extends({}, styleProps, markProps.styleProps, {
-            markActive: markActive
-          })
+          ownerState: _extends({}, ownerState, markProps.ownerState)
         }, {
+          markActive: markActive,
           style: _extends({}, style, markProps.style),
@@ -774,6 +777,5 @@ className: clsx(classes.mark, markProps.className, markActive && classes.markActive)
         }, markLabelProps, !isHostComponent(MarkLabel) && {
-          styleProps: _extends({}, styleProps, markLabelProps.styleProps, {
-            markLabelActive: markActive
-          })
+          ownerState: _extends({}, ownerState, markLabelProps.ownerState)
         }, {
+          markLabelActive: markActive,
           style: _extends({}, style, markLabelProps.style),
@@ -799,3 +801,3 @@ className: clsx(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
         }, !isHostComponent(ValueLabel) && {
-          styleProps: _extends({}, styleProps, valueLabelProps.styleProps)
+          ownerState: _extends({}, ownerState, valueLabelProps.ownerState)
         }, {
@@ -809,3 +811,3 @@ children: /*#__PURE__*/_jsx(Thumb, _extends({
           }, !isHostComponent(Thumb) && {
-            styleProps: _extends({}, styleProps, thumbProps.styleProps)
+            ownerState: _extends({}, ownerState, thumbProps.ownerState)
           }, {
@@ -812,0 +814,0 @@ style: _extends({}, style, {

legacy/SwitchUnstyled/SwitchUnstyled.js

@@ -8,3 +8,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import classes from './switchUnstyledClasses';
-import appendStyleProps from '../utils/appendStyleProps';
+import appendOwnerState from '../utils/appendOwnerState';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -25,3 +25,3 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var SwitchUnstyled = /*#__PURE__*/React.forwardRef(function SwitchUnstyled(props, ref) {
-  var _ref, _components$Thumb, _componentsProps$thum, _components$Input, _componentsProps$inpu;
+  var _ref, _components$Thumb, _componentsProps$thum, _components$Input, _componentsProps$inpu, _components$Track, _componentsProps$trac;
 
@@ -63,3 +63,3 @@ var checkedProp = props.checked,
 
-  var styleProps = _extends({}, props, {
+  var ownerState = _extends({}, props, {
     checked: checked,
@@ -72,7 +72,11 @@ disabled: disabled,
   var Root = (_ref = component != null ? component : components.Root) != null ? _ref : 'span';
-  var rootProps = appendStyleProps(Root, _extends({}, otherProps, componentsProps.root), styleProps);
+  var rootProps = appendOwnerState(Root, _extends({}, otherProps, componentsProps.root), ownerState);
   var Thumb = (_components$Thumb = components.Thumb) != null ? _components$Thumb : 'span';
-  var thumbProps = appendStyleProps(Thumb, (_componentsProps$thum = componentsProps.thumb) != null ? _componentsProps$thum : {}, styleProps);
+  var thumbProps = appendOwnerState(Thumb, (_componentsProps$thum = componentsProps.thumb) != null ? _componentsProps$thum : {}, ownerState);
   var Input = (_components$Input = components.Input) != null ? _components$Input : 'input';
-  var inputProps = appendStyleProps(Input, (_componentsProps$inpu = componentsProps.input) != null ? _componentsProps$inpu : {}, styleProps);
+  var inputProps = appendOwnerState(Input, (_componentsProps$inpu = componentsProps.input) != null ? _componentsProps$inpu : {}, ownerState);
+  var Track = components.Track === null ? function () {
+    return null;
+  } : (_components$Track = components.Track) != null ? _components$Track : 'span';
+  var trackProps = appendOwnerState(Track, (_componentsProps$trac = componentsProps.track) != null ? _componentsProps$trac : {}, ownerState);
   var stateClasses = clsx(checked && classes.checked, disabled && classes.disabled, focusVisible && classes.focusVisible, readOnly && classes.readOnly);
@@ -83,3 +87,5 @@ return /*#__PURE__*/_jsxs(Root, _extends({
     className: clsx(classes.root, stateClasses, className, rootProps == null ? void 0 : rootProps.className),
-    children: [/*#__PURE__*/_jsx(Thumb, _extends({}, thumbProps, {
+    children: [/*#__PURE__*/_jsx(Track, _extends({}, trackProps, {
+      className: clsx(classes.track, trackProps == null ? void 0 : trackProps.className)
+    })), /*#__PURE__*/_jsx(Thumb, _extends({}, thumbProps, {
       className: clsx(classes.thumb, thumbProps == null ? void 0 : thumbProps.className)
@@ -121,6 +127,9 @@ })), /*#__PURE__*/_jsx(Input, _extends({}, getInputProps(inputProps), {
    */
-  components: PropTypes.shape({
+  components: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .shape({
     Input: PropTypes.elementType,
     Root: PropTypes.elementType,
-    Thumb: PropTypes.elementType
+    Thumb: PropTypes.elementType,
+    Track: PropTypes.oneOfType([PropTypes.elementType, PropTypes.oneOf([null])])
   }),
@@ -127,0 +136,0 @@

legacy/SwitchUnstyled/switchUnstyledClasses.js

@@ -6,3 +6,3 @@ import generateUtilityClass from '../generateUtilityClass';
 }
-var switchUnstyledClasses = generateUtilityClasses('MuiSwitch', ['root', 'input', 'thumb', 'checked', 'disabled', 'focusVisible', 'readOnly']);
+var switchUnstyledClasses = generateUtilityClasses('MuiSwitch', ['root', 'input', 'track', 'thumb', 'checked', 'disabled', 'focusVisible', 'readOnly']);
 export default switchUnstyledClasses;

ModalUnstyled/ModalManager.d.ts

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

ModalUnstyled/ModalUnstyled.d.ts

@@ -45,3 +45,3 @@ import * as React from 'react';
         as: React.ElementType;
-        styleProps?: Omit<ModalUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
+        ownerState?: Omit<ModalUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
       };
@@ -48,0 +48,0 @@ };

ModalUnstyled/ModalUnstyled.js

@@ -17,3 +17,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-const useUtilityClasses = styleProps => {
+const useUtilityClasses = ownerState => {
   const {
@@ -23,3 +23,3 @@ open,
     classes
-  } = styleProps;
+  } = ownerState;
   const slots = {
@@ -152,3 +152,3 @@ root: ['root', !open && exited && 'hidden']
 
-  const styleProps = _extends({}, props, {
+  const ownerState = _extends({}, props, {
     classes: classesProp,
@@ -167,3 +167,3 @@ closeAfterTransition,
 
-  const classes = useUtilityClasses(styleProps);
+  const classes = useUtilityClasses(ownerState);
 
@@ -255,3 +255,3 @@ if (!keepMounted && !open && (!hasTransition || exited)) {
       as: component,
-      styleProps: _extends({}, styleProps, rootProps.styleProps),
+      ownerState: _extends({}, ownerState, rootProps.ownerState),
       theme
@@ -258,0 +258,0 @@ }, other, {

ModalUnstyled/modalUnstyledClasses.d.ts

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

modern/BackdropUnstyled/BackdropUnstyled.js

@@ -12,7 +12,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-const useUtilityClasses = styleProps => {
+const useUtilityClasses = ownerState => {
   const {
     classes,
     invisible
-  } = styleProps;
+  } = ownerState;
   const slots = {
@@ -38,3 +38,3 @@ root: ['root', invisible && 'invisible']
 
-  const styleProps = _extends({}, props, {
+  const ownerState = _extends({}, props, {
     classes: classesProp,
@@ -44,3 +44,3 @@ invisible
 
-  const classes = useUtilityClasses(styleProps);
+  const classes = useUtilityClasses(ownerState);
   const Root = components.Root || component;
@@ -52,3 +52,3 @@ const rootProps = componentsProps.root || {};
     as: component,
-    styleProps: _extends({}, styleProps, rootProps.styleProps),
+    ownerState: _extends({}, ownerState, rootProps.ownerState),
     theme
@@ -55,0 +55,0 @@ }, {

modern/BadgeUnstyled/BadgeUnstyled.js

@@ -14,3 +14,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-const useUtilityClasses = styleProps => {
+const useUtilityClasses = ownerState => {
   const {
@@ -22,3 +22,3 @@ variant,
     classes
-  } = styleProps;
+  } = ownerState;
   const slots = {
@@ -76,3 +76,3 @@ root: ['root'],
 
-  const styleProps = _extends({}, props, {
+  const ownerState = _extends({}, props, {
     anchorOrigin,
@@ -93,3 +93,3 @@ badgeContent,
 
-  const classes = useUtilityClasses(styleProps);
+  const classes = useUtilityClasses(ownerState);
   const Root = components.Root || component;
@@ -101,3 +101,3 @@ const rootProps = componentsProps.root || {};
     as: component,
-    styleProps: _extends({}, styleProps, rootProps.styleProps),
+    ownerState: _extends({}, ownerState, rootProps.ownerState),
     theme
@@ -109,3 +109,3 @@ }, {
     children: [children, /*#__PURE__*/_jsx(Badge, _extends({}, badgeProps, !isHostComponent(Badge) && {
-      styleProps: _extends({}, styleProps, badgeProps.styleProps),
+      ownerState: _extends({}, ownerState, badgeProps.ownerState),
       theme
@@ -112,0 +112,0 @@ }, {

modern/FormControlUnstyled/FormControlUnstyled.js

@@ -9,3 +9,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import FormControlUnstyledContext from './FormControlContext';
-import appendStyleProps from '../utils/appendStyleProps';
+import appendOwnerState from '../utils/appendOwnerState';
 import classes from './formControlUnstyledClasses';
@@ -82,3 +82,3 @@ import { jsx as _jsx } from "react/jsx-runtime";
 
-  const styleProps = _extends({}, props, {
+  const ownerState = _extends({}, props, {
     disabled,
@@ -131,3 +131,3 @@ error,
   const Root = component ?? components.Root ?? 'div';
-  const rootProps = appendStyleProps(Root, _extends({}, other, componentsProps.root), styleProps);
+  const rootProps = appendOwnerState(Root, _extends({}, other, componentsProps.root), ownerState);
   return /*#__PURE__*/_jsx(FormControlUnstyledContext.Provider, {
@@ -134,0 +134,0 @@ value: childContext,

modern/index.js

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

modern/ModalUnstyled/ModalUnstyled.js

@@ -17,3 +17,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-const useUtilityClasses = styleProps => {
+const useUtilityClasses = ownerState => {
   const {
@@ -23,3 +23,3 @@ open,
     classes
-  } = styleProps;
+  } = ownerState;
   const slots = {
@@ -152,3 +152,3 @@ root: ['root', !open && exited && 'hidden']
 
-  const styleProps = _extends({}, props, {
+  const ownerState = _extends({}, props, {
     classes: classesProp,
@@ -167,3 +167,3 @@ closeAfterTransition,
 
-  const classes = useUtilityClasses(styleProps);
+  const classes = useUtilityClasses(ownerState);
 
@@ -255,3 +255,3 @@ if (!keepMounted && !open && (!hasTransition || exited)) {
       as: component,
-      styleProps: _extends({}, styleProps, rootProps.styleProps),
+      ownerState: _extends({}, ownerState, rootProps.ownerState),
       theme
@@ -258,0 +258,0 @@ }, other, {

modern/SliderUnstyled/SliderUnstyled.js

@@ -159,2 +159,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 // in August 2020.
+// Utilizing the CSS.supports method to check if touch-action is supported.
+// Since CSS.supports is supported on all but Edge@12 and IE and touch-action
+// is supported on both Edge@12 and IE if CSS.supports is not available that means that
+// touch-action will be supported
 
@@ -166,7 +170,7 @@
   if (cachedSupportsTouchActionNone === undefined) {
-    const element = document.createElement('div');
-    element.style.touchAction = 'none';
-    document.body.appendChild(element);
-    cachedSupportsTouchActionNone = window.getComputedStyle(element).touchAction === 'none';
-    element.parentElement.removeChild(element);
+    if (typeof CSS !== 'undefined' && typeof CSS.supports === 'function') {
+      cachedSupportsTouchActionNone = CSS.supports('touch-action', 'none');
+    } else {
+      cachedSupportsTouchActionNone = true;
+    }
   }
@@ -177,3 +181,3 @@
 
-const useUtilityClasses = styleProps => {
+const useUtilityClasses = ownerState => {
   const {
@@ -186,3 +190,3 @@ disabled,
     classes
-  } = styleProps;
+  } = ownerState;
   const slots = {
@@ -658,3 +662,3 @@ root: ['root', disabled && 'disabled', dragging && 'dragging', marked && 'marked', orientation === 'vertical' && 'vertical', track === 'inverted' && 'trackInverted', track === false && 'trackFalse'],
 
-  const styleProps = _extends({}, props, {
+  const ownerState = _extends({}, props, {
     classes: classesProp,
@@ -675,3 +679,3 @@ disabled,
 
-  const classes = useUtilityClasses(styleProps);
+  const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(Root, _extends({
@@ -682,11 +686,11 @@ ref: handleRef,
     as: component,
-    styleProps: _extends({}, styleProps, rootProps.styleProps)
+    ownerState: _extends({}, ownerState, rootProps.ownerState)
   }, other, {
     className: clsx(classes.root, rootProps.className, className),
     children: [/*#__PURE__*/_jsx(Rail, _extends({}, railProps, !isHostComponent(Rail) && {
-      styleProps: _extends({}, styleProps, railProps.styleProps)
+      ownerState: _extends({}, ownerState, railProps.ownerState)
     }, {
       className: clsx(classes.rail, railProps.className)
     })), /*#__PURE__*/_jsx(Track, _extends({}, trackProps, !isHostComponent(Track) && {
-      styleProps: _extends({}, styleProps, trackProps.styleProps)
+      ownerState: _extends({}, ownerState, trackProps.ownerState)
     }, {
@@ -710,6 +714,5 @@ className: clsx(classes.track, trackProps.className),
         }, markProps, !isHostComponent(Mark) && {
-          styleProps: _extends({}, styleProps, markProps.styleProps, {
-            markActive
-          })
+          ownerState: _extends({}, ownerState, markProps.ownerState)
         }, {
+          markActive: markActive,
           style: _extends({}, style, markProps.style),
@@ -721,6 +724,5 @@ className: clsx(classes.mark, markProps.className, markActive && classes.markActive)
         }, markLabelProps, !isHostComponent(MarkLabel) && {
-          styleProps: _extends({}, styleProps, markLabelProps.styleProps, {
-            markLabelActive: markActive
-          })
+          ownerState: _extends({}, ownerState, markLabelProps.ownerState)
         }, {
+          markLabelActive: markActive,
           style: _extends({}, style, markLabelProps.style),
@@ -746,3 +748,3 @@ className: clsx(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
         }, !isHostComponent(ValueLabel) && {
-          styleProps: _extends({}, styleProps, valueLabelProps.styleProps)
+          ownerState: _extends({}, ownerState, valueLabelProps.ownerState)
         }, {
@@ -756,3 +758,3 @@ children: /*#__PURE__*/_jsx(Thumb, _extends({
           }, !isHostComponent(Thumb) && {
-            styleProps: _extends({}, styleProps, thumbProps.styleProps)
+            ownerState: _extends({}, ownerState, thumbProps.ownerState)
           }, {
@@ -759,0 +761,0 @@ style: _extends({}, style, {

modern/SwitchUnstyled/SwitchUnstyled.js

@@ -9,3 +9,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import classes from './switchUnstyledClasses';
-import appendStyleProps from '../utils/appendStyleProps';
+import appendOwnerState from '../utils/appendOwnerState';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -60,3 +60,3 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 
-  const styleProps = _extends({}, props, {
+  const ownerState = _extends({}, props, {
     checked,
@@ -69,7 +69,9 @@ disabled,
   const Root = component ?? components.Root ?? 'span';
-  const rootProps = appendStyleProps(Root, _extends({}, otherProps, componentsProps.root), styleProps);
+  const rootProps = appendOwnerState(Root, _extends({}, otherProps, componentsProps.root), ownerState);
   const Thumb = components.Thumb ?? 'span';
-  const thumbProps = appendStyleProps(Thumb, componentsProps.thumb ?? {}, styleProps);
+  const thumbProps = appendOwnerState(Thumb, componentsProps.thumb ?? {}, ownerState);
   const Input = components.Input ?? 'input';
-  const inputProps = appendStyleProps(Input, componentsProps.input ?? {}, styleProps);
+  const inputProps = appendOwnerState(Input, componentsProps.input ?? {}, ownerState);
+  const Track = components.Track === null ? () => null : components.Track ?? 'span';
+  const trackProps = appendOwnerState(Track, componentsProps.track ?? {}, ownerState);
   const stateClasses = clsx(checked && classes.checked, disabled && classes.disabled, focusVisible && classes.focusVisible, readOnly && classes.readOnly);
@@ -80,3 +82,5 @@ return /*#__PURE__*/_jsxs(Root, _extends({
     className: clsx(classes.root, stateClasses, className, rootProps?.className),
-    children: [/*#__PURE__*/_jsx(Thumb, _extends({}, thumbProps, {
+    children: [/*#__PURE__*/_jsx(Track, _extends({}, trackProps, {
+      className: clsx(classes.track, trackProps?.className)
+    })), /*#__PURE__*/_jsx(Thumb, _extends({}, thumbProps, {
       className: clsx(classes.thumb, thumbProps?.className)
@@ -118,6 +122,9 @@ })), /*#__PURE__*/_jsx(Input, _extends({}, getInputProps(inputProps), {
    */
-  components: PropTypes.shape({
+  components: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .shape({
     Input: PropTypes.elementType,
     Root: PropTypes.elementType,
-    Thumb: PropTypes.elementType
+    Thumb: PropTypes.elementType,
+    Track: PropTypes.oneOfType([PropTypes.elementType, PropTypes.oneOf([null])])
   }),
@@ -124,0 +131,0 @@

modern/SwitchUnstyled/switchUnstyledClasses.js

@@ -6,3 +6,3 @@ import generateUtilityClass from '../generateUtilityClass';
 }
-const switchUnstyledClasses = generateUtilityClasses('MuiSwitch', ['root', 'input', 'thumb', 'checked', 'disabled', 'focusVisible', 'readOnly']);
+const switchUnstyledClasses = generateUtilityClasses('MuiSwitch', ['root', 'input', 'track', 'thumb', 'checked', 'disabled', 'focusVisible', 'readOnly']);
 export default switchUnstyledClasses;

node/BackdropUnstyled/BackdropUnstyled.js

@@ -34,7 +34,7 @@ "use strict";
 
-const useUtilityClasses = styleProps => {
+const useUtilityClasses = ownerState => {
   const {
     classes,
     invisible
-  } = styleProps;
+  } = ownerState;
   const slots = {
@@ -59,7 +59,7 @@ root: ['root', invisible && 'invisible']
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const styleProps = (0, _extends2.default)({}, props, {
+  const ownerState = (0, _extends2.default)({}, props, {
     classes: classesProp,
     invisible
   });
-  const classes = useUtilityClasses(styleProps);
+  const classes = useUtilityClasses(ownerState);
   const Root = components.Root || component;
@@ -71,3 +71,3 @@ const rootProps = componentsProps.root || {};
     as: component,
-    styleProps: (0, _extends2.default)({}, styleProps, rootProps.styleProps),
+    ownerState: (0, _extends2.default)({}, ownerState, rootProps.ownerState),
     theme
@@ -74,0 +74,0 @@ }, {

node/BadgeUnstyled/BadgeUnstyled.js

@@ -36,3 +36,3 @@ "use strict";
 
-const useUtilityClasses = styleProps => {
+const useUtilityClasses = ownerState => {
   const {
@@ -44,3 +44,3 @@ variant,
     classes
-  } = styleProps;
+  } = ownerState;
   const slots = {
@@ -96,3 +96,3 @@ root: ['root'],
   } = invisible ? prevProps : props;
-  const styleProps = (0, _extends2.default)({}, props, {
+  const ownerState = (0, _extends2.default)({}, props, {
     anchorOrigin,
@@ -112,3 +112,3 @@ badgeContent,
 
-  const classes = useUtilityClasses(styleProps);
+  const classes = useUtilityClasses(ownerState);
   const Root = components.Root || component;
@@ -120,3 +120,3 @@ const rootProps = componentsProps.root || {};
     as: component,
-    styleProps: (0, _extends2.default)({}, styleProps, rootProps.styleProps),
+    ownerState: (0, _extends2.default)({}, ownerState, rootProps.ownerState),
     theme
@@ -128,3 +128,3 @@ }, {
     children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(Badge, (0, _extends2.default)({}, badgeProps, !(0, _isHostComponent.default)(Badge) && {
-      styleProps: (0, _extends2.default)({}, styleProps, badgeProps.styleProps),
+      ownerState: (0, _extends2.default)({}, ownerState, badgeProps.ownerState),
       theme
@@ -131,0 +131,0 @@ }, {

node/FormControlUnstyled/FormControlUnstyled.js

@@ -24,3 +24,3 @@ "use strict";
 
-var _appendStyleProps = _interopRequireDefault(require("../utils/appendStyleProps"));
+var _appendOwnerState = _interopRequireDefault(require("../utils/appendOwnerState"));
 
@@ -105,3 +105,3 @@ var _formControlUnstyledClasses = _interopRequireDefault(require("./formControlUnstyledClasses"));
   const focused = visuallyFocused !== undefined && !disabled ? visuallyFocused : focusedState;
-  const styleProps = (0, _extends2.default)({}, props, {
+  const ownerState = (0, _extends2.default)({}, props, {
     disabled,
@@ -154,3 +154,3 @@ error,
   const Root = (_ref = component != null ? component : components.Root) != null ? _ref : 'div';
-  const rootProps = (0, _appendStyleProps.default)(Root, (0, _extends2.default)({}, other, componentsProps.root), styleProps);
+  const rootProps = (0, _appendOwnerState.default)(Root, (0, _extends2.default)({}, other, componentsProps.root), ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlContext.default.Provider, {
@@ -157,0 +157,0 @@ value: childContext,

node/index.js

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

node/ModalUnstyled/ModalUnstyled.js

@@ -42,3 +42,3 @@ "use strict";
 
-const useUtilityClasses = styleProps => {
+const useUtilityClasses = ownerState => {
   const {
@@ -48,3 +48,3 @@ open,
     classes
-  } = styleProps;
+  } = ownerState;
   const slots = {
@@ -175,3 +175,3 @@ root: ['root', !open && exited && 'hidden']
   }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
-  const styleProps = (0, _extends2.default)({}, props, {
+  const ownerState = (0, _extends2.default)({}, props, {
     classes: classesProp,
@@ -189,3 +189,3 @@ closeAfterTransition,
   });
-  const classes = useUtilityClasses(styleProps);
+  const classes = useUtilityClasses(ownerState);
 
@@ -277,3 +277,3 @@ if (!keepMounted && !open && (!hasTransition || exited)) {
       as: component,
-      styleProps: (0, _extends2.default)({}, styleProps, rootProps.styleProps),
+      ownerState: (0, _extends2.default)({}, ownerState, rootProps.ownerState),
       theme
@@ -280,0 +280,0 @@ }, other, {

node/SliderUnstyled/SliderUnstyled.js

@@ -183,2 +183,6 @@ "use strict";
 // in August 2020.
+// Utilizing the CSS.supports method to check if touch-action is supported.
+// Since CSS.supports is supported on all but Edge@12 and IE and touch-action
+// is supported on both Edge@12 and IE if CSS.supports is not available that means that
+// touch-action will be supported
 
@@ -190,7 +194,7 @@
   if (cachedSupportsTouchActionNone === undefined) {
-    const element = document.createElement('div');
-    element.style.touchAction = 'none';
-    document.body.appendChild(element);
-    cachedSupportsTouchActionNone = window.getComputedStyle(element).touchAction === 'none';
-    element.parentElement.removeChild(element);
+    if (typeof CSS !== 'undefined' && typeof CSS.supports === 'function') {
+      cachedSupportsTouchActionNone = CSS.supports('touch-action', 'none');
+    } else {
+      cachedSupportsTouchActionNone = true;
+    }
   }
@@ -201,3 +205,3 @@
 
-const useUtilityClasses = styleProps => {
+const useUtilityClasses = ownerState => {
   const {
@@ -210,3 +214,3 @@ disabled,
     classes
-  } = styleProps;
+  } = ownerState;
   const slots = {
@@ -679,3 +683,3 @@ root: ['root', disabled && 'disabled', dragging && 'dragging', marked && 'marked', orientation === 'vertical' && 'vertical', track === 'inverted' && 'trackInverted', track === false && 'trackFalse'],
 
-  const styleProps = (0, _extends2.default)({}, props, {
+  const ownerState = (0, _extends2.default)({}, props, {
     classes: classesProp,
@@ -695,3 +699,3 @@ disabled,
   });
-  const classes = useUtilityClasses(styleProps);
+  const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({
@@ -702,11 +706,11 @@ ref: handleRef,
     as: component,
-    styleProps: (0, _extends2.default)({}, styleProps, rootProps.styleProps)
+    ownerState: (0, _extends2.default)({}, ownerState, rootProps.ownerState)
   }, other, {
     className: (0, _clsx.default)(classes.root, rootProps.className, className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Rail, (0, _extends2.default)({}, railProps, !(0, _isHostComponent.default)(Rail) && {
-      styleProps: (0, _extends2.default)({}, styleProps, railProps.styleProps)
+      ownerState: (0, _extends2.default)({}, ownerState, railProps.ownerState)
     }, {
       className: (0, _clsx.default)(classes.rail, railProps.className)
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Track, (0, _extends2.default)({}, trackProps, !(0, _isHostComponent.default)(Track) && {
-      styleProps: (0, _extends2.default)({}, styleProps, trackProps.styleProps)
+      ownerState: (0, _extends2.default)({}, ownerState, trackProps.ownerState)
     }, {
@@ -730,6 +734,5 @@ className: (0, _clsx.default)(classes.track, trackProps.className),
         }, markProps, !(0, _isHostComponent.default)(Mark) && {
-          styleProps: (0, _extends2.default)({}, styleProps, markProps.styleProps, {
-            markActive
-          })
+          ownerState: (0, _extends2.default)({}, ownerState, markProps.ownerState)
         }, {
+          markActive: markActive,
           style: (0, _extends2.default)({}, style, markProps.style),
@@ -741,6 +744,5 @@ className: (0, _clsx.default)(classes.mark, markProps.className, markActive && classes.markActive)
         }, markLabelProps, !(0, _isHostComponent.default)(MarkLabel) && {
-          styleProps: (0, _extends2.default)({}, styleProps, markLabelProps.styleProps, {
-            markLabelActive: markActive
-          })
+          ownerState: (0, _extends2.default)({}, ownerState, markLabelProps.ownerState)
         }, {
+          markLabelActive: markActive,
           style: (0, _extends2.default)({}, style, markLabelProps.style),
@@ -766,3 +768,3 @@ className: (0, _clsx.default)(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
         }, !(0, _isHostComponent.default)(ValueLabel) && {
-          styleProps: (0, _extends2.default)({}, styleProps, valueLabelProps.styleProps)
+          ownerState: (0, _extends2.default)({}, ownerState, valueLabelProps.ownerState)
         }, {
@@ -776,3 +778,3 @@ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Thumb, (0, _extends2.default)({
           }, !(0, _isHostComponent.default)(Thumb) && {
-            styleProps: (0, _extends2.default)({}, styleProps, thumbProps.styleProps)
+            ownerState: (0, _extends2.default)({}, ownerState, thumbProps.ownerState)
           }, {
@@ -779,0 +781,0 @@ style: (0, _extends2.default)({}, style, {

node/SwitchUnstyled/SwitchUnstyled.js

@@ -24,3 +24,3 @@ "use strict";
 
-var _appendStyleProps = _interopRequireDefault(require("../utils/appendStyleProps"));
+var _appendOwnerState = _interopRequireDefault(require("../utils/appendOwnerState"));
 
@@ -47,3 +47,3 @@ var _jsxRuntime = require("react/jsx-runtime");
 const SwitchUnstyled = /*#__PURE__*/React.forwardRef(function SwitchUnstyled(props, ref) {
-  var _ref, _components$Thumb, _componentsProps$thum, _components$Input, _componentsProps$inpu;
+  var _ref, _components$Thumb, _componentsProps$thum, _components$Input, _componentsProps$inpu, _components$Track, _componentsProps$trac;
 
@@ -82,3 +82,3 @@ const {
   } = (0, _useSwitch.default)(useSwitchProps);
-  const styleProps = (0, _extends2.default)({}, props, {
+  const ownerState = (0, _extends2.default)({}, props, {
     checked,
@@ -90,7 +90,9 @@ disabled,
   const Root = (_ref = component != null ? component : components.Root) != null ? _ref : 'span';
-  const rootProps = (0, _appendStyleProps.default)(Root, (0, _extends2.default)({}, otherProps, componentsProps.root), styleProps);
+  const rootProps = (0, _appendOwnerState.default)(Root, (0, _extends2.default)({}, otherProps, componentsProps.root), ownerState);
   const Thumb = (_components$Thumb = components.Thumb) != null ? _components$Thumb : 'span';
-  const thumbProps = (0, _appendStyleProps.default)(Thumb, (_componentsProps$thum = componentsProps.thumb) != null ? _componentsProps$thum : {}, styleProps);
+  const thumbProps = (0, _appendOwnerState.default)(Thumb, (_componentsProps$thum = componentsProps.thumb) != null ? _componentsProps$thum : {}, ownerState);
   const Input = (_components$Input = components.Input) != null ? _components$Input : 'input';
-  const inputProps = (0, _appendStyleProps.default)(Input, (_componentsProps$inpu = componentsProps.input) != null ? _componentsProps$inpu : {}, styleProps);
+  const inputProps = (0, _appendOwnerState.default)(Input, (_componentsProps$inpu = componentsProps.input) != null ? _componentsProps$inpu : {}, ownerState);
+  const Track = components.Track === null ? () => null : (_components$Track = components.Track) != null ? _components$Track : 'span';
+  const trackProps = (0, _appendOwnerState.default)(Track, (_componentsProps$trac = componentsProps.track) != null ? _componentsProps$trac : {}, ownerState);
   const stateClasses = (0, _clsx.default)(checked && _switchUnstyledClasses.default.checked, disabled && _switchUnstyledClasses.default.disabled, focusVisible && _switchUnstyledClasses.default.focusVisible, readOnly && _switchUnstyledClasses.default.readOnly);
@@ -101,3 +103,5 @@ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({
     className: (0, _clsx.default)(_switchUnstyledClasses.default.root, stateClasses, className, rootProps == null ? void 0 : rootProps.className),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Thumb, (0, _extends2.default)({}, thumbProps, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Track, (0, _extends2.default)({}, trackProps, {
+      className: (0, _clsx.default)(_switchUnstyledClasses.default.track, trackProps == null ? void 0 : trackProps.className)
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Thumb, (0, _extends2.default)({}, thumbProps, {
       className: (0, _clsx.default)(_switchUnstyledClasses.default.thumb, thumbProps == null ? void 0 : thumbProps.className)
@@ -139,6 +143,9 @@ })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, (0, _extends2.default)({}, getInputProps(inputProps), {
    */
-  components: _propTypes.default.shape({
+  components: _propTypes.default
+  /* @typescript-to-proptypes-ignore */
+  .shape({
     Input: _propTypes.default.elementType,
     Root: _propTypes.default.elementType,
-    Thumb: _propTypes.default.elementType
+    Thumb: _propTypes.default.elementType,
+    Track: _propTypes.default.oneOfType([_propTypes.default.elementType, _propTypes.default.oneOf([null])])
   }),
@@ -145,0 +152,0 @@

node/SwitchUnstyled/switchUnstyledClasses.js

@@ -19,4 +19,4 @@ "use strict";
 
-const switchUnstyledClasses = (0, _generateUtilityClasses.default)('MuiSwitch', ['root', 'input', 'thumb', 'checked', 'disabled', 'focusVisible', 'readOnly']);
+const switchUnstyledClasses = (0, _generateUtilityClasses.default)('MuiSwitch', ['root', 'input', 'track', 'thumb', 'checked', 'disabled', 'focusVisible', 'readOnly']);
 var _default = switchUnstyledClasses;
 exports.default = _default;

package.json

 {
   "name": "@material-ui/unstyled",
-  "version": "5.0.0-alpha.43",
+  "version": "5.0.0-alpha.44",
   "private": false,
@@ -27,4 +27,4 @@ "author": "Material-UI Team",
     "@types/react": "^16.8.6 || ^17.0.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
@@ -39,6 +39,6 @@ "peerDependenciesMeta": {
     "@emotion/is-prop-valid": "^1.1.0",
-    "@material-ui/utils": "5.0.0-beta.4",
+    "@material-ui/utils": "5.0.0-beta.5",
     "clsx": "^1.0.4",
     "prop-types": "^15.7.2",
-    "react-is": "^17.0.0"
+    "react-is": "^17.0.2"
   },
@@ -45,0 +45,0 @@ "sideEffects": false,

README.md

@@ -19,2 +19,4 @@ # @material-ui/unstyled
 
-[The documentation](https://material-ui.com/)
+<!-- #default-branch-switch -->
+
+[The documentation](https://next.material-ui.com/customization/unstyled-components/)

SliderUnstyled/SliderUnstyled.d.ts

 import { OverridableComponent, OverridableTypeMap, OverrideProps } from '@material-ui/types';
 import { SliderUnstyledClasses } from './sliderUnstyledClasses';
 
-export interface SliderStylePropsOverrides {}
+export interface SliderOwnerStateOverrides {}
 
@@ -57,38 +57,38 @@ export interface Mark {
         as?: React.ElementType;
-        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'> &
-          SliderStylePropsOverrides;
+        ownerState?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'> &
+          SliderOwnerStateOverrides;
       };
       track?: {
         as?: React.ElementType;
-        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'> &
-          SliderStylePropsOverrides;
+        ownerState?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'> &
+          SliderOwnerStateOverrides;
       };
       rail?: {
         as?: React.ElementType;
-        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'> &
-          SliderStylePropsOverrides;
+        ownerState?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'> &
+          SliderOwnerStateOverrides;
       };
       thumb?: {
         as?: React.ElementType;
-        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'> &
-          SliderStylePropsOverrides;
+        ownerState?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'> &
+          SliderOwnerStateOverrides;
       };
       mark?: {
         as?: React.ElementType;
-        styleProps?: Omit<
+        ownerState?: Omit<
           SliderUnstyledTypeMap<P, D>['props'],
           'components' | 'componentsProps'
-        > & { markActive?: boolean } & SliderStylePropsOverrides;
+        > & { markActive?: boolean } & SliderOwnerStateOverrides;
       };
       markLabel?: {
         as?: React.ElementType;
-        styleProps?: Omit<
+        ownerState?: Omit<
           SliderUnstyledTypeMap<P, D>['props'],
           'components' | 'componentsProps'
-        > & { markLabelActive?: boolean } & SliderStylePropsOverrides;
+        > & { markLabelActive?: boolean } & SliderOwnerStateOverrides;
       };
       valueLabel?: {
         as?: React.ElementType;
-        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'> &
-          SliderStylePropsOverrides;
+        ownerState?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'> &
+          SliderOwnerStateOverrides;
       };
@@ -95,0 +95,0 @@ };

SliderUnstyled/SliderUnstyled.js

@@ -159,2 +159,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 // in August 2020.
+// Utilizing the CSS.supports method to check if touch-action is supported.
+// Since CSS.supports is supported on all but Edge@12 and IE and touch-action
+// is supported on both Edge@12 and IE if CSS.supports is not available that means that
+// touch-action will be supported
 
@@ -166,7 +170,7 @@
   if (cachedSupportsTouchActionNone === undefined) {
-    const element = document.createElement('div');
-    element.style.touchAction = 'none';
-    document.body.appendChild(element);
-    cachedSupportsTouchActionNone = window.getComputedStyle(element).touchAction === 'none';
-    element.parentElement.removeChild(element);
+    if (typeof CSS !== 'undefined' && typeof CSS.supports === 'function') {
+      cachedSupportsTouchActionNone = CSS.supports('touch-action', 'none');
+    } else {
+      cachedSupportsTouchActionNone = true;
+    }
   }
@@ -177,3 +181,3 @@
 
-const useUtilityClasses = styleProps => {
+const useUtilityClasses = ownerState => {
   const {
@@ -186,3 +190,3 @@ disabled,
     classes
-  } = styleProps;
+  } = ownerState;
   const slots = {
@@ -658,3 +662,3 @@ root: ['root', disabled && 'disabled', dragging && 'dragging', marked && 'marked', orientation === 'vertical' && 'vertical', track === 'inverted' && 'trackInverted', track === false && 'trackFalse'],
 
-  const styleProps = _extends({}, props, {
+  const ownerState = _extends({}, props, {
     classes: classesProp,
@@ -675,3 +679,3 @@ disabled,
 
-  const classes = useUtilityClasses(styleProps);
+  const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(Root, _extends({
@@ -682,11 +686,11 @@ ref: handleRef,
     as: component,
-    styleProps: _extends({}, styleProps, rootProps.styleProps)
+    ownerState: _extends({}, ownerState, rootProps.ownerState)
   }, other, {
     className: clsx(classes.root, rootProps.className, className),
     children: [/*#__PURE__*/_jsx(Rail, _extends({}, railProps, !isHostComponent(Rail) && {
-      styleProps: _extends({}, styleProps, railProps.styleProps)
+      ownerState: _extends({}, ownerState, railProps.ownerState)
     }, {
       className: clsx(classes.rail, railProps.className)
     })), /*#__PURE__*/_jsx(Track, _extends({}, trackProps, !isHostComponent(Track) && {
-      styleProps: _extends({}, styleProps, trackProps.styleProps)
+      ownerState: _extends({}, ownerState, trackProps.ownerState)
     }, {
@@ -710,6 +714,5 @@ className: clsx(classes.track, trackProps.className),
         }, markProps, !isHostComponent(Mark) && {
-          styleProps: _extends({}, styleProps, markProps.styleProps, {
-            markActive
-          })
+          ownerState: _extends({}, ownerState, markProps.ownerState)
         }, {
+          markActive: markActive,
           style: _extends({}, style, markProps.style),
@@ -721,6 +724,5 @@ className: clsx(classes.mark, markProps.className, markActive && classes.markActive)
         }, markLabelProps, !isHostComponent(MarkLabel) && {
-          styleProps: _extends({}, styleProps, markLabelProps.styleProps, {
-            markLabelActive: markActive
-          })
+          ownerState: _extends({}, ownerState, markLabelProps.ownerState)
         }, {
+          markLabelActive: markActive,
           style: _extends({}, style, markLabelProps.style),
@@ -746,3 +748,3 @@ className: clsx(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
         }, !isHostComponent(ValueLabel) && {
-          styleProps: _extends({}, styleProps, valueLabelProps.styleProps)
+          ownerState: _extends({}, ownerState, valueLabelProps.ownerState)
         }, {
@@ -756,3 +758,3 @@ children: /*#__PURE__*/_jsx(Thumb, _extends({
           }, !isHostComponent(Thumb) && {
-            styleProps: _extends({}, styleProps, thumbProps.styleProps)
+            ownerState: _extends({}, ownerState, thumbProps.ownerState)
           }, {
@@ -759,0 +761,0 @@ style: _extends({}, style, {

SliderUnstyled/sliderUnstyledClasses.d.ts

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

SwitchUnstyled/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './SwitchUnstyled';

SwitchUnstyled/SwitchUnstyled.d.ts

@@ -23,2 +23,3 @@ import * as React from 'react';
         Input?: React.ElementType;
+        Track?: React.ElementType | null;
     };
@@ -33,2 +34,3 @@ /**
         input?: {};
+        track?: {};
     };
@@ -35,0 +37,0 @@ }

SwitchUnstyled/SwitchUnstyled.js

@@ -9,3 +9,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import classes from './switchUnstyledClasses';
-import appendStyleProps from '../utils/appendStyleProps';
+import appendOwnerState from '../utils/appendOwnerState';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -26,3 +26,3 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const SwitchUnstyled = /*#__PURE__*/React.forwardRef(function SwitchUnstyled(props, ref) {
-  var _ref, _components$Thumb, _componentsProps$thum, _components$Input, _componentsProps$inpu;
+  var _ref, _components$Thumb, _componentsProps$thum, _components$Input, _componentsProps$inpu, _components$Track, _componentsProps$trac;
 
@@ -63,3 +63,3 @@ const {
 
-  const styleProps = _extends({}, props, {
+  const ownerState = _extends({}, props, {
     checked,
@@ -72,7 +72,9 @@ disabled,
   const Root = (_ref = component != null ? component : components.Root) != null ? _ref : 'span';
-  const rootProps = appendStyleProps(Root, _extends({}, otherProps, componentsProps.root), styleProps);
+  const rootProps = appendOwnerState(Root, _extends({}, otherProps, componentsProps.root), ownerState);
   const Thumb = (_components$Thumb = components.Thumb) != null ? _components$Thumb : 'span';
-  const thumbProps = appendStyleProps(Thumb, (_componentsProps$thum = componentsProps.thumb) != null ? _componentsProps$thum : {}, styleProps);
+  const thumbProps = appendOwnerState(Thumb, (_componentsProps$thum = componentsProps.thumb) != null ? _componentsProps$thum : {}, ownerState);
   const Input = (_components$Input = components.Input) != null ? _components$Input : 'input';
-  const inputProps = appendStyleProps(Input, (_componentsProps$inpu = componentsProps.input) != null ? _componentsProps$inpu : {}, styleProps);
+  const inputProps = appendOwnerState(Input, (_componentsProps$inpu = componentsProps.input) != null ? _componentsProps$inpu : {}, ownerState);
+  const Track = components.Track === null ? () => null : (_components$Track = components.Track) != null ? _components$Track : 'span';
+  const trackProps = appendOwnerState(Track, (_componentsProps$trac = componentsProps.track) != null ? _componentsProps$trac : {}, ownerState);
   const stateClasses = clsx(checked && classes.checked, disabled && classes.disabled, focusVisible && classes.focusVisible, readOnly && classes.readOnly);
@@ -83,3 +85,5 @@ return /*#__PURE__*/_jsxs(Root, _extends({
     className: clsx(classes.root, stateClasses, className, rootProps == null ? void 0 : rootProps.className),
-    children: [/*#__PURE__*/_jsx(Thumb, _extends({}, thumbProps, {
+    children: [/*#__PURE__*/_jsx(Track, _extends({}, trackProps, {
+      className: clsx(classes.track, trackProps == null ? void 0 : trackProps.className)
+    })), /*#__PURE__*/_jsx(Thumb, _extends({}, thumbProps, {
       className: clsx(classes.thumb, thumbProps == null ? void 0 : thumbProps.className)
@@ -121,6 +125,9 @@ })), /*#__PURE__*/_jsx(Input, _extends({}, getInputProps(inputProps), {
    */
-  components: PropTypes.shape({
+  components: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .shape({
     Input: PropTypes.elementType,
     Root: PropTypes.elementType,
-    Thumb: PropTypes.elementType
+    Thumb: PropTypes.elementType,
+    Track: PropTypes.oneOfType([PropTypes.elementType, PropTypes.oneOf([null])])
   }),
@@ -127,0 +134,0 @@

SwitchUnstyled/switchUnstyledClasses.d.ts

@@ -6,2 +6,4 @@ export interface SwitchUnstyledClasses {
     input: string;
+    /** Class applied to the track element */
+    track: string;
     /** Class applied to the thumb element */
@@ -8,0 +10,0 @@ thumb: string;

SwitchUnstyled/switchUnstyledClasses.js

@@ -6,3 +6,3 @@ import generateUtilityClass from '../generateUtilityClass';
 }
-const switchUnstyledClasses = generateUtilityClasses('MuiSwitch', ['root', 'input', 'thumb', 'checked', 'disabled', 'focusVisible', 'readOnly']);
+const switchUnstyledClasses = generateUtilityClasses('MuiSwitch', ['root', 'input', 'track', 'thumb', 'checked', 'disabled', 'focusVisible', 'readOnly']);
 export default switchUnstyledClasses;

SwitchUnstyled/useSwitch.d.ts

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

utils/index.d.ts

 export { default as isHostComponent } from './isHostComponent';

utils/isHostComponent.d.ts

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

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

Lines of code

17086

increased by0.25%

Number of lines in readme file

22

increased by10%

Worsened metrics

Total package byte prevSize

929471

decreased by-37.57%

Dependency changes

• + Added@material-ui/utils@5.0.0-beta.5(transitive)

• - Removed@material-ui/utils@5.0.0-beta.4(transitive)

• Updated@material-ui/utils@5.0.0-beta.5

• Updatedreact-is@^17.0.2