@fluentui/react-tree 9.2.1 → 9.4.0

package/lib/components/TreeItem/useTreeItem.js

@@ -4,7 +4,7 @@ import { getNativeElementProps, useId, useMergedRefs, useEventCallback, slot } f
 import { elementContains } from '@fluentui/react-portal';
 import { Space } from '@fluentui/keyboard-keys';
 import { treeDataTypes } from '../../utils/tokens';
-import { useTreeContext_unstable } from '../../contexts/index';
+import { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';
 import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
 /**
  * Create the state required to render TreeItem.
@@ -21,7 +21,11 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
         warnIfNoProperPropsFlatTreeItem(props);
     }
     const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);
-    const contextLevel = useTreeContext_unstable((ctx)=>ctx.level);
+    const { level: contextLevel } = useSubtreeContext_unstable();
+    const parentValue = useTreeItemContext_unstable((ctx)=>{
+        var _props_parentValue;
+        return (_props_parentValue = props.parentValue) !== null && _props_parentValue !== void 0 ? _props_parentValue : ctx.value;
+    });
     // note, if the value is not externally provided,
     // then selection and expansion will not work properly
     const value = useId('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());
@@ -36,14 +40,17 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
     const layoutRef = React.useRef(null);
     const subtreeRef = React.useRef(null);
     const selectionRef = React.useRef(null);
-    var _props_open;
-    const open = useTreeContext_unstable((ctx)=>(_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value));
+    const open = useTreeContext_unstable((ctx)=>{
+        var _props_open;
+        return (_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value);
+    });
     const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);
-    var _ctx_checkedItems_get;
-    const checked = useTreeContext_unstable((ctx)=>(_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false);
+    const checked = useTreeContext_unstable((ctx)=>{
+        var _ctx_checkedItems_get;
+        return (_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false;
+    });
     const handleClick = useEventCallback((event)=>{
-        var _onClick;
-        (_onClick = onClick) === null || _onClick === void 0 ? void 0 : _onClick(event);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
         if (event.isDefaultPrevented()) {
             return;
         }
@@ -61,7 +68,7 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
         }
         const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);
         ReactDOM.unstable_batchedUpdates(()=>{
-            var _props_onOpenChange, _props;
+            var _props_onOpenChange;
             const data = {
                 event,
                 value,
@@ -69,16 +76,23 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
                 target: event.currentTarget,
                 type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click
             };
-            (_props_onOpenChange = (_props = props).onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(_props, event, data);
+            (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
             requestTreeResponse({
                 ...data,
-                itemType
+                itemType,
+                requestType: 'open'
+            });
+            requestTreeResponse({
+                ...data,
+                itemType,
+                parentValue,
+                requestType: 'navigate',
+                type: treeDataTypes.Click
             });
         });
     });
     const handleKeyDown = useEventCallback((event)=>{
-        var _onKeyDown;
-        (_onKeyDown = onKeyDown) === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(event);
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
         // Ignore keyboard events that do not originate from the current tree item.
         if (event.isDefaultPrevented() || event.currentTarget !== event.target) {
             return;
@@ -93,7 +107,7 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
                 return;
             case treeDataTypes.Enter:
                 {
-                    var _props_onOpenChange, _props;
+                    var _props_onOpenChange;
                     const data = {
                         value,
                         event,
@@ -101,10 +115,11 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
                         type: event.key,
                         target: event.currentTarget
                     };
-                    (_props_onOpenChange = (_props = props).onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(_props, event, data);
+                    (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
                     return requestTreeResponse({
                         ...data,
-                        itemType
+                        itemType,
+                        requestType: 'open'
                     });
                 }
             case treeDataTypes.End:
@@ -112,9 +127,11 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
             case treeDataTypes.ArrowUp:
             case treeDataTypes.ArrowDown:
                 return requestTreeResponse({
+                    requestType: 'navigate',
                     event,
                     value,
                     itemType,
+                    parentValue,
                     type: event.key,
                     target: event.currentTarget
                 });
@@ -132,12 +149,14 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
                         target: event.currentTarget
                     };
                     if (open) {
-                        var _props_onOpenChange1, _props1;
-                        (_props_onOpenChange1 = (_props1 = props).onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(_props1, event, data);
+                        var _props_onOpenChange1;
+                        (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);
                     }
                     return requestTreeResponse({
                         ...data,
-                        itemType
+                        itemType,
+                        parentValue,
+                        requestType: open ? 'open' : 'navigate'
                     });
                 }
             case treeDataTypes.ArrowRight:
@@ -153,22 +172,26 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
                     target: event.currentTarget
                 };
                 if (!open) {
-                    var _props_onOpenChange2, _props2;
-                    (_props_onOpenChange2 = (_props2 = props).onOpenChange) === null || _props_onOpenChange2 === void 0 ? void 0 : _props_onOpenChange2.call(_props2, event, data);
+                    var _props_onOpenChange2;
+                    (_props_onOpenChange2 = props.onOpenChange) === null || _props_onOpenChange2 === void 0 ? void 0 : _props_onOpenChange2.call(props, event, data);
                 }
                 return requestTreeResponse({
                     ...data,
-                    itemType
+                    itemType,
+                    parentValue,
+                    requestType: open ? 'navigate' : 'open'
                 });
         }
         const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;
         if (isTypeAheadCharacter) {
             requestTreeResponse({
+                requestType: 'navigate',
                 event,
                 target: event.currentTarget,
                 value,
                 itemType,
-                type: treeDataTypes.TypeAhead
+                type: treeDataTypes.TypeAhead,
+                parentValue
             });
         }
     });
@@ -197,6 +220,7 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
             return;
         }
         requestTreeResponse({
+            requestType: 'selection',
             event,
             value,
             itemType,
@@ -248,14 +272,16 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
 }
 function warnIfNoProperPropsFlatTreeItem(props) {
     if (process.env.NODE_ENV !== 'production') {
-        if (props['aria-posinset'] === undefined || props['aria-setsize'] === undefined || props['aria-level'] === undefined) {
+        if (props['aria-posinset'] === undefined || props['aria-setsize'] === undefined || props['aria-level'] === undefined || props.parentValue === undefined && props['aria-level'] !== 1) {
             // eslint-disable-next-line no-console
             console.error(`@fluentui/react-tree [${useTreeItem_unstable.name}]:
-A flat treeitem must have "aria-posinset", "aria-setsize", "aria-level" to ensure a11y and navigation.
+A flat treeitem must have "aria-posinset", "aria-setsize", "aria-level"
+and "parentValue" (if "aria-level" > 1) to ensure a11y and navigation.
 
 - "aria-posinset": the position of this treeitem in the current level of the tree.
 - "aria-setsize": the number of siblings in this level of the tree.
-- "aria-level": the current level of the treeitem.`);
+- "aria-level": the current level of the treeitem.
+- "parentValue": the "value" property of the parent item of this item.`);
         }
     }
 }

package/lib/components/TreeItem/useTreeItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getNativeElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n  const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n  if (treeType === 'flat') {\n    warnIfNoProperPropsFlatTreeItem(props);\n  }\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n  const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n\n  // note, if the value is not externally provided,\n  // then selection and expansion will not work properly\n  const value = useId('fuiTreeItemValue-', props.value?.toString());\n\n  const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n\n  const [isActionsVisible, setActionsVisible] = React.useState(false);\n  const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n  const handleActionsRef = React.useCallback((actionsElement: HTMLDivElement | null) => {\n    setAsideVisible(actionsElement === null);\n  }, []);\n\n  const actionsRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLDivElement>(null);\n  const layoutRef = React.useRef<HTMLDivElement>(null);\n  const subtreeRef = React.useRef<HTMLDivElement>(null);\n  const selectionRef = React.useRef<HTMLInputElement>(null);\n\n  const open = useTreeContext_unstable(ctx => props.open ?? ctx.openItems.has(value));\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n  const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n\n  const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n    if (isEventFromActions) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target as Node);\n    if (isEventFromSelection) {\n      return;\n    }\n    const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n\n    ReactDOM.unstable_batchedUpdates(() => {\n      const data = {\n        event,\n        value,\n        open: !open,\n        target: event.currentTarget,\n        type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n      } as const;\n      props.onOpenChange?.(event, data);\n      requestTreeResponse({\n        ...data,\n        itemType,\n      });\n    });\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    // Ignore keyboard events that do not originate from the current tree item.\n    if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n      return;\n    }\n    switch (event.key) {\n      case Space:\n        if (selectionMode !== 'none') {\n          selectionRef.current?.click();\n          event.preventDefault();\n        }\n        return;\n      case treeDataTypes.Enter: {\n        const data = {\n          value,\n          event,\n          open: !open,\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        props.onOpenChange?.(event, data);\n        return requestTreeResponse({\n          ...data,\n          itemType,\n        });\n      }\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n        return requestTreeResponse({\n          event,\n          value,\n          itemType,\n          type: event.key,\n          target: event.currentTarget,\n        });\n      case treeDataTypes.ArrowLeft: {\n        // do not navigate to parent if the item is on the top level\n        if (level === 1 && !open) {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: !open,\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        if (open) {\n          props.onOpenChange?.(event, data);\n        }\n        return requestTreeResponse({\n          ...data,\n          itemType,\n        });\n      }\n      case treeDataTypes.ArrowRight:\n        // do not navigate or open if the item is a leaf\n        if (itemType === 'leaf') {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: !open,\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        if (!open) {\n          props.onOpenChange?.(event, data);\n        }\n        return requestTreeResponse({\n          ...data,\n          itemType,\n        });\n    }\n    const isTypeAheadCharacter =\n      event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      requestTreeResponse({\n        event,\n        target: event.currentTarget,\n        value,\n        itemType,\n        type: treeDataTypes.TypeAhead,\n      });\n    }\n  });\n\n  const handleActionsVisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    if (!isTargetFromSubtree) {\n      setActionsVisible(true);\n    }\n  });\n\n  const handleActionsInvisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    const isRelatedTargetFromActions = Boolean(\n      actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n    );\n    if (isRelatedTargetFromActions) {\n      return setActionsVisible(true);\n    }\n    if (!isTargetFromSubtree) {\n      return setActionsVisible(false);\n    }\n  });\n\n  const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    requestTreeResponse({\n      event,\n      value,\n      itemType,\n      type: 'Change',\n      target: event.currentTarget,\n      checked: checked === 'mixed' ? true : !checked,\n    });\n  });\n\n  return {\n    value,\n    open,\n    checked,\n    subtreeRef,\n    layoutRef,\n    selectionRef,\n    expandIconRef,\n    actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n    itemType,\n    level,\n    components: {\n      root: 'div',\n    },\n    isAsideVisible,\n    isActionsVisible,\n    root: slot.always(\n      getNativeElementProps(as, {\n        tabIndex: -1,\n        [dataTreeItemValueAttrName]: value,\n        ...rest,\n        ref,\n        role: 'treeitem',\n        'aria-level': level,\n        'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n        // aria-selected is required according to WAI-ARIA spec\n        // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n        // Casting: when selectionMode is 'single', checked is a boolean\n        'aria-selected': selectionMode === 'single' ? (checked as boolean) : 'false',\n        'aria-expanded': itemType === 'branch' ? open : undefined,\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n        onMouseOver: handleActionsVisible,\n        onFocus: handleActionsVisible,\n        onMouseOut: handleActionsInvisible,\n        onBlur: handleActionsInvisible,\n        onChange: handleChange,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n\nfunction warnIfNoProperPropsFlatTreeItem(props: Pick<TreeItemProps, 'aria-setsize' | 'aria-posinset' | 'aria-level'>) {\n  if (process.env.NODE_ENV !== 'production') {\n    if (\n      props['aria-posinset'] === undefined ||\n      props['aria-setsize'] === undefined ||\n      props['aria-level'] === undefined\n    ) {\n      // eslint-disable-next-line no-console\n      console.error(/** #__DE-INDENT__ */ `\n        @fluentui/react-tree [${useTreeItem_unstable.name}]:\n        A flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\" to ensure a11y and navigation.\n\n        - \"aria-posinset\": the position of this treeitem in the current level of the tree.\n        - \"aria-setsize\": the number of siblings in this level of the tree.\n        - \"aria-level\": the current level of the treeitem.\n      `);\n    }\n  }\n}\n"],"names":["React","ReactDOM","getNativeElementProps","useId","useMergedRefs","useEventCallback","slot","elementContains","Space","treeDataTypes","useTreeContext_unstable","dataTreeItemValueAttrName","useTreeItem_unstable","props","ref","treeType","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","contextLevel","level","value","toString","onClick","onKeyDown","as","itemType","rest","isActionsVisible","setActionsVisible","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","selectionMode","checked","checkedItems","get","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","unstable_batchedUpdates","data","currentTarget","type","ExpandIconClick","Click","onOpenChange","handleKeyDown","key","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","handleChange","components","root","always","tabIndex","role","undefined","onMouseOver","onFocus","onMouseOut","onBlur","onChange","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"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"}
+{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getNativeElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n  const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n  if (treeType === 'flat') {\n    warnIfNoProperPropsFlatTreeItem(props);\n  }\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n  const { level: contextLevel } = useSubtreeContext_unstable();\n  const parentValue = useTreeItemContext_unstable(ctx => props.parentValue ?? ctx.value);\n\n  // note, if the value is not externally provided,\n  // then selection and expansion will not work properly\n  const value = useId('fuiTreeItemValue-', props.value?.toString());\n\n  const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n\n  const [isActionsVisible, setActionsVisible] = React.useState(false);\n  const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n  const handleActionsRef = React.useCallback((actionsElement: HTMLDivElement | null) => {\n    setAsideVisible(actionsElement === null);\n  }, []);\n\n  const actionsRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLDivElement>(null);\n  const layoutRef = React.useRef<HTMLDivElement>(null);\n  const subtreeRef = React.useRef<HTMLDivElement>(null);\n  const selectionRef = React.useRef<HTMLInputElement>(null);\n\n  const open = useTreeContext_unstable(ctx => props.open ?? ctx.openItems.has(value));\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n  const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n\n  const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n    if (isEventFromActions) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target as Node);\n    if (isEventFromSelection) {\n      return;\n    }\n    const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n\n    ReactDOM.unstable_batchedUpdates(() => {\n      const data = {\n        event,\n        value,\n        open: !open,\n        target: event.currentTarget,\n        type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n      } as const;\n      props.onOpenChange?.(event, data);\n      requestTreeResponse({\n        ...data,\n        itemType,\n        requestType: 'open',\n      });\n      requestTreeResponse({\n        ...data,\n        itemType,\n        parentValue,\n        requestType: 'navigate',\n        type: treeDataTypes.Click,\n      });\n    });\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    // Ignore keyboard events that do not originate from the current tree item.\n    if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n      return;\n    }\n    switch (event.key) {\n      case Space:\n        if (selectionMode !== 'none') {\n          selectionRef.current?.click();\n          event.preventDefault();\n        }\n        return;\n      case treeDataTypes.Enter: {\n        const data = {\n          value,\n          event,\n          open: !open,\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        props.onOpenChange?.(event, data);\n        return requestTreeResponse({\n          ...data,\n          itemType,\n          requestType: 'open',\n        });\n      }\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n        return requestTreeResponse({\n          requestType: 'navigate',\n          event,\n          value,\n          itemType,\n          parentValue,\n          type: event.key,\n          target: event.currentTarget,\n        });\n      case treeDataTypes.ArrowLeft: {\n        // do not navigate to parent if the item is on the top level\n        if (level === 1 && !open) {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: !open,\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        if (open) {\n          props.onOpenChange?.(event, data);\n        }\n        return requestTreeResponse({\n          ...data,\n          itemType,\n          parentValue,\n          requestType: open ? 'open' : 'navigate',\n        });\n      }\n      case treeDataTypes.ArrowRight:\n        // do not navigate or open if the item is a leaf\n        if (itemType === 'leaf') {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: !open,\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        if (!open) {\n          props.onOpenChange?.(event, data);\n        }\n        return requestTreeResponse({\n          ...data,\n          itemType,\n          parentValue,\n          requestType: open ? 'navigate' : 'open',\n        });\n    }\n    const isTypeAheadCharacter =\n      event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      requestTreeResponse({\n        requestType: 'navigate',\n        event,\n        target: event.currentTarget,\n        value,\n        itemType,\n        type: treeDataTypes.TypeAhead,\n        parentValue,\n      });\n    }\n  });\n\n  const handleActionsVisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    if (!isTargetFromSubtree) {\n      setActionsVisible(true);\n    }\n  });\n\n  const handleActionsInvisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    const isRelatedTargetFromActions = Boolean(\n      actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n    );\n    if (isRelatedTargetFromActions) {\n      return setActionsVisible(true);\n    }\n    if (!isTargetFromSubtree) {\n      return setActionsVisible(false);\n    }\n  });\n\n  const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    requestTreeResponse({\n      requestType: 'selection',\n      event,\n      value,\n      itemType,\n      type: 'Change',\n      target: event.currentTarget,\n      checked: checked === 'mixed' ? true : !checked,\n    });\n  });\n\n  return {\n    value,\n    open,\n    checked,\n    subtreeRef,\n    layoutRef,\n    selectionRef,\n    expandIconRef,\n    actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n    itemType,\n    level,\n    components: {\n      root: 'div',\n    },\n    isAsideVisible,\n    isActionsVisible,\n    root: slot.always(\n      getNativeElementProps(as, {\n        tabIndex: -1,\n        [dataTreeItemValueAttrName]: value,\n        ...rest,\n        ref,\n        role: 'treeitem',\n        'aria-level': level,\n        'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n        // aria-selected is required according to WAI-ARIA spec\n        // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n        // Casting: when selectionMode is 'single', checked is a boolean\n        'aria-selected': selectionMode === 'single' ? (checked as boolean) : 'false',\n        'aria-expanded': itemType === 'branch' ? open : undefined,\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n        onMouseOver: handleActionsVisible,\n        onFocus: handleActionsVisible,\n        onMouseOut: handleActionsInvisible,\n        onBlur: handleActionsInvisible,\n        onChange: handleChange,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n\nfunction warnIfNoProperPropsFlatTreeItem(\n  props: Pick<TreeItemProps, 'aria-setsize' | 'aria-posinset' | 'aria-level' | 'parentValue'>,\n) {\n  if (process.env.NODE_ENV !== 'production') {\n    if (\n      props['aria-posinset'] === undefined ||\n      props['aria-setsize'] === undefined ||\n      props['aria-level'] === undefined ||\n      (props.parentValue === undefined && props['aria-level'] !== 1)\n    ) {\n      // eslint-disable-next-line no-console\n      console.error(/** #__DE-INDENT__ */ `\n        @fluentui/react-tree [${useTreeItem_unstable.name}]:\n        A flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\n        and \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n        - \"aria-posinset\": the position of this treeitem in the current level of the tree.\n        - \"aria-setsize\": the number of siblings in this level of the tree.\n        - \"aria-level\": the current level of the treeitem.\n        - \"parentValue\": the \"value\" property of the parent item of this item.\n      `);\n    }\n  }\n}\n"],"names":["React","ReactDOM","getNativeElementProps","useId","useMergedRefs","useEventCallback","slot","elementContains","Space","treeDataTypes","useTreeContext_unstable","useSubtreeContext_unstable","useTreeItemContext_unstable","dataTreeItemValueAttrName","useTreeItem_unstable","props","ref","treeType","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","parentValue","value","toString","onClick","onKeyDown","as","itemType","rest","isActionsVisible","setActionsVisible","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","selectionMode","checked","checkedItems","get","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","unstable_batchedUpdates","data","currentTarget","type","ExpandIconClick","Click","onOpenChange","requestType","handleKeyDown","key","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","handleChange","components","root","always","tabIndex","role","undefined","onMouseOver","onFocus","onMouseOut","onBlur","onChange","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"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"}

package/lib/components/TreeItemLayout/useTreeItemLayout.js

@@ -14,7 +14,6 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
  * @param props - props from this instance of TreeItemLayout
  * @param ref - reference to root HTMLElement of TreeItemLayout
  */ export const useTreeItemLayout_unstable = (props, ref)=>{
-    var _expandIcon, _actions;
     const { main, iconAfter, iconBefore, as = 'span' } = props;
     const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);
     const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);
