@mui/lab 5.0.0-alpha.107 → 5.0.0-alpha.109

package/TimelineSeparator/TimelineSeparator.js

@@ -8,7 +8,6 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { getTimelineSeparatorUtilityClass } from './timelineSeparatorClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -18,7 +17,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getTimelineSeparatorUtilityClass, classes);
 };
-
 const TimelineSeparatorRoot = styled('div', {
   name: 'MuiTimelineSeparator',
   slot: 'Root',
@@ -34,12 +32,10 @@ const TimelineSeparator = /*#__PURE__*/React.forwardRef(function TimelineSeparat
     props: inProps,
     name: 'MuiTimelineSeparator'
   });
-
   const {
-    className
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(TimelineSeparatorRoot, _extends({
@@ -48,29 +44,23 @@ const TimelineSeparator = /*#__PURE__*/React.forwardRef(function TimelineSeparat
     ref: ref
   }, other));
 });
-process.env.NODE_ENV !== "production" ? TimelineSeparator.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? TimelineSeparator.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"     |
   // ----------------------------------------------------------------------
-
   /**
    * 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 system prop that allows defining system overrides as well as additional CSS styles.
    */

package/ToggleButton/ToggleButton.js

@@ -3,16 +3,15 @@ import * as React from 'react';
 import ToggleButton from '@mui/material/ToggleButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 let warnedOnce = false;
+
 /**
  * @ignore - do not document.
  */
-
 export default /*#__PURE__*/React.forwardRef(function DeprecatedToggleButton(props, ref) {
   if (!warnedOnce) {
     console.warn(['MUI: The ToggleButton component was moved from the lab to the core.', '', "You should use `import { ToggleButton } from '@mui/material'`", "or `import ToggleButton from '@mui/material/ToggleButton'`"].join('\n'));
     warnedOnce = true;
   }
-
   return /*#__PURE__*/_jsx(ToggleButton, _extends({
     ref: ref
   }, props));

package/ToggleButtonGroup/ToggleButtonGroup.js

@@ -3,16 +3,15 @@ import * as React from 'react';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { jsx as _jsx } from "react/jsx-runtime";
 let warnedOnce = false;
+
 /**
  * @ignore - do not document.
  */
-
 export default /*#__PURE__*/React.forwardRef(function DeprecatedToggleButtonGroup(props, ref) {
   if (!warnedOnce) {
     console.warn(['MUI: The ToggleButtonGroup component was moved from the lab to the core.', '', "You should use `import { ToggleButtonGroup } from '@mui/material'`", "or `import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'`"].join('\n'));
     warnedOnce = true;
   }
-
   return /*#__PURE__*/_jsx(ToggleButtonGroup, _extends({
     ref: ref
   }, props));

package/TreeItem/TreeItem.js

@@ -15,7 +15,6 @@ import TreeItemContent from './TreeItemContent';
 import treeItemClasses, { getTreeItemUtilityClass } from './treeItemClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -33,7 +32,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getTreeItemUtilityClass, classes);
 };
-
 const TreeItemRoot = styled('li', {
   name: 'MuiTreeItem',
   slot: 'Root',
@@ -122,27 +120,25 @@ const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, ref) {
     props: inProps,
     name: 'MuiTreeItem'
   });
-
   const {
-    children,
-    className,
-    collapseIcon,
-    ContentComponent = TreeItemContent,
-    ContentProps,
-    endIcon,
-    expandIcon,
-    disabled: disabledProp,
-    icon,
-    id: idProp,
-    label,
-    nodeId,
-    onClick,
-    onMouseDown,
-    TransitionComponent = Collapse,
-    TransitionProps
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      children,
+      className,
+      collapseIcon,
+      ContentComponent = TreeItemContent,
+      ContentProps,
+      endIcon,
+      expandIcon,
+      disabled: disabledProp,
+      icon,
+      id: idProp,
+      label,
+      nodeId,
+      onClick,
+      onMouseDown,
+      TransitionComponent = Collapse,
+      TransitionProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     icons: contextIcons = {},
     focus,
@@ -159,13 +155,11 @@ const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, ref) {
     treeId
   } = React.useContext(TreeViewContext);
   let id = null;
-
   if (idProp != null) {
     id = idProp;
   } else if (treeId && nodeId) {
     id = `${treeId}-${nodeId}`;
   }
-
   const [treeitemElement, setTreeitemElement] = React.useState(null);
   const contentRef = React.useRef(null);
   const handleRef = useForkRef(setTreeitemElement, ref);
@@ -182,18 +176,15 @@ const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, ref) {
   const focused = isFocused ? isFocused(nodeId) : false;
   const selected = isSelected ? isSelected(nodeId) : false;
   const disabled = isDisabled ? isDisabled(nodeId) : false;
-
   const ownerState = _extends({}, props, {
     expanded,
     focused,
     selected,
     disabled
   });
-
   const classes = useUtilityClasses(ownerState);
   let displayIcon;
   let expansionIcon;
-
   if (expandable) {
     if (!expanded) {
       expansionIcon = expandIcon || contextIcons.defaultExpandIcon;
@@ -201,13 +192,11 @@ const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, ref) {
       expansionIcon = collapseIcon || contextIcons.defaultCollapseIcon;
     }
   }
-
   if (expandable) {
     displayIcon = contextIcons.defaultParentIcon;
   } else {
     displayIcon = endIcon || contextIcons.defaultEndIcon;
   }
-
   React.useEffect(() => {
     // On the first render a node's index will be -1. We want to wait for the real index.
     if (registerNode && unregisterNode && index !== -1) {
@@ -223,7 +212,6 @@ const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, ref) {
         unregisterNode(nodeId);
       };
     }
-
     return undefined;
   }, [registerNode, unregisterNode, parentId, index, nodeId, expandable, disabledProp, id]);
   React.useEffect(() => {
@@ -233,11 +221,9 @@ const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, ref) {
         unMapFirstChar(nodeId);
       };
     }
-
     return undefined;
   }, [mapFirstChar, unMapFirstChar, nodeId, label]);
   let ariaSelected;
-
   if (multiSelect) {
     ariaSelected = selected;
   } else if (selected) {
@@ -249,7 +235,6 @@ const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, ref) {
      */
     ariaSelected = true;
   }
-
   function handleFocus(event) {
     // DOM focus stays on the tree which manages focus with aria-activedescendant
     if (event.target === event.currentTarget) {
@@ -257,14 +242,11 @@ const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, ref) {
         preventScroll: true
       });
     }
