@mui/lab 5.0.0-alpha.99 → 6.0.0-alpha.0

package/TreeItem/useTreeItem.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-export default function useTreeItem(nodeId: string): {
-  disabled: boolean;
-  expanded: boolean;
-  selected: boolean;
-  focused: boolean;
-  handleExpansion: (event: React.SyntheticEvent) => void;
-  handleSelection: (event: React.SyntheticEvent) => void;
-  preventSelection: (event: React.SyntheticEvent) => void;
-};

package/TreeItem/useTreeItem.js

@@ -1,74 +0,0 @@
-import * as React from 'react';
-import TreeViewContext from '../TreeView/TreeViewContext';
-export default function useTreeItem(nodeId) {
-  const {
-    focus,
-    isExpanded,
-    isExpandable,
-    isFocused,
-    isDisabled,
-    isSelected,
-    multiSelect,
-    selectNode,
-    selectRange,
-    toggleExpansion
-  } = React.useContext(TreeViewContext);
-  const expandable = isExpandable ? isExpandable(nodeId) : false;
-  const expanded = isExpanded ? isExpanded(nodeId) : false;
-  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); // 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, {
-            end: nodeId
-          });
-        } else {
-          selectNode(event, nodeId, true);
-        }
-      } else {
-        selectNode(event, nodeId);
-      }
-    }
-  };
-
-  const preventSelection = event => {
-    if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {
-      // Prevent text selection
-      event.preventDefault();
-    }
-  };
-
-  return {
-    disabled,
-    expanded,
-    selected,
-    focused,
-    handleExpansion,
-    handleSelection,
-    preventSelection
-  };
-}

package/TreeView/TreeViewContext.js

@@ -1,12 +0,0 @@
-import * as React from 'react';
-/**
- * @ignore - internal component.
- */
-
-const TreeViewContext = /*#__PURE__*/React.createContext({});
-
-if (process.env.NODE_ENV !== 'production') {
-  TreeViewContext.displayName = 'TreeViewContext';
-}
-
-export default TreeViewContext;

package/TreeView/descendants.js

