@fluentui/react-tree 9.8.12 → 9.9.0

package/lib/hooks/useTreeNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useTreeNavigation.ts"],"sourcesContent":["import { TreeNavigationData_unstable } from '../components/Tree/Tree.types';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\n/**\n * @internal\n */\nexport function useTreeNavigation() {\n  'use no memo';\n\n  const { rove, initialize: initializeRovingTabIndex, forceUpdate: forceUpdateRovingTabIndex } = useRovingTabIndex();\n  const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n\n  const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n    root => {\n      if (root && walkerRef.current) {\n        initializeRovingTabIndex(walkerRef.current);\n      }\n    },\n    [walkerRef, initializeRovingTabIndex],\n  );\n\n  const getNextElement = (data: TreeNavigationData_unstable) => {\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: TreeNavigationData_unstable, focusOptions?: FocusOptions) {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement, focusOptions);\n    }\n  }\n  return {\n    navigate,\n    treeRef: useMergedRefs(walkerRootRef, rootRefCallback) as React.RefCallback<HTMLElement>,\n    forceUpdateRovingTabIndex,\n  } as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n  let lastElement: HTMLElement | null = null;\n  let nextElement: HTMLElement | null = null;\n  while ((nextElement = walker.lastChild())) {\n    lastElement = nextElement;\n  }\n  return lastElement;\n}\n"],"names":["nextTypeAheadElement","treeDataTypes","useRovingTabIndex","React","useHTMLElementWalkerRef","useMergedRefs","useTreeNavigation","rove","initialize","initializeRovingTabIndex","forceUpdate","forceUpdateRovingTabIndex","walkerRef","rootRef","walkerRootRef","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","focusOptions","treeRef","walker","lastElement","lastChild"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,oBAAoB,QAAQ,gCAAgC;AACrE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,iBAAiB,QAAQ,wBAAwB;AAE1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,4BAA4B;AACpE,SAASC,aAAa,QAAQ,4BAA4B;AAE1D;;CAEC,GACD,OAAO,SAASC;IACd;IAEA,MAAM,EAAEC,IAAI,EAAEC,YAAYC,wBAAwB,EAAEC,aAAaC,yBAAyB,EAAE,GAAGT;IAC/F,MAAM,EAAEU,SAAS,EAAEC,SAASC,aAAa,EAAE,GAAGV;IAE9C,MAAMW,kBAAkDZ,MAAMa,WAAW,CACvEC,CAAAA;QACE,IAAIA,QAAQL,UAAUM,OAAO,EAAE;YAC7BT,yBAAyBG,UAAUM,OAAO;QAC5C;IACF,GACA;QAACN;QAAWH;KAAyB;IAGvC,MAAMU,iBAAiB,CAACC;QACtB,IAAI,CAACR,UAAUM,OAAO,EAAE;YACtB,OAAO;QACT;QACA,OAAQE,KAAKC,IAAI;YACf,KAAKpB,cAAcqB,KAAK;gBACtB,OAAOF,KAAKG,MAAM;YACpB,KAAKtB,cAAcuB,SAAS;gBAC1BZ,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOvB,qBAAqBY,UAAUM,OAAO,EAAEE,KAAKM,KAAK,CAACC,GAAG;YAC/D,KAAK1B,cAAc2B,SAAS;gBAC1BhB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACW,aAAa;YACxC,KAAK5B,cAAc6B,UAAU;gBAC3BlB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACa,UAAU;YACrC,KAAK9B,cAAc+B,GAAG;gBACpBpB,UAAUM,OAAO,CAACO,cAAc,GAAGb,UAAUM,OAAO,CAACD,IAAI;gBACzD,OAAOgB,mBAAmBrB,UAAUM,OAAO;YAC7C,KAAKjB,cAAciC,IAAI;gBACrBtB,UAAUM,OAAO,CAACO,cAAc,GAAGb,UAAUM,OAAO,CAACD,IAAI;gBACzD,OAAOL,UAAUM,OAAO,CAACa,UAAU;YACrC,KAAK9B,cAAckC,SAAS;gBAC1BvB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACkB,WAAW;YACtC,KAAKnC,cAAcoC,OAAO;gBACxBzB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACoB,eAAe;QAC5C;IACF;IACA,SAASC,SAASnB,IAAiC,EAAEoB,YAA2B;QAC9E,MAAMJ,cAAcjB,eAAeC;QACnC,IAAIgB,aAAa;YACf7B,KAAK6B,aAAaI;QACpB;IACF;IACA,OAAO;QACLD;QACAE,SAASpC,cAAcS,eAAeC;QACtCJ;IACF;AACF;AAEA,SAASsB,mBAAmBS,MAAyB;IACnD,IAAIC,cAAkC;IACtC,IAAIP,cAAkC;IACtC,MAAQA,cAAcM,OAAOE,SAAS,GAAK;QACzCD,cAAcP;IAChB;IACA,OAAOO;AACT"}
+{"version":3,"sources":["../src/hooks/useTreeNavigation.ts"],"sourcesContent":["import { TreeNavigationData_unstable, TreeNavigationMode } from '../components/Tree/Tree.types';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\n/**\n * @internal\n */\nexport function useTreeNavigation(navigationMode: TreeNavigationMode = 'tree') {\n  'use no memo';\n\n  const { rove, initialize: initializeRovingTabIndex, forceUpdate: forceUpdateRovingTabIndex } = useRovingTabIndex();\n  const { findFirstFocusable } = useFocusFinders();\n  const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n\n  const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n    root => {\n      if (root && walkerRef.current) {\n        initializeRovingTabIndex(walkerRef.current);\n      }\n    },\n    [walkerRef, initializeRovingTabIndex],\n  );\n\n  const getNextElement = (data: TreeNavigationData_unstable) => {\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        const actions = queryActions(data.target);\n        if (navigationMode === 'treegrid' && actions?.contains(data.target.ownerDocument.activeElement)) {\n          return data.target;\n        }\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.parentElement();\n      }\n      case treeDataTypes.ArrowRight:\n        if (navigationMode === 'treegrid') {\n          const actions = queryActions(data.target);\n          if (actions) {\n            findFirstFocusable(actions)?.focus();\n          }\n          return null;\n        }\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: TreeNavigationData_unstable, focusOptions?: FocusOptions) {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement, focusOptions);\n    }\n  }\n  return {\n    navigate,\n    treeRef: useMergedRefs(walkerRootRef, rootRefCallback) as React.RefCallback<HTMLElement>,\n    forceUpdateRovingTabIndex,\n  } as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n  let lastElement: HTMLElement | null = null;\n  let nextElement: HTMLElement | null = null;\n  while ((nextElement = walker.lastChild())) {\n    lastElement = nextElement;\n  }\n  return lastElement;\n}\n\nconst queryActions = (target: HTMLElement) =>\n  target.querySelector<HTMLElement>(\n    `:scope > .${treeItemLayoutClassNames.root} > .${treeItemLayoutClassNames.actions}`,\n  );\n"],"names":["nextTypeAheadElement","treeDataTypes","useRovingTabIndex","React","useHTMLElementWalkerRef","useMergedRefs","treeItemLayoutClassNames","useFocusFinders","useTreeNavigation","navigationMode","rove","initialize","initializeRovingTabIndex","forceUpdate","forceUpdateRovingTabIndex","findFirstFocusable","walkerRef","rootRef","walkerRootRef","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","actions","queryActions","contains","ownerDocument","activeElement","parentElement","ArrowRight","focus","firstChild","End","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","focusOptions","treeRef","walker","lastElement","lastChild","querySelector"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,oBAAoB,QAAQ,gCAAgC;AACrE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,iBAAiB,QAAQ,wBAAwB;AAE1D,YAAYC,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,4BAA4B;AACpE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,eAAe,QAAQ,0BAA0B;AAE1D;;CAEC,GACD,OAAO,SAASC,kBAAkBC,iBAAqC,MAAM;IAC3E;IAEA,MAAM,EAAEC,IAAI,EAAEC,YAAYC,wBAAwB,EAAEC,aAAaC,yBAAyB,EAAE,GAAGZ;IAC/F,MAAM,EAAEa,kBAAkB,EAAE,GAAGR;IAC/B,MAAM,EAAES,SAAS,EAAEC,SAASC,aAAa,EAAE,GAAGd;IAE9C,MAAMe,kBAAkDhB,MAAMiB,WAAW,CACvEC,CAAAA;QACE,IAAIA,QAAQL,UAAUM,OAAO,EAAE;YAC7BV,yBAAyBI,UAAUM,OAAO;QAC5C;IACF,GACA;QAACN;QAAWJ;KAAyB;IAGvC,MAAMW,iBAAiB,CAACC;QACtB,IAAI,CAACR,UAAUM,OAAO,EAAE;YACtB,OAAO;QACT;QACA,OAAQE,KAAKC,IAAI;YACf,KAAKxB,cAAcyB,KAAK;gBACtB,OAAOF,KAAKG,MAAM;YACpB,KAAK1B,cAAc2B,SAAS;gBAC1BZ,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAO3B,qBAAqBgB,UAAUM,OAAO,EAAEE,KAAKM,KAAK,CAACC,GAAG;YAC/D,KAAK9B,cAAc+B,SAAS;gBAAE;oBAC5B,MAAMC,UAAUC,aAAaV,KAAKG,MAAM;oBACxC,IAAIlB,mBAAmB,eAAcwB,oBAAAA,8BAAAA,QAASE,QAAQ,CAACX,KAAKG,MAAM,CAACS,aAAa,CAACC,aAAa,IAAG;wBAC/F,OAAOb,KAAKG,MAAM;oBACpB;oBACAX,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;oBAC9C,OAAOX,UAAUM,OAAO,CAACgB,aAAa;gBACxC;YACA,KAAKrC,cAAcsC,UAAU;gBAC3B,IAAI9B,mBAAmB,YAAY;oBACjC,MAAMwB,UAAUC,aAAaV,KAAKG,MAAM;oBACxC,IAAIM,SAAS;4BACXlB;yBAAAA,sBAAAA,mBAAmBkB,sBAAnBlB,0CAAAA,oBAA6ByB,KAAK;oBACpC;oBACA,OAAO;gBACT;gBACAxB,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACmB,UAAU;YACrC,KAAKxC,cAAcyC,GAAG;gBACpB1B,UAAUM,OAAO,CAACO,cAAc,GAAGb,UAAUM,OAAO,CAACD,IAAI;gBACzD,OAAOsB,mBAAmB3B,UAAUM,OAAO;YAC7C,KAAKrB,cAAc2C,IAAI;gBACrB5B,UAAUM,OAAO,CAACO,cAAc,GAAGb,UAAUM,OAAO,CAACD,IAAI;gBACzD,OAAOL,UAAUM,OAAO,CAACmB,UAAU;YACrC,KAAKxC,cAAc4C,SAAS;gBAC1B7B,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAACwB,WAAW;YACtC,KAAK7C,cAAc8C,OAAO;gBACxB/B,UAAUM,OAAO,CAACO,cAAc,GAAGL,KAAKG,MAAM;gBAC9C,OAAOX,UAAUM,OAAO,CAAC0B,eAAe;QAC5C;IACF;IACA,SAASC,SAASzB,IAAiC,EAAE0B,YAA2B;QAC9E,MAAMJ,cAAcvB,eAAeC;QACnC,IAAIsB,aAAa;YACfpC,KAAKoC,aAAaI;QACpB;IACF;IACA,OAAO;QACLD;QACAE,SAAS9C,cAAca,eAAeC;QACtCL;IACF;AACF;AAEA,SAAS6B,mBAAmBS,MAAyB;IACnD,IAAIC,cAAkC;IACtC,IAAIP,cAAkC;IACtC,MAAQA,cAAcM,OAAOE,SAAS,GAAK;QACzCD,cAAcP;IAChB;IACA,OAAOO;AACT;AAEA,MAAMnB,eAAe,CAACP,SACpBA,OAAO4B,aAAa,CAClB,CAAC,UAAU,EAAEjD,yBAAyBe,IAAI,CAAC,IAAI,EAAEf,yBAAyB2B,OAAO,CAAC,CAAC"}

package/lib/index.js

@@ -1,6 +1,6 @@
 export { Tree, treeClassNames, useTree_unstable, useTreeStyles_unstable, useTreeContextValues_unstable, renderTree_unstable } from './Tree';
 export { FlatTree, flatTreeClassNames, useFlatTree_unstable, useFlatTreeStyles_unstable, useFlatTreeContextValues_unstable, renderFlatTree_unstable } from './FlatTree';
-export { TreeProvider } from './components/TreeProvider';
+export { TreeProvider, TreeRootReset } from './components/TreeProvider';
 export { useTreeContext_unstable, useTreeItemContext_unstable, useSubtreeContext_unstable, TreeItemProvider } from './contexts';
 export { treeItemLevelToken } from './utils/tokens';
 export { useHeadlessFlatTree_unstable } from './components/FlatTree/useHeadlessFlatTree';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Tree,\n  treeClassNames,\n  useTree_unstable,\n  useTreeStyles_unstable,\n  useTreeContextValues_unstable,\n  renderTree_unstable,\n} from './Tree';\n\nexport type {\n  TreeSlots,\n  TreeProps,\n  TreeState,\n  TreeContextValues,\n  TreeOpenChangeData,\n  TreeSelectionValue,\n  TreeOpenChangeEvent,\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n} from './Tree';\n\nexport {\n  FlatTree,\n  flatTreeClassNames,\n  useFlatTree_unstable,\n  useFlatTreeStyles_unstable,\n  useFlatTreeContextValues_unstable,\n  renderFlatTree_unstable,\n} from './FlatTree';\n\nexport type { FlatTreeSlots, FlatTreeProps, FlatTreeState } from './FlatTree';\n\nexport { TreeProvider } from './components/TreeProvider';\n\nexport {\n  useTreeContext_unstable,\n  useTreeItemContext_unstable,\n  useSubtreeContext_unstable,\n  TreeItemProvider,\n} from './contexts';\nexport type { TreeContextValue, SubtreeContextValue, TreeItemContextValue } from './contexts';\n\nexport { treeItemLevelToken } from './utils/tokens';\n\nexport { useHeadlessFlatTree_unstable } from './components/FlatTree/useHeadlessFlatTree';\nexport type {\n  HeadlessFlatTree,\n  HeadlessFlatTreeItem,\n  HeadlessFlatTreeItemProps,\n  HeadlessFlatTreeOptions,\n} from './components/FlatTree/useHeadlessFlatTree';\n\nexport {\n  TreeItem,\n  treeItemClassNames,\n  renderTreeItem_unstable,\n  useTreeItemStyles_unstable,\n  useTreeItemContextValues_unstable,\n  useTreeItem_unstable,\n} from './TreeItem';\nexport type {\n  TreeItemProps,\n  TreeItemState,\n  TreeItemSlots,\n  TreeItemType,\n  TreeItemValue,\n  TreeItemOpenChangeData,\n  TreeItemOpenChangeEvent,\n} from './TreeItem';\n\nexport { FlatTreeItem } from './FlatTreeItem';\nexport type { FlatTreeItemProps } from './FlatTreeItem';\n\nexport {\n  TreeItemLayout,\n  treeItemLayoutClassNames,\n  renderTreeItemLayout_unstable,\n  useTreeItemLayoutStyles_unstable,\n  useTreeItemLayout_unstable,\n} from './TreeItemLayout';\nexport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout';\n\nexport {\n  TreeItemPersonaLayout,\n  treeItemPersonaLayoutClassNames,\n  renderTreeItemPersonaLayout_unstable,\n  useTreeItemPersonaLayoutStyles_unstable,\n  useTreeItemPersonaLayout_unstable,\n} from './TreeItemPersonaLayout';\nexport type {\n  TreeItemPersonaLayoutProps,\n  TreeItemPersonaLayoutSlots,\n  TreeItemPersonaLayoutState,\n} from './TreeItemPersonaLayout';\n\nexport { flattenTree_unstable } from './utils/flattenTree';\nexport type { FlattenTreeItem } from './utils/flattenTree';\n"],"names":["Tree","treeClassNames","useTree_unstable","useTreeStyles_unstable","useTreeContextValues_unstable","renderTree_unstable","FlatTree","flatTreeClassNames","useFlatTree_unstable","useFlatTreeStyles_unstable","useFlatTreeContextValues_unstable","renderFlatTree_unstable","TreeProvider","useTreeContext_unstable","useTreeItemContext_unstable","useSubtreeContext_unstable","TreeItemProvider","treeItemLevelToken","useHeadlessFlatTree_unstable","TreeItem","treeItemClassNames","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","useTreeItem_unstable","FlatTreeItem","TreeItemLayout","treeItemLayoutClassNames","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","useTreeItemLayout_unstable","TreeItemPersonaLayout","treeItemPersonaLayoutClassNames","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayout_unstable","flattenTree_unstable"],"rangeMappings":";;;;;;;;;;","mappings":"AAAA,SACEA,IAAI,EACJC,cAAc,EACdC,gBAAgB,EAChBC,sBAAsB,EACtBC,6BAA6B,EAC7BC,mBAAmB,QACd,SAAS;AAgBhB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,oBAAoB,EACpBC,0BAA0B,EAC1BC,iCAAiC,EACjCC,uBAAuB,QAClB,aAAa;AAIpB,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SACEC,uBAAuB,EACvBC,2BAA2B,EAC3BC,0BAA0B,EAC1BC,gBAAgB,QACX,aAAa;AAGpB,SAASC,kBAAkB,QAAQ,iBAAiB;AAEpD,SAASC,4BAA4B,QAAQ,4CAA4C;AAQzF,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,iCAAiC,EACjCC,oBAAoB,QACf,aAAa;AAWpB,SAASC,YAAY,QAAQ,iBAAiB;AAG9C,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAG1B,SACEC,qBAAqB,EACrBC,+BAA+B,EAC/BC,oCAAoC,EACpCC,uCAAuC,EACvCC,iCAAiC,QAC5B,0BAA0B;AAOjC,SAASC,oBAAoB,QAAQ,sBAAsB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Tree,\n  treeClassNames,\n  useTree_unstable,\n  useTreeStyles_unstable,\n  useTreeContextValues_unstable,\n  renderTree_unstable,\n} from './Tree';\n\nexport type {\n  TreeSlots,\n  TreeProps,\n  TreeState,\n  TreeContextValues,\n  TreeOpenChangeData,\n  TreeSelectionValue,\n  TreeOpenChangeEvent,\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeNavigationMode,\n} from './Tree';\n\nexport {\n  FlatTree,\n  flatTreeClassNames,\n  useFlatTree_unstable,\n  useFlatTreeStyles_unstable,\n  useFlatTreeContextValues_unstable,\n  renderFlatTree_unstable,\n} from './FlatTree';\n\nexport type { FlatTreeSlots, FlatTreeProps, FlatTreeState } from './FlatTree';\n\nexport { TreeProvider, TreeRootReset } from './components/TreeProvider';\n\nexport {\n  useTreeContext_unstable,\n  useTreeItemContext_unstable,\n  useSubtreeContext_unstable,\n  TreeItemProvider,\n} from './contexts';\nexport type { TreeContextValue, SubtreeContextValue, TreeItemContextValue } from './contexts';\n\nexport { treeItemLevelToken } from './utils/tokens';\n\nexport { useHeadlessFlatTree_unstable } from './components/FlatTree/useHeadlessFlatTree';\nexport type {\n  HeadlessFlatTree,\n  HeadlessFlatTreeItem,\n  HeadlessFlatTreeItemProps,\n  HeadlessFlatTreeOptions,\n} from './components/FlatTree/useHeadlessFlatTree';\n\nexport {\n  TreeItem,\n  treeItemClassNames,\n  renderTreeItem_unstable,\n  useTreeItemStyles_unstable,\n  useTreeItemContextValues_unstable,\n  useTreeItem_unstable,\n} from './TreeItem';\nexport type {\n  TreeItemProps,\n  TreeItemState,\n  TreeItemSlots,\n  TreeItemType,\n  TreeItemValue,\n  TreeItemOpenChangeData,\n  TreeItemOpenChangeEvent,\n} from './TreeItem';\n\nexport { FlatTreeItem } from './FlatTreeItem';\nexport type { FlatTreeItemProps } from './FlatTreeItem';\n\nexport {\n  TreeItemLayout,\n  treeItemLayoutClassNames,\n  renderTreeItemLayout_unstable,\n  useTreeItemLayoutStyles_unstable,\n  useTreeItemLayout_unstable,\n} from './TreeItemLayout';\nexport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout';\n\nexport {\n  TreeItemPersonaLayout,\n  treeItemPersonaLayoutClassNames,\n  renderTreeItemPersonaLayout_unstable,\n  useTreeItemPersonaLayoutStyles_unstable,\n  useTreeItemPersonaLayout_unstable,\n} from './TreeItemPersonaLayout';\nexport type {\n  TreeItemPersonaLayoutProps,\n  TreeItemPersonaLayoutSlots,\n  TreeItemPersonaLayoutState,\n} from './TreeItemPersonaLayout';\n\nexport { flattenTree_unstable } from './utils/flattenTree';\nexport type { FlattenTreeItem } from './utils/flattenTree';\n"],"names":["Tree","treeClassNames","useTree_unstable","useTreeStyles_unstable","useTreeContextValues_unstable","renderTree_unstable","FlatTree","flatTreeClassNames","useFlatTree_unstable","useFlatTreeStyles_unstable","useFlatTreeContextValues_unstable","renderFlatTree_unstable","TreeProvider","TreeRootReset","useTreeContext_unstable","useTreeItemContext_unstable","useSubtreeContext_unstable","TreeItemProvider","treeItemLevelToken","useHeadlessFlatTree_unstable","TreeItem","treeItemClassNames","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","useTreeItem_unstable","FlatTreeItem","TreeItemLayout","treeItemLayoutClassNames","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","useTreeItemLayout_unstable","TreeItemPersonaLayout","treeItemPersonaLayoutClassNames","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayout_unstable","flattenTree_unstable"],"rangeMappings":";;;;;;;;;;","mappings":"AAAA,SACEA,IAAI,EACJC,cAAc,EACdC,gBAAgB,EAChBC,sBAAsB,EACtBC,6BAA6B,EAC7BC,mBAAmB,QACd,SAAS;AAiBhB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,oBAAoB,EACpBC,0BAA0B,EAC1BC,iCAAiC,EACjCC,uBAAuB,QAClB,aAAa;AAIpB,SAASC,YAAY,EAAEC,aAAa,QAAQ,4BAA4B;AAExE,SACEC,uBAAuB,EACvBC,2BAA2B,EAC3BC,0BAA0B,EAC1BC,gBAAgB,QACX,aAAa;AAGpB,SAASC,kBAAkB,QAAQ,iBAAiB;AAEpD,SAASC,4BAA4B,QAAQ,4CAA4C;AAQzF,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,iCAAiC,EACjCC,oBAAoB,QACf,aAAa;AAWpB,SAASC,YAAY,QAAQ,iBAAiB;AAG9C,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAG1B,SACEC,qBAAqB,EACrBC,+BAA+B,EAC/BC,oCAAoC,EACpCC,uCAAuC,EACvCC,iCAAiC,QAC5B,0BAA0B;AAOjC,SAASC,oBAAoB,QAAQ,sBAAsB"}

package/lib-commonjs/Tree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Tree.ts"],"sourcesContent":["export type {\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeContextValues,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n  TreeSelectionValue,\n  TreeSlots,\n  TreeState,\n} from './components/Tree/index';\nexport {\n  Tree,\n  renderTree_unstable,\n  treeClassNames,\n  useTreeContextValues_unstable,\n  useTreeStyles_unstable,\n  useTree_unstable,\n} from './components/Tree/index';\n"],"names":["Tree","renderTree_unstable","treeClassNames","useTreeContextValues_unstable","useTreeStyles_unstable","useTree_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAcEA,IAAI;eAAJA,WAAI;;IACJC,mBAAmB;eAAnBA,0BAAmB;;IACnBC,cAAc;eAAdA,qBAAc;;IACdC,6BAA6B;eAA7BA,oCAA6B;;IAC7BC,sBAAsB;eAAtBA,6BAAsB;;IACtBC,gBAAgB;eAAhBA,uBAAgB;;;uBACX"}
+{"version":3,"sources":["../src/Tree.ts"],"sourcesContent":["export type {\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeContextValues,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n  TreeSelectionValue,\n  TreeSlots,\n  TreeState,\n  TreeNavigationMode,\n} from './components/Tree/index';\nexport {\n  Tree,\n  renderTree_unstable,\n  treeClassNames,\n  useTreeContextValues_unstable,\n  useTreeStyles_unstable,\n  useTree_unstable,\n} from './components/Tree/index';\n"],"names":["Tree","renderTree_unstable","treeClassNames","useTreeContextValues_unstable","useTreeStyles_unstable","useTree_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAeEA,IAAI;eAAJA,WAAI;;IACJC,mBAAmB;eAAnBA,0BAAmB;;IACnBC,cAAc;eAAdA,qBAAc;;IACdC,6BAA6B;eAA7BA,oCAA6B;;IAC7BC,sBAAsB;eAAtBA,6BAAsB;;IACtBC,gBAAgB;eAAhBA,uBAAgB;;;uBACX"}

package/lib-commonjs/components/FlatTree/FlatTree.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FlatTree/FlatTree.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, SelectionMode } from '@fluentui/react-utilities';\nimport type {\n  TreeSlots,\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeSelectionValue,\n} from '../Tree/index';\nimport type { TreeItemValue } from '../TreeItem/index';\nimport type { TreeContextValue } from '../../contexts';\n\nexport type FlatTreeSlots = TreeSlots;\n\nexport type FlatTreeContextValues = {\n  tree: TreeContextValue;\n};\n\nexport type FlatTreeProps = ComponentProps<TreeSlots> & {\n  /**\n   * A tree item can have various appearances:\n   * - 'subtle' (default): The default tree item styles.\n   * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n   * - 'transparent': Removes background color.\n   * @default 'subtle'\n   */\n  appearance?: 'subtle' | 'subtle-alpha' | 'transparent';\n  /**\n   * Size of the tree item.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Controls the state of the open tree items.\n   * These property is ignored for subtrees.\n   */\n  openItems?: Iterable<TreeItemValue>;\n  /**\n   * Callback fired when the component changes value from open state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as open value and type of interaction that created the event.\n   */\n  onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;\n\n  /**\n   * Callback fired when navigation happens inside the component.\n   * These property is ignored for subtrees.\n   *\n   * FIXME: This method is not ideal, as navigation should be handled internally by tabster.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   */\n  onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;\n\n  /**\n   * This refers to the selection mode of the tree.\n   * - undefined: No selection can be done.\n   * - 'single': Only one tree item can be selected, radio buttons are rendered.\n   * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.\n   *\n   * @default undefined\n   */\n  selectionMode?: SelectionMode;\n  /**\n   * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n   * Controls the state of the checked tree items.\n   * These property is ignored for subtrees.\n   */\n  checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n  /**\n   * Callback fired when the component changes value from checked state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as checked value and type of interaction that created the event.\n   */\n  onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;\n};\n\nexport type FlatTreeState = ComponentState<FlatTreeSlots> &\n  TreeContextValue & {\n    open: boolean;\n  };\n"],"names":[],"rangeMappings":"","mappings":""}
+{"version":3,"sources":["../src/components/FlatTree/FlatTree.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, SelectionMode } from '@fluentui/react-utilities';\nimport type {\n  TreeSlots,\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeSelectionValue,\n} from '../Tree/index';\nimport type { TreeItemValue } from '../TreeItem/index';\nimport type { TreeContextValue } from '../../contexts';\n\nexport type FlatTreeSlots = TreeSlots;\n\nexport type FlatTreeContextValues = {\n  tree: TreeContextValue;\n};\n\nexport type FlatTreeProps = ComponentProps<TreeSlots> & {\n  /**\n   * Indicates how navigation between a treeitem and its actions work\n   * - 'tree' (default): The default navigation, pressing right arrow key navigates inward the first inner children of a branch treeitem\n   * - 'treegrid': Pressing right arrow key navigate towards the actions of a treeitem\n   * @default 'tree'\n   */\n  navigationMode?: 'tree' | 'treegrid';\n  /**\n   * A tree item can have various appearances:\n   * - 'subtle' (default): The default tree item styles.\n   * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n   * - 'transparent': Removes background color.\n   * @default 'subtle'\n   */\n  appearance?: 'subtle' | 'subtle-alpha' | 'transparent';\n  /**\n   * Size of the tree item.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Controls the state of the open tree items.\n   * These property is ignored for subtrees.\n   */\n  openItems?: Iterable<TreeItemValue>;\n  /**\n   * Callback fired when the component changes value from open state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as open value and type of interaction that created the event.\n   */\n  onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;\n\n  /**\n   * Callback fired when navigation happens inside the component.\n   * These property is ignored for subtrees.\n   *\n   * FIXME: This method is not ideal, as navigation should be handled internally by tabster.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   */\n  onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;\n\n  /**\n   * This refers to the selection mode of the tree.\n   * - undefined: No selection can be done.\n   * - 'single': Only one tree item can be selected, radio buttons are rendered.\n   * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.\n   *\n   * @default undefined\n   */\n  selectionMode?: SelectionMode;\n  /**\n   * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n   * Controls the state of the checked tree items.\n   * These property is ignored for subtrees.\n   */\n  checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n  /**\n   * Callback fired when the component changes value from checked state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as checked value and type of interaction that created the event.\n   */\n  onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;\n};\n\nexport type FlatTreeState = ComponentState<FlatTreeSlots> &\n  TreeContextValue & {\n    open: boolean;\n  };\n"],"names":[],"rangeMappings":"","mappings":""}

package/lib-commonjs/components/FlatTree/useFlatTree.js

@@ -26,7 +26,7 @@ const useFlatTree_unstable = (props, ref)=>{
     return isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);
 };
 function useRootFlatTree(props, ref) {
-    const navigation = (0, _useFlatTreeNavigation.useFlatTreeNavigation)();
+    const navigation = (0, _useFlatTreeNavigation.useFlatTreeNavigation)(props.navigationMode);
     return Object.assign((0, _useRootTree.useRootTree)({
         ...props,
         onNavigation: (0, _reactutilities.useEventCallback)((event, data)=>{

package/lib-commonjs/components/FlatTree/useFlatTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FlatTree/useFlatTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { FlatTreeProps, FlatTreeState } from './FlatTree.types';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFlatTreeNavigation } from '../../hooks/useFlatTreeNavigation';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\n\nexport const useFlatTree_unstable: (props: FlatTreeProps, ref: React.Ref<HTMLElement>) => FlatTreeState = (\n  props,\n  ref,\n) => {\n  'use no memo';\n\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 ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);\n};\n\nfunction useRootFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n  const navigation = useFlatTreeNavigation();\n\n  return Object.assign(\n    useRootTree(\n      {\n        ...props,\n        onNavigation: useEventCallback((event, data) => {\n          props.onNavigation?.(event, data);\n          if (!event.isDefaultPrevented()) {\n            navigation.navigate(data);\n          }\n        }),\n      },\n      useMergedRefs(ref, navigation.rootRef),\n    ),\n    {\n      treeType: 'flat',\n      forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex,\n    } as const,\n  );\n}\n\nfunction useSubFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n  if (process.env.NODE_ENV === 'development') {\n    throw new Error(/* #__DE-INDENT__ */ `\n      @fluentui/react-tree [useFlatTree]:\n      Subtrees are not allowed in a FlatTree!\n      You cannot use a <FlatTree> component inside of another <FlatTree> nor a <Tree> component!\n    `);\n  }\n  return {\n    ...useSubtree(props, ref),\n    // ------ defaultTreeContextValue\n    level: 0,\n    contextType: 'root',\n    treeType: 'nested',\n    selectionMode: 'none',\n    openItems: ImmutableSet.empty,\n    checkedItems: ImmutableMap.empty,\n    requestTreeResponse: noop,\n    forceUpdateRovingTabIndex: noop,\n    appearance: 'subtle',\n    size: 'medium',\n    // ------ defaultTreeContextValue\n    open: false,\n  };\n}\n\nfunction noop() {\n  /* do nothing */\n}\n"],"names":["useFlatTree_unstable","props","ref","isRoot","React","useContext","SubtreeContext","undefined","useRootFlatTree","useSubFlatTree","navigation","useFlatTreeNavigation","Object","assign","useRootTree","onNavigation","useEventCallback","event","data","isDefaultPrevented","navigate","useMergedRefs","rootRef","treeType","forceUpdateRovingTabIndex","process","env","NODE_ENV","Error","useSubtree","level","contextType","selectionMode","openItems","ImmutableSet","empty","checkedItems","ImmutableMap","requestTreeResponse","noop","appearance","size","open"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;;iEAVU;6BACK;gCAEoB;uCACV;4BACX;8BACE;8BACA;gCACE;AAExB,MAAMA,uBAA6F,CACxGC,OACAC;IAEA;IAEA,MAAMC,SAASC,OAAMC,UAAU,CAACC,8BAAAA,MAAoBC;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOJ,SAASK,gBAAgBP,OAAOC,OAAOO,eAAeR,OAAOC;AACtE;AAEA,SAASM,gBAAgBP,KAAoB,EAAEC,GAA2B;IACxE,MAAMQ,aAAaC,IAAAA,4CAAAA;IAEnB,OAAOC,OAAOC,MAAM,CAClBC,IAAAA,wBAAAA,EACE;QACE,GAAGb,KAAK;QACRc,cAAcC,IAAAA,gCAAAA,EAAiB,CAACC,OAAOC;gBACrCjB;YAAAA,CAAAA,sBAAAA,MAAMc,YAAY,AAAZA,MAAY,QAAlBd,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA,CAAAA,OAAqBgB,OAAOC;YAC5B,IAAI,CAACD,MAAME,kBAAkB,IAAI;gBAC/BT,WAAWU,QAAQ,CAACF;YACtB;QACF;IACF,GACAG,IAAAA,6BAAAA,EAAcnB,KAAKQ,WAAWY,OAAO,IAEvC;QACEC,UAAU;QACVC,2BAA2Bd,WAAWc,yBAAyB;IACjE;AAEJ;AAEA,SAASf,eAAeR,KAAoB,EAAEC,GAA2B;IACvE,IAAIuB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAM,IAAIC,MAA2B,CAAC;;0FAItC,CAAC;IACH;IACA,OAAO;QACL,GAAGC,IAAAA,sBAAAA,EAAW5B,OAAOC,IAAI;QACzB,iCAAiC;QACjC4B,OAAO;QACPC,aAAa;QACbR,UAAU;QACVS,eAAe;QACfC,WAAWC,0BAAAA,CAAaC,KAAK;QAC7BC,cAAcC,0BAAAA,CAAaF,KAAK;QAChCG,qBAAqBC;QACrBf,2BAA2Be;QAC3BC,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;IACR;AACF;AAEA,SAASH;AACP,cAAc,GAChB"}
+{"version":3,"sources":["../src/components/FlatTree/useFlatTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { FlatTreeProps, FlatTreeState } from './FlatTree.types';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFlatTreeNavigation } from '../../hooks/useFlatTreeNavigation';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\n\nexport const useFlatTree_unstable: (props: FlatTreeProps, ref: React.Ref<HTMLElement>) => FlatTreeState = (\n  props,\n  ref,\n) => {\n  'use no memo';\n\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 ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);\n};\n\nfunction useRootFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n  const navigation = useFlatTreeNavigation(props.navigationMode);\n\n  return Object.assign(\n    useRootTree(\n      {\n        ...props,\n        onNavigation: useEventCallback((event, data) => {\n          props.onNavigation?.(event, data);\n          if (!event.isDefaultPrevented()) {\n            navigation.navigate(data);\n          }\n        }),\n      },\n      useMergedRefs(ref, navigation.rootRef),\n    ),\n    {\n      treeType: 'flat',\n      forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex,\n    } as const,\n  );\n}\n\nfunction useSubFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n  if (process.env.NODE_ENV === 'development') {\n    throw new Error(/* #__DE-INDENT__ */ `\n      @fluentui/react-tree [useFlatTree]:\n      Subtrees are not allowed in a FlatTree!\n      You cannot use a <FlatTree> component inside of another <FlatTree> nor a <Tree> component!\n    `);\n  }\n  return {\n    ...useSubtree(props, ref),\n    // ------ defaultTreeContextValue\n    level: 0,\n    contextType: 'root',\n    treeType: 'nested',\n    selectionMode: 'none',\n    openItems: ImmutableSet.empty,\n    checkedItems: ImmutableMap.empty,\n    requestTreeResponse: noop,\n    forceUpdateRovingTabIndex: noop,\n    appearance: 'subtle',\n    size: 'medium',\n    // ------ defaultTreeContextValue\n    open: false,\n  };\n}\n\nfunction noop() {\n  /* do nothing */\n}\n"],"names":["useFlatTree_unstable","props","ref","isRoot","React","useContext","SubtreeContext","undefined","useRootFlatTree","useSubFlatTree","navigation","useFlatTreeNavigation","navigationMode","Object","assign","useRootTree","onNavigation","useEventCallback","event","data","isDefaultPrevented","navigate","useMergedRefs","rootRef","treeType","forceUpdateRovingTabIndex","process","env","NODE_ENV","Error","useSubtree","level","contextType","selectionMode","openItems","ImmutableSet","empty","checkedItems","ImmutableMap","requestTreeResponse","noop","appearance","size","open"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;;iEAVU;6BACK;gCAEoB;uCACV;4BACX;8BACE;8BACA;gCACE;AAExB,MAAMA,uBAA6F,CACxGC,OACAC;IAEA;IAEA,MAAMC,SAASC,OAAMC,UAAU,CAACC,8BAAAA,MAAoBC;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOJ,SAASK,gBAAgBP,OAAOC,OAAOO,eAAeR,OAAOC;AACtE;AAEA,SAASM,gBAAgBP,KAAoB,EAAEC,GAA2B;IACxE,MAAMQ,aAAaC,IAAAA,4CAAAA,EAAsBV,MAAMW,cAAc;IAE7D,OAAOC,OAAOC,MAAM,CAClBC,IAAAA,wBAAAA,EACE;QACE,GAAGd,KAAK;QACRe,cAAcC,IAAAA,gCAAAA,EAAiB,CAACC,OAAOC;gBACrClB;YAAAA,CAAAA,sBAAAA,MAAMe,YAAY,AAAZA,MAAY,QAAlBf,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA,CAAAA,OAAqBiB,OAAOC;YAC5B,IAAI,CAACD,MAAME,kBAAkB,IAAI;gBAC/BV,WAAWW,QAAQ,CAACF;YACtB;QACF;IACF,GACAG,IAAAA,6BAAAA,EAAcpB,KAAKQ,WAAWa,OAAO,IAEvC;QACEC,UAAU;QACVC,2BAA2Bf,WAAWe,yBAAyB;IACjE;AAEJ;AAEA,SAAShB,eAAeR,KAAoB,EAAEC,GAA2B;IACvE,IAAIwB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAM,IAAIC,MAA2B,CAAC;;0FAItC,CAAC;IACH;IACA,OAAO;QACL,GAAGC,IAAAA,sBAAAA,EAAW7B,OAAOC,IAAI;QACzB,iCAAiC;QACjC6B,OAAO;QACPC,aAAa;QACbR,UAAU;QACVS,eAAe;QACfC,WAAWC,0BAAAA,CAAaC,KAAK;QAC7BC,cAAcC,0BAAAA,CAAaF,KAAK;QAChCG,qBAAqBC;QACrBf,2BAA2Be;QAC3BC,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;IACR;AACF;AAEA,SAASH;AACP,cAAc,GAChB"}

package/lib-commonjs/components/FlatTree/useFlatTreeContextValues.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "useFlatTreeContextValues_unstable", {
     }
 });
 const useFlatTreeContextValues_unstable = (state)=>{
-    const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse, forceUpdateRovingTabIndex } = state;
+    const { openItems, level, contextType, treeType, checkedItems, selectionMode, navigationMode, appearance, size, requestTreeResponse, forceUpdateRovingTabIndex } = state;
     /**
    * This context is created with "@fluentui/react-context-selector",
    * there is no sense to memoize it
@@ -20,6 +20,7 @@ const useFlatTreeContextValues_unstable = (state)=>{
         appearance,
         checkedItems,
         selectionMode,
+        navigationMode,
         contextType,
         level,
         requestTreeResponse,

package/lib-commonjs/components/FlatTree/useFlatTreeContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/FlatTree/useFlatTreeContextValues.ts"],"sourcesContent":["import type { TreeContextValue } from '../../contexts';\nimport type { FlatTreeContextValues, FlatTreeState } from './FlatTree.types';\n\nexport const useFlatTreeContextValues_unstable = (state: FlatTreeState): FlatTreeContextValues => {\n  const {\n    openItems,\n    level,\n    contextType,\n    treeType,\n    checkedItems,\n    selectionMode,\n    appearance,\n    size,\n    requestTreeResponse,\n    forceUpdateRovingTabIndex,\n  } = state;\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const tree: TreeContextValue = {\n    treeType,\n    size,\n    openItems,\n    appearance,\n    checkedItems,\n    selectionMode,\n    contextType,\n    level,\n    requestTreeResponse,\n    forceUpdateRovingTabIndex,\n  };\n\n  return { tree };\n};\n"],"names":["useFlatTreeContextValues_unstable","state","openItems","level","contextType","treeType","checkedItems","selectionMode","appearance","size","requestTreeResponse","forceUpdateRovingTabIndex","tree"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAGaA;;;eAAAA;;;AAAN,MAAMA,oCAAoC,CAACC;IAChD,MAAM,EACJC,SAAS,EACTC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,IAAI,EACJC,mBAAmB,EACnBC,yBAAyB,EAC1B,GAAGV;IACJ;;;GAGC,GACD,MAAMW,OAAyB;QAC7BP;QACAI;QACAP;QACAM;QACAF;QACAC;QACAH;QACAD;QACAO;QACAC;IACF;IAEA,OAAO;QAAEC;IAAK;AAChB"}
+{"version":3,"sources":["../src/components/FlatTree/useFlatTreeContextValues.ts"],"sourcesContent":["import type { TreeContextValue } from '../../contexts';\nimport type { FlatTreeContextValues, FlatTreeState } from './FlatTree.types';\n\nexport const useFlatTreeContextValues_unstable = (state: FlatTreeState): FlatTreeContextValues => {\n  const {\n    openItems,\n    level,\n    contextType,\n    treeType,\n    checkedItems,\n    selectionMode,\n    navigationMode,\n    appearance,\n    size,\n    requestTreeResponse,\n    forceUpdateRovingTabIndex,\n  } = state;\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const tree: TreeContextValue = {\n    treeType,\n    size,\n    openItems,\n    appearance,\n    checkedItems,\n    selectionMode,\n    navigationMode,\n    contextType,\n    level,\n    requestTreeResponse,\n    forceUpdateRovingTabIndex,\n  };\n\n  return { tree };\n};\n"],"names":["useFlatTreeContextValues_unstable","state","openItems","level","contextType","treeType","checkedItems","selectionMode","navigationMode","appearance","size","requestTreeResponse","forceUpdateRovingTabIndex","tree"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAGaA;;;eAAAA;;;AAAN,MAAMA,oCAAoC,CAACC;IAChD,MAAM,EACJC,SAAS,EACTC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,UAAU,EACVC,IAAI,EACJC,mBAAmB,EACnBC,yBAAyB,EAC1B,GAAGX;IACJ;;;GAGC,GACD,MAAMY,OAAyB;QAC7BR;QACAK;QACAR;QACAO;QACAH;QACAC;QACAC;QACAJ;QACAD;QACAQ;QACAC;IACF;IAEA,OAAO;QAAEC;IAAK;AAChB"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tree/Tree.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, SelectionMode, Slot } from '@fluentui/react-utilities';\nimport type { TreeContextValue, SubtreeContextValue } from '../../contexts';\nimport type { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport type { TreeItemValue } from '../TreeItem/TreeItem.types';\nimport { CheckboxProps } from '@fluentui/react-checkbox';\nimport { RadioProps } from '@fluentui/react-radio';\n\ntype MultiSelectValue = NonNullable<CheckboxProps['checked']>;\ntype SingleSelectValue = NonNullable<RadioProps['checked']>;\nexport type TreeSelectionValue = MultiSelectValue | SingleSelectValue;\n\nexport type TreeSlots = {\n  root: Slot<'div'>;\n  collapseMotion?: Slot<PresenceMotionSlotProps>;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable = {\n  target: HTMLElement;\n  value: TreeItemValue;\n  parentValue: TreeItemValue | undefined;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: 'TypeAhead' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowUp }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowDown }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Home }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof End }\n);\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];\n\nexport type TreeOpenChangeData = {\n  open: boolean;\n  openItems: Set<TreeItemValue>;\n  value: TreeItemValue;\n  target: HTMLElement;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'ExpandIconClick' }\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  /**\n   * @deprecated\n   * Use `type: 'Click'` instead of Enter,\n   * an enter press will trigger a click event, which will trigger an open change,\n   * so there is no need to have a separate type for it.\n   */\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Enter }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n);\n\n/**\n * @internal\n *\n * To avoid breaking changes on TreeNavigationData\n * we are creating a new type that extends the old one\n * and adds the new methods, and this type will not be exported\n */\ntype TreeNavigationDataParam = TreeNavigationData_unstable & {\n  preventScroll(): void;\n  isScrollPrevented(): boolean;\n};\n\nexport type TreeOpenChangeEvent = TreeOpenChangeData['event'];\n\nexport type TreeCheckedChangeData = {\n  value: TreeItemValue;\n  checkedItems: Map<TreeItemValue, TreeSelectionValue>;\n  target: HTMLElement;\n  event: React.ChangeEvent<HTMLElement>;\n  type: 'Change';\n} & (\n  | {\n      selectionMode: 'multiselect';\n      checked: MultiSelectValue;\n    }\n  | {\n      selectionMode: 'single';\n      checked: SingleSelectValue;\n    }\n);\n\nexport type TreeCheckedChangeEvent = TreeCheckedChangeData['event'];\n\nexport type TreeContextValues = {\n  tree: TreeContextValue | SubtreeContextValue;\n};\n\nexport type TreeProps = ComponentProps<TreeSlots> & {\n  /**\n   * A tree item can have various appearances:\n   * - 'subtle' (default): The default tree item styles.\n   * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n   * - 'transparent': Removes background color.\n   * @default 'subtle'\n   */\n  appearance?: 'subtle' | 'subtle-alpha' | 'transparent';\n  /**\n   * Size of the tree item.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Controls the state of the open tree items.\n   * These property is ignored for subtrees.\n   */\n  openItems?: Iterable<TreeItemValue>;\n  /**\n   * This refers to a list of ids of default opened items.\n   * This property is ignored for subtrees.\n   */\n  defaultOpenItems?: Iterable<TreeItemValue>;\n  /**\n   * Callback fired when the component changes value from open state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as open value and type of interaction that created the event.\n   */\n  onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;\n\n  /**\n   * Callback fired when navigation happens inside the component.\n   * These property is ignored for subtrees.\n   *\n   * FIXME: This method is not ideal, as navigation should be handled internally by tabster.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   */\n  onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationDataParam): void;\n\n  /**\n   * This refers to the selection mode of the tree.\n   * - undefined: No selection can be done.\n   * - 'single': Only one tree item can be selected, radio buttons are rendered.\n   * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.\n   *\n   * @default undefined\n   */\n  selectionMode?: SelectionMode;\n  /**\n   * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n   * Controls the state of the checked tree items.\n   * These property is ignored for subtrees.\n   */\n  checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n  /**\n   * Callback fired when the component changes value from checked state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as checked value and type of interaction that created the event.\n   */\n  onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;\n};\n\n/**\n * State used in rendering Tree\n */\nexport type TreeState = ComponentState<TreeSlots> & {\n  open: boolean;\n} & (TreeContextValue | SubtreeContextValue);\n"],"names":[],"rangeMappings":";;","mappings":"AAqKA;;CAEC"}
+{"version":3,"sources":["../src/components/Tree/Tree.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, SelectionMode, Slot } from '@fluentui/react-utilities';\nimport type { TreeContextValue, SubtreeContextValue } from '../../contexts';\nimport type { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport type { TreeItemValue } from '../TreeItem/TreeItem.types';\nimport { CheckboxProps } from '@fluentui/react-checkbox';\nimport { RadioProps } from '@fluentui/react-radio';\n\ntype MultiSelectValue = NonNullable<CheckboxProps['checked']>;\ntype SingleSelectValue = NonNullable<RadioProps['checked']>;\nexport type TreeSelectionValue = MultiSelectValue | SingleSelectValue;\n\nexport type TreeSlots = {\n  root: Slot<'div'>;\n  collapseMotion?: Slot<PresenceMotionSlotProps>;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable = {\n  target: HTMLElement;\n  value: TreeItemValue;\n  parentValue: TreeItemValue | undefined;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: 'TypeAhead' }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowUp }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowDown }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Home }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof End }\n);\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];\n\nexport type TreeOpenChangeData = {\n  open: boolean;\n  openItems: Set<TreeItemValue>;\n  value: TreeItemValue;\n  target: HTMLElement;\n} & (\n  | { event: React.MouseEvent<HTMLElement>; type: 'ExpandIconClick' }\n  | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n  /**\n   * @deprecated\n   * Use `type: 'Click'` instead of Enter,\n   * an enter press will trigger a click event, which will trigger an open change,\n   * so there is no need to have a separate type for it.\n   */\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof Enter }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n  | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n);\n\n/**\n * @internal\n *\n * To avoid breaking changes on TreeNavigationData\n * we are creating a new type that extends the old one\n * and adds the new methods, and this type will not be exported\n */\ntype TreeNavigationDataParam = TreeNavigationData_unstable & {\n  preventScroll(): void;\n  isScrollPrevented(): boolean;\n};\n\nexport type TreeOpenChangeEvent = TreeOpenChangeData['event'];\n\nexport type TreeCheckedChangeData = {\n  value: TreeItemValue;\n  checkedItems: Map<TreeItemValue, TreeSelectionValue>;\n  target: HTMLElement;\n  event: React.ChangeEvent<HTMLElement>;\n  type: 'Change';\n} & (\n  | {\n      selectionMode: 'multiselect';\n      checked: MultiSelectValue;\n    }\n  | {\n      selectionMode: 'single';\n      checked: SingleSelectValue;\n    }\n);\n\nexport type TreeCheckedChangeEvent = TreeCheckedChangeData['event'];\n\nexport type TreeContextValues = {\n  tree: TreeContextValue | SubtreeContextValue;\n};\n\nexport type TreeNavigationMode = 'tree' | 'treegrid';\n\nexport type TreeProps = ComponentProps<TreeSlots> & {\n  /**\n   * Indicates how navigation between a treeitem and its actions work\n   * - 'tree' (default): The default navigation, pressing right arrow key navigates inward the first inner children of a branch treeitem\n   * - 'treegrid': Pressing right arrow key navigate towards the actions of a treeitem\n   * @default 'tree'\n   */\n  navigationMode?: TreeNavigationMode;\n  /**\n   * A tree item can have various appearances:\n   * - 'subtle' (default): The default tree item styles.\n   * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n   * - 'transparent': Removes background color.\n   * @default 'subtle'\n   */\n  appearance?: 'subtle' | 'subtle-alpha' | 'transparent';\n  /**\n   * Size of the tree item.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * This refers to a list of ids of opened tree items.\n   * Controls the state of the open tree items.\n   * These property is ignored for subtrees.\n   */\n  openItems?: Iterable<TreeItemValue>;\n  /**\n   * This refers to a list of ids of default opened items.\n   * This property is ignored for subtrees.\n   */\n  defaultOpenItems?: Iterable<TreeItemValue>;\n  /**\n   * Callback fired when the component changes value from open state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as open value and type of interaction that created the event.\n   */\n  onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;\n\n  /**\n   * Callback fired when navigation happens inside the component.\n   * These property is ignored for subtrees.\n   *\n   * FIXME: This method is not ideal, as navigation should be handled internally by tabster.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   */\n  onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationDataParam): void;\n\n  /**\n   * This refers to the selection mode of the tree.\n   * - undefined: No selection can be done.\n   * - 'single': Only one tree item can be selected, radio buttons are rendered.\n   * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.\n   *\n   * @default undefined\n   */\n  selectionMode?: SelectionMode;\n  /**\n   * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n   * Controls the state of the checked tree items.\n   * These property is ignored for subtrees.\n   */\n  checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n  /**\n   * Callback fired when the component changes value from checked state.\n   * These property is ignored for subtrees.\n   *\n   * @param event - a React's Synthetic event\n   * @param data - A data object with relevant information,\n   * such as checked value and type of interaction that created the event.\n   */\n  onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;\n};\n\n/**\n * State used in rendering Tree\n */\nexport type TreeState = ComponentState<TreeSlots> & {\n  open: boolean;\n} & (TreeContextValue | SubtreeContextValue);\n"],"names":[],"rangeMappings":";;","mappings":"AA8KA;;CAEC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tree/index.ts"],"sourcesContent":["export { Tree } from './Tree';\nexport type {\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeContextValues,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n  TreeSelectionValue,\n  TreeSlots,\n  TreeState,\n} from './Tree.types';\nexport { useTree_unstable } from './useTree';\nexport { useTreeContextValues_unstable } from './useTreeContextValues';\nexport { treeClassNames, useTreeStyles_unstable } from './useTreeStyles.styles';\nexport { renderTree_unstable } from './renderTree';\n"],"names":["Tree","renderTree_unstable","treeClassNames","useTreeContextValues_unstable","useTreeStyles_unstable","useTree_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,IAAI;eAAJA,UAAI;;IAiBJC,mBAAmB;eAAnBA,+BAAmB;;IADnBC,cAAc;eAAdA,mCAAc;;IADdC,6BAA6B;eAA7BA,mDAA6B;;IACbC,sBAAsB;eAAtBA,2CAAsB;;IAFtCC,gBAAgB;eAAhBA,yBAAgB;;;sBAdJ;yBAcY;sCACa;qCACS;4BACnB"}
+{"version":3,"sources":["../src/components/Tree/index.ts"],"sourcesContent":["export { Tree } from './Tree';\nexport type {\n  TreeCheckedChangeData,\n  TreeCheckedChangeEvent,\n  TreeContextValues,\n  TreeNavigationData_unstable,\n  TreeNavigationEvent_unstable,\n  TreeOpenChangeData,\n  TreeOpenChangeEvent,\n  TreeProps,\n  TreeSelectionValue,\n  TreeSlots,\n  TreeState,\n  TreeNavigationMode,\n} from './Tree.types';\nexport { useTree_unstable } from './useTree';\nexport { useTreeContextValues_unstable } from './useTreeContextValues';\nexport { treeClassNames, useTreeStyles_unstable } from './useTreeStyles.styles';\nexport { renderTree_unstable } from './renderTree';\n"],"names":["Tree","renderTree_unstable","treeClassNames","useTreeContextValues_unstable","useTreeStyles_unstable","useTree_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,IAAI;eAAJA,UAAI;;IAkBJC,mBAAmB;eAAnBA,+BAAmB;;IADnBC,cAAc;eAAdA,mCAAc;;IADdC,6BAA6B;eAA7BA,mDAA6B;;IACbC,sBAAsB;eAAtBA,2CAAsB;;IAFtCC,gBAAgB;eAAhBA,yBAAgB;;;sBAfJ;yBAeY;sCACa;qCACS;4BACnB"}

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

@@ -32,7 +32,7 @@ function useNestedRootTree(props, ref) {
     'use no memo';
     const [openItems, setOpenItems] = (0, _useControllableOpenItems.useControllableOpenItems)(props);
     const checkedItems = (0, _useNestedControllableCheckedItems.useNestedCheckedItems)(props);
-    const navigation = (0, _useTreeNavigation.useTreeNavigation)();
+    const navigation = (0, _useTreeNavigation.useTreeNavigation)(props.navigationMode);
     return Object.assign((0, _useRootTree.useRootTree)({
         ...props,
         openItems,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tree/useTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeProps, TreeState } from './Tree.types';\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';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\n\nexport const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {\n  'use no memo';\n\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};\n\nfunction useNestedRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  'use no memo';\n\n  const [openItems, setOpenItems] = useControllableOpenItems(props);\n  const checkedItems = useNestedCheckedItems(props);\n  const navigation = useTreeNavigation();\n\n  return Object.assign(\n    useRootTree(\n      {\n        ...props,\n        openItems,\n        checkedItems,\n        onOpenChange: useEventCallback((event, data) => {\n          const nextOpenItems = createNextOpenItems(data, openItems);\n          props.onOpenChange?.(event, {\n            ...data,\n            openItems: ImmutableSet.dangerouslyGetInternalSet(nextOpenItems),\n          });\n          setOpenItems(nextOpenItems);\n        }),\n        onNavigation: useEventCallback((event, data) => {\n          props.onNavigation?.(event, data);\n          if (!event.isDefaultPrevented()) {\n            navigation.navigate(data, {\n              preventScroll: data.isScrollPrevented(),\n            });\n          }\n        }),\n        onCheckedChange: useEventCallback((event, data) => {\n          const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n          props.onCheckedChange?.(event, {\n            ...data,\n            checkedItems: ImmutableMap.dangerouslyGetInternalMap(nextCheckedItems),\n          });\n        }),\n      },\n      useMergedRefs(ref, navigation.treeRef),\n    ),\n    {\n      treeType: 'nested',\n      forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex,\n    } as const,\n  );\n}\n\nfunction useNestedSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  'use no memo';\n\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(/* #__DE-INDENT__ */ `\n        @fluentui/react-tree [useTree]:\n        Subtrees are not allowed in a FlatTree!\n        You cannot use a <Tree> component inside of a <FlatTree> component!\n      `);\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","nextOpenItems","createNextOpenItems","ImmutableSet","dangerouslyGetInternalSet","onNavigation","isDefaultPrevented","navigate","preventScroll","isScrollPrevented","onCheckedChange","nextCheckedItems","createNextNestedCheckedItems","ImmutableMap","dangerouslyGetInternalMap","useMergedRefs","treeRef","treeType","forceUpdateRovingTabIndex","process","env","NODE_ENV","useTreeContext_unstable","ctx","Error","useSubtree"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;gCACyB;0CAEc;mDACM;gCACrC;6BACH;4BACD;mCACO;6BACM;8BACX;8BACA;AAEtB,MAAMA,mBAAmB,CAACC,OAAkBC;IACjD;IAEA,MAAMC,SAASC,OAAMC,UAAU,CAACC,8BAAAA,MAAoBC;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOJ,SAASK,kBAAkBP,OAAOC,OAAOO,iBAAiBR,OAAOC;AAC1E;AAEA,SAASM,kBAAkBP,KAAgB,EAAEC,GAA2B;IACtE;IAEA,MAAM,CAACQ,WAAWC,aAAa,GAAGC,IAAAA,kDAAAA,EAAyBX;IAC3D,MAAMY,eAAeC,IAAAA,wDAAAA,EAAsBb;IAC3C,MAAMc,aAAaC,IAAAA,oCAAAA;IAEnB,OAAOC,OAAOC,MAAM,CAClBC,IAAAA,wBAAAA,EACE;QACE,GAAGlB,KAAK;QACRS;QACAG;QACAO,cAAcC,IAAAA,gCAAAA,EAAiB,CAACC,OAAOC;gBAErCtB;YADA,MAAMuB,gBAAgBC,IAAAA,6CAAAA,EAAoBF,MAAMb;YAChDT,CAAAA,sBAAAA,MAAMmB,YAAY,AAAZA,MAAY,QAAlBnB,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA,CAAAA,OAAqBqB,OAAO;gBAC1B,GAAGC,IAAI;gBACPb,WAAWgB,0BAAAA,CAAaC,yBAAyB,CAACH;YACpD;YACAb,aAAaa;QACf;QACAI,cAAcP,IAAAA,gCAAAA,EAAiB,CAACC,OAAOC;gBACrCtB;YAAAA,CAAAA,sBAAAA,MAAM2B,YAAY,AAAZA,MAAY,QAAlB3B,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA,CAAAA,OAAqBqB,OAAOC;YAC5B,IAAI,CAACD,MAAMO,kBAAkB,IAAI;gBAC/Bd,WAAWe,QAAQ,CAACP,MAAM;oBACxBQ,eAAeR,KAAKS,iBAAiB;gBACvC;YACF;QACF;QACAC,iBAAiBZ,IAAAA,gCAAAA,EAAiB,CAACC,OAAOC;gBAExCtB;YADA,MAAMiC,mBAAmBC,IAAAA,+DAAAA,EAA6BZ,MAAMV;YAC5DZ,CAAAA,yBAAAA,MAAMgC,eAAe,AAAfA,MAAe,QAArBhC,2BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,uBAAAA,IAAAA,CAAAA,OAAwBqB,OAAO;gBAC7B,GAAGC,IAAI;gBACPV,cAAcuB,0BAAAA,CAAaC,yBAAyB,CAACH;YACvD;QACF;IACF,GACAI,IAAAA,6BAAAA,EAAcpC,KAAKa,WAAWwB,OAAO,IAEvC;QACEC,UAAU;QACVC,2BAA2B1B,WAAW0B,yBAAyB;IACjE;AAEJ;AAEA,SAAShC,iBAAiBR,KAAgB,EAAEC,GAA2B;IACrE;IAEA,IAAIwC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,qEAAqE;QACrE,sDAAsD;QACtD,MAAMJ,WAAWK,IAAAA,oCAAAA,EAAwBC,CAAAA,MAAOA,IAAIN,QAAQ;QAC5D,IAAIA,aAAa,QAAQ;YACvB,MAAM,IAAIO,MAA2B,CAAC;;mEAItC,CAAC;QACH;IACF;IACA,OAAOC,IAAAA,sBAAAA,EAAW/C,OAAOC;AAC3B"}
+{"version":3,"sources":["../src/components/Tree/useTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeProps, TreeState } from './Tree.types';\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';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\n\nexport const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {\n  'use no memo';\n\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};\n\nfunction useNestedRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  'use no memo';\n\n  const [openItems, setOpenItems] = useControllableOpenItems(props);\n  const checkedItems = useNestedCheckedItems(props);\n  const navigation = useTreeNavigation(props.navigationMode);\n\n  return Object.assign(\n    useRootTree(\n      {\n        ...props,\n        openItems,\n        checkedItems,\n        onOpenChange: useEventCallback((event, data) => {\n          const nextOpenItems = createNextOpenItems(data, openItems);\n          props.onOpenChange?.(event, {\n            ...data,\n            openItems: ImmutableSet.dangerouslyGetInternalSet(nextOpenItems),\n          });\n          setOpenItems(nextOpenItems);\n        }),\n        onNavigation: useEventCallback((event, data) => {\n          props.onNavigation?.(event, data);\n          if (!event.isDefaultPrevented()) {\n            navigation.navigate(data, {\n              preventScroll: data.isScrollPrevented(),\n            });\n          }\n        }),\n        onCheckedChange: useEventCallback((event, data) => {\n          const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n          props.onCheckedChange?.(event, {\n            ...data,\n            checkedItems: ImmutableMap.dangerouslyGetInternalMap(nextCheckedItems),\n          });\n        }),\n      },\n      useMergedRefs(ref, navigation.treeRef),\n    ),\n    {\n      treeType: 'nested',\n      forceUpdateRovingTabIndex: navigation.forceUpdateRovingTabIndex,\n    } as const,\n  );\n}\n\nfunction useNestedSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  'use no memo';\n\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(/* #__DE-INDENT__ */ `\n        @fluentui/react-tree [useTree]:\n        Subtrees are not allowed in a FlatTree!\n        You cannot use a <Tree> component inside of a <FlatTree> component!\n      `);\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","navigationMode","Object","assign","useRootTree","onOpenChange","useEventCallback","event","data","nextOpenItems","createNextOpenItems","ImmutableSet","dangerouslyGetInternalSet","onNavigation","isDefaultPrevented","navigate","preventScroll","isScrollPrevented","onCheckedChange","nextCheckedItems","createNextNestedCheckedItems","ImmutableMap","dangerouslyGetInternalMap","useMergedRefs","treeRef","treeType","forceUpdateRovingTabIndex","process","env","NODE_ENV","useTreeContext_unstable","ctx","Error","useSubtree"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;gCACyB;0CAEc;mDACM;gCACrC;6BACH;4BACD;mCACO;6BACM;8BACX;8BACA;AAEtB,MAAMA,mBAAmB,CAACC,OAAkBC;IACjD;IAEA,MAAMC,SAASC,OAAMC,UAAU,CAACC,8BAAAA,MAAoBC;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOJ,SAASK,kBAAkBP,OAAOC,OAAOO,iBAAiBR,OAAOC;AAC1E;AAEA,SAASM,kBAAkBP,KAAgB,EAAEC,GAA2B;IACtE;IAEA,MAAM,CAACQ,WAAWC,aAAa,GAAGC,IAAAA,kDAAAA,EAAyBX;IAC3D,MAAMY,eAAeC,IAAAA,wDAAAA,EAAsBb;IAC3C,MAAMc,aAAaC,IAAAA,oCAAAA,EAAkBf,MAAMgB,cAAc;IAEzD,OAAOC,OAAOC,MAAM,CAClBC,IAAAA,wBAAAA,EACE;QACE,GAAGnB,KAAK;QACRS;QACAG;QACAQ,cAAcC,IAAAA,gCAAAA,EAAiB,CAACC,OAAOC;gBAErCvB;YADA,MAAMwB,gBAAgBC,IAAAA,6CAAAA,EAAoBF,MAAMd;YAChDT,CAAAA,sBAAAA,MAAMoB,YAAY,AAAZA,MAAY,QAAlBpB,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA,CAAAA,OAAqBsB,OAAO;gBAC1B,GAAGC,IAAI;gBACPd,WAAWiB,0BAAAA,CAAaC,yBAAyB,CAACH;YACpD;YACAd,aAAac;QACf;QACAI,cAAcP,IAAAA,gCAAAA,EAAiB,CAACC,OAAOC;gBACrCvB;YAAAA,CAAAA,sBAAAA,MAAM4B,YAAY,AAAZA,MAAY,QAAlB5B,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA,CAAAA,OAAqBsB,OAAOC;YAC5B,IAAI,CAACD,MAAMO,kBAAkB,IAAI;gBAC/Bf,WAAWgB,QAAQ,CAACP,MAAM;oBACxBQ,eAAeR,KAAKS,iBAAiB;gBACvC;YACF;QACF;QACAC,iBAAiBZ,IAAAA,gCAAAA,EAAiB,CAACC,OAAOC;gBAExCvB;YADA,MAAMkC,mBAAmBC,IAAAA,+DAAAA,EAA6BZ,MAAMX;YAC5DZ,CAAAA,yBAAAA,MAAMiC,eAAe,AAAfA,MAAe,QAArBjC,2BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,uBAAAA,IAAAA,CAAAA,OAAwBsB,OAAO;gBAC7B,GAAGC,IAAI;gBACPX,cAAcwB,0BAAAA,CAAaC,yBAAyB,CAACH;YACvD;QACF;IACF,GACAI,IAAAA,6BAAAA,EAAcrC,KAAKa,WAAWyB,OAAO,IAEvC;QACEC,UAAU;QACVC,2BAA2B3B,WAAW2B,yBAAyB;IACjE;AAEJ;AAEA,SAASjC,iBAAiBR,KAAgB,EAAEC,GAA2B;IACrE;IAEA,IAAIyC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,qEAAqE;QACrE,sDAAsD;QACtD,MAAMJ,WAAWK,IAAAA,oCAAAA,EAAwBC,CAAAA,MAAOA,IAAIN,QAAQ;QAC5D,IAAIA,aAAa,QAAQ;YACvB,MAAM,IAAIO,MAA2B,CAAC;;mEAItC,CAAC;QACH;IACF;IACA,OAAOC,IAAAA,sBAAAA,EAAWhD,OAAOC;AAC3B"}

package/lib-commonjs/components/Tree/useTreeContextValues.js

@@ -13,7 +13,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 function useTreeContextValues_unstable(state) {
     'use no memo';
     if (state.contextType === 'root') {
-        const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse, forceUpdateRovingTabIndex } = state;
+        const { openItems, level, contextType, treeType, checkedItems, selectionMode, navigationMode, appearance, size, requestTreeResponse, forceUpdateRovingTabIndex } = state;
         /**
      * This context is created with "@fluentui/react-context-selector",
      * there is no sense to memoize it
@@ -24,6 +24,7 @@ function useTreeContextValues_unstable(state) {
             appearance,
             checkedItems,
             selectionMode,
+            navigationMode,
             contextType,
             level,
             requestTreeResponse,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tree/useTreeContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeContextValue } from '../../contexts';\nimport { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n  'use no memo';\n\n  if (state.contextType === 'root') {\n    const {\n      openItems,\n      level,\n      contextType,\n      treeType,\n      checkedItems,\n      selectionMode,\n      appearance,\n      size,\n      requestTreeResponse,\n      forceUpdateRovingTabIndex,\n    } = state;\n    /**\n     * This context is created with \"@fluentui/react-context-selector\",\n     * there is no sense to memoize it\n     */\n    const tree: TreeContextValue = {\n      treeType,\n      size,\n      openItems,\n      appearance,\n      checkedItems,\n      selectionMode,\n      contextType,\n      level,\n      requestTreeResponse,\n      forceUpdateRovingTabIndex,\n    };\n\n    return { tree };\n  }\n  return {\n    // contextType is statically determined by the context\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    tree: React.useMemo(() => ({ level: state.level, contextType: 'subtree' }), [state.level]),\n  };\n}\n"],"names":["useTreeContextValues_unstable","state","contextType","openItems","level","treeType","checkedItems","selectionMode","appearance","size","requestTreeResponse","forceUpdateRovingTabIndex","tree","React","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIgBA;;;eAAAA;;;;iEAJO;AAIhB,SAASA,8BAA8BC,KAAgB;IAC5D;IAEA,IAAIA,MAAMC,WAAW,KAAK,QAAQ;QAChC,MAAM,EACJC,SAAS,EACTC,KAAK,EACLF,WAAW,EACXG,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,IAAI,EACJC,mBAAmB,EACnBC,yBAAyB,EAC1B,GAAGV;QACJ;;;KAGC,GACD,MAAMW,OAAyB;YAC7BP;YACAI;YACAN;YACAK;YACAF;YACAC;YACAL;YACAE;YACAM;YACAC;QACF;QAEA,OAAO;YAAEC;QAAK;IAChB;IACA,OAAO;QACL,sDAAsD;QACtD,sDAAsD;QACtDA,MAAMC,OAAMC,OAAO,CAAC,IAAO,CAAA;gBAAEV,OAAOH,MAAMG,KAAK;gBAAEF,aAAa;YAAU,CAAA,GAAI;YAACD,MAAMG,KAAK;SAAC;IAC3F;AACF"}
+{"version":3,"sources":["../src/components/Tree/useTreeContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeContextValue } from '../../contexts';\nimport { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n  'use no memo';\n\n  if (state.contextType === 'root') {\n    const {\n      openItems,\n      level,\n      contextType,\n      treeType,\n      checkedItems,\n      selectionMode,\n      navigationMode,\n      appearance,\n      size,\n      requestTreeResponse,\n      forceUpdateRovingTabIndex,\n    } = state;\n    /**\n     * This context is created with \"@fluentui/react-context-selector\",\n     * there is no sense to memoize it\n     */\n    const tree: TreeContextValue = {\n      treeType,\n      size,\n      openItems,\n      appearance,\n      checkedItems,\n      selectionMode,\n      navigationMode,\n      contextType,\n      level,\n      requestTreeResponse,\n      forceUpdateRovingTabIndex,\n    };\n\n    return { tree };\n  }\n  return {\n    // contextType is statically determined by the context\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    tree: React.useMemo(() => ({ level: state.level, contextType: 'subtree' }), [state.level]),\n  };\n}\n"],"names":["useTreeContextValues_unstable","state","contextType","openItems","level","treeType","checkedItems","selectionMode","navigationMode","appearance","size","requestTreeResponse","forceUpdateRovingTabIndex","tree","React","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIgBA;;;eAAAA;;;;iEAJO;AAIhB,SAASA,8BAA8BC,KAAgB;IAC5D;IAEA,IAAIA,MAAMC,WAAW,KAAK,QAAQ;QAChC,MAAM,EACJC,SAAS,EACTC,KAAK,EACLF,WAAW,EACXG,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,UAAU,EACVC,IAAI,EACJC,mBAAmB,EACnBC,yBAAyB,EAC1B,GAAGX;QACJ;;;KAGC,GACD,MAAMY,OAAyB;YAC7BR;YACAK;YACAP;YACAM;YACAH;YACAC;YACAC;YACAN;YACAE;YACAO;YACAC;QACF;QAEA,OAAO;YAAEC;QAAK;IAChB;IACA,OAAO;QACL,sDAAsD;QACtD,sDAAsD;QACtDA,MAAMC,OAAMC,OAAO,CAAC,IAAO,CAAA;gBAAEX,OAAOH,MAAMG,KAAK;gBAAEF,aAAa;YAAU,CAAA,GAAI;YAACD,MAAMG,KAAK;SAAC;IAC3F;AACF"}

package/lib-commonjs/components/TreeItem/useTreeItem.js

@@ -25,6 +25,10 @@ function useTreeItem_unstable(props, ref) {
         warnIfNoProperPropsFlatTreeItem(props);
     }
     const requestTreeResponse = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.requestTreeResponse);
+    const navigationMode = (0, _contexts.useTreeContext_unstable)((ctx)=>{
+        var _ctx_navigationMode;
+        return (_ctx_navigationMode = ctx.navigationMode) !== null && _ctx_navigationMode !== void 0 ? _ctx_navigationMode : 'tree';
+    });
     const forceUpdateRovingTabIndex = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.forceUpdateRovingTabIndex);
     const { level: contextLevel } = (0, _contexts.useSubtreeContext_unstable)();
     const parentValue = (0, _contexts.useTreeItemContext_unstable)((ctx)=>{
@@ -127,73 +131,114 @@ function useTreeItem_unstable(props, ref) {
     });
     const handleKeyDown = (0, _reactutilities.useEventCallback)((event)=>{
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-        // Ignore keyboard events that do not originate from the current tree item.
-        if (event.isDefaultPrevented() || event.currentTarget !== event.target) {
+        if (event.isDefaultPrevented() || !treeItemRef.current) {
             return;
         }
+        const isEventFromTreeItem = event.currentTarget === event.target;
+        const isEventFromActions = actionsRef.current && actionsRef.current.contains(event.target);
         switch(event.key){
             case _keyboardkeys.Space:
-                if (selectionMode !== 'none') {
-                    var _selectionRef_current;
-                    (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();
-                    // Prevents the page from scrolling down when the spacebar is pressed
-                    event.preventDefault();
+                {
+                    if (!isEventFromTreeItem) {
+                        return;
+                    }
+                    if (selectionMode !== 'none') {
+                        var _selectionRef_current;
+                        (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();
+                        // Prevents the page from scrolling down when the spacebar is pressed
+                        event.preventDefault();
+                    }
+                    return;
                 }
-                return;
             case _tokens.treeDataTypes.Enter:
                 {
+                    if (!isEventFromTreeItem) {
+                        return;
+                    }
                     return event.currentTarget.click();
                 }
             case _tokens.treeDataTypes.End:
             case _tokens.treeDataTypes.Home:
             case _tokens.treeDataTypes.ArrowUp:
+                {
+                    if (!isEventFromTreeItem && !isEventFromActions) {
+                        return;
+                    }
+                    return requestTreeResponse({
+                        requestType: 'navigate',
+                        event,
+                        value,
+                        itemType,
+                        parentValue,
+                        type: event.key,
+                        target: event.currentTarget
+                    });
+                }
             case _tokens.treeDataTypes.ArrowDown:
-                return requestTreeResponse({
-                    requestType: 'navigate',
-                    event,
-                    value,
-                    itemType,
-                    parentValue,
-                    type: event.key,
-                    target: event.currentTarget
-                });
+                {
+                    if (!isEventFromTreeItem && !isEventFromActions) {
+                        return;
+                    }
+                    if (isEventFromActions && (!(0, _reactutilities.isHTMLElement)(event.target) || event.target.hasAttribute('aria-haspopup'))) {
+                        return;
+                    }
+                    return requestTreeResponse({
+                        requestType: 'navigate',
+                        event,
+                        value,
+                        itemType,
+                        parentValue,
+                        type: event.key,
+                        target: event.currentTarget
+                    });
+                }
             case _tokens.treeDataTypes.ArrowLeft:
                 {
                     // arrow left with alt key is reserved for history navigation
                     if (event.altKey) {
                         return;
                     }
-                    // do not navigate to parent if the item is on the top level
-                    if (level === 1 && !open) {
-                        return;
-                    }
                     const data = {
                         value,
                         event,
                         open: getNextOpen(),
                         type: event.key,
+                        itemType,
+                        parentValue,
                         target: event.currentTarget
                     };
+                    if (isEventFromActions && navigationMode === 'treegrid') {
+                        requestTreeResponse({
+                            ...data,
+                            requestType: 'navigate'
+                        });
+                        return;
+                    }
+                    if (!isEventFromTreeItem) {
+                        return;
+                    }
+                    // do not navigate to parent if the item is on the top level
+                    if (level === 1 && !open) {
+                        return;
+                    }
                     if (open) {
                         var _props_onOpenChange;
                         (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
                     }
                     requestTreeResponse({
                         ...data,
-                        itemType,
-                        parentValue,
                         requestType: open ? 'open' : 'navigate'
                     });
                     return;
                 }
             case _tokens.treeDataTypes.ArrowRight:
                 {
-                    // arrow right with alt key is reserved for history navigation
-                    if (event.altKey) {
+                    // Ignore keyboard events that do not originate from the current tree item.
+                    if (!isEventFromTreeItem) {
                         return;
                     }
-                    // do not navigate or open if the item is a leaf
-                    if (itemType === 'leaf') {
+                    // arrow right with alt key is reserved for history navigation
+                    if (event.altKey) {
                         return;
                     }
                     const data = {
@@ -203,19 +248,29 @@ function useTreeItem_unstable(props, ref) {
                         type: event.key,
                         target: event.currentTarget
                     };
-                    if (!open) {
+                    if (itemType === 'branch' && !open) {
                         var _props_onOpenChange1;
                         (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);
+                        requestTreeResponse({
+                            ...data,
+                            itemType,
+                            requestType: 'open'
+                        });
+                    } else {
+                        requestTreeResponse({
+                            ...data,
+                            itemType,
+                            parentValue,
+                            requestType: 'navigate'
+                        });
                     }
-                    requestTreeResponse({
-                        ...data,
-                        itemType,
-                        parentValue,
-                        requestType: open ? 'navigate' : 'open'
-                    });
                     return;
                 }
         }
+        // Ignore keyboard events that do not originate from the current tree item.
+        if (!isEventFromTreeItem) {
+            return;
+        }
         const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;
         if (isTypeAheadCharacter) {
             requestTreeResponse({

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TreeItem/useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport {\n  getIntrinsicElementProps,\n  useId,\n  useEventCallback,\n  slot,\n  elementContains,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TreeItemProps, TreeItemState, TreeItemValue } from './TreeItem.types';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport {\n  useTreeContext_unstable,\n  useSubtreeContext_unstable,\n  useTreeItemContext_unstable,\n  TreeContext,\n} from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { treeClassNames } from '../../Tree';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n  'use no memo';\n\n  const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n  if (treeType === 'flat') {\n    warnIfNoProperPropsFlatTreeItem(props);\n  }\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n  const forceUpdateRovingTabIndex = useTreeContext_unstable(ctx => ctx.forceUpdateRovingTabIndex);\n  const { level: contextLevel } = useSubtreeContext_unstable();\n  const parentValue = useTreeItemContext_unstable(ctx => props.parentValue ?? ctx.value);\n\n  // note, if the value is not externally provided,\n  // then selection and expansion will not work properly\n  const internalValue = useId('fuiTreeItemValue-');\n  const value: TreeItemValue = props.value ?? internalValue;\n\n  const {\n    onClick,\n    onKeyDown,\n    onChange,\n    as = 'div',\n    itemType = 'leaf',\n    'aria-level': level = contextLevel,\n    'aria-selected': ariaSelected,\n    'aria-expanded': ariaExpanded,\n    ...rest\n  } = props;\n\n  const actionsRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLDivElement>(null);\n  const layoutRef = React.useRef<HTMLDivElement>(null);\n  const subtreeRef = React.useRef<HTMLDivElement>(null);\n  const selectionRef = React.useRef<HTMLInputElement>(null);\n  const treeItemRef = React.useRef<HTMLDivElement>(null);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // This is acceptable since the NODE_ENV will not change during runtime\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const hasTreeContext = useHasParentContext(TreeContext);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (hasTreeContext) {\n        return;\n      }\n\n      if (treeItemRef.current?.querySelector(`.${treeClassNames.root}`)) {\n        // eslint-disable-next-line no-console\n        console.error(/** #__DE-INDENT__ */ `\n          @fluentui/react-tree [useTreeItem]:\n          <TreeItem> should be declared inside a <Tree> component.\n        `);\n      }\n    }, [hasTreeContext]);\n  }\n\n  React.useEffect(() => {\n    const treeItem = treeItemRef.current;\n    return () => {\n      // When the tree item is unmounted, we need to update the roving tab index\n      // if the tree item is the current tab indexed item\n      if (treeItem && treeItem.tabIndex === 0) {\n        forceUpdateRovingTabIndex?.();\n      }\n    };\n  }, [forceUpdateRovingTabIndex]);\n\n  const open = useTreeContext_unstable(ctx => props.open ?? ctx.openItems.has(value));\n  const getNextOpen = () => (itemType === 'branch' ? !open : open);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n  const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n\n  const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    const isEventFromActions = () => actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n\n    const isEventFromSubtree = () => subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n\n    const isEventFromSelection = () => selectionRef.current?.contains(event.target as Node);\n\n    const isEventFromExpandIcon = expandIconRef.current?.contains(event.target as Node);\n\n    if (isEventFromActions() || isEventFromSubtree() || isEventFromSelection()) {\n      return;\n    } else if (!isEventFromExpandIcon) {\n      onClick?.(event);\n    }\n    if (event.isDefaultPrevented() || itemType === 'leaf') {\n      return;\n    }\n\n    ReactDOM.unstable_batchedUpdates(() => {\n      const data = {\n        event,\n        value,\n        open: getNextOpen(),\n        target: event.currentTarget,\n        type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n      } as const;\n      props.onOpenChange?.(event, data);\n      requestTreeResponse({\n        ...data,\n        itemType,\n        requestType: 'open',\n      });\n      requestTreeResponse({\n        ...data,\n        itemType,\n        parentValue,\n        requestType: 'navigate',\n        type: treeDataTypes.Click,\n      });\n    });\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    // Ignore keyboard events that do not originate from the current tree item.\n    if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n      return;\n    }\n    switch (event.key) {\n      case Space:\n        if (selectionMode !== 'none') {\n          selectionRef.current?.click();\n          // Prevents the page from scrolling down when the spacebar is pressed\n          event.preventDefault();\n        }\n        return;\n      case treeDataTypes.Enter: {\n        return event.currentTarget.click();\n      }\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n        return requestTreeResponse({\n          requestType: 'navigate',\n          event,\n          value,\n          itemType,\n          parentValue,\n          type: event.key,\n          target: event.currentTarget,\n        });\n      case treeDataTypes.ArrowLeft: {\n        // arrow left with alt key is reserved for history navigation\n        if (event.altKey) {\n          return;\n        }\n        // do not navigate to parent if the item is on the top level\n        if (level === 1 && !open) {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: getNextOpen(),\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        if (open) {\n          props.onOpenChange?.(event, data);\n        }\n        requestTreeResponse({\n          ...data,\n          itemType,\n          parentValue,\n          requestType: open ? 'open' : 'navigate',\n        });\n        return;\n      }\n      case treeDataTypes.ArrowRight: {\n        // arrow right with alt key is reserved for history navigation\n        if (event.altKey) {\n          return;\n        }\n        // do not navigate or open if the item is a leaf\n        if (itemType === 'leaf') {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: getNextOpen(),\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        if (!open) {\n          props.onOpenChange?.(event, data);\n        }\n        requestTreeResponse({\n          ...data,\n          itemType,\n          parentValue,\n          requestType: open ? 'navigate' : 'open',\n        });\n        return;\n      }\n    }\n    const isTypeAheadCharacter =\n      event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      requestTreeResponse({\n        requestType: 'navigate',\n        event,\n        target: event.currentTarget,\n        value,\n        itemType,\n        type: treeDataTypes.TypeAhead,\n        parentValue,\n      });\n    }\n  });\n\n  const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    requestTreeResponse({\n      requestType: 'selection',\n      event,\n      value,\n      itemType,\n      type: 'Change',\n      target: event.currentTarget,\n      checked: checked === 'mixed' ? true : !checked,\n    });\n  });\n\n  return {\n    value,\n    open,\n    checked,\n    subtreeRef,\n    layoutRef,\n    selectionRef,\n    expandIconRef,\n    treeItemRef,\n    actionsRef,\n    itemType,\n    level,\n    components: {\n      root: 'div',\n    },\n    // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false\n    isAsideVisible: false,\n    // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false\n    isActionsVisible: false,\n    root: slot.always(\n      getIntrinsicElementProps(as, {\n        tabIndex: -1,\n        [dataTreeItemValueAttrName]: value,\n        role: 'treeitem',\n        ...rest,\n        ref: useMergedRefs(ref, treeItemRef),\n        'aria-level': level,\n        'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n        'aria-selected': ariaSelected !== undefined ? ariaSelected : selectionMode === 'single' ? !!checked : undefined,\n        'aria-expanded': ariaExpanded !== undefined ? ariaExpanded : itemType === 'branch' ? open : undefined,\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n        onChange: handleChange,\n      } as const),\n      { elementType: 'div' },\n    ),\n  };\n}\n\nfunction warnIfNoProperPropsFlatTreeItem(\n  props: Pick<TreeItemProps, 'aria-setsize' | 'aria-posinset' | 'aria-level' | 'parentValue'>,\n) {\n  if (process.env.NODE_ENV !== 'production') {\n    if (\n      props['aria-posinset'] === undefined ||\n      props['aria-setsize'] === undefined ||\n      props['aria-level'] === undefined ||\n      (props.parentValue === undefined && props['aria-level'] !== 1)\n    ) {\n      // eslint-disable-next-line no-console\n      console.error(/** #__DE-INDENT__ */ `\n        @fluentui/react-tree [${useTreeItem_unstable.name}]:\n        A flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\n        and \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n        - \"aria-posinset\": the position of this treeitem in the current level of the tree.\n        - \"aria-setsize\": the number of siblings in this level of the tree.\n        - \"aria-level\": the current level of the treeitem.\n        - \"parentValue\": the \"value\" property of the parent item of this item.\n      `);\n    }\n  }\n}\n"],"names":["useTreeItem_unstable","props","ref","treeType","useTreeContext_unstable","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","forceUpdateRovingTabIndex","level","contextLevel","useSubtreeContext_unstable","parentValue","useTreeItemContext_unstable","value","internalValue","useId","onClick","onKeyDown","onChange","as","itemType","ariaSelected","ariaExpanded","rest","actionsRef","React","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","treeItemRef","process","env","NODE_ENV","hasTreeContext","useHasParentContext","TreeContext","useEffect","current","querySelector","treeClassNames","root","console","error","treeItem","tabIndex","open","openItems","has","getNextOpen","selectionMode","checked","checkedItems","get","handleClick","useEventCallback","event","isEventFromActions","elementContains","target","isEventFromSubtree","isEventFromSelection","contains","isEventFromExpandIcon","isDefaultPrevented","ReactDOM","unstable_batchedUpdates","data","currentTarget","type","treeDataTypes","ExpandIconClick","Click","onOpenChange","requestType","handleKeyDown","key","Space","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","altKey","ArrowRight","isTypeAheadCharacter","length","match","ctrlKey","metaKey","TypeAhead","handleChange","components","isAsideVisible","isActionsVisible","slot","always","getIntrinsicElementProps","dataTreeItemValueAttrName","role","useMergedRefs","undefined","elementType","name"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/TreeItem/useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport {\n  getIntrinsicElementProps,\n  useId,\n  useEventCallback,\n  slot,\n  elementContains,\n  useMergedRefs,\n  isHTMLElement,\n} from '@fluentui/react-utilities';\nimport type { TreeItemProps, TreeItemState, TreeItemValue } from './TreeItem.types';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport {\n  useTreeContext_unstable,\n  useSubtreeContext_unstable,\n  useTreeItemContext_unstable,\n  TreeContext,\n} from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { treeClassNames } from '../../Tree';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n  'use no memo';\n\n  const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n  if (treeType === 'flat') {\n    warnIfNoProperPropsFlatTreeItem(props);\n  }\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n  const navigationMode = useTreeContext_unstable(ctx => ctx.navigationMode ?? 'tree');\n  const forceUpdateRovingTabIndex = useTreeContext_unstable(ctx => ctx.forceUpdateRovingTabIndex);\n  const { level: contextLevel } = useSubtreeContext_unstable();\n  const parentValue = useTreeItemContext_unstable(ctx => props.parentValue ?? ctx.value);\n\n  // note, if the value is not externally provided,\n  // then selection and expansion will not work properly\n  const internalValue = useId('fuiTreeItemValue-');\n  const value: TreeItemValue = props.value ?? internalValue;\n\n  const {\n    onClick,\n    onKeyDown,\n    onChange,\n    as = 'div',\n    itemType = 'leaf',\n    'aria-level': level = contextLevel,\n    'aria-selected': ariaSelected,\n    'aria-expanded': ariaExpanded,\n    ...rest\n  } = props;\n\n  const actionsRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLDivElement>(null);\n  const layoutRef = React.useRef<HTMLDivElement>(null);\n  const subtreeRef = React.useRef<HTMLDivElement>(null);\n  const selectionRef = React.useRef<HTMLInputElement>(null);\n  const treeItemRef = React.useRef<HTMLDivElement>(null);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // This is acceptable since the NODE_ENV will not change during runtime\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const hasTreeContext = useHasParentContext(TreeContext);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      if (hasTreeContext) {\n        return;\n      }\n\n      if (treeItemRef.current?.querySelector(`.${treeClassNames.root}`)) {\n        // eslint-disable-next-line no-console\n        console.error(/** #__DE-INDENT__ */ `\n          @fluentui/react-tree [useTreeItem]:\n          <TreeItem> should be declared inside a <Tree> component.\n        `);\n      }\n    }, [hasTreeContext]);\n  }\n\n  React.useEffect(() => {\n    const treeItem = treeItemRef.current;\n    return () => {\n      // When the tree item is unmounted, we need to update the roving tab index\n      // if the tree item is the current tab indexed item\n      if (treeItem && treeItem.tabIndex === 0) {\n        forceUpdateRovingTabIndex?.();\n      }\n    };\n  }, [forceUpdateRovingTabIndex]);\n\n  const open = useTreeContext_unstable(ctx => props.open ?? ctx.openItems.has(value));\n  const getNextOpen = () => (itemType === 'branch' ? !open : open);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n  const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n\n  const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    const isEventFromActions = () => actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n\n    const isEventFromSubtree = () => subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n\n    const isEventFromSelection = () => selectionRef.current?.contains(event.target as Node);\n\n    const isEventFromExpandIcon = expandIconRef.current?.contains(event.target as Node);\n\n    if (isEventFromActions() || isEventFromSubtree() || isEventFromSelection()) {\n      return;\n    } else if (!isEventFromExpandIcon) {\n      onClick?.(event);\n    }\n    if (event.isDefaultPrevented() || itemType === 'leaf') {\n      return;\n    }\n\n    ReactDOM.unstable_batchedUpdates(() => {\n      const data = {\n        event,\n        value,\n        open: getNextOpen(),\n        target: event.currentTarget,\n        type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n      } as const;\n      props.onOpenChange?.(event, data);\n      requestTreeResponse({\n        ...data,\n        itemType,\n        requestType: 'open',\n      });\n      requestTreeResponse({\n        ...data,\n        itemType,\n        parentValue,\n        requestType: 'navigate',\n        type: treeDataTypes.Click,\n      });\n    });\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    if (event.isDefaultPrevented() || !treeItemRef.current) {\n      return;\n    }\n    const isEventFromTreeItem = event.currentTarget === event.target;\n    const isEventFromActions = actionsRef.current && actionsRef.current.contains(event.target as Node);\n\n    switch (event.key) {\n      case Space: {\n        if (!isEventFromTreeItem) {\n          return;\n        }\n        if (selectionMode !== 'none') {\n          selectionRef.current?.click();\n          // Prevents the page from scrolling down when the spacebar is pressed\n          event.preventDefault();\n        }\n        return;\n      }\n      case treeDataTypes.Enter: {\n        if (!isEventFromTreeItem) {\n          return;\n        }\n        return event.currentTarget.click();\n      }\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp: {\n        if (!isEventFromTreeItem && !isEventFromActions) {\n          return;\n        }\n        return requestTreeResponse({\n          requestType: 'navigate',\n          event,\n          value,\n          itemType,\n          parentValue,\n          type: event.key,\n          target: event.currentTarget,\n        });\n      }\n      case treeDataTypes.ArrowDown: {\n        if (!isEventFromTreeItem && !isEventFromActions) {\n          return;\n        }\n        if (isEventFromActions && (!isHTMLElement(event.target) || event.target.hasAttribute('aria-haspopup'))) {\n          return;\n        }\n        return requestTreeResponse({\n          requestType: 'navigate',\n          event,\n          value,\n          itemType,\n          parentValue,\n          type: event.key,\n          target: event.currentTarget,\n        });\n      }\n      case treeDataTypes.ArrowLeft: {\n        // arrow left with alt key is reserved for history navigation\n        if (event.altKey) {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: getNextOpen(),\n          type: event.key,\n          itemType,\n          parentValue,\n          target: event.currentTarget,\n        } as const;\n\n        if (isEventFromActions && navigationMode === 'treegrid') {\n          requestTreeResponse({ ...data, requestType: 'navigate' });\n          return;\n        }\n        if (!isEventFromTreeItem) {\n          return;\n        }\n        // do not navigate to parent if the item is on the top level\n        if (level === 1 && !open) {\n          return;\n        }\n        if (open) {\n          props.onOpenChange?.(event, data);\n        }\n        requestTreeResponse({ ...data, requestType: open ? 'open' : 'navigate' });\n        return;\n      }\n      case treeDataTypes.ArrowRight: {\n        // Ignore keyboard events that do not originate from the current tree item.\n        if (!isEventFromTreeItem) {\n          return;\n        }\n        // arrow right with alt key is reserved for history navigation\n        if (event.altKey) {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: getNextOpen(),\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n\n        if (itemType === 'branch' && !open) {\n          props.onOpenChange?.(event, data);\n          requestTreeResponse({ ...data, itemType, requestType: 'open' });\n        } else {\n          requestTreeResponse({ ...data, itemType, parentValue, requestType: 'navigate' });\n        }\n        return;\n      }\n    }\n    // Ignore keyboard events that do not originate from the current tree item.\n    if (!isEventFromTreeItem) {\n      return;\n    }\n    const isTypeAheadCharacter =\n      event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      requestTreeResponse({\n        requestType: 'navigate',\n        event,\n        target: event.currentTarget,\n        value,\n        itemType,\n        type: treeDataTypes.TypeAhead,\n        parentValue,\n      });\n    }\n  });\n\n  const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    requestTreeResponse({\n      requestType: 'selection',\n      event,\n      value,\n      itemType,\n      type: 'Change',\n      target: event.currentTarget,\n      checked: checked === 'mixed' ? true : !checked,\n    });\n  });\n\n  return {\n    value,\n    open,\n    checked,\n    subtreeRef,\n    layoutRef,\n    selectionRef,\n    expandIconRef,\n    treeItemRef,\n    actionsRef,\n    itemType,\n    level,\n    components: {\n      root: 'div',\n    },\n    // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false\n    isAsideVisible: false,\n    // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false\n    isActionsVisible: false,\n    root: slot.always(\n      getIntrinsicElementProps(as, {\n        tabIndex: -1,\n        [dataTreeItemValueAttrName]: value,\n        role: 'treeitem',\n        ...rest,\n        ref: useMergedRefs(ref, treeItemRef),\n        'aria-level': level,\n        'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n        'aria-selected': ariaSelected !== undefined ? ariaSelected : selectionMode === 'single' ? !!checked : undefined,\n        'aria-expanded': ariaExpanded !== undefined ? ariaExpanded : itemType === 'branch' ? open : undefined,\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n        onChange: handleChange,\n      } as const),\n      { elementType: 'div' },\n    ),\n  };\n}\n\nfunction warnIfNoProperPropsFlatTreeItem(\n  props: Pick<TreeItemProps, 'aria-setsize' | 'aria-posinset' | 'aria-level' | 'parentValue'>,\n) {\n  if (process.env.NODE_ENV !== 'production') {\n    if (\n      props['aria-posinset'] === undefined ||\n      props['aria-setsize'] === undefined ||\n      props['aria-level'] === undefined ||\n      (props.parentValue === undefined && props['aria-level'] !== 1)\n    ) {\n      // eslint-disable-next-line no-console\n      console.error(/** #__DE-INDENT__ */ `\n        @fluentui/react-tree [${useTreeItem_unstable.name}]:\n        A flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\n        and \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n        - \"aria-posinset\": the position of this treeitem in the current level of the tree.\n        - \"aria-setsize\": the number of siblings in this level of the tree.\n        - \"aria-level\": the current level of the treeitem.\n        - \"parentValue\": the \"value\" property of the parent item of this item.\n      `);\n    }\n  }\n}\n"],"names":["useTreeItem_unstable","props","ref","treeType","useTreeContext_unstable","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","navigationMode","forceUpdateRovingTabIndex","level","contextLevel","useSubtreeContext_unstable","parentValue","useTreeItemContext_unstable","value","internalValue","useId","onClick","onKeyDown","onChange","as","itemType","ariaSelected","ariaExpanded","rest","actionsRef","React","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","treeItemRef","process","env","NODE_ENV","hasTreeContext","useHasParentContext","TreeContext","useEffect","current","querySelector","treeClassNames","root","console","error","treeItem","tabIndex","open","openItems","has","getNextOpen","selectionMode","checked","checkedItems","get","handleClick","useEventCallback","event","isEventFromActions","elementContains","target","isEventFromSubtree","isEventFromSelection","contains","isEventFromExpandIcon","isDefaultPrevented","ReactDOM","unstable_batchedUpdates","data","currentTarget","type","treeDataTypes","ExpandIconClick","Click","onOpenChange","requestType","handleKeyDown","isEventFromTreeItem","key","Space","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","isHTMLElement","hasAttribute","ArrowLeft","altKey","ArrowRight","isTypeAheadCharacter","length","match","ctrlKey","metaKey","TypeAhead","handleChange","components","isAsideVisible","isActionsVisible","slot","always","getIntrinsicElementProps","dataTreeItemValueAttrName","role","useMergedRefs","undefined","elementType","name"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}