@mui/material 5.10.2 → 5.10.5

package/esm/Switch/Switch.js

@@ -0,0 +1,346 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["className", "color", "edge", "size", "sx"];
+// @inheritedComponent IconButton
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { refType } from '@mui/utils';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { alpha, darken, lighten } from '@mui/system';
+import capitalize from '../utils/capitalize';
+import SwitchBase from '../internal/SwitchBase';
+import useThemeProps from '../styles/useThemeProps';
+import styled from '../styles/styled';
+import switchClasses, { getSwitchUtilityClass } from './switchClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    edge,
+    size,
+    color,
+    checked,
+    disabled
+  } = ownerState;
+  const slots = {
+    root: ['root', edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`],
+    switchBase: ['switchBase', `color${capitalize(color)}`, checked && 'checked', disabled && 'disabled'],
+    thumb: ['thumb'],
+    track: ['track'],
+    input: ['input']
+  };
+  const composedClasses = composeClasses(slots, getSwitchUtilityClass, classes);
+  return _extends({}, classes, composedClasses);
+};
+
+const SwitchRoot = styled('span', {
+  name: 'MuiSwitch',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.edge && styles[`edge${capitalize(ownerState.edge)}`], styles[`size${capitalize(ownerState.size)}`]];
+  }
+})(({
+  ownerState
+}) => _extends({
+  display: 'inline-flex',
+  width: 34 + 12 * 2,
+  height: 14 + 12 * 2,
+  overflow: 'hidden',
+  padding: 12,
+  boxSizing: 'border-box',
+  position: 'relative',
+  flexShrink: 0,
+  zIndex: 0,
+  // Reset the stacking context.
+  verticalAlign: 'middle',
+  // For correct alignment with the text.
+  '@media print': {
+    colorAdjust: 'exact'
+  }
+}, ownerState.edge === 'start' && {
+  marginLeft: -8
+}, ownerState.edge === 'end' && {
+  marginRight: -8
+}, ownerState.size === 'small' && {
+  width: 40,
+  height: 24,
+  padding: 7,
+  [`& .${switchClasses.thumb}`]: {
+    width: 16,
+    height: 16
+  },
+  [`& .${switchClasses.switchBase}`]: {
+    padding: 4,
+    [`&.${switchClasses.checked}`]: {
+      transform: 'translateX(16px)'
+    }
+  }
+}));
+const SwitchSwitchBase = styled(SwitchBase, {
+  name: 'MuiSwitch',
+  slot: 'SwitchBase',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.switchBase, {
+      [`& .${switchClasses.input}`]: styles.input
+    }, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`]];
+  }
+})(({
+  theme
+}) => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  zIndex: 1,
+  // Render above the focus ripple.
+  color: theme.vars ? theme.vars.palette.Switch.defaultColor : `${theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[300]}`,
+  transition: theme.transitions.create(['left', 'transform'], {
+    duration: theme.transitions.duration.shortest
+  }),
+  [`&.${switchClasses.checked}`]: {
+    transform: 'translateX(20px)'
+  },
+  [`&.${switchClasses.disabled}`]: {
+    color: theme.vars ? theme.vars.palette.Switch.defaultDisabledColor : `${theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600]}`
+  },
+  [`&.${switchClasses.checked} + .${switchClasses.track}`]: {
+    opacity: 0.5
+  },
+  [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
+    opacity: theme.vars ? theme.vars.opacity.switchTrackDisabled : `${theme.palette.mode === 'light' ? 0.12 : 0.2}`
+  },
+  [`& .${switchClasses.input}`]: {
+    left: '-100%',
+    width: '300%'
+  }
+}), ({
+  theme,
+  ownerState
+}) => _extends({
+  '&:hover': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      backgroundColor: 'transparent'
+    }
+  }
+}, ownerState.color !== 'default' && {
+  [`&.${switchClasses.checked}`]: {
+    color: (theme.vars || theme).palette[ownerState.color].main,
+    '&:hover': {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    },
+    [`&.${switchClasses.disabled}`]: {
+      color: theme.vars ? theme.vars.palette.Switch[`${ownerState.color}DisabledColor`] : `${theme.palette.mode === 'light' ? lighten(theme.palette[ownerState.color].main, 0.62) : darken(theme.palette[ownerState.color].main, 0.55)}`
+    }
+  },
+  [`&.${switchClasses.checked} + .${switchClasses.track}`]: {
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+  }
+}));
+const SwitchTrack = styled('span', {
+  name: 'MuiSwitch',
+  slot: 'Track',
+  overridesResolver: (props, styles) => styles.track
+})(({
+  theme
+}) => ({
+  height: '100%',
+  width: '100%',
+  borderRadius: 14 / 2,
+  zIndex: -1,
+  transition: theme.transitions.create(['opacity', 'background-color'], {
+    duration: theme.transitions.duration.shortest
+  }),
+  backgroundColor: theme.vars ? theme.vars.palette.common.onBackground : `${theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white}`,
+  opacity: theme.vars ? theme.vars.opacity.switchTrack : `${theme.palette.mode === 'light' ? 0.38 : 0.3}`
+}));
+const SwitchThumb = styled('span', {
+  name: 'MuiSwitch',
+  slot: 'Thumb',
+  overridesResolver: (props, styles) => styles.thumb
+})(({
+  theme
+}) => ({
+  boxShadow: (theme.vars || theme).shadows[1],
+  backgroundColor: 'currentColor',
+  width: 20,
+  height: 20,
+  borderRadius: '50%'
+}));
+const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiSwitch'
+  });
+
+  const {
+    className,
+    color = 'primary',
+    edge = false,
+    size = 'medium',
+    sx
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const ownerState = _extends({}, props, {
+    color,
+    edge,
+    size
+  });
+
+  const classes = useUtilityClasses(ownerState);
+
+  const icon = /*#__PURE__*/_jsx(SwitchThumb, {
+    className: classes.thumb,
+    ownerState: ownerState
+  });
+
+  return /*#__PURE__*/_jsxs(SwitchRoot, {
+    className: clsx(classes.root, className),
+    sx: sx,
+    ownerState: ownerState,
+    children: [/*#__PURE__*/_jsx(SwitchSwitchBase, _extends({
+      type: "checkbox",
+      icon: icon,
+      checkedIcon: icon,
+      ref: ref,
+      ownerState: ownerState
+    }, other, {
+      classes: _extends({}, classes, {
+        root: classes.switchBase
+      })
+    })), /*#__PURE__*/_jsx(SwitchTrack, {
+      className: classes.track,
+      ownerState: ownerState
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" ? Switch.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * If `true`, the component is checked.
+   */
+  checked: PropTypes.bool,
+
+  /**
+   * The icon to display when the component is checked.
+   */
+  checkedIcon: PropTypes.node,
+
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'primary'
+   */
+  color: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
+
+  /**
+   * The default checked state. Use when the component is not controlled.
+   */
+  defaultChecked: PropTypes.bool,
+
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * If `true`, the ripple effect is disabled.
+   */
+  disableRipple: PropTypes.bool,
+
+  /**
+   * If given, uses a negative margin to counteract the padding on one
+   * side (this is often helpful for aligning the left or right
+   * side of the icon with content above or below, without ruining the border
+   * size and shape).
+   * @default false
+   */
+  edge: PropTypes.oneOf(['end', 'start', false]),
+
+  /**
+   * The icon to display when the component is unchecked.
+   */
+  icon: PropTypes.node,
+
+  /**
+   * The id of the `input` element.
+   */
+  id: PropTypes.string,
+
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   */
+  inputProps: PropTypes.object,
+
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: refType,
+
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * If `true`, the `input` element is required.
+   */
+  required: PropTypes.bool,
+
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense switch styling.
+   * @default 'medium'
+   */
+  size: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+
+  /**
+   * The value of the component. The DOM API casts this to a string.
+   * The browser uses "on" as the default value.
+   */
+  value: PropTypes.any
+} : void 0;
+export default Switch;

package/esm/Switch/index.js

@@ -0,0 +1,3 @@
+export { default } from './Switch';
+export { default as switchClasses } from './switchClasses';
+export * from './switchClasses';

package/esm/Switch/switchClasses.js

@@ -0,0 +1,6 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+export function getSwitchUtilityClass(slot) {
+  return generateUtilityClass('MuiSwitch', slot);
+}
+const switchClasses = generateUtilityClasses('MuiSwitch', ['root', 'edgeStart', 'edgeEnd', 'switchBase', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium', 'checked', 'disabled', 'input', 'thumb', 'track']);
+export default switchClasses;

package/esm/Tab/Tab.js

@@ -0,0 +1,287 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["className", "disabled", "disableFocusRipple", "fullWidth", "icon", "iconPosition", "indicator", "label", "onChange", "onClick", "onFocus", "selected", "selectionFollowsFocus", "textColor", "value", "wrapped"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
+import ButtonBase from '../ButtonBase';
+import capitalize from '../utils/capitalize';
+import useThemeProps from '../styles/useThemeProps';
+import styled from '../styles/styled';
+import unsupportedProp from '../utils/unsupportedProp';
+import tabClasses, { getTabUtilityClass } from './tabClasses';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    textColor,
+    fullWidth,
+    wrapped,
+    icon,
+    label,
+    selected,
+    disabled
+  } = ownerState;
+  const slots = {
+    root: ['root', icon && label && 'labelIcon', `textColor${capitalize(textColor)}`, fullWidth && 'fullWidth', wrapped && 'wrapped', selected && 'selected', disabled && 'disabled'],
+    iconWrapper: ['iconWrapper']
+  };
+  return composeClasses(slots, getTabUtilityClass, classes);
+};
+
+const TabRoot = styled(ButtonBase, {
+  name: 'MuiTab',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${capitalize(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped];
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends({}, theme.typography.button, {
+  maxWidth: 360,
+  minWidth: 90,
+  position: 'relative',
+  minHeight: 48,
+  flexShrink: 0,
+  padding: '12px 16px',
+  overflow: 'hidden',
+  whiteSpace: 'normal',
+  textAlign: 'center'
+}, ownerState.label && {
+  flexDirection: ownerState.iconPosition === 'top' || ownerState.iconPosition === 'bottom' ? 'column' : 'row'
+}, {
+  lineHeight: 1.25
+}, ownerState.icon && ownerState.label && {
+  minHeight: 72,
+  paddingTop: 9,
+  paddingBottom: 9,
+  [`& > .${tabClasses.iconWrapper}`]: _extends({}, ownerState.iconPosition === 'top' && {
+    marginBottom: 6
+  }, ownerState.iconPosition === 'bottom' && {
+    marginTop: 6
+  }, ownerState.iconPosition === 'start' && {
+    marginRight: theme.spacing(1)
+  }, ownerState.iconPosition === 'end' && {
+    marginLeft: theme.spacing(1)
+  })
+}, ownerState.textColor === 'inherit' && {
+  color: 'inherit',
+  opacity: 0.6,
+  // same opacity as theme.palette.text.secondary
+  [`&.${tabClasses.selected}`]: {
+    opacity: 1
+  },
+  [`&.${tabClasses.disabled}`]: {
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
+  }
+}, ownerState.textColor === 'primary' && {
+  color: (theme.vars || theme).palette.text.secondary,
+  [`&.${tabClasses.selected}`]: {
+    color: (theme.vars || theme).palette.primary.main
+  },
+  [`&.${tabClasses.disabled}`]: {
+    color: (theme.vars || theme).palette.text.disabled
+  }
+}, ownerState.textColor === 'secondary' && {
+  color: (theme.vars || theme).palette.text.secondary,
+  [`&.${tabClasses.selected}`]: {
+    color: (theme.vars || theme).palette.secondary.main
+  },
+  [`&.${tabClasses.disabled}`]: {
+    color: (theme.vars || theme).palette.text.disabled
+  }
+}, ownerState.fullWidth && {
+  flexShrink: 1,
+  flexGrow: 1,
+  flexBasis: 0,
+  maxWidth: 'none'
+}, ownerState.wrapped && {
+  fontSize: theme.typography.pxToRem(12)
+}));
+const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiTab'
+  });
+
+  const {
+    className,
+    disabled = false,
+    disableFocusRipple = false,
+    // eslint-disable-next-line react/prop-types
+    fullWidth,
+    icon: iconProp,
+    iconPosition = 'top',
+    // eslint-disable-next-line react/prop-types
+    indicator,
+    label,
+    onChange,
+    onClick,
+    onFocus,
+    // eslint-disable-next-line react/prop-types
+    selected,
+    // eslint-disable-next-line react/prop-types
+    selectionFollowsFocus,
+    // eslint-disable-next-line react/prop-types
+    textColor = 'inherit',
+    value,
+    wrapped = false
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const ownerState = _extends({}, props, {
+    disabled,
+    disableFocusRipple,
+    selected,
+    icon: !!iconProp,
+    iconPosition,
+    label: !!label,
+    fullWidth,
+    textColor,
+    wrapped
+  });
+
+  const classes = useUtilityClasses(ownerState);
+  const icon = iconProp && label && /*#__PURE__*/React.isValidElement(iconProp) ? /*#__PURE__*/React.cloneElement(iconProp, {
+    className: clsx(classes.iconWrapper, iconProp.props.className)
+  }) : iconProp;
+
+  const handleClick = event => {
+    if (!selected && onChange) {
+      onChange(event, value);
+    }
+
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
+  const handleFocus = event => {
+    if (selectionFollowsFocus && !selected && onChange) {
+      onChange(event, value);
+    }
+
+    if (onFocus) {
+      onFocus(event);
+    }
+  };
+
+  return /*#__PURE__*/_jsxs(TabRoot, _extends({
+    focusRipple: !disableFocusRipple,
+    className: clsx(classes.root, className),
+    ref: ref,
+    role: "tab",
+    "aria-selected": selected,
+    disabled: disabled,
+    onClick: handleClick,
+    onFocus: handleFocus,
+    ownerState: ownerState,
+    tabIndex: selected ? 0 : -1
+  }, other, {
+    children: [iconPosition === 'top' || iconPosition === 'start' ? /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [icon, label]
+    }) : /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [label, icon]
+    }), indicator]
+  }));
+});
+process.env.NODE_ENV !== "production" ? Tab.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * This prop isn't supported.
+   * Use the `component` prop if you need to change the children structure.
+   */
+  children: unsupportedProp,
+
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: PropTypes.bool,
+
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: PropTypes.bool,
+
+  /**
+   * The icon to display.
+   */
+  icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+
+  /**
+   * The position of the icon relative to the label.
+   * @default 'top'
+   */
+  iconPosition: PropTypes.oneOf(['bottom', 'end', 'start', 'top']),
+
+  /**
+   * The label element.
+   */
+  label: PropTypes.node,
+
+  /**
+   * @ignore
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * @ignore
+   */
+  onFocus: PropTypes.func,
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+
+  /**
+   * You can provide your own value. Otherwise, we fallback to the child position index.
+   */
+  value: PropTypes.any,
+
+  /**
+   * Tab labels appear in a single row.
+   * They can use a second line if needed.
+   * @default false
+   */
+  wrapped: PropTypes.bool
+} : void 0;
+export default Tab;

package/esm/Tab/index.js

@@ -0,0 +1,3 @@
+export { default } from './Tab';
+export { default as tabClasses } from './tabClasses';
+export * from './tabClasses';

package/esm/Tab/tabClasses.js

@@ -0,0 +1,6 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+export function getTabUtilityClass(slot) {
+  return generateUtilityClass('MuiTab', slot);
+}
+const tabClasses = generateUtilityClasses('MuiTab', ['root', 'labelIcon', 'textColorInherit', 'textColorPrimary', 'textColorSecondary', 'selected', 'disabled', 'fullWidth', 'wrapped', 'iconWrapper']);
+export default tabClasses;