@@ -1,198 +0,0 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["element"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
-/** Credit: https://github.com/reach/reach-ui/blob/86a046f54d53b6420e392b3fa56dd991d9d4e458/packages/descendants/README.md
- *  Modified slightly to suit our purposes.
- */
-// To replace with .findIndex() once we stop IE11 support.
-
-import { jsx as _jsx } from "react/jsx-runtime";
-
-function findIndex(array, comp) {
-  for (let i = 0; i < array.length; i += 1) {
-    if (comp(array[i])) {
-      return i;
-    }
-  }
-
-  return -1;
-}
-
-function binaryFindElement(array, element) {
-  let start = 0;
-  let end = array.length - 1;
-
-  while (start <= end) {
-    const middle = Math.floor((start + end) / 2);
-
-    if (array[middle].element === element) {
-      return middle;
-    } // eslint-disable-next-line no-bitwise
-
-
-    if (array[middle].element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING) {
-      end = middle - 1;
-    } else {
-      start = middle + 1;
-    }
-  }
-
-  return start;
-}
-
-const DescendantContext = /*#__PURE__*/React.createContext({});
-
-if (process.env.NODE_ENV !== 'production') {
-  DescendantContext.displayName = 'DescendantContext';
-}
-
-function usePrevious(value) {
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}
-
-const noop = () => {};
-/**
- * This hook registers our descendant by passing it into an array. We can then
- * search that array by to find its index when registering it in the component.
- * We use this for focus management, keyboard navigation, and typeahead
- * functionality for some components.
- *
- * The hook accepts the element node
- *
- * Our main goals with this are:
- *   1) maximum composability,
- *   2) minimal API friction
- *   3) SSR compatibility*
- *   4) concurrent safe
- *   5) index always up-to-date with the tree despite changes
- *   6) works with memoization of any component in the tree (hopefully)
- *
- * * As for SSR, the good news is that we don't actually need the index on the
- * server for most use-cases, as we are only using it to determine the order of
- * composed descendants for keyboard navigation.
- */
-
-
-export function useDescendant(descendant) {
-  const [, forceUpdate] = React.useState();
-  const {
-    registerDescendant = noop,
-    unregisterDescendant = noop,
-    descendants = [],
-    parentId = null
-  } = React.useContext(DescendantContext); // This will initially return -1 because we haven't registered the descendant
-  // on the first render. After we register, this will then return the correct
-  // index on the following render and we will re-register descendants
-  // so that everything is up-to-date before the user interacts with a
-  // collection.
-
-  const index = findIndex(descendants, item => item.element === descendant.element);
-  const previousDescendants = usePrevious(descendants); // We also need to re-register descendants any time ANY of the other
-  // descendants have changed. My brain was melting when I wrote this and it
-  // feels a little off, but checking in render and using the result in the
-  // effect's dependency array works well enough.
-
-  const someDescendantsHaveChanged = descendants.some((newDescendant, position) => {
-    return previousDescendants && previousDescendants[position] && previousDescendants[position].element !== newDescendant.element;
-  }); // Prevent any flashing
-
-  useEnhancedEffect(() => {
-    if (descendant.element) {
-      registerDescendant(_extends({}, descendant, {
-        index
-      }));
-      return () => {
-        unregisterDescendant(descendant.element);
-      };
-    }
-
-    forceUpdate({});
-    return undefined;
-  }, [registerDescendant, unregisterDescendant, index, someDescendantsHaveChanged, descendant]);
-  return {
-    parentId,
-    index
-  };
-}
-export function DescendantProvider(props) {
-  const {
-    children,
-    id
-  } = props;
-  const [items, set] = React.useState([]);
-  const registerDescendant = React.useCallback(_ref => {
-    let {
-      element
-    } = _ref,
-        other = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-    set(oldItems => {
-      let newItems;
-
-      if (oldItems.length === 0) {
-        // If there are no items, register at index 0 and bail.
-        return [_extends({}, other, {
-          element,
-          index: 0
-        })];
-      }
-
-      const index = binaryFindElement(oldItems, element);
-
-      if (oldItems[index] && oldItems[index].element === element) {
-        // If the element is already registered, just use the same array
-        newItems = oldItems;
-      } else {
-        // When registering a descendant, we need to make sure we insert in
-        // into the array in the same order that it appears in the DOM. So as
-        // new descendants are added or maybe some are removed, we always know
-        // that the array is up-to-date and correct.
-        //
-        // So here we look at our registered descendants and see if the new
-        // element we are adding appears earlier than an existing descendant's
-        // DOM node via `node.compareDocumentPosition`. If it does, we insert
-        // the new element at this index. Because `registerDescendant` will be
-        // called in an effect every time the descendants state value changes,
-        // we should be sure that this index is accurate when descendent
-        // elements come or go from our component.
-        const newItem = _extends({}, other, {
-          element,
-          index
-        }); // If an index is not found we will push the element to the end.
-
-
-        newItems = oldItems.slice();
-        newItems.splice(index, 0, newItem);
-      }
-
-      newItems.forEach((item, position) => {
-        item.index = position;
-      });
-      return newItems;
-    });
-  }, []);
-  const unregisterDescendant = React.useCallback(element => {
-    set(oldItems => oldItems.filter(item => element !== item.element));
-  }, []);
-  const value = React.useMemo(() => ({
-    descendants: items,
-    registerDescendant,
-    unregisterDescendant,
-    parentId: id
-  }), [items, registerDescendant, unregisterDescendant, id]);
-  return /*#__PURE__*/_jsx(DescendantContext.Provider, {
-    value: value,
-    children: children
-  });
-}
-process.env.NODE_ENV !== "production" ? DescendantProvider.propTypes = {
-  children: PropTypes.node,
-  id: PropTypes.string
-} : void 0;

package/TreeView/treeViewClasses.d.ts

@@ -1,8 +0,0 @@
-export interface TreeViewClasses {
-    /** Styles applied to the root element. */
-    root: string;
-}
-export declare type TreeViewClassKey = keyof TreeViewClasses;
-export declare function getTreeViewUtilityClass(slot: string): string;
-declare const treeViewClasses: TreeViewClasses;
-export default treeViewClasses;

package/TreeView/treeViewClasses.js

@@ -1,6 +0,0 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
-export function getTreeViewUtilityClass(slot) {
-  return generateUtilityClass('MuiTreeView', slot);
-}
-const treeViewClasses = generateUtilityClasses('MuiTreeView', ['root']);
-export default treeViewClasses;

package/legacy/TreeItem/TreeItemContent.js

@@ -1,125 +0,0 @@
-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 useTreeItem from './useTreeItem';
-/**
- * @ignore - internal component.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var TreeItemContent = /*#__PURE__*/React.forwardRef(function TreeItemContent(props, ref) {
-  var classes = props.classes,
-      className = props.className,
-      displayIcon = props.displayIcon,
-      expansionIcon = props.expansionIcon,
-      iconProp = props.icon,
-      label = props.label,
-      nodeId = props.nodeId,
-      onClick = props.onClick,
-      onMouseDown = props.onMouseDown,
-      other = _objectWithoutProperties(props, ["classes", "className", "displayIcon", "expansionIcon", "icon", "label", "nodeId", "onClick", "onMouseDown"]);
-
-  var _useTreeItem = useTreeItem(nodeId),
-      disabled = _useTreeItem.disabled,
-      expanded = _useTreeItem.expanded,
-      selected = _useTreeItem.selected,
-      focused = _useTreeItem.focused,
-      handleExpansion = _useTreeItem.handleExpansion,
-      handleSelection = _useTreeItem.handleSelection,
-      preventSelection = _useTreeItem.preventSelection;
-
-  var icon = iconProp || expansionIcon || displayIcon;
-
-  var handleMouseDown = function handleMouseDown(event) {
-    preventSelection(event);
-
-    if (onMouseDown) {
-      onMouseDown(event);
-    }
-  };
-
-  var handleClick = function 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),
-      onClick: handleClick,
-      onMouseDown: handleMouseDown,
-      ref: ref
-    }, other, {
-      children: [/*#__PURE__*/_jsx("div", {
-        className: classes.iconContainer,
-        children: icon
-      }), /*#__PURE__*/_jsx("div", {
-        className: classes.label,
-        children: label
-      })]
-    }))
-  );
-});
-process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | 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
-   */
-  onMouseDown: PropTypes.func
-} : void 0;
-export default TreeItemContent;

