@mui/material 9.0.0-alpha.4 → 9.0.0-beta.1

package/ButtonBase/useButtonBase.d.mts

@@ -0,0 +1,91 @@
+import * as React from 'react';
+export interface UseButtonBaseParameters {
+  /**
+   * Whether the root should be treated as a native `<button>` for render-time semantics.
+   */
+  nativeButton: boolean;
+  /**
+   * The explicit `nativeButton` value provided by the caller, if any.
+   */
+  nativeButtonProp?: boolean | undefined;
+  /**
+   * Whether the default rendered element is expected to be a native button when
+   * `nativeButton` was not explicitly provided.
+   * @default nativeButton
+   */
+  internalNativeButton?: boolean | undefined;
+  /**
+   * Whether to perform additional checks in dev mode on whether the resolved element
+   * matches the default native or non-native button expectation.
+   * Set to `true` to allow hook callers bypass this check, e.g. when the `component`
+   * prop is a string.
+   * @default false
+   */
+  allowInferredHostMismatch?: boolean | undefined;
+  /**
+   * The disabled state of the component.
+   */
+  disabled: boolean;
+  /**
+   * The `type` attribute for the element.
+   */
+  type?: string | undefined;
+  /**
+   * Whether the element has a `formAction` attribute. When true, the hook
+   * will not default `type` to `'button'` for native buttons so the browser
+   * can use its natural submit behaviour.
+   * @default false
+   */
+  hasFormAction?: boolean | undefined;
+  /**
+   * The `tabIndex` attribute for the element.
+   * @default 0
+   */
+  tabIndex?: number | undefined;
+  /**
+   * When `true`, a disabled root can remain focusable.
+   * When `undefined`, the feature is not enabled.
+   */
+  focusableWhenDisabled?: boolean | undefined;
+  /**
+   * When `true`, calls `event.stopPropagation()` on click before the disabled guard runs.
+   * @default false
+   */
+  stopEventPropagation?: boolean | undefined;
+  /**
+   * An additional function that will run before the user's `onKeyDown`, e.g.
+   * to trigger the ripple effect in `<ButtonBase>`.
+   */
+  onBeforeKeyDown?: React.KeyboardEventHandler<HTMLElement> | undefined;
+  /**
+   * An additional function that will run before the user's `onKeyUp`, e.g.
+   * to control the ripple effect in `<ButtonBase>`.
+   */
+  onBeforeKeyUp?: React.KeyboardEventHandler<HTMLElement> | undefined;
+}
+export interface ButtonBaseButtonProps {
+  role?: string | undefined;
+  'aria-disabled'?: boolean | undefined;
+  type?: string | undefined;
+  disabled?: boolean | undefined;
+  tabIndex: number;
+}
+export interface ButtonBaseExternalProps extends React.HTMLAttributes<any> {
+  'aria-disabled'?: boolean | undefined;
+  disabled?: boolean | undefined;
+  type?: string | undefined;
+}
+export interface ButtonBaseEventHandlers {
+  onClick: React.MouseEventHandler<HTMLElement>;
+  onKeyDown: React.KeyboardEventHandler<HTMLElement>;
+  onKeyUp: React.KeyboardEventHandler<HTMLElement>;
+}
+export interface UseButtonBaseReturnValue {
+  /**
+   * @param externalProps additional props for the button
+   * @returns props that should be spread on the button
+   */
+  getButtonProps: <ExternalProps extends ButtonBaseExternalProps = ButtonBaseExternalProps>(externalProps?: ExternalProps) => Omit<ExternalProps, keyof ButtonBaseEventHandlers> & ButtonBaseButtonProps & ButtonBaseEventHandlers;
+  rootRef: React.RefObject<HTMLElement | null>;
+}
+export default function useButtonBase(parameters: UseButtonBaseParameters): UseButtonBaseReturnValue;

package/ButtonBase/useButtonBase.d.ts

