@fluentui/react-tree 9.0.0-beta.2 → 9.0.0-beta.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (267) hide show
  1. package/CHANGELOG.json +1028 -1
  2. package/CHANGELOG.md +281 -2
  3. package/dist/index.d.ts +244 -99
  4. package/lib/Tree.js +0 -1
  5. package/lib/Tree.js.map +1 -1
  6. package/lib/TreeItem.js +0 -1
  7. package/lib/TreeItem.js.map +1 -1
  8. package/lib/TreeItemAside.js +1 -0
  9. package/lib/TreeItemAside.js.map +1 -0
  10. package/lib/TreeItemLayout.js +0 -1
  11. package/lib/TreeItemLayout.js.map +1 -1
  12. package/lib/TreeItemPersonaLayout.js +0 -1
  13. package/lib/TreeItemPersonaLayout.js.map +1 -1
  14. package/lib/components/Tree/Tree.js +6 -8
  15. package/lib/components/Tree/Tree.js.map +1 -1
  16. package/lib/components/Tree/Tree.types.js +1 -2
  17. package/lib/components/Tree/Tree.types.js.map +1 -1
  18. package/lib/components/Tree/index.js +1 -2
  19. package/lib/components/Tree/index.js.map +1 -1
  20. package/lib/components/Tree/renderTree.js +7 -13
  21. package/lib/components/Tree/renderTree.js.map +1 -1
  22. package/lib/components/Tree/useRootTree.js +145 -0
  23. package/lib/components/Tree/useRootTree.js.map +1 -0
  24. package/lib/components/Tree/useSubtree.js +35 -0
  25. package/lib/components/Tree/useSubtree.js.map +1 -0
  26. package/lib/components/Tree/useTree.js +9 -103
  27. package/lib/components/Tree/useTree.js.map +1 -1
  28. package/lib/components/Tree/useTreeContextValues.js +12 -22
  29. package/lib/components/Tree/useTreeContextValues.js.map +1 -1
  30. package/lib/components/Tree/useTreeStyles.styles.js +30 -0
  31. package/lib/components/Tree/useTreeStyles.styles.js.map +1 -0
  32. package/lib/components/TreeItem/TreeItem.js +16 -9
  33. package/lib/components/TreeItem/TreeItem.js.map +1 -1
  34. package/lib/components/TreeItem/TreeItem.types.js +1 -2
  35. package/lib/components/TreeItem/TreeItem.types.js.map +1 -1
  36. package/lib/components/TreeItem/index.js +1 -2
  37. package/lib/components/TreeItem/index.js.map +1 -1
  38. package/lib/components/TreeItem/renderTreeItem.js +7 -25
  39. package/lib/components/TreeItem/renderTreeItem.js.map +1 -1
  40. package/lib/components/TreeItem/useTreeItem.js +114 -234
  41. package/lib/components/TreeItem/useTreeItem.js.map +1 -1
  42. package/lib/components/TreeItem/useTreeItemContextValues.js +18 -16
  43. package/lib/components/TreeItem/useTreeItemContextValues.js.map +1 -1
  44. package/lib/components/TreeItem/useTreeItemStyles.styles.js +102 -0
  45. package/lib/components/TreeItem/useTreeItemStyles.styles.js.map +1 -0
  46. package/lib/components/TreeItemAside/TreeItemAside.js +13 -0
  47. package/lib/components/TreeItemAside/TreeItemAside.js.map +1 -0
  48. package/lib/components/TreeItemAside/TreeItemAside.types.js +1 -0
  49. package/lib/components/TreeItemAside/TreeItemAside.types.js.map +1 -0
  50. package/lib/components/TreeItemAside/index.js +5 -0
  51. package/lib/components/TreeItemAside/index.js.map +1 -0
  52. package/lib/components/TreeItemAside/renderTreeItemAside.js +14 -0
  53. package/lib/components/TreeItemAside/renderTreeItemAside.js.map +1 -0
  54. package/lib/components/TreeItemAside/useTreeItemAside.js +30 -0
  55. package/lib/components/TreeItemAside/useTreeItemAside.js.map +1 -0
  56. package/lib/components/TreeItemAside/useTreeItemAsideStyles.styles.js +47 -0
  57. package/lib/components/TreeItemAside/useTreeItemAsideStyles.styles.js.map +1 -0
  58. package/lib/components/TreeItemChevron.js +24 -0
  59. package/lib/components/TreeItemChevron.js.map +1 -0
  60. package/lib/components/TreeItemLayout/TreeItemLayout.js +8 -8
  61. package/lib/components/TreeItemLayout/TreeItemLayout.js.map +1 -1
  62. package/lib/components/TreeItemLayout/TreeItemLayout.types.js +1 -2
  63. package/lib/components/TreeItemLayout/TreeItemLayout.types.js.map +1 -1
  64. package/lib/components/TreeItemLayout/index.js +1 -2
  65. package/lib/components/TreeItemLayout/index.js.map +1 -1
  66. package/lib/components/TreeItemLayout/renderTreeItemLayout.js +5 -21
  67. package/lib/components/TreeItemLayout/renderTreeItemLayout.js.map +1 -1
  68. package/lib/components/TreeItemLayout/useTreeItemLayout.js +38 -39
  69. package/lib/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
  70. package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js +138 -0
  71. package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map +1 -0
  72. package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js +9 -9
  73. package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js.map +1 -1
  74. package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js +1 -2
  75. package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js.map +1 -1
  76. package/lib/components/TreeItemPersonaLayout/index.js +1 -2
  77. package/lib/components/TreeItemPersonaLayout/index.js.map +1 -1
  78. package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js +7 -27
  79. package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map +1 -1
  80. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js +37 -48
  81. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js.map +1 -1
  82. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js +9 -10
  83. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js.map +1 -1
  84. package/lib/components/TreeItemPersonaLayout/{useTreeItemPersonaLayoutStyles.js → useTreeItemPersonaLayoutStyles.styles.js} +51 -30
  85. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map +1 -0
  86. package/lib/contexts/index.js +0 -1
  87. package/lib/contexts/index.js.map +1 -1
  88. package/lib/contexts/treeContext.js +9 -14
  89. package/lib/contexts/treeContext.js.map +1 -1
  90. package/lib/contexts/treeItemContext.js +13 -10
  91. package/lib/contexts/treeItemContext.js.map +1 -1
  92. package/lib/hooks/index.js +0 -1
  93. package/lib/hooks/index.js.map +1 -1
  94. package/lib/hooks/useFlatTree.js +71 -34
  95. package/lib/hooks/useFlatTree.js.map +1 -1
  96. package/lib/hooks/useFlatTreeNavigation.js +62 -62
  97. package/lib/hooks/useFlatTreeNavigation.js.map +1 -1
  98. package/lib/hooks/useHTMLElementWalker.js +78 -76
  99. package/lib/hooks/useHTMLElementWalker.js.map +1 -1
  100. package/lib/hooks/useNestedTreeNavigation.js +49 -49
  101. package/lib/hooks/useNestedTreeNavigation.js.map +1 -1
  102. package/lib/hooks/useOpenItemsState.js +18 -15
  103. package/lib/hooks/useOpenItemsState.js.map +1 -1
  104. package/lib/hooks/useRovingTabIndexes.js +46 -45
  105. package/lib/hooks/useRovingTabIndexes.js.map +1 -1
  106. package/lib/index.js +1 -1
  107. package/lib/index.js.map +1 -1
  108. package/lib/utils/ImmutableSet.js +27 -30
  109. package/lib/utils/ImmutableSet.js.map +1 -1
  110. package/lib/utils/assert.js +5 -5
  111. package/lib/utils/assert.js.map +1 -1
  112. package/lib/utils/createFlatTreeItems.js +120 -0
  113. package/lib/utils/createFlatTreeItems.js.map +1 -0
  114. package/lib/utils/flattenTree.js +58 -28
  115. package/lib/utils/flattenTree.js.map +1 -1
  116. package/lib/utils/nextTypeAheadElement.js +11 -12
  117. package/lib/utils/nextTypeAheadElement.js.map +1 -1
  118. package/lib/utils/normalizeOpenItems.js +6 -5
  119. package/lib/utils/normalizeOpenItems.js.map +1 -1
  120. package/lib/utils/tokens.js +13 -14
  121. package/lib/utils/tokens.js.map +1 -1
  122. package/lib/utils/treeItemFilter.js +2 -3
  123. package/lib/utils/treeItemFilter.js.map +1 -1
  124. package/lib-commonjs/Tree.js +3 -5
  125. package/lib-commonjs/Tree.js.map +1 -1
  126. package/lib-commonjs/TreeItem.js +3 -5
  127. package/lib-commonjs/TreeItem.js.map +1 -1
  128. package/lib-commonjs/TreeItemAside.js +6 -0
  129. package/lib-commonjs/TreeItemAside.js.map +1 -0
  130. package/lib-commonjs/TreeItemLayout.js +3 -5
  131. package/lib-commonjs/TreeItemLayout.js.map +1 -1
  132. package/lib-commonjs/TreeItemPersonaLayout.js +3 -5
  133. package/lib-commonjs/TreeItemPersonaLayout.js.map +1 -1
  134. package/lib-commonjs/components/Tree/Tree.js +17 -23
  135. package/lib-commonjs/components/Tree/Tree.js.map +1 -1
  136. package/lib-commonjs/components/Tree/Tree.types.js +3 -3
  137. package/lib-commonjs/components/Tree/Tree.types.js.map +1 -1
  138. package/lib-commonjs/components/Tree/index.js +8 -10
  139. package/lib-commonjs/components/Tree/index.js.map +1 -1
  140. package/lib-commonjs/components/Tree/renderTree.js +14 -19
  141. package/lib-commonjs/components/Tree/renderTree.js.map +1 -1
  142. package/lib-commonjs/components/Tree/useRootTree.js +149 -0
  143. package/lib-commonjs/components/Tree/useRootTree.js.map +1 -0
  144. package/lib-commonjs/components/Tree/useSubtree.js +39 -0
  145. package/lib-commonjs/components/Tree/useSubtree.js.map +1 -0
  146. package/lib-commonjs/components/Tree/useTree.js +16 -116
  147. package/lib-commonjs/components/Tree/useTree.js.map +1 -1
  148. package/lib-commonjs/components/Tree/useTreeContextValues.js +17 -26
  149. package/lib-commonjs/components/Tree/useTreeContextValues.js.map +1 -1
  150. package/lib-commonjs/components/Tree/useTreeStyles.styles.js +53 -0
  151. package/lib-commonjs/components/Tree/useTreeStyles.styles.js.map +1 -0
  152. package/lib-commonjs/components/TreeItem/TreeItem.js +17 -18
  153. package/lib-commonjs/components/TreeItem/TreeItem.js.map +1 -1
  154. package/lib-commonjs/components/TreeItem/TreeItem.types.js +3 -4
  155. package/lib-commonjs/components/TreeItem/TreeItem.types.js.map +1 -1
  156. package/lib-commonjs/components/TreeItem/index.js +7 -9
  157. package/lib-commonjs/components/TreeItem/index.js.map +1 -1
  158. package/lib-commonjs/components/TreeItem/renderTreeItem.js +14 -33
  159. package/lib-commonjs/components/TreeItem/renderTreeItem.js.map +1 -1
  160. package/lib-commonjs/components/TreeItem/useTreeItem.js +124 -251
  161. package/lib-commonjs/components/TreeItem/useTreeItem.js.map +1 -1
  162. package/lib-commonjs/components/TreeItem/useTreeItemContextValues.js +23 -20
  163. package/lib-commonjs/components/TreeItem/useTreeItemContextValues.js.map +1 -1
  164. package/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.js +206 -0
  165. package/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.js.map +1 -0
  166. package/lib-commonjs/components/TreeItemAside/TreeItemAside.js +19 -0
  167. package/lib-commonjs/components/TreeItemAside/TreeItemAside.js.map +1 -0
  168. package/lib-commonjs/components/TreeItemAside/TreeItemAside.types.js +4 -0
  169. package/lib-commonjs/components/TreeItemAside/TreeItemAside.types.js.map +1 -0
  170. package/lib-commonjs/components/TreeItemAside/index.js +10 -0
  171. package/lib-commonjs/components/TreeItemAside/index.js.map +1 -0
  172. package/lib-commonjs/components/TreeItemAside/renderTreeItemAside.js +20 -0
  173. package/lib-commonjs/components/TreeItemAside/renderTreeItemAside.js.map +1 -0
  174. package/lib-commonjs/components/TreeItemAside/useTreeItemAside.js +31 -0
  175. package/lib-commonjs/components/TreeItemAside/useTreeItemAside.js.map +1 -0
  176. package/lib-commonjs/components/TreeItemAside/useTreeItemAsideStyles.styles.js +90 -0
  177. package/lib-commonjs/components/TreeItemAside/useTreeItemAsideStyles.styles.js.map +1 -0
  178. package/lib-commonjs/components/TreeItemChevron.js +33 -0
  179. package/lib-commonjs/components/TreeItemChevron.js.map +1 -0
  180. package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.js +15 -16
  181. package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.js.map +1 -1
  182. package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.types.js +1 -3
  183. package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.types.js.map +1 -1
  184. package/lib-commonjs/components/TreeItemLayout/index.js +7 -9
  185. package/lib-commonjs/components/TreeItemLayout/index.js.map +1 -1
  186. package/lib-commonjs/components/TreeItemLayout/renderTreeItemLayout.js +11 -28
  187. package/lib-commonjs/components/TreeItemLayout/renderTreeItemLayout.js.map +1 -1
  188. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js +45 -52
  189. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
  190. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js +221 -0
  191. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map +1 -0
  192. package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js +17 -18
  193. package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js.map +1 -1
  194. package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js +1 -3
  195. package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js.map +1 -1
  196. package/lib-commonjs/components/TreeItemPersonaLayout/index.js +7 -9
  197. package/lib-commonjs/components/TreeItemPersonaLayout/index.js.map +1 -1
  198. package/lib-commonjs/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js +14 -35
  199. package/lib-commonjs/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map +1 -1
  200. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js +44 -61
  201. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js.map +1 -1
  202. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js +16 -15
  203. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js.map +1 -1
  204. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js +230 -0
  205. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map +1 -0
  206. package/lib-commonjs/contexts/index.js +4 -6
  207. package/lib-commonjs/contexts/index.js.map +1 -1
  208. package/lib-commonjs/contexts/treeContext.js +23 -18
  209. package/lib-commonjs/contexts/treeContext.js.map +1 -1
  210. package/lib-commonjs/contexts/treeItemContext.js +27 -13
  211. package/lib-commonjs/contexts/treeItemContext.js.map +1 -1
  212. package/lib-commonjs/hooks/index.js +5 -7
  213. package/lib-commonjs/hooks/index.js.map +1 -1
  214. package/lib-commonjs/hooks/useFlatTree.js +79 -52
  215. package/lib-commonjs/hooks/useFlatTree.js.map +1 -1
  216. package/lib-commonjs/hooks/useFlatTreeNavigation.js +73 -72
  217. package/lib-commonjs/hooks/useFlatTreeNavigation.js.map +1 -1
  218. package/lib-commonjs/hooks/useHTMLElementWalker.js +92 -83
  219. package/lib-commonjs/hooks/useHTMLElementWalker.js.map +1 -1
  220. package/lib-commonjs/hooks/useNestedTreeNavigation.js +59 -58
  221. package/lib-commonjs/hooks/useNestedTreeNavigation.js.map +1 -1
  222. package/lib-commonjs/hooks/useOpenItemsState.js +27 -22
  223. package/lib-commonjs/hooks/useOpenItemsState.js.map +1 -1
  224. package/lib-commonjs/hooks/useRovingTabIndexes.js +54 -53
  225. package/lib-commonjs/hooks/useRovingTabIndexes.js.map +1 -1
  226. package/lib-commonjs/index.js +52 -181
  227. package/lib-commonjs/index.js.map +1 -1
  228. package/lib-commonjs/utils/ImmutableSet.js +37 -38
  229. package/lib-commonjs/utils/ImmutableSet.js.map +1 -1
  230. package/lib-commonjs/utils/assert.js +11 -9
  231. package/lib-commonjs/utils/assert.js.map +1 -1
  232. package/lib-commonjs/utils/createFlatTreeItems.js +132 -0
  233. package/lib-commonjs/utils/createFlatTreeItems.js.map +1 -0
  234. package/lib-commonjs/utils/flattenTree.js +25 -33
  235. package/lib-commonjs/utils/flattenTree.js.map +1 -1
  236. package/lib-commonjs/utils/nextTypeAheadElement.js +16 -16
  237. package/lib-commonjs/utils/nextTypeAheadElement.js.map +1 -1
  238. package/lib-commonjs/utils/normalizeOpenItems.js +11 -9
  239. package/lib-commonjs/utils/normalizeOpenItems.js.map +1 -1
  240. package/lib-commonjs/utils/tokens.js +28 -20
  241. package/lib-commonjs/utils/tokens.js.map +1 -1
  242. package/lib-commonjs/utils/treeItemFilter.js +7 -7
  243. package/lib-commonjs/utils/treeItemFilter.js.map +1 -1
  244. package/package.json +23 -17
  245. package/lib/components/Tree/useTreeStyles.js +0 -20
  246. package/lib/components/Tree/useTreeStyles.js.map +0 -1
  247. package/lib/components/TreeItem/useTreeItemStyles.js +0 -203
  248. package/lib/components/TreeItem/useTreeItemStyles.js.map +0 -1
  249. package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.js +0 -98
  250. package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.js.map +0 -1
  251. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js.map +0 -1
  252. package/lib/utils/createUnfilteredFlatTree.js +0 -77
  253. package/lib/utils/createUnfilteredFlatTree.js.map +0 -1
  254. package/lib/utils/createVisibleFlatTree.js +0 -80
  255. package/lib/utils/createVisibleFlatTree.js.map +0 -1
  256. package/lib-commonjs/components/Tree/useTreeStyles.js +0 -27
  257. package/lib-commonjs/components/Tree/useTreeStyles.js.map +0 -1
  258. package/lib-commonjs/components/TreeItem/useTreeItemStyles.js +0 -210
  259. package/lib-commonjs/components/TreeItem/useTreeItemStyles.js.map +0 -1
  260. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.js +0 -105
  261. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.js.map +0 -1
  262. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js +0 -122
  263. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js.map +0 -1
  264. package/lib-commonjs/utils/createUnfilteredFlatTree.js +0 -84
  265. package/lib-commonjs/utils/createUnfilteredFlatTree.js.map +0 -1
  266. package/lib-commonjs/utils/createVisibleFlatTree.js +0 -87
  267. package/lib-commonjs/utils/createVisibleFlatTree.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"names":["tokens_1","require"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItem/TreeItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { ButtonContextValue } from '@fluentui/react-button';\nimport type { TreeItemContextValue } from '../../contexts';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport * as React from 'react';\n\nexport type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };\n\nexport type TreeItemSlots = {\n root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;\n content: NonNullable<Slot<'div'>>;\n subtree?: Slot<'span'>;\n /**\n * Expand icon slot,\n * by default renders a chevron icon to indicate opening and closing\n */\n expandIcon?: Slot<'span'>;\n /**\n * Actions slot that renders on the end of tree item\n * when the item is hovered/focused\n */\n actions?: Slot<'span'>;\n};\n\nexport type TreeItemContextValues = {\n treeItem: TreeItemContextValue;\n button: ButtonContextValue;\n};\n\n/**\n * TreeItem Props\n */\nexport type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {\n /**\n * If a TreeItem is a leaf, it'll not present the `expandIcon` slot by default.\n * This attribute is used to force the decision if a TreeItem is a leaf or not. By not providing this property\n * this will be inferred by the presence of a subtree as part of the TreeItem children.\n */\n leaf?: boolean;\n};\n\n/**\n * State used in rendering TreeItem\n */\nexport type TreeItemState = ComponentState<TreeItemSlots> & {\n open: boolean;\n isLeaf: boolean;\n level: number;\n /**\n * By design, a button included on the actions slot should be small\n */\n buttonSize: 'small';\n isActionsVisible: boolean;\n};\n"],"mappings":";;;;;AAGA,MAAAA,QAAA,gBAAAC,OAAA"}
