@mui/material 5.10.13 → 5.10.15

package/esm/Select/SelectInput.js

@@ -1,9 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
-
 var _span;
-
 const _excluded = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
@@ -29,7 +27,8 @@ const SelectSelect = styled('div', {
     const {
       ownerState
     } = props;
-    return [// Win specificity over the input base
+    return [
+    // Win specificity over the input base
     {
       [`&.${selectClasses.select}`]: styles.select
     }, {
@@ -74,20 +73,17 @@ const SelectNativeInput = styled('input', {
   width: '100%',
   boxSizing: 'border-box'
 });
-
 function areEqualValues(a, b) {
   if (typeof b === 'object' && b !== null) {
     return a === b;
-  } // The value could be a number, the DOM will stringify it anyway.
-
+  }
 
+  // The value could be a number, the DOM will stringify it anyway.
   return String(a) === String(b);
 }
-
 function isEmpty(display) {
   return display == null || typeof display === 'string' && !display.trim();
 }
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -103,44 +99,42 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getSelectUtilityClasses, classes);
 };
+
 /**
  * @ignore - internal component.
  */
-
-
 const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref) {
   const {
-    'aria-describedby': ariaDescribedby,
-    'aria-label': ariaLabel,
-    autoFocus,
-    autoWidth,
-    children,
-    className,
-    defaultOpen,
-    defaultValue,
-    disabled,
-    displayEmpty,
-    IconComponent,
-    inputRef: inputRefProp,
-    labelId,
-    MenuProps = {},
-    multiple,
-    name,
-    onBlur,
-    onChange,
-    onClose,
-    onFocus,
-    onOpen,
-    open: openProp,
-    readOnly,
-    renderValue,
-    SelectDisplayProps = {},
-    tabIndex: tabIndexProp,
-    value: valueProp,
-    variant = 'standard'
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      'aria-describedby': ariaDescribedby,
+      'aria-label': ariaLabel,
+      autoFocus,
+      autoWidth,
+      children,
+      className,
+      defaultOpen,
+      defaultValue,
+      disabled,
+      displayEmpty,
+      IconComponent,
+      inputRef: inputRefProp,
+      labelId,
+      MenuProps = {},
+      multiple,
+      name,
+      onBlur,
+      onChange,
+      onClose,
+      onFocus,
+      onOpen,
+      open: openProp,
+      readOnly,
+      renderValue,
+      SelectDisplayProps = {},
+      tabIndex: tabIndexProp,
+      value: valueProp,
+      variant = 'standard'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const [value, setValueState] = useControlled({
     controlled: valueProp,
     default: defaultValue,
@@ -161,7 +155,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   const handleRef = useForkRef(ref, inputRefProp);
   const handleDisplayRef = React.useCallback(node => {
     displayRef.current = node;
-
     if (node) {
       setDisplayNode(node);
     }
@@ -172,17 +165,18 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     },
     node: inputRef.current,
     value
-  }), [value]); // Resize menu on `defaultOpen` automatic toggle.
+  }), [value]);
 
+  // Resize menu on `defaultOpen` automatic toggle.
   React.useEffect(() => {
     if (defaultOpen && openState && displayNode && !isOpenControlled) {
       setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);
       displayRef.current.focus();
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [displayNode, autoWidth]); // `isOpenControlled` is ignored because the component should never switch between controlled and uncontrolled modes.
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [displayNode, autoWidth]);
+  // `isOpenControlled` is ignored because the component should never switch between controlled and uncontrolled modes.
   // `defaultOpen` and `openState` are ignored to avoid unnecessary callbacks.
-
   React.useEffect(() => {
     if (autoFocus) {
       displayRef.current.focus();
@@ -192,25 +186,20 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     if (!labelId) {
       return undefined;
     }
-
     const label = ownerDocument(displayRef.current).getElementById(labelId);
-
     if (label) {
       const handler = () => {
         if (getSelection().isCollapsed) {
           displayRef.current.focus();
         }
       };
-
       label.addEventListener('click', handler);
       return () => {
         label.removeEventListener('click', handler);
       };
     }
-
     return undefined;
   }, [labelId]);
-
   const update = (open, event) => {
     if (open) {
       if (onOpen) {
@@ -219,57 +208,48 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     } else if (onClose) {
       onClose(event);
     }
-
     if (!isOpenControlled) {
       setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);
       setOpenState(open);
     }
   };
-
   const handleMouseDown = event => {
     // Ignore everything but left-click
     if (event.button !== 0) {
       return;
-    } // Hijack the default focus behavior.
-
-
+    }
+    // Hijack the default focus behavior.
     event.preventDefault();
     displayRef.current.focus();
     update(true, event);
   };
-
   const handleClose = event => {
     update(false, event);
   };
+  const childrenArray = React.Children.toArray(children);
 