-
     const unfocusable = !disabledItemsFocusable && disabled;
-
     if (!focused && event.currentTarget === event.target && !unfocusable) {
       focus(event, nodeId);
     }
   }
-
   return /*#__PURE__*/_jsxs(TreeItemRoot, _extends({
     className: clsx(classes.root, className),
     role: "treeitem",
@@ -312,108 +294,87 @@ const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, ref) {
     })]
   }));
 });
-process.env.NODE_ENV !== "production" ? TreeItem.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? TreeItem.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"     |
   // ----------------------------------------------------------------------
-
   /**
    * 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 icon used to collapse the node.
    */
   collapseIcon: PropTypes.node,
-
   /**
    * The component used for the content node.
    * @default TreeItemContent
    */
   ContentComponent: elementTypeAcceptingRef,
-
   /**
    * Props applied to ContentComponent
    */
   ContentProps: PropTypes.object,
-
   /**
    * If `true`, the node is disabled.
    */
   disabled: PropTypes.bool,
-
   /**
    * The icon displayed next to a end node.
    */
   endIcon: PropTypes.node,
-
   /**
    * The icon used to expand the node.
    */
   expandIcon: PropTypes.node,
-
   /**
    * The icon to display next to the tree node's label.
    */
   icon: PropTypes.node,