@@ -43,7 +42,7 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
         },
         elementType: 'div'
     });
-    const expandIconRefs = useMergedRefs((_expandIcon = expandIcon) === null || _expandIcon === void 0 ? void 0 : _expandIcon.ref, expandIconRef);
+    const expandIconRefs = useMergedRefs(expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.ref, expandIconRef);
     if (expandIcon) {
         expandIcon.ref = expandIconRefs;
     }
@@ -58,7 +57,7 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
         },
         elementType: 'div'
     }) : undefined;
-    const actionsRefs = useMergedRefs((_actions = actions) === null || _actions === void 0 ? void 0 : _actions.ref, actionsRef);
+    const actionsRefs = useMergedRefs(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef);
     if (actions) {
         actions.ref = actionsRefs;
     }

package/lib/components/TreeItemLayout/useTreeItemLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ExtractSlotProps,\n  getNativeElementProps,\n  isResolvedShorthand,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n  props: TreeItemLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n  const { main, iconAfter, iconBefore, as = 'span' } = props;\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n  const [isActionsVisibleExternal, actionsShorthand]: [boolean | undefined, TreeItemLayoutSlots['actions']] =\n    isResolvedShorthand(props.actions)\n      ? // .visible prop should not be propagated to the DOM\n        [props.actions.visible, { ...props.actions, visible: undefined }]\n      : [undefined, props.actions];\n\n  const isActionsVisible = useTreeItemContext_unstable(ctx => ctx.isActionsVisible) || isActionsVisibleExternal;\n  const isAsideVisible = useTreeItemContext_unstable(ctx => ctx.isAsideVisible);\n  const selectionRef = useTreeItemContext_unstable(ctx => ctx.selectionRef);\n  const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n  const actionsRef = useTreeItemContext_unstable(ctx => ctx.actionsRef);\n  const checked = useTreeItemContext_unstable(ctx => ctx.checked);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n  const expandIcon = slot.optional(props.expandIcon, {\n    renderByDefault: isBranch,\n    defaultProps: {\n      children: <TreeItemChevron />,\n      'aria-hidden': true,\n    },\n    elementType: 'div',\n  });\n  const expandIconRefs = useMergedRefs(expandIcon?.ref, expandIconRef);\n  if (expandIcon) {\n    expandIcon.ref = expandIconRefs;\n  }\n  const arrowNavigationProps = useArrowNavigationGroup({ circular: true, axis: 'horizontal' });\n  const actions = isActionsVisible\n    ? slot.optional(actionsShorthand, {\n        defaultProps: { ...arrowNavigationProps, role: 'toolbar' } as ExtractSlotProps<TreeItemLayoutSlots['actions']>,\n        elementType: 'div',\n      })\n    : undefined;\n  const actionsRefs = useMergedRefs(actions?.ref, actionsRef);\n  if (actions) {\n    actions.ref = actionsRefs;\n  }\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      main: 'div',\n      iconAfter: 'div',\n      actions: 'div',\n      aside: 'div',\n      // Casting here to a union between checkbox and radio\n      selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\n    },\n    buttonContextValue: { size: 'small' },\n    root: slot.always(getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }), {\n      elementType: 'div',\n    }),\n    iconBefore: slot.optional(iconBefore, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),\n    main: slot.always(main, { elementType: 'div' }),\n    iconAfter: slot.optional(iconAfter, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),\n    aside: isAsideVisible\n      ? slot.optional(props.aside, { defaultProps: { 'aria-hidden': true }, elementType: 'div' })\n      : undefined,\n    actions,\n    expandIcon,\n    selector: slot.optional(props.selector, {\n      renderByDefault: selectionMode !== 'none',\n      defaultProps: {\n        checked,\n        tabIndex: -1,\n        'aria-hidden': true,\n        ref: selectionRef,\n        // casting here to a union between checkbox and radio\n        // since ref is not present on the selector signature\n        // FIXME: look into Slot type to see if we can make this work\n      } as CheckboxProps | RadioProps,\n      elementType: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<\n        CheckboxProps | RadioProps\n      >,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","isResolvedShorthand","useMergedRefs","slot","useTreeItemContext_unstable","useTreeContext_unstable","Checkbox","Radio","TreeItemChevron","useArrowNavigationGroup","useTreeItemLayout_unstable","props","ref","expandIcon","actions","main","iconAfter","iconBefore","as","layoutRef","ctx","selectionMode","isActionsVisibleExternal","actionsShorthand","visible","undefined","isActionsVisible","isAsideVisible","selectionRef","expandIconRef","actionsRef","checked","isBranch","itemType","optional","renderByDefault","defaultProps","children","elementType","expandIconRefs","arrowNavigationProps","circular","axis","role","actionsRefs","components","root","aside","selector","buttonContextValue","size","always","tabIndex"],"mappings":"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"}
+{"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ExtractSlotProps,\n  getNativeElementProps,\n  isResolvedShorthand,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n  props: TreeItemLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n  const { main, iconAfter, iconBefore, as = 'span' } = props;\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n  const [isActionsVisibleExternal, actionsShorthand]: [boolean | undefined, TreeItemLayoutSlots['actions']] =\n    isResolvedShorthand(props.actions)\n      ? // .visible prop should not be propagated to the DOM\n        [props.actions.visible, { ...props.actions, visible: undefined }]\n      : [undefined, props.actions];\n\n  const isActionsVisible = useTreeItemContext_unstable(ctx => ctx.isActionsVisible) || isActionsVisibleExternal;\n  const isAsideVisible = useTreeItemContext_unstable(ctx => ctx.isAsideVisible);\n  const selectionRef = useTreeItemContext_unstable(ctx => ctx.selectionRef);\n  const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n  const actionsRef = useTreeItemContext_unstable(ctx => ctx.actionsRef);\n  const checked = useTreeItemContext_unstable(ctx => ctx.checked);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n  const expandIcon = slot.optional(props.expandIcon, {\n    renderByDefault: isBranch,\n    defaultProps: {\n      children: <TreeItemChevron />,\n      'aria-hidden': true,\n    },\n    elementType: 'div',\n  });\n  const expandIconRefs = useMergedRefs(expandIcon?.ref, expandIconRef);\n  if (expandIcon) {\n    expandIcon.ref = expandIconRefs;\n  }\n  const arrowNavigationProps = useArrowNavigationGroup({ circular: true, axis: 'horizontal' });\n  const actions = isActionsVisible\n    ? slot.optional(actionsShorthand, {\n        defaultProps: { ...arrowNavigationProps, role: 'toolbar' } as ExtractSlotProps<TreeItemLayoutSlots['actions']>,\n        elementType: 'div',\n      })\n    : undefined;\n  const actionsRefs = useMergedRefs(actions?.ref, actionsRef);\n  if (actions) {\n    actions.ref = actionsRefs;\n  }\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      main: 'div',\n      iconAfter: 'div',\n      actions: 'div',\n      aside: 'div',\n      // Casting here to a union between checkbox and radio\n      selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\n    },\n    buttonContextValue: { size: 'small' },\n    root: slot.always(getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }), {\n      elementType: 'div',\n    }),\n    iconBefore: slot.optional(iconBefore, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),\n    main: slot.always(main, { elementType: 'div' }),\n    iconAfter: slot.optional(iconAfter, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),\n    aside: isAsideVisible\n      ? slot.optional(props.aside, { defaultProps: { 'aria-hidden': true }, elementType: 'div' })\n      : undefined,\n    actions,\n    expandIcon,\n    selector: slot.optional(props.selector, {\n      renderByDefault: selectionMode !== 'none',\n      defaultProps: {\n        checked,\n        tabIndex: -1,\n        'aria-hidden': true,\n        ref: selectionRef,\n        // casting here to a union between checkbox and radio\n        // since ref is not present on the selector signature\n        // FIXME: look into Slot type to see if we can make this work\n      } as CheckboxProps | RadioProps,\n      elementType: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<\n        CheckboxProps | RadioProps\n      >,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","isResolvedShorthand","useMergedRefs","slot","useTreeItemContext_unstable","useTreeContext_unstable","Checkbox","Radio","TreeItemChevron","useArrowNavigationGroup","useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","as","layoutRef","ctx","selectionMode","isActionsVisibleExternal","actionsShorthand","actions","visible","undefined","isActionsVisible","isAsideVisible","selectionRef","expandIconRef","actionsRef","checked","isBranch","itemType","expandIcon","optional","renderByDefault","defaultProps","children","elementType","expandIconRefs","arrowNavigationProps","circular","axis","role","actionsRefs","components","root","aside","selector","buttonContextValue","size","always","tabIndex"],"mappings":"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"}

