@fluentui/react-tree 9.0.0-beta.11 → 9.0.0-beta.13

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 (190) hide show
  1. package/CHANGELOG.json +195 -1
  2. package/CHANGELOG.md +46 -2
  3. package/dist/index.d.ts +189 -100
  4. package/lib/TreeItemAside.js +2 -0
  5. package/lib/TreeItemAside.js.map +1 -0
  6. package/lib/components/Tree/Tree.js +1 -1
  7. package/lib/components/Tree/Tree.js.map +1 -1
  8. package/lib/components/Tree/Tree.types.js.map +1 -1
  9. package/lib/components/Tree/index.js +1 -1
  10. package/lib/components/Tree/index.js.map +1 -1
  11. package/lib/components/Tree/renderTree.js +1 -1
  12. package/lib/components/Tree/renderTree.js.map +1 -1
  13. package/lib/components/Tree/useRootTree.js +160 -0
  14. package/lib/components/Tree/useRootTree.js.map +1 -0
  15. package/lib/components/Tree/useSubtree.js +40 -0
  16. package/lib/components/Tree/useSubtree.js.map +1 -0
  17. package/lib/components/Tree/useTree.js +2 -95
  18. package/lib/components/Tree/useTree.js.map +1 -1
  19. package/lib/components/Tree/useTreeContextValues.js +2 -4
  20. package/lib/components/Tree/useTreeContextValues.js.map +1 -1
  21. package/lib/components/Tree/useTreeStyles.styles.js +30 -0
  22. package/lib/components/Tree/useTreeStyles.styles.js.map +1 -0
  23. package/lib/components/TreeItem/TreeItem.js +2 -2
  24. package/lib/components/TreeItem/TreeItem.js.map +1 -1
  25. package/lib/components/TreeItem/TreeItem.types.js.map +1 -1
  26. package/lib/components/TreeItem/index.js +1 -1
  27. package/lib/components/TreeItem/index.js.map +1 -1
  28. package/lib/components/TreeItem/renderTreeItem.js +2 -5
  29. package/lib/components/TreeItem/renderTreeItem.js.map +1 -1
  30. package/lib/components/TreeItem/useTreeItem.js +65 -175
  31. package/lib/components/TreeItem/useTreeItem.js.map +1 -1
  32. package/lib/components/TreeItem/useTreeItemContextValues.js +25 -11
  33. package/lib/components/TreeItem/useTreeItemContextValues.js.map +1 -1
  34. package/lib/components/TreeItem/useTreeItemStyles.styles.js +102 -0
  35. package/lib/components/TreeItem/useTreeItemStyles.styles.js.map +1 -0
  36. package/lib/components/TreeItemAside/TreeItemAside.js +15 -0
  37. package/lib/components/TreeItemAside/TreeItemAside.js.map +1 -0
  38. package/lib/components/TreeItemAside/TreeItemAside.types.js +2 -0
  39. package/lib/components/TreeItemAside/TreeItemAside.types.js.map +1 -0
  40. package/lib/components/TreeItemAside/index.js +6 -0
  41. package/lib/components/TreeItemAside/index.js.map +1 -0
  42. package/lib/components/TreeItemAside/renderTreeItemAside.js +19 -0
  43. package/lib/components/TreeItemAside/renderTreeItemAside.js.map +1 -0
  44. package/lib/components/TreeItemAside/useTreeItemAside.js +35 -0
  45. package/lib/components/TreeItemAside/useTreeItemAside.js.map +1 -0
  46. package/lib/components/TreeItemAside/useTreeItemAsideStyles.styles.js +47 -0
  47. package/lib/components/TreeItemAside/useTreeItemAsideStyles.styles.js.map +1 -0
  48. package/lib/components/TreeItemChevron.js +27 -0
  49. package/lib/components/TreeItemChevron.js.map +1 -0
  50. package/lib/components/TreeItemLayout/TreeItemLayout.js +1 -1
  51. package/lib/components/TreeItemLayout/TreeItemLayout.js.map +1 -1
  52. package/lib/components/TreeItemLayout/TreeItemLayout.types.js.map +1 -1
  53. package/lib/components/TreeItemLayout/index.js +1 -1
  54. package/lib/components/TreeItemLayout/index.js.map +1 -1
  55. package/lib/components/TreeItemLayout/renderTreeItemLayout.js +1 -4
  56. package/lib/components/TreeItemLayout/renderTreeItemLayout.js.map +1 -1
  57. package/lib/components/TreeItemLayout/useTreeItemLayout.js +16 -11
  58. package/lib/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
  59. package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js +138 -0
  60. package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map +1 -0
  61. package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js +1 -1
  62. package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js.map +1 -1
  63. package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js.map +1 -1
  64. package/lib/components/TreeItemPersonaLayout/index.js +1 -1
  65. package/lib/components/TreeItemPersonaLayout/index.js.map +1 -1
  66. package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js +2 -5
  67. package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map +1 -1
  68. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js +16 -20
  69. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js.map +1 -1
  70. package/lib/components/TreeItemPersonaLayout/{useTreeItemPersonaLayoutStyles.js → useTreeItemPersonaLayoutStyles.styles.js} +51 -30
  71. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map +1 -0
  72. package/lib/contexts/treeContext.js +1 -2
  73. package/lib/contexts/treeContext.js.map +1 -1
  74. package/lib/contexts/treeItemContext.js +12 -4
  75. package/lib/contexts/treeItemContext.js.map +1 -1
  76. package/lib/hooks/useFlatTree.js +9 -9
  77. package/lib/hooks/useFlatTree.js.map +1 -1
  78. package/lib/hooks/useFlatTreeNavigation.js +15 -13
  79. package/lib/hooks/useFlatTreeNavigation.js.map +1 -1
  80. package/lib/hooks/useNestedTreeNavigation.js +9 -9
  81. package/lib/hooks/useNestedTreeNavigation.js.map +1 -1
  82. package/lib/hooks/useOpenItemsState.js +3 -4
  83. package/lib/hooks/useOpenItemsState.js.map +1 -1
  84. package/lib/index.js +1 -0
  85. package/lib/index.js.map +1 -1
  86. package/lib/utils/createFlatTreeItems.js +32 -21
  87. package/lib/utils/createFlatTreeItems.js.map +1 -1
  88. package/lib/utils/flattenTree.js +4 -29
  89. package/lib/utils/flattenTree.js.map +1 -1
  90. package/lib/utils/tokens.js +11 -11
  91. package/lib/utils/tokens.js.map +1 -1
  92. package/lib-commonjs/TreeItemAside.js +9 -0
  93. package/lib-commonjs/TreeItemAside.js.map +1 -0
  94. package/lib-commonjs/components/Tree/Tree.js +2 -2
  95. package/lib-commonjs/components/Tree/Tree.js.map +1 -1
  96. package/lib-commonjs/components/Tree/index.js +1 -1
  97. package/lib-commonjs/components/Tree/index.js.map +1 -1
  98. package/lib-commonjs/components/Tree/renderTree.js +1 -1
  99. package/lib-commonjs/components/Tree/renderTree.js.map +1 -1
  100. package/lib-commonjs/components/Tree/useRootTree.js +151 -0
  101. package/lib-commonjs/components/Tree/useRootTree.js.map +1 -0
  102. package/lib-commonjs/components/Tree/useSubtree.js +41 -0
  103. package/lib-commonjs/components/Tree/useSubtree.js.map +1 -0
  104. package/lib-commonjs/components/Tree/useTree.js +4 -89
  105. package/lib-commonjs/components/Tree/useTree.js.map +1 -1
  106. package/lib-commonjs/components/Tree/useTreeContextValues.js +2 -3
  107. package/lib-commonjs/components/Tree/useTreeContextValues.js.map +1 -1
  108. package/lib-commonjs/components/Tree/{useTreeStyles.js → useTreeStyles.styles.js} +21 -4
  109. package/lib-commonjs/components/Tree/useTreeStyles.styles.js.map +1 -0
  110. package/lib-commonjs/components/TreeItem/TreeItem.js +2 -2
  111. package/lib-commonjs/components/TreeItem/TreeItem.js.map +1 -1
  112. package/lib-commonjs/components/TreeItem/index.js +1 -1
  113. package/lib-commonjs/components/TreeItem/index.js.map +1 -1
  114. package/lib-commonjs/components/TreeItem/renderTreeItem.js +2 -5
  115. package/lib-commonjs/components/TreeItem/renderTreeItem.js.map +1 -1
  116. package/lib-commonjs/components/TreeItem/useTreeItem.js +60 -165
  117. package/lib-commonjs/components/TreeItem/useTreeItem.js.map +1 -1
  118. package/lib-commonjs/components/TreeItem/useTreeItemContextValues.js +16 -15
  119. package/lib-commonjs/components/TreeItem/useTreeItemContextValues.js.map +1 -1
  120. package/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.js +208 -0
  121. package/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.js.map +1 -0
  122. package/lib-commonjs/components/TreeItemAside/TreeItemAside.js +21 -0
  123. package/lib-commonjs/components/TreeItemAside/TreeItemAside.js.map +1 -0
  124. package/lib-commonjs/components/TreeItemAside/TreeItemAside.types.js +7 -0
  125. package/lib-commonjs/components/TreeItemAside/TreeItemAside.types.js.map +1 -0
  126. package/lib-commonjs/components/TreeItemAside/index.js +13 -0
  127. package/lib-commonjs/components/TreeItemAside/index.js.map +1 -0
  128. package/lib-commonjs/components/TreeItemAside/renderTreeItemAside.js +22 -0
  129. package/lib-commonjs/components/TreeItemAside/renderTreeItemAside.js.map +1 -0
  130. package/lib-commonjs/components/TreeItemAside/useTreeItemAside.js +33 -0
  131. package/lib-commonjs/components/TreeItemAside/useTreeItemAside.js.map +1 -0
  132. package/lib-commonjs/components/TreeItemAside/useTreeItemAsideStyles.styles.js +92 -0
  133. package/lib-commonjs/components/TreeItemAside/useTreeItemAsideStyles.styles.js.map +1 -0
  134. package/lib-commonjs/components/TreeItemChevron.js +35 -0
  135. package/lib-commonjs/components/TreeItemChevron.js.map +1 -0
  136. package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.js +2 -2
  137. package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.js.map +1 -1
  138. package/lib-commonjs/components/TreeItemLayout/index.js +1 -1
  139. package/lib-commonjs/components/TreeItemLayout/index.js.map +1 -1
  140. package/lib-commonjs/components/TreeItemLayout/renderTreeItemLayout.js +1 -2
  141. package/lib-commonjs/components/TreeItemLayout/renderTreeItemLayout.js.map +1 -1
  142. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js +14 -9
  143. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
  144. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js +223 -0
  145. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map +1 -0
  146. package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js +2 -2
  147. package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js.map +1 -1
  148. package/lib-commonjs/components/TreeItemPersonaLayout/index.js +1 -1
  149. package/lib-commonjs/components/TreeItemPersonaLayout/index.js.map +1 -1
  150. package/lib-commonjs/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js +2 -3
  151. package/lib-commonjs/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map +1 -1
  152. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js +14 -14
  153. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js.map +1 -1
  154. package/lib-commonjs/components/TreeItemPersonaLayout/{useTreeItemPersonaLayoutStyles.js → useTreeItemPersonaLayoutStyles.styles.js} +91 -45
  155. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map +1 -0
  156. package/lib-commonjs/contexts/treeContext.js +1 -2
  157. package/lib-commonjs/contexts/treeContext.js.map +1 -1
  158. package/lib-commonjs/contexts/treeItemContext.js +12 -4
  159. package/lib-commonjs/contexts/treeItemContext.js.map +1 -1
  160. package/lib-commonjs/hooks/useFlatTree.js +9 -9
  161. package/lib-commonjs/hooks/useFlatTree.js.map +1 -1
  162. package/lib-commonjs/hooks/useFlatTreeNavigation.js +15 -13
  163. package/lib-commonjs/hooks/useFlatTreeNavigation.js.map +1 -1
  164. package/lib-commonjs/hooks/useNestedTreeNavigation.js +9 -9
  165. package/lib-commonjs/hooks/useNestedTreeNavigation.js.map +1 -1
  166. package/lib-commonjs/hooks/useOpenItemsState.js +3 -6
  167. package/lib-commonjs/hooks/useOpenItemsState.js.map +1 -1
  168. package/lib-commonjs/index.js +6 -0
  169. package/lib-commonjs/index.js.map +1 -1
  170. package/lib-commonjs/utils/createFlatTreeItems.js +33 -25
  171. package/lib-commonjs/utils/createFlatTreeItems.js.map +1 -1
  172. package/lib-commonjs/utils/flattenTree.js +8 -37
  173. package/lib-commonjs/utils/flattenTree.js.map +1 -1
  174. package/lib-commonjs/utils/tokens.js +10 -10
  175. package/lib-commonjs/utils/tokens.js.map +1 -1
  176. package/package.json +15 -14
  177. package/.swcrc +0 -30
  178. package/lib/components/Tree/useTreeStyles.js +0 -20
  179. package/lib/components/Tree/useTreeStyles.js.map +0 -1
  180. package/lib/components/TreeItem/useTreeItemStyles.js +0 -203
  181. package/lib/components/TreeItem/useTreeItemStyles.js.map +0 -1
  182. package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.js +0 -98
  183. package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.js.map +0 -1
  184. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js.map +0 -1
  185. package/lib-commonjs/components/Tree/useTreeStyles.js.map +0 -1
  186. package/lib-commonjs/components/TreeItem/useTreeItemStyles.js +0 -375
  187. package/lib-commonjs/components/TreeItem/useTreeItemStyles.js.map +0 -1
  188. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.js +0 -143
  189. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.js.map +0 -1
  190. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js.map +0 -1
