@fluentui/react-tree 9.5.1 → 9.7.0

package/lib-commonjs/components/Tree/useTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { useTreeNavigation } from '../../hooks/useTreeNavigation';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nexport const useTree_unstable = (props, ref)=>{\n    const isRoot = React.useContext(SubtreeContext) === undefined;\n    // as level is static, this doesn't break rule of hooks\n    // and if this becomes an issue later on, this can be easily converted\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);\n};\nfunction useNestedRootTree(props, ref) {\n    const [openItems, setOpenItems] = useControllableOpenItems(props);\n    const checkedItems = useNestedCheckedItems(props);\n    const navigation = useTreeNavigation();\n    return Object.assign(useRootTree({\n        ...props,\n        openItems,\n        checkedItems,\n        onOpenChange: useEventCallback((event, data)=>{\n            var _props_onOpenChange;\n            const nextOpenItems = createNextOpenItems(data, openItems);\n            (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {\n                ...data,\n                openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n            });\n            setOpenItems(nextOpenItems);\n        }),\n        onNavigation: useEventCallback((event, data)=>{\n            var _props_onNavigation;\n            (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);\n            if (!event.isDefaultPrevented()) {\n                navigation.navigate(data);\n            }\n        }),\n        onCheckedChange: useEventCallback((event, data)=>{\n            var _props_onCheckedChange;\n            const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n            (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, {\n                ...data,\n                checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()\n            });\n        })\n    }, useMergedRefs(ref, navigation.rootRef)), {\n        treeType: 'nested'\n    });\n}\nfunction useNestedSubtree(props, ref) {\n    if (process.env.NODE_ENV === 'development') {\n        // this doesn't break rule of hooks, as environment is a static value\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);\n        if (treeType === 'flat') {\n            throw new Error(`@fluentui/react-tree [useTree]:\nSubtrees are not allowed in a FlatTree!\nYou cannot use a <Tree> component inside of a <FlatTree> component!`);\n        }\n    }\n    return useSubtree(props, ref);\n}\n"],"names":["useTree_unstable","props","ref","isRoot","React","useContext","SubtreeContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","useControllableOpenItems","checkedItems","useNestedCheckedItems","navigation","useTreeNavigation","Object","assign","useRootTree","onOpenChange","useEventCallback","event","data","_props_onOpenChange","nextOpenItems","createNextOpenItems","call","dangerouslyGetInternalSet_unstable","onNavigation","_props_onNavigation","isDefaultPrevented","navigate","onCheckedChange","_props_onCheckedChange","nextCheckedItems","createNextNestedCheckedItems","dangerouslyGetInternalMap_unstable","useMergedRefs","rootRef","treeType","process","env","NODE_ENV","useTreeContext_unstable","ctx","Error","useSubtree"],"mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;gCACyB;0CACc;mDACM;gCACrC;6BACH;4BACD;mCACO;6BACM;AACjC,MAAMA,mBAAmB,CAACC,OAAOC;IACpC,MAAMC,SAASC,OAAMC,UAAU,CAACC,8BAAc,MAAMC;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOJ,SAASK,kBAAkBP,OAAOC,OAAOO,iBAAiBR,OAAOC;AAC5E;AACA,SAASM,kBAAkBP,KAAK,EAAEC,GAAG;IACjC,MAAM,CAACQ,WAAWC,aAAa,GAAGC,IAAAA,kDAAwB,EAACX;IAC3D,MAAMY,eAAeC,IAAAA,wDAAqB,EAACb;IAC3C,MAAMc,aAAaC,IAAAA,oCAAiB;IACpC,OAAOC,OAAOC,MAAM,CAACC,IAAAA,wBAAW,EAAC;QAC7B,GAAGlB,KAAK;QACRS;QACAG;QACAO,cAAcC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACnC,IAAIC;YACJ,MAAMC,gBAAgBC,IAAAA,6CAAmB,EAACH,MAAMb;YAC/Cc,CAAAA,sBAAsBvB,MAAMmB,YAAY,AAAD,MAAO,QAAQI,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBG,IAAI,CAAC1B,OAAOqB,OAAO;gBACpI,GAAGC,IAAI;gBACPb,WAAWe,cAAcG,kCAAkC;YAC/D;YACAjB,aAAac;QACjB;QACAI,cAAcR,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACnC,IAAIO;YACHA,CAAAA,sBAAsB7B,MAAM4B,YAAY,AAAD,MAAO,QAAQC,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBH,IAAI,CAAC1B,OAAOqB,OAAOC;YACxI,IAAI,CAACD,MAAMS,kBAAkB,IAAI;gBAC7BhB,WAAWiB,QAAQ,CAACT;YACxB;QACJ;QACAU,iBAAiBZ,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACtC,IAAIW;YACJ,MAAMC,mBAAmBC,IAAAA,+DAA4B,EAACb,MAAMV;YAC3DqB,CAAAA,yBAAyBjC,MAAMgC,eAAe,AAAD,MAAO,QAAQC,2BAA2B,KAAK,IAAI,KAAK,IAAIA,uBAAuBP,IAAI,CAAC1B,OAAOqB,OAAO;gBAChJ,GAAGC,IAAI;gBACPV,cAAcsB,iBAAiBE,kCAAkC;YACrE;QACJ;IACJ,GAAGC,IAAAA,6BAAa,EAACpC,KAAKa,WAAWwB,OAAO,IAAI;QACxCC,UAAU;IACd;AACJ;AACA,SAAS/B,iBAAiBR,KAAK,EAAEC,GAAG;IAChC,IAAIuC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACxC,qEAAqE;QACrE,sDAAsD;QACtD,MAAMH,WAAWI,IAAAA,oCAAuB,EAAC,CAACC,MAAMA,IAAIL,QAAQ;QAC5D,IAAIA,aAAa,QAAQ;YACrB,MAAM,IAAIM,MAAM,CAAC;;mEAEsC,CAAC;QAC5D;IACJ;IACA,OAAOC,IAAAA,sBAAU,EAAC9C,OAAOC;AAC7B"}
+{"version":3,"sources":["useTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { useTreeNavigation } from '../../hooks/useTreeNavigation';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nexport const useTree_unstable = (props, ref)=>{\n    const isRoot = React.useContext(SubtreeContext) === undefined;\n    // as level is static, this doesn't break rule of hooks\n    // and if this becomes an issue later on, this can be easily converted\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);\n};\nfunction useNestedRootTree(props, ref) {\n    const [openItems, setOpenItems] = useControllableOpenItems(props);\n    const checkedItems = useNestedCheckedItems(props);\n    const navigation = useTreeNavigation();\n    return Object.assign(useRootTree({\n        ...props,\n        openItems,\n        checkedItems,\n        onOpenChange: useEventCallback((event, data)=>{\n            var _props_onOpenChange;\n            const nextOpenItems = createNextOpenItems(data, openItems);\n            (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {\n                ...data,\n                openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n            });\n            setOpenItems(nextOpenItems);\n        }),\n        onNavigation: useEventCallback((event, data)=>{\n            var _props_onNavigation;\n            (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);\n            if (!event.isDefaultPrevented()) {\n                navigation.navigate(data, {\n                    preventScroll: data.isScrollPrevented()\n                });\n            }\n        }),\n        onCheckedChange: useEventCallback((event, data)=>{\n            var _props_onCheckedChange;\n            const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n            (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, {\n                ...data,\n                checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()\n            });\n        })\n    }, useMergedRefs(ref, navigation.treeRef)), {\n        treeType: 'nested'\n    });\n}\nfunction useNestedSubtree(props, ref) {\n    if (process.env.NODE_ENV === 'development') {\n        // this doesn't break rule of hooks, as environment is a static value\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);\n        if (treeType === 'flat') {\n            throw new Error(`@fluentui/react-tree [useTree]:\nSubtrees are not allowed in a FlatTree!\nYou cannot use a <Tree> component inside of a <FlatTree> component!`);\n        }\n    }\n    return useSubtree(props, ref);\n}\n"],"names":["useTree_unstable","props","ref","isRoot","React","useContext","SubtreeContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","useControllableOpenItems","checkedItems","useNestedCheckedItems","navigation","useTreeNavigation","Object","assign","useRootTree","onOpenChange","useEventCallback","event","data","_props_onOpenChange","nextOpenItems","createNextOpenItems","call","dangerouslyGetInternalSet_unstable","onNavigation","_props_onNavigation","isDefaultPrevented","navigate","preventScroll","isScrollPrevented","onCheckedChange","_props_onCheckedChange","nextCheckedItems","createNextNestedCheckedItems","dangerouslyGetInternalMap_unstable","useMergedRefs","treeRef","treeType","process","env","NODE_ENV","useTreeContext_unstable","ctx","Error","useSubtree"],"mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;gCACyB;0CACc;mDACM;gCACrC;6BACH;4BACD;mCACO;6BACM;AACjC,MAAMA,mBAAmB,CAACC,OAAOC;IACpC,MAAMC,SAASC,OAAMC,UAAU,CAACC,8BAAc,MAAMC;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOJ,SAASK,kBAAkBP,OAAOC,OAAOO,iBAAiBR,OAAOC;AAC5E;AACA,SAASM,kBAAkBP,KAAK,EAAEC,GAAG;IACjC,MAAM,CAACQ,WAAWC,aAAa,GAAGC,IAAAA,kDAAwB,EAACX;IAC3D,MAAMY,eAAeC,IAAAA,wDAAqB,EAACb;IAC3C,MAAMc,aAAaC,IAAAA,oCAAiB;IACpC,OAAOC,OAAOC,MAAM,CAACC,IAAAA,wBAAW,EAAC;QAC7B,GAAGlB,KAAK;QACRS;QACAG;QACAO,cAAcC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACnC,IAAIC;YACJ,MAAMC,gBAAgBC,IAAAA,6CAAmB,EAACH,MAAMb;YAC/Cc,CAAAA,sBAAsBvB,MAAMmB,YAAY,AAAD,MAAO,QAAQI,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBG,IAAI,CAAC1B,OAAOqB,OAAO;gBACpI,GAAGC,IAAI;gBACPb,WAAWe,cAAcG,kCAAkC;YAC/D;YACAjB,aAAac;QACjB;QACAI,cAAcR,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACnC,IAAIO;YACHA,CAAAA,sBAAsB7B,MAAM4B,YAAY,AAAD,MAAO,QAAQC,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBH,IAAI,CAAC1B,OAAOqB,OAAOC;YACxI,IAAI,CAACD,MAAMS,kBAAkB,IAAI;gBAC7BhB,WAAWiB,QAAQ,CAACT,MAAM;oBACtBU,eAAeV,KAAKW,iBAAiB;gBACzC;YACJ;QACJ;QACAC,iBAAiBd,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;YACtC,IAAIa;YACJ,MAAMC,mBAAmBC,IAAAA,+DAA4B,EAACf,MAAMV;YAC3DuB,CAAAA,yBAAyBnC,MAAMkC,eAAe,AAAD,MAAO,QAAQC,2BAA2B,KAAK,IAAI,KAAK,IAAIA,uBAAuBT,IAAI,CAAC1B,OAAOqB,OAAO;gBAChJ,GAAGC,IAAI;gBACPV,cAAcwB,iBAAiBE,kCAAkC;YACrE;QACJ;IACJ,GAAGC,IAAAA,6BAAa,EAACtC,KAAKa,WAAW0B,OAAO,IAAI;QACxCC,UAAU;IACd;AACJ;AACA,SAASjC,iBAAiBR,KAAK,EAAEC,GAAG;IAChC,IAAIyC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACxC,qEAAqE;QACrE,sDAAsD;QACtD,MAAMH,WAAWI,IAAAA,oCAAuB,EAAC,CAACC,MAAMA,IAAIL,QAAQ;QAC5D,IAAIA,aAAa,QAAQ;YACrB,MAAM,IAAIM,MAAM,CAAC;;mEAEsC,CAAC;QAC5D;IACJ;IACA,OAAOC,IAAAA,sBAAU,EAAChD,OAAOC;AAC7B"}

package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js

@@ -20,15 +20,12 @@ const useTreeItemLayout_unstable = (props, ref)=>{
     const { main, iconAfter, iconBefore } = props;
     const layoutRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.layoutRef);
     const selectionMode = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.selectionMode);
