@mui/material 6.0.0-alpha.1 → 6.0.0-alpha.3

package/legacy/NativeSelect/NativeSelect.js

@@ -1,128 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import * as React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import composeClasses from '@mui/utils/composeClasses';
-import NativeSelectInput from './NativeSelectInput';
-import formControlState from '../FormControl/formControlState';
-import useFormControl from '../FormControl/useFormControl';
-import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
-import Input from '../Input';
-import useThemeProps from '../styles/useThemeProps';
-import { getNativeSelectUtilityClasses } from './nativeSelectClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes;
-  var slots = {
-    root: ['root']
-  };
-  return composeClasses(slots, getNativeSelectUtilityClasses, classes);
-};
-var defaultInput = /*#__PURE__*/_jsx(Input, {});
-/**
- * An alternative to `<Select native />` with a much smaller bundle size footprint.
- */
-var NativeSelect = /*#__PURE__*/React.forwardRef(function NativeSelect(inProps, ref) {
-  var props = useThemeProps({
-    name: 'MuiNativeSelect',
-    props: inProps
-  });
-  var className = props.className,
-    children = props.children,
-    _props$classes = props.classes,
-    classesProp = _props$classes === void 0 ? {} : _props$classes,
-    _props$IconComponent = props.IconComponent,
-    IconComponent = _props$IconComponent === void 0 ? ArrowDropDownIcon : _props$IconComponent,
-    _props$input = props.input,
-    input = _props$input === void 0 ? defaultInput : _props$input,
-    inputProps = props.inputProps,
-    variant = props.variant,
-    other = _objectWithoutProperties(props, ["className", "children", "classes", "IconComponent", "input", "inputProps", "variant"]);
-  var muiFormControl = useFormControl();
-  var fcs = formControlState({
-    props: props,
-    muiFormControl: muiFormControl,
-    states: ['variant']
-  });
-  var ownerState = _extends({}, props, {
-    classes: classesProp
-  });
-  var classes = useUtilityClasses(ownerState);
-  var root = classesProp.root,
-    otherClasses = _objectWithoutProperties(classesProp, ["root"]);
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: /*#__PURE__*/React.cloneElement(input, _extends({
-      // Most of the logic is implemented in `NativeSelectInput`.
-      // The `Select` component is a simple API wrapper to expose something better to play with.
-      inputComponent: NativeSelectInput,
-      inputProps: _extends({
-        children: children,
-        classes: otherClasses,
-        IconComponent: IconComponent,
-        variant: fcs.variant,
-        type: undefined
-      }, inputProps, input ? input.props.inputProps : {}),
-      ref: ref
-    }, other, {
-      className: clsx(classes.root, input.props.className, className)
-    }))
-  });
-});
-process.env.NODE_ENV !== "production" ? NativeSelect.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 option elements to populate the select with.
-   * Can be some `<option>` elements.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   * @default {}
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The icon that displays the arrow.
-   * @default ArrowDropDownIcon
-   */
-  IconComponent: PropTypes.elementType,
-  /**
-   * An `Input` element; does not have to be a material-ui specific `Input`.
-   * @default <Input />
-   */
-  input: PropTypes.element,
-  /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attributes) applied to the `select` element.
-   */
-  inputProps: PropTypes.object,
-  /**
-   * Callback fired when a menu item is selected.
-   *
-   * @param {React.ChangeEvent<HTMLSelectElement>} event The event source of the callback.
-   * You can pull out the new value by accessing `event.target.value` (string).
-   */
-  onChange: 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]),
-  /**
-   * The `input` value. The DOM API casts this to a string.
-   */
-  value: PropTypes.any,
-  /**
-   * The variant to use.
-   */
-  variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
-} : void 0;
-NativeSelect.muiName = 'Select';
-export default NativeSelect;

package/legacy/NativeSelect/NativeSelectInput.js

@@ -1,203 +0,0 @@
-'use client';
-
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import refType from '@mui/utils/refType';
-import composeClasses from '@mui/utils/composeClasses';
-import capitalize from '../utils/capitalize';
-import nativeSelectClasses, { getNativeSelectUtilityClasses } from './nativeSelectClasses';
-import styled, { rootShouldForwardProp } from '../styles/styled';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes,
-    variant = ownerState.variant,
-    disabled = ownerState.disabled,
-    multiple = ownerState.multiple,
-    open = ownerState.open,
-    error = ownerState.error;
-  var slots = {
-    select: ['select', variant, disabled && 'disabled', multiple && 'multiple', error && 'error'],
-    icon: ['icon', "icon".concat(capitalize(variant)), open && 'iconOpen', disabled && 'disabled']
-  };
-  return composeClasses(slots, getNativeSelectUtilityClasses, classes);
-};
-export var nativeSelectSelectStyles = function nativeSelectSelectStyles(_ref) {
-  var ownerState = _ref.ownerState,
-    theme = _ref.theme;
-  return _extends(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    MozAppearance: 'none',
-    // Reset
-    WebkitAppearance: 'none',
-    // Reset
-    // When interacting quickly, the text can end up selected.
-    // Native select can't be selected either.
-    userSelect: 'none',
-    borderRadius: 0,
-    // Reset
-    cursor: 'pointer',
-    '&:focus': _extends({}, theme.vars ? {
-      backgroundColor: "rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.05)")
-    } : {
-      backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)'
-    }, {
-      borderRadius: 0 // Reset Chrome style
-    }),
-    // Remove IE11 arrow
-    '&::-ms-expand': {
-      display: 'none'
-    }
-  }, "&.".concat(nativeSelectClasses.disabled), {
-    cursor: 'default'
-  }), '&[multiple]', {
-    height: 'auto'
-  }), '&:not([multiple]) option, &:not([multiple]) optgroup', {
-    backgroundColor: (theme.vars || theme).palette.background.paper
-  }), '&&&', {
-    paddingRight: 24,
-    minWidth: 16 // So it doesn't collapse.
-  }), ownerState.variant === 'filled' && {
-    '&&&': {
-      paddingRight: 32
-    }
-  }, ownerState.variant === 'outlined' && {
-    borderRadius: (theme.vars || theme).shape.borderRadius,
-    '&:focus': {
-      borderRadius: (theme.vars || theme).shape.borderRadius // Reset the reset for Chrome style
-    },
-    '&&&': {
-      paddingRight: 32
-    }
-  });
-};
-var NativeSelectSelect = styled('select', {
-  name: 'MuiNativeSelect',
-  slot: 'Select',
-  shouldForwardProp: rootShouldForwardProp,
-  overridesResolver: function overridesResolver(props, styles) {
-    var ownerState = props.ownerState;
-    return [styles.select, styles[ownerState.variant], ownerState.error && styles.error, _defineProperty({}, "&.".concat(nativeSelectClasses.multiple), styles.multiple)];
-  }
-})(nativeSelectSelectStyles);
-export var nativeSelectIconStyles = function nativeSelectIconStyles(_ref3) {
-  var ownerState = _ref3.ownerState,
-    theme = _ref3.theme;
-  return _extends(_defineProperty({
-    // We use a position absolute over a flexbox in order to forward the pointer events
-    // to the input and to support wrapping tags..
-    position: 'absolute',
-    right: 0,
-    top: 'calc(50% - .5em)',
-    // Center vertically, height is 1em
-    pointerEvents: 'none',
-    // Don't block pointer events on the select under the icon.
-    color: (theme.vars || theme).palette.action.active
-  }, "&.".concat(nativeSelectClasses.disabled), {
-    color: (theme.vars || theme).palette.action.disabled
-  }), ownerState.open && {
-    transform: 'rotate(180deg)'
-  }, ownerState.variant === 'filled' && {
-    right: 7
-  }, ownerState.variant === 'outlined' && {
-    right: 7
-  });
-};
-var NativeSelectIcon = styled('svg', {
-  name: 'MuiNativeSelect',
-  slot: 'Icon',
-  overridesResolver: function overridesResolver(props, styles) {
-    var ownerState = props.ownerState;
-    return [styles.icon, ownerState.variant && styles["icon".concat(capitalize(ownerState.variant))], ownerState.open && styles.iconOpen];
-  }
-})(nativeSelectIconStyles);
-
-/**
- * @ignore - internal component.
- */
-var NativeSelectInput = /*#__PURE__*/React.forwardRef(function NativeSelectInput(props, ref) {
-  var className = props.className,
-    disabled = props.disabled,
-    error = props.error,
-    IconComponent = props.IconComponent,
-    inputRef = props.inputRef,
-    _props$variant = props.variant,
-    variant = _props$variant === void 0 ? 'standard' : _props$variant,
-    other = _objectWithoutProperties(props, ["className", "disabled", "error", "IconComponent", "inputRef", "variant"]);
-  var ownerState = _extends({}, props, {
-    disabled: disabled,
-    variant: variant,
-    error: error
-  });
-  var classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(NativeSelectSelect, _extends({
-      ownerState: ownerState,
-      className: clsx(classes.select, className),
-      disabled: disabled,
-      ref: inputRef || ref
-    }, other)), props.multiple ? null : /*#__PURE__*/_jsx(NativeSelectIcon, {
-      as: IconComponent,
-      ownerState: ownerState,
-      className: classes.icon
-    })]
-  });
-});
-process.env.NODE_ENV !== "production" ? NativeSelectInput.propTypes = {
-  /**
-   * The option elements to populate the select with.
-   * Can be some `<option>` elements.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * The CSS class name of the select element.
-   */
-  className: PropTypes.string,
-  /**
-   * If `true`, the select is disabled.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * If `true`, the `select input` will indicate an error.
-   */
-  error: PropTypes.bool,
-  /**
-   * The icon that displays the arrow.
-   */
-  IconComponent: PropTypes.elementType.isRequired,
-  /**
-   * Use that prop to pass a ref to the native select element.
-   * @deprecated
-   */
-  inputRef: refType,
-  /**
-   * @ignore
-   */
-  multiple: PropTypes.bool,
-  /**
-   * Name attribute of the `select` or hidden `input` element.
-   */
-  name: PropTypes.string,
-  /**
-   * Callback fired when a menu item is selected.
-   *
-   * @param {object} event The event source of the callback.
-   * You can pull out the new value by accessing `event.target.value` (string).
-   */
-  onChange: PropTypes.func,
-  /**
-   * The input value.
-   */
-  value: PropTypes.any,
-  /**
-   * The variant to use.
-   */
-  variant: PropTypes.oneOf(['standard', 'outlined', 'filled'])
-} : void 0;
-export default NativeSelectInput;