@@ -0,0 +1,91 @@
+import * as React from 'react';
+export interface UseButtonBaseParameters {
+  /**
+   * Whether the root should be treated as a native `<button>` for render-time semantics.
+   */
+  nativeButton: boolean;
+  /**
+   * The explicit `nativeButton` value provided by the caller, if any.
+   */
+  nativeButtonProp?: boolean | undefined;
+  /**
+   * Whether the default rendered element is expected to be a native button when
+   * `nativeButton` was not explicitly provided.
+   * @default nativeButton
+   */
+  internalNativeButton?: boolean | undefined;
+  /**
+   * Whether to perform additional checks in dev mode on whether the resolved element
+   * matches the default native or non-native button expectation.
+   * Set to `true` to allow hook callers bypass this check, e.g. when the `component`
+   * prop is a string.
+   * @default false
+   */
+  allowInferredHostMismatch?: boolean | undefined;
+  /**
+   * The disabled state of the component.
+   */
+  disabled: boolean;
+  /**
+   * The `type` attribute for the element.
+   */
+  type?: string | undefined;
+  /**
+   * Whether the element has a `formAction` attribute. When true, the hook
+   * will not default `type` to `'button'` for native buttons so the browser
+   * can use its natural submit behaviour.
+   * @default false
+   */
+  hasFormAction?: boolean | undefined;
+  /**
+   * The `tabIndex` attribute for the element.
+   * @default 0
+   */
+  tabIndex?: number | undefined;
+  /**
+   * When `true`, a disabled root can remain focusable.
+   * When `undefined`, the feature is not enabled.
+   */
+  focusableWhenDisabled?: boolean | undefined;
+  /**
+   * When `true`, calls `event.stopPropagation()` on click before the disabled guard runs.
+   * @default false
+   */
+  stopEventPropagation?: boolean | undefined;
+  /**
+   * An additional function that will run before the user's `onKeyDown`, e.g.
+   * to trigger the ripple effect in `<ButtonBase>`.
+   */
+  onBeforeKeyDown?: React.KeyboardEventHandler<HTMLElement> | undefined;
+  /**
+   * An additional function that will run before the user's `onKeyUp`, e.g.
+   * to control the ripple effect in `<ButtonBase>`.
+   */
+  onBeforeKeyUp?: React.KeyboardEventHandler<HTMLElement> | undefined;
+}
+export interface ButtonBaseButtonProps {
+  role?: string | undefined;
+  'aria-disabled'?: boolean | undefined;
+  type?: string | undefined;
+  disabled?: boolean | undefined;
+  tabIndex: number;
+}
+export interface ButtonBaseExternalProps extends React.HTMLAttributes<any> {
+  'aria-disabled'?: boolean | undefined;
+  disabled?: boolean | undefined;
+  type?: string | undefined;
+}
+export interface ButtonBaseEventHandlers {
+  onClick: React.MouseEventHandler<HTMLElement>;
+  onKeyDown: React.KeyboardEventHandler<HTMLElement>;
+  onKeyUp: React.KeyboardEventHandler<HTMLElement>;
+}
+export interface UseButtonBaseReturnValue {
+  /**
+   * @param externalProps additional props for the button
+   * @returns props that should be spread on the button
+   */
+  getButtonProps: <ExternalProps extends ButtonBaseExternalProps = ButtonBaseExternalProps>(externalProps?: ExternalProps) => Omit<ExternalProps, keyof ButtonBaseEventHandlers> & ButtonBaseButtonProps & ButtonBaseEventHandlers;
+  rootRef: React.RefObject<HTMLElement | null>;
+}
+export default function useButtonBase(parameters: UseButtonBaseParameters): UseButtonBaseReturnValue;

package/ButtonBase/useButtonBase.js