-  const childrenArray = React.Children.toArray(children); // Support autofill.
-
+  // Support autofill.
   const handleChange = event => {
     const index = childrenArray.map(child => child.props.value).indexOf(event.target.value);
-
     if (index === -1) {
       return;
     }
-
     const child = childrenArray[index];
     setValueState(child.props.value);
-
     if (onChange) {
       onChange(event, child);
     }
   };
-
   const handleItemClick = child => event => {
-    let newValue; // We use the tabindex attribute to signal the available options.
+    let newValue;
 
+    // We use the tabindex attribute to signal the available options.
     if (!event.currentTarget.hasAttribute('tabindex')) {
       return;
     }
-
     if (multiple) {
       newValue = Array.isArray(value) ? value.slice() : [];
       const itemIndex = value.indexOf(child.props.value);
-
       if (itemIndex === -1) {
         newValue.push(child.props.value);
       } else {
@@ -278,14 +258,11 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     } else {
       newValue = child.props.value;
     }
-
     if (child.props.onClick) {
       child.props.onClick(event);
     }
-
     if (value !== newValue) {
       setValueState(newValue);
-
       if (onChange) {
         // Redefine target to allow name and value to be read.
         // This allows seamless integration with the most popular form libraries.
@@ -303,27 +280,23 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
         onChange(clonedEvent, child);
       }
     }
-
     if (!multiple) {
       update(false, event);
     }
   };
-
   const handleKeyDown = event => {
     if (!readOnly) {
-      const validKeys = [' ', 'ArrowUp', 'ArrowDown', // The native select doesn't respond to enter on macOS, but it's recommended by
+      const validKeys = [' ', 'ArrowUp', 'ArrowDown',
+      // The native select doesn't respond to enter on macOS, but it's recommended by
       // https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
       'Enter'];
-
       if (validKeys.indexOf(event.key) !== -1) {
         event.preventDefault();
         update(true, event);
       }
     }
   };
-
   const open = displayNode !== null && openState;
-
   const handleBlur = event => {
     // if open event.stopImmediatePropagation
     if (!open && onBlur) {
@@ -338,14 +311,14 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       onBlur(event);
     }
   };
-
   delete other['aria-invalid'];
   let display;
   let displaySingle;
   const displayMultiple = [];
   let computeDisplay = false;
-  let foundMatch = false; // No need to display any value if the field is empty.
+  let foundMatch = false;
 
+  // No need to display any value if the field is empty.
   if (isFilled({
     value
   }) || displayEmpty) {
@@ -355,63 +328,49 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       computeDisplay = true;
     }
   }
-
   const items = childrenArray.map((child, index, arr) => {
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return null;
     }
-
     if (process.env.NODE_ENV !== 'production') {
       if (isFragment(child)) {
         console.error(["MUI: The Select component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
       }
     }
-
     let selected;
-
     if (multiple) {
       if (!Array.isArray(value)) {
         throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`value\` prop must be an array when using the \`Select\` component with \`multiple\`.` : _formatMuiErrorMessage(2));
       }
-
       selected = value.some(v => areEqualValues(v, child.props.value));
-
       if (selected && computeDisplay) {
         displayMultiple.push(child.props.children);
       }
     } else {
       selected = areEqualValues(value, child.props.value);
-
       if (selected && computeDisplay) {
         displaySingle = child.props.children;
       }
     }
-
     if (selected) {
       foundMatch = true;
     }
-
     if (child.props.value === undefined) {
       return /*#__PURE__*/React.cloneElement(child, {
         'aria-readonly': true,
         role: 'option'
       });
     }
-
     const isFirstSelectableElement = () => {
       if (value) {
         return selected;
       }
-
       const firstSelectableElement = arr.find(item => item.props.value !== undefined && item.props.disabled !== true);
-
       if (child === firstSelectableElement) {
         return true;
       }
-
       return selected;
     };
-
     return /*#__PURE__*/React.cloneElement(child, {
       'aria-selected': selected ? 'true' : 'false',
       onClick: handleItemClick(child),
@@ -422,7 +381,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
           // the select to close immediately since we open on space keydown
           event.preventDefault();
         }
-
         if (child.props.onKeyUp) {
           child.props.onKeyUp(event);
         }
@@ -432,7 +390,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       value: undefined,
       // The value is most likely not a valid HTML attribute.
       'data-value': child.props.value // Instead, we provide it as a data attribute.
-
     });
   });
 
@@ -445,7 +402,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       }
     }, [foundMatch, childrenArray, multiple, name, value]);
   }
-
   if (computeDisplay) {
     if (multiple) {
       if (displayMultiple.length === 0) {
@@ -453,42 +409,34 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       } else {
         display = displayMultiple.reduce((output, child, index) => {
           output.push(child);
-
           if (index < displayMultiple.length - 1) {
             output.push(', ');
           }
-
           return output;
         }, []);
       }
     } else {
       display = displaySingle;
     }
-  } // Avoid performing a layout computation in the render method.
-
+  }
 