1
+ {"version":3,"sources":["TreeItem.types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;6DAAuB"}
@@ -1,12 +1,10 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
5
4
  });
6
- const tslib_1 = /*#__PURE__*/require("tslib");
7
- tslib_1.__exportStar(require("./TreeItem"), exports);
8
- tslib_1.__exportStar(require("./TreeItem.types"), exports);
9
- tslib_1.__exportStar(require("./renderTreeItem"), exports);
10
- tslib_1.__exportStar(require("./useTreeItem"), exports);
11
- tslib_1.__exportStar(require("./useTreeItemStyles"), exports);
12
- //# sourceMappingURL=index.js.map
5
+ const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
6
+ _exportStar(require("./TreeItem"), exports);
7
+ _exportStar(require("./TreeItem.types"), exports);
8
+ _exportStar(require("./renderTreeItem"), exports);
9
+ _exportStar(require("./useTreeItem"), exports);
10
+ _exportStar(require("./useTreeItemStyles.styles"), exports);
@@ -1 +1 @@
1
- {"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItem/index.ts"],"sourcesContent":["export * from './TreeItem';\nexport * from './TreeItem.types';\nexport * from './renderTreeItem';\nexport * from './useTreeItem';\nexport * from './useTreeItemStyles';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,gBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,sBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,sBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,mBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,yBAAAC,OAAA"}
1
+ {"version":3,"sources":["index.js"],"sourcesContent":["export * from './TreeItem';\nexport * from './TreeItem.types';\nexport * from './renderTreeItem';\nexport * from './useTreeItem';\nexport * from './useTreeItemStyles.styles';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA"}
@@ -1,36 +1,17 @@
1
- "use strict";
2
-
1
+ /** @jsxRuntime classic */ /** @jsx createElement */ "use strict";
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
5
4
  });
