@mui/x-tree-view 8.0.0-alpha.8 → 8.0.0-beta.0

package/useTreeItem/index.d.ts

@@ -1,2 +1,2 @@
-export { useTreeItem } from './useTreeItem';
-export type { UseTreeItemParameters, UseTreeItemReturnValue, UseTreeItemStatus, UseTreeItemRootSlotOwnProps, UseTreeItemContentSlotOwnProps, UseTreeItemLabelInputSlotOwnProps, UseTreeItemLabelSlotOwnProps, UseTreeItemCheckboxSlotOwnProps, UseTreeItemIconContainerSlotOwnProps, UseTreeItemGroupTransitionSlotOwnProps, UseTreeItemDragAndDropOverlaySlotOwnProps, } from './useTreeItem.types';
+export { useTreeItem } from "./useTreeItem.js";
+export type { UseTreeItemParameters, UseTreeItemReturnValue, UseTreeItemStatus, UseTreeItemRootSlotOwnProps, UseTreeItemContentSlotOwnProps, UseTreeItemLabelInputSlotOwnProps, UseTreeItemLabelSlotOwnProps, UseTreeItemCheckboxSlotOwnProps, UseTreeItemIconContainerSlotOwnProps, UseTreeItemGroupTransitionSlotOwnProps, UseTreeItemDragAndDropOverlaySlotOwnProps } from './useTreeItem.types';

package/useTreeItem/index.js

@@ -1 +1,12 @@
-export { useTreeItem } from "./useTreeItem.js";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useTreeItem", {
+  enumerable: true,
+  get: function () {
+    return _useTreeItem.useTreeItem;
+  }
+});
+var _useTreeItem = require("./useTreeItem");

package/useTreeItem/useTreeItem.d.ts

@@ -1,2 +1,2 @@
-import { UseTreeItemParameters, UseTreeItemReturnValue, UseTreeItemMinimalPlugins, UseTreeItemOptionalPlugins } from './useTreeItem.types';
-export declare const useTreeItem: <TSignatures extends UseTreeItemMinimalPlugins = UseTreeItemMinimalPlugins, TOptionalSignatures extends UseTreeItemOptionalPlugins = readonly []>(parameters: UseTreeItemParameters) => UseTreeItemReturnValue<TSignatures, TOptionalSignatures>;
+import { UseTreeItemParameters, UseTreeItemReturnValue, UseTreeItemMinimalPlugins, UseTreeItemOptionalPlugins } from "./useTreeItem.types.js";
+export declare const useTreeItem: <TSignatures extends UseTreeItemMinimalPlugins = UseTreeItemMinimalPlugins, TOptionalSignatures extends UseTreeItemOptionalPlugins = UseTreeItemOptionalPlugins>(parameters: UseTreeItemParameters) => UseTreeItemReturnValue<TSignatures, TOptionalSignatures>;

package/useTreeItem/useTreeItem.js