@@ -0,0 +1,174 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useButtonBase;
+var React = _interopRequireWildcard(require("react"));
+var _useFocusableWhenDisabled = _interopRequireDefault(require("../utils/useFocusableWhenDisabled"));
+const EMPTY = {};
+function useButtonBase(parameters) {
+  const {
+    nativeButton,
+    nativeButtonProp,
+    internalNativeButton = nativeButton,
+    allowInferredHostMismatch = false,
+    disabled,
+    type,
+    hasFormAction = false,
+    tabIndex = 0,
+    focusableWhenDisabled: focusableWhenDisabledParam,
+    stopEventPropagation = false,
+    onBeforeKeyDown,
+    onBeforeKeyUp
+  } = parameters;
+  const rootRef = React.useRef(null);
+  const focusableWhenDisabled = focusableWhenDisabledParam === true;
+  const focusableWhenDisabledProps = (0, _useFocusableWhenDisabled.default)({
+    focusableWhenDisabled,
+    disabled,
+    isNativeButton: nativeButton,
+    tabIndex
+  });
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      const root = rootRef.current;
+      if (root == null) {
+        return;
+      }
+      const isButtonTag = root.tagName === 'BUTTON';
+      if (nativeButtonProp !== undefined) {
+        if (nativeButtonProp && !isButtonTag) {
+          const message = 'MUI: A component that acts as a button expected a native <button> because the ' + '`nativeButton` prop is true. Rendering a non-<button> removes native button ' + 'semantics, which can impact forms and accessibility. Render a real <button> ' + 'or set `nativeButton` to `false`.';
+          console.error(message);
+        }
+        if (!nativeButtonProp && isButtonTag) {
+          const message = 'MUI: A component that acts as a button expected a non-<button> because the `nativeButton` ' + 'prop is false. Rendering a <button> keeps native behavior while additionally applies ' + 'non-native attributes and handlers, which can add unintended extra attributes (such ' + 'as `role` or `aria-disabled`). Render a non-<button> such as <div>, or set ' + '`nativeButton` to `true`.';
+          console.error(message);
+        }
+        return;
+      }
+      if (allowInferredHostMismatch) {
+        return;
+      }
+
+      // warn when expecting a native <button> element but a non-string `component` prop resolved to a non-button element
+      if (internalNativeButton && !isButtonTag) {
+        const message = 'MUI: A component rendering a native <button> resolved to a non-<button> element, ' + 'but `nativeButton={false}` was not specified and the resolved root is a non-<button>. ' + 'When rendering a custom component, set `nativeButton={false}` explicitly or render a <button> element.';
+        console.error(message);
+      }
+
+      // warn when expecting a non-button but a non-string `component` prop resolved to a native <button> element
+      if (!internalNativeButton && isButtonTag) {
+        const message = 'MUI: A component that acts as a non-native button resolved to a native <button> element, ' + 'but `nativeButton={true}` was not specified. ' + 'When rendering a custom component, set `nativeButton={true}` explicitly or render a non-<button> element.';
+        console.error(message);
+      }
+    }, [allowInferredHostMismatch, internalNativeButton, nativeButtonProp]);
+  }
+
+  // A helper for event handlers to determine whether to use browser-defined keyboard activation
+  // for native elements like <button> and <a href>, or synthesize Enter/Space clicks for non-native
+  // elements like `<div role="button">`.
+  // This is UNSAFE TO USE outside of event handers, e.g. in render.
+  const hasNativeKeyboardActivation = React.useCallback(() => {
+    const root = rootRef.current;
+    if (root == null) {
+      return nativeButton;
+    }
+    if (root.tagName === 'BUTTON') {
+      return true;
+    }
+
+    // Although this hook is not intended for links, this check is for
+    // backward compatibility with `<ButtonBase href="#" />` since ButtonBase
+    // uses the returned event handlers.
+    return Boolean(root.tagName === 'A' && root.href);
+  }, [nativeButton]);
+  const buttonProps = React.useMemo(() => {
+    const resolvedButtonProps = focusableWhenDisabled ? {} : {
+      tabIndex: disabled ? -1 : tabIndex
+    };
+    if (nativeButton) {
+      resolvedButtonProps.type = type === undefined && !hasFormAction ? 'button' : type;
+      if (!focusableWhenDisabled) {
+        resolvedButtonProps.disabled = disabled;
+      }
+    } else {
+      resolvedButtonProps.role = 'button';
+      if (!focusableWhenDisabled && disabled) {
+        resolvedButtonProps['aria-disabled'] = disabled;
+      }
+    }
+    if (focusableWhenDisabled) {
+      return {
+        ...resolvedButtonProps,
+        ...focusableWhenDisabledProps
+      };
+    }
+    return resolvedButtonProps;
+  }, [disabled, focusableWhenDisabled, focusableWhenDisabledProps, hasFormAction, nativeButton, tabIndex, type]);
+  const getButtonProps = React.useCallback((externalProps = EMPTY) => {
+    const {
+      onClick: externalOnClick,
+      onKeyDown: externalOnKeyDown,
+      onKeyUp: externalOnKeyUp,
+      ...otherExternalProps
+    } = externalProps;
+    const handleClick = event => {
+      if (stopEventPropagation) {
+        event.stopPropagation();
+      }
+      if (disabled) {
+        event.preventDefault();
+        return;
+      }
+      externalOnClick?.(event);
+    };
+    const handleKeyDown = event => {
+      if (focusableWhenDisabled) {
+        focusableWhenDisabledProps.onKeyDown(event);
+      }
+      if (disabled) {
+        return;
+      }
+      onBeforeKeyDown?.(event);
+      externalOnKeyDown?.(event);
+      if (event.target !== event.currentTarget || hasNativeKeyboardActivation()) {
+        return;
+      }
+      if (event.key === ' ') {
+        event.preventDefault();
+        return;
+      }
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        event.currentTarget.click();
+      }
+    };
+    const handleKeyUp = event => {
+      if (disabled) {
+        return;
+      }
+      onBeforeKeyUp?.(event);
+      externalOnKeyUp?.(event);
+      if (event.target === event.currentTarget && !hasNativeKeyboardActivation() && event.key === ' ' && !event.defaultPrevented) {
+        event.currentTarget.click();
+      }
+    };
+    return {
+      ...buttonProps,
+      ...otherExternalProps,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp
+    };
+  }, [buttonProps, disabled, focusableWhenDisabled, focusableWhenDisabledProps, hasNativeKeyboardActivation, onBeforeKeyDown, onBeforeKeyUp, stopEventPropagation]);
+  return {
+    getButtonProps,
+    rootRef
+  };
+}