6
- exports.renderTreeItem_unstable = void 0;
7
- const React = /*#__PURE__*/require("react");
8
- const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
- const contexts_1 = /*#__PURE__*/require("../../contexts");
10
- const react_button_1 = /*#__PURE__*/require("@fluentui/react-button");
11
- /**
12
- * Render the final JSX of TreeItem
13
- */
14
- const renderTreeItem_unstable = (state, contextValues) => {
15
- const {
16
- slots,
17
- slotProps
18
- } = react_utilities_1.getSlots(state);
19
- return React.createElement(contexts_1.TreeItemProvider, {
20
- value: contextValues.treeItem
21
- }, React.createElement(slots.root, {
22
- ...slotProps.root
23
- }, React.createElement(slots.content, {
24
- ...slotProps.content
25
- }, slots.expandIcon && React.createElement(slots.expandIcon, {
26
- ...slotProps.expandIcon
27
- }), slotProps.content.children, React.createElement(react_button_1.ButtonContextProvider, {
28
- value: contextValues.button
29
- }, slots.actions && React.createElement(slots.actions, {
30
- ...slotProps.actions
31
- }))), state.open && slots.subtree && React.createElement(slots.subtree, {
32
- ...slotProps.subtree
33
- })));
5
+ Object.defineProperty(exports, "renderTreeItem_unstable", {
6
+ enumerable: true,
7
+ get: ()=>renderTreeItem_unstable
8
+ });
9
+ const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
10
+ const _reactUtilities = require("@fluentui/react-utilities");
11
+ const _contexts = require("../../contexts");
12
+ const renderTreeItem_unstable = (state, contextValues)=>{
13
+ const { slots , slotProps } = (0, _reactUtilities.getSlotsNext)(state);
14
+ return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_contexts.TreeItemProvider, {
15
+ value: contextValues.treeItem
16
+ }, slotProps.root.children));
34
17
  };