package/legacy/TreeItem/treeItemClasses.js

@@ -1,6 +0,0 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
-export function getTreeItemUtilityClass(slot) {
-  return generateUtilityClass('MuiTreeItem', slot);
-}
-var treeItemClasses = generateUtilityClasses('MuiTreeItem', ['root', 'group', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label']);
-export default treeItemClasses;

package/legacy/TreeItem/useTreeItem.js

@@ -1,74 +0,0 @@
-import * as React from 'react';
-import TreeViewContext from '../TreeView/TreeViewContext';
-export default function useTreeItem(nodeId) {
-  var _React$useContext = React.useContext(TreeViewContext),
-      focus = _React$useContext.focus,
-      isExpanded = _React$useContext.isExpanded,
-      isExpandable = _React$useContext.isExpandable,
-      isFocused = _React$useContext.isFocused,
-      isDisabled = _React$useContext.isDisabled,
-      isSelected = _React$useContext.isSelected,
-      multiSelect = _React$useContext.multiSelect,
-      selectNode = _React$useContext.selectNode,
-      selectRange = _React$useContext.selectRange,
-      toggleExpansion = _React$useContext.toggleExpansion;
-
-  var expandable = isExpandable ? isExpandable(nodeId) : false;
-  var expanded = isExpanded ? isExpanded(nodeId) : false;
-  var focused = isFocused ? isFocused(nodeId) : false;
-  var disabled = isDisabled ? isDisabled(nodeId) : false;
-  var selected = isSelected ? isSelected(nodeId) : false;
-
-  var handleExpansion = function handleExpansion(event) {
-    if (!disabled) {
-      if (!focused) {
-        focus(event, nodeId);
-      }
-
-      var multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey); // If already expanded and trying to toggle selection don't close
-
-      if (expandable && !(multiple && isExpanded(nodeId))) {
-        toggleExpansion(event, nodeId);
-      }
-    }
-  };
-
-  var handleSelection = function handleSelection(event) {
-    if (!disabled) {
-      if (!focused) {
-        focus(event, nodeId);
-      }
-
-      var multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
-
-      if (multiple) {
-        if (event.shiftKey) {
-          selectRange(event, {
-            end: nodeId
-          });
-        } else {
-          selectNode(event, nodeId, true);
-        }
-      } else {
-        selectNode(event, nodeId);
-      }
-    }
-  };
-
-  var preventSelection = function preventSelection(event) {
-    if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {
-      // Prevent text selection
-      event.preventDefault();
-    }
-  };
-
-  return {
-    disabled: disabled,
-    expanded: expanded,
-    selected: selected,
-    focused: focused,
-    handleExpansion: handleExpansion,
-    handleSelection: handleSelection,
-    preventSelection: preventSelection
-  };
-}

package/legacy/TreeView/TreeViewContext.js

@@ -1,12 +0,0 @@
-import * as React from 'react';
-/**
- * @ignore - internal component.
- */
-
-var TreeViewContext = /*#__PURE__*/React.createContext({});
-
-if (process.env.NODE_ENV !== 'production') {
-  TreeViewContext.displayName = 'TreeViewContext';
-}
-
-export default TreeViewContext;