package/ButtonBase/useButtonBase.mjs

@@ -0,0 +1,167 @@
+'use client';
+
+import * as React from 'react';
+import useFocusableWhenDisabled from "../utils/useFocusableWhenDisabled.mjs";
+const EMPTY = {};
+export default function useButtonBase(parameters) {
+  const {
+    nativeButton,
+    nativeButtonProp,
+    internalNativeButton = nativeButton,
+    allowInferredHostMismatch = false,
+    disabled,
+    type,
+    hasFormAction = false,
+    tabIndex = 0,
+    focusableWhenDisabled: focusableWhenDisabledParam,
+    stopEventPropagation = false,
+    onBeforeKeyDown,
+    onBeforeKeyUp
+  } = parameters;
+  const rootRef = React.useRef(null);
+  const focusableWhenDisabled = focusableWhenDisabledParam === true;
+  const focusableWhenDisabledProps = useFocusableWhenDisabled({
+    focusableWhenDisabled,
+    disabled,
+    isNativeButton: nativeButton,
+    tabIndex
+  });
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      const root = rootRef.current;
+      if (root == null) {
+        return;
+      }
+      const isButtonTag = root.tagName === 'BUTTON';
+      if (nativeButtonProp !== undefined) {
+        if (nativeButtonProp && !isButtonTag) {
+          const message = 'MUI: A component that acts as a button expected a native <button> because the ' + '`nativeButton` prop is true. Rendering a non-<button> removes native button ' + 'semantics, which can impact forms and accessibility. Render a real <button> ' + 'or set `nativeButton` to `false`.';
+          console.error(message);
+        }
+        if (!nativeButtonProp && isButtonTag) {
+          const message = 'MUI: A component that acts as a button expected a non-<button> because the `nativeButton` ' + 'prop is false. Rendering a <button> keeps native behavior while additionally applies ' + 'non-native attributes and handlers, which can add unintended extra attributes (such ' + 'as `role` or `aria-disabled`). Render a non-<button> such as <div>, or set ' + '`nativeButton` to `true`.';
+          console.error(message);
+        }
+        return;
+      }
+      if (allowInferredHostMismatch) {
+        return;
+      }
+
+      // warn when expecting a native <button> element but a non-string `component` prop resolved to a non-button element
+      if (internalNativeButton && !isButtonTag) {
+        const message = 'MUI: A component rendering a native <button> resolved to a non-<button> element, ' + 'but `nativeButton={false}` was not specified and the resolved root is a non-<button>. ' + 'When rendering a custom component, set `nativeButton={false}` explicitly or render a <button> element.';
+        console.error(message);
+      }
+
+      // warn when expecting a non-button but a non-string `component` prop resolved to a native <button> element
+      if (!internalNativeButton && isButtonTag) {
+        const message = 'MUI: A component that acts as a non-native button resolved to a native <button> element, ' + 'but `nativeButton={true}` was not specified. ' + 'When rendering a custom component, set `nativeButton={true}` explicitly or render a non-<button> element.';
+        console.error(message);
+      }
+    }, [allowInferredHostMismatch, internalNativeButton, nativeButtonProp]);
+  }
+
+  // A helper for event handlers to determine whether to use browser-defined keyboard activation
+  // for native elements like <button> and <a href>, or synthesize Enter/Space clicks for non-native
+  // elements like `<div role="button">`.
+  // This is UNSAFE TO USE outside of event handers, e.g. in render.
+  const hasNativeKeyboardActivation = React.useCallback(() => {
+    const root = rootRef.current;
+    if (root == null) {
+      return nativeButton;
+    }
+    if (root.tagName === 'BUTTON') {
+      return true;
+    }
+
+    // Although this hook is not intended for links, this check is for
+    // backward compatibility with `<ButtonBase href="#" />` since ButtonBase
+    // uses the returned event handlers.
+    return Boolean(root.tagName === 'A' && root.href);
+  }, [nativeButton]);
+  const buttonProps = React.useMemo(() => {
+    const resolvedButtonProps = focusableWhenDisabled ? {} : {
+      tabIndex: disabled ? -1 : tabIndex
+    };
+    if (nativeButton) {
+      resolvedButtonProps.type = type === undefined && !hasFormAction ? 'button' : type;
+      if (!focusableWhenDisabled) {
+        resolvedButtonProps.disabled = disabled;
+      }
+    } else {
+      resolvedButtonProps.role = 'button';
+      if (!focusableWhenDisabled && disabled) {
+        resolvedButtonProps['aria-disabled'] = disabled;
+      }
+    }
+    if (focusableWhenDisabled) {
+      return {
+        ...resolvedButtonProps,
+        ...focusableWhenDisabledProps
+      };
+    }
+    return resolvedButtonProps;
+  }, [disabled, focusableWhenDisabled, focusableWhenDisabledProps, hasFormAction, nativeButton, tabIndex, type]);
+  const getButtonProps = React.useCallback((externalProps = EMPTY) => {
+    const {
+      onClick: externalOnClick,
+      onKeyDown: externalOnKeyDown,
+      onKeyUp: externalOnKeyUp,
+      ...otherExternalProps
+    } = externalProps;
+    const handleClick = event => {
+      if (stopEventPropagation) {
+        event.stopPropagation();
+      }
+      if (disabled) {
+        event.preventDefault();
+        return;
+      }
+      externalOnClick?.(event);
+    };
+    const handleKeyDown = event => {
+      if (focusableWhenDisabled) {
+        focusableWhenDisabledProps.onKeyDown(event);
+      }
+      if (disabled) {
+        return;
+      }
+      onBeforeKeyDown?.(event);
+      externalOnKeyDown?.(event);
+      if (event.target !== event.currentTarget || hasNativeKeyboardActivation()) {
+        return;
+      }
+      if (event.key === ' ') {
+        event.preventDefault();
+        return;
+      }
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        event.currentTarget.click();
+      }
+    };
+    const handleKeyUp = event => {
+      if (disabled) {
+        return;
+      }
+      onBeforeKeyUp?.(event);
+      externalOnKeyUp?.(event);
+      if (event.target === event.currentTarget && !hasNativeKeyboardActivation() && event.key === ' ' && !event.defaultPrevented) {
+        event.currentTarget.click();
+      }
+    };
+    return {
+      ...buttonProps,
+      ...otherExternalProps,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp
+    };
+  }, [buttonProps, disabled, focusableWhenDisabled, focusableWhenDisabledProps, hasNativeKeyboardActivation, onBeforeKeyDown, onBeforeKeyUp, stopEventPropagation]);
+  return {
+    getButtonProps,
+    rootRef
+  };
+}

package/ButtonGroup/ButtonGroup.js

@@ -27,14 +27,6 @@ const overridesResolver = (props, styles) => {
   } = props;
   return [{
     [`& .${_buttonGroupClasses.default.grouped}`]: styles.grouped
-  }, {
-    [`& .${_buttonGroupClasses.default.grouped}`]: styles[`grouped${(0, _capitalize.default)(ownerState.orientation)}`]
-  }, {
-    [`& .${_buttonGroupClasses.default.grouped}`]: styles[`grouped${(0, _capitalize.default)(ownerState.variant)}`]
-  }, {
-    [`& .${_buttonGroupClasses.default.grouped}`]: styles[`grouped${(0, _capitalize.default)(ownerState.variant)}${(0, _capitalize.default)(ownerState.orientation)}`]
-  }, {
-    [`& .${_buttonGroupClasses.default.grouped}`]: styles[`grouped${(0, _capitalize.default)(ownerState.variant)}${(0, _capitalize.default)(ownerState.color)}`]
   }, {
     [`& .${_buttonGroupClasses.default.firstButton}`]: styles.firstButton
   }, {
@@ -55,7 +47,7 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root', variant, orientation, fullWidth && 'fullWidth', disableElevation && 'disableElevation', `color${(0, _capitalize.default)(color)}`],
-    grouped: ['grouped', `grouped${(0, _capitalize.default)(orientation)}`, `grouped${(0, _capitalize.default)(variant)}`, `grouped${(0, _capitalize.default)(variant)}${(0, _capitalize.default)(orientation)}`, `grouped${(0, _capitalize.default)(variant)}${(0, _capitalize.default)(color)}`, disabled && 'disabled'],
+    grouped: ['grouped', disabled && 'disabled'],
     firstButton: ['firstButton'],
     lastButton: ['lastButton'],
     middleButton: ['middleButton']

package/ButtonGroup/ButtonGroup.mjs

@@ -20,14 +20,6 @@ const overridesResolver = (props, styles) => {
   } = props;
   return [{
     [`& .${buttonGroupClasses.grouped}`]: styles.grouped
-  }, {
-    [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.orientation)}`]
-  }, {
-    [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}`]
-  }, {
-    [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.orientation)}`]
-  }, {
-    [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.color)}`]
   }, {
     [`& .${buttonGroupClasses.firstButton}`]: styles.firstButton
   }, {
@@ -48,7 +40,7 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root', variant, orientation, fullWidth && 'fullWidth', disableElevation && 'disableElevation', `color${capitalize(color)}`],
-    grouped: ['grouped', `grouped${capitalize(orientation)}`, `grouped${capitalize(variant)}`, `grouped${capitalize(variant)}${capitalize(orientation)}`, `grouped${capitalize(variant)}${capitalize(color)}`, disabled && 'disabled'],
+    grouped: ['grouped', disabled && 'disabled'],
     firstButton: ['firstButton'],
     lastButton: ['lastButton'],
     middleButton: ['middleButton']

package/ButtonGroup/buttonGroupClasses.d.mts

@@ -25,74 +25,6 @@ export interface ButtonGroupClasses {
   colorPrimary: string;
   /** Styles applied to the root element if `color="secondary"` */
   colorSecondary: string;
-  /** Styles applied to the children if `orientation="horizontal"`.
-   * @deprecated Combine the [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  groupedHorizontal: string;
-  /** Styles applied to the children if `orientation="vertical"`.
-   * @deprecated Combine the [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  groupedVertical: string;
-  /** Styles applied to the children if `variant="text"`.
-   * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-text) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  groupedText: string;
-  /** Styles applied to the children if `variant="text"` and `orientation="horizontal"`.
-   * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-text) , [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  groupedTextHorizontal: string;
-  /** Styles applied to the children if `variant="text"` and `orientation="vertical"`.
-   * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-text) , [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  groupedTextVertical: string;
-  /** Styles applied to the children if `variant="text"` and `color="primary"`.
-   * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-text) , [.MuiButtonGroup-colorPrimary](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-colorPrimary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  groupedTextPrimary: string;
-  /** Styles applied to the children if `variant="text"` and `color="secondary"`.
-   * @deprecated Combine the [.MuiButtonGroup-text](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-text) , [.MuiButtonGroup-colorSecondary](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-colorSecondary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  groupedTextSecondary: string;
-  /** Styles applied to the children if `variant="outlined"`.
-   * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-outlined) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  groupedOutlined: string;
-  /** Styles applied to the children if `variant="outlined"` and `orientation="horizontal"`.
-   * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-outlined) , [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  groupedOutlinedHorizontal: string;
-  /** Styles applied to the children if `variant="outlined"` and `orientation="vertical"`.
-   * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-outlined) , [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  groupedOutlinedVertical: string;
-  /** Styles applied to the children if `variant="outlined"` and `color="primary"`.
-   * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-outlined) , [.MuiButtonGroup-colorPrimary](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-colorPrimary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  groupedOutlinedPrimary: string;
-  /** Styles applied to the children if `variant="outlined"` and `color="secondary"`.
-   * @deprecated Combine the [.MuiButtonGroup-outlined](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-outlined) , [.MuiButtonGroup-colorSecondary](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-colorSecondary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  groupedOutlinedSecondary: string;
-  /** Styles applied to the children if `variant="contained"`.
-   * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-contained) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  groupedContained: string;
-  /** Styles applied to the children if `variant="contained"` and `orientation="horizontal"`.
-   * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-contained) , [.MuiButtonGroup-horizontal](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-horizontal) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  groupedContainedHorizontal: string;
-  /** Styles applied to the children if `variant="contained"` and `orientation="vertical"`.
-   * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-contained) , [.MuiButtonGroup-vertical](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-vertical) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  groupedContainedVertical: string;
-  /** Styles applied to the children if `variant="contained"` and `color="primary"`.
-   * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-contained) , [.MuiButtonGroup-colorPrimary](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-colorPrimary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  groupedContainedPrimary: string;
-  /** Styles applied to the children if `variant="contained"` and `color="secondary"`.
-   * @deprecated Combine the [.MuiButtonGroup-contained](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-contained) , [.MuiButtonGroup-colorSecondary](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-colorSecondary) and [.MuiButtonGroup-grouped](/material-ui/api/button-group/#button-group-classes-MuiButtonGroup-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  groupedContainedSecondary: string;
   /** Styles applied to the last button in the button group. */
   lastButton: string;
   /** Styles applied to buttons in the middle of the button group. */