@@ -10,10 +10,10 @@ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildc
10
10
  const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
11
  const _useTreeItemLayout = require("./useTreeItemLayout");
12
12
  const _renderTreeItemLayout = require("./renderTreeItemLayout");
13
- const _useTreeItemLayoutStyles = require("./useTreeItemLayoutStyles");
13
+ const _useTreeItemLayoutStylesStyles = require("./useTreeItemLayoutStyles.styles");
14
14
  const TreeItemLayout = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
15
15
  const state = (0, _useTreeItemLayout.useTreeItemLayout_unstable)(props, ref);
16
- (0, _useTreeItemLayoutStyles.useTreeItemLayoutStyles_unstable)(state);
16
+ (0, _useTreeItemLayoutStylesStyles.useTreeItemLayoutStyles_unstable)(state);
17
17
  return (0, _renderTreeItemLayout.renderTreeItemLayout_unstable)(state);
18
18
  });
19
19
  TreeItemLayout.displayName = 'TreeItemLayout'; //# sourceMappingURL=TreeItemLayout.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../lib/components/TreeItemLayout/TreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nimport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nimport { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles';\n/**\n * The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.\n * It provides a consistent visual structure for tree items in a `Tree` component.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemLayout = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useTreeItemLayout_unstable(props, ref);\n useTreeItemLayoutStyles_unstable(state);\n return renderTreeItemLayout_unstable(state);\n});\nTreeItemLayout.displayName = 'TreeItemLayout';\n//# sourceMappingURL=TreeItemLayout.js.map"],"names":["TreeItemLayout","React","forwardRef","props","ref","state","useTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","renderTreeItemLayout_unstable","displayName"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;mCACoB;sCACG;yCACG;AAM1C,MAAMA,iBAAiB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC1E,MAAMC,QAAQC,IAAAA,6CAA0B,EAACH,OAAOC;IAChDG,IAAAA,yDAAgC,EAACF;IACjC,OAAOG,IAAAA,mDAA6B,EAACH;AACvC;AACAL,eAAeS,WAAW,GAAG,kBAC7B,0CAA0C"}
1
+ {"version":3,"sources":["../../../lib/components/TreeItemLayout/TreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nimport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nimport { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles.styles';\n/**\n * The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.\n * It provides a consistent visual structure for tree items in a `Tree` component.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemLayout = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useTreeItemLayout_unstable(props, ref);\n useTreeItemLayoutStyles_unstable(state);\n return renderTreeItemLayout_unstable(state);\n});\nTreeItemLayout.displayName = 'TreeItemLayout';\n//# sourceMappingURL=TreeItemLayout.js.map"],"names":["TreeItemLayout","React","forwardRef","props","ref","state","useTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","renderTreeItemLayout_unstable","displayName"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;mCACoB;sCACG;+CACG;AAM1C,MAAMA,iBAAiB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC1E,MAAMC,QAAQC,IAAAA,6CAA0B,EAACH,OAAOC;IAChDG,IAAAA,+DAAgC,EAACF;IACjC,OAAOG,IAAAA,mDAA6B,EAACH;AACvC;AACAL,eAAeS,WAAW,GAAG,kBAC7B,0CAA0C"}
@@ -7,7 +7,7 @@ _exportStar(require("./TreeItemLayout"), exports);
7
7
  _exportStar(require("./TreeItemLayout.types"), exports);
8
8
  _exportStar(require("./renderTreeItemLayout"), exports);
9
9
  _exportStar(require("./useTreeItemLayout"), exports);
10
- _exportStar(require("./useTreeItemLayoutStyles"), exports);
10
+ _exportStar(require("./useTreeItemLayoutStyles.styles"), exports);
11
11
  //# sourceMappingURL=index.js.map
12
12
 
13
13
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../lib/components/TreeItemLayout/index.js"],"sourcesContent":["export * from './TreeItemLayout';\nexport * from './TreeItemLayout.types';\nexport * from './renderTreeItemLayout';\nexport * from './useTreeItemLayout';\nexport * from './useTreeItemLayoutStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
1
+ {"version":3,"sources":["../../../lib/components/TreeItemLayout/index.js"],"sourcesContent":["export * from './TreeItemLayout';\nexport * from './TreeItemLayout.types';\nexport * from './renderTreeItemLayout';\nexport * from './useTreeItemLayout';\nexport * from './useTreeItemLayoutStyles.styles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
@@ -9,9 +9,8 @@ Object.defineProperty(exports, "renderTreeItemLayout_unstable", {
9
9
  const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
10
10
  const _reactUtilities = require("@fluentui/react-utilities");
11
11
  const renderTreeItemLayout_unstable = (state)=>{
12
- const { isActionsVisible } = state;
13
12
  const { slots , slotProps } = (0, _reactUtilities.getSlotsNext)(state);
14
- return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, slots.iconBefore && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.iconBefore, slotProps.iconBefore), slotProps.root.children, slots.iconAfter && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.iconAfter, slotProps.iconAfter), !isActionsVisible && slots.aside && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.aside, slotProps.aside));
13
+ return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.expandIcon, slotProps.expandIcon), slots.iconBefore && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.iconBefore, slotProps.iconBefore), slotProps.root.children, slots.iconAfter && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.iconAfter, slotProps.iconAfter));
15
14
  }; //# sourceMappingURL=renderTreeItemLayout.js.map
