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

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 (244) hide show
  1. package/CHANGELOG.json +1073 -1
  2. package/CHANGELOG.md +295 -2
  3. package/dist/index.d.ts +153 -91
  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/TreeItemLayout.js +0 -1
  9. package/lib/TreeItemLayout.js.map +1 -1
  10. package/lib/TreeItemPersonaLayout.js +0 -1
  11. package/lib/TreeItemPersonaLayout.js.map +1 -1
  12. package/lib/components/Tree/Tree.js +6 -8
  13. package/lib/components/Tree/Tree.js.map +1 -1
  14. package/lib/components/Tree/Tree.types.js +1 -2
  15. package/lib/components/Tree/Tree.types.js.map +1 -1
  16. package/lib/components/Tree/index.js +1 -2
  17. package/lib/components/Tree/index.js.map +1 -1
  18. package/lib/components/Tree/renderTree.js +7 -13
  19. package/lib/components/Tree/renderTree.js.map +1 -1
  20. package/lib/components/Tree/useRootTree.js +145 -0
  21. package/lib/components/Tree/useRootTree.js.map +1 -0
  22. package/lib/components/Tree/useSubtree.js +35 -0
  23. package/lib/components/Tree/useSubtree.js.map +1 -0
  24. package/lib/components/Tree/useTree.js +9 -103
  25. package/lib/components/Tree/useTree.js.map +1 -1
  26. package/lib/components/Tree/useTreeContextValues.js +12 -22
  27. package/lib/components/Tree/useTreeContextValues.js.map +1 -1
  28. package/lib/components/Tree/useTreeStyles.styles.js +30 -0
  29. package/lib/components/Tree/useTreeStyles.styles.js.map +1 -0
  30. package/lib/components/TreeItem/TreeItem.js +16 -9
  31. package/lib/components/TreeItem/TreeItem.js.map +1 -1
  32. package/lib/components/TreeItem/TreeItem.types.js +1 -2
  33. package/lib/components/TreeItem/TreeItem.types.js.map +1 -1
  34. package/lib/components/TreeItem/index.js +1 -2
  35. package/lib/components/TreeItem/index.js.map +1 -1
  36. package/lib/components/TreeItem/renderTreeItem.js +7 -25
  37. package/lib/components/TreeItem/renderTreeItem.js.map +1 -1
  38. package/lib/components/TreeItem/useTreeItem.js +116 -234
  39. package/lib/components/TreeItem/useTreeItem.js.map +1 -1
  40. package/lib/components/TreeItem/useTreeItemContextValues.js +18 -16
  41. package/lib/components/TreeItem/useTreeItemContextValues.js.map +1 -1
  42. package/lib/components/TreeItem/useTreeItemStyles.styles.js +100 -0
  43. package/lib/components/TreeItem/useTreeItemStyles.styles.js.map +1 -0
  44. package/lib/components/TreeItemChevron.js +24 -0
  45. package/lib/components/TreeItemChevron.js.map +1 -0
  46. package/lib/components/TreeItemLayout/TreeItemLayout.js +8 -8
  47. package/lib/components/TreeItemLayout/TreeItemLayout.js.map +1 -1
  48. package/lib/components/TreeItemLayout/TreeItemLayout.types.js +1 -2
  49. package/lib/components/TreeItemLayout/TreeItemLayout.types.js.map +1 -1
  50. package/lib/components/TreeItemLayout/index.js +1 -2
  51. package/lib/components/TreeItemLayout/index.js.map +1 -1
  52. package/lib/components/TreeItemLayout/renderTreeItemLayout.js +8 -21
  53. package/lib/components/TreeItemLayout/renderTreeItemLayout.js.map +1 -1
  54. package/lib/components/TreeItemLayout/useTreeItemLayout.js +58 -39
  55. package/lib/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
  56. package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js +191 -0
  57. package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map +1 -0
  58. package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js +9 -9
  59. package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js.map +1 -1
  60. package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js +1 -2
  61. package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js.map +1 -1
  62. package/lib/components/TreeItemPersonaLayout/index.js +1 -2
  63. package/lib/components/TreeItemPersonaLayout/index.js.map +1 -1
  64. package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js +10 -27
  65. package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map +1 -1
  66. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js +35 -48
  67. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js.map +1 -1
  68. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js +9 -10
  69. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js.map +1 -1
  70. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js +206 -0
  71. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map +1 -0
  72. package/lib/contexts/index.js +0 -1
  73. package/lib/contexts/index.js.map +1 -1
  74. package/lib/contexts/treeContext.js +9 -14
  75. package/lib/contexts/treeContext.js.map +1 -1
  76. package/lib/contexts/treeItemContext.js +13 -10
  77. package/lib/contexts/treeItemContext.js.map +1 -1
  78. package/lib/hooks/index.js +0 -1
  79. package/lib/hooks/index.js.map +1 -1
  80. package/lib/hooks/useFlatTree.js +81 -35
  81. package/lib/hooks/useFlatTree.js.map +1 -1
  82. package/lib/hooks/useFlatTreeNavigation.js +65 -62
  83. package/lib/hooks/useFlatTreeNavigation.js.map +1 -1
  84. package/lib/hooks/useHTMLElementWalker.js +78 -76
  85. package/lib/hooks/useHTMLElementWalker.js.map +1 -1
  86. package/lib/hooks/useNestedTreeNavigation.js +49 -49
  87. package/lib/hooks/useNestedTreeNavigation.js.map +1 -1
  88. package/lib/hooks/useOpenItemsState.js +21 -15
  89. package/lib/hooks/useOpenItemsState.js.map +1 -1
  90. package/lib/hooks/useRovingTabIndexes.js +46 -45
  91. package/lib/hooks/useRovingTabIndexes.js.map +1 -1
  92. package/lib/index.js +0 -1
  93. package/lib/index.js.map +1 -1
  94. package/lib/utils/ImmutableSet.js +27 -30
  95. package/lib/utils/ImmutableSet.js.map +1 -1
  96. package/lib/utils/assert.js +5 -5
  97. package/lib/utils/assert.js.map +1 -1
  98. package/lib/utils/createFlatTreeItems.js +113 -0
  99. package/lib/utils/createFlatTreeItems.js.map +1 -0
  100. package/lib/utils/flattenTree.js +58 -28
  101. package/lib/utils/flattenTree.js.map +1 -1
  102. package/lib/utils/getTreeItemValueFromElement.js +4 -0
  103. package/lib/utils/getTreeItemValueFromElement.js.map +1 -0
  104. package/lib/utils/nextTypeAheadElement.js +11 -12
  105. package/lib/utils/nextTypeAheadElement.js.map +1 -1
  106. package/lib/utils/normalizeOpenItems.js +6 -5
  107. package/lib/utils/normalizeOpenItems.js.map +1 -1
  108. package/lib/utils/tokens.js +13 -14
  109. package/lib/utils/tokens.js.map +1 -1
  110. package/lib/utils/treeItemFilter.js +2 -3
  111. package/lib/utils/treeItemFilter.js.map +1 -1
  112. package/lib-commonjs/Tree.js +3 -5
  113. package/lib-commonjs/Tree.js.map +1 -1
  114. package/lib-commonjs/TreeItem.js +3 -5
  115. package/lib-commonjs/TreeItem.js.map +1 -1
  116. package/lib-commonjs/TreeItemLayout.js +3 -5
  117. package/lib-commonjs/TreeItemLayout.js.map +1 -1
  118. package/lib-commonjs/TreeItemPersonaLayout.js +3 -5
  119. package/lib-commonjs/TreeItemPersonaLayout.js.map +1 -1
  120. package/lib-commonjs/components/Tree/Tree.js +17 -23
  121. package/lib-commonjs/components/Tree/Tree.js.map +1 -1
  122. package/lib-commonjs/components/Tree/Tree.types.js +3 -3
  123. package/lib-commonjs/components/Tree/Tree.types.js.map +1 -1
  124. package/lib-commonjs/components/Tree/index.js +8 -10
  125. package/lib-commonjs/components/Tree/index.js.map +1 -1
  126. package/lib-commonjs/components/Tree/renderTree.js +14 -19
  127. package/lib-commonjs/components/Tree/renderTree.js.map +1 -1
  128. package/lib-commonjs/components/Tree/useRootTree.js +149 -0
  129. package/lib-commonjs/components/Tree/useRootTree.js.map +1 -0
  130. package/lib-commonjs/components/Tree/useSubtree.js +39 -0
  131. package/lib-commonjs/components/Tree/useSubtree.js.map +1 -0
  132. package/lib-commonjs/components/Tree/useTree.js +16 -116
  133. package/lib-commonjs/components/Tree/useTree.js.map +1 -1
  134. package/lib-commonjs/components/Tree/useTreeContextValues.js +17 -26
  135. package/lib-commonjs/components/Tree/useTreeContextValues.js.map +1 -1
  136. package/lib-commonjs/components/Tree/useTreeStyles.styles.js +53 -0
  137. package/lib-commonjs/components/Tree/useTreeStyles.styles.js.map +1 -0
  138. package/lib-commonjs/components/TreeItem/TreeItem.js +17 -18
  139. package/lib-commonjs/components/TreeItem/TreeItem.js.map +1 -1
  140. package/lib-commonjs/components/TreeItem/TreeItem.types.js +3 -4
  141. package/lib-commonjs/components/TreeItem/TreeItem.types.js.map +1 -1
  142. package/lib-commonjs/components/TreeItem/index.js +7 -9
  143. package/lib-commonjs/components/TreeItem/index.js.map +1 -1
  144. package/lib-commonjs/components/TreeItem/renderTreeItem.js +14 -33
  145. package/lib-commonjs/components/TreeItem/renderTreeItem.js.map +1 -1
  146. package/lib-commonjs/components/TreeItem/useTreeItem.js +126 -251
  147. package/lib-commonjs/components/TreeItem/useTreeItem.js.map +1 -1
  148. package/lib-commonjs/components/TreeItem/useTreeItemContextValues.js +23 -20
  149. package/lib-commonjs/components/TreeItem/useTreeItemContextValues.js.map +1 -1
  150. package/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.js +202 -0
  151. package/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.js.map +1 -0
  152. package/lib-commonjs/components/TreeItemChevron.js +33 -0
  153. package/lib-commonjs/components/TreeItemChevron.js.map +1 -0
  154. package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.js +15 -16
  155. package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.js.map +1 -1
  156. package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.types.js +1 -3
  157. package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.types.js.map +1 -1
  158. package/lib-commonjs/components/TreeItemLayout/index.js +7 -9
  159. package/lib-commonjs/components/TreeItemLayout/index.js.map +1 -1
  160. package/lib-commonjs/components/TreeItemLayout/renderTreeItemLayout.js +14 -28
  161. package/lib-commonjs/components/TreeItemLayout/renderTreeItemLayout.js.map +1 -1
  162. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js +64 -52
  163. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
  164. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js +321 -0
  165. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map +1 -0
  166. package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js +17 -18
  167. package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js.map +1 -1
  168. package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js +1 -3
  169. package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js.map +1 -1
  170. package/lib-commonjs/components/TreeItemPersonaLayout/index.js +7 -9
  171. package/lib-commonjs/components/TreeItemPersonaLayout/index.js.map +1 -1
  172. package/lib-commonjs/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js +17 -35
  173. package/lib-commonjs/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map +1 -1
  174. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js +42 -61
  175. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js.map +1 -1
  176. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js +16 -15
  177. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js.map +1 -1
  178. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js +375 -0
  179. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map +1 -0
  180. package/lib-commonjs/contexts/index.js +4 -6
  181. package/lib-commonjs/contexts/index.js.map +1 -1
  182. package/lib-commonjs/contexts/treeContext.js +23 -18
  183. package/lib-commonjs/contexts/treeContext.js.map +1 -1
  184. package/lib-commonjs/contexts/treeItemContext.js +27 -13
  185. package/lib-commonjs/contexts/treeItemContext.js.map +1 -1
  186. package/lib-commonjs/hooks/index.js +5 -7
  187. package/lib-commonjs/hooks/index.js.map +1 -1
  188. package/lib-commonjs/hooks/useFlatTree.js +88 -52
  189. package/lib-commonjs/hooks/useFlatTree.js.map +1 -1
  190. package/lib-commonjs/hooks/useFlatTreeNavigation.js +76 -72
  191. package/lib-commonjs/hooks/useFlatTreeNavigation.js.map +1 -1
  192. package/lib-commonjs/hooks/useHTMLElementWalker.js +92 -83
  193. package/lib-commonjs/hooks/useHTMLElementWalker.js.map +1 -1
  194. package/lib-commonjs/hooks/useNestedTreeNavigation.js +59 -58
  195. package/lib-commonjs/hooks/useNestedTreeNavigation.js.map +1 -1
  196. package/lib-commonjs/hooks/useOpenItemsState.js +30 -22
  197. package/lib-commonjs/hooks/useOpenItemsState.js.map +1 -1
  198. package/lib-commonjs/hooks/useRovingTabIndexes.js +54 -53
  199. package/lib-commonjs/hooks/useRovingTabIndexes.js.map +1 -1
  200. package/lib-commonjs/index.js +46 -181
  201. package/lib-commonjs/index.js.map +1 -1
  202. package/lib-commonjs/utils/ImmutableSet.js +37 -38
  203. package/lib-commonjs/utils/ImmutableSet.js.map +1 -1
  204. package/lib-commonjs/utils/assert.js +11 -9
  205. package/lib-commonjs/utils/assert.js.map +1 -1
  206. package/lib-commonjs/utils/createFlatTreeItems.js +127 -0
  207. package/lib-commonjs/utils/createFlatTreeItems.js.map +1 -0
  208. package/lib-commonjs/utils/flattenTree.js +25 -33
  209. package/lib-commonjs/utils/flattenTree.js.map +1 -1
  210. package/lib-commonjs/utils/getTreeItemValueFromElement.js +18 -0
  211. package/lib-commonjs/utils/getTreeItemValueFromElement.js.map +1 -0
  212. package/lib-commonjs/utils/nextTypeAheadElement.js +16 -16
  213. package/lib-commonjs/utils/nextTypeAheadElement.js.map +1 -1
  214. package/lib-commonjs/utils/normalizeOpenItems.js +11 -9
  215. package/lib-commonjs/utils/normalizeOpenItems.js.map +1 -1
  216. package/lib-commonjs/utils/tokens.js +28 -20
  217. package/lib-commonjs/utils/tokens.js.map +1 -1
  218. package/lib-commonjs/utils/treeItemFilter.js +7 -7
  219. package/lib-commonjs/utils/treeItemFilter.js.map +1 -1
  220. package/package.json +23 -17
  221. package/lib/components/Tree/useTreeStyles.js +0 -20
  222. package/lib/components/Tree/useTreeStyles.js.map +0 -1
  223. package/lib/components/TreeItem/useTreeItemStyles.js +0 -203
  224. package/lib/components/TreeItem/useTreeItemStyles.js.map +0 -1
  225. package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.js +0 -98
  226. package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.js.map +0 -1
  227. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js +0 -115
  228. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js.map +0 -1
  229. package/lib/utils/createUnfilteredFlatTree.js +0 -77
  230. package/lib/utils/createUnfilteredFlatTree.js.map +0 -1
  231. package/lib/utils/createVisibleFlatTree.js +0 -80
  232. package/lib/utils/createVisibleFlatTree.js.map +0 -1
  233. package/lib-commonjs/components/Tree/useTreeStyles.js +0 -27
  234. package/lib-commonjs/components/Tree/useTreeStyles.js.map +0 -1
  235. package/lib-commonjs/components/TreeItem/useTreeItemStyles.js +0 -210
  236. package/lib-commonjs/components/TreeItem/useTreeItemStyles.js.map +0 -1
  237. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.js +0 -105
  238. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.js.map +0 -1
  239. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js +0 -122
  240. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js.map +0 -1
  241. package/lib-commonjs/utils/createUnfilteredFlatTree.js +0 -84
  242. package/lib-commonjs/utils/createUnfilteredFlatTree.js.map +0 -1
  243. package/lib-commonjs/utils/createVisibleFlatTree.js +0 -87
  244. package/lib-commonjs/utils/createVisibleFlatTree.js.map +0 -1