package/lib/components/TreeProvider.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { SubtreeContext, TreeContext } from '../contexts';
+/**
+ * @internal
+ */ const rootSubtreeContextValue = {
+    level: 1,
+    contextType: 'subtree'
+};
+export const TreeProvider = (props)=>{
+    if (props.value.contextType === 'subtree') {
+        return /*#__PURE__*/ React.createElement(SubtreeContext.Provider, {
+            value: props.value
+        }, props.children);
+    }
+    return /*#__PURE__*/ React.createElement(TreeContext.Provider, {
+        value: props.value
+    }, /*#__PURE__*/ React.createElement(SubtreeContext.Provider, {
+        value: rootSubtreeContextValue
+    }, props.children));
+};
+TreeProvider.displayName = 'TreeProvider';

package/lib/components/TreeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TreeProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SubtreeContext, SubtreeContextValue, TreeContextValue, TreeContext } from '../contexts';\n\n/**\n * @internal\n */\nconst rootSubtreeContextValue: SubtreeContextValue = {\n  level: 1,\n  contextType: 'subtree',\n};\n\nexport const TreeProvider = (props: React.ProviderProps<TreeContextValue | SubtreeContextValue>) => {\n  if (props.value.contextType === 'subtree') {\n    return <SubtreeContext.Provider value={props.value}>{props.children}</SubtreeContext.Provider>;\n  }\n  return (\n    <TreeContext.Provider value={props.value}>\n      <SubtreeContext.Provider value={rootSubtreeContextValue}>{props.children}</SubtreeContext.Provider>\n    </TreeContext.Provider>\n  );\n};\n\nTreeProvider.displayName = 'TreeProvider';\n"],"names":["React","SubtreeContext","TreeContext","rootSubtreeContextValue","level","contextType","TreeProvider","props","value","Provider","children","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,EAAyCC,WAAW,QAAQ,cAAc;AAEjG;;CAEC,GACD,MAAMC,0BAA+C;IACnDC,OAAO;IACPC,aAAa;AACf;AAEA,OAAO,MAAMC,eAAe,CAACC;IAC3B,IAAIA,MAAMC,KAAK,CAACH,WAAW,KAAK,WAAW;QACzC,qBAAO,oBAACJ,eAAeQ,QAAQ;YAACD,OAAOD,MAAMC,KAAK;WAAGD,MAAMG,QAAQ;IACrE;IACA,qBACE,oBAACR,YAAYO,QAAQ;QAACD,OAAOD,MAAMC,KAAK;qBACtC,oBAACP,eAAeQ,QAAQ;QAACD,OAAOL;OAA0BI,MAAMG,QAAQ;AAG9E,EAAE;AAEFJ,aAAaK,WAAW,GAAG"}

