@mui/material 7.0.0 → 7.0.2

package/modern/TextareaAutosize/TextareaAutosize.js

@@ -1,243 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { unstable_debounce as debounce, unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback, unstable_ownerWindow as ownerWindow } from '@mui/utils';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function getStyleValue(value) {
-  return parseInt(value, 10) || 0;
-}
-const styles = {
-  shadow: {
-    // Visibility needed to hide the extra text area on iPads
-    visibility: 'hidden',
-    // Remove from the content flow
-    position: 'absolute',
-    // Ignore the scrollbar width
-    overflow: 'hidden',
-    height: 0,
-    top: 0,
-    left: 0,
-    // Create a new layer, increase the isolation of the computed values
-    transform: 'translateZ(0)'
-  }
-};
-function isObjectEmpty(object) {
-  // eslint-disable-next-line
-  for (const _ in object) {
-    return false;
-  }
-  return true;
-}
-function isEmpty(obj) {
-  return isObjectEmpty(obj) || obj.outerHeightStyle === 0 && !obj.overflowing;
-}
-
-/**
- *
- * Demos:
- *
- * - [Textarea Autosize](https://mui.com/material-ui/react-textarea-autosize/)
- *
- * API:
- *
- * - [TextareaAutosize API](https://mui.com/material-ui/api/textarea-autosize/)
- */
-const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(props, forwardedRef) {
-  const {
-    onChange,
-    maxRows,
-    minRows = 1,
-    style,
-    value,
-    ...other
-  } = props;
-  const {
-    current: isControlled
-  } = React.useRef(value != null);
-  const textareaRef = React.useRef(null);
-  const handleRef = useForkRef(forwardedRef, textareaRef);
-  const heightRef = React.useRef(null);
-  const hiddenTextareaRef = React.useRef(null);
-  const calculateTextareaStyles = React.useCallback(() => {
-    const textarea = textareaRef.current;
-    const hiddenTextarea = hiddenTextareaRef.current;
-    if (!textarea || !hiddenTextarea) {
-      return undefined;
-    }
-    const containerWindow = ownerWindow(textarea);
-    const computedStyle = containerWindow.getComputedStyle(textarea);
-
-    // If input's width is shrunk and it's not visible, don't sync height.
-    if (computedStyle.width === '0px') {
-      return {
-        outerHeightStyle: 0,
-        overflowing: false
-      };
-    }
-    hiddenTextarea.style.width = computedStyle.width;
-    hiddenTextarea.value = textarea.value || props.placeholder || 'x';
-    if (hiddenTextarea.value.slice(-1) === '\n') {
-      // Certain fonts which overflow the line height will cause the textarea
-      // to report a different scrollHeight depending on whether the last line
-      // is empty. Make it non-empty to avoid this issue.
-      hiddenTextarea.value += ' ';
-    }
-    const boxSizing = computedStyle.boxSizing;
-    const padding = getStyleValue(computedStyle.paddingBottom) + getStyleValue(computedStyle.paddingTop);
-    const border = getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);
-
-    // The height of the inner content
-    const innerHeight = hiddenTextarea.scrollHeight;
-
-    // Measure height of a textarea with a single row
-    hiddenTextarea.value = 'x';
-    const singleRowHeight = hiddenTextarea.scrollHeight;
-
-    // The height of the outer content
-    let outerHeight = innerHeight;
-    if (minRows) {
-      outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
-    }
-    if (maxRows) {
-      outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);
-    }
-    outerHeight = Math.max(outerHeight, singleRowHeight);
-
-    // Take the box sizing into account for applying this value as a style.
-    const outerHeightStyle = outerHeight + (boxSizing === 'border-box' ? padding + border : 0);
-    const overflowing = Math.abs(outerHeight - innerHeight) <= 1;
-    return {
-      outerHeightStyle,
-      overflowing
-    };
-  }, [maxRows, minRows, props.placeholder]);
-  const didHeightChange = useEventCallback(() => {
-    const textarea = textareaRef.current;
-    const textareaStyles = calculateTextareaStyles();
-    if (!textarea || !textareaStyles || isEmpty(textareaStyles)) {
-      return false;
-    }
-    const outerHeightStyle = textareaStyles.outerHeightStyle;
-    return heightRef.current != null && heightRef.current !== outerHeightStyle;
-  });
-  const syncHeight = React.useCallback(() => {
-    const textarea = textareaRef.current;
-    const textareaStyles = calculateTextareaStyles();
-    if (!textarea || !textareaStyles || isEmpty(textareaStyles)) {
-      return;
-    }
-    const outerHeightStyle = textareaStyles.outerHeightStyle;
-    if (heightRef.current !== outerHeightStyle) {
-      heightRef.current = outerHeightStyle;
-      textarea.style.height = `${outerHeightStyle}px`;
-    }
-    textarea.style.overflow = textareaStyles.overflowing ? 'hidden' : '';
-  }, [calculateTextareaStyles]);
-  const frameRef = React.useRef(-1);
-  useEnhancedEffect(() => {
-    const debouncedHandleResize = debounce(syncHeight);
-    const textarea = textareaRef?.current;
-    if (!textarea) {
-      return undefined;
-    }
-    const containerWindow = ownerWindow(textarea);
-    containerWindow.addEventListener('resize', debouncedHandleResize);
-    let resizeObserver;
-    if (typeof ResizeObserver !== 'undefined') {
-      resizeObserver = new ResizeObserver(() => {
-        if (didHeightChange()) {
-          // avoid "ResizeObserver loop completed with undelivered notifications" error
-          // by temporarily unobserving the textarea element while manipulating the height
-          // and reobserving one frame later
-          resizeObserver.unobserve(textarea);
-          cancelAnimationFrame(frameRef.current);
-          syncHeight();
-          frameRef.current = requestAnimationFrame(() => {
-            resizeObserver.observe(textarea);
-          });
-        }
-      });
-      resizeObserver.observe(textarea);
-    }
-    return () => {
-      debouncedHandleResize.clear();
-      cancelAnimationFrame(frameRef.current);
-      containerWindow.removeEventListener('resize', debouncedHandleResize);
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
-    };
-  }, [calculateTextareaStyles, syncHeight, didHeightChange]);
-  useEnhancedEffect(() => {
-    syncHeight();
-  });
-  const handleChange = event => {
-    if (!isControlled) {
-      syncHeight();
-    }
-    if (onChange) {
-      onChange(event);
-    }
-  };
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx("textarea", {
-      value: value,
-      onChange: handleChange,
-      ref: handleRef
-      // Apply the rows prop to get a "correct" first SSR paint
-      ,
-      rows: minRows,
-      style: style,
-      ...other
-    }), /*#__PURE__*/_jsx("textarea", {
-      "aria-hidden": true,
-      className: props.className,
-      readOnly: true,
-      ref: hiddenTextareaRef,
-      tabIndex: -1,
-      style: {
-        ...styles.shadow,
-        ...style,
-        paddingTop: 0,
-        paddingBottom: 0
-      }
-    })]
-  });
-});
-process.env.NODE_ENV !== "production" ? TextareaAutosize.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * Maximum number of rows to display.
-   */
-  maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * Minimum number of rows to display.
-   * @default 1
-   */
-  minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * @ignore
-   */
-  onChange: PropTypes.func,
-  /**
-   * @ignore
-   */
-  placeholder: PropTypes.string,
-  /**
-   * @ignore
-   */
-  style: PropTypes.object,
-  /**
-   * @ignore
-   */
-  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.number, PropTypes.string])
-} : void 0;
-export default TextareaAutosize;

