@mui/x-tree-view 7.0.0-beta.6 → 7.0.0-beta.7

package/useTreeItem2/useTreeItem2.js

@@ -0,0 +1,138 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { extractEventHandlers } from '@mui/base/utils';
+import useForkRef from '@mui/utils/useForkRef';
+import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
+import { useTreeItem2Utils } from '../hooks/useTreeItem2Utils';
+export const useTreeItem2 = parameters => {
+  const {
+    runItemPlugins,
+    selection: {
+      multiSelect
+    },
+    disabledItemsFocusable,
+    instance,
+    publicAPI
+  } = useTreeViewContext();
+  const {
+    id,
+    nodeId,
+    label,
+    children,
+    rootRef
+  } = parameters;
+  const {
+    rootRef: pluginRootRef,
+    contentRef
+  } = runItemPlugins(parameters);
+  const {
+    interactions,
+    status
+  } = useTreeItem2Utils({
+    nodeId,
+    children
+  });
+  const idAttribute = instance.getTreeItemId(nodeId, id);
+  const handleRootRef = useForkRef(rootRef, pluginRootRef);
+  const createRootHandleFocus = otherHandlers => event => {
+    var _otherHandlers$onFocu;
+    (_otherHandlers$onFocu = otherHandlers.onFocus) == null || _otherHandlers$onFocu.call(otherHandlers, event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+
+    // DOM focus stays on the tree which manages focus with aria-activedescendant
+    if (event.target === event.currentTarget) {
+      instance.focusRoot();
+    }
+    const canBeFocused = !status.disabled || disabledItemsFocusable;
+    if (!status.focused && canBeFocused && event.currentTarget === event.target) {
+      instance.focusItem(event, nodeId);
+    }
+  };
+  const createContentHandleClick = otherHandlers => event => {
+    var _otherHandlers$onClic;
+    (_otherHandlers$onClic = otherHandlers.onClick) == null || _otherHandlers$onClic.call(otherHandlers, event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    interactions.handleExpansion(event);
+    interactions.handleSelection(event);
+  };
+  const createContentHandleMouseDown = otherHandlers => event => {
+    var _otherHandlers$onMous;
+    (_otherHandlers$onMous = otherHandlers.onMouseDown) == null || _otherHandlers$onMous.call(otherHandlers, event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+
+    // Prevent text selection
+    if (event.shiftKey || event.ctrlKey || event.metaKey || status.disabled) {
+      event.preventDefault();
+    }
+  };
+  const getRootProps = (externalProps = {}) => {
+    const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
+    let ariaSelected;
+    if (multiSelect) {
+      ariaSelected = status.selected;
+    } else if (status.selected) {
+      /* single-selection trees unset aria-selected on un-selected items.
+       *
+       * If the tree does not support multiple selection, aria-selected
+       * is set to true for the selected node and it is not present on any other node in the tree.
+       * Source: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
+       */
+      ariaSelected = true;
+    }
+    return _extends({}, externalEventHandlers, {
+      ref: handleRootRef,
+      role: 'treeitem',
+      tabIndex: -1,
+      id: idAttribute,
+      'aria-expanded': status.expandable ? status.expanded : undefined,
+      'aria-selected': ariaSelected,
+      'aria-disabled': status.disabled || undefined
+    }, externalProps, {
+      onFocus: createRootHandleFocus(externalEventHandlers)
+    });
+  };
+  const getContentProps = (externalProps = {}) => {
+    const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
+    return _extends({}, externalEventHandlers, externalProps, {
+      ref: contentRef,
+      onClick: createContentHandleClick(externalEventHandlers),
+      onMouseDown: createContentHandleMouseDown(externalEventHandlers),
+      status
+    });
+  };
+  const getLabelProps = (externalProps = {}) => {
+    const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
+    return _extends({}, externalEventHandlers, {
+      children: label
+    }, externalProps);
+  };
+  const getIconContainerProps = (externalProps = {}) => {
+    const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
+    return _extends({}, externalEventHandlers, externalProps);
+  };
+  const getGroupTransitionProps = (externalProps = {}) => {
+    const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
+    return _extends({}, externalEventHandlers, {
+      unmountOnExit: true,
+      component: 'ul',
+      role: 'group',
+      in: status.expanded,
+      children
+    }, externalProps);
+  };
+  return {
+    getRootProps,
+    getContentProps,
+    getGroupTransitionProps,
+    getIconContainerProps,
+    getLabelProps,
+    rootRef: handleRootRef,
+    status,
+    publicAPI
+  };
+};

package/useTreeItem2/useTreeItem2.types.d.ts

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { TreeViewItemId } from '../models';
+import { MuiCancellableEventHandler } from '../internals/models/MuiCancellableEvent';
+import { TreeViewAnyPluginSignature, TreeViewPublicAPI } from '../internals/models';
+export interface UseTreeItem2Parameters {
+    /**
+     * The id attribute of the node. If not provided, it will be generated.
+     */
+    id?: string;
+    /**
+     * If `true`, the node is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The id of the node.
+     * Must be unique.
+     */
+    nodeId: TreeViewItemId;
+    /**
+     * The label of the node.
+     */
+    label?: React.ReactNode;
+    rootRef?: React.Ref<HTMLLIElement>;
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+}
+export interface UseTreeItem2RootSlotOwnProps {
+    role: 'treeitem';
+    tabIndex: -1;
+    id: string;
+    'aria-expanded': React.AriaAttributes['aria-expanded'];
+    'aria-selected': React.AriaAttributes['aria-selected'];
+    'aria-disabled': React.AriaAttributes['aria-disabled'];
+    onFocus: MuiCancellableEventHandler<React.FocusEvent>;
+    ref: React.RefCallback<HTMLLIElement>;
+}
+export type UseTreeItem2RootSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2RootSlotOwnProps;
+export interface UseTreeItem2ContentSlotOwnProps {
+    onClick: MuiCancellableEventHandler<React.MouseEvent>;
+    onMouseDown: MuiCancellableEventHandler<React.MouseEvent>;
+    ref: React.RefCallback<HTMLDivElement> | null;
+    status: UseTreeItem2Status;
+}
+export type UseTreeItem2ContentSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2ContentSlotOwnProps;
+export interface UseTreeItem2IconContainerSlotOwnProps {
+}
+export type UseTreeItemIconContainerSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2IconContainerSlotOwnProps;
+export interface UseTreeItem2LabelSlotOwnProps {
+    children: React.ReactNode;
+}
+export type UseTreeItem2LabelSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2LabelSlotOwnProps;
+export interface UseTreeItem2GroupTransitionSlotOwnProps {
+    unmountOnExit: boolean;
+    in: boolean;
+    component: 'ul';
+    role: 'group';
+    children: React.ReactNode;
+}
+export type UseTreeItem2GroupTransitionSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2GroupTransitionSlotOwnProps;
+export interface UseTreeItem2Status {
+    expandable: boolean;
+    expanded: boolean;
+    focused: boolean;
+    selected: boolean;
+    disabled: boolean;
+}
+export interface UseTreeItem2ReturnValue<TPlugins extends readonly TreeViewAnyPluginSignature[]> {
+    /**
+     * Resolver for the root slot's props.
+     * @param {ExternalProps} externalProps Additional props for the root slot
+     * @returns {UseTreeItem2RootSlotProps<ExternalProps>} Props that should be spread on the root slot
+     */
+    getRootProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2RootSlotProps<ExternalProps>;
+    /**
+     * Resolver for the content slot's props.
+     * @param {ExternalProps} externalProps Additional props for the content slot
+     * @returns {UseTreeItem2ContentSlotProps<ExternalProps>} Props that should be spread on the content slot
+     */
+    getContentProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2ContentSlotProps<ExternalProps>;
+    /**
+     * Resolver for the label slot's props.
+     * @param {ExternalProps} externalProps Additional props for the label slot
+     * @returns {UseTreeItem2LabelSlotProps<ExternalProps>} Props that should be spread on the label slot
+     */
+    getLabelProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2LabelSlotProps<ExternalProps>;
+    /**
+     * Resolver for the iconContainer slot's props.
+     * @param {ExternalProps} externalProps Additional props for the iconContainer slot
+     * @returns {UseTreeItemIconContainerSlotProps<ExternalProps>} Props that should be spread on the iconContainer slot
+     */
+    getIconContainerProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItemIconContainerSlotProps<ExternalProps>;
+    /**
+     * Resolver for the GroupTransition slot's props.
+     * @param {ExternalProps} externalProps Additional props for the GroupTransition slot
+     * @returns {UseTreeItem2GroupTransitionSlotProps<ExternalProps>} Props that should be spread on the GroupTransition slot
+     */
+    getGroupTransitionProps: <ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseTreeItem2GroupTransitionSlotProps<ExternalProps>;
+    /**
+     * A ref to the component's root DOM element.
+     */
+    rootRef: React.RefCallback<HTMLLIElement> | null;
+    /**
+     * Current status of the item.
+     */
+    status: UseTreeItem2Status;
+    /**
+     * The object the allows Tree View manipulation.
+     */
+    publicAPI: TreeViewPublicAPI<TPlugins>;
+}

package/useTreeItem2/useTreeItem2.types.js

@@ -0,0 +1 @@
+export {};