16
15
 
17
16
  //# sourceMappingURL=renderTreeItemLayout.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../lib/components/TreeItemLayout/renderTreeItemLayout.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of TreeItemLayout\n */\nexport const renderTreeItemLayout_unstable = state => {\n const {\n isActionsVisible\n } = state;\n const {\n slots,\n slotProps\n } = getSlotsNext(state);\n return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.iconBefore && /*#__PURE__*/createElement(slots.iconBefore, slotProps.iconBefore), slotProps.root.children, slots.iconAfter && /*#__PURE__*/createElement(slots.iconAfter, slotProps.iconAfter), !isActionsVisible && slots.aside && /*#__PURE__*/createElement(slots.aside, slotProps.aside));\n};\n//# sourceMappingURL=renderTreeItemLayout.js.map"],"names":["renderTreeItemLayout_unstable","state","isActionsVisible","slots","slotProps","getSlotsNext","createElement","root","iconBefore","children","iconAfter","aside"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKrCA;;aAAAA;;iCALqE;gCACrD;AAItB,MAAMA,gCAAgCC,CAAAA,QAAS;IACpD,MAAM,EACJC,iBAAgB,EACjB,GAAGD;IACJ,MAAM,EACJE,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,4BAAY,EAACJ;IACjB,OAAO,WAAW,GAAEK,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAEJ,MAAMK,UAAU,IAAI,WAAW,GAAEF,IAAAA,8BAAa,EAACH,MAAMK,UAAU,EAAEJ,UAAUI,UAAU,GAAGJ,UAAUG,IAAI,CAACE,QAAQ,EAAEN,MAAMO,SAAS,IAAI,WAAW,GAAEJ,IAAAA,8BAAa,EAACH,MAAMO,SAAS,EAAEN,UAAUM,SAAS,GAAG,CAACR,oBAAoBC,MAAMQ,KAAK,IAAI,WAAW,GAAEL,IAAAA,8BAAa,EAACH,MAAMQ,KAAK,EAAEP,UAAUO,KAAK;AACjW,GACA,gDAAgD"}