package/legacy/NativeSelect/index.js

@@ -1,5 +0,0 @@
-'use client';
-
-export { default } from './NativeSelect';
-export { default as nativeSelectClasses } from './nativeSelectClasses';
-export * from './nativeSelectClasses';

package/legacy/NativeSelect/nativeSelectClasses.js

@@ -1,7 +0,0 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export function getNativeSelectUtilityClasses(slot) {
-  return generateUtilityClass('MuiNativeSelect', slot);
-}
-var nativeSelectClasses = generateUtilityClasses('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
-export default nativeSelectClasses;

package/legacy/NoSsr/index.js

@@ -1 +0,0 @@
-export { NoSsr as default } from '@mui/base/NoSsr';

package/legacy/OutlinedInput/NotchedOutline.js

@@ -1,135 +0,0 @@
-'use client';
-
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _extends from "@babel/runtime/helpers/esm/extends";
-var _span;
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import styled, { rootShouldForwardProp } from '../styles/styled';
-import { jsx as _jsx } from "react/jsx-runtime";
-var NotchedOutlineRoot = styled('fieldset', {
-  shouldForwardProp: rootShouldForwardProp
-})({
-  textAlign: 'left',
-  position: 'absolute',
-  bottom: 0,
-  right: 0,
-  top: -5,
-  left: 0,
-  margin: 0,
-  padding: '0 8px',
-  pointerEvents: 'none',
-  borderRadius: 'inherit',
-  borderStyle: 'solid',
-  borderWidth: 1,
-  overflow: 'hidden',
-  minWidth: '0%'
-});
-var NotchedOutlineLegend = styled('legend', {
-  shouldForwardProp: rootShouldForwardProp
-})(function (_ref) {
-  var ownerState = _ref.ownerState,
-    theme = _ref.theme;
-  return _extends({
-    float: 'unset',
-    // Fix conflict with bootstrap
-    width: 'auto',
-    // Fix conflict with bootstrap
-    overflow: 'hidden'
-  }, !ownerState.withLabel && {
-    padding: 0,
-    lineHeight: '11px',
-    // sync with `height` in `legend` styles
-    transition: theme.transitions.create('width', {
-      duration: 150,
-      easing: theme.transitions.easing.easeOut
-    })
-  }, ownerState.withLabel && _extends({
-    display: 'block',
-    // Fix conflict with normalize.css and sanitize.css
-    padding: 0,
-    height: 11,
-    // sync with `lineHeight` in `legend` styles
-    fontSize: '0.75em',
-    visibility: 'hidden',
-    maxWidth: 0.01,
-    transition: theme.transitions.create('max-width', {
-      duration: 50,
-      easing: theme.transitions.easing.easeOut
-    }),
-    whiteSpace: 'nowrap',
-    '& > span': {
-      paddingLeft: 5,
-      paddingRight: 5,
-      display: 'inline-block',
-      opacity: 0,
-      visibility: 'visible'
-    }
-  }, ownerState.notched && {
-    maxWidth: '100%',
-    transition: theme.transitions.create('max-width', {
-      duration: 100,
-      easing: theme.transitions.easing.easeOut,
-      delay: 50
-    })
-  }));
-});
-
-/**
- * @ignore - internal component.
- */
-export default function NotchedOutline(props) {
-  var children = props.children,
-    classes = props.classes,
-    className = props.className,
-    label = props.label,
-    notched = props.notched,
-    other = _objectWithoutProperties(props, ["children", "classes", "className", "label", "notched"]);
-  var withLabel = label != null && label !== '';
-  var ownerState = _extends({}, props, {
-    notched: notched,
-    withLabel: withLabel
-  });
-  return /*#__PURE__*/_jsx(NotchedOutlineRoot, _extends({
-    "aria-hidden": true,
-    className: className,
-    ownerState: ownerState
-  }, other, {
-    children: /*#__PURE__*/_jsx(NotchedOutlineLegend, {
-      ownerState: ownerState,
-      children: withLabel ? /*#__PURE__*/_jsx("span", {
-        children: label
-      }) : // notranslate needed while Google Translate will not fix zero-width space issue
-      _span || (_span = /*#__PURE__*/_jsx("span", {
-        className: "notranslate",
-        children: "\u200B"
-      }))
-    })
-  }));
-}
-process.env.NODE_ENV !== "production" ? NotchedOutline.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 label.
-   */
-  label: PropTypes.node,
-  /**
-   * If `true`, the outline is notched to accommodate the label.
-   */
-  notched: PropTypes.bool.isRequired,
-  /**
-   * @ignore
-   */
-  style: PropTypes.object
-} : void 0;