@fluentui/react-tree - npm Package Compare versions

Comparing version 0.0.0-nightly-20240909-0407.1 to 0.0.0-nightly-20240910-0407.1

dist/index.d.ts

@@ -415,2 +415,3 @@ /// <reference types="react" />
     requestTreeResponse(request: TreeItemRequest): void;
+    forceUpdateRovingTabIndex?(): void;
 };
@@ -417,0 +418,0 @@

lib-commonjs/components/FlatTree/useFlatTree.js

@@ -40,3 +40,4 @@ "use strict";
     }, (0, _reactutilities.useMergedRefs)(ref, navigation.rootRef)), {
-        treeType: 'flat'
+        treeType: 'flat',
+        forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex
     });
@@ -60,2 +61,3 @@ }
         requestTreeResponse: noop,
+        forceUpdateRovingTabIndex: noop,
         appearance: 'subtle',
@@ -62,0 +64,0 @@ size: 'medium',

lib-commonjs/components/FlatTree/useFlatTreeContextValues.js

@@ -12,3 +12,3 @@ "use strict";
 const useFlatTreeContextValues_unstable = (state)=>{
-    const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse } = state;
+    const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse, forceUpdateRovingTabIndex } = state;
     /**
@@ -26,3 +26,4 @@ * This context is created with "@fluentui/react-context-selector",
         level,
-        requestTreeResponse
+        requestTreeResponse,
+        forceUpdateRovingTabIndex
     };
@@ -29,0 +30,0 @@ return {

lib-commonjs/components/Tree/useTree.js

@@ -67,3 +67,4 @@ "use strict";
     }, (0, _reactutilities.useMergedRefs)(ref, navigation.treeRef)), {
-        treeType: 'nested'
+        treeType: 'nested',
+        forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex
     });
@@ -70,0 +71,0 @@ }

lib-commonjs/components/Tree/useTreeContextValues.js

@@ -16,3 +16,3 @@ "use strict";
     if (state.contextType === 'root') {
-        const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse } = state;
+        const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse, forceUpdateRovingTabIndex } = state;
         /**
@@ -30,3 +30,4 @@ * This context is created with "@fluentui/react-context-selector",
             level,
-            requestTreeResponse
+            requestTreeResponse,
+            forceUpdateRovingTabIndex
         };
@@ -33,0 +34,0 @@ return {

lib-commonjs/components/TreeItem/useTreeItem.js

@@ -28,2 +28,3 @@ "use strict";
     const requestTreeResponse = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.requestTreeResponse);
+    const forceUpdateRovingTabIndex = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.forceUpdateRovingTabIndex);
     const { level: contextLevel } = (0, _contexts.useSubtreeContext_unstable)();
@@ -65,2 +66,14 @@ const parentValue = (0, _contexts.useTreeItemContext_unstable)((ctx)=>{
     }
+    _react.useEffect(()=>{
+        const treeItem = treeItemRef.current;
+        return ()=>{
+            // When the tree item is unmounted, we need to update the roving tab index
+            // if the tree item is the current tab indexed item
+            if (treeItem && treeItem.tabIndex === 0) {
+                forceUpdateRovingTabIndex === null || forceUpdateRovingTabIndex === void 0 ? void 0 : forceUpdateRovingTabIndex();
+            }
+        };
+    }, [
+        forceUpdateRovingTabIndex
+    ]);
     const open = (0, _contexts.useTreeContext_unstable)((ctx)=>{
@@ -67,0 +80,0 @@ var _props_open;

lib-commonjs/contexts/treeContext.js

@@ -32,2 +32,3 @@ "use strict";
     requestTreeResponse: noop,
+    forceUpdateRovingTabIndex: noop,
     appearance: 'subtle',
@@ -34,0 +35,0 @@ size: 'medium'

lib-commonjs/hooks/useFlatTreeNavigation.js

@@ -22,3 +22,3 @@ "use strict";
     const { walkerRef, rootRef: walkerRootRef } = (0, _useHTMLElementWalkerRef.useHTMLElementWalkerRef)();
-    const { rove, initialize: initializeRovingTabIndex } = (0, _useRovingTabIndexes.useRovingTabIndex)();
+    const { rove, forceUpdate: forceUpdateRovingTabIndex, initialize: initializeRovingTabIndex } = (0, _useRovingTabIndexes.useRovingTabIndex)();
     const rootRefCallback = _react.useCallback((root)=>{
@@ -89,3 +89,4 @@ if (walkerRef.current && root) {
         navigate,
-        rootRef: (0, _reactutilities.useMergedRefs)(walkerRootRef, rootRefCallback)
+        rootRef: (0, _reactutilities.useMergedRefs)(walkerRootRef, rootRefCallback),
+        forceUpdateRovingTabIndex
     };
@@ -92,0 +93,0 @@ }

lib-commonjs/hooks/useRootTree.js

@@ -95,2 +95,5 @@ "use strict";
         requestTreeResponse,
+        forceUpdateRovingTabIndex: ()=>{
+        // noop
+        },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
@@ -97,0 +100,0 @@ // FIXME:

lib-commonjs/hooks/useRovingTabIndexes.js

@@ -20,7 +20,2 @@ "use strict";
     const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
-    _react.useEffect(()=>{
-        if ((currentElementRef.current === null || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body.contains(currentElementRef.current))) && walkerRef.current) {
-            initialize(walkerRef.current);
-        }
-    });
     (0, _reacttabster.useFocusedElementChange)((element)=>{
@@ -56,6 +51,15 @@ if ((element === null || element === void 0 ? void 0 : element.getAttribute('role')) === 'treeitem' && walkerRef.current && (0, _reactutilities.elementContains)(walkerRef.current.root, element)) {
     }, []);
+    const forceUpdate = _react.useCallback(()=>{
+        if ((currentElementRef.current === null || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body.contains(currentElementRef.current))) && walkerRef.current) {
+            initialize(walkerRef.current);
+        }
+    }, [
+        targetDocument,
+        initialize
+    ]);
     return {
         rove,
-        initialize
+        initialize,
+        forceUpdate
     };
 }

lib-commonjs/hooks/useTreeNavigation.js

@@ -20,3 +20,3 @@ "use strict";
     'use no memo';
-    const { rove, initialize: initializeRovingTabIndex } = (0, _useRovingTabIndexes.useRovingTabIndex)();
+    const { rove, initialize: initializeRovingTabIndex, forceUpdate: forceUpdateRovingTabIndex } = (0, _useRovingTabIndexes.useRovingTabIndex)();
     const { walkerRef, rootRef: walkerRootRef } = (0, _useHTMLElementWalkerRef.useHTMLElementWalkerRef)();
@@ -69,3 +69,4 @@ const rootRefCallback = _react.useCallback((root)=>{
         navigate,
-        treeRef: (0, _reactutilities.useMergedRefs)(walkerRootRef, rootRefCallback)
+        treeRef: (0, _reactutilities.useMergedRefs)(walkerRootRef, rootRefCallback),
+        forceUpdateRovingTabIndex
     };
@@ -72,0 +73,0 @@ }

lib/components/FlatTree/useFlatTree.js

@@ -29,3 +29,4 @@ import * as React from 'react';
     }, useMergedRefs(ref, navigation.rootRef)), {
-        treeType: 'flat'
+        treeType: 'flat',
+        forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex
     });
@@ -49,2 +50,3 @@ }
         requestTreeResponse: noop,
+        forceUpdateRovingTabIndex: noop,
         appearance: 'subtle',
@@ -51,0 +53,0 @@ size: 'medium',

lib/components/FlatTree/useFlatTreeContextValues.js

 export const useFlatTreeContextValues_unstable = (state)=>{
-    const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse } = state;
+    const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse, forceUpdateRovingTabIndex } = state;
     /**
@@ -15,3 +15,4 @@ * This context is created with "@fluentui/react-context-selector",
         level,
-        requestTreeResponse
+        requestTreeResponse,
+        forceUpdateRovingTabIndex
     };
@@ -18,0 +19,0 @@ return {

lib/components/Tree/useTree.js

@@ -56,3 +56,4 @@ import * as React from 'react';
     }, useMergedRefs(ref, navigation.treeRef)), {
-        treeType: 'nested'
+        treeType: 'nested',
+        forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex
     });
@@ -59,0 +60,0 @@ }

lib/components/Tree/useTreeContextValues.js

@@ -5,3 +5,3 @@ import * as React from 'react';
     if (state.contextType === 'root') {
-        const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse } = state;
+        const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse, forceUpdateRovingTabIndex } = state;
         /**
@@ -19,3 +19,4 @@ * This context is created with "@fluentui/react-context-selector",
             level,
-            requestTreeResponse
+            requestTreeResponse,
+            forceUpdateRovingTabIndex
         };
@@ -22,0 +23,0 @@ return {

lib/components/TreeItem/useTreeItem.js

@@ -25,2 +25,3 @@ import * as React from 'react';
     const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);
+    const forceUpdateRovingTabIndex = useTreeContext_unstable((ctx)=>ctx.forceUpdateRovingTabIndex);
     const { level: contextLevel } = useSubtreeContext_unstable();
@@ -62,2 +63,14 @@ const parentValue = useTreeItemContext_unstable((ctx)=>{
     }
+    React.useEffect(()=>{
+        const treeItem = treeItemRef.current;
+        return ()=>{
+            // When the tree item is unmounted, we need to update the roving tab index
+            // if the tree item is the current tab indexed item
+            if (treeItem && treeItem.tabIndex === 0) {
+                forceUpdateRovingTabIndex === null || forceUpdateRovingTabIndex === void 0 ? void 0 : forceUpdateRovingTabIndex();
+            }
+        };
+    }, [
+        forceUpdateRovingTabIndex
+    ]);
     const open = useTreeContext_unstable((ctx)=>{
@@ -64,0 +77,0 @@ var _props_open;

lib/contexts/treeContext.js

@@ -14,2 +14,3 @@ import { createContext, useContextSelector } from '@fluentui/react-context-selector';
     requestTreeResponse: noop,
+    forceUpdateRovingTabIndex: noop,
     appearance: 'subtle',
@@ -16,0 +17,0 @@ size: 'medium'

lib/hooks/useFlatTreeNavigation.js

@@ -11,3 +11,3 @@ import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
     const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();
-    const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();
+    const { rove, forceUpdate: forceUpdateRovingTabIndex, initialize: initializeRovingTabIndex } = useRovingTabIndex();
     const rootRefCallback = React.useCallback((root)=>{
@@ -78,3 +78,4 @@ if (walkerRef.current && root) {
         navigate,
-        rootRef: useMergedRefs(walkerRootRef, rootRefCallback)
+        rootRef: useMergedRefs(walkerRootRef, rootRefCallback),
+        forceUpdateRovingTabIndex
     };
@@ -81,0 +82,0 @@ }

lib/hooks/useRootTree.js

@@ -89,2 +89,5 @@ import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';
         requestTreeResponse,
+        forceUpdateRovingTabIndex: ()=>{
+        // noop
+        },
         root: slot.always(getIntrinsicElementProps('div', {
@@ -91,0 +94,0 @@ // FIXME:

lib/hooks/useRovingTabIndexes.js

@@ -12,7 +12,2 @@ import * as React from 'react';
     const { targetDocument } = useFluent();
-    React.useEffect(()=>{
-        if ((currentElementRef.current === null || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body.contains(currentElementRef.current))) && walkerRef.current) {
-            initialize(walkerRef.current);
-        }
-    });
     useFocusedElementChange((element)=>{
@@ -48,6 +43,15 @@ if ((element === null || element === void 0 ? void 0 : element.getAttribute('role')) === 'treeitem' && walkerRef.current && elementContains(walkerRef.current.root, element)) {
     }, []);
+    const forceUpdate = React.useCallback(()=>{
+        if ((currentElementRef.current === null || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body.contains(currentElementRef.current))) && walkerRef.current) {
+            initialize(walkerRef.current);
+        }
+    }, [
+        targetDocument,
+        initialize
+    ]);
     return {
         rove,
-        initialize
+        initialize,
+        forceUpdate
     };
 }

lib/hooks/useTreeNavigation.js

@@ -11,3 +11,3 @@ import { nextTypeAheadElement } from '../utils/nextTypeAheadElement';
     'use no memo';
-    const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();
+    const { rove, initialize: initializeRovingTabIndex, forceUpdate: forceUpdateRovingTabIndex } = useRovingTabIndex();
     const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();
@@ -60,3 +60,4 @@ const rootRefCallback = React.useCallback((root)=>{
         navigate,
-        treeRef: useMergedRefs(walkerRootRef, rootRefCallback)
+        treeRef: useMergedRefs(walkerRootRef, rootRefCallback),
+        forceUpdateRovingTabIndex
     };
@@ -63,0 +64,0 @@ }

package.json

 {
   "name": "@fluentui/react-tree",
-  "version": "0.0.0-nightly-20240909-0407.1",
+  "version": "0.0.0-nightly-20240910-0407.1",
   "description": "Tree component for Fluent UI React",
@@ -27,6 +27,6 @@ "main": "lib-commonjs/index.js",
   "devDependencies": {
-    "@fluentui/react-provider": "0.0.0-nightly-20240909-0407.1",
+    "@fluentui/react-provider": "0.0.0-nightly-20240910-0407.1",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "0.0.0-nightly-20240909-0407.1",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240909-0407.1",
+    "@fluentui/react-conformance": "0.0.0-nightly-20240910-0407.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240910-0407.1",
     "@fluentui/scripts-api-extractor": "*",
@@ -37,17 +37,17 @@ "@fluentui/scripts-tasks": "*",
   "dependencies": {
-    "@fluentui/keyboard-keys": "0.0.0-nightly-20240909-0407.1",
-    "@fluentui/react-aria": "0.0.0-nightly-20240909-0407.1",
-    "@fluentui/react-avatar": "0.0.0-nightly-20240909-0407.1",
-    "@fluentui/react-button": "0.0.0-nightly-20240909-0407.1",
-    "@fluentui/react-checkbox": "0.0.0-nightly-20240909-0407.1",
-    "@fluentui/react-context-selector": "0.0.0-nightly-20240909-0407.1",
+    "@fluentui/keyboard-keys": "0.0.0-nightly-20240910-0407.1",
+    "@fluentui/react-aria": "0.0.0-nightly-20240910-0407.1",
+    "@fluentui/react-avatar": "0.0.0-nightly-20240910-0407.1",
+    "@fluentui/react-button": "0.0.0-nightly-20240910-0407.1",
+    "@fluentui/react-checkbox": "0.0.0-nightly-20240910-0407.1",
+    "@fluentui/react-context-selector": "0.0.0-nightly-20240910-0407.1",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-motion-components-preview": "0.0.0-nightly-20240909-0407.1",
-    "@fluentui/react-motion": "0.0.0-nightly-20240909-0407.1",
-    "@fluentui/react-radio": "0.0.0-nightly-20240909-0407.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20240909-0407.1",
-    "@fluentui/react-tabster": "0.0.0-nightly-20240909-0407.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20240909-0407.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20240909-0407.1",
-    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240909-0407.1",
+    "@fluentui/react-motion-components-preview": "0.0.0-nightly-20240910-0407.1",
+    "@fluentui/react-motion": "0.0.0-nightly-20240910-0407.1",
+    "@fluentui/react-radio": "0.0.0-nightly-20240910-0407.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20240910-0407.1",
+    "@fluentui/react-tabster": "0.0.0-nightly-20240910-0407.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20240910-0407.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20240910-0407.1",
+    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240910-0407.1",
     "@griffel/react": "^1.5.22",
@@ -54,0 +54,0 @@ "@swc/helpers": "^0.5.1"

No alert changes

Improved metrics

Total package byte prevSize

886153

increased by0.78%

Lines of code

6865

increased by0.84%

Dependency changes

• + Added@fluentui/keyboard-keys@0.0.0-nightly-20240910-0407.1(transitive)

• + Added@fluentui/react-aria@0.0.0-nightly-20240910-0407.1(transitive)

• + Added@fluentui/react-avatar@0.0.0-nightly-20240910-0407.1(transitive)

• + Added@fluentui/react-badge@0.0.0-nightly-20240910-0407.1(transitive)

• + Added@fluentui/react-button@0.0.0-nightly-20240910-0407.1(transitive)

• + Added@fluentui/react-checkbox@0.0.0-nightly-20240910-0407.1(transitive)

• + Added@fluentui/react-context-selector@0.0.0-nightly-20240910-0407.1(transitive)

• + Added@fluentui/react-field@0.0.0-nightly-20240910-0407.1(transitive)

• + Added@fluentui/react-jsx-runtime@0.0.0-nightly-20240910-0407.1(transitive)

• + Added@fluentui/react-label@0.0.0-nightly-20240910-0407.1(transitive)

• + Added@fluentui/react-motion@0.0.0-nightly-20240910-0407.1(transitive)

• + Added@fluentui/react-motion-components-preview@0.0.0-nightly-20240910-0407.1(transitive)

• + Added@fluentui/react-popover@0.0.0-nightly-20240910-0407.1(transitive)

• + Added@fluentui/react-portal@0.0.0-nightly-20240910-0407.1(transitive)

• + Added@fluentui/react-positioning@0.0.0-nightly-20240910-0407.1(transitive)

• + Added@fluentui/react-radio@0.0.0-nightly-20240910-0407.1(transitive)

• + Added@fluentui/react-shared-contexts@0.0.0-nightly-20240910-0407.1(transitive)

• + Added@fluentui/react-tabster@0.0.0-nightly-20240910-0407.1(transitive)

• + Added@fluentui/react-theme@0.0.0-nightly-20240910-0407.1(transitive)

• + Added@fluentui/react-tooltip@0.0.0-nightly-20240910-0407.1(transitive)

• + Added@fluentui/react-utilities@0.0.0-nightly-20240910-0407.1(transitive)

• + Added@fluentui/tokens@0.0.0-nightly-20240910-0407.1(transitive)

• - Removed@fluentui/keyboard-keys@0.0.0-nightly-20240909-0407.1(transitive)

• - Removed@fluentui/react-aria@0.0.0-nightly-20240909-0407.1(transitive)

• - Removed@fluentui/react-avatar@0.0.0-nightly-20240909-0407.1(transitive)

• - Removed@fluentui/react-badge@0.0.0-nightly-20240909-0407.1(transitive)

• - Removed@fluentui/react-button@0.0.0-nightly-20240909-0407.1(transitive)

• - Removed@fluentui/react-checkbox@0.0.0-nightly-20240909-0407.1(transitive)

• - Removed@fluentui/react-context-selector@0.0.0-nightly-20240909-0407.1(transitive)

• - Removed@fluentui/react-field@0.0.0-nightly-20240909-0407.1(transitive)

• - Removed@fluentui/react-jsx-runtime@0.0.0-nightly-20240909-0407.1(transitive)

• - Removed@fluentui/react-label@0.0.0-nightly-20240909-0407.1(transitive)

• - Removed@fluentui/react-motion@0.0.0-nightly-20240909-0407.1(transitive)

• - Removed@fluentui/react-motion-components-preview@0.0.0-nightly-20240909-0407.1(transitive)

• - Removed@fluentui/react-popover@0.0.0-nightly-20240909-0407.1(transitive)

• - Removed@fluentui/react-portal@0.0.0-nightly-20240909-0407.1(transitive)

• - Removed@fluentui/react-positioning@0.0.0-nightly-20240909-0407.1(transitive)

• - Removed@fluentui/react-radio@0.0.0-nightly-20240909-0407.1(transitive)

• - Removed@fluentui/react-shared-contexts@0.0.0-nightly-20240909-0407.1(transitive)

• - Removed@fluentui/react-tabster@0.0.0-nightly-20240909-0407.1(transitive)

• - Removed@fluentui/react-theme@0.0.0-nightly-20240909-0407.1(transitive)

• - Removed@fluentui/react-tooltip@0.0.0-nightly-20240909-0407.1(transitive)

• - Removed@fluentui/react-utilities@0.0.0-nightly-20240909-0407.1(transitive)

• - Removed@fluentui/tokens@0.0.0-nightly-20240909-0407.1(transitive)

• Updated@fluentui/keyboard-keys@0.0.0-nightly-20240910-0407.1

• Updated@fluentui/react-aria@0.0.0-nightly-20240910-0407.1

• Updated@fluentui/react-avatar@0.0.0-nightly-20240910-0407.1

• Updated@fluentui/react-button@0.0.0-nightly-20240910-0407.1

• Updated@fluentui/react-checkbox@0.0.0-nightly-20240910-0407.1

• Updated@fluentui/react-context-selector@0.0.0-nightly-20240910-0407.1

• Updated@fluentui/react-jsx-runtime@0.0.0-nightly-20240910-0407.1

• Updated@fluentui/react-motion@0.0.0-nightly-20240910-0407.1

• Updated@fluentui/react-motion-components-preview@0.0.0-nightly-20240910-0407.1

• Updated@fluentui/react-radio@0.0.0-nightly-20240910-0407.1

• Updated@fluentui/react-shared-contexts@0.0.0-nightly-20240910-0407.1

• Updated@fluentui/react-tabster@0.0.0-nightly-20240910-0407.1

• Updated@fluentui/react-theme@0.0.0-nightly-20240910-0407.1

• Updated@fluentui/react-utilities@0.0.0-nightly-20240910-0407.1