@mui/material 5.14.7 → 5.14.9

package/ButtonGroup/ButtonGroup.js

@@ -13,6 +13,7 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses';
 import ButtonGroupContext from './ButtonGroupContext';
+import ButtonGroupButtonContext from './ButtonGroupButtonContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 const overridesResolver = (props, styles) => {
   const {
@@ -28,6 +29,12 @@ const overridesResolver = (props, styles) => {
     [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.orientation)}`]
   }, {
     [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.color)}`]
+  }, {
+    [`& .${buttonGroupClasses.firstButton}`]: styles.firstButton
+  }, {
+    [`& .${buttonGroupClasses.lastButton}`]: styles.lastButton
+  }, {
+    [`& .${buttonGroupClasses.middleButton}`]: styles.middleButton
   }, styles.root, styles[ownerState.variant], ownerState.disableElevation === true && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.orientation === 'vertical' && styles.vertical];
 };
 const useUtilityClasses = ownerState => {
@@ -42,7 +49,10 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root', variant, orientation === 'vertical' && 'vertical', fullWidth && 'fullWidth', disableElevation && 'disableElevation'],
-    grouped: ['grouped', `grouped${capitalize(orientation)}`, `grouped${capitalize(variant)}`, `grouped${capitalize(variant)}${capitalize(orientation)}`, `grouped${capitalize(variant)}${capitalize(color)}`, disabled && 'disabled']
+    grouped: ['grouped', `grouped${capitalize(orientation)}`, `grouped${capitalize(variant)}`, `grouped${capitalize(variant)}${capitalize(orientation)}`, `grouped${capitalize(variant)}${capitalize(color)}`, disabled && 'disabled'],
+    firstButton: ['firstButton'],
+    lastButton: ['lastButton'],
+    middleButton: ['middleButton']
   };
   return composeClasses(slots, getButtonGroupUtilityClass, classes);
 };
@@ -67,63 +77,63 @@ const ButtonGroupRoot = styled('div', {
 }, {
   [`& .${buttonGroupClasses.grouped}`]: _extends({
     minWidth: 40,
-    '&:not(:first-of-type)': _extends({}, ownerState.orientation === 'horizontal' && {
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0
-    }, ownerState.orientation === 'vertical' && {
-      borderTopRightRadius: 0,
-      borderTopLeftRadius: 0
-    }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-      marginLeft: -1
-    }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-      marginTop: -1
-    }),
-    '&:not(:last-of-type)': _extends({}, ownerState.orientation === 'horizontal' && {
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0
-    }, ownerState.orientation === 'vertical' && {
-      borderBottomRightRadius: 0,
-      borderBottomLeftRadius: 0
-    }, ownerState.variant === 'text' && ownerState.orientation === 'horizontal' && {
-      borderRight: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
-      [`&.${buttonGroupClasses.disabled}`]: {
-        borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
-      }
-    }, ownerState.variant === 'text' && ownerState.orientation === 'vertical' && {
-      borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
-      [`&.${buttonGroupClasses.disabled}`]: {
-        borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
-      }
-    }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-      borderColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : alpha(theme.palette[ownerState.color].main, 0.5)
-    }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-      borderRightColor: 'transparent'
-    }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-      borderBottomColor: 'transparent'
-    }, ownerState.variant === 'contained' && ownerState.orientation === 'horizontal' && {
-      borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
-      [`&.${buttonGroupClasses.disabled}`]: {
-        borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
-      }
-    }, ownerState.variant === 'contained' && ownerState.orientation === 'vertical' && {
-      borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
-      [`&.${buttonGroupClasses.disabled}`]: {
-        borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
-      }
-    }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-      borderColor: (theme.vars || theme).palette[ownerState.color].dark
-    }, {
-      '&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-        borderRightColor: 'currentColor'
-      }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-        borderBottomColor: 'currentColor'
-      })
-    }),
     '&:hover': _extends({}, ownerState.variant === 'contained' && {
       boxShadow: 'none'
     })
   }, ownerState.variant === 'contained' && {
     boxShadow: 'none'
+  }),
+  [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: _extends({}, ownerState.orientation === 'horizontal' && {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+  }, ownerState.orientation === 'vertical' && {
+    borderBottomRightRadius: 0,
+    borderBottomLeftRadius: 0
+  }, ownerState.variant === 'text' && ownerState.orientation === 'horizontal' && {
+    borderRight: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
+    [`&.${buttonGroupClasses.disabled}`]: {
+      borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+    }
+  }, ownerState.variant === 'text' && ownerState.orientation === 'vertical' && {
+    borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
+    [`&.${buttonGroupClasses.disabled}`]: {
+      borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+    }
+  }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
+    borderColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : alpha(theme.palette[ownerState.color].main, 0.5)
+  }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
+    borderRightColor: 'transparent'
+  }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
+    borderBottomColor: 'transparent'
+  }, ownerState.variant === 'contained' && ownerState.orientation === 'horizontal' && {
+    borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
+    [`&.${buttonGroupClasses.disabled}`]: {
+      borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+    }
+  }, ownerState.variant === 'contained' && ownerState.orientation === 'vertical' && {
+    borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
+    [`&.${buttonGroupClasses.disabled}`]: {
+      borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+    }
+  }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
+    borderColor: (theme.vars || theme).palette[ownerState.color].dark
+  }, {
+    '&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
+      borderRightColor: 'currentColor'
+    }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
+      borderBottomColor: 'currentColor'
+    })
+  }),
+  [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: _extends({}, ownerState.orientation === 'horizontal' && {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0
+  }, ownerState.orientation === 'vertical' && {
+    borderTopRightRadius: 0,
+    borderTopLeftRadius: 0
+  }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
+    marginLeft: -1
+  }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
+    marginTop: -1
   })
 }));
 const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps, ref) {
@@ -170,6 +180,20 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
     size,
     variant
   }), [color, disabled, disableElevation, disableFocusRipple, disableRipple, fullWidth, size, variant, classes.grouped]);
+  const getButtonPositionClassName = (index, childrenParam) => {
+    const isFirstButton = index === 0;
+    const isLastButton = index === React.Children.count(childrenParam) - 1;
+    if (isFirstButton && isLastButton) {
+      return '';
+    }
+    if (isFirstButton) {
+      return classes.firstButton;
+    }
+    if (isLastButton) {
+      return classes.lastButton;
+    }
+    return classes.middleButton;
+  };
   return /*#__PURE__*/_jsx(ButtonGroupRoot, _extends({
     as: component,
     role: "group",
@@ -179,7 +203,15 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
   }, other, {
     children: /*#__PURE__*/_jsx(ButtonGroupContext.Provider, {
       value: context,
-      children: children
+      children: React.Children.map(children, (child, index) => {
+        if (! /*#__PURE__*/React.isValidElement(child)) {
+          return child;
+        }
+        return /*#__PURE__*/_jsx(ButtonGroupButtonContext.Provider, {
+          value: getButtonPositionClassName(index, children),
+          children: child
+        });
+      })
     })
   }));
 });

package/ButtonGroup/ButtonGroupButtonContext.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ * @ignore - internal component.
+ */
+declare const ButtonGroupButtonContext: React.Context<string | undefined>;
+export default ButtonGroupButtonContext;

package/ButtonGroup/ButtonGroupButtonContext.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+/**
+ * @ignore - internal component.
+ */
+const ButtonGroupButtonContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+  ButtonGroupButtonContext.displayName = 'ButtonGroupButtonContext';
+}
+export default ButtonGroupButtonContext;

package/ButtonGroup/buttonGroupClasses.d.ts

@@ -11,6 +11,8 @@ export interface ButtonGroupClasses {
     disableElevation: string;
     /** State class applied to the child elements if `disabled={true}`. */
     disabled: string;
+    /** Styles applied to the first button in the button group. */
+    firstButton: string;
     /** Styles applied to the root element if `fullWidth={true}`. */
     fullWidth: string;
     /** Styles applied to the root element if `orientation="vertical"`. */
@@ -51,6 +53,10 @@ export interface ButtonGroupClasses {
     groupedContainedPrimary: string;
     /** Styles applied to the children if `variant="contained"` and `color="secondary"`. */
     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. */
+    middleButton: string;
 }
 export type ButtonGroupClassKey = keyof ButtonGroupClasses;
 export declare function getButtonGroupUtilityClass(slot: string): string;

package/ButtonGroup/buttonGroupClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
 export function getButtonGroupUtilityClass(slot) {
   return generateUtilityClass('MuiButtonGroup', slot);
 }
-const buttonGroupClasses = generateUtilityClasses('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'fullWidth', 'vertical', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary']);
+const buttonGroupClasses = generateUtilityClasses('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'firstButton', 'fullWidth', 'vertical', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary', 'lastButton', 'middleButton']);
 export default buttonGroupClasses;