package/modern/TextareaAutosize/TextareaAutosize.types.js

@@ -1 +0,0 @@
-export {};

package/modern/TextareaAutosize/index.js

@@ -1 +0,0 @@
-export { default } from "./TextareaAutosize.js";

package/modern/ToggleButton/ToggleButton.js

@@ -1,268 +0,0 @@
-'use client';
-
-// @inheritedComponent ButtonBase
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import resolveProps from '@mui/utils/resolveProps';
-import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
-import ButtonBase from "../ButtonBase/index.js";
-import capitalize from "../utils/capitalize.js";
-import { styled } from "../zero-styled/index.js";
-import memoTheme from "../utils/memoTheme.js";
-import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
-import { useDefaultProps } from "../DefaultPropsProvider/index.js";
-import toggleButtonClasses, { getToggleButtonUtilityClass } from "./toggleButtonClasses.js";
-import ToggleButtonGroupContext from "../ToggleButtonGroup/ToggleButtonGroupContext.js";
-import ToggleButtonGroupButtonContext from "../ToggleButtonGroup/ToggleButtonGroupButtonContext.js";
-import isValueSelected from "../ToggleButtonGroup/isValueSelected.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    fullWidth,
-    selected,
-    disabled,
-    size,
-    color
-  } = ownerState;
-  const slots = {
-    root: ['root', selected && 'selected', disabled && 'disabled', fullWidth && 'fullWidth', `size${capitalize(size)}`, color]
-  };
-  return composeClasses(slots, getToggleButtonUtilityClass, classes);
-};
-const ToggleButtonRoot = styled(ButtonBase, {
-  name: 'MuiToggleButton',
-  slot: 'Root',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.root, styles[`size${capitalize(ownerState.size)}`]];
-  }
-})(memoTheme(({
-  theme
-}) => ({
-  ...theme.typography.button,
-  borderRadius: (theme.vars || theme).shape.borderRadius,
-  padding: 11,
-  border: `1px solid ${(theme.vars || theme).palette.divider}`,
-  color: (theme.vars || theme).palette.action.active,
-  [`&.${toggleButtonClasses.disabled}`]: {
-    color: (theme.vars || theme).palette.action.disabled,
-    border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
-  },
-  '&:hover': {
-    textDecoration: 'none',
-    // Reset on mouse devices
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
-    '@media (hover: none)': {
-      backgroundColor: 'transparent'
-    }
-  },
-  variants: [{
-    props: {
-      color: 'standard'
-    },
-    style: {
-      [`&.${toggleButtonClasses.selected}`]: {
-        color: (theme.vars || theme).palette.text.primary,
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.selectedOpacity),
-        '&:hover': {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.text.primary, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
-          // Reset on touch devices, it doesn't add specificity
-          '@media (hover: none)': {
-            backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.selectedOpacity)
-          }
-        }
-      }
-    }
-  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
-    props: {
-      color
-    },
-    style: {
-      [`&.${toggleButtonClasses.selected}`]: {
-        color: (theme.vars || theme).palette[color].main,
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette[color].main, theme.palette.action.selectedOpacity),
-        '&:hover': {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette[color].main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
-          // Reset on touch devices, it doesn't add specificity
-          '@media (hover: none)': {
-            backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette[color].main, theme.palette.action.selectedOpacity)
-          }
-        }
-      }
-    }
-  })), {
-    props: {
-      fullWidth: true
-    },
-    style: {
-      width: '100%'
-    }
-  }, {
-    props: {
-      size: 'small'
-    },
-    style: {
-      padding: 7,
-      fontSize: theme.typography.pxToRem(13)
-    }
-  }, {
-    props: {
-      size: 'large'
-    },
-    style: {
-      padding: 15,
-      fontSize: theme.typography.pxToRem(15)
-    }
-  }]
-})));
-const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps, ref) {
-  // props priority: `inProps` > `contextProps` > `themeDefaultProps`
-  const {
-    value: contextValue,
-    ...contextProps
-  } = React.useContext(ToggleButtonGroupContext);
-  const toggleButtonGroupButtonContextPositionClassName = React.useContext(ToggleButtonGroupButtonContext);
-  const resolvedProps = resolveProps({
-    ...contextProps,
-    selected: isValueSelected(inProps.value, contextValue)
-  }, inProps);
-  const props = useDefaultProps({
-    props: resolvedProps,
-    name: 'MuiToggleButton'
-  });
-  const {
-    children,
-    className,
-    color = 'standard',
-    disabled = false,
-    disableFocusRipple = false,
-    fullWidth = false,
-    onChange,
-    onClick,
-    selected,
-    size = 'medium',
-    value,
-    ...other
-  } = props;
-  const ownerState = {
-    ...props,
-    color,
-    disabled,
-    disableFocusRipple,
-    fullWidth,
-    size
-  };
-  const classes = useUtilityClasses(ownerState);
-  const handleChange = event => {
-    if (onClick) {
-      onClick(event, value);
-      if (event.defaultPrevented) {
-        return;
-      }
-    }
-    if (onChange) {
-      onChange(event, value);
-    }
-  };
-  const positionClassName = toggleButtonGroupButtonContextPositionClassName || '';
-  return /*#__PURE__*/_jsx(ToggleButtonRoot, {
-    className: clsx(contextProps.className, classes.root, className, positionClassName),
-    disabled: disabled,
-    focusRipple: !disableFocusRipple,
-    ref: ref,
-    onClick: handleChange,
-    onChange: onChange,
-    value: value,
-    ownerState: ownerState,
-    "aria-pressed": selected,
-    ...other,
-    children: children
-  });
-});
-process.env.NODE_ENV !== "production" ? ToggleButton.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The content of the component.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The color of the button when it is in an active state.
-   * 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/#custom-colors).
-   * @default 'standard'
-   */
-  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['standard', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), 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,
-  /**
-   * If `true`, the button will take up the full width of its container.
-   * @default false
-   */
-  fullWidth: PropTypes.bool,
-  /**
-   * Callback fired when the state changes.
-   *
-   * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
-   * @param {any} value of the selected button.
-   */
-  onChange: PropTypes.func,
-  /**
-   * Callback fired when the button is clicked.
-   *
-   * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
-   * @param {any} value of the selected button.
-   */
-  onClick: PropTypes.func,
-  /**
-   * If `true`, the button is rendered in an active state.
-   */
-  selected: PropTypes.bool,
-  /**
-   * The size of the component.
-   * The prop defaults to the value inherited from the parent ToggleButtonGroup component.
-   * @default 'medium'
-   */
-  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), 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 to associate with the button when selected in a
-   * ToggleButtonGroup.
-   */
-  value: PropTypes /* @typescript-to-proptypes-ignore */.any.isRequired
-} : void 0;
-export default ToggleButton;

package/modern/ToggleButton/index.js

@@ -1,3 +0,0 @@
-export { default } from "./ToggleButton.js";
-export { default as toggleButtonClasses } from "./toggleButtonClasses.js";
-export * from "./toggleButtonClasses.js";

package/modern/ToggleButton/toggleButtonClasses.js

@@ -1,7 +0,0 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export function getToggleButtonUtilityClass(slot) {
-  return generateUtilityClass('MuiToggleButton', slot);
-}
-const toggleButtonClasses = generateUtilityClasses('MuiToggleButton', ['root', 'disabled', 'selected', 'standard', 'primary', 'secondary', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'fullWidth']);
-export default toggleButtonClasses;