35
- exports.renderTreeItem_unstable = renderTreeItem_unstable;
36
- //# sourceMappingURL=renderTreeItem.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","require","react_utilities_1","contexts_1","react_button_1","renderTreeItem_unstable","state","contextValues","slots","slotProps","getSlots","createElement","TreeItemProvider","value","treeItem","root","content","expandIcon","children","ButtonContextProvider","button","actions","open","subtree","exports"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItem/renderTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TreeItemState, TreeItemSlots, TreeItemContextValues } from './TreeItem.types';\nimport { TreeItemProvider } from '../../contexts';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItem\n */\nexport const renderTreeItem_unstable = (state: TreeItemState, contextValues: TreeItemContextValues) => {\n const { slots, slotProps } = getSlots<TreeItemSlots>(state);\n\n return (\n <TreeItemProvider value={contextValues.treeItem}>\n <slots.root {...slotProps.root}>\n <slots.content {...slotProps.content}>\n {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n {slotProps.content.children}\n <ButtonContextProvider value={contextValues.button}>\n {slots.actions && <slots.actions {...slotProps.actions} />}\n </ButtonContextProvider>\n </slots.content>\n {state.open && slots.subtree && <slots.subtree {...slotProps.subtree} />}\n </slots.root>\n </TreeItemProvider>\n );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAEA,MAAAE,UAAA,gBAAAF,OAAA;AACA,MAAAG,cAAA,gBAAAH,OAAA;AAEA;;;AAGO,MAAMI,uBAAuB,GAAGA,CAACC,KAAoB,EAAEC,aAAoC,KAAI;EACpG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGP,iBAAA,CAAAQ,QAAQ,CAAgBJ,KAAK,CAAC;EAE3D,OACEN,KAAA,CAAAW,aAAA,CAACR,UAAA,CAAAS,gBAAgB;IAACC,KAAK,EAAEN,aAAa,CAACO;EAAQ,GAC7Cd,KAAA,CAAAW,aAAA,CAACH,KAAK,CAACO,IAAI;IAAA,GAAKN,SAAS,CAACM;EAAI,GAC5Bf,KAAA,CAAAW,aAAA,CAACH,KAAK,CAACQ,OAAO;IAAA,GAAKP,SAAS,CAACO;EAAO,GACjCR,KAAK,CAACS,UAAU,IAAIjB,KAAA,CAAAW,aAAA,CAACH,KAAK,CAACS,UAAU;IAAA,GAAKR,SAAS,CAACQ;EAAU,EAAI,EAClER,SAAS,CAACO,OAAO,CAACE,QAAQ,EAC3BlB,KAAA,CAAAW,aAAA,CAACP,cAAA,CAAAe,qBAAqB;IAACN,KAAK,EAAEN,aAAa,CAACa;EAAM,GAC/CZ,KAAK,CAACa,OAAO,IAAIrB,KAAA,CAAAW,aAAA,CAACH,KAAK,CAACa,OAAO;IAAA,GAAKZ,SAAS,CAACY;EAAO,EAAI,CACpC,CACV,EACff,KAAK,CAACgB,IAAI,IAAId,KAAK,CAACe,OAAO,IAAIvB,KAAA,CAAAW,aAAA,CAACH,KAAK,CAACe,OAAO;IAAA,GAAKd,SAAS,CAACc;EAAO,EAAI,CAC7D,CACI;AAEvB,CAAC;AAjBYC,OAAA,CAAAnB,uBAAuB,GAAAA,uBAAA"}
1
+ {"version":3,"sources":["renderTreeItem.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { TreeItemProvider } from '../../contexts';\n/**\n * Render the final JSX of TreeItem\n */ export const renderTreeItem_unstable = (state, contextValues)=>{\n const { slots , slotProps } = getSlotsNext(state);\n return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(TreeItemProvider, {\n value: contextValues.treeItem\n }, slotProps.root.children));\n};\n"],"names":["renderTreeItem_unstable","state","contextValues","slots","slotProps","getSlotsNext","createElement","root","TreeItemProvider","value","treeItem","children"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACtD;0BACI;AAGtB,MAAMA,0BAA0B,CAACC,OAAOC,gBAAgB;IAC/D,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACJ;IAC5C,OAAO,WAAW,GAAGK,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACE,0BAAgB,EAAE;QACzGC,OAAOP,cAAcQ,QAAQ;IACjC,GAAGN,UAAUG,IAAI,CAACI,QAAQ;AAC9B"}
@@ -1,257 +1,130 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
5
4
  });