package/lib/contexts/index.js

@@ -1,2 +1,3 @@
 export * from './treeContext';
+export * from './subtreeContext';
 export * from './treeItemContext';

package/lib/contexts/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './treeContext';\nexport * from './treeItemContext';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,oBAAoB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './treeContext';\nexport * from './subtreeContext';\nexport * from './treeItemContext';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,mBAAmB;AACjC,cAAc,oBAAoB"}

package/lib/contexts/subtreeContext.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+/**
+ * @internal
+ */ const defaultSubTreeContextValue = {
+    level: 0,
+    contextType: 'subtree'
+};
+/**
+ * @internal
+ */ export const SubtreeContext = React.createContext(undefined);
+export const useSubtreeContext_unstable = ()=>{
+    var _React_useContext;
+    return (_React_useContext = React.useContext(SubtreeContext)) !== null && _React_useContext !== void 0 ? _React_useContext : defaultSubTreeContextValue;
+};

package/lib/contexts/subtreeContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["subtreeContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type SubtreeContextValue = {\n  contextType: 'subtree';\n  level: number;\n};\n\n/**\n * @internal\n */\nconst defaultSubTreeContextValue: SubtreeContextValue = {\n  level: 0,\n  contextType: 'subtree',\n};\n\n/**\n * @internal\n */\nexport const SubtreeContext: React.Context<SubtreeContextValue> = React.createContext<SubtreeContextValue | undefined>(\n  undefined,\n) as React.Context<SubtreeContextValue>;\n\nexport const useSubtreeContext_unstable = () => {\n  return React.useContext(SubtreeContext) ?? defaultSubTreeContextValue;\n};\n"],"names":["React","defaultSubTreeContextValue","level","contextType","SubtreeContext","createContext","undefined","useSubtreeContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B;;CAEC,GACD,MAAMC,6BAAkD;IACtDC,OAAO;IACPC,aAAa;AACf;AAEA;;CAEC,GACD,OAAO,MAAMC,iBAAqDJ,MAAMK,aAAa,CACnFC,WACsC;AAExC,OAAO,MAAMC,6BAA6B;QACjCP;IAAP,OAAOA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACJ,6BAAjBJ,+BAAAA,oBAAoCC;AAC7C,EAAE"}

package/lib/contexts/treeContext.js

@@ -1,9 +1,12 @@
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 import { ImmutableSet } from '../utils/ImmutableSet';
 import { ImmutableMap } from '../utils/ImmutableMap';
-const defaultContextValue = {
-    treeType: 'nested',
+/**
+ * @internal
+ */ const defaultTreeContextValue = {
     level: 0,
+    contextType: 'root',
+    treeType: 'nested',
     selectionMode: 'none',
     openItems: ImmutableSet.empty,
     checkedItems: ImmutableMap.empty,
@@ -13,6 +16,7 @@ const defaultContextValue = {
 };
 function noop() {
 /* noop */ }
-export const TreeContext = createContext(undefined);
-export const { Provider: TreeProvider } = TreeContext;
-export const useTreeContext_unstable = (selector)=>useContextSelector(TreeContext, (ctx = defaultContextValue)=>selector(ctx));
+/**
+ * @internal
+ */ export const TreeContext = createContext(undefined);
+export const useTreeContext_unstable = (selector)=>useContextSelector(TreeContext, (ctx = defaultTreeContextValue)=>selector(ctx));

package/lib/contexts/treeContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType, TreeItemValue } from '../TreeItem';\nimport { SelectionMode } from '@fluentui/react-utilities';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\nimport { TreeCheckedChangeData, TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\n\nexport type TreeContextValue = {\n  treeType: 'nested' | 'flat';\n  level: number;\n  selectionMode: 'none' | SelectionMode;\n  appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n  size: 'small' | 'medium';\n  openItems: ImmutableSet<TreeItemValue>;\n  checkedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>;\n  /**\n   * requests root Tree component to respond to some tree item event,\n   */\n  requestTreeResponse(request: TreeItemRequest): void;\n};\n\nexport type TreeItemRequest = { itemType: TreeItemType } & (\n  | OmitWithoutExpanding<TreeOpenChangeData, 'open' | 'openItems'>\n  | OmitWithoutExpanding<TreeNavigationData_unstable, 'preventInternals'>\n  | OmitWithoutExpanding<TreeCheckedChangeData, 'selectionMode' | 'checkedItems'>\n);\n\n// helper type that avoids the expansion of unions while inferring it, should work exactly the same as Omit\ntype OmitWithoutExpanding<P, K extends string | number | symbol> = P extends unknown ? Omit<P, K> : P;\n\nconst defaultContextValue: TreeContextValue = {\n  treeType: 'nested',\n  level: 0,\n  selectionMode: 'none',\n  openItems: ImmutableSet.empty,\n  checkedItems: ImmutableMap.empty,\n  requestTreeResponse: noop,\n  appearance: 'subtle',\n  size: 'medium',\n};\n\nfunction noop() {\n  /* noop */\n}\n\nexport const TreeContext: Context<TreeContextValue | undefined> = createContext<TreeContextValue | undefined>(\n  undefined,\n);\n\nexport const { Provider: TreeProvider } = TreeContext;\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n  useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","ImmutableSet","ImmutableMap","defaultContextValue","treeType","level","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAG/G,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,YAAY,QAAQ,wBAAwB;AA0BrD,MAAMC,sBAAwC;IAC5CC,UAAU;IACVC,OAAO;IACPC,eAAe;IACfC,WAAWN,aAAaO,KAAK;IAC7BC,cAAcP,aAAaM,KAAK;IAChCE,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACR;AAEA,SAASF;AACP,QAAQ,GACV;AAEA,OAAO,MAAMG,cAAqDf,cAChEgB,WACA;AAEF,OAAO,MAAM,EAAEC,UAAUC,YAAY,EAAE,GAAGH,YAAY;AACtD,OAAO,MAAMI,0BAA0B,CAAIC,WACzCnB,mBAAmBc,aAAa,CAACM,MAAMjB,mBAAmB,GAAKgB,SAASC,MAAM"}
+{"version":3,"sources":["treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType, TreeItemValue } from '../TreeItem';\nimport { SelectionMode } from '@fluentui/react-utilities';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\nimport { TreeCheckedChangeData, TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\n\nexport type TreeContextValue = {\n  contextType?: 'root';\n  level: number;\n  treeType: 'nested' | 'flat';\n  selectionMode: 'none' | SelectionMode;\n  appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n  size: 'small' | 'medium';\n  openItems: ImmutableSet<TreeItemValue>;\n  checkedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>;\n  /**\n   * requests root Tree component to respond to some tree item event,\n   */\n  requestTreeResponse(request: TreeItemRequest): void;\n};\n\nexport type TreeItemRequest = { itemType: TreeItemType } & (\n  | (OmitWithoutExpanding<TreeOpenChangeData, 'open' | 'openItems'> & { requestType: 'open' })\n  | (TreeNavigationData_unstable & { requestType: 'navigate' })\n  | (OmitWithoutExpanding<TreeCheckedChangeData, 'selectionMode' | 'checkedItems'> & { requestType: 'selection' })\n);\n\n/**\n * helper type that avoids the expansion of unions while inferring it,\n * should work exactly the same as Omit\n */\ntype OmitWithoutExpanding<P, K extends string | number | symbol> = P extends unknown ? Omit<P, K> : P;\n\n/**\n * @internal\n */\nconst defaultTreeContextValue: TreeContextValue = {\n  level: 0,\n  contextType: 'root',\n  treeType: 'nested',\n  selectionMode: 'none',\n  openItems: ImmutableSet.empty,\n  checkedItems: ImmutableMap.empty,\n  requestTreeResponse: noop,\n  appearance: 'subtle',\n  size: 'medium',\n};\n\nfunction noop() {\n  /* noop */\n}\n\n/**\n * @internal\n */\nexport const TreeContext: Context<TreeContextValue> = createContext<TreeContextValue | undefined>(\n  undefined,\n) as Context<TreeContextValue>;\n\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n  useContextSelector(TreeContext, (ctx = defaultTreeContextValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","ImmutableSet","ImmutableMap","defaultTreeContextValue","level","contextType","treeType","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","appearance","size","TreeContext","undefined","useTreeContext_unstable","selector","ctx"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAG/G,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,YAAY,QAAQ,wBAAwB;AA8BrD;;CAEC,GACD,MAAMC,0BAA4C;IAChDC,OAAO;IACPC,aAAa;IACbC,UAAU;IACVC,eAAe;IACfC,WAAWP,aAAaQ,KAAK;IAC7BC,cAAcR,aAAaO,KAAK;IAChCE,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACR;AAEA,SAASF;AACP,QAAQ,GACV;AAEA;;CAEC,GACD,OAAO,MAAMG,cAAyChB,cACpDiB,WAC6B;AAE/B,OAAO,MAAMC,0BAA0B,CAAIC,WACzClB,mBAAmBe,aAAa,CAACI,MAAMhB,uBAAuB,GAAKe,SAASC,MAAM"}

package/lib/hooks/useRootTree.js

@@ -1,9 +1,9 @@
 import { getNativeElementProps, useEventCallback, slot } from '@fluentui/react-utilities';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { createOpenItems } from '../utils/createOpenItems';
 import { createCheckedItems } from '../utils/createCheckedItems';
 import { treeDataTypes } from '../utils/tokens';
+import { createNextOpenItems } from './useControllableOpenItems';
 /**
  * Create the state required to render the root level tree.
  *
@@ -19,16 +19,20 @@ import { treeDataTypes } from '../utils/tokens';
         props.checkedItems
     ]);
     const requestOpenChange = (data)=>{
-        var _props_onOpenChange, _props;
-        return (_props_onOpenChange = (_props = props).onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(_props, data.event, data);
+        var _props_onOpenChange;
+        const nextOpenItems = createNextOpenItems(data, openItems);
+        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, data.event, {
+            ...data,
+            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()
+        });
     };
     const requestCheckedChange = (data)=>{
-        var _props_onCheckedChange, _props;
-        return (_props_onCheckedChange = (_props = props).onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(_props, data.event, data);
+        var _props_onCheckedChange;
+        return (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, data.event, data);
     };
     const requestNavigation = (data)=>{
-        var _props_onNavigation, _props;
-        (_props_onNavigation = (_props = props).onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(_props, data.event, data);
+        var _props_onNavigation;
+        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, data.event, data);
         switch(data.type){
             case treeDataTypes.ArrowDown:
             case treeDataTypes.ArrowUp:
@@ -40,85 +44,28 @@ import { treeDataTypes } from '../utils/tokens';
         }
     };
     const requestTreeResponse = useEventCallback((request)=>{
-        switch(request.type){
-            case treeDataTypes.Click:
-            case treeDataTypes.ExpandIconClick:
-                {
-                    return ReactDOM.unstable_batchedUpdates(()=>{
-                        requestOpenChange({
-                            ...request,
-                            open: request.itemType === 'branch' && !openItems.has(request.value),
-                            openItems: openItems.dangerouslyGetInternalSet_unstable()
-                        });
-                        requestNavigation({
-                            ...request,
-                            type: treeDataTypes.Click
-                        });
-                    });
-                }
-            case treeDataTypes.ArrowRight:
-                {
-                    if (request.itemType === 'leaf') {
-                        return;
-                    }
-                    const open = openItems.has(request.value);
-                    if (!open) {
-                        return requestOpenChange({
-                            ...request,
-                            open: true,
-                            openItems: openItems.dangerouslyGetInternalSet_unstable()
-                        });
-                    }
-                    return requestNavigation(request);
-                }
-            case treeDataTypes.Enter:
-                {
-                    const open = openItems.has(request.value);
-                    return requestOpenChange({
-                        ...request,
-                        open: request.itemType === 'branch' && !open,
-                        openItems: openItems.dangerouslyGetInternalSet_unstable()
-                    });
-                }
-            case treeDataTypes.ArrowLeft:
-                {
-                    const open = openItems.has(request.value);
-                    if (open && request.itemType === 'branch') {
-                        return requestOpenChange({
-                            ...request,
-                            open: false,
-                            type: treeDataTypes.ArrowLeft,
-                            openItems: openItems.dangerouslyGetInternalSet_unstable()
-                        });
-                    }
-                    return requestNavigation({
-                        ...request,
-                        type: treeDataTypes.ArrowLeft
-                    });
-                }
-            case treeDataTypes.End:
-            case treeDataTypes.Home:
-            case treeDataTypes.ArrowUp:
-            case treeDataTypes.ArrowDown:
-            case treeDataTypes.TypeAhead:
-                return requestNavigation({
+        switch(request.requestType){
+            case 'navigate':
+                return requestNavigation(request);
+            case 'open':
+                return requestOpenChange({
+                    ...request,
+                    open: request.itemType === 'branch' && !openItems.has(request.value),
+                    openItems: openItems.dangerouslyGetInternalSet_unstable()
+                });
+            case 'selection':
+                return requestCheckedChange({
                     ...request,
-                    target: request.event.currentTarget
+                    selectionMode: selectionMode,
+                    checkedItems: checkedItems.dangerouslyGetInternalMap_unstable()
                 });
-            case treeDataTypes.Change:
-                {
-                    return requestCheckedChange({
-                        ...request,
-                        selectionMode: selectionMode,
-                        checkedItems: checkedItems.dangerouslyGetInternalMap_unstable()
-                    });
-                }
         }
     });
     return {
         components: {
             root: 'div'
         },
+        contextType: 'root',
         selectionMode,
         open: true,
         appearance,