-    const [isActionsVisibleFromProps, actionsShorthand] = (0, _reactutilities.isResolvedShorthand)(props.actions) ? [
+    const [isActionsVisibleFromProps, onActionVisibilityChange] = (0, _reactutilities.isResolvedShorthand)(props.actions) ? [
         props.actions.visible,
-        {
-            ...props.actions,
-            visible: undefined
-        }
+        props.actions.onVisibilityChange
     ] : [
         undefined,
-        props.actions
+        undefined
     ];
     const [isActionsVisible, setIsActionsVisible] = (0, _reactutilities.useControllableState)({
         state: isActionsVisibleFromProps,
@@ -49,26 +46,43 @@ const useTreeItemLayout_unstable = (props, ref)=>{
     const setActionsVisibleIfNotFromSubtree = _react.useCallback((event)=>{
         const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactutilities.elementContains)(subtreeRef.current, event.target));
         if (!isTargetFromSubtree) {
+            onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
+                visible: true,
+                event,
+                type: event.type
+            });
             setIsActionsVisible(true);
         }
     }, [
         subtreeRef,
-        setIsActionsVisible
+        setIsActionsVisible,
+        onActionVisibilityChange
     ]);
     const setActionsInvisibleIfNotFromSubtree = _react.useCallback((event)=>{
         const isRelatedTargetFromActions = Boolean(actionsRefInternal.current && (0, _reactutilities.elementContains)(actionsRefInternal.current, event.relatedTarget));
         if (isRelatedTargetFromActions) {
+            onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
+                visible: true,
+                event,
+                type: event.type
+            });
             setIsActionsVisible(true);
             return;
         }
         const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactutilities.elementContains)(subtreeRef.current, event.target));
         if (!isTargetFromSubtree) {
+            onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
+                visible: false,
+                event,
+                type: event.type
+            });
             setIsActionsVisible(false);
             return;
         }
     }, [
         subtreeRef,
-        setIsActionsVisible
+        setIsActionsVisible,
+        onActionVisibilityChange
     ]);
     const expandIcon = _reactutilities.slot.optional(props.expandIcon, {
         renderByDefault: isBranch,
@@ -86,27 +100,34 @@ const useTreeItemLayout_unstable = (props, ref)=>{
         circular: true,
         axis: 'horizontal'
     });
-    const actions = isActionsVisible ? _reactutilities.slot.optional(actionsShorthand, {
+    const actions = isActionsVisible ? _reactutilities.slot.optional(props.actions, {
         defaultProps: {
             ...arrowNavigationProps,
             role: 'toolbar'
         },
         elementType: 'div'
     }) : undefined;
+    actions === null || actions === void 0 ? true : delete actions.visible;
+    actions === null || actions === void 0 ? true : delete actions.onVisibilityChange;
     const actionsRefs = (0, _reactutilities.useMergedRefs)(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef, actionsRefInternal);
     const handleActionsBlur = (0, _reactutilities.useEventCallback)((event)=>{
-        if ((0, _reactutilities.isResolvedShorthand)(actionsShorthand)) {
-            var _actionsShorthand_onBlur;
-            (_actionsShorthand_onBlur = actionsShorthand.onBlur) === null || _actionsShorthand_onBlur === void 0 ? void 0 : _actionsShorthand_onBlur.call(actionsShorthand, event);
+        if ((0, _reactutilities.isResolvedShorthand)(props.actions)) {
+            var _props_actions_onBlur, _props_actions;
+            (_props_actions_onBlur = (_props_actions = props.actions).onBlur) === null || _props_actions_onBlur === void 0 ? void 0 : _props_actions_onBlur.call(_props_actions, event);
         }
         const isRelatedTargetFromActions = Boolean((0, _reactutilities.elementContains)(event.currentTarget, event.relatedTarget));
+        onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {
+            visible: isRelatedTargetFromActions,
+            event,
+            type: event.type
+        });
         setIsActionsVisible(isRelatedTargetFromActions);
     });
     if (actions) {
         actions.ref = actionsRefs;
         actions.onBlur = handleActionsBlur;
     }
-    const hasActions = Boolean(actionsShorthand);
+    const hasActions = Boolean(props.actions);
     _react.useEffect(()=>{
         if (treeItemRef.current && hasActions && isActionsVisibleFromProps === undefined) {
             const treeItemElement = treeItemRef.current;

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, isResolvedShorthand, useMergedRefs, slot, useEventCallback, elementContains, useControllableState } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\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 */ export const useTreeItemLayout_unstable = (props, ref)=>{\n    const { main, iconAfter, iconBefore } = props;\n    const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);\n    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n    const [isActionsVisibleFromProps, actionsShorthand] = isResolvedShorthand(props.actions) ? [\n        props.actions.visible,\n        {\n            ...props.actions,\n            visible: undefined\n        }\n    ] : [\n        undefined,\n        props.actions\n    ];\n    const [isActionsVisible, setIsActionsVisible] = useControllableState({\n        state: isActionsVisibleFromProps,\n        initialState: false\n    });\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 actionsRefInternal = React.useRef(null);\n    const treeItemRef = useTreeItemContext_unstable((ctx)=>ctx.treeItemRef);\n    const subtreeRef = useTreeItemContext_unstable((ctx)=>ctx.subtreeRef);\n    const checked = useTreeItemContext_unstable((ctx)=>ctx.checked);\n    const isBranch = useTreeItemContext_unstable((ctx)=>ctx.itemType === 'branch');\n    // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n    assertIsRefObject(treeItemRef);\n    // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n    assertIsRefObject(subtreeRef);\n    const setActionsVisibleIfNotFromSubtree = React.useCallback((event)=>{\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        if (!isTargetFromSubtree) {\n            setIsActionsVisible(true);\n        }\n    }, [\n        subtreeRef,\n        setIsActionsVisible\n    ]);\n    const setActionsInvisibleIfNotFromSubtree = React.useCallback((event)=>{\n        const isRelatedTargetFromActions = Boolean(actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget));\n        if (isRelatedTargetFromActions) {\n            setIsActionsVisible(true);\n            return;\n        }\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        if (!isTargetFromSubtree) {\n            setIsActionsVisible(false);\n            return;\n        }\n    }, [\n        subtreeRef,\n        setIsActionsVisible\n    ]);\n    const expandIcon = slot.optional(props.expandIcon, {\n        renderByDefault: isBranch,\n        defaultProps: {\n            children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),\n            'aria-hidden': true\n        },\n        elementType: 'div'\n    });\n    const expandIconRefs = useMergedRefs(expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.ref, expandIconRef);\n    if (expandIcon) {\n        expandIcon.ref = expandIconRefs;\n    }\n    const arrowNavigationProps = useArrowNavigationGroup({\n        circular: true,\n        axis: 'horizontal'\n    });\n    const actions = isActionsVisible ? slot.optional(actionsShorthand, {\n        defaultProps: {\n            ...arrowNavigationProps,\n            role: 'toolbar'\n        },\n        elementType: 'div'\n    }) : undefined;\n    const actionsRefs = useMergedRefs(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef, actionsRefInternal);\n    const handleActionsBlur = useEventCallback((event)=>{\n        if (isResolvedShorthand(actionsShorthand)) {\n            var _actionsShorthand_onBlur;\n            (_actionsShorthand_onBlur = actionsShorthand.onBlur) === null || _actionsShorthand_onBlur === void 0 ? void 0 : _actionsShorthand_onBlur.call(actionsShorthand, event);\n        }\n        const isRelatedTargetFromActions = Boolean(elementContains(event.currentTarget, event.relatedTarget));\n        setIsActionsVisible(isRelatedTargetFromActions);\n    });\n    if (actions) {\n        actions.ref = actionsRefs;\n        actions.onBlur = handleActionsBlur;\n    }\n    const hasActions = Boolean(actionsShorthand);\n    React.useEffect(()=>{\n        if (treeItemRef.current && hasActions && isActionsVisibleFromProps === undefined) {\n            const treeItemElement = treeItemRef.current;\n            const handleMouseOver = setActionsVisibleIfNotFromSubtree;\n            const handleMouseOut = setActionsInvisibleIfNotFromSubtree;\n            const handleFocus = setActionsVisibleIfNotFromSubtree;\n            const handleBlur = setActionsInvisibleIfNotFromSubtree;\n            treeItemElement.addEventListener('mouseover', handleMouseOver);\n            treeItemElement.addEventListener('mouseout', handleMouseOut);\n            treeItemElement.addEventListener('focus', handleFocus);\n            treeItemElement.addEventListener('blur', handleBlur);\n            return ()=>{\n                treeItemElement.removeEventListener('mouseover', handleMouseOver);\n                treeItemElement.removeEventListener('mouseout', handleMouseOut);\n                treeItemElement.removeEventListener('focus', handleFocus);\n                treeItemElement.removeEventListener('blur', handleBlur);\n            };\n        }\n    }, [\n        hasActions,\n        treeItemRef,\n        isActionsVisibleFromProps,\n        setActionsVisibleIfNotFromSubtree,\n        setActionsInvisibleIfNotFromSubtree\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\n        },\n        buttonContextValue: {\n            size: 'small'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            ...props,\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: useMergedRefs(ref, layoutRef)\n        }), {\n            elementType: 'div'\n        }),\n        iconBefore: slot.optional(iconBefore, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            elementType: 'div'\n        }),\n        main: slot.always(main, {\n            elementType: 'div'\n        }),\n        iconAfter: slot.optional(iconAfter, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            elementType: 'div'\n        }),\n        aside: !isActionsVisible ? slot.optional(props.aside, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            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            },\n            elementType: selectionMode === 'multiselect' ? Checkbox : Radio\n        })\n    };\n};\nfunction assertIsRefObject(ref) {\n    if (process.env.NODE_ENV !== 'production') {\n        if (typeof ref !== 'object' || ref === null || !('current' in ref)) {\n            throw new Error(`\n        @fluentui/react-tree [${useTreeItemLayout_unstable.name}]:\n        Internal Error: contextual ref is not a RefObject! Please report this bug immediately, as contextual refs should be RefObjects.\n      `);\n        }\n    }\n}\n"],"names":["useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","layoutRef","useTreeItemContext_unstable","ctx","selectionMode","useTreeContext_unstable","isActionsVisibleFromProps","actionsShorthand","isResolvedShorthand","actions","visible","undefined","isActionsVisible","setIsActionsVisible","useControllableState","state","initialState","selectionRef","expandIconRef","actionsRef","actionsRefInternal","React","useRef","treeItemRef","subtreeRef","checked","isBranch","itemType","assertIsRefObject","setActionsVisibleIfNotFromSubtree","useCallback","event","isTargetFromSubtree","Boolean","current","elementContains","target","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","expandIcon","slot","optional","renderByDefault","defaultProps","children","createElement","TreeItemChevron","elementType","expandIconRefs","useMergedRefs","arrowNavigationProps","useArrowNavigationGroup","circular","axis","role","actionsRefs","handleActionsBlur","useEventCallback","_actionsShorthand_onBlur","onBlur","call","currentTarget","hasActions","useEffect","treeItemElement","handleMouseOver","handleMouseOut","handleFocus","handleBlur","addEventListener","removeEventListener","components","root","aside","selector","Checkbox","Radio","buttonContextValue","size","always","getIntrinsicElementProps","tabIndex","process","env","NODE_ENV","Error","name"],"mappings":"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"}
+{"version":3,"sources":["useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, isResolvedShorthand, useMergedRefs, slot, useEventCallback, elementContains, useControllableState } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\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 */ export const useTreeItemLayout_unstable = (props, ref)=>{\n    const { main, iconAfter, iconBefore } = props;\n    const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);\n    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n    const [isActionsVisibleFromProps, onActionVisibilityChange] = isResolvedShorthand(props.actions) ? [\n        props.actions.visible,\n        props.actions.onVisibilityChange\n    ] : [\n        undefined,\n        undefined\n    ];\n    const [isActionsVisible, setIsActionsVisible] = useControllableState({\n        state: isActionsVisibleFromProps,\n        initialState: false\n    });\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 actionsRefInternal = React.useRef(null);\n    const treeItemRef = useTreeItemContext_unstable((ctx)=>ctx.treeItemRef);\n    const subtreeRef = useTreeItemContext_unstable((ctx)=>ctx.subtreeRef);\n    const checked = useTreeItemContext_unstable((ctx)=>ctx.checked);\n    const isBranch = useTreeItemContext_unstable((ctx)=>ctx.itemType === 'branch');\n    // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n    assertIsRefObject(treeItemRef);\n    // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n    assertIsRefObject(subtreeRef);\n    const setActionsVisibleIfNotFromSubtree = React.useCallback((event)=>{\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        if (!isTargetFromSubtree) {\n            onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {\n                visible: true,\n                event,\n                type: event.type\n            });\n            setIsActionsVisible(true);\n        }\n    }, [\n        subtreeRef,\n        setIsActionsVisible,\n        onActionVisibilityChange\n    ]);\n    const setActionsInvisibleIfNotFromSubtree = React.useCallback((event)=>{\n        const isRelatedTargetFromActions = Boolean(actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget));\n        if (isRelatedTargetFromActions) {\n            onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {\n                visible: true,\n                event,\n                type: event.type\n            });\n            setIsActionsVisible(true);\n            return;\n        }\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        if (!isTargetFromSubtree) {\n            onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {\n                visible: false,\n                event,\n                type: event.type\n            });\n            setIsActionsVisible(false);\n            return;\n        }\n    }, [\n        subtreeRef,\n        setIsActionsVisible,\n        onActionVisibilityChange\n    ]);\n    const expandIcon = slot.optional(props.expandIcon, {\n        renderByDefault: isBranch,\n        defaultProps: {\n            children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),\n            'aria-hidden': true\n        },\n        elementType: 'div'\n    });\n    const expandIconRefs = useMergedRefs(expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.ref, expandIconRef);\n    if (expandIcon) {\n        expandIcon.ref = expandIconRefs;\n    }\n    const arrowNavigationProps = useArrowNavigationGroup({\n        circular: true,\n        axis: 'horizontal'\n    });\n    const actions = isActionsVisible ? slot.optional(props.actions, {\n        defaultProps: {\n            ...arrowNavigationProps,\n            role: 'toolbar'\n        },\n        elementType: 'div'\n    }) : undefined;\n    actions === null || actions === void 0 ? true : delete actions.visible;\n    actions === null || actions === void 0 ? true : delete actions.onVisibilityChange;\n    const actionsRefs = useMergedRefs(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef, actionsRefInternal);\n    const handleActionsBlur = useEventCallback((event)=>{\n        if (isResolvedShorthand(props.actions)) {\n            var _props_actions_onBlur, _props_actions;\n            (_props_actions_onBlur = (_props_actions = props.actions).onBlur) === null || _props_actions_onBlur === void 0 ? void 0 : _props_actions_onBlur.call(_props_actions, event);\n        }\n        const isRelatedTargetFromActions = Boolean(elementContains(event.currentTarget, event.relatedTarget));\n        onActionVisibilityChange === null || onActionVisibilityChange === void 0 ? void 0 : onActionVisibilityChange(event, {\n            visible: isRelatedTargetFromActions,\n            event,\n            type: event.type\n        });\n        setIsActionsVisible(isRelatedTargetFromActions);\n    });\n    if (actions) {\n        actions.ref = actionsRefs;\n        actions.onBlur = handleActionsBlur;\n    }\n    const hasActions = Boolean(props.actions);\n    React.useEffect(()=>{\n        if (treeItemRef.current && hasActions && isActionsVisibleFromProps === undefined) {\n            const treeItemElement = treeItemRef.current;\n            const handleMouseOver = setActionsVisibleIfNotFromSubtree;\n            const handleMouseOut = setActionsInvisibleIfNotFromSubtree;\n            const handleFocus = setActionsVisibleIfNotFromSubtree;\n            const handleBlur = setActionsInvisibleIfNotFromSubtree;\n            treeItemElement.addEventListener('mouseover', handleMouseOver);\n            treeItemElement.addEventListener('mouseout', handleMouseOut);\n            treeItemElement.addEventListener('focus', handleFocus);\n            treeItemElement.addEventListener('blur', handleBlur);\n            return ()=>{\n                treeItemElement.removeEventListener('mouseover', handleMouseOver);\n                treeItemElement.removeEventListener('mouseout', handleMouseOut);\n                treeItemElement.removeEventListener('focus', handleFocus);\n                treeItemElement.removeEventListener('blur', handleBlur);\n            };\n        }\n    }, [\n        hasActions,\n        treeItemRef,\n        isActionsVisibleFromProps,\n        setActionsVisibleIfNotFromSubtree,\n        setActionsInvisibleIfNotFromSubtree\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\n        },\n        buttonContextValue: {\n            size: 'small'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            ...props,\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: useMergedRefs(ref, layoutRef)\n        }), {\n            elementType: 'div'\n        }),\n        iconBefore: slot.optional(iconBefore, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            elementType: 'div'\n        }),\n        main: slot.always(main, {\n            elementType: 'div'\n        }),\n        iconAfter: slot.optional(iconAfter, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            elementType: 'div'\n        }),\n        aside: !isActionsVisible ? slot.optional(props.aside, {\n            defaultProps: {\n                'aria-hidden': true\n            },\n            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            },\n            elementType: selectionMode === 'multiselect' ? Checkbox : Radio\n        })\n    };\n};\nfunction assertIsRefObject(ref) {\n    if (process.env.NODE_ENV !== 'production') {\n        if (typeof ref !== 'object' || ref === null || !('current' in ref)) {\n            throw new Error(`\n        @fluentui/react-tree [${useTreeItemLayout_unstable.name}]:\n        Internal Error: contextual ref is not a RefObject! Please report this bug immediately, as contextual refs should be RefObjects.\n      `);\n        }\n    }\n}\n"],"names":["useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","layoutRef","useTreeItemContext_unstable","ctx","selectionMode","useTreeContext_unstable","isActionsVisibleFromProps","onActionVisibilityChange","isResolvedShorthand","actions","visible","onVisibilityChange","undefined","isActionsVisible","setIsActionsVisible","useControllableState","state","initialState","selectionRef","expandIconRef","actionsRef","actionsRefInternal","React","useRef","treeItemRef","subtreeRef","checked","isBranch","itemType","assertIsRefObject","setActionsVisibleIfNotFromSubtree","useCallback","event","isTargetFromSubtree","Boolean","current","elementContains","target","type","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","expandIcon","slot","optional","renderByDefault","defaultProps","children","createElement","TreeItemChevron","elementType","expandIconRefs","useMergedRefs","arrowNavigationProps","useArrowNavigationGroup","circular","axis","role","actionsRefs","handleActionsBlur","useEventCallback","_props_actions_onBlur","_props_actions","onBlur","call","currentTarget","hasActions","useEffect","treeItemElement","handleMouseOver","handleMouseOut","handleFocus","handleBlur","addEventListener","removeEventListener","components","root","aside","selector","Checkbox","Radio","buttonContextValue","size","always","getIntrinsicElementProps","tabIndex","process","env","NODE_ENV","Error","name"],"mappings":"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"}

package/lib-commonjs/hooks/useControllableOpenItems.js

@@ -26,7 +26,7 @@ function useControllableOpenItems(props) {
         state: _react.useMemo(()=>props.openItems && (0, _createOpenItems.createOpenItems)(props.openItems), [
             props.openItems
         ]),
-        defaultState: ()=>(0, _createOpenItems.createOpenItems)(props.defaultOpenItems),
+        defaultState: props.defaultOpenItems && (()=>(0, _createOpenItems.createOpenItems)(props.defaultOpenItems)),
         initialState: _ImmutableSet.ImmutableSet.empty
     });
 }

package/lib-commonjs/hooks/useControllableOpenItems.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useControllableOpenItems.js"],"sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { createOpenItems } from '../utils/createOpenItems';\n/**\n * @internal\n */ export function useControllableOpenItems(props) {\n    return useControllableState({\n        state: React.useMemo(()=>props.openItems && createOpenItems(props.openItems), [\n            props.openItems\n        ]),\n        defaultState: ()=>createOpenItems(props.defaultOpenItems),\n        initialState: ImmutableSet.empty\n    });\n}\n/**\n * @internal\n */ export function createNextOpenItems(data, previousOpenItems) {\n    if (data.value === null) {\n        return previousOpenItems;\n    }\n    const previousOpenItemsHasId = previousOpenItems.has(data.value);\n    if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {\n        return previousOpenItems;\n    }\n    const nextOpenItems = ImmutableSet.create(previousOpenItems);\n    return data.open ? nextOpenItems.add(data.value) : nextOpenItems.delete(data.value);\n}\n"],"names":["useControllableOpenItems","createNextOpenItems","props","useControllableState","state","React","useMemo","openItems","createOpenItems","defaultState","defaultOpenItems","initialState","ImmutableSet","empty","data","previousOpenItems","value","previousOpenItemsHasId","has","open","nextOpenItems","create","add","delete"],"mappings":";;;;;;;;;;;IAMoBA,wBAAwB;eAAxBA;;IAWAC,mBAAmB;eAAnBA;;;;gCAjBiB;iEACd;8BACM;iCACG;AAGrB,SAASD,yBAAyBE,KAAK;IAC9C,OAAOC,IAAAA,oCAAoB,EAAC;QACxBC,OAAOC,OAAMC,OAAO,CAAC,IAAIJ,MAAMK,SAAS,IAAIC,IAAAA,gCAAe,EAACN,MAAMK,SAAS,GAAG;YAC1EL,MAAMK,SAAS;SAClB;QACDE,cAAc,IAAID,IAAAA,gCAAe,EAACN,MAAMQ,gBAAgB;QACxDC,cAAcC,0BAAY,CAACC,KAAK;IACpC;AACJ;AAGW,SAASZ,oBAAoBa,IAAI,EAAEC,iBAAiB;IAC3D,IAAID,KAAKE,KAAK,KAAK,MAAM;QACrB,OAAOD;IACX;IACA,MAAME,yBAAyBF,kBAAkBG,GAAG,CAACJ,KAAKE,KAAK;IAC/D,IAAIF,KAAKK,IAAI,GAAGF,yBAAyB,CAACA,wBAAwB;QAC9D,OAAOF;IACX;IACA,MAAMK,gBAAgBR,0BAAY,CAACS,MAAM,CAACN;IAC1C,OAAOD,KAAKK,IAAI,GAAGC,cAAcE,GAAG,CAACR,KAAKE,KAAK,IAAII,cAAcG,MAAM,CAACT,KAAKE,KAAK;AACtF"}
+{"version":3,"sources":["useControllableOpenItems.js"],"sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { createOpenItems } from '../utils/createOpenItems';\n/**\n * @internal\n */ export function useControllableOpenItems(props) {\n    return useControllableState({\n        state: React.useMemo(()=>props.openItems && createOpenItems(props.openItems), [\n            props.openItems\n        ]),\n        defaultState: props.defaultOpenItems && (()=>createOpenItems(props.defaultOpenItems)),\n        initialState: ImmutableSet.empty\n    });\n}\n/**\n * @internal\n */ export function createNextOpenItems(data, previousOpenItems) {\n    if (data.value === null) {\n        return previousOpenItems;\n    }\n    const previousOpenItemsHasId = previousOpenItems.has(data.value);\n    if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {\n        return previousOpenItems;\n    }\n    const nextOpenItems = ImmutableSet.create(previousOpenItems);\n    return data.open ? nextOpenItems.add(data.value) : nextOpenItems.delete(data.value);\n}\n"],"names":["useControllableOpenItems","createNextOpenItems","props","useControllableState","state","React","useMemo","openItems","createOpenItems","defaultState","defaultOpenItems","initialState","ImmutableSet","empty","data","previousOpenItems","value","previousOpenItemsHasId","has","open","nextOpenItems","create","add","delete"],"mappings":";;;;;;;;;;;IAMoBA,wBAAwB;eAAxBA;;IAWAC,mBAAmB;eAAnBA;;;;gCAjBiB;iEACd;8BACM;iCACG;AAGrB,SAASD,yBAAyBE,KAAK;IAC9C,OAAOC,IAAAA,oCAAoB,EAAC;QACxBC,OAAOC,OAAMC,OAAO,CAAC,IAAIJ,MAAMK,SAAS,IAAIC,IAAAA,gCAAe,EAACN,MAAMK,SAAS,GAAG;YAC1EL,MAAMK,SAAS;SAClB;QACDE,cAAcP,MAAMQ,gBAAgB,IAAK,CAAA,IAAIF,IAAAA,gCAAe,EAACN,MAAMQ,gBAAgB,CAAA;QACnFC,cAAcC,0BAAY,CAACC,KAAK;IACpC;AACJ;AAGW,SAASZ,oBAAoBa,IAAI,EAAEC,iBAAiB;IAC3D,IAAID,KAAKE,KAAK,KAAK,MAAM;QACrB,OAAOD;IACX;IACA,MAAME,yBAAyBF,kBAAkBG,GAAG,CAACJ,KAAKE,KAAK;IAC/D,IAAIF,KAAKK,IAAI,GAAGF,yBAAyB,CAACA,wBAAwB;QAC9D,OAAOF;IACX;IACA,MAAMK,gBAAgBR,0BAAY,CAACS,MAAM,CAACN;IAC1C,OAAOD,KAAKK,IAAI,GAAGC,cAAcE,GAAG,CAACR,KAAKE,KAAK,IAAII,cAAcG,MAAM,CAACT,KAAKE,KAAK;AACtF"}

package/lib-commonjs/hooks/useRootTree.js

@@ -44,7 +44,14 @@ function useRootTree(props, ref) {
     };
     const requestNavigation = (request)=>{
         var _props_onNavigation;
-        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, request.event, request);
+        let isScrollPrevented = false;
+        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, request.event, {
+            ...request,
+            preventScroll: ()=>{
+                isScrollPrevented = true;
+            },
+            isScrollPrevented: ()=>isScrollPrevented
+        });
         switch(request.type){
             case _tokens.treeDataTypes.ArrowDown:
             case _tokens.treeDataTypes.ArrowUp:

package/lib-commonjs/hooks/useRootTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRootTree.js"],"sourcesContent":["import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\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 */ export function useRootTree(props, ref) {\n    warnIfNoProperPropsRootTree(props);\n    const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n    const openItems = React.useMemo(()=>createOpenItems(props.openItems), [\n        props.openItems\n    ]);\n    const checkedItems = React.useMemo(()=>createCheckedItems(props.checkedItems), [\n        props.checkedItems\n    ]);\n    const requestOpenChange = (request)=>{\n        var _props_onOpenChange;\n        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, request.event, {\n            ...request,\n            openItems: createNextOpenItems(request, openItems).dangerouslyGetInternalSet_unstable()\n        });\n    };\n    const requestCheckedChange = (request)=>{\n        var _props_onCheckedChange;\n        if (selectionMode === 'none') {\n            return;\n        }\n        (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, request.event, {\n            ...request,\n            selectionMode,\n            checkedItems: checkedItems.dangerouslyGetInternalMap_unstable()\n        });\n    };\n    const requestNavigation = (request)=>{\n        var _props_onNavigation;\n        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, request.event, request);\n        switch(request.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                request.event.preventDefault();\n        }\n    };\n    const requestTreeResponse = useEventCallback((request)=>{\n        switch(request.requestType){\n            case 'navigate':\n                return requestNavigation(request);\n            case 'open':\n                return requestOpenChange(request);\n            case 'selection':\n                return requestCheckedChange(request);\n        }\n    });\n    return {\n        components: {\n            root: 'div'\n        },\n        contextType: 'root',\n        selectionMode,\n        open: true,\n        appearance,\n        size,\n        level: 1,\n        openItems,\n        checkedItems,\n        requestTreeResponse,\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: ref,\n            role: 'tree',\n            'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n}\nfunction warnIfNoProperPropsRootTree(props) {\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(`@fluentui/react-tree [useRootTree]:\nTree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined`);\n        }\n    }\n}\n"],"names":["useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","React","useMemo","createOpenItems","checkedItems","createCheckedItems","requestOpenChange","request","_props_onOpenChange","onOpenChange","call","event","createNextOpenItems","dangerouslyGetInternalSet_unstable","requestCheckedChange","_props_onCheckedChange","onCheckedChange","dangerouslyGetInternalMap_unstable","requestNavigation","_props_onNavigation","onNavigation","type","treeDataTypes","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","useEventCallback","requestType","components","root","contextType","open","level","slot","always","getIntrinsicElementProps","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":";;;;+BAWoBA;;;eAAAA;;;;gCAX6C;iEAC1C;iCACS;oCACG;wBACL;0CACM;AAMzB,SAASA,YAAYC,KAAK,EAAEC,GAAG;IACtCC,4BAA4BF;IAC5B,MAAM,EAAEG,aAAa,QAAQ,EAAEC,OAAO,QAAQ,EAAEC,gBAAgB,MAAM,EAAE,GAAGL;IAC3E,MAAMM,YAAYC,OAAMC,OAAO,CAAC,IAAIC,IAAAA,gCAAe,EAACT,MAAMM,SAAS,GAAG;QAClEN,MAAMM,SAAS;KAClB;IACD,MAAMI,eAAeH,OAAMC,OAAO,CAAC,IAAIG,IAAAA,sCAAkB,EAACX,MAAMU,YAAY,GAAG;QAC3EV,MAAMU,YAAY;KACrB;IACD,MAAME,oBAAoB,CAACC;QACvB,IAAIC;QACHA,CAAAA,sBAAsBd,MAAMe,YAAY,AAAD,MAAO,QAAQD,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBE,IAAI,CAAChB,OAAOa,QAAQI,KAAK,EAAE;YAC5I,GAAGJ,OAAO;YACVP,WAAWY,IAAAA,6CAAmB,EAACL,SAASP,WAAWa,kCAAkC;QACzF;IACJ;IACA,MAAMC,uBAAuB,CAACP;QAC1B,IAAIQ;QACJ,IAAIhB,kBAAkB,QAAQ;YAC1B;QACJ;QACCgB,CAAAA,yBAAyBrB,MAAMsB,eAAe,AAAD,MAAO,QAAQD,2BAA2B,KAAK,IAAI,KAAK,IAAIA,uBAAuBL,IAAI,CAAChB,OAAOa,QAAQI,KAAK,EAAE;YACxJ,GAAGJ,OAAO;YACVR;YACAK,cAAcA,aAAaa,kCAAkC;QACjE;IACJ;IACA,MAAMC,oBAAoB,CAACX;QACvB,IAAIY;QACHA,CAAAA,sBAAsBzB,MAAM0B,YAAY,AAAD,MAAO,QAAQD,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBT,IAAI,CAAChB,OAAOa,QAAQI,KAAK,EAAEJ;QAChJ,OAAOA,QAAQc,IAAI;YACf,KAAKC,qBAAa,CAACC,SAAS;YAC5B,KAAKD,qBAAa,CAACE,OAAO;YAC1B,KAAKF,qBAAa,CAACG,IAAI;YACvB,KAAKH,qBAAa,CAACI,GAAG;gBAClB,yCAAyC;gBACzC,8BAA8B;gBAC9BnB,QAAQI,KAAK,CAACgB,cAAc;QACpC;IACJ;IACA,MAAMC,sBAAsBC,IAAAA,gCAAgB,EAAC,CAACtB;QAC1C,OAAOA,QAAQuB,WAAW;YACtB,KAAK;gBACD,OAAOZ,kBAAkBX;YAC7B,KAAK;gBACD,OAAOD,kBAAkBC;YAC7B,KAAK;gBACD,OAAOO,qBAAqBP;QACpC;IACJ;IACA,OAAO;QACHwB,YAAY;YACRC,MAAM;QACV;QACAC,aAAa;QACblC;QACAmC,MAAM;QACNrC;QACAC;QACAqC,OAAO;QACPnC;QACAI;QACAwB;QACAI,MAAMI,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5F3C,KAAKA;YACL4C,MAAM;YACN,wBAAwBxC,kBAAkB,gBAAgB,OAAOyC;YACjE,GAAG9C,KAAK;QACZ,IAAI;YACA+C,aAAa;QACjB;IACJ;AACJ;AACA,SAAS7C,4BAA4BF,KAAK;IACtC,IAAIgD,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACxC,IAAI,CAAClD,KAAK,CAAC,aAAa,IAAI,CAACA,KAAK,CAAC,kBAAkB,EAAE;YACnD,sCAAsC;YACtCmD,QAAQC,IAAI,CAAC,CAAC;8EACoD,CAAC;QACvE;IACJ;AACJ"}
+{"version":3,"sources":["useRootTree.js"],"sourcesContent":["import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\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 */ export function useRootTree(props, ref) {\n    warnIfNoProperPropsRootTree(props);\n    const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n    const openItems = React.useMemo(()=>createOpenItems(props.openItems), [\n        props.openItems\n    ]);\n    const checkedItems = React.useMemo(()=>createCheckedItems(props.checkedItems), [\n        props.checkedItems\n    ]);\n    const requestOpenChange = (request)=>{\n        var _props_onOpenChange;\n        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, request.event, {\n            ...request,\n            openItems: createNextOpenItems(request, openItems).dangerouslyGetInternalSet_unstable()\n        });\n    };\n    const requestCheckedChange = (request)=>{\n        var _props_onCheckedChange;\n        if (selectionMode === 'none') {\n            return;\n        }\n        (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, request.event, {\n            ...request,\n            selectionMode,\n            checkedItems: checkedItems.dangerouslyGetInternalMap_unstable()\n        });\n    };\n    const requestNavigation = (request)=>{\n        var _props_onNavigation;\n        let isScrollPrevented = false;\n        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, request.event, {\n            ...request,\n            preventScroll: ()=>{\n                isScrollPrevented = true;\n            },\n            isScrollPrevented: ()=>isScrollPrevented\n        });\n        switch(request.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                request.event.preventDefault();\n        }\n    };\n    const requestTreeResponse = useEventCallback((request)=>{\n        switch(request.requestType){\n            case 'navigate':\n                return requestNavigation(request);\n            case 'open':\n                return requestOpenChange(request);\n            case 'selection':\n                return requestCheckedChange(request);\n        }\n    });\n    return {\n        components: {\n            root: 'div'\n        },\n        contextType: 'root',\n        selectionMode,\n        open: true,\n        appearance,\n        size,\n        level: 1,\n        openItems,\n        checkedItems,\n        requestTreeResponse,\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: ref,\n            role: 'tree',\n            'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n}\nfunction warnIfNoProperPropsRootTree(props) {\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(`@fluentui/react-tree [useRootTree]:\nTree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined`);\n        }\n    }\n}\n"],"names":["useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","React","useMemo","createOpenItems","checkedItems","createCheckedItems","requestOpenChange","request","_props_onOpenChange","onOpenChange","call","event","createNextOpenItems","dangerouslyGetInternalSet_unstable","requestCheckedChange","_props_onCheckedChange","onCheckedChange","dangerouslyGetInternalMap_unstable","requestNavigation","_props_onNavigation","isScrollPrevented","onNavigation","preventScroll","type","treeDataTypes","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","useEventCallback","requestType","components","root","contextType","open","level","slot","always","getIntrinsicElementProps","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":"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"}

package/lib-commonjs/hooks/useRovingTabIndexes.js

@@ -13,8 +13,13 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reacttabster = require("@fluentui/react-tabster");
 const _reactutilities = require("@fluentui/react-utilities");
 function useRovingTabIndex() {
-    const currentElementRef = _react.useRef();
+    const currentElementRef = _react.useRef(null);
     const walkerRef = _react.useRef(null);
+    _react.useEffect(()=>{
+        if (currentElementRef.current === null && walkerRef.current) {
+            initialize(walkerRef.current);
+        }
+    });
     (0, _reacttabster.useFocusedElementChange)((element)=>{
         if ((element === null || element === void 0 ? void 0 : element.getAttribute('role')) === 'treeitem' && walkerRef.current && (0, _reactutilities.elementContains)(walkerRef.current.root, element)) {
             rove(element);
@@ -36,13 +41,13 @@ function useRovingTabIndex() {
             nextElement.tabIndex = -1;
         }
     }, []);
-    const rove = _react.useCallback((nextElement)=>{
+    const rove = _react.useCallback((nextElement, focusOptions)=>{
         if (!currentElementRef.current) {
             return;
         }
         currentElementRef.current.tabIndex = -1;
         nextElement.tabIndex = 0;
-        nextElement.focus();
+        nextElement.focus(focusOptions);
         currentElementRef.current = nextElement;
     }, []);
     return {

package/lib-commonjs/hooks/useRovingTabIndexes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRovingTabIndexes.js"],"sourcesContent":["import * as React from 'react';\nimport { useFocusedElementChange } from '@fluentui/react-tabster';\nimport { elementContains } from '@fluentui/react-utilities';\n/**\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n */ export function useRovingTabIndex() {\n    const currentElementRef = React.useRef();\n    const walkerRef = React.useRef(null);\n    useFocusedElementChange((element)=>{\n        if ((element === null || element === void 0 ? void 0 : element.getAttribute('role')) === 'treeitem' && walkerRef.current && elementContains(walkerRef.current.root, element)) {\n            rove(element);\n        }\n    });\n    const initialize = React.useCallback((walker)=>{\n        walkerRef.current = walker;\n        walker.currentElement = walker.root;\n        let tabbableChild = walker.firstChild((element)=>element.tabIndex === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP);\n        walker.currentElement = walker.root;\n        tabbableChild !== null && tabbableChild !== void 0 ? tabbableChild : tabbableChild = walker.firstChild();\n        if (!tabbableChild) {\n            return;\n        }\n        tabbableChild.tabIndex = 0;\n        currentElementRef.current = tabbableChild;\n        let nextElement = null;\n        while((nextElement = walker.nextElement()) && nextElement !== tabbableChild){\n            nextElement.tabIndex = -1;\n        }\n    }, []);\n    const rove = React.useCallback((nextElement)=>{\n        if (!currentElementRef.current) {\n            return;\n        }\n        currentElementRef.current.tabIndex = -1;\n        nextElement.tabIndex = 0;\n        nextElement.focus();\n        currentElementRef.current = nextElement;\n    }, []);\n    return {\n        rove,\n        initialize\n    };\n}\n"],"names":["useRovingTabIndex","currentElementRef","React","useRef","walkerRef","useFocusedElementChange","element","getAttribute","current","elementContains","root","rove","initialize","useCallback","walker","currentElement","tabbableChild","firstChild","tabIndex","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","nextElement","focus"],"mappings":";;;;+BAKoBA;;;eAAAA;;;;iEALG;8BACiB;gCACR;AAGrB,SAASA;IAChB,MAAMC,oBAAoBC,OAAMC,MAAM;IACtC,MAAMC,YAAYF,OAAMC,MAAM,CAAC;IAC/BE,IAAAA,qCAAuB,EAAC,CAACC;QACrB,IAAI,AAACA,CAAAA,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQC,YAAY,CAAC,OAAM,MAAO,cAAcH,UAAUI,OAAO,IAAIC,IAAAA,+BAAe,EAACL,UAAUI,OAAO,CAACE,IAAI,EAAEJ,UAAU;YAC1KK,KAAKL;QACT;IACJ;IACA,MAAMM,aAAaV,OAAMW,WAAW,CAAC,CAACC;QAClCV,UAAUI,OAAO,GAAGM;QACpBA,OAAOC,cAAc,GAAGD,OAAOJ,IAAI;QACnC,IAAIM,gBAAgBF,OAAOG,UAAU,CAAC,CAACX,UAAUA,QAAQY,QAAQ,KAAK,IAAIC,WAAWC,aAAa,GAAGD,WAAWE,WAAW;QAC3HP,OAAOC,cAAc,GAAGD,OAAOJ,IAAI;QACnCM,kBAAkB,QAAQA,kBAAkB,KAAK,IAAIA,gBAAgBA,gBAAgBF,OAAOG,UAAU;QACtG,IAAI,CAACD,eAAe;YAChB;QACJ;QACAA,cAAcE,QAAQ,GAAG;QACzBjB,kBAAkBO,OAAO,GAAGQ;QAC5B,IAAIM,cAAc;QAClB,MAAM,AAACA,CAAAA,cAAcR,OAAOQ,WAAW,EAAC,KAAMA,gBAAgBN,cAAc;YACxEM,YAAYJ,QAAQ,GAAG,CAAC;QAC5B;IACJ,GAAG,EAAE;IACL,MAAMP,OAAOT,OAAMW,WAAW,CAAC,CAACS;QAC5B,IAAI,CAACrB,kBAAkBO,OAAO,EAAE;YAC5B;QACJ;QACAP,kBAAkBO,OAAO,CAACU,QAAQ,GAAG,CAAC;QACtCI,YAAYJ,QAAQ,GAAG;QACvBI,YAAYC,KAAK;QACjBtB,kBAAkBO,OAAO,GAAGc;IAChC,GAAG,EAAE;IACL,OAAO;QACHX;QACAC;IACJ;AACJ"}
+{"version":3,"sources":["useRovingTabIndexes.js"],"sourcesContent":["import * as React from 'react';\nimport { useFocusedElementChange } from '@fluentui/react-tabster';\nimport { elementContains } from '@fluentui/react-utilities';\n/**\n * @internal\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n */ export function useRovingTabIndex() {\n    const currentElementRef = React.useRef(null);\n    const walkerRef = React.useRef(null);\n    React.useEffect(()=>{\n        if (currentElementRef.current === null && walkerRef.current) {\n            initialize(walkerRef.current);\n        }\n    });\n    useFocusedElementChange((element)=>{\n        if ((element === null || element === void 0 ? void 0 : element.getAttribute('role')) === 'treeitem' && walkerRef.current && elementContains(walkerRef.current.root, element)) {\n            rove(element);\n        }\n    });\n    const initialize = React.useCallback((walker)=>{\n        walkerRef.current = walker;\n        walker.currentElement = walker.root;\n        let tabbableChild = walker.firstChild((element)=>element.tabIndex === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP);\n        walker.currentElement = walker.root;\n        tabbableChild !== null && tabbableChild !== void 0 ? tabbableChild : tabbableChild = walker.firstChild();\n        if (!tabbableChild) {\n            return;\n        }\n        tabbableChild.tabIndex = 0;\n        currentElementRef.current = tabbableChild;\n        let nextElement = null;\n        while((nextElement = walker.nextElement()) && nextElement !== tabbableChild){\n            nextElement.tabIndex = -1;\n        }\n    }, []);\n    const rove = React.useCallback((nextElement, focusOptions)=>{\n        if (!currentElementRef.current) {\n            return;\n        }\n        currentElementRef.current.tabIndex = -1;\n        nextElement.tabIndex = 0;\n        nextElement.focus(focusOptions);\n        currentElementRef.current = nextElement;\n    }, []);\n    return {\n        rove,\n        initialize\n    };\n}\n"],"names":["useRovingTabIndex","currentElementRef","React","useRef","walkerRef","useEffect","current","initialize","useFocusedElementChange","element","getAttribute","elementContains","root","rove","useCallback","walker","currentElement","tabbableChild","firstChild","tabIndex","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","nextElement","focusOptions","focus"],"mappings":";;;;+BAMoBA;;;eAAAA;;;;iEANG;8BACiB;gCACR;AAIrB,SAASA;IAChB,MAAMC,oBAAoBC,OAAMC,MAAM,CAAC;IACvC,MAAMC,YAAYF,OAAMC,MAAM,CAAC;IAC/BD,OAAMG,SAAS,CAAC;QACZ,IAAIJ,kBAAkBK,OAAO,KAAK,QAAQF,UAAUE,OAAO,EAAE;YACzDC,WAAWH,UAAUE,OAAO;QAChC;IACJ;IACAE,IAAAA,qCAAuB,EAAC,CAACC;QACrB,IAAI,AAACA,CAAAA,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQC,YAAY,CAAC,OAAM,MAAO,cAAcN,UAAUE,OAAO,IAAIK,IAAAA,+BAAe,EAACP,UAAUE,OAAO,CAACM,IAAI,EAAEH,UAAU;YAC1KI,KAAKJ;QACT;IACJ;IACA,MAAMF,aAAaL,OAAMY,WAAW,CAAC,CAACC;QAClCX,UAAUE,OAAO,GAAGS;QACpBA,OAAOC,cAAc,GAAGD,OAAOH,IAAI;QACnC,IAAIK,gBAAgBF,OAAOG,UAAU,CAAC,CAACT,UAAUA,QAAQU,QAAQ,KAAK,IAAIC,WAAWC,aAAa,GAAGD,WAAWE,WAAW;QAC3HP,OAAOC,cAAc,GAAGD,OAAOH,IAAI;QACnCK,kBAAkB,QAAQA,kBAAkB,KAAK,IAAIA,gBAAgBA,gBAAgBF,OAAOG,UAAU;QACtG,IAAI,CAACD,eAAe;YAChB;QACJ;QACAA,cAAcE,QAAQ,GAAG;QACzBlB,kBAAkBK,OAAO,GAAGW;QAC5B,IAAIM,cAAc;QAClB,MAAM,AAACA,CAAAA,cAAcR,OAAOQ,WAAW,EAAC,KAAMA,gBAAgBN,cAAc;YACxEM,YAAYJ,QAAQ,GAAG,CAAC;QAC5B;IACJ,GAAG,EAAE;IACL,MAAMN,OAAOX,OAAMY,WAAW,CAAC,CAACS,aAAaC;QACzC,IAAI,CAACvB,kBAAkBK,OAAO,EAAE;YAC5B;QACJ;QACAL,kBAAkBK,OAAO,CAACa,QAAQ,GAAG,CAAC;QACtCI,YAAYJ,QAAQ,GAAG;QACvBI,YAAYE,KAAK,CAACD;QAClBvB,kBAAkBK,OAAO,GAAGiB;IAChC,GAAG,EAAE;IACL,OAAO;QACHV;QACAN;IACJ;AACJ"}

package/lib-commonjs/hooks/useTreeNavigation.js

@@ -56,15 +56,15 @@ function useTreeNavigation() {
                 return walkerRef.current.previousElement();
         }
     };
-    function navigate(data) {
+    function navigate(data, focusOptions) {
         const nextElement = getNextElement(data);
         if (nextElement) {
-            rove(nextElement);
+            rove(nextElement, focusOptions);
         }
     }
     return {
         navigate,
-        rootRef: (0, _reactutilities.useMergedRefs)(walkerRootRef, rootRefCallback)
+        treeRef: (0, _reactutilities.useMergedRefs)(walkerRootRef, rootRefCallback)
     };
 }
 function lastChildRecursive(walker) {

package/lib-commonjs/hooks/useTreeNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeNavigation.js"],"sourcesContent":["import { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nexport function useTreeNavigation() {\n    const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();\n    const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n    const rootRefCallback = React.useCallback((root)=>{\n        if (root && walkerRef.current) {\n            initializeRovingTabIndex(walkerRef.current);\n        }\n    }, [\n        walkerRef,\n        initializeRovingTabIndex\n    ]);\n    const getNextElement = (data)=>{\n        if (!walkerRef.current) {\n            return null;\n        }\n        switch(data.type){\n            case treeDataTypes.Click:\n                return data.target;\n            case treeDataTypes.TypeAhead:\n                walkerRef.current.currentElement = data.target;\n                return nextTypeAheadElement(walkerRef.current, data.event.key);\n            case treeDataTypes.ArrowLeft:\n                walkerRef.current.currentElement = data.target;\n                return walkerRef.current.parentElement();\n            case treeDataTypes.ArrowRight:\n                walkerRef.current.currentElement = data.target;\n                return walkerRef.current.firstChild();\n            case treeDataTypes.End:\n                walkerRef.current.currentElement = walkerRef.current.root;\n                return lastChildRecursive(walkerRef.current);\n            case treeDataTypes.Home:\n                walkerRef.current.currentElement = walkerRef.current.root;\n                return walkerRef.current.firstChild();\n            case treeDataTypes.ArrowDown:\n                walkerRef.current.currentElement = data.target;\n                return walkerRef.current.nextElement();\n            case treeDataTypes.ArrowUp:\n                walkerRef.current.currentElement = data.target;\n                return walkerRef.current.previousElement();\n        }\n    };\n    function navigate(data) {\n        const nextElement = getNextElement(data);\n        if (nextElement) {\n            rove(nextElement);\n        }\n    }\n    return {\n        navigate,\n        rootRef: useMergedRefs(walkerRootRef, rootRefCallback)\n    };\n}\nfunction lastChildRecursive(walker) {\n    let lastElement = null;\n    let nextElement = null;\n    while(nextElement = walker.lastChild()){\n        lastElement = nextElement;\n    }\n    return lastElement;\n}\n"],"names":["useTreeNavigation","rove","initialize","initializeRovingTabIndex","useRovingTabIndex","walkerRef","rootRef","walkerRootRef","useHTMLElementWalkerRef","rootRefCallback","React","useCallback","root","current","getNextElement","data","type","treeDataTypes","Click","target","TypeAhead","currentElement","nextTypeAheadElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","useMergedRefs","walker","lastElement","lastChild"],"mappings":";;;;+BAMgBA;;;eAAAA;;;;sCANqB;wBACP;qCACI;iEACX;yCACiB;gCACV;AACvB,SAASA;IACZ,MAAM,EAAEC,IAAI,EAAEC,YAAYC,wBAAwB,EAAE,GAAGC,IAAAA,sCAAiB;IACxE,MAAM,EAAEC,SAAS,EAAEC,SAASC,aAAa,EAAE,GAAGC,IAAAA,gDAAuB;IACrE,MAAMC,kBAAkBC,OAAMC,WAAW,CAAC,CAACC;QACvC,IAAIA,QAAQP,UAAUQ,OAAO,EAAE;YAC3BV,yBAAyBE,UAAUQ,OAAO;QAC9C;IACJ,GAAG;QACCR;QACAF;KACH;IACD,MAAMW,iBAAiB,CAACC;QACpB,IAAI,CAACV,UAAUQ,OAAO,EAAE;YACpB,OAAO;QACX;QACA,OAAOE,KAAKC,IAAI;YACZ,KAAKC,qBAAa,CAACC,KAAK;gBACpB,OAAOH,KAAKI,MAAM;YACtB,KAAKF,qBAAa,CAACG,SAAS;gBACxBf,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOG,IAAAA,0CAAoB,EAACjB,UAAUQ,OAAO,EAAEE,KAAKQ,KAAK,CAACC,GAAG;YACjE,KAAKP,qBAAa,CAACQ,SAAS;gBACxBpB,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACa,aAAa;YAC1C,KAAKT,qBAAa,CAACU,UAAU;gBACzBtB,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACe,UAAU;YACvC,KAAKX,qBAAa,CAACY,GAAG;gBAClBxB,UAAUQ,OAAO,CAACQ,cAAc,GAAGhB,UAAUQ,OAAO,CAACD,IAAI;gBACzD,OAAOkB,mBAAmBzB,UAAUQ,OAAO;YAC/C,KAAKI,qBAAa,CAACc,IAAI;gBACnB1B,UAAUQ,OAAO,CAACQ,cAAc,GAAGhB,UAAUQ,OAAO,CAACD,IAAI;gBACzD,OAAOP,UAAUQ,OAAO,CAACe,UAAU;YACvC,KAAKX,qBAAa,CAACe,SAAS;gBACxB3B,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACoB,WAAW;YACxC,KAAKhB,qBAAa,CAACiB,OAAO;gBACtB7B,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACsB,eAAe;QAChD;IACJ;IACA,SAASC,SAASrB,IAAI;QAClB,MAAMkB,cAAcnB,eAAeC;QACnC,IAAIkB,aAAa;YACbhC,KAAKgC;QACT;IACJ;IACA,OAAO;QACHG;QACA9B,SAAS+B,IAAAA,6BAAa,EAAC9B,eAAeE;IAC1C;AACJ;AACA,SAASqB,mBAAmBQ,MAAM;IAC9B,IAAIC,cAAc;IAClB,IAAIN,cAAc;IAClB,MAAMA,cAAcK,OAAOE,SAAS,GAAG;QACnCD,cAAcN;IAClB;IACA,OAAOM;AACX"}
+{"version":3,"sources":["useTreeNavigation.js"],"sourcesContent":["import { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n/**\n * @internal\n */ export function useTreeNavigation() {\n    const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();\n    const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n    const rootRefCallback = React.useCallback((root)=>{\n        if (root && walkerRef.current) {\n            initializeRovingTabIndex(walkerRef.current);\n        }\n    }, [\n        walkerRef,\n        initializeRovingTabIndex\n    ]);\n    const getNextElement = (data)=>{\n        if (!walkerRef.current) {\n            return null;\n        }\n        switch(data.type){\n            case treeDataTypes.Click:\n                return data.target;\n            case treeDataTypes.TypeAhead:\n                walkerRef.current.currentElement = data.target;\n                return nextTypeAheadElement(walkerRef.current, data.event.key);\n            case treeDataTypes.ArrowLeft:\n                walkerRef.current.currentElement = data.target;\n                return walkerRef.current.parentElement();\n            case treeDataTypes.ArrowRight:\n                walkerRef.current.currentElement = data.target;\n                return walkerRef.current.firstChild();\n            case treeDataTypes.End:\n                walkerRef.current.currentElement = walkerRef.current.root;\n                return lastChildRecursive(walkerRef.current);\n            case treeDataTypes.Home:\n                walkerRef.current.currentElement = walkerRef.current.root;\n                return walkerRef.current.firstChild();\n            case treeDataTypes.ArrowDown:\n                walkerRef.current.currentElement = data.target;\n                return walkerRef.current.nextElement();\n            case treeDataTypes.ArrowUp:\n                walkerRef.current.currentElement = data.target;\n                return walkerRef.current.previousElement();\n        }\n    };\n    function navigate(data, focusOptions) {\n        const nextElement = getNextElement(data);\n        if (nextElement) {\n            rove(nextElement, focusOptions);\n        }\n    }\n    return {\n        navigate,\n        treeRef: useMergedRefs(walkerRootRef, rootRefCallback)\n    };\n}\nfunction lastChildRecursive(walker) {\n    let lastElement = null;\n    let nextElement = null;\n    while(nextElement = walker.lastChild()){\n        lastElement = nextElement;\n    }\n    return lastElement;\n}\n"],"names":["useTreeNavigation","rove","initialize","initializeRovingTabIndex","useRovingTabIndex","walkerRef","rootRef","walkerRootRef","useHTMLElementWalkerRef","rootRefCallback","React","useCallback","root","current","getNextElement","data","type","treeDataTypes","Click","target","TypeAhead","currentElement","nextTypeAheadElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","focusOptions","treeRef","useMergedRefs","walker","lastElement","lastChild"],"mappings":";;;;+BAQoBA;;;eAAAA;;;;sCARiB;wBACP;qCACI;iEACX;yCACiB;gCACV;AAGnB,SAASA;IAChB,MAAM,EAAEC,IAAI,EAAEC,YAAYC,wBAAwB,EAAE,GAAGC,IAAAA,sCAAiB;IACxE,MAAM,EAAEC,SAAS,EAAEC,SAASC,aAAa,EAAE,GAAGC,IAAAA,gDAAuB;IACrE,MAAMC,kBAAkBC,OAAMC,WAAW,CAAC,CAACC;QACvC,IAAIA,QAAQP,UAAUQ,OAAO,EAAE;YAC3BV,yBAAyBE,UAAUQ,OAAO;QAC9C;IACJ,GAAG;QACCR;QACAF;KACH;IACD,MAAMW,iBAAiB,CAACC;QACpB,IAAI,CAACV,UAAUQ,OAAO,EAAE;YACpB,OAAO;QACX;QACA,OAAOE,KAAKC,IAAI;YACZ,KAAKC,qBAAa,CAACC,KAAK;gBACpB,OAAOH,KAAKI,MAAM;YACtB,KAAKF,qBAAa,CAACG,SAAS;gBACxBf,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOG,IAAAA,0CAAoB,EAACjB,UAAUQ,OAAO,EAAEE,KAAKQ,KAAK,CAACC,GAAG;YACjE,KAAKP,qBAAa,CAACQ,SAAS;gBACxBpB,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACa,aAAa;YAC1C,KAAKT,qBAAa,CAACU,UAAU;gBACzBtB,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACe,UAAU;YACvC,KAAKX,qBAAa,CAACY,GAAG;gBAClBxB,UAAUQ,OAAO,CAACQ,cAAc,GAAGhB,UAAUQ,OAAO,CAACD,IAAI;gBACzD,OAAOkB,mBAAmBzB,UAAUQ,OAAO;YAC/C,KAAKI,qBAAa,CAACc,IAAI;gBACnB1B,UAAUQ,OAAO,CAACQ,cAAc,GAAGhB,UAAUQ,OAAO,CAACD,IAAI;gBACzD,OAAOP,UAAUQ,OAAO,CAACe,UAAU;YACvC,KAAKX,qBAAa,CAACe,SAAS;gBACxB3B,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACoB,WAAW;YACxC,KAAKhB,qBAAa,CAACiB,OAAO;gBACtB7B,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACsB,eAAe;QAChD;IACJ;IACA,SAASC,SAASrB,IAAI,EAAEsB,YAAY;QAChC,MAAMJ,cAAcnB,eAAeC;QACnC,IAAIkB,aAAa;YACbhC,KAAKgC,aAAaI;QACtB;IACJ;IACA,OAAO;QACHD;QACAE,SAASC,IAAAA,6BAAa,EAAChC,eAAeE;IAC1C;AACJ;AACA,SAASqB,mBAAmBU,MAAM;IAC9B,IAAIC,cAAc;IAClB,IAAIR,cAAc;IAClB,MAAMA,cAAcO,OAAOE,SAAS,GAAG;QACnCD,cAAcR;IAClB;IACA,OAAOQ;AACX"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tree",
-  "version": "9.5.1",
+  "version": "9.7.0",
   "description": "Tree component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -17,17 +17,14 @@
     "generate-api": "just-scripts generate-api",
     "lint": "just-scripts lint",
     "start": "yarn storybook",
-    "storybook": "start-storybook",
+    "storybook": "yarn --cwd ../stories storybook",
     "test": "jest --passWithNoTests",
-    "test-ssr": "test-ssr \"./stories/**/*.stories.tsx\"",
-    "type-check": "tsc -b tsconfig.json",
+    "type-check": "just-scripts type-check",
     "e2e": "cypress run --component",
     "e2e:local": "cypress open --component"
   },
   "devDependencies": {
-    "@dnd-kit/core": "^6.0.8",
-    "@dnd-kit/sortable": "^7.0.2",
-    "@dnd-kit/utilities": "^3.2.1",
+    "@fluentui/react-provider": "*",
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
     "@fluentui/react-conformance-griffel": "*",
@@ -37,18 +34,18 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-aria": "^9.11.4",
-    "@fluentui/react-avatar": "^9.6.28",
-    "@fluentui/react-button": "^9.3.82",
-    "@fluentui/react-checkbox": "^9.2.27",
-    "@fluentui/react-context-selector": "^9.1.60",
+    "@fluentui/react-aria": "^9.12.0",
+    "@fluentui/react-avatar": "^9.6.29",
+    "@fluentui/react-button": "^9.3.83",
+    "@fluentui/react-checkbox": "^9.2.28",
+    "@fluentui/react-context-selector": "^9.1.61",
     "@fluentui/react-icons": "^2.0.239",
-    "@fluentui/react-radio": "^9.2.22",
+    "@fluentui/react-radio": "^9.2.23",
     "@fluentui/react-shared-contexts": "^9.19.0",
-    "@fluentui/react-tabster": "^9.21.4",
+    "@fluentui/react-tabster": "^9.21.5",
     "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-utilities": "^9.18.9",
-    "@fluentui/react-jsx-runtime": "^9.0.38",
+    "@fluentui/react-utilities": "^9.18.10",
+    "@fluentui/react-jsx-runtime": "^9.0.39",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },