@fluentui/react-tree 9.4.0 → 9.4.2

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js

@@ -1,4 +1,4 @@
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { treeItemLevelToken } from '../../utils/tokens';
 import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
@@ -12,27 +12,11 @@ export const treeItemPersonaLayoutClassNames = {
   actions: 'fui-TreeItemPersonaLayout__actions',
   selector: 'fui-TreeItemPersonaLayout__selector'
 };
+const useRootBaseStyles = /*#__PURE__*/__resetStyles("r1r98egg", null, [".r1r98egg{display:grid;grid-template-rows:1fr auto;grid-template-columns:auto auto 1fr auto;grid-template-areas:\"expandIcon media main        aside\" \"expandIcon media description aside\";align-items:center;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}", ".r1r98egg:active{color:var(--colorNeutralForeground2Pressed);background-color:var(--colorSubtleBackgroundPressed);}", ".r1r98egg:active .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}", ".r1r98egg:hover{color:var(--colorNeutralForeground2Hover);background-color:var(--colorSubtleBackgroundHover);}", ".r1r98egg:hover .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}"]);
 /**
  * Styles for the root slot
  */
 const useRootStyles = /*#__PURE__*/__styles({
-  base: {
-    mc9l5x: "f13qh94s",
-    wkccdc: "f1y0tuzo",
-    Budl1dq: "fellwe7",
-    zoa1oz: "f1pam7zy",
-    Bt984gj: "f122n59",
-    Bahqtrf: "fk6fouc",
-    Be2twd7: "fkhj508",
-    Bhrd7zp: "figsok6",
-    Bg96gwp: "f1i3iumi",
-    lj723h: "flvvhsy",
-    ecr2s2: "f1wfn5kd",
-    zt0xaq: "f5na5aj",
-    Bi91k9c: "fnwyq0v",
-    Jwef8y: "f1t94bn6",
-    tbva4x: "f1oboesa"
-  },
   leaf: {
     uwmqm3: ["f1k1erfc", "faevyjx"]
   },
@@ -40,42 +24,14 @@ const useRootStyles = /*#__PURE__*/__styles({
     uwmqm3: ["fo100m9", "f6yw3pu"]
   }
 }, {
-  d: [".f13qh94s{display:grid;}", ".f1y0tuzo{grid-template-rows:1fr auto;}", ".fellwe7{grid-template-columns:auto auto 1fr auto;}", ".f1pam7zy{grid-template-areas:\"expandIcon media main        aside\" \"expandIcon media description aside\";}", ".f122n59{align-items:center;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".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));}"],
-  a: [".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f5na5aj:active .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}"],
-  h: [".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1oboesa:hover .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}"]
+  d: [".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));}"]
 });
 /**
  * Styles for the expand icon slot
  */
-const useMediaStyles = /*#__PURE__*/__styles({
-  base: {
-    mc9l5x: "f22iagw",
-    Bt984gj: "f122n59",
-    a9b677: "f1szoe96",
-    Bqenvij: "f1d2rq10",
-    Ijaq50: "f11uok23",
-    Br312pm: "f1qdfnnj",
-    nk6f5a: "f1s27gz",
-    Bw0ie65: "f86d0yl",
-    z8tnut: "f1g0x7ka",
-    z189sj: ["f7x41pl", "fruq291"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["fgiv446", "ffczdla"]
-  }
-}, {
-  d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}", ".f11uok23{grid-row-start:media;}", ".f1qdfnnj{grid-column-start:media;}", ".f1s27gz{grid-row-end:media;}", ".f86d0yl{grid-column-end:media;}", ".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);}"]
-});
+const useMediaBaseStyles = /*#__PURE__*/__resetStyles("r1hbg5ns", "r1bmcusj", [".r1hbg5ns{display:flex;align-items:center;width:32px;height:32px;grid-row-start:media;grid-column-start:media;grid-row-end:media;grid-column-end:media;padding-top:0;padding-right:var(--spacingHorizontalXS);padding-bottom:0;padding-left:var(--spacingHorizontalXXS);}", ".r1bmcusj{display:flex;align-items:center;width:32px;height:32px;grid-row-start:media;grid-column-start:media;grid-row-end:media;grid-column-end:media;padding-top:0;padding-left:var(--spacingHorizontalXS);padding-bottom:0;padding-right:var(--spacingHorizontalXXS);}"]);
+const useMainBaseStyles = /*#__PURE__*/__resetStyles("r1b2ijmt", "rvlp80t", [".r1b2ijmt{grid-row-start:main;grid-column-start:main;grid-row-end:main;grid-column-end:main;padding-top:var(--spacingVerticalMNudge);padding-right:var(--spacingHorizontalXS);padding-bottom:var(--spacingVerticalMNudge);padding-left:var(--spacingHorizontalS);}", ".rvlp80t{grid-row-start:main;grid-column-start:main;grid-row-end:main;grid-column-end:main;padding-top:var(--spacingVerticalMNudge);padding-left:var(--spacingHorizontalXS);padding-bottom:var(--spacingVerticalMNudge);padding-right:var(--spacingHorizontalS);}"]);
 const useMainStyles = /*#__PURE__*/__styles({
-  base: {
-    Ijaq50: "f17iroih",
-    Br312pm: "fppdkoh",
-    nk6f5a: "fsb8d6n",
-    Bw0ie65: "f6k5g14",
-    z8tnut: "f1ngh7ph",
-    z189sj: ["f7x41pl", "fruq291"],
-    Byoj8tv: "f5o476b",
-    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
-  },
   withDescription: {
     z8tnut: "f1ngh7ph",
     z189sj: ["f7x41pl", "fruq291"],
@@ -83,124 +39,51 @@ const useMainStyles = /*#__PURE__*/__styles({
     uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
   }
 }, {
-  d: [".f17iroih{grid-row-start:main;}", ".fppdkoh{grid-column-start:main;}", ".fsb8d6n{grid-row-end:main;}", ".f6k5g14{grid-column-end:main;}", ".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);}", ".f1qch9an{padding-bottom:0;}"]
-});
-const useDescriptionStyles = /*#__PURE__*/__styles({
-  base: {
-    Ijaq50: "ffekjdo",
-    Br312pm: "f12wtlaa",
-    nk6f5a: "f1blqr63",
-    Bw0ie65: "f2ve1i",
-    Bahqtrf: "fk6fouc",
-    Be2twd7: "fy9rknc",
-    Bhrd7zp: "figsok6",
-    Bg96gwp: "fwrc4pm",
-    z8tnut: "f1g0x7ka",
-    z189sj: ["f7x41pl", "fruq291"],
-    Byoj8tv: "f5o476b",
-    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
-  }
-}, {
-  d: [".ffekjdo{grid-row-start:description;}", ".f12wtlaa{grid-column-start:description;}", ".f1blqr63{grid-row-end:description;}", ".f2ve1i{grid-column-end:description;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1g0x7ka{padding-top:0;}", ".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);}"]
+  d: [".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f1qch9an{padding-bottom:0;}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}"]
 });
+const useDescriptionBaseStyles = /*#__PURE__*/__resetStyles("r12nfoo7", "r1fcaudz", [".r12nfoo7{grid-row-start:description;grid-column-start:description;grid-row-end:description;grid-column-end:description;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);padding-top:0;padding-right:var(--spacingHorizontalXS);padding-bottom:var(--spacingVerticalMNudge);padding-left:var(--spacingHorizontalS);}", ".r1fcaudz{grid-row-start:description;grid-column-start:description;grid-row-end:description;grid-column-end:description;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);padding-top:0;padding-left:var(--spacingHorizontalXS);padding-bottom:var(--spacingVerticalMNudge);padding-right:var(--spacingHorizontalS);}"]);
 /**
  * Styles for the action icon slot
  */
-const useActionsStyles = /*#__PURE__*/__styles({
-  base: {
-    mc9l5x: "f22iagw",
-    Frg6f3: ["fcgxt0o", "f1ujusj6"],
-    qhf8xq: "f10pi13n",
-    Bj3rh1h: "f19g0ac",
-    Ijaq50: "fobksn0",
-    Br312pm: "fmy5l6f",
-    nk6f5a: "fzqypwc",
-    Bw0ie65: "f1tmftl3",
-    z8tnut: "f1g0x7ka",
-    z189sj: ["f1vdfbxk", "f1f5gg8d"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
-  }
-}, {
-  d: [".f22iagw{display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f10pi13n{position:relative;}", ".f19g0ac{z-index:1;}", ".fobksn0{grid-row-start:aside;}", ".fmy5l6f{grid-column-start:aside;}", ".fzqypwc{grid-row-end:aside;}", ".f1tmftl3{grid-column-end:aside;}", ".f1g0x7ka{padding-top:0;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1qch9an{padding-bottom:0;}"]
-});
+const useActionsBaseStyles = /*#__PURE__*/__resetStyles("r1i8xcbw", "r12wgp0u", [".r1i8xcbw{display:flex;margin-left:auto;position:relative;z-index:1;grid-row-start:aside;grid-column-start:aside;grid-row-end:aside;grid-column-end:aside;padding-top:0;padding-right:var(--spacingHorizontalS);padding-bottom:0;padding-left:var(--spacingHorizontalS);}", ".r12wgp0u{display:flex;margin-right:auto;position:relative;z-index:1;grid-row-start:aside;grid-column-start:aside;grid-row-end:aside;grid-column-end:aside;padding-top:0;padding-left:var(--spacingHorizontalS);padding-bottom:0;padding-right:var(--spacingHorizontalS);}"]);
 /**
  * Styles for the action icon slot
  */
-const useAsideStyles = /*#__PURE__*/__styles({
-  base: {
-    mc9l5x: "f22iagw",
-    Frg6f3: ["fcgxt0o", "f1ujusj6"],
-    Bt984gj: "f122n59",
-    Bj3rh1h: "f11zp4z2",
-    Ijaq50: "fobksn0",
-    Br312pm: "fmy5l6f",
-    nk6f5a: "fzqypwc",
-    Bw0ie65: "f1tmftl3",
-    z8tnut: "f1g0x7ka",
-    z189sj: ["fw5db7e", "f1uw59to"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["f1uw59to", "fw5db7e"],
-    i8kkvl: "f1ufnopg",
-    Belr9w4: "f14sijuj"
-  }
-}, {
-  d: [".f22iagw{display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f122n59{align-items:center;}", ".f11zp4z2{z-index:0;}", ".fobksn0{grid-row-start:aside;}", ".fmy5l6f{grid-column-start:aside;}", ".fzqypwc{grid-row-end:aside;}", ".f1tmftl3{grid-column-end:aside;}", ".f1g0x7ka{padding-top:0;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f1qch9an{padding-bottom:0;}", ".f1ufnopg{column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}"]
-});
+const useAsideBaseStyles = /*#__PURE__*/__resetStyles("rviw63k", "r1kawtgt", [".rviw63k{display:flex;margin-left:auto;align-items:center;z-index:0;grid-row-start:aside;grid-column-start:aside;grid-row-end:aside;grid-column-end:aside;padding-top:0;padding-right:var(--spacingHorizontalM);padding-bottom:0;padding-left:var(--spacingHorizontalM);column-gap:var(--spacingHorizontalXS);row-gap:var(--spacingHorizontalXS);}", ".r1kawtgt{display:flex;margin-right:auto;align-items:center;z-index:0;grid-row-start:aside;grid-column-start:aside;grid-row-end:aside;grid-column-end:aside;padding-top:0;padding-left:var(--spacingHorizontalM);padding-bottom:0;padding-right:var(--spacingHorizontalM);column-gap:var(--spacingHorizontalXS);row-gap:var(--spacingHorizontalXS);}"]);
 /**
  * Styles for the expand icon slot
  */
-const useExpandIconStyles = /*#__PURE__*/__styles({
-  base: {
-    mc9l5x: "f22iagw",
-    Bt984gj: "f122n59",
-    Brf1p80: "f4d9j23",
-    Bf4jedk: "f17fgpbq",
-    B7ck84d: "f1ewtqcl",
-    sj55zd: "f11d4kpn",
-    Ijaq50: "f1e6rimv",
-    Br312pm: "f10hsf66",
-    nk6f5a: "foflfm0",
-    Bw0ie65: "f1b3ebjb",
-    Bh6795r: "f1jhi6b8",
-    Bnnss6s: "fi64zpg",
-    xawz: "f1rmlqtg",
-    z8tnut: "f1ywm7hm",
-    z189sj: ["fhxju0i", "f1cnd47f"],
-    Byoj8tv: "f14wxoun",
-    uwmqm3: ["f1cnd47f", "fhxju0i"]
-  }
-}, {
-  d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f4d9j23{justify-content:center;}", ".f17fgpbq{min-width:24px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1e6rimv{grid-row-start:expandIcon;}", ".f10hsf66{grid-column-start:expandIcon;}", ".foflfm0{grid-row-end:expandIcon;}", ".f1b3ebjb{grid-column-end:expandIcon;}", ".f1jhi6b8{flex-grow:0;}", ".fi64zpg{flex-shrink:0;}", ".f1rmlqtg{flex-basis:auto;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}"]
-});
+const useExpandIconBaseStyles = /*#__PURE__*/__resetStyles("r15sjth9", "rzkr3gy", [".r15sjth9{display:flex;align-items:center;justify-content:center;min-width:24px;box-sizing:border-box;color:var(--colorNeutralForeground3);grid-row-start:expandIcon;grid-column-start:expandIcon;grid-row-end:expandIcon;grid-column-end:expandIcon;flex-grow:0;flex-shrink:0;flex-basis:auto;padding-top:var(--spacingVerticalXS);padding-right:0;padding-bottom:var(--spacingVerticalXS);padding-left:0;}", ".rzkr3gy{display:flex;align-items:center;justify-content:center;min-width:24px;box-sizing:border-box;color:var(--colorNeutralForeground3);grid-row-start:expandIcon;grid-column-start:expandIcon;grid-row-end:expandIcon;grid-column-end:expandIcon;flex-grow:0;flex-shrink:0;flex-basis:auto;padding-top:var(--spacingVerticalXS);padding-left:0;padding-bottom:var(--spacingVerticalXS);padding-right:0;}"]);
 /**
  * Apply styling to the TreeItemPersonaLayout slots based on the state
  */
 export const useTreeItemPersonaLayoutStyles_unstable = state => {
+  const rootBaseStyles = useRootBaseStyles();
   const rootStyles = useRootStyles();
-  const mediaStyles = useMediaStyles();
-  const descriptionStyles = useDescriptionStyles();
-  const actionsStyles = useActionsStyles();
-  const asideStyles = useAsideStyles();
-  const expandIconStyles = useExpandIconStyles();
+  const mediaBaseStyles = useMediaBaseStyles();
+  const descriptionBaseStyles = useDescriptionBaseStyles();
+  const actionsBaseStyles = useActionsBaseStyles();
+  const asideBaseStyles = useAsideBaseStyles();
+  const expandIconBaseStyles = useExpandIconBaseStyles();
+  const mainBaseStyles = useMainBaseStyles();
   const mainStyles = useMainStyles();
   const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);
-  state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootStyles.base, rootStyles[itemType], state.root.className);
-  state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);
+  state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootBaseStyles, rootStyles[itemType], state.root.className);
+  state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);
   if (state.main) {
-    state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainStyles.base, state.description && mainStyles.withDescription, state.main.className);
+    state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainBaseStyles, state.description && mainStyles.withDescription, state.main.className);
   }
   if (state.description) {
-    state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);
+    state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionBaseStyles, state.description.className);
   }
   if (state.actions) {
-    state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsStyles.base, state.actions.className);
+    state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsBaseStyles, state.actions.className);
   }
   if (state.aside) {
-    state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideStyles.base, state.aside.className);
+    state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);
   }
   if (state.expandIcon) {
-    state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);
+    state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconBaseStyles, state.expandIcon.className);
   }
   if (state.selector) {
     state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","treeItemPersonaLayoutClassNames","root","media","description","main","expandIcon","aside","actions","selector","useRootStyles","base","mc9l5x","wkccdc","Budl1dq","zoa1oz","Bt984gj","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","lj723h","ecr2s2","zt0xaq","Bi91k9c","Jwef8y","tbva4x","leaf","uwmqm3","branch","d","a","h","useMediaStyles","a9b677","Bqenvij","Ijaq50","Br312pm","nk6f5a","Bw0ie65","z8tnut","z189sj","Byoj8tv","useMainStyles","withDescription","useDescriptionStyles","useActionsStyles","Frg6f3","qhf8xq","Bj3rh1h","useAsideStyles","i8kkvl","Belr9w4","useExpandIconStyles","Brf1p80","Bf4jedk","B7ck84d","sj55zd","Bh6795r","Bnnss6s","xawz","useTreeItemPersonaLayoutStyles_unstable","state","rootStyles","mediaStyles","descriptionStyles","actionsStyles","asideStyles","expandIconStyles","mainStyles","itemType","ctx","className"],"sources":["useTreeItemPersonaLayoutStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemPersonaLayoutClassNames = {\n    root: 'fui-TreeItemPersonaLayout',\n    media: 'fui-TreeItemPersonaLayout__media',\n    description: 'fui-TreeItemPersonaLayout__description',\n    main: 'fui-TreeItemPersonaLayout__main',\n    expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n    aside: 'fui-TreeItemPersonaLayout__aside',\n    actions: 'fui-TreeItemPersonaLayout__actions',\n    selector: 'fui-TreeItemPersonaLayout__selector'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    base: {\n        display: 'grid',\n        gridTemplateRows: '1fr auto',\n        gridTemplateColumns: 'auto auto 1fr auto',\n        gridTemplateAreas: `\n      \"expandIcon media main        aside\"\n      \"expandIcon media description aside\"\n    `,\n        alignItems: 'center',\n        ...typographyStyles.body1,\n        ':active': {\n            color: tokens.colorNeutralForeground2Pressed,\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n            [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n                color: tokens.colorNeutralForeground3Pressed\n            }\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground2Hover,\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon  for styling\n            [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n                color: tokens.colorNeutralForeground3Hover\n            }\n        }\n    },\n    leaf: {\n        paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    branch: {\n        paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`\n    }\n});\n/**\n * Styles for the expand icon slot\n */ const useMediaStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        width: '32px',\n        height: '32px',\n        ...shorthands.gridArea('media'),\n        ...shorthands.padding(0, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalXXS)\n    }\n});\nconst useMainStyles = makeStyles({\n    base: {\n        ...shorthands.gridArea('main'),\n        ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalXS, tokens.spacingVerticalMNudge, tokens.spacingHorizontalS)\n    },\n    withDescription: {\n        ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalS)\n    }\n});\nconst useDescriptionStyles = makeStyles({\n    base: {\n        ...shorthands.gridArea('description'),\n        ...typographyStyles.caption1,\n        ...shorthands.padding(0, tokens.spacingHorizontalXS, tokens.spacingVerticalMNudge, tokens.spacingHorizontalS)\n    }\n});\n/**\n * Styles for the action icon slot\n */ const useActionsStyles = makeStyles({\n    base: {\n        display: 'flex',\n        marginLeft: 'auto',\n        position: 'relative',\n        zIndex: 1,\n        ...shorthands.gridArea('aside'),\n        ...shorthands.padding(0, tokens.spacingHorizontalS)\n    }\n});\n/**\n * Styles for the action icon slot\n */ const useAsideStyles = makeStyles({\n    base: {\n        display: 'flex',\n        marginLeft: 'auto',\n        alignItems: 'center',\n        zIndex: 0,\n        ...shorthands.gridArea('aside'),\n        ...shorthands.padding(0, tokens.spacingHorizontalM),\n        ...shorthands.gap(tokens.spacingHorizontalXS)\n    }\n});\n/**\n * Styles for the expand icon slot\n */ const 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.gridArea('expandIcon'),\n        ...shorthands.flex(0, 0, 'auto'),\n        ...shorthands.padding(tokens.spacingVerticalXS, 0)\n    }\n});\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */ export const useTreeItemPersonaLayoutStyles_unstable = (state)=>{\n    const rootStyles = useRootStyles();\n    const mediaStyles = useMediaStyles();\n    const descriptionStyles = useDescriptionStyles();\n    const actionsStyles = useActionsStyles();\n    const asideStyles = useAsideStyles();\n    const expandIconStyles = useExpandIconStyles();\n    const mainStyles = useMainStyles();\n    const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n    state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootStyles.base, rootStyles[itemType], state.root.className);\n    state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);\n    if (state.main) {\n        state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainStyles.base, state.description && mainStyles.withDescription, state.main.className);\n    }\n    if (state.description) {\n        state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);\n    }\n    if (state.actions) {\n        state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsStyles.base, state.actions.className);\n    }\n    if (state.aside) {\n        state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideStyles.base, state.aside.className);\n    }\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);\n    }\n    if (state.selector) {\n        state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,2BAA2B,QAAQ,gCAAgC;AAC5E,OAAO,MAAMC,+BAA+B,GAAG;EAC3CC,IAAI,EAAE,2BAA2B;EACjCC,KAAK,EAAE,kCAAkC;EACzCC,WAAW,EAAE,wCAAwC;EACrDC,IAAI,EAAE,iCAAiC;EACvCC,UAAU,EAAE,uCAAuC;EACnDC,KAAK,EAAE,kCAAkC;EACzCC,OAAO,EAAE,oCAAoC;EAC7CC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,aAAa,gBAAGhB,QAAA;EAAAiB,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAkCzB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGvC,QAAA;EAAAiB,IAAA;IAAAC,MAAA;IAAAI,OAAA;IAAAkB,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAd,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAS1B,CAAC;AACF,MAAMa,aAAa,gBAAGjD,QAAA;EAAAiB,IAAA;IAAAyB,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAd,MAAA;EAAA;EAAAgB,eAAA;IAAAJ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAd,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAQrB,CAAC;AACF,MAAMe,oBAAoB,gBAAGnD,QAAA;EAAAiB,IAAA;IAAAyB,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAtB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAoB,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAd,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAM5B,CAAC;AACF;AACA;AACA;AAAI,MAAMgB,gBAAgB,gBAAGpD,QAAA;EAAAiB,IAAA;IAAAC,MAAA;IAAAmC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAb,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAd,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAS5B,CAAC;AACF;AACA;AACA;AAAI,MAAMoB,cAAc,gBAAGxD,QAAA;EAAAiB,IAAA;IAAAC,MAAA;IAAAmC,MAAA;IAAA/B,OAAA;IAAAiC,OAAA;IAAAb,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAd,MAAA;IAAAuB,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAtB,CAAA;AAAA,CAU1B,CAAC;AACF;AACA;AACA;AAAI,MAAMuB,mBAAmB,gBAAG3D,QAAA;EAAAiB,IAAA;IAAAC,MAAA;IAAAI,OAAA;IAAAsC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAArB,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAmB,OAAA;IAAAC,OAAA;IAAAC,IAAA;IAAApB,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAd,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAY/B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAM+B,uCAAuC,GAAIC,KAAK,IAAG;EAChE,MAAMC,UAAU,GAAGrD,aAAa,CAAC,CAAC;EAClC,MAAMsD,WAAW,GAAG/B,cAAc,CAAC,CAAC;EACpC,MAAMgC,iBAAiB,GAAGpB,oBAAoB,CAAC,CAAC;EAChD,MAAMqB,aAAa,GAAGpB,gBAAgB,CAAC,CAAC;EACxC,MAAMqB,WAAW,GAAGjB,cAAc,CAAC,CAAC;EACpC,MAAMkB,gBAAgB,GAAGf,mBAAmB,CAAC,CAAC;EAC9C,MAAMgB,UAAU,GAAG1B,aAAa,CAAC,CAAC;EAClC,MAAM2B,QAAQ,GAAGtE,2BAA2B,CAAEuE,GAAG,IAAGA,GAAG,CAACD,QAAQ,CAAC;EACjER,KAAK,CAAC5D,IAAI,CAACsE,SAAS,GAAG7E,YAAY,CAACM,+BAA+B,CAACC,IAAI,EAAE6D,UAAU,CAACpD,IAAI,EAAEoD,UAAU,CAACO,QAAQ,CAAC,EAAER,KAAK,CAAC5D,IAAI,CAACsE,SAAS,CAAC;EACtIV,KAAK,CAAC3D,KAAK,CAACqE,SAAS,GAAG7E,YAAY,CAACM,+BAA+B,CAACE,KAAK,EAAE6D,WAAW,CAACrD,IAAI,EAAEmD,KAAK,CAAC3D,KAAK,CAACqE,SAAS,CAAC;EACpH,IAAIV,KAAK,CAACzD,IAAI,EAAE;IACZyD,KAAK,CAACzD,IAAI,CAACmE,SAAS,GAAG7E,YAAY,CAACM,+BAA+B,CAACI,IAAI,EAAEgE,UAAU,CAAC1D,IAAI,EAAEmD,KAAK,CAAC1D,WAAW,IAAIiE,UAAU,CAACzB,eAAe,EAAEkB,KAAK,CAACzD,IAAI,CAACmE,SAAS,CAAC;EACrK;EACA,IAAIV,KAAK,CAAC1D,WAAW,EAAE;IACnB0D,KAAK,CAAC1D,WAAW,CAACoE,SAAS,GAAG7E,YAAY,CAACM,+BAA+B,CAACG,WAAW,EAAE6D,iBAAiB,CAACtD,IAAI,EAAEmD,KAAK,CAAC1D,WAAW,CAACoE,SAAS,CAAC;EAChJ;EACA,IAAIV,KAAK,CAACtD,OAAO,EAAE;IACfsD,KAAK,CAACtD,OAAO,CAACgE,SAAS,GAAG7E,YAAY,CAACM,+BAA+B,CAACO,OAAO,EAAE0D,aAAa,CAACvD,IAAI,EAAEmD,KAAK,CAACtD,OAAO,CAACgE,SAAS,CAAC;EAChI;EACA,IAAIV,KAAK,CAACvD,KAAK,EAAE;IACbuD,KAAK,CAACvD,KAAK,CAACiE,SAAS,GAAG7E,YAAY,CAACM,+BAA+B,CAACM,KAAK,EAAE4D,WAAW,CAACxD,IAAI,EAAEmD,KAAK,CAACvD,KAAK,CAACiE,SAAS,CAAC;EACxH;EACA,IAAIV,KAAK,CAACxD,UAAU,EAAE;IAClBwD,KAAK,CAACxD,UAAU,CAACkE,SAAS,GAAG7E,YAAY,CAACM,+BAA+B,CAACK,UAAU,EAAE8D,gBAAgB,CAACzD,IAAI,EAAEmD,KAAK,CAACxD,UAAU,CAACkE,SAAS,CAAC;EAC5I;EACA,IAAIV,KAAK,CAACrD,QAAQ,EAAE;IAChBqD,KAAK,CAACrD,QAAQ,CAAC+D,SAAS,GAAG7E,YAAY,CAACM,+BAA+B,CAACQ,QAAQ,EAAEqD,KAAK,CAACrD,QAAQ,CAAC+D,SAAS,CAAC;EAC/G;EACA,OAAOV,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","treeItemPersonaLayoutClassNames","root","media","description","main","expandIcon","aside","actions","selector","useRootBaseStyles","useRootStyles","leaf","uwmqm3","branch","d","useMediaBaseStyles","useMainBaseStyles","useMainStyles","withDescription","z8tnut","z189sj","Byoj8tv","useDescriptionBaseStyles","useActionsBaseStyles","useAsideBaseStyles","useExpandIconBaseStyles","useTreeItemPersonaLayoutStyles_unstable","state","rootBaseStyles","rootStyles","mediaBaseStyles","descriptionBaseStyles","actionsBaseStyles","asideBaseStyles","expandIconBaseStyles","mainBaseStyles","mainStyles","itemType","ctx","className"],"sources":["useTreeItemPersonaLayoutStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemPersonaLayoutClassNames = {\n    root: 'fui-TreeItemPersonaLayout',\n    media: 'fui-TreeItemPersonaLayout__media',\n    description: 'fui-TreeItemPersonaLayout__description',\n    main: 'fui-TreeItemPersonaLayout__main',\n    expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n    aside: 'fui-TreeItemPersonaLayout__aside',\n    actions: 'fui-TreeItemPersonaLayout__actions',\n    selector: 'fui-TreeItemPersonaLayout__selector'\n};\nconst useRootBaseStyles = makeResetStyles({\n    display: 'grid',\n    gridTemplateRows: '1fr auto',\n    gridTemplateColumns: 'auto auto 1fr auto',\n    gridTemplateAreas: `\n    \"expandIcon media main        aside\"\n    \"expandIcon media description aside\"\n  `,\n    alignItems: 'center',\n    ...typographyStyles.body1,\n    ':active': {\n        color: tokens.colorNeutralForeground2Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n        // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n        [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n            color: tokens.colorNeutralForeground3Pressed\n        }\n    },\n    ':hover': {\n        color: tokens.colorNeutralForeground2Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n        // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon  for styling\n        [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n            color: tokens.colorNeutralForeground3Hover\n        }\n    }\n});\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    leaf: {\n        paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    branch: {\n        paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`\n    }\n});\n/**\n * Styles for the expand icon slot\n */ const useMediaBaseStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    width: '32px',\n    height: '32px',\n    ...shorthands.gridArea('media'),\n    ...shorthands.padding(0, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalXXS)\n});\nconst useMainBaseStyles = makeResetStyles({\n    ...shorthands.gridArea('main'),\n    ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalXS, tokens.spacingVerticalMNudge, tokens.spacingHorizontalS)\n});\nconst useMainStyles = makeStyles({\n    withDescription: {\n        ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalS)\n    }\n});\nconst useDescriptionBaseStyles = makeResetStyles({\n    ...shorthands.gridArea('description'),\n    ...typographyStyles.caption1,\n    ...shorthands.padding(0, tokens.spacingHorizontalXS, tokens.spacingVerticalMNudge, tokens.spacingHorizontalS)\n});\n/**\n * Styles for the action icon slot\n */ const useActionsBaseStyles = makeResetStyles({\n    display: 'flex',\n    marginLeft: 'auto',\n    position: 'relative',\n    zIndex: 1,\n    ...shorthands.gridArea('aside'),\n    ...shorthands.padding(0, tokens.spacingHorizontalS)\n});\n/**\n * Styles for the action icon slot\n */ const useAsideBaseStyles = makeResetStyles({\n    display: 'flex',\n    marginLeft: 'auto',\n    alignItems: 'center',\n    zIndex: 0,\n    ...shorthands.gridArea('aside'),\n    ...shorthands.padding(0, tokens.spacingHorizontalM),\n    ...shorthands.gap(tokens.spacingHorizontalXS)\n});\n/**\n * Styles for the expand icon slot\n */ const useExpandIconBaseStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: '24px',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.gridArea('expandIcon'),\n    ...shorthands.flex(0, 0, 'auto'),\n    ...shorthands.padding(tokens.spacingVerticalXS, 0)\n});\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */ export const useTreeItemPersonaLayoutStyles_unstable = (state)=>{\n    const rootBaseStyles = useRootBaseStyles();\n    const rootStyles = useRootStyles();\n    const mediaBaseStyles = useMediaBaseStyles();\n    const descriptionBaseStyles = useDescriptionBaseStyles();\n    const actionsBaseStyles = useActionsBaseStyles();\n    const asideBaseStyles = useAsideBaseStyles();\n    const expandIconBaseStyles = useExpandIconBaseStyles();\n    const mainBaseStyles = useMainBaseStyles();\n    const mainStyles = useMainStyles();\n    const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n    state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootBaseStyles, rootStyles[itemType], state.root.className);\n    state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);\n    if (state.main) {\n        state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainBaseStyles, state.description && mainStyles.withDescription, state.main.className);\n    }\n    if (state.description) {\n        state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionBaseStyles, state.description.className);\n    }\n    if (state.actions) {\n        state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsBaseStyles, state.actions.className);\n    }\n    if (state.aside) {\n        state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);\n    }\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconBaseStyles, state.expandIcon.className);\n    }\n    if (state.selector) {\n        state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);\n    }\n    return state;\n};\n"],"mappings":"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"}

package/lib/hooks/useRootTree.js

@@ -1,4 +1,4 @@
-import { getNativeElementProps, useEventCallback, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { createOpenItems } from '../utils/createOpenItems';
 import { createCheckedItems } from '../utils/createCheckedItems';
@@ -74,8 +74,11 @@ import { createNextOpenItems } from './useControllableOpenItems';
         openItems,
         checkedItems,
         requestTreeResponse,
-        root: slot.always(getNativeElementProps('div', {
-            ref,
+        root: slot.always(getIntrinsicElementProps('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref,
             role: 'tree',
             'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,
             ...props

package/lib/hooks/useRootTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import { SelectionMode, getNativeElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type {\n  TreeCheckedChangeData,\n  TreeNavigationData_unstable,\n  TreeOpenChangeData,\n  TreeProps,\n  TreeState,\n} from '../Tree';\nimport * as React from 'react';\nimport { TreeContextValue, TreeItemRequest } from '../contexts/treeContext';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\n\n/**\n * Create the state required to render the root level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useRootTree(\n  props: Pick<\n    TreeProps,\n    | 'selectionMode'\n    | 'appearance'\n    | 'size'\n    | 'openItems'\n    | 'checkedItems'\n    | 'onOpenChange'\n    | 'onCheckedChange'\n    | 'onNavigation'\n    | 'aria-label'\n    | 'aria-labelledby'\n  >,\n\n  ref: React.Ref<HTMLElement>,\n): Omit<TreeState & TreeContextValue, 'treeType'> {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n\n  const openItems = React.useMemo(() => createOpenItems(props.openItems), [props.openItems]);\n  const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n  const requestOpenChange = (data: TreeOpenChangeData) => {\n    const nextOpenItems = createNextOpenItems(data, openItems);\n    props.onOpenChange?.(data.event, {\n      ...data,\n      openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n    });\n  };\n\n  const requestCheckedChange = (data: TreeCheckedChangeData) => props.onCheckedChange?.(data.event, data);\n\n  const requestNavigation = (data: TreeNavigationData_unstable) => {\n    props.onNavigation?.(data.event, data);\n    switch (data.type) {\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.Home:\n      case treeDataTypes.End:\n        // stop the default behavior of the event\n        // which is to scroll the page\n        data.event.preventDefault();\n    }\n  };\n\n  const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n    switch (request.requestType) {\n      case 'navigate':\n        return requestNavigation(request);\n      case 'open':\n        return requestOpenChange({\n          ...request,\n          open: request.itemType === 'branch' && !openItems.has(request.value),\n          openItems: openItems.dangerouslyGetInternalSet_unstable(),\n        });\n      case 'selection':\n        return requestCheckedChange({\n          ...request,\n          selectionMode: selectionMode as SelectionMode,\n          checkedItems: checkedItems.dangerouslyGetInternalMap_unstable(),\n        } as TreeCheckedChangeData);\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    contextType: 'root',\n    selectionMode,\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    checkedItems,\n    requestTreeResponse,\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        role: 'tree',\n        'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn(/* #__DE-INDENT__ */ `\n        @fluentui/react-tree [useRootTree]:\n        Tree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined\n      `);\n    }\n  }\n}\n"],"names":["getNativeElementProps","useEventCallback","slot","React","createOpenItems","createCheckedItems","treeDataTypes","createNextOpenItems","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","useMemo","checkedItems","requestOpenChange","data","nextOpenItems","onOpenChange","event","dangerouslyGetInternalSet_unstable","requestCheckedChange","onCheckedChange","requestNavigation","onNavigation","type","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","request","requestType","open","itemType","has","value","dangerouslyGetInternalMap_unstable","components","root","contextType","level","always","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":"AAAA,SAAwBA,qBAAqB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAQzG,YAAYC,WAAW,QAAQ;AAE/B,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,mBAAmB,QAAQ,6BAA6B;AAEjE;;;;;CAKC,GACD,OAAO,SAASC,YACdC,KAYC,EAEDC,GAA2B;IAE3BC,4BAA4BF;IAE5B,MAAM,EAAEG,aAAa,QAAQ,EAAEC,OAAO,QAAQ,EAAEC,gBAAgB,MAAM,EAAE,GAAGL;IAE3E,MAAMM,YAAYZ,MAAMa,OAAO,CAAC,IAAMZ,gBAAgBK,MAAMM,SAAS,GAAG;QAACN,MAAMM,SAAS;KAAC;IACzF,MAAME,eAAed,MAAMa,OAAO,CAAC,IAAMX,mBAAmBI,MAAMQ,YAAY,GAAG;QAACR,MAAMQ,YAAY;KAAC;IACrG,MAAMC,oBAAoB,CAACC;YAEzBV;QADA,MAAMW,gBAAgBb,oBAAoBY,MAAMJ;SAChDN,sBAAAA,MAAMY,YAAY,cAAlBZ,0CAAAA,yBAAAA,OAAqBU,KAAKG,KAAK,EAAE;YAC/B,GAAGH,IAAI;YACPJ,WAAWK,cAAcG,kCAAkC;QAC7D;IACF;IAEA,MAAMC,uBAAuB,CAACL;YAAgCV;gBAAAA,yBAAAA,MAAMgB,eAAe,cAArBhB,6CAAAA,4BAAAA,OAAwBU,KAAKG,KAAK,EAAEH;;IAElG,MAAMO,oBAAoB,CAACP;YACzBV;SAAAA,sBAAAA,MAAMkB,YAAY,cAAlBlB,0CAAAA,yBAAAA,OAAqBU,KAAKG,KAAK,EAAEH;QACjC,OAAQA,KAAKS,IAAI;YACf,KAAKtB,cAAcuB,SAAS;YAC5B,KAAKvB,cAAcwB,OAAO;YAC1B,KAAKxB,cAAcyB,IAAI;YACvB,KAAKzB,cAAc0B,GAAG;gBACpB,yCAAyC;gBACzC,8BAA8B;gBAC9Bb,KAAKG,KAAK,CAACW,cAAc;QAC7B;IACF;IAEA,MAAMC,sBAAsBjC,iBAAiB,CAACkC;QAC5C,OAAQA,QAAQC,WAAW;YACzB,KAAK;gBACH,OAAOV,kBAAkBS;YAC3B,KAAK;gBACH,OAAOjB,kBAAkB;oBACvB,GAAGiB,OAAO;oBACVE,MAAMF,QAAQG,QAAQ,KAAK,YAAY,CAACvB,UAAUwB,GAAG,CAACJ,QAAQK,KAAK;oBACnEzB,WAAWA,UAAUQ,kCAAkC;gBACzD;YACF,KAAK;gBACH,OAAOC,qBAAqB;oBAC1B,GAAGW,OAAO;oBACVrB,eAAeA;oBACfG,cAAcA,aAAawB,kCAAkC;gBAC/D;QACJ;IACF;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAC,aAAa;QACb9B;QACAuB,MAAM;QACNzB;QACAC;QACAgC,OAAO;QACP9B;QACAE;QACAiB;QACAS,MAAMzC,KAAK4C,MAAM,CACf9C,sBAAsB,OAAO;YAC3BU;YACAqC,MAAM;YACN,wBAAwBjC,kBAAkB,gBAAgB,OAAOkC;YACjE,GAAGvC,KAAK;QACV,IACA;YAAEwC,aAAa;QAAM;IAEzB;AACF;AAEA,SAAStC,4BAA4BF,KAAwD;IAC3F,IAAIyC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAI,CAAC3C,KAAK,CAAC,aAAa,IAAI,CAACA,KAAK,CAAC,kBAAkB,EAAE;YACrD,sCAAsC;YACtC4C,QAAQC,IAAI,CAAsB,CAAC;8EAGnC,CAAC;QACH;IACF;AACF"}
+{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import { SelectionMode, getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type {\n  TreeCheckedChangeData,\n  TreeNavigationData_unstable,\n  TreeOpenChangeData,\n  TreeProps,\n  TreeState,\n} from '../Tree';\nimport * as React from 'react';\nimport { TreeContextValue, TreeItemRequest } from '../contexts/treeContext';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\n\n/**\n * Create the state required to render the root level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useRootTree(\n  props: TreeProps,\n  ref: React.Ref<HTMLElement>,\n): Omit<TreeState & TreeContextValue, 'treeType'> {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n\n  const openItems = React.useMemo(() => createOpenItems(props.openItems), [props.openItems]);\n  const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n  const requestOpenChange = (data: TreeOpenChangeData) => {\n    const nextOpenItems = createNextOpenItems(data, openItems);\n    props.onOpenChange?.(data.event, {\n      ...data,\n      openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n    });\n  };\n\n  const requestCheckedChange = (data: TreeCheckedChangeData) => props.onCheckedChange?.(data.event, data);\n\n  const requestNavigation = (data: TreeNavigationData_unstable) => {\n    props.onNavigation?.(data.event, data);\n    switch (data.type) {\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.Home:\n      case treeDataTypes.End:\n        // stop the default behavior of the event\n        // which is to scroll the page\n        data.event.preventDefault();\n    }\n  };\n\n  const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n    switch (request.requestType) {\n      case 'navigate':\n        return requestNavigation(request);\n      case 'open':\n        return requestOpenChange({\n          ...request,\n          open: request.itemType === 'branch' && !openItems.has(request.value),\n          openItems: openItems.dangerouslyGetInternalSet_unstable(),\n        });\n      case 'selection':\n        return requestCheckedChange({\n          ...request,\n          selectionMode: selectionMode as SelectionMode,\n          checkedItems: checkedItems.dangerouslyGetInternalMap_unstable(),\n        } as TreeCheckedChangeData);\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    contextType: 'root',\n    selectionMode,\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    checkedItems,\n    requestTreeResponse,\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role: 'tree',\n        'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn(/* #__DE-INDENT__ */ `\n        @fluentui/react-tree [useRootTree]:\n        Tree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined\n      `);\n    }\n  }\n}\n"],"names":["getIntrinsicElementProps","useEventCallback","slot","React","createOpenItems","createCheckedItems","treeDataTypes","createNextOpenItems","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","useMemo","checkedItems","requestOpenChange","data","nextOpenItems","onOpenChange","event","dangerouslyGetInternalSet_unstable","requestCheckedChange","onCheckedChange","requestNavigation","onNavigation","type","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","request","requestType","open","itemType","has","value","dangerouslyGetInternalMap_unstable","components","root","contextType","level","always","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":"AAAA,SAAwBA,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAQ5G,YAAYC,WAAW,QAAQ;AAE/B,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,mBAAmB,QAAQ,6BAA6B;AAEjE;;;;;CAKC,GACD,OAAO,SAASC,YACdC,KAAgB,EAChBC,GAA2B;IAE3BC,4BAA4BF;IAE5B,MAAM,EAAEG,aAAa,QAAQ,EAAEC,OAAO,QAAQ,EAAEC,gBAAgB,MAAM,EAAE,GAAGL;IAE3E,MAAMM,YAAYZ,MAAMa,OAAO,CAAC,IAAMZ,gBAAgBK,MAAMM,SAAS,GAAG;QAACN,MAAMM,SAAS;KAAC;IACzF,MAAME,eAAed,MAAMa,OAAO,CAAC,IAAMX,mBAAmBI,MAAMQ,YAAY,GAAG;QAACR,MAAMQ,YAAY;KAAC;IACrG,MAAMC,oBAAoB,CAACC;YAEzBV;QADA,MAAMW,gBAAgBb,oBAAoBY,MAAMJ;SAChDN,sBAAAA,MAAMY,YAAY,cAAlBZ,0CAAAA,yBAAAA,OAAqBU,KAAKG,KAAK,EAAE;YAC/B,GAAGH,IAAI;YACPJ,WAAWK,cAAcG,kCAAkC;QAC7D;IACF;IAEA,MAAMC,uBAAuB,CAACL;YAAgCV;gBAAAA,yBAAAA,MAAMgB,eAAe,cAArBhB,6CAAAA,4BAAAA,OAAwBU,KAAKG,KAAK,EAAEH;;IAElG,MAAMO,oBAAoB,CAACP;YACzBV;SAAAA,sBAAAA,MAAMkB,YAAY,cAAlBlB,0CAAAA,yBAAAA,OAAqBU,KAAKG,KAAK,EAAEH;QACjC,OAAQA,KAAKS,IAAI;YACf,KAAKtB,cAAcuB,SAAS;YAC5B,KAAKvB,cAAcwB,OAAO;YAC1B,KAAKxB,cAAcyB,IAAI;YACvB,KAAKzB,cAAc0B,GAAG;gBACpB,yCAAyC;gBACzC,8BAA8B;gBAC9Bb,KAAKG,KAAK,CAACW,cAAc;QAC7B;IACF;IAEA,MAAMC,sBAAsBjC,iBAAiB,CAACkC;QAC5C,OAAQA,QAAQC,WAAW;YACzB,KAAK;gBACH,OAAOV,kBAAkBS;YAC3B,KAAK;gBACH,OAAOjB,kBAAkB;oBACvB,GAAGiB,OAAO;oBACVE,MAAMF,QAAQG,QAAQ,KAAK,YAAY,CAACvB,UAAUwB,GAAG,CAACJ,QAAQK,KAAK;oBACnEzB,WAAWA,UAAUQ,kCAAkC;gBACzD;YACF,KAAK;gBACH,OAAOC,qBAAqB;oBAC1B,GAAGW,OAAO;oBACVrB,eAAeA;oBACfG,cAAcA,aAAawB,kCAAkC;gBAC/D;QACJ;IACF;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAC,aAAa;QACb9B;QACAuB,MAAM;QACNzB;QACAC;QACAgC,OAAO;QACP9B;QACAE;QACAiB;QACAS,MAAMzC,KAAK4C,MAAM,CACf9C,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FU,KAAKA;YACLqC,MAAM;YACN,wBAAwBjC,kBAAkB,gBAAgB,OAAOkC;YACjE,GAAGvC,KAAK;QACV,IACA;YAAEwC,aAAa;QAAM;IAEzB;AACF;AAEA,SAAStC,4BAA4BF,KAAwD;IAC3F,IAAIyC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAI,CAAC3C,KAAK,CAAC,aAAa,IAAI,CAACA,KAAK,CAAC,kBAAkB,EAAE;YACrD,sCAAsC;YACtC4C,QAAQC,IAAI,CAAsB,CAAC;8EAGnC,CAAC;QACH;IACF;AACF"}

package/lib/hooks/useSubtree.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';
-import { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render a sub-level tree.
  *
@@ -17,7 +17,10 @@ import { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-util
             root: 'div'
         },
         level: parentLevel + 1,
-        root: slot.always(getNativeElementProps('div', {
+        root: slot.always(getIntrinsicElementProps('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
             ref: useMergedRefs(ref, subtreeRef),
             role: 'group',
             ...props

package/lib/hooks/useSubtree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { SubtreeContextValue, useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useSubtree(\n  props: Pick<TreeProps, 'appearance' | 'size'>,\n  ref: React.Ref<HTMLElement>,\n): Omit<TreeState & SubtreeContextValue, 'treeType'> {\n  const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n\n  const parentLevel = useTreeContext_unstable(ctx => ctx.level);\n\n  const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n  return {\n    contextType: 'subtree',\n    open,\n    components: {\n      root: 'div',\n    },\n    level: parentLevel + 1,\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref: useMergedRefs(ref, subtreeRef),\n        role: 'group',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","useTreeContext_unstable","useTreeItemContext_unstable","getNativeElementProps","useMergedRefs","slot","useSubtree","props","ref","subtreeRef","ctx","parentLevel","level","open","contextType","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAA8BC,uBAAuB,EAAEC,2BAA2B,QAAQ,oBAAoB;AAC9G,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAEvF;;;;;CAKC,GACD,OAAO,SAASC,WACdC,KAA6C,EAC7CC,GAA2B;IAE3B,MAAMC,aAAaP,4BAA4BQ,CAAAA,MAAOA,IAAID,UAAU;IAEpE,MAAME,cAAcV,wBAAwBS,CAAAA,MAAOA,IAAIE,KAAK;IAE5D,MAAMC,OAAOX,4BAA4BQ,CAAAA,MAAOA,IAAIG,IAAI;IAExD,OAAO;QACLC,aAAa;QACbD;QACAE,YAAY;YACVC,MAAM;QACR;QACAJ,OAAOD,cAAc;QACrBK,MAAMX,KAAKY,MAAM,CACfd,sBAAsB,OAAO;YAC3BK,KAAKJ,cAAcI,KAAKC;YACxBS,MAAM;YACN,GAAGX,KAAK;QACV,IACA;YAAEY,aAAa;QAAM;IAEzB;AACF"}
+{"version":3,"sources":["useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { SubtreeContextValue, useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useSubtree(\n  props: TreeProps,\n  ref: React.Ref<HTMLElement>,\n): Omit<TreeState & SubtreeContextValue, 'treeType'> {\n  const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n\n  const parentLevel = useTreeContext_unstable(ctx => ctx.level);\n\n  const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n  return {\n    contextType: 'subtree',\n    open,\n    components: {\n      root: 'div',\n    },\n    level: parentLevel + 1,\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, subtreeRef) as React.Ref<HTMLDivElement>,\n        role: 'group',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","useTreeContext_unstable","useTreeItemContext_unstable","getIntrinsicElementProps","useMergedRefs","slot","useSubtree","props","ref","subtreeRef","ctx","parentLevel","level","open","contextType","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAA8BC,uBAAuB,EAAEC,2BAA2B,QAAQ,oBAAoB;AAC9G,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAE1F;;;;;CAKC,GACD,OAAO,SAASC,WACdC,KAAgB,EAChBC,GAA2B;IAE3B,MAAMC,aAAaP,4BAA4BQ,CAAAA,MAAOA,IAAID,UAAU;IAEpE,MAAME,cAAcV,wBAAwBS,CAAAA,MAAOA,IAAIE,KAAK;IAE5D,MAAMC,OAAOX,4BAA4BQ,CAAAA,MAAOA,IAAIG,IAAI;IAExD,OAAO;QACLC,aAAa;QACbD;QACAE,YAAY;YACVC,MAAM;QACR;QACAJ,OAAOD,cAAc;QACrBK,MAAMX,KAAKY,MAAM,CACfd,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FK,KAAKJ,cAAcI,KAAKC;YACxBS,MAAM;YACN,GAAGX,KAAK;QACV,IACA;YAAEY,aAAa;QAAM;IAEzB;AACF"}

package/lib-commonjs/components/FlatTree/useFlatTreeStyles.styles.js

@@ -20,21 +20,11 @@ const _react = require("@griffel/react");
 const flatTreeClassNames = {
     root: 'fui-FlatTree'
 };
-const useStyles = /*#__PURE__*/ (0, _react.__styles)({
-    root: {
-        mc9l5x: "f22iagw",
-        Beiy3e4: "f1vx9l62",
-        Belr9w4: "f1j0q4x9"
-    }
-}, {
-    d: [
-        ".f22iagw{display:flex;}",
-        ".f1vx9l62{flex-direction:column;}",
-        ".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}"
-    ]
-});
+const useBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rnv2ez3", null, [
+    ".rnv2ez3{display:flex;flex-direction:column;row-gap:var(--spacingVerticalXXS);}"
+]);
 const useFlatTreeStyles_unstable = (state)=>{
-    const styles = useStyles();
-    state.root.className = (0, _react.mergeClasses)(flatTreeClassNames.root, styles.root, state.root.className);
+    const baseStyles = useBaseStyles();
+    state.root.className = (0, _react.mergeClasses)(flatTreeClassNames.root, baseStyles, state.root.className);
     return state;
 }; //# sourceMappingURL=useFlatTreeStyles.styles.js.map

package/lib-commonjs/components/FlatTree/useFlatTreeStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useFlatTreeStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const flatTreeClassNames = {\n  root: 'fui-FlatTree'\n};\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Beiy3e4: \"f1vx9l62\",\n    Belr9w4: \"f1j0q4x9\"\n  }\n}, {\n  d: [\".f22iagw{display:flex;}\", \".f1vx9l62{flex-direction:column;}\", \".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}\"]\n});\nexport const useFlatTreeStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(flatTreeClassNames.root, styles.root, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useFlatTreeStyles.styles.js.map"],"names":["flatTreeClassNames","useFlatTreeStyles_unstable","root","useStyles","__styles","mc9l5x","Beiy3e4","Belr9w4","d","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,kBAAkB;eAAlBA;;IAYAC,0BAA0B;eAA1BA;;;uBAd0B;AAEhC,MAAMD,qBAAqB;IAChCE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAA2B;QAAqC;KAAgD;AACtH;AACO,MAAMP,6BAA6BQ,CAAAA;IACxC,MAAMC,SAASP;IACfM,MAAMP,IAAI,CAACS,SAAS,GAAGC,IAAAA,mBAAY,EAACZ,mBAAmBE,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAC9F,OAAOF;AACT,GACA,oDAAoD"}
+{"version":3,"sources":["useFlatTreeStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const flatTreeClassNames = {\n  root: 'fui-FlatTree'\n};\nconst useBaseStyles = /*#__PURE__*/__resetStyles(\"rnv2ez3\", null, [\".rnv2ez3{display:flex;flex-direction:column;row-gap:var(--spacingVerticalXXS);}\"]);\nexport const useFlatTreeStyles_unstable = state => {\n  const baseStyles = useBaseStyles();\n  state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useFlatTreeStyles.styles.js.map"],"names":["flatTreeClassNames","useFlatTreeStyles_unstable","root","useBaseStyles","__resetStyles","state","baseStyles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,kBAAkB;eAAlBA;;IAIAC,0BAA0B;eAA1BA;;;uBAN+B;AAErC,MAAMD,qBAAqB;IAChCE,MAAM;AACR;AACA,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;CAAkF;AAC9I,MAAMH,6BAA6BI,CAAAA;IACxC,MAAMC,aAAaH;IACnBE,MAAMH,IAAI,CAACK,SAAS,GAAGC,IAAAA,mBAAY,EAACR,mBAAmBE,IAAI,EAAEI,YAAYD,MAAMH,IAAI,CAACK,SAAS;IAC7F,OAAOF;AACT,GACA,oDAAoD"}

package/lib-commonjs/components/Tree/useTreeStyles.styles.js

@@ -20,26 +20,22 @@ const _react = require("@griffel/react");
 const treeClassNames = {
     root: 'fui-Tree'
 };
+const useBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rnv2ez3", null, [
+    ".rnv2ez3{display:flex;flex-direction:column;row-gap:var(--spacingVerticalXXS);}"
+]);
 const useStyles = /*#__PURE__*/ (0, _react.__styles)({
-    root: {
-        mc9l5x: "f22iagw",
-        Beiy3e4: "f1vx9l62",
-        Belr9w4: "f1j0q4x9"
-    },
     subtree: {
         z8tnut: "fclwglc"
     }
 }, {
     d: [
-        ".f22iagw{display:flex;}",
-        ".f1vx9l62{flex-direction:column;}",
-        ".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}",
         ".fclwglc{padding-top:var(--spacingVerticalXXS);}"
     ]
 });
 const useTreeStyles_unstable = (state)=>{
+    const baseStyles = useBaseStyles();
     const styles = useStyles();
     const isSubTree = state.level > 1;
-    state.root.className = (0, _react.mergeClasses)(treeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);
+    state.root.className = (0, _react.mergeClasses)(treeClassNames.root, baseStyles, isSubTree && styles.subtree, state.root.className);
     return state;
 }; //# sourceMappingURL=useTreeStyles.styles.js.map

package/lib-commonjs/components/Tree/useTreeStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n  root: 'fui-Tree'\n};\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Beiy3e4: \"f1vx9l62\",\n    Belr9w4: \"f1j0q4x9\"\n  },\n  subtree: {\n    z8tnut: \"fclwglc\"\n  }\n}, {\n  d: [\".f22iagw{display:flex;}\", \".f1vx9l62{flex-direction:column;}\", \".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}\", \".fclwglc{padding-top:var(--spacingVerticalXXS);}\"]\n});\nexport const useTreeStyles_unstable = state => {\n  const styles = useStyles();\n  const isSubTree = state.level > 1;\n  state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useTreeStyles.styles.js.map"],"names":["treeClassNames","useTreeStyles_unstable","root","useStyles","__styles","mc9l5x","Beiy3e4","Belr9w4","subtree","z8tnut","d","state","styles","isSubTree","level","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,cAAc;eAAdA;;IAeAC,sBAAsB;eAAtBA;;;uBAjB0B;AAEhC,MAAMD,iBAAiB;IAC5BE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;QACTC,SAAS;IACX;IACAC,SAAS;QACPC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA2B;QAAqC;QAAiD;KAAmD;AAC1K;AACO,MAAMT,yBAAyBU,CAAAA;IACpC,MAAMC,SAAST;IACf,MAAMU,YAAYF,MAAMG,KAAK,GAAG;IAChCH,MAAMT,IAAI,CAACa,SAAS,GAAGC,IAAAA,mBAAY,EAAChB,eAAeE,IAAI,EAAEU,OAAOV,IAAI,EAAEW,aAAaD,OAAOJ,OAAO,EAAEG,MAAMT,IAAI,CAACa,SAAS;IACvH,OAAOJ;AACT,GACA,gDAAgD"}
+{"version":3,"sources":["useTreeStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n  root: 'fui-Tree'\n};\nconst useBaseStyles = /*#__PURE__*/__resetStyles(\"rnv2ez3\", null, [\".rnv2ez3{display:flex;flex-direction:column;row-gap:var(--spacingVerticalXXS);}\"]);\nconst useStyles = /*#__PURE__*/__styles({\n  subtree: {\n    z8tnut: \"fclwglc\"\n  }\n}, {\n  d: [\".fclwglc{padding-top:var(--spacingVerticalXXS);}\"]\n});\nexport const useTreeStyles_unstable = state => {\n  const baseStyles = useBaseStyles();\n  const styles = useStyles();\n  const isSubTree = state.level > 1;\n  state.root.className = mergeClasses(treeClassNames.root, baseStyles, isSubTree && styles.subtree, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useTreeStyles.styles.js.map"],"names":["treeClassNames","useTreeStyles_unstable","root","useBaseStyles","__resetStyles","useStyles","__styles","subtree","z8tnut","d","state","baseStyles","styles","isSubTree","level","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,cAAc;eAAdA;;IAWAC,sBAAsB;eAAtBA;;;uBAbyC;AAE/C,MAAMD,iBAAiB;IAC5BE,MAAM;AACR;AACA,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;CAAkF;AACrJ,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,SAAS;QACPC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;KAAmD;AACzD;AACO,MAAMR,yBAAyBS,CAAAA;IACpC,MAAMC,aAAaR;IACnB,MAAMS,SAASP;IACf,MAAMQ,YAAYH,MAAMI,KAAK,GAAG;IAChCJ,MAAMR,IAAI,CAACa,SAAS,GAAGC,IAAAA,mBAAY,EAAChB,eAAeE,IAAI,EAAES,YAAYE,aAAaD,OAAOL,OAAO,EAAEG,MAAMR,IAAI,CAACa,SAAS;IACtH,OAAOL;AACT,GACA,gDAAgD"}

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

@@ -32,7 +32,7 @@ function useTreeItem_unstable(props, ref) {
     // note, if the value is not externally provided,
     // then selection and expansion will not work properly
     const value = (0, _reactutilities.useId)('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());
-    const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;
+    const { onClick, onKeyDown, onMouseOver, onFocus, onMouseOut, onBlur, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;
     const [isActionsVisible, setActionsVisible] = _react.useState(false);
     const [isAsideVisible, setAsideVisible] = _react.useState(true);
     const handleActionsRef = _react.useCallback((actionsElement)=>{
@@ -105,25 +105,13 @@ function useTreeItem_unstable(props, ref) {
                 if (selectionMode !== 'none') {
                     var _selectionRef_current;
                     (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();
+                    // Prevents the page from scrolling down when the spacebar is pressed
                     event.preventDefault();
                 }
                 return;
             case _tokens.treeDataTypes.Enter:
                 {
-                    var _props_onOpenChange;
-                    const data = {
-                        value,
-                        event,
-                        open: !open,
-                        type: event.key,
-                        target: event.currentTarget
-                    };
-                    (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
-                    return requestTreeResponse({
-                        ...data,
-                        itemType,
-                        requestType: 'open'
-                    });
+                    return event.currentTarget.click();
                 }
             case _tokens.treeDataTypes.End:
             case _tokens.treeDataTypes.Home:
@@ -152,8 +140,8 @@ function useTreeItem_unstable(props, ref) {
                         target: event.currentTarget
                     };
                     if (open) {
-                        var _props_onOpenChange1;
-                        (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);
+                        var _props_onOpenChange;
+                        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
                     }
                     return requestTreeResponse({
                         ...data,
@@ -175,8 +163,8 @@ function useTreeItem_unstable(props, ref) {
                     target: event.currentTarget
                 };
                 if (!open) {
-                    var _props_onOpenChange2;
-                    (_props_onOpenChange2 = props.onOpenChange) === null || _props_onOpenChange2 === void 0 ? void 0 : _props_onOpenChange2.call(props, event, data);
+                    var _props_onOpenChange1;
+                    (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);
                 }
                 return requestTreeResponse({
                     ...data,
@@ -198,13 +186,13 @@ function useTreeItem_unstable(props, ref) {
             });
         }
     });
-    const handleActionsVisible = (0, _reactutilities.useEventCallback)((event)=>{
+    const setActionsVisibleIfNotFromSubtree = _react.useCallback((event)=>{
         const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactportal.elementContains)(subtreeRef.current, event.target));
         if (!isTargetFromSubtree) {
             setActionsVisible(true);
         }
-    });
-    const handleActionsInvisible = (0, _reactutilities.useEventCallback)((event)=>{
+    }, []);
+    const setActionsInvisibleIfNotFromSubtree = _react.useCallback((event)=>{
         const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactportal.elementContains)(subtreeRef.current, event.target));
         const isRelatedTargetFromActions = Boolean(actionsRef.current && (0, _reactportal.elementContains)(actionsRef.current, event.relatedTarget));
         if (isRelatedTargetFromActions) {
@@ -213,8 +201,25 @@ function useTreeItem_unstable(props, ref) {
         if (!isTargetFromSubtree) {
             return setActionsVisible(false);
         }
+    }, []);
+    const handleMouseOver = (0, _reactutilities.useEventCallback)((event)=>{
+        onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(event);
+        setActionsVisibleIfNotFromSubtree(event);
+    });
+    const handleFocus = (0, _reactutilities.useEventCallback)((event)=>{
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+        setActionsVisibleIfNotFromSubtree(event);
+    });
+    const handleMouseOut = (0, _reactutilities.useEventCallback)((event)=>{
+        onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(event);
+        setActionsInvisibleIfNotFromSubtree(event);
+    });
+    const handleBlur = (0, _reactutilities.useEventCallback)((event)=>{
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        setActionsInvisibleIfNotFromSubtree(event);
     });
     const handleChange = (0, _reactutilities.useEventCallback)((event)=>{
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
         if (event.isDefaultPrevented()) {
             return;
         }
@@ -248,7 +253,7 @@ function useTreeItem_unstable(props, ref) {
         },
         isAsideVisible,
         isActionsVisible,
-        root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)(as, {
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, {
             tabIndex: -1,
             [_getTreeItemValueFromElement.dataTreeItemValueAttrName]: value,
             ...rest,
@@ -263,10 +268,10 @@ function useTreeItem_unstable(props, ref) {
             'aria-expanded': itemType === 'branch' ? open : undefined,
             onClick: handleClick,
             onKeyDown: handleKeyDown,
-            onMouseOver: handleActionsVisible,
-            onFocus: handleActionsVisible,
-            onMouseOut: handleActionsInvisible,
-            onBlur: handleActionsInvisible,
+            onMouseOver: handleMouseOver,
+            onFocus: handleFocus,
+            onMouseOut: handleMouseOut,
+            onBlur: handleBlur,
             onChange: handleChange
         }), {
             elementType: 'div'