@fluentui/react-tree 9.13.1 → 9.14.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useFlatTreeNavigation.ts"],"sourcesContent":["import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../Tree';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { TreeItemValue } from '../TreeItem';\nimport { dataTreeItemValueAttrName } from '../utils/getTreeItemValueFromElement';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { TreeNavigationMode } from '../components/Tree/Tree.types';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout';\n\nexport function useFlatTreeNavigation(navigationMode: TreeNavigationMode = 'tree'): {\n  navigate: (data: TreeNavigationData_unstable) => void;\n  rootRef: React.RefCallback<HTMLElement>;\n  forceUpdateRovingTabIndex: () => void;\n} {\n  'use no memo';\n\n  const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n  const { rove, forceUpdate: forceUpdateRovingTabIndex, initialize: initializeRovingTabIndex } = useRovingTabIndex();\n  const { findFirstFocusable } = useFocusFinders();\n\n  const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n    root => {\n      if (walkerRef.current && root) {\n        initializeRovingTabIndex(walkerRef.current);\n      }\n    },\n    [initializeRovingTabIndex, walkerRef],\n  );\n\n  function 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        const nextElement = parentElement(data.parentValue, walkerRef.current);\n        if (!nextElement && process.env.NODE_ENV !== 'production') {\n          // eslint-disable-next-line no-console\n          console.warn(\n            /* #__DE-INDENT__ */ `\n            @fluentui/react-tree [useFlatTreeNavigation]:\n            \\'ArrowLeft\\' navigation was not possible.\n            No parent element found for the current element:\n          `,\n            data.target,\n          );\n        }\n        return nextElement;\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        const nextElement = firstChild(data.target, walkerRef.current);\n        if (!nextElement && process.env.NODE_ENV !== 'production') {\n          const ariaLevel = Number(data.target.getAttribute('aria-level'));\n          // eslint-disable-next-line no-console\n          console.warn(\n            /* #__DE-INDENT__ */ `\n            @fluentui/react-tree [useFlatTreeNavigation]:\n            \\'ArrowRight\\' navigation was not possible.\n            No element with \"aria-posinset=1\" and \"aria-level=${ariaLevel + 1}\"\n            was found after the current element!\n          `,\n            data.target,\n          );\n        }\n        return nextElement;\n      }\n      case treeDataTypes.End:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.lastChild();\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  const navigate = useEventCallback((data: TreeNavigationData_unstable) => {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  });\n  return {\n    navigate,\n    rootRef: useMergedRefs<HTMLElement>(walkerRootRef, rootRefCallback),\n    forceUpdateRovingTabIndex,\n  } as const;\n}\n\nfunction firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLElement | null {\n  const nextElement = treeWalker.nextElement();\n  if (!nextElement) {\n    return null;\n  }\n  const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n  const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n  const targetAriaLevel = target.getAttribute('aria-level');\n  if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n    return nextElement;\n  }\n  return null;\n}\n\nfunction parentElement(parentValue: TreeItemValue | undefined, treeWalker: HTMLElementWalker) {\n  if (parentValue === undefined) {\n    return null;\n  }\n  return treeWalker.root.querySelector<HTMLElement>(`[${dataTreeItemValueAttrName}=\"${parentValue}\"]`);\n}\n\nconst queryActions = (target: HTMLElement) =>\n  target.querySelector<HTMLElement>(\n    `:scope > .${treeItemLayoutClassNames.root} > .${treeItemLayoutClassNames.actions}`,\n  );\n"],"names":["useEventCallback","useMergedRefs","nextTypeAheadElement","treeDataTypes","useRovingTabIndex","dataTreeItemValueAttrName","React","useHTMLElementWalkerRef","useFocusFinders","treeItemLayoutClassNames","useFlatTreeNavigation","navigationMode","walkerRef","rootRef","walkerRootRef","rove","forceUpdate","forceUpdateRovingTabIndex","initialize","initializeRovingTabIndex","findFirstFocusable","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","actions","queryActions","contains","ownerDocument","activeElement","nextElement","parentElement","parentValue","process","env","NODE_ENV","console","warn","ArrowRight","focus","firstChild","ariaLevel","Number","getAttribute","End","lastChild","Home","ArrowDown","ArrowUp","previousElement","navigate","treeWalker","nextElementAriaPosInSet","nextElementAriaLevel","targetAriaLevel","undefined","querySelector"],"mappings":"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"}
+{"version":3,"sources":["../src/hooks/useFlatTreeNavigation.ts"],"sourcesContent":["'use client';\n\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../Tree';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { TreeItemValue } from '../TreeItem';\nimport { dataTreeItemValueAttrName } from '../utils/getTreeItemValueFromElement';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { TreeNavigationMode } from '../components/Tree/Tree.types';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout';\n\nexport function useFlatTreeNavigation(navigationMode: TreeNavigationMode = 'tree'): {\n  navigate: (data: TreeNavigationData_unstable) => void;\n  rootRef: React.RefCallback<HTMLElement>;\n  forceUpdateRovingTabIndex: () => void;\n} {\n  'use no memo';\n\n  const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n  const { rove, forceUpdate: forceUpdateRovingTabIndex, initialize: initializeRovingTabIndex } = useRovingTabIndex();\n  const { findFirstFocusable } = useFocusFinders();\n\n  const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n    root => {\n      if (walkerRef.current && root) {\n        initializeRovingTabIndex(walkerRef.current);\n      }\n    },\n    [initializeRovingTabIndex, walkerRef],\n  );\n\n  function 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        const nextElement = parentElement(data.parentValue, walkerRef.current);\n        if (!nextElement && process.env.NODE_ENV !== 'production') {\n          // eslint-disable-next-line no-console\n          console.warn(\n            /* #__DE-INDENT__ */ `\n            @fluentui/react-tree [useFlatTreeNavigation]:\n            \\'ArrowLeft\\' navigation was not possible.\n            No parent element found for the current element:\n          `,\n            data.target,\n          );\n        }\n        return nextElement;\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        const nextElement = firstChild(data.target, walkerRef.current);\n        if (!nextElement && process.env.NODE_ENV !== 'production') {\n          const ariaLevel = Number(data.target.getAttribute('aria-level'));\n          // eslint-disable-next-line no-console\n          console.warn(\n            /* #__DE-INDENT__ */ `\n            @fluentui/react-tree [useFlatTreeNavigation]:\n            \\'ArrowRight\\' navigation was not possible.\n            No element with \"aria-posinset=1\" and \"aria-level=${ariaLevel + 1}\"\n            was found after the current element!\n          `,\n            data.target,\n          );\n        }\n        return nextElement;\n      }\n      case treeDataTypes.End:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.lastChild();\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  const navigate = useEventCallback((data: TreeNavigationData_unstable) => {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  });\n  return {\n    navigate,\n    rootRef: useMergedRefs<HTMLElement>(walkerRootRef, rootRefCallback),\n    forceUpdateRovingTabIndex,\n  } as const;\n}\n\nfunction firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLElement | null {\n  const nextElement = treeWalker.nextElement();\n  if (!nextElement) {\n    return null;\n  }\n  const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n  const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n  const targetAriaLevel = target.getAttribute('aria-level');\n  if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n    return nextElement;\n  }\n  return null;\n}\n\nfunction parentElement(parentValue: TreeItemValue | undefined, treeWalker: HTMLElementWalker) {\n  if (parentValue === undefined) {\n    return null;\n  }\n  return treeWalker.root.querySelector<HTMLElement>(`[${dataTreeItemValueAttrName}=\"${parentValue}\"]`);\n}\n\nconst queryActions = (target: HTMLElement) =>\n  target.querySelector<HTMLElement>(\n    `:scope > .${treeItemLayoutClassNames.root} > .${treeItemLayoutClassNames.actions}`,\n  );\n"],"names":["useEventCallback","useMergedRefs","nextTypeAheadElement","treeDataTypes","useRovingTabIndex","dataTreeItemValueAttrName","React","useHTMLElementWalkerRef","useFocusFinders","treeItemLayoutClassNames","useFlatTreeNavigation","navigationMode","walkerRef","rootRef","walkerRootRef","rove","forceUpdate","forceUpdateRovingTabIndex","initialize","initializeRovingTabIndex","findFirstFocusable","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","actions","queryActions","contains","ownerDocument","activeElement","nextElement","parentElement","parentValue","process","env","NODE_ENV","console","warn","ArrowRight","focus","firstChild","ariaLevel","Number","getAttribute","End","lastChild","Home","ArrowDown","ArrowUp","previousElement","navigate","treeWalker","nextElementAriaPosInSet","nextElementAriaLevel","targetAriaLevel","undefined","querySelector"],"mappings":"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"}

package/lib-commonjs/hooks/useHTMLElementWalkerRef.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useHTMLElementWalkerRef.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { HTMLElementWalker, createHTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../utils/treeItemFilter';\n\nexport function useHTMLElementWalkerRef(): {\n  walkerRef: React.MutableRefObject<HTMLElementWalker | undefined>;\n  rootRef: React.Ref<HTMLElement>;\n} {\n  const { targetDocument } = useFluent_unstable();\n\n  const walkerRef = React.useRef<HTMLElementWalker>(undefined);\n\n  const rootRef: React.Ref<HTMLElement> = React.useCallback(\n    (root: HTMLElement) => {\n      walkerRef.current =\n        targetDocument && root ? createHTMLElementWalker(root, targetDocument, treeItemFilter) : undefined;\n    },\n    [targetDocument],\n  );\n  return { walkerRef, rootRef } as const;\n}\n"],"names":["React","useFluent_unstable","createHTMLElementWalker","treeItemFilter","useHTMLElementWalkerRef","targetDocument","walkerRef","useRef","undefined","rootRef","useCallback","root","current"],"mappings":";;;;+BAKgBI;;;;;;;iEALO,QAAQ;qCACI,kCAAkC;yCACV,mCAAmC;gCAC/D,0BAA0B;AAElD;IAIL,MAAM,EAAEC,cAAc,EAAE,OAAGJ,uCAAAA;IAE3B,MAAMK,YAAYN,OAAMO,MAAM,CAAoBC;IAElD,MAAMC,UAAkCT,OAAMU,WAAW,CACvD,CAACC;QACCL,UAAUM,OAAO,GACfP,kBAAkBM,WAAOT,gDAAAA,EAAwBS,MAAMN,gBAAgBF,8BAAAA,IAAkBK;IAC7F,GACA;QAACH;KAAe;IAElB,OAAO;QAAEC;QAAWG;IAAQ;AAC9B"}
+{"version":3,"sources":["../src/hooks/useHTMLElementWalkerRef.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { HTMLElementWalker, createHTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../utils/treeItemFilter';\n\nexport function useHTMLElementWalkerRef(): {\n  walkerRef: React.MutableRefObject<HTMLElementWalker | undefined>;\n  rootRef: React.Ref<HTMLElement>;\n} {\n  const { targetDocument } = useFluent_unstable();\n\n  const walkerRef = React.useRef<HTMLElementWalker>(undefined);\n\n  const rootRef: React.Ref<HTMLElement> = React.useCallback(\n    (root: HTMLElement) => {\n      walkerRef.current =\n        targetDocument && root ? createHTMLElementWalker(root, targetDocument, treeItemFilter) : undefined;\n    },\n    [targetDocument],\n  );\n  return { walkerRef, rootRef } as const;\n}\n"],"names":["React","useFluent_unstable","createHTMLElementWalker","treeItemFilter","useHTMLElementWalkerRef","targetDocument","walkerRef","useRef","undefined","rootRef","useCallback","root","current"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCACI,kCAAkC;yCACV,mCAAmC;gCAC/D,0BAA0B;AAElD,SAASI;IAId,MAAM,EAAEC,cAAc,EAAE,OAAGJ,uCAAAA;IAE3B,MAAMK,YAAYN,OAAMO,MAAM,CAAoBC;IAElD,MAAMC,UAAkCT,OAAMU,WAAW,CACvD,CAACC;QACCL,UAAUM,OAAO,GACfP,kBAAkBM,WAAOT,gDAAAA,EAAwBS,MAAMN,gBAAgBF,8BAAAA,IAAkBK;IAC7F,GACA;QAACH;KAAe;IAElB,OAAO;QAAEC;QAAWG;IAAQ;AAC9B"}

package/lib-commonjs/hooks/useRootTree.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useRootTree.ts"],"sourcesContent":["import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TreeCheckedChangeData, TreeProps, TreeState } from '../Tree';\nimport * as React from 'react';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport { TreeContextValue, TreeItemRequest } from '../contexts/treeContext';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\n\n/**\n * Create the state required to render the root level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useRootTree(\n  props: TreeProps,\n  ref: React.Ref<HTMLElement>,\n): Omit<TreeState & TreeContextValue, 'treeType'> {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n\n  const openItems = React.useMemo(() => ImmutableSet.from(props.openItems), [props.openItems]);\n  const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n\n  const requestOpenChange = (request: Extract<TreeItemRequest, { requestType: 'open' }>) => {\n    props.onOpenChange?.(request.event, {\n      ...request,\n      openItems: ImmutableSet.dangerouslyGetInternalSet(createNextOpenItems(request, openItems)),\n    });\n  };\n\n  const requestCheckedChange = (request: Extract<TreeItemRequest, { requestType: 'selection' }>) => {\n    if (selectionMode === 'none') {\n      return;\n    }\n    props.onCheckedChange?.(request.event, {\n      ...request,\n      selectionMode,\n      checkedItems: ImmutableMap.dangerouslyGetInternalMap(checkedItems),\n      // Casting is required here due to selection | multiselection spreading the union problem\n    } as TreeCheckedChangeData);\n  };\n\n  const requestNavigation = (request: Extract<TreeItemRequest, { requestType: 'navigate' }>) => {\n    let isScrollPrevented = false;\n    props.onNavigation?.(request.event, {\n      ...request,\n      preventScroll: () => {\n        isScrollPrevented = true;\n      },\n      isScrollPrevented: () => isScrollPrevented,\n    });\n    switch (request.type) {\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.Home:\n      case treeDataTypes.End:\n        // stop the default behavior of the event\n        // which is to scroll the page\n        request.event.preventDefault();\n    }\n  };\n\n  const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n    switch (request.requestType) {\n      case 'navigate':\n        return requestNavigation(request);\n      case 'open':\n        return requestOpenChange(request);\n      case 'selection':\n        return requestCheckedChange(request);\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n      collapseMotion: Collapse,\n    },\n    contextType: 'root',\n    selectionMode,\n    navigationMode: props.navigationMode ?? 'tree',\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    checkedItems,\n    requestTreeResponse,\n    forceUpdateRovingTabIndex: () => {\n      // noop\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role: 'tree',\n        'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    collapseMotion: undefined,\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn(/* #__DE-INDENT__ */ `\n        @fluentui/react-tree [useRootTree]:\n        Tree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined\n      `);\n    }\n  }\n}\n"],"names":["getIntrinsicElementProps","useEventCallback","slot","React","Collapse","createCheckedItems","treeDataTypes","createNextOpenItems","ImmutableSet","ImmutableMap","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","useMemo","from","checkedItems","requestOpenChange","request","onOpenChange","event","dangerouslyGetInternalSet","requestCheckedChange","onCheckedChange","dangerouslyGetInternalMap","requestNavigation","isScrollPrevented","onNavigation","preventScroll","type","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","requestType","components","root","collapseMotion","contextType","navigationMode","open","level","forceUpdateRovingTabIndex","always","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":"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"}
+{"version":3,"sources":["../src/hooks/useRootTree.ts"],"sourcesContent":["'use client';\n\nimport { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TreeCheckedChangeData, TreeProps, TreeState } from '../Tree';\nimport * as React from 'react';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport { TreeContextValue, TreeItemRequest } from '../contexts/treeContext';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\n\n/**\n * Create the state required to render the root level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useRootTree(\n  props: TreeProps,\n  ref: React.Ref<HTMLElement>,\n): Omit<TreeState & TreeContextValue, 'treeType'> {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n\n  const openItems = React.useMemo(() => ImmutableSet.from(props.openItems), [props.openItems]);\n  const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n\n  const requestOpenChange = (request: Extract<TreeItemRequest, { requestType: 'open' }>) => {\n    props.onOpenChange?.(request.event, {\n      ...request,\n      openItems: ImmutableSet.dangerouslyGetInternalSet(createNextOpenItems(request, openItems)),\n    });\n  };\n\n  const requestCheckedChange = (request: Extract<TreeItemRequest, { requestType: 'selection' }>) => {\n    if (selectionMode === 'none') {\n      return;\n    }\n    props.onCheckedChange?.(request.event, {\n      ...request,\n      selectionMode,\n      checkedItems: ImmutableMap.dangerouslyGetInternalMap(checkedItems),\n      // Casting is required here due to selection | multiselection spreading the union problem\n    } as TreeCheckedChangeData);\n  };\n\n  const requestNavigation = (request: Extract<TreeItemRequest, { requestType: 'navigate' }>) => {\n    let isScrollPrevented = false;\n    props.onNavigation?.(request.event, {\n      ...request,\n      preventScroll: () => {\n        isScrollPrevented = true;\n      },\n      isScrollPrevented: () => isScrollPrevented,\n    });\n    switch (request.type) {\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.Home:\n      case treeDataTypes.End:\n        // stop the default behavior of the event\n        // which is to scroll the page\n        request.event.preventDefault();\n    }\n  };\n\n  const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n    switch (request.requestType) {\n      case 'navigate':\n        return requestNavigation(request);\n      case 'open':\n        return requestOpenChange(request);\n      case 'selection':\n        return requestCheckedChange(request);\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n      collapseMotion: Collapse,\n    },\n    contextType: 'root',\n    selectionMode,\n    navigationMode: props.navigationMode ?? 'tree',\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    checkedItems,\n    requestTreeResponse,\n    forceUpdateRovingTabIndex: () => {\n      // noop\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role: 'tree',\n        'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    collapseMotion: undefined,\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn(/* #__DE-INDENT__ */ `\n        @fluentui/react-tree [useRootTree]:\n        Tree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined\n      `);\n    }\n  }\n}\n"],"names":["getIntrinsicElementProps","useEventCallback","slot","React","Collapse","createCheckedItems","treeDataTypes","createNextOpenItems","ImmutableSet","ImmutableMap","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","useMemo","from","checkedItems","requestOpenChange","request","onOpenChange","event","dangerouslyGetInternalSet","requestCheckedChange","onCheckedChange","dangerouslyGetInternalMap","requestNavigation","isScrollPrevented","onNavigation","preventScroll","type","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","requestType","components","root","collapseMotion","contextType","navigationMode","open","level","forceUpdateRovingTabIndex","always","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":"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"}

package/lib-commonjs/hooks/useRovingTabIndexes.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useRovingTabIndexes.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { useFocusedElementChange } from '@fluentui/react-tabster';\n\nconst findTreeItemRoot = (element: HTMLElement) => {\n  let parent = element.parentElement;\n  while (parent && parent.getAttribute('role') !== 'tree') {\n    parent = parent.parentElement;\n  }\n  return parent;\n};\n\n/**\n * @internal\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n */\nexport function useRovingTabIndex(): {\n  rove: (nextElement: HTMLElement, focusOptions?: FocusOptions) => void;\n  initialize: (walker: HTMLElementWalker) => void;\n  forceUpdate: () => void;\n} {\n  const currentElementRef = React.useRef<HTMLElement | null>(null);\n  const walkerRef = React.useRef<HTMLElementWalker | null>(null);\n  const { targetDocument } = useFluent();\n\n  useFocusedElementChange(element => {\n    if (element?.getAttribute('role') === 'treeitem' && walkerRef.current && walkerRef.current.root.contains(element)) {\n      const treeitemRoot = findTreeItemRoot(element);\n      if (walkerRef.current.root !== treeitemRoot) {\n        return;\n      }\n      rove(element);\n    }\n  });\n\n  const initialize = React.useCallback((walker: HTMLElementWalker) => {\n    walkerRef.current = walker;\n    walker.currentElement = walker.root;\n    let tabbableChild = walker.firstChild(element =>\n      element.tabIndex === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP,\n    );\n    walker.currentElement = walker.root;\n    tabbableChild ??= walker.firstChild();\n    if (!tabbableChild) {\n      return;\n    }\n    tabbableChild.tabIndex = 0;\n    currentElementRef.current = tabbableChild;\n    let nextElement: HTMLElement | null = null;\n    while ((nextElement = walker.nextElement()) && nextElement !== tabbableChild) {\n      nextElement.tabIndex = -1;\n    }\n  }, []);\n  const rove = React.useCallback((nextElement: HTMLElement, focusOptions?: FocusOptions) => {\n    if (!currentElementRef.current) {\n      return;\n    }\n    currentElementRef.current.tabIndex = -1;\n    nextElement.tabIndex = 0;\n    nextElement.focus(focusOptions);\n    currentElementRef.current = nextElement;\n  }, []);\n\n  const forceUpdate = React.useCallback(() => {\n    if (\n      (currentElementRef.current === null || !targetDocument?.body.contains(currentElementRef.current)) &&\n      walkerRef.current\n    ) {\n      initialize(walkerRef.current);\n    }\n  }, [targetDocument, initialize]);\n\n  return {\n    rove,\n    initialize,\n    forceUpdate,\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","useFocusedElementChange","findTreeItemRoot","element","parent","parentElement","getAttribute","useRovingTabIndex","currentElementRef","useRef","walkerRef","targetDocument","current","root","contains","treeitemRoot","rove","initialize","useCallback","walker","currentElement","tabbableChild","firstChild","tabIndex","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","nextElement","focusOptions","focus","forceUpdate","body"],"mappings":";;;;+BAiBgBS;;;;;;;iEAjBO,QAAQ;qCACiB,kCAAkC;8BAE1C,0BAA0B;AAElE,MAAML,mBAAmB,CAACC;IACxB,IAAIC,SAASD,QAAQE,aAAa;IAClC,MAAOD,UAAUA,OAAOE,YAAY,CAAC,YAAY,OAAQ;QACvDF,SAASA,OAAOC,aAAa;IAC/B;IACA,OAAOD;AACT;AAMO;IAKL,MAAMI,oBAAoBV,OAAMW,MAAM,CAAqB;IAC3D,MAAMC,YAAYZ,OAAMW,MAAM,CAA2B;IACzD,MAAM,EAAEE,cAAc,EAAE,GAAGX,2CAAAA;QAE3BC,qCAAAA,EAAwBE,CAAAA;QACtB,IAAIA,CAAAA,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASG,YAAY,CAAC,OAAA,MAAY,cAAcI,UAAUE,OAAO,IAAIF,UAAUE,OAAO,CAACC,IAAI,CAACC,QAAQ,CAACX,UAAU;YACjH,MAAMY,eAAeb,iBAAiBC;YACtC,IAAIO,UAAUE,OAAO,CAACC,IAAI,KAAKE,cAAc;gBAC3C;YACF;YACAC,KAAKb;QACP;IACF;IAEA,MAAMc,aAAanB,OAAMoB,WAAW,CAAC,CAACC;QACpCT,UAAUE,OAAO,GAAGO;QACpBA,OAAOC,cAAc,GAAGD,OAAON,IAAI;QACnC,IAAIQ,gBAAgBF,OAAOG,UAAU,CAACnB,CAAAA,UACpCA,QAAQoB,QAAQ,KAAK,IAAIC,WAAWC,aAAa,GAAGD,WAAWE,WAAW;QAE5EP,OAAOC,cAAc,GAAGD,OAAON,IAAI;QACnCQ,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,gBAAAA,gBAAkBF,OAAOG,UAAU;QACnC,IAAI,CAACD,eAAe;YAClB;QACF;QACAA,cAAcE,QAAQ,GAAG;QACzBf,kBAAkBI,OAAO,GAAGS;QAC5B,IAAIM,cAAkC;QACtC,MAAQA,CAAAA,cAAcR,OAAOQ,WAAW,EAAA,CAAC,IAAMA,gBAAgBN,cAAe;YAC5EM,YAAYJ,QAAQ,GAAG,CAAC;QAC1B;IACF,GAAG,EAAE;IACL,MAAMP,OAAOlB,OAAMoB,WAAW,CAAC,CAACS,aAA0BC;QACxD,IAAI,CAACpB,kBAAkBI,OAAO,EAAE;YAC9B;QACF;QACAJ,kBAAkBI,OAAO,CAACW,QAAQ,GAAG,CAAC;QACtCI,YAAYJ,QAAQ,GAAG;QACvBI,YAAYE,KAAK,CAACD;QAClBpB,kBAAkBI,OAAO,GAAGe;IAC9B,GAAG,EAAE;IAEL,MAAMG,cAAchC,OAAMoB,WAAW,CAAC;QACpC,IACGV,CAAAA,kBAAkBI,OAAO,KAAK,QAAQ,EAACD,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBoB,IAAI,CAACjB,QAAQ,CAACN,kBAAkBI,QAAO,CAAA,CAAA,IAC/FF,UAAUE,OAAO,EACjB;YACAK,WAAWP,UAAUE,OAAO;QAC9B;IACF,GAAG;QAACD;QAAgBM;KAAW;IAE/B,OAAO;QACLD;QACAC;QACAa;IACF;AACF"}
+{"version":3,"sources":["../src/hooks/useRovingTabIndexes.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { useFocusedElementChange } from '@fluentui/react-tabster';\n\nconst findTreeItemRoot = (element: HTMLElement) => {\n  let parent = element.parentElement;\n  while (parent && parent.getAttribute('role') !== 'tree') {\n    parent = parent.parentElement;\n  }\n  return parent;\n};\n\n/**\n * @internal\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n */\nexport function useRovingTabIndex(): {\n  rove: (nextElement: HTMLElement, focusOptions?: FocusOptions) => void;\n  initialize: (walker: HTMLElementWalker) => void;\n  forceUpdate: () => void;\n} {\n  const currentElementRef = React.useRef<HTMLElement | null>(null);\n  const walkerRef = React.useRef<HTMLElementWalker | null>(null);\n  const { targetDocument } = useFluent();\n\n  useFocusedElementChange(element => {\n    if (element?.getAttribute('role') === 'treeitem' && walkerRef.current && walkerRef.current.root.contains(element)) {\n      const treeitemRoot = findTreeItemRoot(element);\n      if (walkerRef.current.root !== treeitemRoot) {\n        return;\n      }\n      rove(element);\n    }\n  });\n\n  const initialize = React.useCallback((walker: HTMLElementWalker) => {\n    walkerRef.current = walker;\n    walker.currentElement = walker.root;\n    let tabbableChild = walker.firstChild(element =>\n      element.tabIndex === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP,\n    );\n    walker.currentElement = walker.root;\n    tabbableChild ??= walker.firstChild();\n    if (!tabbableChild) {\n      return;\n    }\n    tabbableChild.tabIndex = 0;\n    currentElementRef.current = tabbableChild;\n    let nextElement: HTMLElement | null = null;\n    while ((nextElement = walker.nextElement()) && nextElement !== tabbableChild) {\n      nextElement.tabIndex = -1;\n    }\n  }, []);\n  const rove = React.useCallback((nextElement: HTMLElement, focusOptions?: FocusOptions) => {\n    if (!currentElementRef.current) {\n      return;\n    }\n    currentElementRef.current.tabIndex = -1;\n    nextElement.tabIndex = 0;\n    nextElement.focus(focusOptions);\n    currentElementRef.current = nextElement;\n  }, []);\n\n  const forceUpdate = React.useCallback(() => {\n    if (\n      (currentElementRef.current === null || !targetDocument?.body.contains(currentElementRef.current)) &&\n      walkerRef.current\n    ) {\n      initialize(walkerRef.current);\n    }\n  }, [targetDocument, initialize]);\n\n  return {\n    rove,\n    initialize,\n    forceUpdate,\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","useFocusedElementChange","findTreeItemRoot","element","parent","parentElement","getAttribute","useRovingTabIndex","currentElementRef","useRef","walkerRef","targetDocument","current","root","contains","treeitemRoot","rove","initialize","useCallback","walker","currentElement","tabbableChild","firstChild","tabIndex","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","nextElement","focusOptions","focus","forceUpdate","body"],"mappings":"AAAA;;;;;+BAmBgBS;;;;;;;iEAjBO,QAAQ;qCACiB,kCAAkC;8BAE1C,0BAA0B;AAElE,MAAML,mBAAmB,CAACC;IACxB,IAAIC,SAASD,QAAQE,aAAa;IAClC,MAAOD,UAAUA,OAAOE,YAAY,CAAC,YAAY,OAAQ;QACvDF,SAASA,OAAOC,aAAa;IAC/B;IACA,OAAOD;AACT;AAMO;IAKL,MAAMI,oBAAoBV,OAAMW,MAAM,CAAqB;IAC3D,MAAMC,YAAYZ,OAAMW,MAAM,CAA2B;IACzD,MAAM,EAAEE,cAAc,EAAE,OAAGX,uCAAAA;QAE3BC,qCAAAA,EAAwBE,CAAAA;QACtB,IAAIA,CAAAA,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASG,YAAY,CAAC,OAAA,MAAY,cAAcI,UAAUE,OAAO,IAAIF,UAAUE,OAAO,CAACC,IAAI,CAACC,QAAQ,CAACX,UAAU;YACjH,MAAMY,eAAeb,iBAAiBC;YACtC,IAAIO,UAAUE,OAAO,CAACC,IAAI,KAAKE,cAAc;gBAC3C;YACF;YACAC,KAAKb;QACP;IACF;IAEA,MAAMc,aAAanB,OAAMoB,WAAW,CAAC,CAACC;QACpCT,UAAUE,OAAO,GAAGO;QACpBA,OAAOC,cAAc,GAAGD,OAAON,IAAI;QACnC,IAAIQ,gBAAgBF,OAAOG,UAAU,CAACnB,CAAAA,UACpCA,QAAQoB,QAAQ,KAAK,IAAIC,WAAWC,aAAa,GAAGD,WAAWE,WAAW;QAE5EP,OAAOC,cAAc,GAAGD,OAAON,IAAI;QACnCQ,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,gBAAAA,gBAAkBF,OAAOG,UAAU;QACnC,IAAI,CAACD,eAAe;YAClB;QACF;QACAA,cAAcE,QAAQ,GAAG;QACzBf,kBAAkBI,OAAO,GAAGS;QAC5B,IAAIM,cAAkC;QACtC,MAAQA,CAAAA,cAAcR,OAAOQ,WAAW,EAAA,CAAC,IAAMA,gBAAgBN,cAAe;YAC5EM,YAAYJ,QAAQ,GAAG,CAAC;QAC1B;IACF,GAAG,EAAE;IACL,MAAMP,OAAOlB,OAAMoB,WAAW,CAAC,CAACS,aAA0BC;QACxD,IAAI,CAACpB,kBAAkBI,OAAO,EAAE;YAC9B;QACF;QACAJ,kBAAkBI,OAAO,CAACW,QAAQ,GAAG,CAAC;QACtCI,YAAYJ,QAAQ,GAAG;QACvBI,YAAYE,KAAK,CAACD;QAClBpB,kBAAkBI,OAAO,GAAGe;IAC9B,GAAG,EAAE;IAEL,MAAMG,cAAchC,OAAMoB,WAAW,CAAC;QACpC,IACGV,CAAAA,kBAAkBI,OAAO,KAAK,QAAQ,EAACD,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBoB,IAAI,CAACjB,QAAQ,CAACN,kBAAkBI,QAAO,CAAA,CAAA,IAC/FF,UAAUE,OAAO,EACjB;YACAK,WAAWP,UAAUE,OAAO;QAC9B;IACF,GAAG;QAACD;QAAgBM;KAAW;IAE/B,OAAO;QACLD;QACAC;QACAa;IACF;AACF"}

package/lib-commonjs/hooks/useSubtree.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { SubtreeContextValue, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\n\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useSubtree(\n  props: TreeProps,\n  ref: React.Ref<HTMLElement>,\n): Omit<TreeState & SubtreeContextValue, 'treeType'> {\n  const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n\n  const { level: parentLevel } = useSubtreeContext_unstable();\n\n  const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n  return {\n    contextType: 'subtree',\n    open,\n    components: {\n      root: 'div',\n      collapseMotion: Collapse,\n    },\n    level: parentLevel + 1,\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, subtreeRef) as React.Ref<HTMLDivElement>,\n        role: 'group',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    collapseMotion: presenceMotionSlot(props.collapseMotion, {\n      elementType: Collapse,\n      defaultProps: {\n        visible: open,\n        unmountOnExit: true,\n      },\n    }),\n  };\n}\n"],"names":["React","useSubtreeContext_unstable","useTreeItemContext_unstable","getIntrinsicElementProps","useMergedRefs","slot","Collapse","presenceMotionSlot","useSubtree","props","ref","subtreeRef","ctx","level","parentLevel","open","contextType","components","root","collapseMotion","always","role","elementType","defaultProps","visible","unmountOnExit"],"mappings":";;;;+BAagBQ;;;;;;;iEAbO,QAAQ;uBAE8D,oBAAoB;gCACnD,4BAA4B;8CACjE,4CAA4C;6BAClC,yBAAyB;AAQrD,oBACLC,KAAgB,EAChBC,GAA2B;IAE3B,MAAMC,iBAAaT,kCAAAA,EAA4BU,CAAAA,MAAOA,IAAID,UAAU;IAEpE,MAAM,EAAEE,OAAOC,WAAW,EAAE,OAAGb,iCAAAA;IAE/B,MAAMc,WAAOb,kCAAAA,EAA4BU,CAAAA,MAAOA,IAAIG,IAAI;IAExD,OAAO;QACLC,aAAa;QACbD;QACAE,YAAY;YACVC,MAAM;YACNC,gBAAgBb,sCAAAA;QAClB;QACAO,OAAOC,cAAc;QACrBI,MAAMb,oBAAAA,CAAKe,MAAM,KACfjB,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FO,SAAKN,6BAAAA,EAAcM,KAAKC;YACxBU,MAAM;YACN,GAAGZ,KAAK;QACV,IACA;YAAEa,aAAa;QAAM;QAEvBH,oBAAgBZ,+BAAAA,EAAmBE,MAAMU,cAAc,EAAE;YACvDG,aAAahB,sCAAAA;YACbiB,cAAc;gBACZC,SAAST;gBACTU,eAAe;YACjB;QACF;IACF;AACF"}
+{"version":3,"sources":["../src/hooks/useSubtree.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { SubtreeContextValue, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\n\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useSubtree(\n  props: TreeProps,\n  ref: React.Ref<HTMLElement>,\n): Omit<TreeState & SubtreeContextValue, 'treeType'> {\n  const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n\n  const { level: parentLevel } = useSubtreeContext_unstable();\n\n  const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n  return {\n    contextType: 'subtree',\n    open,\n    components: {\n      root: 'div',\n      collapseMotion: Collapse,\n    },\n    level: parentLevel + 1,\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, subtreeRef) as React.Ref<HTMLDivElement>,\n        role: 'group',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    collapseMotion: presenceMotionSlot(props.collapseMotion, {\n      elementType: Collapse,\n      defaultProps: {\n        visible: open,\n        unmountOnExit: true,\n      },\n    }),\n  };\n}\n"],"names":["React","useSubtreeContext_unstable","useTreeItemContext_unstable","getIntrinsicElementProps","useMergedRefs","slot","Collapse","presenceMotionSlot","useSubtree","props","ref","subtreeRef","ctx","level","parentLevel","open","contextType","components","root","collapseMotion","always","role","elementType","defaultProps","visible","unmountOnExit"],"mappings":"AAAA;;;;;+BAegBQ;;;;;;;iEAbO,QAAQ;uBAE8D,oBAAoB;gCACnD,4BAA4B;8CACjE,4CAA4C;6BAClC,yBAAyB;AAQrD,oBACLC,KAAgB,EAChBC,GAA2B;IAE3B,MAAMC,iBAAaT,kCAAAA,EAA4BU,CAAAA,MAAOA,IAAID,UAAU;IAEpE,MAAM,EAAEE,OAAOC,WAAW,EAAE,GAAGb,qCAAAA;IAE/B,MAAMc,WAAOb,kCAAAA,EAA4BU,CAAAA,MAAOA,IAAIG,IAAI;IAExD,OAAO;QACLC,aAAa;QACbD;QACAE,YAAY;YACVC,MAAM;YACNC,gBAAgBb,sCAAAA;QAClB;QACAO,OAAOC,cAAc;QACrBI,MAAMb,oBAAAA,CAAKe,MAAM,KACfjB,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FO,SAAKN,6BAAAA,EAAcM,KAAKC;YACxBU,MAAM;YACN,GAAGZ,KAAK;QACV,IACA;YAAEa,aAAa;QAAM;QAEvBH,oBAAgBZ,+BAAAA,EAAmBE,MAAMU,cAAc,EAAE;YACvDG,aAAahB,sCAAAA;YACbiB,cAAc;gBACZC,SAAST;gBACTU,eAAe;YACjB;QACF;IACF;AACF"}

package/lib-commonjs/hooks/useTreeNavigation.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -79,6 +80,7 @@ function useTreeNavigation(navigationMode = 'tree') {
         if (nextElement) {
             rove(nextElement, focusOptions);
         }
+        return nextElement;
     }
     return {
         navigate,

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

@@ -1 +1 @@
-{"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  navigate: (data: TreeNavigationData_unstable, focusOptions?: FocusOptions) => void;\n  treeRef: React.RefCallback<HTMLElement>;\n  forceUpdateRovingTabIndex: () => void;\n} {\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"],"mappings":"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"}
+{"version":3,"sources":["../src/hooks/useTreeNavigation.ts"],"sourcesContent":["'use client';\n\nimport { 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 * Hook used to manage navigation in the tree.\n *\n * @param navigationMode - the navigation mode of the tree, 'tree' (default) or 'treegrid'\n */\nexport function useTreeNavigation(navigationMode: TreeNavigationMode = 'tree'): {\n  navigate: (data: TreeNavigationData_unstable, focusOptions?: FocusOptions) => void;\n  treeRef: React.RefCallback<HTMLElement>;\n  forceUpdateRovingTabIndex: () => void;\n} {\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    return nextElement;\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"],"mappings":"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"}

package/lib-commonjs/index.js

@@ -117,6 +117,9 @@ _export(exports, {
     useTreeItem_unstable: function() {
         return _TreeItem.useTreeItem_unstable;
     },
+    useTreeNavigation: function() {
+        return _useTreeNavigation.useTreeNavigation;
+    },
     useTreeStyles_unstable: function() {
         return _Tree.useTreeStyles_unstable;
     },
@@ -135,3 +138,4 @@ const _FlatTreeItem = require("./FlatTreeItem");
 const _TreeItemLayout = require("./TreeItemLayout");
 const _TreeItemPersonaLayout = require("./TreeItemPersonaLayout");
 const _flattenTree = require("./utils/flattenTree");
+const _useTreeNavigation = require("./hooks/useTreeNavigation");

package/lib-commonjs/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  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  TreeItemCSSProperties,\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"],"mappings":";;;;;;;;;;;IAyBEM,QAAQ;;;IAiDDoB;yCAAY;;;eAzEnB1B,UAAI;;;eAuDJoB,kBAAQ;;IAsBRO;6CAAc;;yBASO;eAArBK;;IA9CAf;yCAAgB;;;eANTL,0BAAY;;;eAAEC,2BAAa;;;eATlCN,4BAAkB;;;eAyEX8B,iCAAoB;;;eArE3B1B,iCAAuB;;iCAkDM;eAA7BkB;;IASAK,oCAAoC;;;;eA/BpCZ,iCAAuB;;uBApDJ;eAAnBjB;;;eAJAJ,oBAAc;;sBAuDI;eAAlBoB;;IAsBAO;uDAAwB;;;eAlCjBV,0BAAkB;;IA2CzBe,+BAA+B;;;;eA3D/BvB,2CAAiC;;;eADjCD,oCAA0B;;;eAD1BD,8BAAoB;;;eAoBbW,iDAA4B;;IAPnCH;mDAA0B;;;eAnC1BZ,mCAA6B;;;eAiC7BU,iCAAuB;;;eAsBvBU,2CAAiC;;;eArBjCT,qCAA2B;;;eA0C3Be,gDAAgC;;;eAChCC,0CAA0B;;;eAQ1BI,8DAAuC;;;eACvCC,wDAAiC;;;eAhCjCb,oCAA0B;;;eAE1BE,8BAAoB;;;eAzDpBtB,4BAAsB;;oBADN;eAAhBD;;;sBAIK,SAAS;0BAwBT,aAAa;8BAIwB,4BAA4B;0BAOjE,aAAa;wBAGe,iBAAiB;qCAEP,4CAA4C;0BAelF,aAAa;8BAYS,iBAAiB;gCASvC,mBAAmB;uCASnB,0BAA0B;6BAOI,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  TreeNavigationDataParam,\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  TreeItemCSSProperties,\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\nexport { useTreeNavigation } from './hooks/useTreeNavigation';\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","useTreeNavigation"],"mappings":";;;;;;;;;;;IA0BEM;iCAAQ;;gBAiDW;eAAZoB;;;eA1EP1B,UAAI;;YAwDI;eAARoB;;kBAsBc;eAAdO;;;eASAK,4CAAqB;;oBA9CL;eAAhBf;;;eANOL,0BAAY;;;eAAEC,2BAAa;;sBAThB;eAAlBN;;;eAyEO8B,iCAAoB;;IArE3B1B;gDAAuB;;IAkDvBkB;4DAA6B;;;eAS7BK,2DAAoC;;IA/BpCZ;gDAAuB;;;eArDvBjB,yBAAmB;;;eAJnBJ,oBAAc;;;eAwDdoB,4BAAkB;;;eAsBlBO,wCAAwB;;;eAlCjBV,0BAAkB;;;eA2CzBe,sDAA+B;;;eA3D/BvB,2CAAiC;;;eADjCD,oCAA0B;;;eAD1BD,8BAAoB;;;eAoBbW,iDAA4B;;;eAPnCH,oCAA0B;;;eApC1BZ,mCAA6B;;;eAkC7BU,iCAAuB;;;eAsBvBU,2CAAiC;;IArBjCT;oDAA2B;;;eA0C3Be,gDAAgC;;IAChCC,0BAA0B;;;;eAQ1BI,8DAAuC;;qCACN;eAAjCC;;;eAhCAb,oCAA0B;;;eAE1BE,8BAAoB;;;eAyCba,oCAAiB;;;eAnGxBnC,4BAAsB;;;eADtBD,sBAAgB;;;sBAIX,SAAS;0BAyBT,aAAa;8BAIwB,4BAA4B;0BAOjE,aAAa;wBAGe,iBAAiB;qCAEP,4CAA4C;0BAelF,aAAa;8BAYS,iBAAiB;gCASvC,mBAAmB;uCASnB,0BAA0B;6BAOI,sBAAsB;mCAGzB,4BAA4B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tree",
-  "version": "9.13.1",
+  "version": "9.14.0",
   "description": "Tree component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -21,20 +21,20 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-aria": "^9.17.0",
-    "@fluentui/react-avatar": "^9.9.6",
-    "@fluentui/react-button": "^9.6.6",
-    "@fluentui/react-checkbox": "^9.5.5",
-    "@fluentui/react-context-selector": "^9.2.7",
+    "@fluentui/react-aria": "^9.17.1",
+    "@fluentui/react-avatar": "^9.9.7",
+    "@fluentui/react-button": "^9.6.7",
+    "@fluentui/react-checkbox": "^9.5.6",
+    "@fluentui/react-context-selector": "^9.2.8",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-motion-components-preview": "^0.10.0",
-    "@fluentui/react-motion": "^9.10.4",
-    "@fluentui/react-radio": "^9.5.5",
-    "@fluentui/react-shared-contexts": "^9.25.1",
-    "@fluentui/react-tabster": "^9.26.5",
+    "@fluentui/react-motion-components-preview": "^0.10.1",
+    "@fluentui/react-motion": "^9.11.0",
+    "@fluentui/react-radio": "^9.5.6",
+    "@fluentui/react-shared-contexts": "^9.25.2",
+    "@fluentui/react-tabster": "^9.26.6",
     "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-utilities": "^9.24.1",
-    "@fluentui/react-jsx-runtime": "^9.2.0",
+    "@fluentui/react-utilities": "^9.25.0",
+    "@fluentui/react-jsx-runtime": "^9.2.1",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },