Upstream mui/material-ui state of the touched files before 722d54899a

docs/pages/material-ui/api/native-select.json

@@ -0,0 +1,132 @@
+{
+  "props": {
+    "children": { "type": { "name": "node" } },
+    "classes": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "additionalInfo": { "cssApi": true }
+    },
+    "IconComponent": { "type": { "name": "elementType" }, "default": "ArrowDropDownIcon" },
+    "input": { "type": { "name": "element" }, "default": "<Input />" },
+    "inputProps": { "type": { "name": "object" } },
+    "onChange": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(event: React.ChangeEvent<HTMLSelectElement>) => void",
+        "describedArgs": ["event"]
+      }
+    },
+    "sx": {
+      "type": {
+        "name": "union",
+        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
+      },
+      "additionalInfo": { "sx": true }
+    },
+    "value": { "type": { "name": "any" } },
+    "variant": {
+      "type": {
+        "name": "enum",
+        "description": "'filled'<br>&#124;&nbsp;'outlined'<br>&#124;&nbsp;'standard'"
+      }
+    }
+  },
+  "name": "NativeSelect",
+  "imports": [
+    "import NativeSelect from '@mui/material/NativeSelect';",
+    "import { NativeSelect } from '@mui/material';"
+  ],
+  "classes": [
+    {
+      "key": "disabled",
+      "className": "Mui-disabled",
+      "description": "State class applied to the select component `disabled` class.",
+      "isGlobal": true
+    },
+    {
+      "key": "error",
+      "className": "Mui-error",
+      "description": "State class applied to the select component `error` class.",
+      "isGlobal": true
+    },
+    {
+      "key": "filled",
+      "className": "MuiNativeSelect-filled",
+      "description": "Styles applied to the select component if `variant=\"filled\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "icon",
+      "className": "MuiNativeSelect-icon",
+      "description": "Styles applied to the icon component.",
+      "isGlobal": false
+    },
+    {
+      "key": "iconFilled",
+      "className": "MuiNativeSelect-iconFilled",
+      "description": "Styles applied to the icon component if `variant=\"filled\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "iconOpen",
+      "className": "MuiNativeSelect-iconOpen",
+      "description": "Styles applied to the icon component if the popup is open.",
+      "isGlobal": false
+    },
+    {
+      "key": "iconOutlined",
+      "className": "MuiNativeSelect-iconOutlined",
+      "description": "Styles applied to the icon component if `variant=\"outlined\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "iconStandard",
+      "className": "MuiNativeSelect-iconStandard",
+      "description": "Styles applied to the icon component if `variant=\"standard\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "multiple",
+      "className": "MuiNativeSelect-multiple",
+      "description": "Styles applied to the select component if `multiple={true}`.",
+      "isGlobal": false
+    },
+    {
+      "key": "nativeInput",
+      "className": "MuiNativeSelect-nativeInput",
+      "description": "Styles applied to the underlying native input component.",
+      "isGlobal": false
+    },
+    {
+      "key": "outlined",
+      "className": "MuiNativeSelect-outlined",
+      "description": "Styles applied to the select component if `variant=\"outlined\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "root",
+      "className": "MuiNativeSelect-root",
+      "description": "Styles applied to the root element.",
+      "isGlobal": false
+    },
+    {
+      "key": "select",
+      "className": "MuiNativeSelect-select",
+      "description": "Styles applied to the select component `select` class.",
+      "isGlobal": false
+    },
+    {
+      "key": "standard",
+      "className": "MuiNativeSelect-standard",
+      "description": "Styles applied to the select component if `variant=\"standard\"`.",
+      "isGlobal": false
+    }
+  ],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "MuiNativeSelect",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-material/src/NativeSelect/NativeSelect.js",
+  "inheritance": { "component": "Input", "pathname": "/material-ui/api/input/" },
+  "demos": "<ul><li><a href=\"/material-ui/react-select/\">Select</a></li></ul>"
+}

docs/translations/api-docs/native-select/native-select.json