6
- exports.useTreeItem_unstable = void 0;
7
- const React = /*#__PURE__*/require("react");
8
- const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
- const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
10
- const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
11
- const react_utilities_2 = /*#__PURE__*/require("@fluentui/react-utilities");
12
- const useTreeItemStyles_1 = /*#__PURE__*/require("./useTreeItemStyles");
13
- const keyboard_keys_1 = /*#__PURE__*/require("@fluentui/keyboard-keys");
14
- const react_utilities_3 = /*#__PURE__*/require("@fluentui/react-utilities");
15
- const react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
16
- const index_1 = /*#__PURE__*/require("../../contexts/index");
17
- const tokens_1 = /*#__PURE__*/require("../../utils/tokens");
18
- /**
19
- * Create the state required to render TreeItem.
20
- *
21
- * The returned state can be modified with hooks such as useTreeItemStyles_unstable,
22
- * before being passed to renderTreeItem_unstable.
23
- *
24
- * @param props - props from this instance of TreeItem
25
- * @param ref - reference to root HTMLElement of TreeItem
26
- */
27
- const useTreeItem_unstable = (props, ref) => {
28
- const [children, subtreeChildren] = React.Children.toArray(props.children);
29
- const contextLevel = index_1.useTreeContext_unstable(ctx => ctx.level);
30
- const {
31
- content,
32
- subtree,
33
- expandIcon,
34
- leaf: isLeaf = subtreeChildren === undefined,
35
- actions,
36
- as = 'div',
37
- onClick,
38
- onKeyDown,
39
- ['aria-level']: level = contextLevel,
40
- ...rest
41
- } = props;
42
- const requestOpenChange = index_1.useTreeContext_unstable(ctx => ctx.requestOpenChange);
43
- const requestNavigation = index_1.useTreeContext_unstable(ctx => ctx.requestNavigation);
44
- const id = react_utilities_1.useId('fui-TreeItem-', props.id);
45
- const isBranch = !isLeaf;
46
- const open = index_1.useTreeContext_unstable(ctx => isBranch && ctx.openItems.has(id));
47
- const {
48
- dir,
49
- targetDocument
50
- } = react_shared_contexts_1.useFluent_unstable();
51
- const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;
52
- const actionsRef = React.useRef(null);
53
- const expandIconRef = React.useRef(null);
54
- const subtreeRef = React.useRef(null);
55
- const handleArrowRight = event => {
56
- if (!open && isBranch) {
57
- return requestOpenChange({
58
- event,
59
- open: true,
60
- type: tokens_1.treeDataTypes.arrowRight,
61
- target: event.currentTarget
62
- });
63
- }
64
- if (open && isBranch) {
65
- return requestNavigation({
66
- event,
67
- type: tokens_1.treeDataTypes.arrowRight,
68
- target: event.currentTarget
69
- });
70
- }
71
- };
72
- const handleArrowLeft = event => {
73
- if (open && isBranch) {
74
- return requestOpenChange({
75
- event,
76
- open: false,
77
- type: tokens_1.treeDataTypes.arrowLeft,
78
- target: event.currentTarget
79
- });
80
- }
81
- if (!open && level > 1) {
82
- return requestNavigation({
83
- event,
84
- target: event.currentTarget,
85
- type: tokens_1.treeDataTypes.arrowLeft
86
- });
87
- }
88
- };
89
- const handleEnter = event => {
90
- requestOpenChange({
91
- event,
92
- open: isLeaf ? open : !open,
93
- type: tokens_1.treeDataTypes.enter,
94
- target: event.currentTarget
5
+ Object.defineProperty(exports, "useTreeItem_unstable", {
6
+ enumerable: true,
7
+ get: ()=>useTreeItem_unstable
8
+ });
9
+ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
10
+ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
+ const _reactUtilities = require("@fluentui/react-utilities");
12
+ const _reactPortal = require("@fluentui/react-portal");
13
+ const _index = require("../../contexts/index");
14
+ const _tokens = require("../../utils/tokens");
15
+ function useTreeItem_unstable(props, ref) {
16
+ const contextLevel = (0, _index.useTreeContext_unstable)((ctx)=>ctx.level);
17
+ const id = (0, _reactUtilities.useId)('fui-TreeItem-', props.id);
18
+ const { onClick , onKeyDown , as ='div' , value =id , itemType ='leaf' , 'aria-level': level = contextLevel , ...rest } = props;
19
+ const requestTreeResponse = (0, _index.useTreeContext_unstable)((ctx)=>ctx.requestTreeResponse);
20
+ const [isActionsVisible, setActionsVisible] = _react.useState(false);
21
+ const [isAsideVisible, setAsideVisible] = _react.useState(true);
22
+ const handleActionsRef = (actions)=>{
23
+ setAsideVisible(actions === null);
24
+ };
25
+ const open = (0, _index.useTreeContext_unstable)((ctx)=>ctx.openItems.has(value));
26
+ const actionsRef = _react.useRef(null);
27
+ const expandIconRef = _react.useRef(null);
28
+ const layoutRef = _react.useRef(null);
29
+ const subtreeRef = _react.useRef(null);
30
+ const handleClick = (0, _reactUtilities.useEventCallback)((event)=>{
31
+ onClick === null || onClick === void 0 ? void 0 : onClick(event);
32
+ if (event.isDefaultPrevented()) {
33
+ return;
34
+ }
35
+ const isEventFromActions = actionsRef.current && (0, _reactPortal.elementContains)(actionsRef.current, event.target);
36
+ if (isEventFromActions) {
37
+ return;
38
+ }
39
+ const isEventFromSubtree = subtreeRef.current && (0, _reactPortal.elementContains)(subtreeRef.current, event.target);
40
+ if (isEventFromSubtree) {
41
+ return;
42
+ }
43
+ const isFromExpandIcon = expandIconRef.current && (0, _reactPortal.elementContains)(expandIconRef.current, event.target);
44
+ requestTreeResponse({
45
+ event,
46
+ itemType,
47
+ value,
48
+ type: isFromExpandIcon ? _tokens.treeDataTypes.ExpandIconClick : _tokens.treeDataTypes.Click
49
+ });
95
50
  });
96
- };
97
- const handleClick = react_utilities_2.useEventCallback(event => {
98
- onClick === null || onClick === void 0 ? void 0 : onClick(event);
99
- const isEventFromActions = actionsRef.current && react_portal_1.elementContains(actionsRef.current, event.target);
100
- if (isEventFromActions) {
101
- return;
102
- }
103
- const isEventFromSubtree = subtreeRef.current && react_portal_1.elementContains(subtreeRef.current, event.target);
104
- if (isEventFromSubtree) {
105
- return;
106
- }
107
- const isFromExpandIcon = expandIconRef.current && react_portal_1.elementContains(expandIconRef.current, event.target);
108
- requestOpenChange({
109
- event,
110
- open: isLeaf ? open : !open,
111
- type: isFromExpandIcon ? tokens_1.treeDataTypes.expandIconClick : tokens_1.treeDataTypes.click,
112
- target: event.currentTarget
51
+ const handleKeyDown = (0, _reactUtilities.useEventCallback)((event)=>{
52
+ onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
53
+ if (event.isDefaultPrevented()) {
54
+ return;
55
+ }
56
+ if (event.currentTarget !== event.target) {
57
+ return;
58
+ }
59
+ switch(event.key){
60
+ case _tokens.treeDataTypes.End:
61
+ case _tokens.treeDataTypes.Home:
62
+ case _tokens.treeDataTypes.Enter:
63
+ case _tokens.treeDataTypes.ArrowUp:
64
+ case _tokens.treeDataTypes.ArrowDown:
65
+ case _tokens.treeDataTypes.ArrowLeft:
66
+ case _tokens.treeDataTypes.ArrowRight:
67
+ return requestTreeResponse({
68
+ event,
69
+ itemType,
70
+ value,
71
+ type: event.key
72
+ });
73
+ }
74
+ const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;
75
+ if (isTypeAheadCharacter) {
76
+ requestTreeResponse({
77
+ event,
78
+ itemType,
79
+ value,
80
+ type: _tokens.treeDataTypes.TypeAhead
81
+ });
82
+ }
113
83
  });
114
- requestNavigation({
115
- event,
116
- target: event.currentTarget,
117
- type: tokens_1.treeDataTypes.click
84
+ const handleActionsVisible = (0, _reactUtilities.useEventCallback)((event)=>{
85
+ const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactPortal.elementContains)(subtreeRef.current, event.target));
86
+ if (!isTargetFromSubtree) {
87
+ setActionsVisible(true);
88
+ }
118
89
  });
119
- });
120
- const handleKeyDown = react_utilities_2.useEventCallback(event => {
121
- onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
122
- if (event.currentTarget !== event.target) {
123
- return;
124
- }
125
- if (event.isDefaultPrevented()) {
126
- return;
127
- }
128
- switch (event.key) {
129
- case keyboard_keys_1.Enter:
130
- return handleEnter(event);
131
- case keyboard_keys_1.ArrowRight:
132
- return handleArrowRight(event);
133
- case keyboard_keys_1.ArrowLeft:
134
- return handleArrowLeft(event);
135
- case keyboard_keys_1.End:
136
- return requestNavigation({
137
- event,
138
- type: tokens_1.treeDataTypes.end,
139
- target: event.currentTarget
140
- });
141
- case keyboard_keys_1.Home:
142
- return requestNavigation({
143
- event,
144
- type: tokens_1.treeDataTypes.home,
145
- target: event.currentTarget
146
- });
147
- case keyboard_keys_1.ArrowUp:
148
- return requestNavigation({
149
- event,
150
- type: tokens_1.treeDataTypes.arrowUp,
151
- target: event.currentTarget
152
- });
153
- case keyboard_keys_1.ArrowDown:
154
- return requestNavigation({
155
- event,
156
- type: tokens_1.treeDataTypes.arrowDown,
157
- target: event.currentTarget
158
- });
159
- }
160
- const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;
161
- if (isTypeAheadCharacter) {
162
- return requestNavigation({
163
- event,
164
- target: event.currentTarget,
165
- type: tokens_1.treeDataTypes.typeAhead
166
- });
167
- }
168
- });
169
- const [isActionsVisible, setActionsVisible] = React.useState(false);
170
- const showActions = react_utilities_2.useEventCallback(event => {
171
- const isEventFromSubtree = subtreeRef.current && react_portal_1.elementContains(subtreeRef.current, event.target);
172
- if (!isEventFromSubtree) {
173
- setActionsVisible(true);
174
- }
175
- });
176
- const hideActions = react_utilities_2.useEventCallback(event => {
177
- const isEventFromSubtree = subtreeRef.current && react_portal_1.elementContains(subtreeRef.current, event.target);
178
- if (!isEventFromSubtree) {
179
- setActionsVisible(false);
180
- }
181
- });
182
- // Listens to focusout event on the document to ensure treeitem actions visibility on portal scenarios
183
- // TODO: find a better way to ensure this behavior
184
- React.useEffect(() => {
185
- if (actionsRef.current) {
186
- const handleFocusOut = event => {
187
- setActionsVisible(react_portal_1.elementContains(actionsRef.current, event.relatedTarget));
188
- };
189
- targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('focusout', handleFocusOut, {
190
- passive: true
191
- });
192
- return () => {
193
- targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('focusout', handleFocusOut);
194
- };
195
- }
196
- }, [targetDocument]);
197
- return {
198
- isLeaf,
199
- open,
200
- level,
201
- buttonSize: 'small',
202
- isActionsVisible: actions ? isActionsVisible : false,
203
- components: {
204
- content: 'div',
205
- root: 'div',
206
- expandIcon: 'span',
207
- actions: 'span',
208
- subtree: 'span'
209
- },
210
- subtree: react_utilities_1.resolveShorthand(subtree, {
211
- required: Boolean(subtreeChildren),
212
- defaultProps: {
213
- children: subtreeChildren,
214
- ref: react_utilities_3.useMergedRefs(subtreeRef, react_utilities_1.isResolvedShorthand(subtree) ? subtree.ref : undefined)
215
- }
216
- }),
217
- content: react_utilities_1.resolveShorthand(content, {
218
- required: true,
219
- defaultProps: {
220
- children
221
- }
222
- }),
223
- root: react_utilities_1.getNativeElementProps(as, {
224
- tabIndex: -1,
225
- ...rest,
226
- id,
227
- ref,
228
- children: null,
229
- 'aria-level': level,
230
- 'aria-expanded': isBranch ? open : undefined,
231
- role: 'treeitem',
232
- onClick: handleClick,
233
- onKeyDown: handleKeyDown,
234
- onMouseOver: actions ? showActions : undefined,
235
- onFocus: actions ? showActions : undefined,
236
- onMouseOut: actions ? hideActions : undefined,
237
- onBlur: actions ? hideActions : undefined
238
- }),
239
- expandIcon: react_utilities_1.resolveShorthand(expandIcon, {
240
- required: isBranch,
241
- defaultProps: {
242
- children: React.createElement(react_icons_1.ChevronRight12Regular, {
243
- style: useTreeItemStyles_1.expandIconInlineStyles[expandIconRotation]
244
- }),
245
- 'aria-hidden': true,
246
- ref: react_utilities_3.useMergedRefs(react_utilities_1.isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef)
247
- }
248
- }),
249
- actions: react_utilities_1.resolveShorthand(actions, {
250
- defaultProps: {
251
- ref: react_utilities_3.useMergedRefs(react_utilities_1.isResolvedShorthand(actions) ? actions.ref : undefined, actionsRef)
252
- }
253
- })
254
- };
255
- };
256
- exports.useTreeItem_unstable = useTreeItem_unstable;
257
- //# sourceMappingURL=useTreeItem.js.map
90
+ const handleActionsInvisible = (0, _reactUtilities.useEventCallback)((event)=>{
91
+ const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactPortal.elementContains)(subtreeRef.current, event.target));
92
+ const isRelatedTargetFromActions = Boolean(actionsRef.current && (0, _reactPortal.elementContains)(actionsRef.current, event.relatedTarget));
93
+ if (isRelatedTargetFromActions) {
94
+ return setActionsVisible(true);
95
+ }
96
+ if (!isTargetFromSubtree) {
97
+ return setActionsVisible(false);
98
+ }
99
+ });
100
+ return {
101
+ value,
102
+ open,
103
+ subtreeRef,
104
+ actionsRef: (0, _reactUtilities.useMergedRefs)(actionsRef, handleActionsRef),
105
+ expandIconRef,
106
+ layoutRef,
107
+ itemType,
108
+ isActionsVisible,
109
+ isAsideVisible,
110
+ level,
111
+ components: {
112
+ root: 'div'
113
+ },
114
+ root: (0, _reactUtilities.getNativeElementProps)(as, {
115
+ tabIndex: -1,
116
+ ...rest,
117
+ id,
118
+ ref,
119
+ 'aria-level': level,
120
+ 'aria-expanded': itemType === 'branch' ? open : undefined,
121
+ role: 'treeitem',
122
+ onClick: handleClick,
123
+ onKeyDown: handleKeyDown,
124
+ onMouseOver: handleActionsVisible,
125
+ onFocus: handleActionsVisible,
126
+ onMouseOut: handleActionsInvisible,
127
+ onBlur: handleActionsInvisible
128
+ })
129
+ };
130
+ }
@@ -1 +1 @@
1
- {"version":3,"names":["React","require","react_utilities_1","react_icons_1","react_shared_contexts_1","react_utilities_2","useTreeItemStyles_1","keyboard_keys_1","react_utilities_3","react_portal_1","index_1","tokens_1","useTreeItem_unstable","props","ref","children","subtreeChildren","Children","toArray","contextLevel","useTreeContext_unstable","ctx","level","content","subtree","expandIcon","leaf","isLeaf","undefined","actions","as","onClick","onKeyDown","rest","requestOpenChange","requestNavigation","id","useId","isBranch","open","openItems","has","dir","targetDocument","useFluent_unstable","expandIconRotation","actionsRef","useRef","expandIconRef","subtreeRef","handleArrowRight","event","type","treeDataTypes","arrowRight","target","currentTarget","handleArrowLeft","arrowLeft","handleEnter","enter","handleClick","useEventCallback","isEventFromActions","current","elementContains","isEventFromSubtree","isFromExpandIcon","expandIconClick","click","handleKeyDown","isDefaultPrevented","key","Enter","ArrowRight","ArrowLeft","End","end","Home","home","ArrowUp","arrowUp","ArrowDown","arrowDown","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","typeAhead","isActionsVisible","setActionsVisible","useState","showActions","hideActions","useEffect","handleFocusOut","relatedTarget","addEventListener","passive","removeEventListener","buttonSize","components","root","resolveShorthand","required","Boolean","defaultProps","useMergedRefs","isResolvedShorthand","getNativeElementProps","tabIndex","role","onMouseOver","onFocus","onMouseOut","onBlur","createElement","ChevronRight12Regular","style","expandIconInlineStyles","exports"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { ChevronRight12Regular } from '@fluentui/react-icons';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { expandIconInlineStyles } from './useTreeItemStyles';\nimport { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { treeDataTypes } from '../../utils/tokens';\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 const useTreeItem_unstable = (props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState => {\n const [children, subtreeChildren] = React.Children.toArray(props.children);\n\n const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n const {\n content,\n subtree,\n expandIcon,\n leaf: isLeaf = subtreeChildren === undefined,\n actions,\n as = 'div',\n onClick,\n onKeyDown,\n ['aria-level']: level = contextLevel,\n ...rest\n } = props;\n\n const requestOpenChange = useTreeContext_unstable(ctx => ctx.requestOpenChange);\n const requestNavigation = useTreeContext_unstable(ctx => ctx.requestNavigation);\n\n const id = useId('fui-TreeItem-', props.id);\n\n const isBranch = !isLeaf;\n\n const open = useTreeContext_unstable(ctx => isBranch && ctx.openItems.has(id));\n const { dir, targetDocument } = useFluent_unstable();\n const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n\n const actionsRef = React.useRef<HTMLElement>(null);\n const expandIconRef = React.useRef<HTMLElement>(null);\n const subtreeRef = React.useRef<HTMLElement>(null);\n\n const handleArrowRight = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (!open && isBranch) {\n return requestOpenChange({ event, open: true, type: treeDataTypes.arrowRight, target: event.currentTarget });\n }\n if (open && isBranch) {\n return requestNavigation({ event, type: treeDataTypes.arrowRight, target: event.currentTarget });\n }\n };\n const handleArrowLeft = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (open && isBranch) {\n return requestOpenChange({ event, open: false, type: treeDataTypes.arrowLeft, target: event.currentTarget });\n }\n if (!open && level > 1) {\n return requestNavigation({ event, target: event.currentTarget, type: treeDataTypes.arrowLeft });\n }\n };\n const handleEnter = (event: React.KeyboardEvent<HTMLDivElement>) => {\n requestOpenChange({ event, open: isLeaf ? open : !open, type: treeDataTypes.enter, target: event.currentTarget });\n };\n\n const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n onClick?.(event);\n\n const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n if (isEventFromActions) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (isEventFromSubtree) {\n return;\n }\n const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n requestOpenChange({\n event,\n open: isLeaf ? open : !open,\n type: isFromExpandIcon ? treeDataTypes.expandIconClick : treeDataTypes.click,\n target: event.currentTarget,\n });\n requestNavigation({ event, target: event.currentTarget, type: treeDataTypes.click });\n });\n\n const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n if (event.currentTarget !== event.target) {\n return;\n }\n if (event.isDefaultPrevented()) {\n return;\n }\n switch (event.key) {\n case Enter:\n return handleEnter(event);\n case ArrowRight:\n return handleArrowRight(event);\n case ArrowLeft:\n return handleArrowLeft(event);\n case End:\n return requestNavigation({ event, type: treeDataTypes.end, target: event.currentTarget });\n case Home:\n return requestNavigation({ event, type: treeDataTypes.home, target: event.currentTarget });\n case ArrowUp:\n return requestNavigation({ event, type: treeDataTypes.arrowUp, target: event.currentTarget });\n case ArrowDown:\n return requestNavigation({ event, type: treeDataTypes.arrowDown, target: event.currentTarget });\n }\n const isTypeAheadCharacter =\n event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n if (isTypeAheadCharacter) {\n return requestNavigation({ event, target: event.currentTarget, type: treeDataTypes.typeAhead });\n }\n });\n\n const [isActionsVisible, setActionsVisible] = React.useState(false);\n const showActions = useEventCallback((event: React.SyntheticEvent) => {\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (!isEventFromSubtree) {\n setActionsVisible(true);\n }\n });\n const hideActions = useEventCallback((event: React.SyntheticEvent) => {\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (!isEventFromSubtree) {\n setActionsVisible(false);\n }\n });\n\n // Listens to focusout event on the document to ensure treeitem actions visibility on portal scenarios\n // TODO: find a better way to ensure this behavior\n React.useEffect(() => {\n if (actionsRef.current) {\n const handleFocusOut = (event: FocusEvent) => {\n setActionsVisible(elementContains(actionsRef.current, event.relatedTarget as Node));\n };\n targetDocument?.addEventListener('focusout', handleFocusOut, { passive: true });\n return () => {\n targetDocument?.removeEventListener('focusout', handleFocusOut);\n };\n }\n }, [targetDocument]);\n\n return {\n isLeaf,\n open,\n level,\n buttonSize: 'small',\n isActionsVisible: actions ? isActionsVisible : false,\n components: {\n content: 'div',\n root: 'div',\n expandIcon: 'span',\n actions: 'span',\n subtree: 'span',\n },\n subtree: resolveShorthand(subtree, {\n required: Boolean(subtreeChildren),\n defaultProps: {\n children: subtreeChildren,\n ref: useMergedRefs(subtreeRef, isResolvedShorthand(subtree) ? subtree.ref : undefined),\n },\n }),\n content: resolveShorthand(content, {\n required: true,\n defaultProps: {\n children,\n },\n }),\n root: getNativeElementProps(as, {\n tabIndex: -1,\n ...rest,\n id,\n ref,\n children: null,\n 'aria-level': level,\n 'aria-expanded': isBranch ? open : undefined,\n role: 'treeitem',\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onMouseOver: actions ? showActions : undefined,\n onFocus: actions ? showActions : undefined,\n onMouseOut: actions ? hideActions : undefined,\n onBlur: actions ? hideActions : undefined,\n }),\n expandIcon: resolveShorthand(expandIcon, {\n required: isBranch,\n defaultProps: {\n children: <ChevronRight12Regular style={expandIconInlineStyles[expandIconRotation]} />,\n 'aria-hidden': true,\n ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef),\n },\n }),\n actions: resolveShorthand(actions, {\n defaultProps: {\n ref: useMergedRefs(isResolvedShorthand(actions) ? actions.ref : undefined, actionsRef),\n },\n }),\n };\n};\n"],"mappings":"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"}
1
+ {"version":3,"sources":["useTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { treeDataTypes } from '../../utils/tokens';\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 */ export function useTreeItem_unstable(props, ref) {\n const contextLevel = useTreeContext_unstable((ctx)=>ctx.level);\n const id = useId('fui-TreeItem-', props.id);\n const { onClick , onKeyDown , as ='div' , value =id , itemType ='leaf' , 'aria-level': level = contextLevel , ...rest } = props;\n const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);\n const [isActionsVisible, setActionsVisible] = React.useState(false);\n const [isAsideVisible, setAsideVisible] = React.useState(true);\n const handleActionsRef = (actions)=>{\n setAsideVisible(actions === null);\n };\n const open = useTreeContext_unstable((ctx)=>ctx.openItems.has(value));\n const actionsRef = React.useRef(null);\n const expandIconRef = React.useRef(null);\n const layoutRef = React.useRef(null);\n const subtreeRef = React.useRef(null);\n const handleClick = useEventCallback((event)=>{\n onClick === null || onClick === void 0 ? void 0 : onClick(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target);\n if (isEventFromActions) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n if (isEventFromSubtree) {\n return;\n }\n const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);\n requestTreeResponse({\n event,\n itemType,\n value,\n type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click\n });\n });\n const handleKeyDown = useEventCallback((event)=>{\n onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n if (event.currentTarget !== event.target) {\n return;\n }\n switch(event.key){\n case treeDataTypes.End:\n case treeDataTypes.Home:\n case treeDataTypes.Enter:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.ArrowDown:\n case treeDataTypes.ArrowLeft:\n case treeDataTypes.ArrowRight:\n return requestTreeResponse({\n event,\n itemType,\n value,\n type: event.key\n });\n }\n const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n if (isTypeAheadCharacter) {\n requestTreeResponse({\n event,\n itemType,\n value,\n type: treeDataTypes.TypeAhead\n });\n }\n });\n const handleActionsVisible = useEventCallback((event)=>{\n const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n if (!isTargetFromSubtree) {\n setActionsVisible(true);\n }\n });\n const handleActionsInvisible = useEventCallback((event)=>{\n const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n const isRelatedTargetFromActions = Boolean(actionsRef.current && elementContains(actionsRef.current, event.relatedTarget));\n if (isRelatedTargetFromActions) {\n return setActionsVisible(true);\n }\n if (!isTargetFromSubtree) {\n return setActionsVisible(false);\n }\n });\n return {\n value,\n open,\n subtreeRef,\n actionsRef: useMergedRefs(actionsRef, handleActionsRef),\n expandIconRef,\n layoutRef,\n itemType,\n isActionsVisible,\n isAsideVisible,\n level,\n components: {\n root: 'div'\n },\n root: getNativeElementProps(as, {\n tabIndex: -1,\n ...rest,\n id,\n ref,\n 'aria-level': level,\n 'aria-expanded': itemType === 'branch' ? open : undefined,\n role: 'treeitem',\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onMouseOver: handleActionsVisible,\n onFocus: handleActionsVisible,\n onMouseOut: handleActionsInvisible,\n onBlur: handleActionsInvisible\n })\n };\n}\n"],"names":["useTreeItem_unstable","props","ref","contextLevel","useTreeContext_unstable","ctx","level","id","useId","onClick","onKeyDown","as","value","itemType","rest","requestTreeResponse","isActionsVisible","setActionsVisible","React","useState","isAsideVisible","setAsideVisible","handleActionsRef","actions","open","openItems","has","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","handleClick","useEventCallback","event","isDefaultPrevented","isEventFromActions","current","elementContains","target","isEventFromSubtree","isFromExpandIcon","type","treeDataTypes","ExpandIconClick","Click","handleKeyDown","currentTarget","key","End","Home","Enter","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","useMergedRefs","components","root","getNativeElementProps","tabIndex","undefined","role","onMouseOver","onFocus","onMouseOut","onBlur"],"mappings":"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"}
@@ -1,25 +1,28 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useTreeItemContextValues_unstable", {
6
+ enumerable: true,
7
+ get: ()=>useTreeItemContextValues_unstable
5
8
  });
