@mui/x-tree-view 7.22.1 → 8.0.0-alpha.1

package/modern/internals/utils/tree.js

@@ -1,7 +1,9 @@
-const getLastNavigableItemInArray = (instance, items) => {
+import { selectorIsItemExpandable, selectorIsItemExpanded } from "../plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
+import { selectorCanItemBeFocused, selectorIsItemDisabled, selectorItemIndex, selectorItemMeta, selectorItemOrderedChildrenIds, selectorItemParentId } from "../plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+const getLastNavigableItemInArray = (state, items) => {
   // Equivalent to Array.prototype.findLastIndex
   let itemIndex = items.length - 1;
-  while (itemIndex >= 0 && !instance.isItemNavigable(items[itemIndex])) {
+  while (itemIndex >= 0 && !selectorCanItemBeFocused(state, items[itemIndex])) {
     itemIndex -= 1;
   }
   if (itemIndex === -1) {
@@ -9,10 +11,13 @@ const getLastNavigableItemInArray = (instance, items) => {
   }
   return items[itemIndex];
 };
-export const getPreviousNavigableItem = (instance, itemId) => {
-  const itemMeta = instance.getItemMeta(itemId);
-  const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
-  const itemIndex = instance.getItemIndex(itemId);
+export const getPreviousNavigableItem = (state, itemId) => {
+  const itemMeta = selectorItemMeta(state, itemId);
+  if (!itemMeta) {
+    return null;
+  }
+  const siblings = selectorItemOrderedChildrenIds(state, itemMeta.parentId);
+  const itemIndex = selectorItemIndex(state, itemId);
 
   // TODO: What should we do if the parent is not navigable?
   if (itemIndex === 0) {
@@ -21,7 +26,7 @@ export const getPreviousNavigableItem = (instance, itemId) => {
 
   // Finds the previous navigable sibling.
   let previousNavigableSiblingIndex = itemIndex - 1;
-  while (!instance.isItemNavigable(siblings[previousNavigableSiblingIndex]) && previousNavigableSiblingIndex >= 0) {
+  while (!selectorCanItemBeFocused(state, siblings[previousNavigableSiblingIndex]) && previousNavigableSiblingIndex >= 0) {
     previousNavigableSiblingIndex -= 1;
   }
   if (previousNavigableSiblingIndex === -1) {
@@ -31,51 +36,51 @@ export const getPreviousNavigableItem = (instance, itemId) => {
     }
 
     // Otherwise, we can try to go up a level and find the previous navigable item.
-    return getPreviousNavigableItem(instance, itemMeta.parentId);
+    return getPreviousNavigableItem(state, itemMeta.parentId);
   }
 
   // Finds the last navigable ancestor of the previous navigable sibling.
   let currentItemId = siblings[previousNavigableSiblingIndex];
-  let lastNavigableChild = getLastNavigableItemInArray(instance, instance.getItemOrderedChildrenIds(currentItemId));
-  while (instance.isItemExpanded(currentItemId) && lastNavigableChild != null) {
+  let lastNavigableChild = getLastNavigableItemInArray(state, selectorItemOrderedChildrenIds(state, currentItemId));
+  while (selectorIsItemExpanded(state, currentItemId) && lastNavigableChild != null) {
     currentItemId = lastNavigableChild;
-    lastNavigableChild = instance.getItemOrderedChildrenIds(currentItemId).find(instance.isItemNavigable);
+    lastNavigableChild = selectorItemOrderedChildrenIds(state, currentItemId).find(childId => selectorCanItemBeFocused(state, childId));
   }
   return currentItemId;
 };
-export const getNextNavigableItem = (instance, itemId) => {
+export const getNextNavigableItem = (state, itemId) => {
   // If the item is expanded and has some navigable children, return the first of them.
-  if (instance.isItemExpanded(itemId)) {
-    const firstNavigableChild = instance.getItemOrderedChildrenIds(itemId).find(instance.isItemNavigable);
+  if (selectorIsItemExpanded(state, itemId)) {
+    const firstNavigableChild = selectorItemOrderedChildrenIds(state, itemId).find(childId => selectorCanItemBeFocused(state, childId));
     if (firstNavigableChild != null) {
       return firstNavigableChild;
     }
   }
-  let itemMeta = instance.getItemMeta(itemId);
+  let itemMeta = selectorItemMeta(state, itemId);
   while (itemMeta != null) {
     // Try to find the first navigable sibling after the current item.
-    const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
-    const currentItemIndex = instance.getItemIndex(itemMeta.id);
+    const siblings = selectorItemOrderedChildrenIds(state, itemMeta.parentId);
+    const currentItemIndex = selectorItemIndex(state, itemMeta.id);
     if (currentItemIndex < siblings.length - 1) {
       let nextItemIndex = currentItemIndex + 1;
-      while (!instance.isItemNavigable(siblings[nextItemIndex]) && nextItemIndex < siblings.length - 1) {
+      while (!selectorCanItemBeFocused(state, siblings[nextItemIndex]) && nextItemIndex < siblings.length - 1) {
         nextItemIndex += 1;
       }
-      if (instance.isItemNavigable(siblings[nextItemIndex])) {
+      if (selectorCanItemBeFocused(state, siblings[nextItemIndex])) {
         return siblings[nextItemIndex];
       }
     }
 
     // If the sibling does not exist, go up a level to the parent and try again.
-    itemMeta = instance.getItemMeta(itemMeta.parentId);
+    itemMeta = selectorItemMeta(state, itemMeta.parentId);
   }
   return null;
 };
-export const getLastNavigableItem = instance => {
+export const getLastNavigableItem = state => {
   let itemId = null;
-  while (itemId == null || instance.isItemExpanded(itemId)) {
-    const children = instance.getItemOrderedChildrenIds(itemId);
-    const lastNavigableChild = getLastNavigableItemInArray(instance, children);
+  while (itemId == null || selectorIsItemExpanded(state, itemId)) {
+    const children = selectorItemOrderedChildrenIds(state, itemId);
+    const lastNavigableChild = getLastNavigableItemInArray(state, children);
 
     // The item has no navigable children.
     if (lastNavigableChild == null) {
@@ -85,7 +90,7 @@ export const getLastNavigableItem = instance => {
   }
   return itemId;
 };
-export const getFirstNavigableItem = instance => instance.getItemOrderedChildrenIds(null).find(instance.isItemNavigable);
+export const getFirstNavigableItem = state => selectorItemOrderedChildrenIds(state, null).find(itemId => selectorCanItemBeFocused(state, itemId));
 
 /**
  * This is used to determine the start and end of a selection range so
@@ -101,12 +106,15 @@ export const getFirstNavigableItem = instance => instance.getItemOrderedChildren
  * Another way to put it is which item is shallower in a trémaux tree
  * https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree
  */
-export const findOrderInTremauxTree = (instance, itemAId, itemBId) => {
+export const findOrderInTremauxTree = (state, itemAId, itemBId) => {
   if (itemAId === itemBId) {
     return [itemAId, itemBId];
   }
-  const itemMetaA = instance.getItemMeta(itemAId);
-  const itemMetaB = instance.getItemMeta(itemBId);
+  const itemMetaA = selectorItemMeta(state, itemAId);
+  const itemMetaB = selectorItemMeta(state, itemBId);
+  if (!itemMetaA || !itemMetaB) {
+    return [itemAId, itemBId];
+  }
   if (itemMetaA.parentId === itemMetaB.id || itemMetaB.parentId === itemMetaA.id) {
     return itemMetaB.parentId === itemMetaA.id ? [itemMetaA.id, itemMetaB.id] : [itemMetaB.id, itemMetaA.id];
   }
@@ -124,7 +132,7 @@ export const findOrderInTremauxTree = (instance, itemAId, itemBId) => {
       aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
       continueA = aAncestor !== null;
       if (!aAncestorIsCommon && continueA) {
-        aAncestor = instance.getItemMeta(aAncestor).parentId;
+        aAncestor = selectorItemParentId(state, aAncestor);
       }
     }
     if (continueB && !aAncestorIsCommon) {
@@ -132,53 +140,53 @@ export const findOrderInTremauxTree = (instance, itemAId, itemBId) => {
       bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
       continueB = bAncestor !== null;
       if (!bAncestorIsCommon && continueB) {
-        bAncestor = instance.getItemMeta(bAncestor).parentId;
+        bAncestor = selectorItemParentId(state, bAncestor);
       }
     }
   }
   const commonAncestor = aAncestorIsCommon ? aAncestor : bAncestor;
-  const ancestorFamily = instance.getItemOrderedChildrenIds(commonAncestor);
+  const ancestorFamily = selectorItemOrderedChildrenIds(state, commonAncestor);
   const aSide = aFamily[aFamily.indexOf(commonAncestor) - 1];
   const bSide = bFamily[bFamily.indexOf(commonAncestor) - 1];
   return ancestorFamily.indexOf(aSide) < ancestorFamily.indexOf(bSide) ? [itemAId, itemBId] : [itemBId, itemAId];
 };
-export const getNonDisabledItemsInRange = (instance, itemAId, itemBId) => {
+export const getNonDisabledItemsInRange = (state, itemAId, itemBId) => {
   const getNextItem = itemId => {
     // If the item is expanded and has some children, return the first of them.
-    if (instance.isItemExpandable(itemId) && instance.isItemExpanded(itemId)) {
-      return instance.getItemOrderedChildrenIds(itemId)[0];
+    if (selectorIsItemExpandable(state, itemId) && selectorIsItemExpanded(state, itemId)) {
+      return selectorItemOrderedChildrenIds(state, itemId)[0];
     }
-    let itemMeta = instance.getItemMeta(itemId);
+    let itemMeta = selectorItemMeta(state, itemId);
     while (itemMeta != null) {
       // Try to find the first navigable sibling after the current item.
-      const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
-      const currentItemIndex = instance.getItemIndex(itemMeta.id);
+      const siblings = selectorItemOrderedChildrenIds(state, itemMeta.parentId);
+      const currentItemIndex = selectorItemIndex(state, itemMeta.id);
       if (currentItemIndex < siblings.length - 1) {
         return siblings[currentItemIndex + 1];
       }
 
       // If the item is the last of its siblings, go up a level to the parent and try again.
-      itemMeta = instance.getItemMeta(itemMeta.parentId);
+      itemMeta = itemMeta.parentId ? selectorItemMeta(state, itemMeta.parentId) : null;
     }
     throw new Error('Invalid range');
   };
-  const [first, last] = findOrderInTremauxTree(instance, itemAId, itemBId);
+  const [first, last] = findOrderInTremauxTree(state, itemAId, itemBId);
   const items = [first];
   let current = first;
   while (current !== last) {
     current = getNextItem(current);
-    if (!instance.isItemDisabled(current)) {
+    if (!selectorIsItemDisabled(state, current)) {
       items.push(current);
     }
   }
   return items;
 };
-export const getAllNavigableItems = instance => {
-  let item = getFirstNavigableItem(instance);
+export const getAllNavigableItems = state => {
+  let item = getFirstNavigableItem(state);
   const navigableItems = [];
   while (item != null) {
     navigableItems.push(item);
-    item = getNextNavigableItem(instance, item);
+    item = getNextNavigableItem(state, item);
   }
   return navigableItems;
 };

package/modern/useTreeItem/index.js

@@ -0,0 +1 @@
+export { useTreeItem } from "./useTreeItem.js";

package/modern/{useTreeItem2/useTreeItem2.js → useTreeItem/useTreeItem.js}

@@ -1,19 +1,23 @@
+'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 { useTreeItem2Utils } from "../hooks/useTreeItem2Utils/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";
-export const useTreeItem2 = parameters => {
+import { selectorCanItemBeFocused } from "../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+import { selectorTreeViewId } from "../internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js";
+export const useTreeItem = parameters => {
   const {
     runItemPlugins,
     items: {
-      onItemClick,
-      disabledItemsFocusable,
-      indentationAtItemLevel
+      onItemClick
     },
     selection: {
       disableSelection,
@@ -22,11 +26,18 @@ export const useTreeItem2 = parameters => {
     expansion: {
       expansionTrigger
     },
-    treeId,
+    label: labelContext,
     instance,
-    publicAPI
+    publicAPI,
+    store
   } = useTreeViewContext();
   const depthContext = React.useContext(TreeViewItemDepthContext);
+  const depth = useSelector(store, (...params) => {
+    if (typeof depthContext === 'function') {
+      return depthContext(...params);
+    }
+    return depthContext;
+  }, parameters.itemId);
   const {
     id,
     itemId,
@@ -42,7 +53,7 @@ export const useTreeItem2 = parameters => {
   const {
     interactions,
     status
-  } = useTreeItem2Utils({
+  } = useTreeItemUtils({
     itemId,
     children
   });
@@ -51,24 +62,25 @@ export const useTreeItem2 = parameters => {
   const handleRootRef = useForkRef(rootRef, pluginRootRef, rootRefObject);
   const handleContentRef = useForkRef(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
+  const treeId = useSelector(store, selectorTreeViewId);
   const idAttribute = generateTreeItemIdAttribute({
     itemId,
     treeId,
     id
   });
-  const rootTabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
+  const shouldBeAccessibleWithTab = useSelector(store, selectorIsItemTheDefaultFocusableItem, itemId);
   const sharedPropsEnhancerParams = {
     rootRefObject,
     contentRefObject,
-    interactions
+    interactions,
+    status
   };
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
     if (event.defaultMuiPrevented) {
       return;
     }
-    const canBeFocused = !status.disabled || disabledItemsFocusable;
-    if (!status.focused && canBeFocused && event.currentTarget === event.target) {
+    if (!status.focused && selectorCanItemBeFocused(store.value, itemId) && event.currentTarget === event.target) {
       instance.focusItem(event, itemId);
     }
   };
@@ -106,7 +118,7 @@ export const useTreeItem2 = parameters => {
   };
   const createContentHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
-    onItemClick?.(event, itemId);
+    onItemClick(event, itemId);
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
@@ -128,16 +140,6 @@ export const useTreeItem2 = parameters => {
       event.preventDefault();
     }
   };
-  const createCheckboxHandleChange = otherHandlers => event => {
-    otherHandlers.onChange?.(event);
-    if (event.defaultMuiPrevented) {
-      return;
-    }
-    if (disableSelection || status.disabled) {
-      return;
-    }
-    interactions.handleCheckboxSelection(event);
-  };
   const createIconContainerHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
     if (event.defaultMuiPrevented) {
@@ -147,6 +149,10 @@ export const useTreeItem2 = parameters => {
       interactions.handleExpansion(event);
     }
   };
+  const getContextProviderProps = () => ({
+    itemId,
+    id
+  });
   const getRootProps = (externalProps = {}) => {
     const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
 
@@ -165,21 +171,19 @@ export const useTreeItem2 = parameters => {
     const props = _extends({}, externalEventHandlers, {
       ref: handleRootRef,
       role: 'treeitem',
-      tabIndex: rootTabIndex,
+      tabIndex: shouldBeAccessibleWithTab ? 0 : -1,
       id: idAttribute,
       'aria-expanded': status.expandable ? status.expanded : undefined,
       'aria-selected': ariaSelected,
       'aria-disabled': status.disabled || undefined
     }, externalProps, {
+      style: _extends({}, externalProps.style ?? {}, {
+        '--TreeView-itemDepth': depth
+      }),
       onFocus: createRootHandleFocus(externalEventHandlers),
       onBlur: createRootHandleBlur(externalEventHandlers),
       onKeyDown: createRootHandleKeyDown(externalEventHandlers)
     });
-    if (indentationAtItemLevel) {
-      props.style = {
-        '--TreeView-itemDepth': typeof depthContext === 'function' ? depthContext(itemId) : depthContext
-      };
-    }
     const enhancedRootProps = propsEnhancers.root?.(_extends({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
@@ -193,9 +197,6 @@ export const useTreeItem2 = parameters => {
       onMouseDown: createContentHandleMouseDown(externalEventHandlers),
       status
     });
-    if (indentationAtItemLevel) {
-      props.indentationAtItemLevel = true;
-    }
     const enhancedContentProps = propsEnhancers.content?.(_extends({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
@@ -203,15 +204,13 @@ export const useTreeItem2 = parameters => {
   };
   const getCheckboxProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
-    return _extends({}, externalEventHandlers, {
-      visible: checkboxSelection,
-      ref: checkboxRef,
-      checked: status.selected,
-      disabled: disableSelection || status.disabled,
-      tabIndex: -1
-    }, externalProps, {
-      onChange: createCheckboxHandleChange(externalEventHandlers)
-    });
+    const props = _extends({}, externalEventHandlers, {
+      ref: checkboxRef
+    }, externalProps);
+    const enhancedCheckboxProps = propsEnhancers.checkbox?.(_extends({}, sharedPropsEnhancerParams, {
+      externalEventHandlers
+    })) ?? {};
+    return _extends({}, props, enhancedCheckboxProps);
   };
   const getLabelProps = (externalProps = {}) => {
     const externalEventHandlers = _extends({}, extractEventHandlers(externalProps));
@@ -220,19 +219,16 @@ export const useTreeItem2 = parameters => {
     }, externalProps, {
       onDoubleClick: createLabelHandleDoubleClick(externalEventHandlers)
     });
-    if (instance.isTreeViewEditable) {
+    if (labelContext?.isItemEditable) {
       props.editable = status.editable;
     }
     return props;
   };
   const getLabelInputProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
-    const enhancedLabelInputProps = propsEnhancers.labelInput?.({
-      rootRefObject,
-      contentRefObject,
-      externalEventHandlers,
-      interactions
-    }) ?? {};
+    const enhancedLabelInputProps = propsEnhancers.labelInput?.(_extends({}, sharedPropsEnhancerParams, {
+      externalEventHandlers
+    })) ?? {};
     return _extends({}, externalProps, enhancedLabelInputProps);
   };
   const getIconContainerProps = (externalProps = {}) => {
@@ -250,9 +246,6 @@ export const useTreeItem2 = parameters => {
       in: status.expanded,
       children
     }, externalProps);
-    if (indentationAtItemLevel) {
-      response.indentationAtItemLevel = true;
-    }
     return response;
   };
   const getDragAndDropOverlayProps = (externalProps = {}) => {
@@ -263,6 +256,7 @@ export const useTreeItem2 = parameters => {
     return _extends({}, externalProps, enhancedDragAndDropOverlayProps);
   };
   return {
+    getContextProviderProps,
     getRootProps,
     getContentProps,
     getGroupTransitionProps,

package/node/RichTreeView/RichTreeView.js

@@ -63,8 +63,7 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
   }
   const {
     getRootProps,
-    contextValue,
-    instance
+    contextValue
   } = (0, _useTreeView.useTreeView)({
     plugins: _RichTreeView.RICH_TREE_VIEW_PLUGINS,
     rootRef: ref,
@@ -88,8 +87,7 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RichTreeViewItems.RichTreeViewItems, {
         slots: slots,
-        slotProps: slotProps,
-        itemsToRender: instance.getItemsToRender()
+        slotProps: slotProps
       })
     }))
   });
@@ -162,7 +160,6 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: _propTypes.default.shape({
-    indentationAtItemLevel: _propTypes.default.bool,
     labelEditing: _propTypes.default.bool
   }),
   /**
@@ -267,6 +264,26 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * When `multiSelect` is true this takes an array of strings; when false (default) a string.
    */
   selectedItems: _propTypes.default.any,
+  /**
+   * When `selectionPropagation.descendants` is set to `true`.
+   *
+   * - Selecting a parent selects all its descendants automatically.
+   * - Deselecting a parent deselects all its descendants automatically.
+   *
+   * When `selectionPropagation.parents` is set to `true`.
+   *
+   * - Selecting all the descendants of a parent selects the parent automatically.
+   * - Deselecting a descendant of a selected parent deselects the parent automatically.
+   *
+   * Only works when `multiSelect` is `true`.
+   * On the <SimpleTreeView />, only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all)
+   *
+   * @default { parents: false, descendants: false }
+   */
+  selectionPropagation: _propTypes.default.shape({
+    descendants: _propTypes.default.bool,
+    parents: _propTypes.default.bool
+  }),
   /**
    * The props used for each component slot.
    * @default {}

package/node/SimpleTreeView/SimpleTreeView.js

@@ -161,9 +161,7 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`,
    * the feature will be fully disabled and any property / method call will not have any effect.
    */
-  experimentalFeatures: _propTypes.default.shape({
-    indentationAtItemLevel: _propTypes.default.bool
-  }),
+  experimentalFeatures: _propTypes.default.object,
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.
@@ -224,6 +222,26 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    * When `multiSelect` is true this takes an array of strings; when false (default) a string.
    */
   selectedItems: _propTypes.default.any,
+  /**
+   * When `selectionPropagation.descendants` is set to `true`.
+   *
+   * - Selecting a parent selects all its descendants automatically.
+   * - Deselecting a parent deselects all its descendants automatically.
+   *
+   * When `selectionPropagation.parents` is set to `true`.
+   *
+   * - Selecting all the descendants of a parent selects the parent automatically.
+   * - Deselecting a descendant of a selected parent deselects the parent automatically.
+   *
+   * Only works when `multiSelect` is `true`.
+   * On the <SimpleTreeView />, only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all)
+   *
+   * @default { parents: false, descendants: false }
+   */
+  selectionPropagation: _propTypes.default.shape({
+    descendants: _propTypes.default.bool,
+    parents: _propTypes.default.bool
+  }),
   /**
    * The props used for each component slot.
    */