1
+ {"version":3,"sources":["../../../lib/components/TreeItemLayout/renderTreeItemLayout.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of TreeItemLayout\n */\nexport const renderTreeItemLayout_unstable = state => {\n const {\n slots,\n slotProps\n } = getSlotsNext(state);\n return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/createElement(slots.expandIcon, slotProps.expandIcon), slots.iconBefore && /*#__PURE__*/createElement(slots.iconBefore, slotProps.iconBefore), slotProps.root.children, slots.iconAfter && /*#__PURE__*/createElement(slots.iconAfter, slotProps.iconAfter));\n};\n//# sourceMappingURL=renderTreeItemLayout.js.map"],"names":["renderTreeItemLayout_unstable","state","slots","slotProps","getSlotsNext","createElement","root","expandIcon","iconBefore","children","iconAfter"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKrCA;;aAAAA;;iCALqE;gCACrD;AAItB,MAAMA,gCAAgCC,CAAAA,QAAS;IACpD,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,4BAAY,EAACH;IACjB,OAAO,WAAW,GAAEI,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAEJ,MAAMK,UAAU,IAAI,WAAW,GAAEF,IAAAA,8BAAa,EAACH,MAAMK,UAAU,EAAEJ,UAAUI,UAAU,GAAGL,MAAMM,UAAU,IAAI,WAAW,GAAEH,IAAAA,8BAAa,EAACH,MAAMM,UAAU,EAAEL,UAAUK,UAAU,GAAGL,UAAUG,IAAI,CAACG,QAAQ,EAAEP,MAAMQ,SAAS,IAAI,WAAW,GAAEL,IAAAA,8BAAa,EAACH,MAAMQ,SAAS,EAAEP,UAAUO,SAAS;AAC3V,GACA,gDAAgD"}
@@ -10,20 +10,22 @@ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildc
10
10
  const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
11
  const _reactUtilities = require("@fluentui/react-utilities");
12
12
  const _treeItemContext = require("../../contexts/treeItemContext");
13
+ const _treeItemChevron = require("../TreeItemChevron");
13
14
  const useTreeItemLayout_unstable = (props, ref)=>{
14
- const { iconAfter , iconBefore , aside , as ='div' } = props;
15
- const treeItemContext = (0, _treeItemContext.useTreeItemContext_unstable)();
15
+ const { iconAfter , iconBefore , expandIcon , as ='span' } = props;
16
+ const layoutRef = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.layoutRef);
17
+ const expandIconRef = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.expandIconRef);
18
+ const isBranch = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.itemType === 'branch');
16
19
  return {
17
- ...treeItemContext,
18
20
  components: {
19
21
  root: 'div',
20
- iconBefore: 'span',
21
- iconAfter: 'span',
22
- aside: 'span'
22
+ expandIcon: 'div',
23
+ iconBefore: 'div',
24
+ iconAfter: 'div'
23
25
  },
24
26
  root: (0, _reactUtilities.getNativeElementProps)(as, {
25
27
  ...props,
26
- ref
28
+ ref: (0, _reactUtilities.useMergedRefs)(ref, layoutRef)
27
29
  }),
28
30
  iconBefore: (0, _reactUtilities.resolveShorthand)(iconBefore, {
29
31
  defaultProps: {
@@ -35,9 +37,12 @@ const useTreeItemLayout_unstable = (props, ref)=>{
35
37
  'aria-hidden': true
36
38
  }
37
39
  }),
38
- aside: (0, _reactUtilities.resolveShorthand)(aside, {
40
+ expandIcon: (0, _reactUtilities.resolveShorthand)(expandIcon, {
41
+ required: isBranch,
39
42
  defaultProps: {
40
- 'aria-hidden': true
43
+ children: /*#__PURE__*/ _react.createElement(_treeItemChevron.TreeItemChevron, null),
44
+ 'aria-hidden': true,
45
+ ref: (0, _reactUtilities.useMergedRefs)((0, _reactUtilities.isResolvedShorthand)(expandIcon) ? expandIcon.ref : undefined, expandIconRef)
41
46
  }
42
47
  })
43
48
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../lib/components/TreeItemLayout/useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (props, ref) => {\n const {\n iconAfter,\n iconBefore,\n aside,\n as = 'div'\n } = props;\n const treeItemContext = useTreeItemContext_unstable();\n return {\n ...treeItemContext,\n components: {\n root: 'div',\n iconBefore: 'span',\n iconAfter: 'span',\n aside: 'span'\n },\n root: getNativeElementProps(as, {\n ...props,\n ref\n }),\n iconBefore: resolveShorthand(iconBefore, {\n defaultProps: {\n 'aria-hidden': true\n }\n }),\n iconAfter: resolveShorthand(iconAfter, {\n defaultProps: {\n 'aria-hidden': true\n }\n }),\n aside: resolveShorthand(aside, {\n defaultProps: {\n 'aria-hidden': true\n }\n })\n };\n};\n//# sourceMappingURL=useTreeItemLayout.js.map"],"names":["useTreeItemLayout_unstable","props","ref","iconAfter","iconBefore","aside","as","treeItemContext","useTreeItemContext_unstable","components","root","getNativeElementProps","resolveShorthand","defaultProps"],"mappings":";;;;+BAYaA;;aAAAA;;;6DAZU;gCACiC;iCACZ;AAUrC,MAAMA,6BAA6B,CAACC,OAAOC,MAAQ;IACxD,MAAM,EACJC,UAAS,EACTC,WAAU,EACVC,MAAK,EACLC,IAAK,MAAK,EACX,GAAGL;IACJ,MAAMM,kBAAkBC,IAAAA,4CAA2B;IACnD,OAAO;QACL,GAAGD,eAAe;QAClBE,YAAY;YACVC,MAAM;YACNN,YAAY;YACZD,WAAW;YACXE,OAAO;QACT;QACAK,MAAMC,IAAAA,qCAAqB,EAACL,IAAI;YAC9B,GAAGL,KAAK;YACRC;QACF;QACAE,YAAYQ,IAAAA,gCAAgB,EAACR,YAAY;YACvCS,cAAc;gBACZ,eAAe,IAAI;YACrB;QACF;QACAV,WAAWS,IAAAA,gCAAgB,EAACT,WAAW;YACrCU,cAAc;gBACZ,eAAe,IAAI;YACrB;QACF;QACAR,OAAOO,IAAAA,gCAAgB,EAACP,OAAO;YAC7BQ,cAAc;gBACZ,eAAe,IAAI;YACrB;QACF;IACF;AACF,GACA,6CAA6C"}
1
+ {"version":3,"sources":["../../../lib/components/TreeItemLayout/useTreeItemLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nimport { TreeItemChevron } from '../TreeItemChevron';\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (props, ref) => {\n const {\n iconAfter,\n iconBefore,\n expandIcon,\n as = 'span'\n } = props;\n const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n return {\n components: {\n root: 'div',\n expandIcon: 'div',\n iconBefore: 'div',\n iconAfter: 'div'\n },\n root: getNativeElementProps(as, {\n ...props,\n ref: useMergedRefs(ref, layoutRef)\n }),\n iconBefore: resolveShorthand(iconBefore, {\n defaultProps: {\n 'aria-hidden': true\n }\n }),\n iconAfter: resolveShorthand(iconAfter, {\n defaultProps: {\n 'aria-hidden': true\n }\n }),\n expandIcon: resolveShorthand(expandIcon, {\n required: isBranch,\n defaultProps: {\n children: /*#__PURE__*/React.createElement(TreeItemChevron, null),\n 'aria-hidden': true,\n ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef)\n }\n })\n };\n};\n//# sourceMappingURL=useTreeItemLayout.js.map"],"names":["useTreeItemLayout_unstable","props","ref","iconAfter","iconBefore","expandIcon","as","layoutRef","useTreeItemContext_unstable","ctx","expandIconRef","isBranch","itemType","components","root","getNativeElementProps","useMergedRefs","resolveShorthand","defaultProps","required","children","React","createElement","TreeItemChevron","isResolvedShorthand","undefined"],"mappings":";;;;+BAaaA;;aAAAA;;;6DAbU;gCACqE;iCAChD;iCACZ;AAUzB,MAAMA,6BAA6B,CAACC,OAAOC,MAAQ;IACxD,MAAM,EACJC,UAAS,EACTC,WAAU,EACVC,WAAU,EACVC,IAAK,OAAM,EACZ,GAAGL;IACJ,MAAMM,YAAYC,IAAAA,4CAA2B,EAACC,CAAAA,MAAOA,IAAIF,SAAS;IAClE,MAAMG,gBAAgBF,IAAAA,4CAA2B,EAACC,CAAAA,MAAOA,IAAIC,aAAa;IAC1E,MAAMC,WAAWH,IAAAA,4CAA2B,EAACC,CAAAA,MAAOA,IAAIG,QAAQ,KAAK;IACrE,OAAO;QACLC,YAAY;YACVC,MAAM;YACNT,YAAY;YACZD,YAAY;YACZD,WAAW;QACb;QACAW,MAAMC,IAAAA,qCAAqB,EAACT,IAAI;YAC9B,GAAGL,KAAK;YACRC,KAAKc,IAAAA,6BAAa,EAACd,KAAKK;QAC1B;QACAH,YAAYa,IAAAA,gCAAgB,EAACb,YAAY;YACvCc,cAAc;gBACZ,eAAe,IAAI;YACrB;QACF;QACAf,WAAWc,IAAAA,gCAAgB,EAACd,WAAW;YACrCe,cAAc;gBACZ,eAAe,IAAI;YACrB;QACF;QACAb,YAAYY,IAAAA,gCAAgB,EAACZ,YAAY;YACvCc,UAAUR;YACVO,cAAc;gBACZE,UAAU,WAAW,GAAEC,OAAMC,aAAa,CAACC,gCAAe,EAAE,IAAI;gBAChE,eAAe,IAAI;gBACnBrB,KAAKc,IAAAA,6BAAa,EAACQ,IAAAA,mCAAmB,EAACnB,cAAcA,WAAWH,GAAG,GAAGuB,SAAS,EAAEf;YACnF;QACF;IACF;AACF,GACA,6CAA6C"}
@@ -0,0 +1,223 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ treeItemLayoutClassNames: ()=>treeItemLayoutClassNames,
13
+ useTreeItemLayoutStyles_unstable: ()=>useTreeItemLayoutStyles_unstable
14
+ });
15
+ const _react = require("@griffel/react");
16
+ const _treeContext = require("../../contexts/treeContext");
17
+ const _treeItemContext = require("../../contexts/treeItemContext");
18
+ const treeItemLayoutClassNames = {
19
+ root: 'fui-TreeItemLayout',
20
+ expandIcon: 'fui-TreeItemLayout__expandIcon',
21
+ iconBefore: 'fui-TreeItemLayout__iconBefore',
22
+ iconAfter: 'fui-TreeItemLayout__iconAfter'
23
+ };
24
+ /**
25
+ * Styles for the root slot
26
+ */ const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
27
+ base: {
28
+ mc9l5x: "f22iagw",
29
+ Bt984gj: "f122n59",
30
+ sshi5w: "f1nxs5xn",
31
+ B7ck84d: "f1ewtqcl",
32
+ Ijaq50: "f15ws6j",
33
+ Br312pm: "f135tdbu",
34
+ nk6f5a: "f2e2169",
35
+ Bw0ie65: "f4rqp6x",
36
+ Bbmb7ep: [
37
+ "f1aa9q02",
38
+ "f16jpd5f"
39
+ ],
40
+ Beyfa6y: [
41
+ "f16jpd5f",
42
+ "f1aa9q02"
43
+ ],
44
+ B7oj6ja: [
45
+ "f1jar5jt",
46
+ "fyu767a"
47
+ ],
48
+ Btl43ni: [
49
+ "fyu767a",
50
+ "f1jar5jt"
51
+ ],
52
+ lj723h: "flvvhsy",
53
+ ecr2s2: "f1wfn5kd",
54
+ qya0sb: "f1ih54s9",
55
+ Bi91k9c: "fnwyq0v",
56
+ Jwef8y: "f1t94bn6",
57
+ Becwuud: "f1jk1nfw"
58
+ },
59
+ leaf: {
60
+ uwmqm3: [
61
+ "f1k1erfc",
62
+ "faevyjx"
63
+ ]
64
+ },
65
+ branch: {
66
+ uwmqm3: [
67
+ "fo100m9",
68
+ "f6yw3pu"
69
+ ]
70
+ },
71
+ medium: {
72
+ i8kkvl: "f1rjii52",
73
+ Bahqtrf: "fk6fouc",
74
+ Be2twd7: "fkhj508",
75
+ Bhrd7zp: "figsok6",
76
+ Bg96gwp: "f1i3iumi"
77
+ },
78
+ small: {
79
+ i8kkvl: "f1ufnopg",
80
+ sshi5w: "f1pha7fy",
81
+ Bahqtrf: "fk6fouc",
82
+ Be2twd7: "fy9rknc",
83
+ Bhrd7zp: "figsok6",
84
+ Bg96gwp: "fwrc4pm"
85
+ },
86
+ subtle: {},
87
+ "subtle-alpha": {
88
+ Jwef8y: "f146ro5n",
89
+ ecr2s2: "fkam630"
90
+ },
91
+ transparent: {
92
+ De3pzq: "f1c21dwh",
93
+ Jwef8y: "fjxutwb",
94
+ ecr2s2: "fophhak"
95
+ }
96
+ }, {
97
+ d: [
98
+ ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
99
+ ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}",
100
+ ".f1nxs5xn{min-height:32px;}",
101
+ ".f1ewtqcl{box-sizing:border-box;}",
102
+ ".f15ws6j{grid-row-start:layout;}",
103
+ ".f135tdbu{grid-column-start:layout;}",
104
+ ".f2e2169{grid-row-end:layout;}",
105
+ ".f4rqp6x{grid-column-end:layout;}",
106
+ ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}",
107
+ ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}",
108
+ ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}",
109
+ ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}",
110
+ ".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}",
111
+ ".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}",
112
+ ".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}",
113
+ ".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}",
114
+ ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}",
115
+ ".fk6fouc{font-family:var(--fontFamilyBase);}",
116
+ ".fkhj508{font-size:var(--fontSizeBase300);}",
117
+ ".figsok6{font-weight:var(--fontWeightRegular);}",
118
+ ".f1i3iumi{line-height:var(--lineHeightBase300);}",
119
+ ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}",
120
+ ".f1pha7fy{min-height:24px;}",
121
+ ".fy9rknc{font-size:var(--fontSizeBase200);}",
122
+ ".fwrc4pm{line-height:var(--lineHeightBase200);}",
123
+ ".f1c21dwh{background-color:var(--colorTransparentBackground);}"
124
+ ],
125
+ a: [
126
+ ".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}",
127
+ ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}",
128
+ ".f1ih54s9:active .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}",
129
+ ".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}",
130
+ ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}"
131
+ ],
132
+ h: [
133
+ ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}",
134
+ ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}",
135
+ ".f1jk1nfw:hover .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}",
136
+ ".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}",
137
+ ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}"
138
+ ]
139
+ });
140
+ /**
141
+ * Styles for the expand icon slot
142
+ */ const useExpandIconStyles = /*#__PURE__*/ (0, _react["__styles"])({
143
+ base: {
144
+ mc9l5x: "f22iagw",
145
+ Bt984gj: "f122n59",
146
+ Brf1p80: "f4d9j23",
147
+ Bf4jedk: "f17fgpbq",
148
+ B7ck84d: "f1ewtqcl",
149
+ sj55zd: "f11d4kpn",
150
+ Bh6795r: "f1jhi6b8",
151
+ Bnnss6s: "fi64zpg",
152
+ xawz: "f1rmlqtg",
153
+ z8tnut: "f1ywm7hm",
154
+ z189sj: [
155
+ "fhxju0i",
156
+ "f1cnd47f"
157
+ ],
158
+ Byoj8tv: "f14wxoun",
159
+ uwmqm3: [
160
+ "f1cnd47f",
161
+ "fhxju0i"
162
+ ]
163
+ }
164
+ }, {
165
+ d: [
166
+ ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
167
+ ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}",
168
+ ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}",
169
+ ".f17fgpbq{min-width:24px;}",
170
+ ".f1ewtqcl{box-sizing:border-box;}",
171
+ ".f11d4kpn{color:var(--colorNeutralForeground3);}",
172
+ ".f1jhi6b8{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}",
173
+ ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}",
174
+ ".f1rmlqtg{-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;}",
175
+ ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}",
176
+ ".fhxju0i{padding-right:0;}",
177
+ ".f1cnd47f{padding-left:0;}",
178
+ ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}"
179
+ ]
180
+ });
181
+ /**
182
+ * Styles for the before/after icon slot
183
+ */ const useIconStyles = /*#__PURE__*/ (0, _react["__styles"])({
184
+ base: {
185
+ mc9l5x: "f22iagw",
186
+ Bt984gj: "f122n59",
187
+ sj55zd: "fkfq4zb",
188
+ Bg96gwp: "f106mvju",
189
+ Be2twd7: "f1pp30po"
190
+ },
191
+ iconBefore: {},
192
+ iconAfter: {}
193
+ }, {
194
+ d: [
195
+ ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
196
+ ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}",
197
+ ".fkfq4zb{color:var(--colorNeutralForeground2);}",
198
+ ".f106mvju{line-height:var(--lineHeightBase500);}",
199
+ ".f1pp30po{font-size:var(--fontSizeBase500);}"
200
+ ]
201
+ });
202
+ const useTreeItemLayoutStyles_unstable = (state)=>{
203
+ const { iconAfter , iconBefore , expandIcon , root } = state;
204
+ const rootStyles = useRootStyles();
205
+ const iconStyles = useIconStyles();
206
+ const expandIconStyles = useExpandIconStyles();
207
+ const size = (0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.size);
208
+ const appearance = (0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.appearance);
209
+ const itemType = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.itemType);
210
+ root.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.root, rootStyles.base, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);
211
+ if (expandIcon) {
212
+ expandIcon.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);
213
+ }
214
+ if (iconBefore) {
215
+ iconBefore.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconStyles.iconBefore, iconBefore.className);
216
+ }
217
+ if (iconAfter) {
218
+ iconAfter.className = (0, _react.mergeClasses)(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconStyles.iconAfter, iconAfter.className);
219
+ }
220
+ return state;
221
+ }; //# sourceMappingURL=useTreeItemLayoutStyles.styles.js.map
222
+
223
+ //# sourceMappingURL=useTreeItemLayoutStyles.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemLayoutClassNames = {\n root: 'fui-TreeItemLayout',\n expandIcon: 'fui-TreeItemLayout__expandIcon',\n iconBefore: 'fui-TreeItemLayout__iconBefore',\n iconAfter: 'fui-TreeItemLayout__iconAfter'\n};\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n base: {\n mc9l5x: \"f22iagw\",\n Bt984gj: \"f122n59\",\n sshi5w: \"f1nxs5xn\",\n B7ck84d: \"f1ewtqcl\",\n Ijaq50: \"f15ws6j\",\n Br312pm: \"f135tdbu\",\n nk6f5a: \"f2e2169\",\n Bw0ie65: \"f4rqp6x\",\n Bbmb7ep: [\"f1aa9q02\", \"f16jpd5f\"],\n Beyfa6y: [\"f16jpd5f\", \"f1aa9q02\"],\n B7oj6ja: [\"f1jar5jt\", \"fyu767a\"],\n Btl43ni: [\"fyu767a\", \"f1jar5jt\"],\n lj723h: \"flvvhsy\",\n ecr2s2: \"f1wfn5kd\",\n qya0sb: \"f1ih54s9\",\n Bi91k9c: \"fnwyq0v\",\n Jwef8y: \"f1t94bn6\",\n Becwuud: \"f1jk1nfw\"\n },\n leaf: {\n uwmqm3: [\"f1k1erfc\", \"faevyjx\"]\n },\n branch: {\n uwmqm3: [\"fo100m9\", \"f6yw3pu\"]\n },\n medium: {\n i8kkvl: \"f1rjii52\",\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fkhj508\",\n Bhrd7zp: \"figsok6\",\n Bg96gwp: \"f1i3iumi\"\n },\n small: {\n i8kkvl: \"f1ufnopg\",\n sshi5w: \"f1pha7fy\",\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fy9rknc\",\n Bhrd7zp: \"figsok6\",\n Bg96gwp: \"fwrc4pm\"\n },\n subtle: {},\n \"subtle-alpha\": {\n Jwef8y: \"f146ro5n\",\n ecr2s2: \"fkam630\"\n },\n transparent: {\n De3pzq: \"f1c21dwh\",\n Jwef8y: \"fjxutwb\",\n ecr2s2: \"fophhak\"\n }\n}, {\n 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;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f15ws6j{grid-row-start:layout;}\", \".f135tdbu{grid-column-start:layout;}\", \".f2e2169{grid-row-end:layout;}\", \".f4rqp6x{grid-column-end:layout;}\", \".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);}\", \".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}\", \".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}\", \".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}\", \".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}\", \".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);}\", \".f1c21dwh{background-color:var(--colorTransparentBackground);}\"],\n a: [\".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}\", \".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}\", \".f1ih54s9:active .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}\", \".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}\", \".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}\"],\n h: [\".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}\", \".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}\", \".f1jk1nfw:hover .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}\", \".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}\", \".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}\"]\n});\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconStyles = /*#__PURE__*/__styles({\n base: {\n mc9l5x: \"f22iagw\",\n Bt984gj: \"f122n59\",\n Brf1p80: \"f4d9j23\",\n Bf4jedk: \"f17fgpbq\",\n B7ck84d: \"f1ewtqcl\",\n sj55zd: \"f11d4kpn\",\n Bh6795r: \"f1jhi6b8\",\n Bnnss6s: \"fi64zpg\",\n xawz: \"f1rmlqtg\",\n z8tnut: \"f1ywm7hm\",\n z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n Byoj8tv: \"f14wxoun\",\n uwmqm3: [\"f1cnd47f\", \"fhxju0i\"]\n }\n}, {\n 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);}\", \".f1jhi6b8{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}\", \".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}\", \".f1rmlqtg{-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;}\", \".f1ywm7hm{padding-top:var(--spacingVerticalXS);}\", \".fhxju0i{padding-right:0;}\", \".f1cnd47f{padding-left:0;}\", \".f14wxoun{padding-bottom:var(--spacingVerticalXS);}\"]\n});\n/**\n * Styles for the before/after icon slot\n */\nconst useIconStyles = /*#__PURE__*/__styles({\n base: {\n mc9l5x: \"f22iagw\",\n Bt984gj: \"f122n59\",\n sj55zd: \"fkfq4zb\",\n Bg96gwp: \"f106mvju\",\n Be2twd7: \"f1pp30po\"\n },\n iconBefore: {},\n iconAfter: {}\n}, {\n 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);}\"]\n});\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */\nexport const useTreeItemLayoutStyles_unstable = state => {\n const {\n iconAfter,\n iconBefore,\n expandIcon,\n root\n } = state;\n const rootStyles = useRootStyles();\n const iconStyles = useIconStyles();\n const expandIconStyles = useExpandIconStyles();\n const size = useTreeContext_unstable(ctx => ctx.size);\n const appearance = useTreeContext_unstable(ctx => ctx.appearance);\n const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n root.className = mergeClasses(treeItemLayoutClassNames.root, rootStyles.base, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);\n if (expandIcon) {\n expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);\n }\n if (iconBefore) {\n iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconStyles.iconBefore, iconBefore.className);\n }\n if (iconAfter) {\n iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconStyles.iconAfter, iconAfter.className);\n }\n return state;\n};\n//# sourceMappingURL=useTreeItemLayoutStyles.styles.js.map"],"names":["treeItemLayoutClassNames","useTreeItemLayoutStyles_unstable","root","expandIcon","iconBefore","iconAfter","useRootStyles","__styles","base","mc9l5x","Bt984gj","sshi5w","B7ck84d","Ijaq50","Br312pm","nk6f5a","Bw0ie65","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","lj723h","ecr2s2","qya0sb","Bi91k9c","Jwef8y","Becwuud","leaf","uwmqm3","branch","medium","i8kkvl","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","subtle","transparent","De3pzq","d","a","h","useExpandIconStyles","Brf1p80","Bf4jedk","sj55zd","Bh6795r","Bnnss6s","xawz","z8tnut","z189sj","Byoj8tv","useIconStyles","state","rootStyles","iconStyles","expandIconStyles","size","useTreeContext_unstable","ctx","appearance","itemType","useTreeItemContext_unstable","className","mergeClasses"],"mappings":";;;;;;;;;;;IAKaA,wBAAwB,MAAxBA;IA2GAC,gCAAgC,MAAhCA;;uBAhHsC;6BAEX;iCAEI;AACrC,MAAMD,2BAA2B;IACtCE,MAAM;IACNC,YAAY;IACZC,YAAY;IACZC,WAAW;AACb;AACA;;CAEC,GACD,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IAC1CC,MAAM;QACJC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAU;QAChCC,SAAS;YAAC;YAAW;SAAW;QAChCC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;IACX;IACAC,MAAM;QACJC,QAAQ;YAAC;YAAY;SAAU;IACjC;IACAC,QAAQ;QACND,QAAQ;YAAC;YAAW;SAAU;IAChC;IACAE,QAAQ;QACNC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;IACAC,OAAO;QACLL,QAAQ;QACRpB,QAAQ;QACRqB,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;IACAE,QAAQ,CAAC;IACT,gBAAgB;QACdZ,QAAQ;QACRH,QAAQ;IACV;IACAgB,aAAa;QACXC,QAAQ;QACRd,QAAQ;QACRH,QAAQ;IACV;AACF,GAAG;IACDkB,GAAG;QAAC;QAAwF;QAA2G;QAA+B;QAAqC;QAAoC;QAAwC;QAAkC;QAAqC;QAAoE;QAAmE;QAAiE;QAA+D;QAAiG;QAAiG;QAAsG;QAAuG;QAA2G;QAAgD;QAA+C;QAAmD;QAAoD;QAAmG;QAA+B;QAA+C;QAAmD;KAAiE;IAC1oDC,GAAG;QAAC;QAAiE;QAA2E;QAAkG;QAAoF;KAA8E;IACpZC,GAAG;QAAC;QAA8D;QAAwE;QAA+F;QAAkF;KAA2E;AACxY;AACA;;CAEC,GACD,MAAMC,sBAAsB,WAAW,GAAEpC,IAAAA,kBAAQ,EAAC;IAChDC,MAAM;QACJC,QAAQ;QACRC,SAAS;QACTkC,SAAS;QACTC,SAAS;QACTjC,SAAS;QACTkC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,MAAM;QACNC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTxB,QAAQ;YAAC;YAAY;SAAU;IACjC;AACF,GAAG;IACDY,GAAG;QAAC;QAAwF;QAA2G;QAAiH;QAA8B;QAAqC;QAAoD;QAAsF;QAAsE;QAAoF;QAAoD;QAA8B;QAA8B;KAAsD;AACv0B;AACA;;CAEC,GACD,MAAMa,gBAAgB,WAAW,GAAE9C,IAAAA,kBAAQ,EAAC;IAC1CC,MAAM;QACJC,QAAQ;QACRC,SAAS;QACToC,QAAQ;QACRX,SAAS;QACTF,SAAS;IACX;IACA7B,YAAY,CAAC;IACbC,WAAW,CAAC;AACd,GAAG;IACDmC,GAAG;QAAC;QAAwF;QAA2G;QAAmD;QAAoD;KAA+C;AAC/V;AAIO,MAAMvC,mCAAmCqD,CAAAA,QAAS;IACvD,MAAM,EACJjD,UAAS,EACTD,WAAU,EACVD,WAAU,EACVD,KAAI,EACL,GAAGoD;IACJ,MAAMC,aAAajD;IACnB,MAAMkD,aAAaH;IACnB,MAAMI,mBAAmBd;IACzB,MAAMe,OAAOC,IAAAA,oCAAuB,EAACC,CAAAA,MAAOA,IAAIF,IAAI;IACpD,MAAMG,aAAaF,IAAAA,oCAAuB,EAACC,CAAAA,MAAOA,IAAIC,UAAU;IAChE,MAAMC,WAAWC,IAAAA,4CAA2B,EAACH,CAAAA,MAAOA,IAAIE,QAAQ;IAChE5D,KAAK8D,SAAS,GAAGC,IAAAA,mBAAY,EAACjE,yBAAyBE,IAAI,EAAEqD,WAAW/C,IAAI,EAAE+C,UAAU,CAACM,WAAW,EAAEN,UAAU,CAACG,KAAK,EAAEH,UAAU,CAACO,SAAS,EAAE5D,KAAK8D,SAAS;IAC5J,IAAI7D,YAAY;QACdA,WAAW6D,SAAS,GAAGC,IAAAA,mBAAY,EAACjE,yBAAyBG,UAAU,EAAEsD,iBAAiBjD,IAAI,EAAEL,WAAW6D,SAAS;IACtH,CAAC;IACD,IAAI5D,YAAY;QACdA,WAAW4D,SAAS,GAAGC,IAAAA,mBAAY,EAACjE,yBAAyBI,UAAU,EAAEoD,WAAWhD,IAAI,EAAEgD,WAAWpD,UAAU,EAAEA,WAAW4D,SAAS;IACvI,CAAC;IACD,IAAI3D,WAAW;QACbA,UAAU2D,SAAS,GAAGC,IAAAA,mBAAY,EAACjE,yBAAyBK,SAAS,EAAEmD,WAAWhD,IAAI,EAAEgD,WAAWnD,SAAS,EAAEA,UAAU2D,SAAS;IACnI,CAAC;IACD,OAAOV;AACT,GACA,0DAA0D"}
@@ -10,11 +10,11 @@ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildc
10
10
  const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