6
- exports.useTreeItemContextValues_unstable = void 0;
7
- const React = /*#__PURE__*/require("react");
8
9
  function useTreeItemContextValues_unstable(state) {
9
- const {
10
- buttonSize,
11
- isActionsVisible
12
- } = state;
13
- const treeItem = React.useMemo(() => ({
14
- isActionsVisible
15
- }), [isActionsVisible]);
16
- const button = React.useMemo(() => ({
17
- size: buttonSize
18
- }), [buttonSize]);
19
- return {
20
- treeItem,
21
- button
22
- };
10
+ const { value , isActionsVisible , isAsideVisible , actionsRef , itemType , layoutRef , subtreeRef , expandIconRef , open } = state;
11
+ /**
12
+ * This context is created with "@fluentui/react-context-selector",
13
+ * there is no sense to memoize it
14
+ */ const treeItem = {
15
+ isActionsVisible,
16
+ isAsideVisible,
17
+ value,
18
+ actionsRef,
19
+ itemType,
20
+ layoutRef,
21
+ subtreeRef,
22
+ expandIconRef,
23
+ open
24
+ };
25
+ return {
26
+ treeItem
27
+ };
23
28
  }
24
- exports.useTreeItemContextValues_unstable = useTreeItemContextValues_unstable;
25
- //# sourceMappingURL=useTreeItemContextValues.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","require","useTreeItemContextValues_unstable","state","buttonSize","isActionsVisible","treeItem","useMemo","button","size","exports"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItem/useTreeItemContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ButtonContextValue } from '@fluentui/react-button';\nimport type { TreeItemContextValue } from '../../contexts';\nimport type { TreeItemContextValues, TreeItemState } from './TreeItem.types';\n\nexport function useTreeItemContextValues_unstable(\n state: Pick<TreeItemState, 'buttonSize' | 'isActionsVisible'>,\n): TreeItemContextValues {\n const { buttonSize, isActionsVisible } = state;\n\n const treeItem = React.useMemo<TreeItemContextValue>(() => ({ isActionsVisible }), [isActionsVisible]);\n const button = React.useMemo<ButtonContextValue>(() => ({ size: buttonSize }), [buttonSize]);\n\n return { treeItem, button };\n}\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AAKA,SAAgBC,iCAAiCA,CAC/CC,KAA6D;EAE7D,MAAM;IAAEC,UAAU;IAAEC;EAAgB,CAAE,GAAGF,KAAK;EAE9C,MAAMG,QAAQ,GAAGN,KAAK,CAACO,OAAO,CAAuB,OAAO;IAAEF;EAAgB,CAAE,CAAC,EAAE,CAACA,gBAAgB,CAAC,CAAC;EACtG,MAAMG,MAAM,GAAGR,KAAK,CAACO,OAAO,CAAqB,OAAO;IAAEE,IAAI,EAAEL;EAAU,CAAE,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAE5F,OAAO;IAAEE,QAAQ;IAAEE;EAAM,CAAE;AAC7B;AATAE,OAAA,CAAAR,iCAAA,GAAAA,iCAAA"}
1
+ {"version":3,"sources":["useTreeItemContextValues.js"],"sourcesContent":["export function useTreeItemContextValues_unstable(state) {\n const { value , isActionsVisible , isAsideVisible , actionsRef , itemType , layoutRef , subtreeRef , expandIconRef , open } = state;\n /**\n * This context is created with \"@fluentui/react-context-selector\",\n * there is no sense to memoize it\n */ const treeItem = {\n isActionsVisible,\n isAsideVisible,\n value,\n actionsRef,\n itemType,\n layoutRef,\n subtreeRef,\n expandIconRef,\n open\n };\n return {\n treeItem\n };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","isActionsVisible","isAsideVisible","actionsRef","itemType","layoutRef","subtreeRef","expandIconRef","open","treeItem"],"mappings":";;;;+BAAgBA;;aAAAA;;AAAT,SAASA,kCAAkCC,KAAK,EAAE;IACrD,MAAM,EAAEC,MAAK,EAAGC,iBAAgB,EAAGC,eAAc,EAAGC,WAAU,EAAGC,SAAQ,EAAGC,UAAS,EAAGC,WAAU,EAAGC,cAAa,EAAGC,KAAI,EAAG,GAAGT;IAC/H;;;GAGD,GAAG,MAAMU,WAAW;QACfR;QACAC;QACAF;QACAG;QACAC;QACAC;QACAC;QACAC;QACAC;IACJ;IACA,OAAO;QACHC;IACJ;AACJ"}