@fluentui/react-tree 9.1.1 → 9.3.1

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, useTreeItemContext_unstable } from '../../contexts/index';
 import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
 /**
  * Create the state required to render TreeItem.
@@ -16,8 +16,16 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
  * @param ref - reference to root HTMLElement of TreeItem
  */ export function useTreeItem_unstable(props, ref) {
     var _props_value;
+    const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);
+    if (treeType === 'flat') {
+        warnIfNoProperPropsFlatTreeItem(props);
+    }
     const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);
     const contextLevel = useTreeContext_unstable((ctx)=>ctx.level);
+    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());
@@ -32,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;
         }
@@ -57,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,
@@ -65,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;
@@ -89,7 +107,7 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
                 return;
             case treeDataTypes.Enter:
                 {
-                    var _props_onOpenChange, _props;
+                    var _props_onOpenChange;
                     const data = {
                         value,
                         event,
@@ -97,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:
@@ -108,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
                 });
@@ -128,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:
@@ -149,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
             });
         }
     });
@@ -193,6 +220,7 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
             return;
         }
         requestTreeResponse({
+            requestType: 'selection',
             event,
             value,
             itemType,
@@ -242,3 +270,18 @@ 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 || 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"
+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.
+- "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 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"],"names":["React","ReactDOM","getNativeElementProps","useId","useMergedRefs","useEventCallback","slot","elementContains","Space","treeDataTypes","useTreeContext_unstable","dataTreeItemValueAttrName","useTreeItem_unstable","props","ref","requestTreeResponse","ctx","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"],"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, useTreeItemContext_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  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","useTreeItemContext_unstable","dataTreeItemValueAttrName","useTreeItem_unstable","props","ref","treeType","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","contextLevel","level","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/contexts/treeContext.js

@@ -2,6 +2,7 @@ import { createContext, useContextSelector } from '@fluentui/react-context-selec
 import { ImmutableSet } from '../utils/ImmutableSet';
 import { ImmutableMap } from '../utils/ImmutableMap';
 const defaultContextValue = {
+    treeType: 'nested',
     level: 0,
     selectionMode: 'none',
     openItems: ImmutableSet.empty,

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  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  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","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;AAyBrD,MAAMC,sBAAwC;IAC5CC,OAAO;IACPC,eAAe;IACfC,WAAWL,aAAaM,KAAK;IAC7BC,cAAcN,aAAaK,KAAK;IAChCE,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACR;AAEA,SAASF;AACP,QAAQ,GACV;AAEA,OAAO,MAAMG,cAAqDd,cAChEe,WACA;AAEF,OAAO,MAAM,EAAEC,UAAUC,YAAY,EAAE,GAAGH,YAAY;AACtD,OAAO,MAAMI,0BAA0B,CAAIC,WACzClB,mBAAmBa,aAAa,CAACM,MAAMhB,mBAAmB,GAAKe,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  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'> & { requestType: 'open' })\n  | (TreeNavigationData_unstable & { requestType: 'navigate' })\n  | (OmitWithoutExpanding<TreeCheckedChangeData, 'selectionMode' | 'checkedItems'> & { requestType: 'selection' })\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"}

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,79 +44,21 @@ 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 {

package/lib/hooks/useRootTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import { SelectionMode, getNativeElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type {\n  TreeCheckedChangeData,\n  TreeNavigationData_unstable,\n  TreeOpenChangeData,\n  TreeProps,\n  TreeState,\n} from '../Tree';\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { TreeItemRequest } from '../contexts/treeContext';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\n\n/**\n * Create the state required to render the root level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useRootTree(\n  props: Pick<\n    TreeProps,\n    | 'selectionMode'\n    | 'appearance'\n    | 'size'\n    | 'openItems'\n    | 'checkedItems'\n    | 'onOpenChange'\n    | 'onCheckedChange'\n    | 'onNavigation'\n    | 'aria-label'\n    | 'aria-labelledby'\n  >,\n\n  ref: React.Ref<HTMLElement>,\n): TreeState {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n\n  const openItems = React.useMemo(() => createOpenItems(props.openItems), [props.openItems]);\n  const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n  const requestOpenChange = (data: TreeOpenChangeData) => props.onOpenChange?.(data.event, data);\n\n  const requestCheckedChange = (data: TreeCheckedChangeData) => props.onCheckedChange?.(data.event, data);\n\n  const requestNavigation = (data: TreeNavigationData_unstable) => {\n    props.onNavigation?.(data.event, data);\n    switch (data.type) {\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.Home:\n      case treeDataTypes.End:\n        // stop the default behavior of the event\n        // which is to scroll the page\n        data.event.preventDefault();\n    }\n  };\n\n  const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n    switch (request.type) {\n      case treeDataTypes.Click:\n      case treeDataTypes.ExpandIconClick: {\n        return ReactDOM.unstable_batchedUpdates(() => {\n          requestOpenChange({\n            ...request,\n            open: request.itemType === 'branch' && !openItems.has(request.value),\n            openItems: openItems.dangerouslyGetInternalSet_unstable(),\n          });\n          requestNavigation({ ...request, type: treeDataTypes.Click });\n        });\n      }\n      case treeDataTypes.ArrowRight: {\n        if (request.itemType === 'leaf') {\n          return;\n        }\n        const open = openItems.has(request.value);\n        if (!open) {\n          return requestOpenChange({\n            ...request,\n            open: true,\n            openItems: openItems.dangerouslyGetInternalSet_unstable(),\n          });\n        }\n        return requestNavigation(request);\n      }\n      case treeDataTypes.Enter: {\n        const open = openItems.has(request.value);\n        return requestOpenChange({\n          ...request,\n          open: request.itemType === 'branch' && !open,\n          openItems: openItems.dangerouslyGetInternalSet_unstable(),\n        });\n      }\n      case treeDataTypes.ArrowLeft: {\n        const open = openItems.has(request.value);\n        if (open && request.itemType === 'branch') {\n          return requestOpenChange({\n            ...request,\n            open: false,\n            type: treeDataTypes.ArrowLeft,\n            openItems: openItems.dangerouslyGetInternalSet_unstable(),\n          });\n        }\n        return requestNavigation({ ...request, type: treeDataTypes.ArrowLeft });\n      }\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.TypeAhead:\n        return requestNavigation({ ...request, target: request.event.currentTarget });\n      case treeDataTypes.Change: {\n        return requestCheckedChange({\n          ...request,\n          selectionMode: selectionMode as SelectionMode,\n          checkedItems: checkedItems.dangerouslyGetInternalMap_unstable(),\n        } as TreeCheckedChangeData);\n      }\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    selectionMode,\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    checkedItems,\n    requestTreeResponse,\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        role: 'tree',\n        'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn(/* #__DE-INDENT__ */ `\n        @fluentui/react-tree [useRootTree]:\n        Tree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined\n      `);\n    }\n  }\n}\n"],"names":["getNativeElementProps","useEventCallback","slot","React","ReactDOM","createOpenItems","createCheckedItems","treeDataTypes","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","useMemo","checkedItems","requestOpenChange","data","onOpenChange","event","requestCheckedChange","onCheckedChange","requestNavigation","onNavigation","type","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","request","Click","ExpandIconClick","unstable_batchedUpdates","open","itemType","has","value","dangerouslyGetInternalSet_unstable","ArrowRight","Enter","ArrowLeft","TypeAhead","target","currentTarget","Change","dangerouslyGetInternalMap_unstable","components","root","level","always","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":"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"}
+{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import { SelectionMode, getNativeElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type {\n  TreeCheckedChangeData,\n  TreeNavigationData_unstable,\n  TreeOpenChangeData,\n  TreeProps,\n  TreeState,\n} from '../Tree';\nimport * as React from 'react';\nimport { TreeItemRequest } from '../contexts/treeContext';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\n\n/**\n * Create the state required to render the root level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useRootTree(\n  props: Pick<\n    TreeProps,\n    | 'selectionMode'\n    | 'appearance'\n    | 'size'\n    | 'openItems'\n    | 'checkedItems'\n    | 'onOpenChange'\n    | 'onCheckedChange'\n    | 'onNavigation'\n    | 'aria-label'\n    | 'aria-labelledby'\n  >,\n\n  ref: React.Ref<HTMLElement>,\n): Omit<TreeState, 'treeType'> {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n\n  const openItems = React.useMemo(() => createOpenItems(props.openItems), [props.openItems]);\n  const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n  const requestOpenChange = (data: TreeOpenChangeData) => {\n    const nextOpenItems = createNextOpenItems(data, openItems);\n    props.onOpenChange?.(data.event, {\n      ...data,\n      openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n    });\n  };\n\n  const requestCheckedChange = (data: TreeCheckedChangeData) => props.onCheckedChange?.(data.event, data);\n\n  const requestNavigation = (data: TreeNavigationData_unstable) => {\n    props.onNavigation?.(data.event, data);\n    switch (data.type) {\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.Home:\n      case treeDataTypes.End:\n        // stop the default behavior of the event\n        // which is to scroll the page\n        data.event.preventDefault();\n    }\n  };\n\n  const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n    switch (request.requestType) {\n      case 'navigate':\n        return requestNavigation(request);\n      case 'open':\n        return requestOpenChange({\n          ...request,\n          open: request.itemType === 'branch' && !openItems.has(request.value),\n          openItems: openItems.dangerouslyGetInternalSet_unstable(),\n        });\n      case 'selection':\n        return requestCheckedChange({\n          ...request,\n          selectionMode: selectionMode as SelectionMode,\n          checkedItems: checkedItems.dangerouslyGetInternalMap_unstable(),\n        } as TreeCheckedChangeData);\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    selectionMode,\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    checkedItems,\n    requestTreeResponse,\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        role: 'tree',\n        'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn(/* #__DE-INDENT__ */ `\n        @fluentui/react-tree [useRootTree]:\n        Tree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined\n      `);\n    }\n  }\n}\n"],"names":["getNativeElementProps","useEventCallback","slot","React","createOpenItems","createCheckedItems","treeDataTypes","createNextOpenItems","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","useMemo","checkedItems","requestOpenChange","data","nextOpenItems","onOpenChange","event","dangerouslyGetInternalSet_unstable","requestCheckedChange","onCheckedChange","requestNavigation","onNavigation","type","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","request","requestType","open","itemType","has","value","dangerouslyGetInternalMap_unstable","components","root","level","always","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":"AAAA,SAAwBA,qBAAqB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAQzG,YAAYC,WAAW,QAAQ;AAE/B,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,mBAAmB,QAAQ,6BAA6B;AAEjE;;;;;CAKC,GACD,OAAO,SAASC,YACdC,KAYC,EAEDC,GAA2B;IAE3BC,4BAA4BF;IAE5B,MAAM,EAAEG,aAAa,QAAQ,EAAEC,OAAO,QAAQ,EAAEC,gBAAgB,MAAM,EAAE,GAAGL;IAE3E,MAAMM,YAAYZ,MAAMa,OAAO,CAAC,IAAMZ,gBAAgBK,MAAMM,SAAS,GAAG;QAACN,MAAMM,SAAS;KAAC;IACzF,MAAME,eAAed,MAAMa,OAAO,CAAC,IAAMX,mBAAmBI,MAAMQ,YAAY,GAAG;QAACR,MAAMQ,YAAY;KAAC;IACrG,MAAMC,oBAAoB,CAACC;YAEzBV;QADA,MAAMW,gBAAgBb,oBAAoBY,MAAMJ;SAChDN,sBAAAA,MAAMY,YAAY,cAAlBZ,0CAAAA,yBAAAA,OAAqBU,KAAKG,KAAK,EAAE;YAC/B,GAAGH,IAAI;YACPJ,WAAWK,cAAcG,kCAAkC;QAC7D;IACF;IAEA,MAAMC,uBAAuB,CAACL;YAAgCV;gBAAAA,yBAAAA,MAAMgB,eAAe,cAArBhB,6CAAAA,4BAAAA,OAAwBU,KAAKG,KAAK,EAAEH;;IAElG,MAAMO,oBAAoB,CAACP;YACzBV;SAAAA,sBAAAA,MAAMkB,YAAY,cAAlBlB,0CAAAA,yBAAAA,OAAqBU,KAAKG,KAAK,EAAEH;QACjC,OAAQA,KAAKS,IAAI;YACf,KAAKtB,cAAcuB,SAAS;YAC5B,KAAKvB,cAAcwB,OAAO;YAC1B,KAAKxB,cAAcyB,IAAI;YACvB,KAAKzB,cAAc0B,GAAG;gBACpB,yCAAyC;gBACzC,8BAA8B;gBAC9Bb,KAAKG,KAAK,CAACW,cAAc;QAC7B;IACF;IAEA,MAAMC,sBAAsBjC,iBAAiB,CAACkC;QAC5C,OAAQA,QAAQC,WAAW;YACzB,KAAK;gBACH,OAAOV,kBAAkBS;YAC3B,KAAK;gBACH,OAAOjB,kBAAkB;oBACvB,GAAGiB,OAAO;oBACVE,MAAMF,QAAQG,QAAQ,KAAK,YAAY,CAACvB,UAAUwB,GAAG,CAACJ,QAAQK,KAAK;oBACnEzB,WAAWA,UAAUQ,kCAAkC;gBACzD;YACF,KAAK;gBACH,OAAOC,qBAAqB;oBAC1B,GAAGW,OAAO;oBACVrB,eAAeA;oBACfG,cAAcA,aAAawB,kCAAkC;gBAC/D;QACJ;IACF;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACA7B;QACAuB,MAAM;QACNzB;QACAC;QACA+B,OAAO;QACP7B;QACAE;QACAiB;QACAS,MAAMzC,KAAK2C,MAAM,CACf7C,sBAAsB,OAAO;YAC3BU;YACAoC,MAAM;YACN,wBAAwBhC,kBAAkB,gBAAgB,OAAOiC;YACjE,GAAGtC,KAAK;QACV,IACA;YAAEuC,aAAa;QAAM;IAEzB;AACF;AAEA,SAASrC,4BAA4BF,KAAwD;IAC3F,IAAIwC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAI,CAAC1C,KAAK,CAAC,aAAa,IAAI,CAACA,KAAK,CAAC,kBAAkB,EAAE;YACrD,sCAAsC;YACtC2C,QAAQC,IAAI,CAAsB,CAAC;8EAGnC,CAAC;QACH;IACF;AACF"}

package/lib/hooks/useSubtree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useSubtree(props: Pick<TreeProps, 'appearance' | 'size'>, ref: React.Ref<HTMLElement>): TreeState {\n  const contextAppearance = useTreeContext_unstable(ctx => ctx.appearance);\n  const contextSize = useTreeContext_unstable(ctx => ctx.size);\n  const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n\n  const { appearance = contextAppearance ?? 'subtle', size = contextSize ?? 'medium' } = props;\n\n  const parentLevel = useTreeContext_unstable(ctx => ctx.level);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n  const openItems = useTreeContext_unstable(ctx => ctx.openItems);\n  const checkedItems = useTreeContext_unstable(ctx => ctx.checkedItems);\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n\n  const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n  return {\n    open,\n    components: {\n      root: 'div',\n    },\n    appearance,\n    size,\n    selectionMode,\n    level: parentLevel + 1,\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref: useMergedRefs(ref, subtreeRef),\n        role: 'group',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    openItems,\n    checkedItems,\n    requestTreeResponse,\n  };\n}\n"],"names":["React","useTreeContext_unstable","useTreeItemContext_unstable","getNativeElementProps","useMergedRefs","slot","useSubtree","props","ref","contextAppearance","ctx","appearance","contextSize","size","subtreeRef","parentLevel","level","selectionMode","openItems","checkedItems","requestTreeResponse","open","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,oBAAoB;AACzF,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAEvF;;;;;CAKC,GACD,OAAO,SAASC,WAAWC,KAA6C,EAAEC,GAA2B;IACnG,MAAMC,oBAAoBR,wBAAwBS,CAAAA,MAAOA,IAAIC,UAAU;IACvE,MAAMC,cAAcX,wBAAwBS,CAAAA,MAAOA,IAAIG,IAAI;IAC3D,MAAMC,aAAaZ,4BAA4BQ,CAAAA,MAAOA,IAAII,UAAU;IAEpE,MAAM,EAAEH,aAAaF,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAAEI,OAAOD,wBAAAA,yBAAAA,cAAe,QAAQ,EAAE,GAAGL;IAEvF,MAAMQ,cAAcd,wBAAwBS,CAAAA,MAAOA,IAAIM,KAAK;IAC5D,MAAMC,gBAAgBhB,wBAAwBS,CAAAA,MAAOA,IAAIO,aAAa;IACtE,MAAMC,YAAYjB,wBAAwBS,CAAAA,MAAOA,IAAIQ,SAAS;IAC9D,MAAMC,eAAelB,wBAAwBS,CAAAA,MAAOA,IAAIS,YAAY;IACpE,MAAMC,sBAAsBnB,wBAAwBS,CAAAA,MAAOA,IAAIU,mBAAmB;IAElF,MAAMC,OAAOnB,4BAA4BQ,CAAAA,MAAOA,IAAIW,IAAI;IAExD,OAAO;QACLA;QACAC,YAAY;YACVC,MAAM;QACR;QACAZ;QACAE;QACAI;QACAD,OAAOD,cAAc;QACrBQ,MAAMlB,KAAKmB,MAAM,CACfrB,sBAAsB,OAAO;YAC3BK,KAAKJ,cAAcI,KAAKM;YACxBW,MAAM;YACN,GAAGlB,KAAK;QACV,IACA;YAAEmB,aAAa;QAAM;QAEvBR;QACAC;QACAC;IACF;AACF"}
+{"version":3,"sources":["useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useSubtree(\n  props: Pick<TreeProps, 'appearance' | 'size'>,\n  ref: React.Ref<HTMLElement>,\n): Omit<TreeState, 'treeType'> {\n  const contextAppearance = useTreeContext_unstable(ctx => ctx.appearance);\n  const contextSize = useTreeContext_unstable(ctx => ctx.size);\n  const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n\n  const { appearance = contextAppearance ?? 'subtle', size = contextSize ?? 'medium' } = props;\n\n  const parentLevel = useTreeContext_unstable(ctx => ctx.level);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n  const openItems = useTreeContext_unstable(ctx => ctx.openItems);\n  const checkedItems = useTreeContext_unstable(ctx => ctx.checkedItems);\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n\n  const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n  return {\n    open,\n    components: {\n      root: 'div',\n    },\n    appearance,\n    size,\n    selectionMode,\n    level: parentLevel + 1,\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref: useMergedRefs(ref, subtreeRef),\n        role: 'group',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    openItems,\n    checkedItems,\n    requestTreeResponse,\n  };\n}\n"],"names":["React","useTreeContext_unstable","useTreeItemContext_unstable","getNativeElementProps","useMergedRefs","slot","useSubtree","props","ref","contextAppearance","ctx","appearance","contextSize","size","subtreeRef","parentLevel","level","selectionMode","openItems","checkedItems","requestTreeResponse","open","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,oBAAoB;AACzF,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAEvF;;;;;CAKC,GACD,OAAO,SAASC,WACdC,KAA6C,EAC7CC,GAA2B;IAE3B,MAAMC,oBAAoBR,wBAAwBS,CAAAA,MAAOA,IAAIC,UAAU;IACvE,MAAMC,cAAcX,wBAAwBS,CAAAA,MAAOA,IAAIG,IAAI;IAC3D,MAAMC,aAAaZ,4BAA4BQ,CAAAA,MAAOA,IAAII,UAAU;IAEpE,MAAM,EAAEH,aAAaF,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAAEI,OAAOD,wBAAAA,yBAAAA,cAAe,QAAQ,EAAE,GAAGL;IAEvF,MAAMQ,cAAcd,wBAAwBS,CAAAA,MAAOA,IAAIM,KAAK;IAC5D,MAAMC,gBAAgBhB,wBAAwBS,CAAAA,MAAOA,IAAIO,aAAa;IACtE,MAAMC,YAAYjB,wBAAwBS,CAAAA,MAAOA,IAAIQ,SAAS;IAC9D,MAAMC,eAAelB,wBAAwBS,CAAAA,MAAOA,IAAIS,YAAY;IACpE,MAAMC,sBAAsBnB,wBAAwBS,CAAAA,MAAOA,IAAIU,mBAAmB;IAElF,MAAMC,OAAOnB,4BAA4BQ,CAAAA,MAAOA,IAAIW,IAAI;IAExD,OAAO;QACLA;QACAC,YAAY;YACVC,MAAM;QACR;QACAZ;QACAE;QACAI;QACAD,OAAOD,cAAc;QACrBQ,MAAMlB,KAAKmB,MAAM,CACfrB,sBAAsB,OAAO;YAC3BK,KAAKJ,cAAcI,KAAKM;YACxBW,MAAM;YACN,GAAGlB,KAAK;QACV,IACA;YAAEmB,aAAa;QAAM;QAEvBR;QACAC;QACAC;IACF;AACF"}

package/lib/index.js

@@ -1,8 +1,10 @@
 export { Tree, treeClassNames, useTree_unstable, useTreeStyles_unstable, useTreeContextValues_unstable, renderTree_unstable } from './Tree';
-export { FlatTree, flatTreeClassNames, useFlatTree_unstable, useFlatTreeStyles_unstable, useFlatTreeContextValues_unstable, renderFlatTree_unstable, useHeadlessFlatTree_unstable } from './FlatTree';
-export { TreeProvider, useTreeContext_unstable, useTreeItemContext_unstable, TreeItemProvider } from './contexts';
+export { FlatTree, flatTreeClassNames, useFlatTree_unstable, useFlatTreeStyles_unstable, useFlatTreeContextValues_unstable, renderFlatTree_unstable } from './FlatTree';
+export { useTreeContext_unstable, useTreeItemContext_unstable, TreeItemProvider, TreeProvider } from './contexts';
 export { treeItemLevelToken } from './utils/tokens';
+export { useHeadlessFlatTree_unstable } from './components/FlatTree/useHeadlessFlatTree';
 export { TreeItem, treeItemClassNames, renderTreeItem_unstable, useTreeItemStyles_unstable, useTreeItemContextValues_unstable, useTreeItem_unstable } from './TreeItem';
+export { FlatTreeItem } from './FlatTreeItem';
 export { TreeItemLayout, treeItemLayoutClassNames, renderTreeItemLayout_unstable, useTreeItemLayoutStyles_unstable, useTreeItemLayout_unstable } from './TreeItemLayout';
 export { TreeItemPersonaLayout, treeItemPersonaLayoutClassNames, renderTreeItemPersonaLayout_unstable, useTreeItemPersonaLayoutStyles_unstable, useTreeItemPersonaLayout_unstable } from './TreeItemPersonaLayout';
 export { flattenTree_unstable } from './utils/flattenTree';