11
  const _useTreeItemPersonaLayout = require("./useTreeItemPersonaLayout");
12
12
  const _renderTreeItemPersonaLayout = require("./renderTreeItemPersonaLayout");
13
- const _useTreeItemPersonaLayoutStyles = require("./useTreeItemPersonaLayoutStyles");
13
+ const _useTreeItemPersonaLayoutStylesStyles = require("./useTreeItemPersonaLayoutStyles.styles");
14
14
  const _useTreeItemPersonaLayoutContextValues = require("./useTreeItemPersonaLayoutContextValues");
15
15
  const TreeItemPersonaLayout = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
16
16
  const state = (0, _useTreeItemPersonaLayout.useTreeItemPersonaLayout_unstable)(props, ref);
17
- (0, _useTreeItemPersonaLayoutStyles.useTreeItemPersonaLayoutStyles_unstable)(state);
17
+ (0, _useTreeItemPersonaLayoutStylesStyles.useTreeItemPersonaLayoutStyles_unstable)(state);
18
18
  const contextValues = (0, _useTreeItemPersonaLayoutContextValues.useTreeItemPersonaLayoutContextValues_unstable)(state);
19
19
  return (0, _renderTreeItemPersonaLayout.renderTreeItemPersonaLayout_unstable)(state, contextValues);