-
   /**
    * @ignore
    */
   id: PropTypes.string,
-
   /**
    * The tree node label.
    */
   label: PropTypes.node,
-
   /**
    * The id of the node.
    */
   nodeId: PropTypes.string.isRequired,
-
   /**
    * @ignore
    */
   onClick: PropTypes.func,
-
   /**
    * This prop isn't supported.
    * Use the `onNodeFocus` callback on the tree if you need to monitor a node's focus.
    */
   onFocus: unsupportedProp,
-
   /**
    * @ignore
    */
   onMouseDown: 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 component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Collapse
    */
   TransitionComponent: PropTypes.elementType,
-
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.

package/TreeItem/TreeItemContent.js

@@ -5,26 +5,25 @@ import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import useTreeItem from './useTreeItem';
+
 /**
  * @ignore - internal component.
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(props, ref) {
   const {
-    classes,
-    className,
-    displayIcon,
-    expansionIcon,
-    icon: iconProp,
-    label,
-    nodeId,
-    onClick,
-    onMouseDown
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      classes,
+      className,
+      displayIcon,
+      expansionIcon,
+      icon: iconProp,
+      label,
+      nodeId,
+      onClick,
+      onMouseDown
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     disabled,
     expanded,
@@ -35,27 +34,21 @@ const TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(p
     preventSelection
   } = useTreeItem(nodeId);
   const icon = iconProp || expansionIcon || displayIcon;
-
   const handleMouseDown = event => {
     preventSelection(event);
-
     if (onMouseDown) {
       onMouseDown(event);
     }
   };
-
   const handleClick = event => {
     handleExpansion(event);
     handleSelection(event);
-
     if (onClick) {
       onClick(event);
     }
   };
-
   return (
     /*#__PURE__*/
-
     /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */
     _jsxs("div", _extends({
       className: clsx(className, classes.root, expanded && classes.expanded, selected && classes.selected, focused && classes.focused, disabled && classes.disabled),
@@ -78,48 +71,39 @@ process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
   classes: PropTypes.object,
-
   /**
    * className applied to the root element.
    */
   className: PropTypes.string,
-
   /**
    * The icon to display next to the tree node's label. Either a parent or end icon.
    */
   displayIcon: PropTypes.node,
-
   /**
    * The icon to display next to the tree node's label. Either an expansion or collapse icon.
    */
   expansionIcon: PropTypes.node,
-
   /**
    * The icon to display next to the tree node's label.
    */
   icon: PropTypes.node,
-
   /**
    * The tree node label.
    */
   label: PropTypes.node,
-
   /**
    * The id of the node.
    */
   nodeId: PropTypes.string.isRequired,
-
   /**
    * @ignore
    */
   onClick: PropTypes.func,
-
   /**
    * @ignore
    */

package/TreeItem/useTreeItem.js

@@ -18,29 +18,25 @@ export default function useTreeItem(nodeId) {
   const focused = isFocused ? isFocused(nodeId) : false;
   const disabled = isDisabled ? isDisabled(nodeId) : false;
   const selected = isSelected ? isSelected(nodeId) : false;
-
   const handleExpansion = event => {
     if (!disabled) {
       if (!focused) {
         focus(event, nodeId);
       }
+      const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
 
-      const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey); // If already expanded and trying to toggle selection don't close
-
+      // If already expanded and trying to toggle selection don't close
       if (expandable && !(multiple && isExpanded(nodeId))) {
         toggleExpansion(event, nodeId);
       }
     }
   };
-
   const handleSelection = event => {
     if (!disabled) {
       if (!focused) {
         focus(event, nodeId);
       }
-
       const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
-
       if (multiple) {
         if (event.shiftKey) {
           selectRange(event, {
@@ -54,14 +50,12 @@ export default function useTreeItem(nodeId) {
       }
     }
   };
-
   const preventSelection = event => {
     if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {
       // Prevent text selection
       event.preventDefault();
     }
   };
-
   return {
     disabled,
     expanded,