@@ -1,20 +1,27 @@
+"use strict";
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import extractEventHandlers from '@mui/utils/extractEventHandlers';
-import useForkRef from '@mui/utils/useForkRef';
-import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
-import { useTreeItemUtils } from "../hooks/useTreeItemUtils/index.js";
-import { TreeViewItemDepthContext } from "../internals/TreeViewItemDepthContext/index.js";
-import { isTargetInDescendants } from "../internals/utils/tree.js";
-import { useSelector } from "../internals/hooks/useSelector.js";
-import { selectorIsItemTheDefaultFocusableItem } from "../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js";
-import { generateTreeItemIdAttribute } from "../internals/corePlugins/useTreeViewId/useTreeViewId.utils.js";
-import { selectorCanItemBeFocused } from "../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
-import { selectorTreeViewId } from "../internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js";
-import { selectorItemExpansionTrigger } from "../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
-export const useTreeItem = parameters => {
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeItem = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _extractEventHandlers = _interopRequireDefault(require("@mui/utils/extractEventHandlers"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _TreeViewProvider = require("../internals/TreeViewProvider");
+var _useTreeItemUtils = require("../hooks/useTreeItemUtils");
+var _TreeViewItemDepthContext = require("../internals/TreeViewItemDepthContext");
+var _tree = require("../internals/utils/tree");
+var _useSelector = require("../internals/hooks/useSelector");
+var _useTreeViewFocus = require("../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors");
+var _useTreeViewId = require("../internals/corePlugins/useTreeViewId/useTreeViewId.utils");
+var _useTreeViewItems = require("../internals/plugins/useTreeViewItems/useTreeViewItems.selectors");
+var _useTreeViewId2 = require("../internals/corePlugins/useTreeViewId/useTreeViewId.selectors");
+var _useTreeViewExpansion = require("../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors");
+const useTreeItem = parameters => {
   const {
     runItemPlugins,
     items: {
@@ -28,9 +35,9 @@ export const useTreeItem = parameters => {
     instance,
     publicAPI,
     store
-  } = useTreeViewContext();
-  const depthContext = React.useContext(TreeViewItemDepthContext);
-  const depth = useSelector(store, (...params) => {
+  } = (0, _TreeViewProvider.useTreeViewContext)();
+  const depthContext = React.useContext(_TreeViewItemDepthContext.TreeViewItemDepthContext);
+  const depth = (0, _useSelector.useSelector)(store, (...params) => {
     if (typeof depthContext === 'function') {
       return depthContext(...params);
     }
@@ -51,22 +58,22 @@ export const useTreeItem = parameters => {
   const {
     interactions,
     status
-  } = useTreeItemUtils({
+  } = (0, _useTreeItemUtils.useTreeItemUtils)({
     itemId,
     children
   });
   const rootRefObject = React.useRef(null);
   const contentRefObject = React.useRef(null);
-  const handleRootRef = useForkRef(rootRef, pluginRootRef, rootRefObject);
-  const handleContentRef = useForkRef(contentRef, contentRefObject);
+  const handleRootRef = (0, _useForkRef.default)(rootRef, pluginRootRef, rootRefObject);
+  const handleContentRef = (0, _useForkRef.default)(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
-  const treeId = useSelector(store, selectorTreeViewId);
-  const idAttribute = generateTreeItemIdAttribute({
+  const treeId = (0, _useSelector.useSelector)(store, _useTreeViewId2.selectorTreeViewId);
+  const idAttribute = (0, _useTreeViewId.generateTreeItemIdAttribute)({
     itemId,
     treeId,
     id
   });
-  const shouldBeAccessibleWithTab = useSelector(store, selectorIsItemTheDefaultFocusableItem, itemId);
+  const shouldBeAccessibleWithTab = (0, _useSelector.useSelector)(store, _useTreeViewFocus.selectorIsItemTheDefaultFocusableItem, itemId);
   const sharedPropsEnhancerParams = {
     rootRefObject,
     contentRefObject,
@@ -78,7 +85,7 @@ export const useTreeItem = parameters => {
     if (event.defaultMuiPrevented) {
       return;
     }
-    if (!status.focused && selectorCanItemBeFocused(store.value, itemId) && event.currentTarget === event.target) {
+    if (!status.focused && (0, _useTreeViewItems.selectorCanItemBeFocused)(store.value, itemId) && event.currentTarget === event.target) {
       instance.focusItem(event, itemId);
     }
   };
@@ -95,7 +102,7 @@ export const useTreeItem = parameters => {
     if (status.editing ||
     // we can exit the editing state by clicking outside the input (within the Tree Item) or by pressing Enter or Escape -> we don't want to remove the focused item from the state in these cases
     // we can also exit the editing state by clicking on the root itself -> want to remove the focused item from the state in this case
-    event.relatedTarget && isTargetInDescendants(event.relatedTarget, rootElement) && (event.target && event.target?.dataset?.element === 'labelInput' && isTargetInDescendants(event.target, rootElement) || event.relatedTarget?.dataset?.element === 'labelInput')) {
+    event.relatedTarget && (0, _tree.isTargetInDescendants)(event.relatedTarget, rootElement) && (event.target && event.target?.dataset?.element === 'labelInput' && (0, _tree.isTargetInDescendants)(event.target, rootElement) || event.relatedTarget?.dataset?.element === 'labelInput')) {
       return;
     }
     instance.removeFocusedItem();
@@ -120,7 +127,7 @@ export const useTreeItem = parameters => {
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
-    if (selectorItemExpansionTrigger(store.value) === 'content') {
+    if ((0, _useTreeViewExpansion.selectorItemExpansionTrigger)(store.value) === 'content') {
       interactions.handleExpansion(event);
     }
     if (!checkboxSelection) {
@@ -143,7 +150,7 @@ export const useTreeItem = parameters => {
     if (event.defaultMuiPrevented) {
       return;
     }
-    if (selectorItemExpansionTrigger(store.value) === 'iconContainer') {
+    if ((0, _useTreeViewExpansion.selectorItemExpansionTrigger)(store.value) === 'iconContainer') {
       interactions.handleExpansion(event);
     }
   };
@@ -152,7 +159,7 @@ export const useTreeItem = parameters => {
     id
   });
   const getRootProps = (externalProps = {}) => {
-    const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
+    const externalEventHandlers = (0, _extends2.default)({}, (0, _extractEventHandlers.default)(parameters), (0, _extractEventHandlers.default)(externalProps));
 
     // https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
     let ariaSelected;
@@ -166,7 +173,7 @@ export const useTreeItem = parameters => {
       // - all nodes that are selectable but not selected have aria-selected set to false.
       ariaSelected = false;
     }
-    const props = _extends({}, externalEventHandlers, {
+    const props = (0, _extends2.default)({}, externalEventHandlers, {
       ref: handleRootRef,
       role: 'treeitem',
       tabIndex: shouldBeAccessibleWithTab ? 0 : -1,
@@ -175,44 +182,44 @@ export const useTreeItem = parameters => {
       'aria-selected': ariaSelected,
       'aria-disabled': status.disabled || undefined
     }, externalProps, {
-      style: _extends({}, externalProps.style ?? {}, {
+      style: (0, _extends2.default)({}, externalProps.style ?? {}, {
         '--TreeView-itemDepth': depth
       }),
       onFocus: createRootHandleFocus(externalEventHandlers),
       onBlur: createRootHandleBlur(externalEventHandlers),
       onKeyDown: createRootHandleKeyDown(externalEventHandlers)
     });
-    const enhancedRootProps = propsEnhancers.root?.(_extends({}, sharedPropsEnhancerParams, {
+    const enhancedRootProps = propsEnhancers.root?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
-    return _extends({}, props, enhancedRootProps);
+    return (0, _extends2.default)({}, props, enhancedRootProps);
   };
   const getContentProps = (externalProps = {}) => {
-    const externalEventHandlers = extractEventHandlers(externalProps);
-    const props = _extends({}, externalEventHandlers, externalProps, {
+    const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
+    const props = (0, _extends2.default)({}, externalEventHandlers, externalProps, {
       ref: handleContentRef,
       onClick: createContentHandleClick(externalEventHandlers),
       onMouseDown: createContentHandleMouseDown(externalEventHandlers),
       status
     });
-    const enhancedContentProps = propsEnhancers.content?.(_extends({}, sharedPropsEnhancerParams, {
+    const enhancedContentProps = propsEnhancers.content?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
-    return _extends({}, props, enhancedContentProps);
+    return (0, _extends2.default)({}, props, enhancedContentProps);
   };
   const getCheckboxProps = (externalProps = {}) => {
-    const externalEventHandlers = extractEventHandlers(externalProps);
-    const props = _extends({}, externalEventHandlers, {
+    const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
+    const props = (0, _extends2.default)({}, externalEventHandlers, {
       ref: checkboxRef
     }, externalProps);
-    const enhancedCheckboxProps = propsEnhancers.checkbox?.(_extends({}, sharedPropsEnhancerParams, {
+    const enhancedCheckboxProps = propsEnhancers.checkbox?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
-    return _extends({}, props, enhancedCheckboxProps);
+    return (0, _extends2.default)({}, props, enhancedCheckboxProps);
   };
   const getLabelProps = (externalProps = {}) => {
-    const externalEventHandlers = _extends({}, extractEventHandlers(externalProps));
-    const props = _extends({}, externalEventHandlers, {
+    const externalEventHandlers = (0, _extends2.default)({}, (0, _extractEventHandlers.default)(externalProps));
+    const props = (0, _extends2.default)({}, externalEventHandlers, {
       children: label
     }, externalProps, {
       onDoubleClick: createLabelHandleDoubleClick(externalEventHandlers)
@@ -223,21 +230,32 @@ export const useTreeItem = parameters => {
     return props;
   };
   const getLabelInputProps = (externalProps = {}) => {
-    const externalEventHandlers = extractEventHandlers(externalProps);
-    const enhancedLabelInputProps = propsEnhancers.labelInput?.(_extends({}, sharedPropsEnhancerParams, {
+    const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
+    const enhancedLabelInputProps = propsEnhancers.labelInput?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
-    return _extends({}, externalProps, enhancedLabelInputProps);
+    return (0, _extends2.default)({}, externalProps, enhancedLabelInputProps);
   };
   const getIconContainerProps = (externalProps = {}) => {
-    const externalEventHandlers = extractEventHandlers(externalProps);
-    return _extends({}, externalEventHandlers, externalProps, {
+    const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
+    return (0, _extends2.default)({}, externalEventHandlers, externalProps, {
       onClick: createIconContainerHandleClick(externalEventHandlers)
     });
   };
+  const getErrorContainerProps = (externalProps = {}) => {
+    const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
+    return (0, _extends2.default)({}, externalEventHandlers, externalProps);
+  };
+  const getLoadingContainerProps = (externalProps = {}) => {
+    const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
+    return (0, _extends2.default)({
+      size: '12px',
+      thickness: 6
+    }, externalEventHandlers, externalProps);
+  };
   const getGroupTransitionProps = (externalProps = {}) => {
-    const externalEventHandlers = extractEventHandlers(externalProps);
-    const response = _extends({}, externalEventHandlers, {
+    const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
+    const response = (0, _extends2.default)({}, externalEventHandlers, {
       unmountOnExit: true,
       component: 'ul',
       role: 'group',
@@ -247,11 +265,11 @@ export const useTreeItem = parameters => {
     return response;
   };
   const getDragAndDropOverlayProps = (externalProps = {}) => {
-    const externalEventHandlers = extractEventHandlers(externalProps);
-    const enhancedDragAndDropOverlayProps = propsEnhancers.dragAndDropOverlay?.(_extends({}, sharedPropsEnhancerParams, {
+    const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
+    const enhancedDragAndDropOverlayProps = propsEnhancers.dragAndDropOverlay?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
-    return _extends({}, externalProps, enhancedDragAndDropOverlayProps);
+    return (0, _extends2.default)({}, externalProps, enhancedDragAndDropOverlayProps);
   };
   return {
     getContextProviderProps,
@@ -263,8 +281,11 @@ export const useTreeItem = parameters => {
     getLabelProps,
     getLabelInputProps,
     getDragAndDropOverlayProps,
+    getErrorContainerProps,
+    getLoadingContainerProps,
     rootRef: handleRootRef,
     status,
     publicAPI
   };
-};
+};
+exports.useTreeItem = useTreeItem;