20
20
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\n/**\n * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.\n * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemPersonaLayout = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useTreeItemPersonaLayout_unstable(props, ref);\n useTreeItemPersonaLayoutStyles_unstable(state);\n const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n//# sourceMappingURL=TreeItemPersonaLayout.js.map"],"names":["TreeItemPersonaLayout","React","forwardRef","props","ref","state","useTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","contextValues","useTreeItemPersonaLayoutContextValues_unstable","renderTreeItemPersonaLayout_unstable","displayName"],"mappings":";;;;+BAUaA;;aAAAA;;;6DAVU;0CAC2B;6CACG;gDACG;uDACO;AAMxD,MAAMA,wBAAwB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjF,MAAMC,QAAQC,IAAAA,2DAAiC,EAACH,OAAOC;IACvDG,IAAAA,uEAAuC,EAACF;IACxC,MAAMG,gBAAgBC,IAAAA,qFAA8C,EAACJ;IACrE,OAAOK,IAAAA,iEAAoC,EAACL,OAAOG;AACrD;AACAR,sBAAsBW,WAAW,GAAG,yBACpC,iDAAiD"}
1
+ {"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\n/**\n * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.\n * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemPersonaLayout = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useTreeItemPersonaLayout_unstable(props, ref);\n useTreeItemPersonaLayoutStyles_unstable(state);\n const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n//# sourceMappingURL=TreeItemPersonaLayout.js.map"],"names":["TreeItemPersonaLayout","React","forwardRef","props","ref","state","useTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","contextValues","useTreeItemPersonaLayoutContextValues_unstable","renderTreeItemPersonaLayout_unstable","displayName"],"mappings":";;;;+BAUaA;;aAAAA;;;6DAVU;0CAC2B;6CACG;sDACG;uDACO;AAMxD,MAAMA,wBAAwB,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjF,MAAMC,QAAQC,IAAAA,2DAAiC,EAACH,OAAOC;IACvDG,IAAAA,6EAAuC,EAACF;IACxC,MAAMG,gBAAgBC,IAAAA,qFAA8C,EAACJ;IACrE,OAAOK,IAAAA,iEAAoC,EAACL,OAAOG;AACrD;AACAR,sBAAsBW,WAAW,GAAG,yBACpC,iDAAiD"}
@@ -7,7 +7,7 @@ _exportStar(require("./TreeItemPersonaLayout"), exports);
7
7
  _exportStar(require("./TreeItemPersonaLayout.types"), exports);
8
8
  _exportStar(require("./renderTreeItemPersonaLayout"), exports);
9
9
  _exportStar(require("./useTreeItemPersonaLayout"), exports);
10
- _exportStar(require("./useTreeItemPersonaLayoutStyles"), exports);
10
+ _exportStar(require("./useTreeItemPersonaLayoutStyles.styles"), exports);
11
11
  //# sourceMappingURL=index.js.map
12
12
 
13
13
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/index.js"],"sourcesContent":["export * from './TreeItemPersonaLayout';\nexport * from './TreeItemPersonaLayout.types';\nexport * from './renderTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayoutStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
1
+ {"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/index.js"],"sourcesContent":["export * from './TreeItemPersonaLayout';\nexport * from './TreeItemPersonaLayout.types';\nexport * from './renderTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayoutStyles.styles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
@@ -10,11 +10,10 @@ const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
10
10
  const _reactUtilities = require("@fluentui/react-utilities");
11
11
  const _reactAvatar = require("@fluentui/react-avatar");
12
12
  const renderTreeItemPersonaLayout_unstable = (state, contextValues)=>{
13
- const { isActionsVisible } = state;
14
13
  const { slots , slotProps } = (0, _reactUtilities.getSlotsNext)(state);
15
- return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, slots.media && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactAvatar.AvatarContextProvider, {
14
+ return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.expandIcon, slotProps.expandIcon), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactAvatar.AvatarContextProvider, {
16
15
  value: contextValues.avatar
17
- }, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.media, slotProps.media)), slots.content && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.content, slotProps.content, slots.main && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.main, slotProps.main), slots.description && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.description, slotProps.description)), !isActionsVisible && slots.aside && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.aside, slotProps.aside));
16
+ }, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.media, slotProps.media)), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.content, slotProps.content, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.main, slotProps.main), slots.description && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.description, slotProps.description)));
18
17
  }; //# sourceMappingURL=renderTreeItemPersonaLayout.js.map
19
18
 
20
19
  //# sourceMappingURL=renderTreeItemPersonaLayout.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (state, contextValues) => {\n const {\n isActionsVisible\n } = state;\n const {\n slots,\n slotProps\n } = getSlotsNext(state);\n return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.media && /*#__PURE__*/createElement(AvatarContextProvider, {\n value: contextValues.avatar\n }, /*#__PURE__*/createElement(slots.media, slotProps.media)), slots.content && /*#__PURE__*/createElement(slots.content, slotProps.content, slots.main && /*#__PURE__*/createElement(slots.main, slotProps.main), slots.description && /*#__PURE__*/createElement(slots.description, slotProps.description)), !isActionsVisible && slots.aside && /*#__PURE__*/createElement(slots.aside, slotProps.aside));\n};\n//# sourceMappingURL=renderTreeItemPersonaLayout.js.map"],"names":["renderTreeItemPersonaLayout_unstable","state","contextValues","isActionsVisible","slots","slotProps","getSlotsNext","createElement","root","media","AvatarContextProvider","value","avatar","content","main","description","aside"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAMrCA;;aAAAA;;iCANqE;gCACrD;6BACS;AAI/B,MAAMA,uCAAuC,CAACC,OAAOC,gBAAkB;IAC5E,MAAM,EACJC,iBAAgB,EACjB,GAAGF;IACJ,MAAM,EACJG,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,4BAAY,EAACL;IACjB,OAAO,WAAW,GAAEM,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAEJ,MAAMK,KAAK,IAAI,WAAW,GAAEF,IAAAA,8BAAa,EAACG,kCAAqB,EAAE;QAC7HC,OAAOT,cAAcU,MAAM;IAC7B,GAAG,WAAW,GAAEL,IAAAA,8BAAa,EAACH,MAAMK,KAAK,EAAEJ,UAAUI,KAAK,IAAIL,MAAMS,OAAO,IAAI,WAAW,GAAEN,IAAAA,8BAAa,EAACH,MAAMS,OAAO,EAAER,UAAUQ,OAAO,EAAET,MAAMU,IAAI,IAAI,WAAW,GAAEP,IAAAA,8BAAa,EAACH,MAAMU,IAAI,EAAET,UAAUS,IAAI,GAAGV,MAAMW,WAAW,IAAI,WAAW,GAAER,IAAAA,8BAAa,EAACH,MAAMW,WAAW,EAAEV,UAAUU,WAAW,IAAI,CAACZ,oBAAoBC,MAAMY,KAAK,IAAI,WAAW,GAAET,IAAAA,8BAAa,EAACH,MAAMY,KAAK,EAAEX,UAAUW,KAAK;AAC3Y,GACA,uDAAuD"}