@@ -1,210 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.useTreeItemStyles_unstable = exports.expandIconInlineStyles = exports.treeItemClassNames = void 0;
7
- const react_1 = /*#__PURE__*/require("@griffel/react");
8
- const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
9
- const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
10
- const index_1 = /*#__PURE__*/require("../../contexts/index");
11
- const tokens_1 = /*#__PURE__*/require("../../utils/tokens");
12
- exports.treeItemClassNames = {
13
- root: 'fui-TreeItem',
14
- content: 'fui-TreeItem__content',
15
- subtree: 'fui-TreeItem__subtree',
16
- expandIcon: 'fui-TreeItem__expandIcon',
17
- actions: 'fui-TreeItem__actions'
18
- };
19
- const useRootStyles = /*#__PURE__*/react_1.__styles({
20
- level1: {
21
- iytv0q: "f10bgyvd"
22
- },
23
- level2: {
24
- iytv0q: "f1h0rod3"
25
- },
26
- level3: {
27
- iytv0q: "fgoqafk"
28
- },
29
- level4: {
30
- iytv0q: "f75dvuh"
31
- },
32
- level5: {
33
- iytv0q: "fqk7yw6"
34
- },
35
- level6: {
36
- iytv0q: "f1r3z17b"
37
- },
38
- level7: {
39
- iytv0q: "f1hrpd1h"
40
- },
41
- level8: {
42
- iytv0q: "f1iy65d0"
43
- },
44
- level9: {
45
- iytv0q: "ftg42e5"
46
- },
47
- level10: {
48
- iytv0q: "fyat3t"
49
- }
50
- }, {
51
- d: [".f10bgyvd{--fluent-TreeItem--level:1;}", ".f1h0rod3{--fluent-TreeItem--level:2;}", ".fgoqafk{--fluent-TreeItem--level:3;}", ".f75dvuh{--fluent-TreeItem--level:4;}", ".fqk7yw6{--fluent-TreeItem--level:5;}", ".f1r3z17b{--fluent-TreeItem--level:6;}", ".f1hrpd1h{--fluent-TreeItem--level:7;}", ".f1iy65d0{--fluent-TreeItem--level:8;}", ".ftg42e5{--fluent-TreeItem--level:9;}", ".fyat3t{--fluent-TreeItem--level:10;}"]
52
- });
53
- /**
54
- * Styles for the content slot
55
- */
56
- const useContentStyles = /*#__PURE__*/react_1.__styles({
57
- base: {
58
- qhf8xq: "f10pi13n",
59
- Bceei9c: "f1k6fduh",
60
- mc9l5x: "f22iagw",
61
- De3pzq: "fhovq9v",
62
- sj55zd: "fkfq4zb",
63
- z189sj: ["flk2ux3", "fkl3uby"],
64
- uwmqm3: ["fo100m9", "f6yw3pu"],
65
- Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
66
- Beyfa6y: ["f16jpd5f", "f1aa9q02"],
67
- B7oj6ja: ["f1jar5jt", "fyu767a"],
68
- Btl43ni: ["fyu767a", "f1jar5jt"],
69
- lj723h: "flvvhsy",
70
- ecr2s2: "f1wfn5kd",
71
- Ixpawx: "f1x3s29",
72
- Bi91k9c: "fnwyq0v",
73
- Jwef8y: "f1t94bn6",
74
- B0t702g: "f1kvtbpn"
75
- },
76
- focusIndicator: {
77
- Brovlpu: "ftqa4ok",
78
- B486eqv: "f2hkw1w",
79
- B8q5s1w: "f8hki3x",
80
- Bci5o5g: ["f1d2448m", "ffh67wi"],
81
- n8qw10: "f1bjia2o",
82
- Bdrgwmp: ["ffh67wi", "f1d2448m"],
83
- Bm4h7ae: "f15bsgw9",
84
- B7ys5i9: "f14e48fq",
85
- Busjfv9: "f18yb2kv",
86
- Bhk32uz: "fd6o370",
87
- Bf4ptjt: "fh1cnn4",
88
- kclons: ["fy7oxxb", "f184ne2d"],
89
- Bhdgwq3: "fpukqih",
90
- Blkhhs4: ["f184ne2d", "fy7oxxb"],
91
- Bqtpl0w: "frrh606",
92
- clg4pj: ["f1v5zibi", "fo2hd23"],
93
- hgwjuy: "ful5kiu",
94
- Bonggc9: ["fo2hd23", "f1v5zibi"],
95
- B1tsrr9: ["f1jqcqds", "ftffrms"],
96
- Dah5zi: ["ftffrms", "f1jqcqds"],
97
- Bkh64rk: ["f2e7qr6", "fsr1zz6"],
98
- qqdqy8: ["fsr1zz6", "f2e7qr6"],
99
- B6dhp37: "f1dvezut",
100
- i03rao: ["fd0oaoj", "f1cwg4i8"],
101
- Boxcth7: "fjvm52t",
102
- Bsom6fd: ["f1cwg4i8", "fd0oaoj"],
103
- J0r882: "fdiulkx",
104
- Bjwuhne: "f1yalx80",
105
- Ghsupd: ["fq22d5a", "f1jw7pan"],
106
- Bule8hv: ["f1jw7pan", "fq22d5a"]
107
- },
108
- subtle: {},
109
- "subtle-alpha": {
110
- Jwef8y: "f146ro5n",
111
- ecr2s2: "fkam630"
112
- },
113
- transparent: {
114
- De3pzq: "f1c21dwh",
115
- Jwef8y: "fjxutwb",
116
- ecr2s2: "fophhak"
117
- },
118
- leaf: {
119
- uwmqm3: ["f1k1erfc", "faevyjx"]
120
- }
121
- }, {
122
- d: [".f10pi13n{position:relative;}", ".f1k6fduh{cursor:pointer;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".flk2ux3{padding-right:var(--spacingHorizontalNone);}", ".fkl3uby{padding-left:var(--spacingHorizontalNone);}", ".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}"],
123
- a: [".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1x3s29:active .fui-TreeItem__expandIcon{color:var(--colorNeutralForeground3Pressed);}", ".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}"],
124
- h: [".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1kvtbpn:hover .fui-TreeItem__expandIcon{color:var(--colorNeutralForeground3Hover);}", ".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}"],
125
- f: [".ftqa4ok:focus{outline-style:none;}"],
126
- i: [".f2hkw1w:focus-visible{outline-style:none;}"]
127
- });
128
- /**
129
- * Styles for the expand icon slot
130
- */
131
- const useExpandIconStyles = /*#__PURE__*/react_1.__styles({
132
- base: {
133
- mc9l5x: "f22iagw",
134
- Bt984gj: "f122n59",
135
- Brf1p80: "f4d9j23",
136
- Bf4jedk: "f17fgpbq",
137
- B7ck84d: "f1ewtqcl",
138
- sj55zd: "f11d4kpn",
139
- z8tnut: "f1ywm7hm",
140
- z189sj: ["fhxju0i", "f1cnd47f"],
141
- Byoj8tv: "f14wxoun",
142
- uwmqm3: ["f1cnd47f", "fhxju0i"]
143
- }
144
- }, {
145
- d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f17fgpbq{min-width:24px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}"]
146
- });
147
- /**
148
- * Styles for the action icon slot
149
- */
150
- const useActionsStyles = /*#__PURE__*/react_1.__styles({
151
- base: {
152
- mc9l5x: "fjseox",
153
- Frg6f3: ["fcgxt0o", "f1ujusj6"],
154
- z8tnut: "f1g0x7ka",
155
- z189sj: ["f1vdfbxk", "f1f5gg8d"],
156
- Byoj8tv: "f1qch9an",
157
- uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
158
- },
159
- open: {
160
- mc9l5x: "f22iagw",
161
- qhf8xq: "f10pi13n"
162
- }
163
- }, {
164
- d: [".fjseox{display:none;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f1g0x7ka{padding-top:0;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1qch9an{padding-bottom:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f10pi13n{position:relative;}"]
165
- });
166
- exports.expandIconInlineStyles = {
167
- 90: {
168
- transform: `rotate(90deg)`
169
- },
170
- 0: {
171
- transform: `rotate(0deg)`
172
- },
173
- 180: {
174
- transform: `rotate(180deg)`
175
- }
176
- };
177
- /**
178
- * Apply styling to the TreeItem slots based on the state
179
- */
180
- const useTreeItemStyles_unstable = state => {
181
- const rootStyles = useRootStyles();
182
- const contentStyles = useContentStyles();
183
- const expandIconStyles = useExpandIconStyles();
184
- const actionsStyles = useActionsStyles();
185
- const appearance = index_1.useTreeContext_unstable(ctx => ctx.appearance);
186
- const {
187
- actions,
188
- subtree,
189
- expandIcon,
190
- isActionsVisible: showActions,
191
- level
192
- } = state;
193
- state.root.className = react_1.mergeClasses(exports.treeItemClassNames.root, isStaticallyDefinedLevel(level) && rootStyles[`level${level}`], state.root.className);
194
- state.content.className = react_1.mergeClasses(exports.treeItemClassNames.content, contentStyles.base, contentStyles[appearance], contentStyles.focusIndicator, state.isLeaf && contentStyles.leaf, state.content.className);
195
- if (expandIcon) {
196
- expandIcon.className = react_1.mergeClasses(exports.treeItemClassNames.expandIcon, expandIconStyles.base, expandIcon.className);
197
- }
198
- if (actions) {
199
- actions.className = react_1.mergeClasses(exports.treeItemClassNames.actions, actionsStyles.base, showActions && actionsStyles.open, actions.className);
200
- }
201
- if (subtree) {
202
- subtree.className = react_1.mergeClasses(exports.treeItemClassNames.subtree, subtree.className);
203
- }
204
- return state;
205
- };
206
- exports.useTreeItemStyles_unstable = useTreeItemStyles_unstable;
207
- function isStaticallyDefinedLevel(level) {
208
- return level >= 1 && level <= 10;
209
- }
210
- //# sourceMappingURL=useTreeItemStyles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["react_1","require","react_theme_1","react_tabster_1","index_1","tokens_1","exports","treeItemClassNames","root","content","subtree","expandIcon","actions","useRootStyles","__styles","level1","iytv0q","level2","level3","level4","level5","level6","level7","level8","level9","level10","d","useContentStyles","base","qhf8xq","Bceei9c","mc9l5x","De3pzq","sj55zd","z189sj","uwmqm3","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","lj723h","ecr2s2","Ixpawx","Bi91k9c","Jwef8y","B0t702g","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","subtle","transparent","leaf","a","h","f","i","useExpandIconStyles","Bt984gj","Brf1p80","Bf4jedk","B7ck84d","z8tnut","Byoj8tv","useActionsStyles","Frg6f3","open","expandIconInlineStyles","transform","useTreeItemStyles_unstable","state","rootStyles","contentStyles","expandIconStyles","actionsStyles","appearance","useTreeContext_unstable","ctx","isActionsVisible","showActions","level","className","mergeClasses","isStaticallyDefinedLevel","isLeaf"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts"],"sourcesContent":["import { GriffelStyle, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TreeItemCSSProperties, TreeItemSlots, TreeItemState } from './TreeItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { treeItemLevelToken } from '../../utils/tokens';\n\nexport const treeItemClassNames: SlotClassNames<TreeItemSlots> = {\n root: 'fui-TreeItem',\n content: 'fui-TreeItem__content',\n subtree: 'fui-TreeItem__subtree',\n expandIcon: 'fui-TreeItem__expandIcon',\n actions: 'fui-TreeItem__actions',\n};\n\ntype StaticLevel = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\ntype StaticLevelProperty = `level${StaticLevel}`;\n\nconst useRootStyles = makeStyles({\n ...(Object.fromEntries(\n Array.from<never, [StaticLevelProperty, TreeItemCSSProperties]>({ length: 10 }, (_, index) => [\n `level${(index + 1) as StaticLevel}`,\n { [treeItemLevelToken]: index + 1 },\n ]),\n ) as Record<StaticLevelProperty, GriffelStyle>),\n});\n\n/**\n * Styles for the content slot\n */\nconst useContentStyles = makeStyles({\n base: {\n position: 'relative',\n cursor: 'pointer',\n display: 'flex',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n paddingRight: tokens.spacingHorizontalNone,\n paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`,\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ':active': {\n color: tokens.colorNeutralForeground2Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n // TODO: stop using treeItemClassNames.expandIcon for styling\n [`& .${treeItemClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n },\n },\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n // TODO: stop using treeItemClassNames.expandIcon for styling\n [`& .${treeItemClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Hover,\n },\n },\n },\n focusIndicator: createFocusOutlineStyle(),\n // Appearance variations\n subtle: {},\n 'subtle-alpha': {\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n leaf: {\n paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`,\n },\n});\n\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minWidth: '24px',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3,\n ...shorthands.padding(tokens.spacingVerticalXS, 0),\n },\n});\n\n/**\n * Styles for the action icon slot\n */\nconst useActionsStyles = makeStyles({\n base: {\n display: 'none',\n marginLeft: 'auto',\n ...shorthands.padding(0, tokens.spacingHorizontalS),\n },\n open: {\n display: 'flex',\n position: 'relative',\n },\n});\n\nexport const expandIconInlineStyles = {\n 90: { transform: `rotate(90deg)` },\n 0: { transform: `rotate(0deg)` },\n 180: { transform: `rotate(180deg)` },\n} as const;\n\n/**\n * Apply styling to the TreeItem slots based on the state\n */\nexport const useTreeItemStyles_unstable = (state: TreeItemState): TreeItemState => {\n const rootStyles = useRootStyles();\n const contentStyles = useContentStyles();\n const expandIconStyles = useExpandIconStyles();\n const actionsStyles = useActionsStyles();\n\n const appearance = useTreeContext_unstable(ctx => ctx.appearance);\n\n const { actions, subtree, expandIcon, isActionsVisible: showActions, level } = state;\n\n state.root.className = mergeClasses(\n treeItemClassNames.root,\n isStaticallyDefinedLevel(level) && rootStyles[`level${level}` as StaticLevelProperty],\n state.root.className,\n );\n\n state.content.className = mergeClasses(\n treeItemClassNames.content,\n contentStyles.base,\n contentStyles[appearance],\n contentStyles.focusIndicator,\n state.isLeaf && contentStyles.leaf,\n state.content.className,\n );\n\n if (expandIcon) {\n expandIcon.className = mergeClasses(treeItemClassNames.expandIcon, expandIconStyles.base, expandIcon.className);\n }\n if (actions) {\n actions.className = mergeClasses(\n treeItemClassNames.actions,\n actionsStyles.base,\n showActions && actionsStyles.open,\n actions.className,\n );\n }\n if (subtree) {\n subtree.className = mergeClasses(treeItemClassNames.subtree, subtree.className);\n }\n\n return state;\n};\n\nfunction isStaticallyDefinedLevel(level: number): level is StaticLevel {\n return level >= 1 && level <= 10;\n}\n"],"mappings":"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"}
@@ -1,105 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.useTreeItemLayoutStyles_unstable = exports.treeItemLayoutClassNames = void 0;
7
- const react_1 = /*#__PURE__*/require("@griffel/react");
8
- const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
9
- const treeContext_1 = /*#__PURE__*/require("../../contexts/treeContext");
10
- exports.treeItemLayoutClassNames = {
11
- root: 'fui-TreeItemLayout',
12
- aside: 'fui-TreeItemLayout__aside',
13
- iconAfter: 'fui-TreeItemLayout__iconAfter',
14
- iconBefore: 'fui-TreeItemLayout__iconBefore'
15
- };
16
- /**
17
- * Styles for the root slot
18
- */
19
- const useRootStyles = /*#__PURE__*/react_1.__styles({
20
- base: {
21
- mc9l5x: "f22iagw",
22
- Bt984gj: "f122n59",
23
- sshi5w: "f1nxs5xn",
24
- Bh6795r: "fqerorx",
25
- Bnnss6s: "f1neuvcm",
26
- xawz: "f1pztt34"
27
- },
28
- medium: {
29
- i8kkvl: "f1rjii52",
30
- Bahqtrf: "fk6fouc",
31
- Be2twd7: "fkhj508",
32
- Bhrd7zp: "figsok6",
33
- Bg96gwp: "f1i3iumi"
34
- },
35
- small: {
36
- i8kkvl: "f1ufnopg",
37
- sshi5w: "f1pha7fy",
38
- Bahqtrf: "fk6fouc",
39
- Be2twd7: "fy9rknc",
40
- Bhrd7zp: "figsok6",
41
- Bg96gwp: "fwrc4pm"
42
- }
43
- }, {
44
- d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1nxs5xn{min-height:32px;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".f1pztt34{-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f1pha7fy{min-height:24px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}"]
45
- });
46
- /**
47
- * Styles for the before/after icon slot
48
- */
49
- const useIconStyles = /*#__PURE__*/react_1.__styles({
50
- base: {
51
- mc9l5x: "f22iagw",
52
- Bt984gj: "f122n59",
53
- sj55zd: "fkfq4zb",
54
- Bg96gwp: "f106mvju",
55
- Be2twd7: "f1pp30po"
56
- }
57
- }, {
58
- d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1pp30po{font-size:var(--fontSizeBase500);}"]
59
- });
60
- /**
61
- * Styles for the action icon slot
62
- */
63
- const useAsideStyles = /*#__PURE__*/react_1.__styles({
64
- base: {
65
- mc9l5x: "f22iagw",
66
- Bt984gj: "f122n59",
67
- Frg6f3: ["fcgxt0o", "f1ujusj6"],
68
- z8tnut: "f1g0x7ka",
69
- z189sj: ["fw5db7e", "f1uw59to"],
70
- Byoj8tv: "f1qch9an",
71
- uwmqm3: ["f1uw59to", "fw5db7e"],
72
- i8kkvl: "f1ufnopg",
73
- Belr9w4: "f14sijuj"
74
- }
75
- }, {
76
- d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f1g0x7ka{padding-top:0;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f1qch9an{padding-bottom:0;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}"]
77
- });
78
- /**
79
- * Apply styling to the TreeItemLayout slots based on the state
80
- */
81
- const useTreeItemLayoutStyles_unstable = state => {
82
- const {
83
- iconAfter,
84
- iconBefore,
85
- aside,
86
- root
87
- } = state;
88
- const rootStyles = useRootStyles();
89
- const iconStyles = useIconStyles();
90
- const asideStyles = useAsideStyles();
91
- const size = treeContext_1.useTreeContext_unstable(ctx => ctx.size);
92
- root.className = react_1.mergeClasses(exports.treeItemLayoutClassNames.root, rootStyles.base, rootStyles[size], root.className);
93
- if (iconBefore) {
94
- iconBefore.className = react_1.mergeClasses(exports.treeItemLayoutClassNames.iconBefore, iconStyles.base, iconBefore.className);
95
- }
96
- if (iconAfter) {
97
- iconAfter.className = react_1.mergeClasses(exports.treeItemLayoutClassNames.iconAfter, iconStyles.base, iconAfter.className);
98
- }
99
- if (aside) {
100
- aside.className = react_1.mergeClasses(exports.treeItemLayoutClassNames.aside, asideStyles.base, aside.className);
101
- }
102
- return state;
103
- };
104
- exports.useTreeItemLayoutStyles_unstable = useTreeItemLayoutStyles_unstable;
105
- //# sourceMappingURL=useTreeItemLayoutStyles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["react_1","require","react_theme_1","treeContext_1","exports","treeItemLayoutClassNames","root","aside","iconAfter","iconBefore","useRootStyles","__styles","base","mc9l5x","Bt984gj","sshi5w","Bh6795r","Bnnss6s","xawz","medium","i8kkvl","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","d","useIconStyles","sj55zd","useAsideStyles","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","Belr9w4","useTreeItemLayoutStyles_unstable","state","rootStyles","iconStyles","asideStyles","size","useTreeContext_unstable","ctx","className","mergeClasses"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayoutStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\n\nexport const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots> = {\n root: 'fui-TreeItemLayout',\n aside: 'fui-TreeItemLayout__aside',\n iconAfter: 'fui-TreeItemLayout__iconAfter',\n iconBefore: 'fui-TreeItemLayout__iconBefore',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n minHeight: '32px',\n ...shorthands.flex(1),\n },\n medium: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body1,\n },\n small: {\n columnGap: tokens.spacingHorizontalXS,\n minHeight: '24px',\n ...typographyStyles.caption1,\n },\n});\n\n/**\n * Styles for the before/after icon slot\n */\nconst useIconStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n color: tokens.colorNeutralForeground2,\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500,\n },\n});\n\n/**\n * Styles for the action icon slot\n */\nconst useAsideStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n marginLeft: 'auto',\n ...shorthands.padding(0, tokens.spacingHorizontalM),\n ...shorthands.gap(tokens.spacingHorizontalXS),\n },\n});\n\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */\nexport const useTreeItemLayoutStyles_unstable = (state: TreeItemLayoutState): TreeItemLayoutState => {\n const { iconAfter, iconBefore, aside, root } = state;\n const rootStyles = useRootStyles();\n const iconStyles = useIconStyles();\n const asideStyles = useAsideStyles();\n\n const size = useTreeContext_unstable(ctx => ctx.size);\n\n root.className = mergeClasses(treeItemLayoutClassNames.root, rootStyles.base, rootStyles[size], root.className);\n\n if (iconBefore) {\n iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconBefore.className);\n }\n\n if (iconAfter) {\n iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconAfter.className);\n }\n\n if (aside) {\n aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideStyles.base, aside.className);\n }\n\n return state;\n};\n"],"mappings":";;;;;;AAAA,MAAAA,OAAA,gBAAAC,OAAA;AAGA,MAAAC,aAAA,gBAAAD,OAAA;AACA,MAAAE,aAAA,gBAAAF,OAAA;AAEaG,OAAA,CAAAC,wBAAwB,GAAwC;EAC3EC,IAAI,EAAE,oBAAoB;EAC1BC,KAAK,EAAE,2BAA2B;EAClCC,SAAS,EAAE,+BAA+B;EAC1CC,UAAU,EAAE;CACb;AAED;;;AAGA,MAAMC,aAAa,gBAAGV,OAAA,CAAAW,QAAU;EAAAC,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,IAAA;EAAA;EAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAL,MAAA;IAAAL,MAAA;IAAAM,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,EAgB9B;AAEF;;;AAGA,MAAMC,aAAa,gBAAG3B,OAAA,CAAAW,QAAU;EAAAC,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAc,MAAA;IAAAJ,OAAA;IAAAF,OAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,EAQ9B;AAEF;;;AAGA,MAAMG,cAAc,gBAAG7B,OAAA,CAAAW,QAAU;EAAAC,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAgB,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAd,MAAA;IAAAe,OAAA;EAAA;AAAA;EAAAT,CAAA;AAAA,EAQ/B;AAEF;;;AAGO,MAAMU,gCAAgC,GAAIC,KAA0B,IAAyB;EAClG,MAAM;IAAE7B,SAAS;IAAEC,UAAU;IAAEF,KAAK;IAAED;EAAI,CAAE,GAAG+B,KAAK;EACpD,MAAMC,UAAU,GAAG5B,aAAa,EAAE;EAClC,MAAM6B,UAAU,GAAGZ,aAAa,EAAE;EAClC,MAAMa,WAAW,GAAGX,cAAc,EAAE;EAEpC,MAAMY,IAAI,GAAGtC,aAAA,CAAAuC,uBAAuB,CAACC,GAAG,IAAIA,GAAG,CAACF,IAAI,CAAC;EAErDnC,IAAI,CAACsC,SAAS,GAAG5C,OAAA,CAAA6C,YAAY,CAACzC,OAAA,CAAAC,wBAAwB,CAACC,IAAI,EAAEgC,UAAU,CAAC1B,IAAI,EAAE0B,UAAU,CAACG,IAAI,CAAC,EAAEnC,IAAI,CAACsC,SAAS,CAAC;EAE/G,IAAInC,UAAU,EAAE;IACdA,UAAU,CAACmC,SAAS,GAAG5C,OAAA,CAAA6C,YAAY,CAACzC,OAAA,CAAAC,wBAAwB,CAACI,UAAU,EAAE8B,UAAU,CAAC3B,IAAI,EAAEH,UAAU,CAACmC,SAAS,CAAC;;EAGjH,IAAIpC,SAAS,EAAE;IACbA,SAAS,CAACoC,SAAS,GAAG5C,OAAA,CAAA6C,YAAY,CAACzC,OAAA,CAAAC,wBAAwB,CAACG,SAAS,EAAE+B,UAAU,CAAC3B,IAAI,EAAEJ,SAAS,CAACoC,SAAS,CAAC;;EAG9G,IAAIrC,KAAK,EAAE;IACTA,KAAK,CAACqC,SAAS,GAAG5C,OAAA,CAAA6C,YAAY,CAACzC,OAAA,CAAAC,wBAAwB,CAACE,KAAK,EAAEiC,WAAW,CAAC5B,IAAI,EAAEL,KAAK,CAACqC,SAAS,CAAC;;EAGnG,OAAOP,KAAK;AACd,CAAC;AAvBYjC,OAAA,CAAAgC,gCAAgC,GAAAA,gCAAA"}
@@ -1,122 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.useTreeItemPersonaLayoutStyles_unstable = exports.treeItemPersonaLayoutClassNames = void 0;
7
- const react_1 = /*#__PURE__*/require("@griffel/react");
8
- const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
9
- exports.treeItemPersonaLayoutClassNames = {
10
- root: 'fui-TreeItemPersonaLayout',
11
- media: 'fui-TreeItemPersonaLayout__media',
12
- content: 'fui-TreeItemPersonaLayout__content',
13
- description: 'fui-TreeItemPersonaLayout__description',
14
- aside: 'fui-TreeItemPersonaLayout__aside',
15
- main: 'fui-TreeItemPersonaLayout__main'
16
- };
17
- /**
18
- * Styles for the root slot
19
- */
20
- const useRootStyles = /*#__PURE__*/react_1.__styles({
21
- base: {
22
- a9b677: "fly5x3f",
23
- mc9l5x: "f22iagw",
24
- Bt984gj: "f122n59"
25
- }
26
- }, {
27
- d: [".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"]
28
- });
29
- /**
30
- * Styles for the expand icon slot
31
- */
32
- const useMediaStyles = /*#__PURE__*/react_1.__styles({
33
- base: {
34
- mc9l5x: "f22iagw",
35
- Bt984gj: "f122n59",
36
- a9b677: "f1szoe96",
37
- Bqenvij: "f1d2rq10",
38
- z8tnut: "f1g0x7ka",
39
- z189sj: ["f7x41pl", "fruq291"],
40
- Byoj8tv: "f1qch9an",
41
- uwmqm3: ["fgiv446", "ffczdla"]
42
- }
43
- }, {
44
- d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}", ".f1g0x7ka{padding-top:0;}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f1qch9an{padding-bottom:0;}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}"]
45
- });
46
- const useContentStyles = /*#__PURE__*/react_1.__styles({
47
- base: {
48
- a9b677: "fly5x3f",
49
- mc9l5x: "f22iagw",
50
- Beiy3e4: "f1vx9l62",
51
- z8tnut: "f1ngh7ph",
52
- z189sj: ["f7x41pl", "fruq291"],
53
- Byoj8tv: "f5o476b",
54
- uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
55
- i8kkvl: "f1fps8zv",
56
- Belr9w4: "fws515f"
57
- }
58
- }, {
59
- d: [".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f5o476b{padding-bottom:var(--spacingVerticalMNudge);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1fps8zv{-webkit-column-gap:var(--spacingVerticalNone);column-gap:var(--spacingVerticalNone);}", ".fws515f{row-gap:var(--spacingHorizontalNone);}"]
60
- });
61
- const useMainStyles = /*#__PURE__*/react_1.__styles({
62
- base: {
63
- Bahqtrf: "fk6fouc",
64
- Be2twd7: "fkhj508",
65
- Bhrd7zp: "figsok6",
66
- Bg96gwp: "f1i3iumi"
67
- }
68
- }, {
69
- d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
70
- });
71
- const useDescriptionStyles = /*#__PURE__*/react_1.__styles({
72
- base: {
73
- Bahqtrf: "fk6fouc",
74
- Be2twd7: "fy9rknc",
75
- Bhrd7zp: "figsok6",
76
- Bg96gwp: "fwrc4pm"
77
- }
78
- }, {
79
- d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}"]
80
- });
81
- const useAsideStyles = /*#__PURE__*/react_1.__styles({
82
- base: {
83
- mc9l5x: "f22iagw",
84
- Beiy3e4: "f1vx9l62",
85
- Huce71: "fz5stix",
86
- z189sj: ["fw5db7e", "f1uw59to"],
87
- Bahqtrf: "fk6fouc",
88
- Be2twd7: "fy9rknc",
89
- Bhrd7zp: "figsok6",
90
- Bg96gwp: "fwrc4pm"
91
- }
92
- }, {
93
- d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fz5stix{white-space:nowrap;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}"]
94
- });
95
- /**
96
- * Apply styling to the TreeItemPersonaLayout slots based on the state
97
- */
98
- const useTreeItemPersonaLayoutStyles_unstable = state => {
99
- const rootStyles = useRootStyles();
100
- const mediaStyles = useMediaStyles();
101
- const contentStyles = useContentStyles();
102
- const mainStyles = useMainStyles();
103
- const descriptionStyles = useDescriptionStyles();
104
- const asideStyles = useAsideStyles();
105
- state.root.className = react_1.mergeClasses(exports.treeItemPersonaLayoutClassNames.root, rootStyles.base, state.root.className);
106
- state.media.className = react_1.mergeClasses(exports.treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);
107
- if (state.content) {
108
- state.content.className = react_1.mergeClasses(exports.treeItemPersonaLayoutClassNames.content, contentStyles.base, state.content.className);
109
- }
110
- if (state.main) {
111
- state.main.className = react_1.mergeClasses(exports.treeItemPersonaLayoutClassNames.main, mainStyles.base, state.main.className);
112
- }
113
- if (state.description) {
114
- state.description.className = react_1.mergeClasses(exports.treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);
115
- }
116
- if (state.aside) {
117
- state.aside.className = react_1.mergeClasses(exports.treeItemPersonaLayoutClassNames.aside, asideStyles.base, state.aside.className);
118
- }
119
- return state;
120
- };
121
- exports.useTreeItemPersonaLayoutStyles_unstable = useTreeItemPersonaLayoutStyles_unstable;
122
- //# sourceMappingURL=useTreeItemPersonaLayoutStyles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["react_1","require","react_theme_1","exports","treeItemPersonaLayoutClassNames","root","media","content","description","aside","main","useRootStyles","__styles","base","a9b677","mc9l5x","Bt984gj","d","useMediaStyles","Bqenvij","z8tnut","z189sj","Byoj8tv","uwmqm3","useContentStyles","Beiy3e4","i8kkvl","Belr9w4","useMainStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useDescriptionStyles","useAsideStyles","Huce71","useTreeItemPersonaLayoutStyles_unstable","state","rootStyles","mediaStyles","contentStyles","mainStyles","descriptionStyles","asideStyles","className","mergeClasses"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.ts"],"sourcesContent":["import type { TreeItemPersonaLayoutSlots, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutSlots> = {\n root: 'fui-TreeItemPersonaLayout',\n media: 'fui-TreeItemPersonaLayout__media',\n content: 'fui-TreeItemPersonaLayout__content',\n description: 'fui-TreeItemPersonaLayout__description',\n aside: 'fui-TreeItemPersonaLayout__aside',\n main: 'fui-TreeItemPersonaLayout__main',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n },\n});\n\n/**\n * Styles for the expand icon slot\n */\nconst useMediaStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n width: '32px',\n height: '32px',\n ...shorthands.padding(0, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalXXS),\n },\n});\n\nconst useContentStyles = makeStyles({\n base: {\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n ...shorthands.padding(\n tokens.spacingVerticalMNudge,\n tokens.spacingHorizontalXS,\n tokens.spacingVerticalMNudge,\n tokens.spacingHorizontalS,\n ),\n ...shorthands.gap(tokens.spacingVerticalNone, tokens.spacingHorizontalNone),\n },\n});\nconst useMainStyles = makeStyles({\n base: {\n ...typographyStyles.body1,\n },\n});\nconst useDescriptionStyles = makeStyles({\n base: {\n ...typographyStyles.caption1,\n },\n});\nconst useAsideStyles = makeStyles({\n base: {\n display: 'flex',\n flexDirection: 'column',\n whiteSpace: 'nowrap',\n paddingRight: tokens.spacingHorizontalM,\n ...typographyStyles.caption1,\n },\n});\n\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */\nexport const useTreeItemPersonaLayoutStyles_unstable = (\n state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutState => {\n const rootStyles = useRootStyles();\n const mediaStyles = useMediaStyles();\n const contentStyles = useContentStyles();\n const mainStyles = useMainStyles();\n const descriptionStyles = useDescriptionStyles();\n const asideStyles = useAsideStyles();\n\n state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootStyles.base, state.root.className);\n\n state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);\n\n if (state.content) {\n state.content.className = mergeClasses(\n treeItemPersonaLayoutClassNames.content,\n contentStyles.base,\n state.content.className,\n );\n }\n if (state.main) {\n state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainStyles.base, state.main.className);\n }\n if (state.description) {\n state.description.className = mergeClasses(\n treeItemPersonaLayoutClassNames.description,\n descriptionStyles.base,\n state.description.className,\n );\n }\n if (state.aside) {\n state.aside.className = mergeClasses(\n treeItemPersonaLayoutClassNames.aside,\n asideStyles.base,\n state.aside.className,\n );\n }\n\n return state;\n};\n"],"mappings":"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"}
@@ -1,84 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.flatTreeRootParentId = exports.createUnfilteredFlatTree = void 0;
7
- /**
8
- * creates a list of flat tree items
9
- * and provides a map to access each item by id
10
- */
11
- function createUnfilteredFlatTree(flatTreeItemProps) {
12
- var _a;
13
- const root = createRootFlatTreeItem();
14
- const itemsPerId = new Map([[root.id, root]]);
15
- const items = [];
16
- for (let index = 0; index < flatTreeItemProps.length; index++) {
17
- const {
18
- parentId = exports.flatTreeRootParentId,
19
- ...treeItemProps
20
- } = flatTreeItemProps[index];
21
- const nextItemProps = flatTreeItemProps[index + 1];
22
- const currentParent = itemsPerId.get(parentId);
23
- if (!currentParent) {
24
- if (process.env.NODE_ENV === 'development') {
25
- // eslint-disable-next-line no-console
26
- console.error(`useFlatTree: item ${flatTreeItemProps[index].id} not properly initialized, make sure provided items are organized`);
27
- }
28
- break;
29
- }
30
- const isLeaf = (nextItemProps === null || nextItemProps === void 0 ? void 0 : nextItemProps.parentId) !== treeItemProps.id;
31
- const currentLevel = ((_a = currentParent.level) !== null && _a !== void 0 ? _a : 0) + 1;
32
- const currentChildrenSize = ++currentParent.childrenSize;
33
- const flatTreeItem = {
34
- id: treeItemProps.id,
35
- getTreeItemProps: () => ({
36
- ...treeItemProps,
37
- 'aria-level': currentLevel,
38
- 'aria-posinset': currentChildrenSize,
39
- 'aria-setsize': currentParent.childrenSize,
40
- leaf: isLeaf
41
- }),
42
- level: currentLevel,
43
- parentId,
44
- childrenSize: 0,
45
- index: -1
46
- };
47
- itemsPerId.set(flatTreeItem.id, flatTreeItem);
48
- items.push(flatTreeItem);
49
- }
50
- return {
51
- items,
52
- itemsPerId
53
- };
54
- }
55
- exports.createUnfilteredFlatTree = createUnfilteredFlatTree;
56
- exports.flatTreeRootParentId = '__fuiFlatTreeRoot';
57
- function createRootFlatTreeItem() {
58
- return {
59
- id: exports.flatTreeRootParentId,
60
- getTreeItemProps: () => {
61
- if (process.env.NODE_ENV === 'development') {
62
- // eslint-disable-next-line no-console
63
- console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');
64
- }
65
- return {
66
- id: exports.flatTreeRootParentId,
67
- 'aria-setsize': -1,
68
- 'aria-level': -1,
69
- 'aria-posinset': -1,
70
- leaf: true
71
- };
72
- },
73
- childrenSize: 0,
74
- get index() {
75
- if (process.env.NODE_ENV === 'development') {
76
- // eslint-disable-next-line no-console
77
- console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');
78
- }
79
- return -1;
80
- },
81
- level: 0
82
- };
83
- }
84
- //# sourceMappingURL=createUnfilteredFlatTree.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["createUnfilteredFlatTree","flatTreeItemProps","root","createRootFlatTreeItem","itemsPerId","Map","id","items","index","length","parentId","exports","flatTreeRootParentId","treeItemProps","nextItemProps","currentParent","get","process","env","NODE_ENV","console","error","isLeaf","currentLevel","_a","level","currentChildrenSize","childrenSize","flatTreeItem","getTreeItemProps","leaf","set","push"],"sources":["../src/packages/react-components/react-tree/src/utils/createUnfilteredFlatTree.ts"],"sourcesContent":["import { FlatTreeItem, FlatTreeItemProps } from '../hooks/useFlatTree';\n\n/**\n * @internal\n */\nexport type UnfilteredFlatTree = {\n items: FlatTreeItem[];\n itemsPerId: Map<string, FlatTreeItem>;\n};\n\n/**\n * creates a list of flat tree items\n * and provides a map to access each item by id\n */\nexport function createUnfilteredFlatTree(flatTreeItemProps: FlatTreeItemProps[]): UnfilteredFlatTree {\n const root = createRootFlatTreeItem();\n const itemsPerId = new Map<string, FlatTreeItem>([[root.id, root]]);\n const items: FlatTreeItem[] = [];\n\n for (let index = 0; index < flatTreeItemProps.length; index++) {\n const { parentId = flatTreeRootParentId, ...treeItemProps } = flatTreeItemProps[index];\n\n const nextItemProps = flatTreeItemProps[index + 1] as FlatTreeItemProps | undefined;\n const currentParent = itemsPerId.get(parentId);\n if (!currentParent) {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error(\n `useFlatTree: item ${flatTreeItemProps[index].id} not properly initialized, make sure provided items are organized`,\n );\n }\n break;\n }\n const isLeaf = nextItemProps?.parentId !== treeItemProps.id;\n const currentLevel = (currentParent.level ?? 0) + 1;\n const currentChildrenSize = ++currentParent.childrenSize;\n\n const flatTreeItem: FlatTreeItem = {\n id: treeItemProps.id,\n getTreeItemProps: () => ({\n ...treeItemProps,\n 'aria-level': currentLevel,\n 'aria-posinset': currentChildrenSize,\n 'aria-setsize': currentParent.childrenSize,\n leaf: isLeaf,\n }),\n level: currentLevel,\n parentId,\n childrenSize: 0,\n index: -1,\n };\n itemsPerId.set(flatTreeItem.id, flatTreeItem);\n items.push(flatTreeItem);\n }\n\n return { items, itemsPerId };\n}\n\nexport const flatTreeRootParentId = '__fuiFlatTreeRoot';\n\nfunction createRootFlatTreeItem(): FlatTreeItem {\n return {\n id: flatTreeRootParentId,\n getTreeItemProps: () => {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');\n }\n return { id: flatTreeRootParentId, 'aria-setsize': -1, 'aria-level': -1, 'aria-posinset': -1, leaf: true };\n },\n childrenSize: 0,\n get index() {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');\n }\n return -1;\n },\n level: 0,\n };\n}\n"],"mappings":";;;;;;AAUA;;;;AAIA,SAAgBA,wBAAwBA,CAACC,iBAAsC;;EAC7E,MAAMC,IAAI,GAAGC,sBAAsB,EAAE;EACrC,MAAMC,UAAU,GAAG,IAAIC,GAAG,CAAuB,CAAC,CAACH,IAAI,CAACI,EAAE,EAAEJ,IAAI,CAAC,CAAC,CAAC;EACnE,MAAMK,KAAK,GAAmB,EAAE;EAEhC,KAAK,IAAIC,KAAK,GAAG,CAAC,EAAEA,KAAK,GAAGP,iBAAiB,CAACQ,MAAM,EAAED,KAAK,EAAE,EAAE;IAC7D,MAAM;MAAEE,QAAQ,GAAGC,OAAA,CAAAC,oBAAoB;MAAE,GAAGC;IAAa,CAAE,GAAGZ,iBAAiB,CAACO,KAAK,CAAC;IAEtF,MAAMM,aAAa,GAAGb,iBAAiB,CAACO,KAAK,GAAG,CAAC,CAAkC;IACnF,MAAMO,aAAa,GAAGX,UAAU,CAACY,GAAG,CAACN,QAAQ,CAAC;IAC9C,IAAI,CAACK,aAAa,EAAE;MAClB,IAAIE,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;QAC1C;QACAC,OAAO,CAACC,KAAK,CACX,qBAAqBpB,iBAAiB,CAACO,KAAK,CAAC,CAACF,EAAE,mEAAmE,CACpH;;MAEH;;IAEF,MAAMgB,MAAM,GAAG,CAAAR,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEJ,QAAQ,MAAKG,aAAa,CAACP,EAAE;IAC3D,MAAMiB,YAAY,GAAG,CAAC,CAAAC,EAAA,GAAAT,aAAa,CAACU,KAAK,cAAAD,EAAA,cAAAA,EAAA,GAAI,CAAC,IAAI,CAAC;IACnD,MAAME,mBAAmB,GAAG,EAAEX,aAAa,CAACY,YAAY;IAExD,MAAMC,YAAY,GAAiB;MACjCtB,EAAE,EAAEO,aAAa,CAACP,EAAE;MACpBuB,gBAAgB,EAAEA,CAAA,MAAO;QACvB,GAAGhB,aAAa;QAChB,YAAY,EAAEU,YAAY;QAC1B,eAAe,EAAEG,mBAAmB;QACpC,cAAc,EAAEX,aAAa,CAACY,YAAY;QAC1CG,IAAI,EAAER;OACP,CAAC;MACFG,KAAK,EAAEF,YAAY;MACnBb,QAAQ;MACRiB,YAAY,EAAE,CAAC;MACfnB,KAAK,EAAE,CAAC;KACT;IACDJ,UAAU,CAAC2B,GAAG,CAACH,YAAY,CAACtB,EAAE,EAAEsB,YAAY,CAAC;IAC7CrB,KAAK,CAACyB,IAAI,CAACJ,YAAY,CAAC;;EAG1B,OAAO;IAAErB,KAAK;IAAEH;EAAU,CAAE;AAC9B;AA1CAO,OAAA,CAAAX,wBAAA,GAAAA,wBAAA;AA4CaW,OAAA,CAAAC,oBAAoB,GAAG,mBAAmB;AAEvD,SAAST,sBAAsBA,CAAA;EAC7B,OAAO;IACLG,EAAE,EAAEK,OAAA,CAAAC,oBAAoB;IACxBiB,gBAAgB,EAAEA,CAAA,KAAK;MACrB,IAAIZ,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;QAC1C;QACAC,OAAO,CAACC,KAAK,CAAC,wFAAwF,CAAC;;MAEzG,OAAO;QAAEf,EAAE,EAAEK,OAAA,CAAAC,oBAAoB;QAAE,cAAc,EAAE,CAAC,CAAC;QAAE,YAAY,EAAE,CAAC,CAAC;QAAE,eAAe,EAAE,CAAC,CAAC;QAAEkB,IAAI,EAAE;MAAI,CAAE;IAC5G,CAAC;IACDH,YAAY,EAAE,CAAC;IACf,IAAInB,KAAKA,CAAA;MACP,IAAIS,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;QAC1C;QACAC,OAAO,CAACC,KAAK,CAAC,wFAAwF,CAAC;;MAEzG,OAAO,CAAC,CAAC;IACX,CAAC;IACDI,KAAK,EAAE;GACR;AACH"}