@@ -0,0 +1,90 @@
+{
+  "componentDescription": "An alternative to `<Select native />` with a much smaller bundle size footprint.",
+  "propDescriptions": {
+    "children": {
+      "description": "The option elements to populate the select with. Can be some <code>&lt;option&gt;</code> elements."
+    },
+    "classes": { "description": "Override or extend the styles applied to the component." },
+    "IconComponent": { "description": "The icon that displays the arrow." },
+    "input": {
+      "description": "An <code>Input</code> element; does not have to be a material-ui specific <code>Input</code>."
+    },
+    "inputProps": {
+      "description": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select#attributes\">Attributes</a> applied to the <code>select</code> element."
+    },
+    "onChange": {
+      "description": "Callback fired when a menu item is selected.",
+      "typeDescriptions": {
+        "event": {
+          "name": "event",
+          "description": "The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (string)."
+        }
+      }
+    },
+    "sx": {
+      "description": "The system prop that allows defining system overrides as well as additional CSS styles."
+    },
+    "value": { "description": "The <code>input</code> value. The DOM API casts this to a string." },
+    "variant": { "description": "The variant to use." }
+  },
+  "classDescriptions": {
+    "disabled": {
+      "description": "State class applied to {{nodeName}}.",
+      "nodeName": "the select component <code>disabled</code> class"
+    },
+    "error": {
+      "description": "State class applied to {{nodeName}}.",
+      "nodeName": "the select component <code>error</code> class"
+    },
+    "filled": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the select component",
+      "conditions": "<code>variant=\"filled\"</code>"
+    },
+    "icon": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon component" },
+    "iconFilled": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon component",
+      "conditions": "<code>variant=\"filled\"</code>"
+    },
+    "iconOpen": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon component",
+      "conditions": "the popup is open"
+    },
+    "iconOutlined": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon component",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "iconStandard": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon component",
+      "conditions": "<code>variant=\"standard\"</code>"
+    },
+    "multiple": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the select component",
+      "conditions": "<code>multiple={true}</code>"
+    },
+    "nativeInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the underlying native input component"
+    },
+    "outlined": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the select component",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "root": { "description": "Styles applied to the root element." },
+    "select": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the select component <code>select</code> class"
+    },
+    "standard": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the select component",
+      "conditions": "<code>variant=\"standard\"</code>"
+    }
+  }
+}

packages/mui-material/src/NativeSelect/NativeSelectInput.js

@@ -0,0 +1,281 @@
+'use client';
+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 inputBaseClasses from '../InputBase/inputBaseClasses';
+import { styled } from '../zero-styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import inputAdornmentClasses from '../InputAdornment/inputAdornmentClasses';
+
+const useUtilityClasses = (ownerState) => {
+  const { classes, variant, disabled, multiple, open, error } = ownerState;
+
+  const slots = {
+    select: ['select', variant, disabled && 'disabled', multiple && 'multiple', error && 'error'],
+    icon: ['icon', `icon${capitalize(variant)}`, open && 'iconOpen', disabled && 'disabled'],
+  };
+
+  return composeClasses(slots, getNativeSelectUtilityClasses, classes);
+};
+
+export const StyledSelectSelect = styled('select', {
+  name: 'MuiNativeSelect',
+})(({ theme }) => ({
+  // Reset
+  MozAppearance: 'none',
+  // Reset
+  WebkitAppearance: 'none',
+  // When interacting quickly, the text can end up selected.
+  // Native select can't be selected either.
+  userSelect: 'none',
+  // Reset
+  borderRadius: 0,
+  cursor: 'pointer',
+  '&:focus': {
+    // Reset Chrome style
+    borderRadius: 0,
+  },
+  [`&.${nativeSelectClasses.disabled}`]: {
+    cursor: 'default',
+  },
+  '&[multiple]': {
+    height: 'auto',
+  },
+  '&:not([multiple]) option, &:not([multiple]) optgroup': {
+    backgroundColor: (theme.vars || theme).palette.background.paper,
+  },
+  [`& ~ .${inputAdornmentClasses.root}`]: {
+    position: 'absolute',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    right: 'calc(var(--_caret, 24px) + (var(--_endAdornment, 28px) - 1.5rem)/2)', // 1.5rem is the default icon size
+  },
+  [`.${inputBaseClasses.root}:has(> &)`]: {
+    '--_endAdornment': '0px',
+  },
+  variants: [
+    {
+      props: ({ ownerState }) =>
+        ownerState.variant !== 'filled' && ownerState.variant !== 'outlined',
+      style: {
+        [`.${inputBaseClasses.root}:has(> &)`]: {
+          '--_caret': '24px',
+        },
+        [`.${inputBaseClasses.root}:has(> & ~ .${inputAdornmentClasses.root})`]: {
+          '--_endAdornment': '28px',
+        },
+        // Bump specificity to allow extending custom inputs
+        '&&&': {
+          paddingRight: 'calc(var(--_caret, 24px) + var(--_endAdornment, 0px))',
+          minWidth: 16, // So it doesn't collapse.
+        },
+      },
+    },
+    {
+      props: {
+        variant: 'filled',
+      },
+      style: {
+        [`.${inputBaseClasses.root}:has(> &)`]: {
+          '--_caret': '32px',
+        },
+        [`.${inputBaseClasses.root}:has(> & ~ .${inputAdornmentClasses.root})`]: {
+          '--_endAdornment': '28px',
+        },
+        '&&&': {
+          paddingRight: 'calc(var(--_caret, 32px) + var(--_endAdornment, 0px))',
+        },
+      },
+    },
+    {
+      props: {
+        variant: 'outlined',
+      },
+      style: {
+        [`.${inputBaseClasses.root}:has(> &)`]: {
+          '--_caret': '32px',
+        },
+        [`.${inputBaseClasses.root}:has(> & ~ .${inputAdornmentClasses.root})`]: {
+          '--_endAdornment': '28px',
+        },
+        borderRadius: (theme.vars || theme).shape.borderRadius,
+        '&:focus': {
+          borderRadius: (theme.vars || theme).shape.borderRadius, // Reset the reset for Chrome style
+        },
+        '&&&': {
+          paddingRight: 'calc(var(--_caret, 32px) + var(--_endAdornment, 0px))',
+        },
+      },
+    },
+  ],
+}));
+
+const NativeSelectSelect = styled(StyledSelectSelect, {
+  name: 'MuiNativeSelect',
+  slot: 'Select',
+  shouldForwardProp: rootShouldForwardProp,
+  overridesResolver: (props, styles) => {
+    const { ownerState } = props;
+
+    return [
+      styles.select,
+      styles[ownerState.variant],
+      ownerState.error && styles.error,
+      { [`&.${nativeSelectClasses.multiple}`]: styles.multiple },
+    ];
+  },
+})({});
+
+export const StyledSelectIcon = styled('svg', {
+  name: 'MuiNativeSelect',
+})(({ theme }) => ({
+  // 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,
+  // Center vertically, height is 1em
+  top: 'calc(50% - .5em)',
+  // Don't block pointer events on the select under the icon.
+  pointerEvents: 'none',
+  color: (theme.vars || theme).palette.action.active,
+  [`&.${nativeSelectClasses.disabled}`]: {
+    color: (theme.vars || theme).palette.action.disabled,
+  },
+  variants: [
+    {
+      props: ({ ownerState }) => ownerState.open,
+      style: {
+        transform: 'rotate(180deg)',
+      },
+    },
+    {
+      props: {
+        variant: 'filled',
+      },
+      style: {
+        right: 7,
+      },
+    },
+    {
+      props: {
+        variant: 'outlined',
+      },
+      style: {
+        right: 7,
+      },
+    },
+  ],
+}));
+
+const NativeSelectIcon = styled(StyledSelectIcon, {
+  name: 'MuiNativeSelect',
+  slot: 'Icon',
+  overridesResolver: (props, styles) => {
+    const { ownerState } = props;
+    return [
+      styles.icon,
+      ownerState.variant && styles[`icon${capitalize(ownerState.variant)}`],
+      ownerState.open && styles.iconOpen,
+    ];
+  },
+})({});
+
+/**
+ * @ignore - internal component.
+ */
+const NativeSelectInput = React.forwardRef(function NativeSelectInput(props, ref) {
+  const {
+    className,
+    disabled,
+    error,
+    IconComponent,
+    inputRef,
+    variant = 'standard',
+    ...other
+  } = props;
+
+  const ownerState = {
+    ...props,
+    disabled,
+    variant,
+    error,
+  };
+
+  const classes = useUtilityClasses(ownerState);
+  return (
+    <React.Fragment>
+      <NativeSelectSelect
+        ownerState={ownerState}
+        className={clsx(classes.select, className)}
+        disabled={disabled}
+        ref={inputRef || ref}
+        {...other}
+      />
+      {props.multiple ? null : (
+        <NativeSelectIcon as={IconComponent} ownerState={ownerState} className={classes.icon} />
+      )}
+    </React.Fragment>
+  );
+});
+
+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']),
+};
+
+export default NativeSelectInput;