1
+ {"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (state, contextValues) => {\n const {\n slots,\n slotProps\n } = getSlotsNext(state);\n return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/createElement(slots.expandIcon, slotProps.expandIcon), /*#__PURE__*/createElement(AvatarContextProvider, {\n value: contextValues.avatar\n }, /*#__PURE__*/createElement(slots.media, slotProps.media)), /*#__PURE__*/createElement(slots.content, slotProps.content, /*#__PURE__*/createElement(slots.main, slotProps.main), slots.description && /*#__PURE__*/createElement(slots.description, slotProps.description)));\n};\n//# sourceMappingURL=renderTreeItemPersonaLayout.js.map"],"names":["renderTreeItemPersonaLayout_unstable","state","contextValues","slots","slotProps","getSlotsNext","createElement","root","expandIcon","AvatarContextProvider","value","avatar","media","content","main","description"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAMrCA;;aAAAA;;iCANqE;gCACrD;6BACS;AAI/B,MAAMA,uCAAuC,CAACC,OAAOC,gBAAkB;IAC5E,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,4BAAY,EAACJ;IACjB,OAAO,WAAW,GAAEK,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAEJ,MAAMK,UAAU,IAAI,WAAW,GAAEF,IAAAA,8BAAa,EAACH,MAAMK,UAAU,EAAEJ,UAAUI,UAAU,GAAG,WAAW,GAAEF,IAAAA,8BAAa,EAACG,kCAAqB,EAAE;QACtMC,OAAOR,cAAcS,MAAM;IAC7B,GAAG,WAAW,GAAEL,IAAAA,8BAAa,EAACH,MAAMS,KAAK,EAAER,UAAUQ,KAAK,IAAI,WAAW,GAAEN,IAAAA,8BAAa,EAACH,MAAMU,OAAO,EAAET,UAAUS,OAAO,EAAE,WAAW,GAAEP,IAAAA,8BAAa,EAACH,MAAMW,IAAI,EAAEV,UAAUU,IAAI,GAAGX,MAAMY,WAAW,IAAI,WAAW,GAAET,IAAAA,8BAAa,EAACH,MAAMY,WAAW,EAAEX,UAAUW,WAAW;AAC7Q,GACA,uDAAuD"}
@@ -11,25 +11,26 @@ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
11
  const _reactUtilities = require("@fluentui/react-utilities");
12
12
  const _contexts = require("../../contexts");
13
13
  const _tokens = require("../../utils/tokens");
14
+ const _useTreeItemLayout = require("../TreeItemLayout/useTreeItemLayout");
14
15
  const useTreeItemPersonaLayout_unstable = (props, ref)=>{
15
- const { media , content , children , main , description , aside , as ='span' } = props;
16
+ const { media , content , children , main , description } = props;
17
+ const treeItemLayoutState = (0, _useTreeItemLayout.useTreeItemLayout_unstable)({
18
+ ...props,
19
+ iconBefore: null,
20
+ iconAfter: null
21
+ }, ref);
16
22
  const size = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.size);
17
- const { isActionsVisible } = (0, _contexts.useTreeItemContext_unstable)();
18
23
  return {
24
+ ...treeItemLayoutState,
19
25
  components: {
26
+ expandIcon: 'div',
20
27
  content: 'div',
21
- main: 'span',
22
- description: 'span',
23
- root: 'span',
24
- media: 'span',
25
- aside: 'span'
28
+ main: 'div',
29
+ description: 'div',
30
+ root: 'div',
31
+ media: 'div'
26
32
  },
27
- isActionsVisible,
28
33
  avatarSize: _tokens.treeAvatarSize[size],
29
- root: (0, _reactUtilities.getNativeElementProps)(as, {
30
- ...props,
31
- ref
32
- }),
33
34
  main: (0, _reactUtilities.resolveShorthand)(main, {
34
35
  required: true,
35
36
  defaultProps: {
@@ -42,8 +43,7 @@ const useTreeItemPersonaLayout_unstable = (props, ref)=>{
42
43
  content: (0, _reactUtilities.resolveShorthand)(content, {
43
44
  required: true
44
45
  }),
45
- description: (0, _reactUtilities.resolveShorthand)(description),
46
- aside: (0, _reactUtilities.resolveShorthand)(aside)
46
+ description: (0, _reactUtilities.resolveShorthand)(description)
47
47
  };
48
48
  }; //# sourceMappingURL=useTreeItemPersonaLayout.js.map
49
49
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (props, ref) => {\n const {\n media,\n content,\n children,\n main,\n description,\n aside,\n as = 'span'\n } = props;\n const size = useTreeContext_unstable(ctx => ctx.size);\n const {\n isActionsVisible\n } = useTreeItemContext_unstable();\n return {\n components: {\n content: 'div',\n main: 'span',\n description: 'span',\n root: 'span',\n media: 'span',\n aside: 'span'\n },\n isActionsVisible,\n avatarSize: treeAvatarSize[size],\n root: getNativeElementProps(as, {\n ...props,\n ref\n }),\n main: resolveShorthand(main, {\n required: true,\n defaultProps: {\n children\n }\n }),\n media: resolveShorthand(media, {\n required: true\n }),\n content: resolveShorthand(content, {\n required: true\n }),\n description: resolveShorthand(description),\n aside: resolveShorthand(aside)\n };\n};\n//# sourceMappingURL=useTreeItemPersonaLayout.js.map"],"names":["useTreeItemPersonaLayout_unstable","props","ref","media","content","children","main","description","aside","as","size","useTreeContext_unstable","ctx","isActionsVisible","useTreeItemContext_unstable","components","root","avatarSize","treeAvatarSize","getNativeElementProps","resolveShorthand","required","defaultProps"],"mappings":";;;;+BAaaA;;aAAAA;;;6DAbU;gCACiC;0BACa;wBACtC;AAUxB,MAAMA,oCAAoC,CAACC,OAAOC,MAAQ;IAC/D,MAAM,EACJC,MAAK,EACLC,QAAO,EACPC,SAAQ,EACRC,KAAI,EACJC,YAAW,EACXC,MAAK,EACLC,IAAK,OAAM,EACZ,GAAGR;IACJ,MAAMS,OAAOC,IAAAA,iCAAuB,EAACC,CAAAA,MAAOA,IAAIF,IAAI;IACpD,MAAM,EACJG,iBAAgB,EACjB,GAAGC,IAAAA,qCAA2B;IAC/B,OAAO;QACLC,YAAY;YACVX,SAAS;YACTE,MAAM;YACNC,aAAa;YACbS,MAAM;YACNb,OAAO;YACPK,OAAO;QACT;QACAK;QACAI,YAAYC,sBAAc,CAACR,KAAK;QAChCM,MAAMG,IAAAA,qCAAqB,EAACV,IAAI;YAC9B,GAAGR,KAAK;YACRC;QACF;QACAI,MAAMc,IAAAA,gCAAgB,EAACd,MAAM;YAC3Be,UAAU,IAAI;YACdC,cAAc;gBACZjB;YACF;QACF;QACAF,OAAOiB,IAAAA,gCAAgB,EAACjB,OAAO;YAC7BkB,UAAU,IAAI;QAChB;QACAjB,SAASgB,IAAAA,gCAAgB,EAAChB,SAAS;YACjCiB,UAAU,IAAI;QAChB;QACAd,aAAaa,IAAAA,gCAAgB,EAACb;QAC9BC,OAAOY,IAAAA,gCAAgB,EAACZ;IAC1B;AACF,GACA,oDAAoD"}
1
+ {"version":3,"sources":["../../../lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (props, ref) => {\n const {\n media,\n content,\n children,\n main,\n description\n } = props;\n const treeItemLayoutState = useTreeItemLayout_unstable({\n ...props,\n iconBefore: null,\n iconAfter: null\n }, ref);\n const size = useTreeContext_unstable(ctx => ctx.size);\n return {\n ...treeItemLayoutState,\n components: {\n expandIcon: 'div',\n content: 'div',\n main: 'div',\n description: 'div',\n root: 'div',\n media: 'div'\n },\n avatarSize: treeAvatarSize[size],\n main: resolveShorthand(main, {\n required: true,\n defaultProps: {\n children\n }\n }),\n media: resolveShorthand(media, {\n required: true\n }),\n content: resolveShorthand(content, {\n required: true\n }),\n description: resolveShorthand(description)\n };\n};\n//# sourceMappingURL=useTreeItemPersonaLayout.js.map"],"names":["useTreeItemPersonaLayout_unstable","props","ref","media","content","children","main","description","treeItemLayoutState","useTreeItemLayout_unstable","iconBefore","iconAfter","size","useTreeContext_unstable","ctx","components","expandIcon","root","avatarSize","treeAvatarSize","resolveShorthand","required","defaultProps"],"mappings":";;;;+BAcaA;;aAAAA;;;6DAdU;gCACU;0BACO;wBACT;mCACY;AAUpC,MAAMA,oCAAoC,CAACC,OAAOC,MAAQ;IAC/D,MAAM,EACJC,MAAK,EACLC,QAAO,EACPC,SAAQ,EACRC,KAAI,EACJC,YAAW,EACZ,GAAGN;IACJ,MAAMO,sBAAsBC,IAAAA,6CAA0B,EAAC;QACrD,GAAGR,KAAK;QACRS,YAAY,IAAI;QAChBC,WAAW,IAAI;IACjB,GAAGT;IACH,MAAMU,OAAOC,IAAAA,iCAAuB,EAACC,CAAAA,MAAOA,IAAIF,IAAI;IACpD,OAAO;QACL,GAAGJ,mBAAmB;QACtBO,YAAY;YACVC,YAAY;YACZZ,SAAS;YACTE,MAAM;YACNC,aAAa;YACbU,MAAM;YACNd,OAAO;QACT;QACAe,YAAYC,sBAAc,CAACP,KAAK;QAChCN,MAAMc,IAAAA,gCAAgB,EAACd,MAAM;YAC3Be,UAAU,IAAI;YACdC,cAAc;gBACZjB;YACF;QACF;QACAF,OAAOiB,IAAAA,gCAAgB,EAACjB,OAAO;YAC7BkB,UAAU,IAAI;QAChB;QACAjB,SAASgB,IAAAA,gCAAgB,EAAChB,SAAS;YACjCiB,UAAU,IAAI;QAChB;QACAd,aAAaa,IAAAA,gCAAgB,EAACb;IAChC;AACF,GACA,oDAAoD"}