+  // Avoid performing a layout computation in the render method.
   let menuMinWidth = menuMinWidthState;
-
   if (!autoWidth && isOpenControlled && displayNode) {
     menuMinWidth = displayNode.clientWidth;
   }
-
   let tabIndex;
-
   if (typeof tabIndexProp !== 'undefined') {
     tabIndex = tabIndexProp;
   } else {
     tabIndex = disabled ? null : 0;
   }
-
   const buttonId = SelectDisplayProps.id || (name ? `mui-component-select-${name}` : undefined);
-
   const ownerState = _extends({}, props, {
     variant,
     value,
     open
   });
-
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(SelectSelect, _extends({
@@ -507,7 +455,8 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       onFocus: onFocus
     }, SelectDisplayProps, {
       ownerState: ownerState,
-      className: clsx(SelectDisplayProps.className, classes.select, className) // The id is required for proper a11y
+      className: clsx(SelectDisplayProps.className, classes.select, className)
+      // The id is required for proper a11y
       ,
       id: buttonId,
       children: isEmpty(display) ? // notranslate needed while Google Translate will not fix zero-width space issue
@@ -563,98 +512,80 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
    * @ignore
    */
   'aria-describedby': PropTypes.string,
-
   /**
    * @ignore
    */
   'aria-label': PropTypes.string,
-
   /**
    * @ignore
    */
   autoFocus: PropTypes.bool,
-
   /**
    * If `true`, the width of the popover will automatically be set according to the items inside the
    * menu, otherwise it will be at least the width of the select input.
    */
   autoWidth: PropTypes.bool,
-
   /**
    * The option elements to populate the select with.
    * Can be some `<MenuItem>` elements.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
   classes: PropTypes.object,
-
   /**
    * The CSS class name of the select element.
    */
   className: PropTypes.string,
-
   /**
    * If `true`, the component is toggled on mount. Use when the component open state is not controlled.
    * You can only use it when the `native` prop is `false` (default).
    */
   defaultOpen: PropTypes.bool,
-
   /**
    * The default value. Use when the component is not controlled.
    */
   defaultValue: PropTypes.any,
-
   /**
    * If `true`, the select is disabled.
    */
   disabled: PropTypes.bool,
-
   /**
    * If `true`, the selected item is displayed even if its value is empty.
    */
   displayEmpty: PropTypes.bool,
-
   /**
    * The icon that displays the arrow.
    */
   IconComponent: PropTypes.elementType.isRequired,
-
   /**
    * Imperative handle implementing `{ value: T, node: HTMLElement, focus(): void }`
    * Equivalent to `ref`
    */
   inputRef: refType,
-
   /**
    * The ID of an element that acts as an additional label. The Select will
    * be labelled by the additional label and the selected value.
    */
   labelId: PropTypes.string,
-
   /**
    * Props applied to the [`Menu`](/material-ui/api/menu/) element.
    */
   MenuProps: PropTypes.object,
-
   /**
    * If `true`, `value` must be an array and the menu will support multiple selections.
    */
   multiple: PropTypes.bool,
-
   /**
    * Name attribute of the `select` or hidden `input` element.
    */
   name: PropTypes.string,
-
   /**
    * @ignore
    */
   onBlur: PropTypes.func,
-
   /**
    * Callback fired when a menu item is selected.
    *
@@ -663,7 +594,6 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
    * @param {object} [child] The react element that was selected.
    */
   onChange: PropTypes.func,
-
   /**
    * Callback fired when the component requests to be closed.
    * Use in controlled mode (see open).
@@ -671,12 +601,10 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
    * @param {object} event The event source of the callback.
    */
   onClose: PropTypes.func,
-
   /**
    * @ignore
    */
   onFocus: PropTypes.func,
-
   /**
    * Callback fired when the component requests to be opened.
    * Use in controlled mode (see open).
@@ -684,17 +612,14 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
    * @param {object} event The event source of the callback.
    */
   onOpen: PropTypes.func,
-
   /**
    * If `true`, the component is shown.
    */
   open: PropTypes.bool,
-
   /**
    * @ignore
    */
   readOnly: PropTypes.bool,
-
   /**
    * Render the selected value.
    *
@@ -702,27 +627,22 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
    * @returns {ReactNode}
    */
   renderValue: PropTypes.func,
-
   /**
    * Props applied to the clickable div element.
    */
   SelectDisplayProps: PropTypes.object,
-
   /**
    * @ignore
    */
   tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /**
    * @ignore
    */
   type: PropTypes.any,
-
   /**
    * The input value.
    */
   value: PropTypes.any,
-
   /**
    * The variant to use.
    */