packages/mui-material/src/NativeSelect/nativeSelectClasses.ts

@@ -0,0 +1,58 @@
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+
+export interface NativeSelectClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the select component `select` class. */
+  select: string;
+  /** Styles applied to the select component if `multiple={true}`. */
+  multiple: string;
+  /** Styles applied to the select component if `variant="filled"`. */
+  filled: string;
+  /** Styles applied to the select component if `variant="outlined"`. */
+  outlined: string;
+  /** Styles applied to the select component if `variant="standard"`. */
+  standard: string;
+  /** State class applied to the select component `disabled` class. */
+  disabled: string;
+  /** Styles applied to the icon component. */
+  icon: string;
+  /** Styles applied to the icon component if the popup is open. */
+  iconOpen: string;
+  /** Styles applied to the icon component if `variant="filled"`. */
+  iconFilled: string;
+  /** Styles applied to the icon component if `variant="outlined"`. */
+  iconOutlined: string;
+  /** Styles applied to the icon component if `variant="standard"`. */
+  iconStandard: string;
+  /** Styles applied to the underlying native input component. */
+  nativeInput: string;
+  /** State class applied to the select component `error` class. */
+  error: string;
+}
+
+export type NativeSelectClassKey = keyof NativeSelectClasses;
+
+export function getNativeSelectUtilityClasses(slot: string): string {
+  return generateUtilityClass('MuiNativeSelect', slot);
+}
+
+const nativeSelectClasses: NativeSelectClasses = generateUtilityClasses('MuiNativeSelect', [
+  'root',
+  'select',
+  'multiple',
+  'filled',
+  'outlined',
+  'standard',
+  'disabled',
+  'icon',
+  'iconOpen',
+  'iconFilled',
+  'iconOutlined',
+  'iconStandard',
+  'nativeInput',
+  'error',
+]);
+
+export default nativeSelectClasses;