@fluentui/react-tree 9.4.0 → 9.4.2

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

@@ -28,26 +28,16 @@ const treeItemPersonaLayoutClassNames = {
     actions: 'fui-TreeItemPersonaLayout__actions',
     selector: 'fui-TreeItemPersonaLayout__selector'
 };
+const useRootBaseStyles = /*#__PURE__*/ (0, _react.__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__*/ (0, _react.__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",
@@ -62,89 +52,23 @@ const treeItemPersonaLayoutClassNames = {
     }
 }, {
     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);}"
     ]
 });
 /**
  * Styles for the expand icon slot
- */ const useMediaStyles = /*#__PURE__*/ (0, _react.__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__*/ (0, _react.__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__*/ (0, _react.__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__*/ (0, _react.__styles)({
-    base: {
-        Ijaq50: "f17iroih",
-        Br312pm: "fppdkoh",
-        nk6f5a: "fsb8d6n",
-        Bw0ie65: "f6k5g14",
-        z8tnut: "f1ngh7ph",
-        z189sj: [
-            "f7x41pl",
-            "fruq291"
-        ],
-        Byoj8tv: "f5o476b",
-        uwmqm3: [
-            "f1f5gg8d",
-            "f1vdfbxk"
-        ]
-    },
     withDescription: {
         z8tnut: "f1ngh7ph",
         z189sj: [
@@ -159,222 +83,63 @@ const useMainStyles = /*#__PURE__*/ (0, _react.__styles)({
     }
 }, {
     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__*/ (0, _react.__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);}",
+        ".f1qch9an{padding-bottom:0;}",
         ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
         ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}"
     ]
 });
+const useDescriptionBaseStyles = /*#__PURE__*/ (0, _react.__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__*/ (0, _react.__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__*/ (0, _react.__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__*/ (0, _react.__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__*/ (0, _react.__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__*/ (0, _react.__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__*/ (0, _react.__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;}"
+]);
 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 = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.itemType);
-    state.root.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.root, rootStyles.base, rootStyles[itemType], state.root.className);
-    state.media.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);
+    state.root.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.root, rootBaseStyles, rootStyles[itemType], state.root.className);
+    state.media.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);
     if (state.main) {
-        state.main.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.main, mainStyles.base, state.description && mainStyles.withDescription, state.main.className);
+        state.main.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.main, mainBaseStyles, state.description && mainStyles.withDescription, state.main.className);
     }
     if (state.description) {
-        state.description.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);
+        state.description.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.description, descriptionBaseStyles, state.description.className);
     }
     if (state.actions) {
-        state.actions.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.actions, actionsStyles.base, state.actions.className);
+        state.actions.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.actions, actionsBaseStyles, state.actions.className);
     }
     if (state.aside) {
-        state.aside.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.aside, asideStyles.base, state.aside.className);
+        state.aside.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);
     }
     if (state.expandIcon) {
-        state.expandIcon.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);
+        state.expandIcon.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.expandIcon, expandIconBaseStyles, state.expandIcon.className);
     }
     if (state.selector) {
         state.selector.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.selector, state.selector.className);

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemPersonaLayoutStyles.styles.js"],"sourcesContent":["import { __styles, 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 */\nconst useRootStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f13qh94s\",\n    wkccdc: \"f1y0tuzo\",\n    Budl1dq: \"fellwe7\",\n    zoa1oz: \"f1pam7zy\",\n    Bt984gj: \"f122n59\",\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\",\n    lj723h: \"flvvhsy\",\n    ecr2s2: \"f1wfn5kd\",\n    zt0xaq: \"f5na5aj\",\n    Bi91k9c: \"fnwyq0v\",\n    Jwef8y: \"f1t94bn6\",\n    tbva4x: \"f1oboesa\"\n  },\n  leaf: {\n    uwmqm3: [\"f1k1erfc\", \"faevyjx\"]\n  },\n  branch: {\n    uwmqm3: [\"fo100m9\", \"f6yw3pu\"]\n  }\n}, {\n  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));}\"],\n  a: [\".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}\", \".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}\", \".f5na5aj:active .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}\"],\n  h: [\".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}\", \".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}\", \".f1oboesa:hover .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}\"]\n});\n/**\n * Styles for the expand icon slot\n */\nconst useMediaStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\",\n    a9b677: \"f1szoe96\",\n    Bqenvij: \"f1d2rq10\",\n    Ijaq50: \"f11uok23\",\n    Br312pm: \"f1qdfnnj\",\n    nk6f5a: \"f1s27gz\",\n    Bw0ie65: \"f86d0yl\",\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"f7x41pl\", \"fruq291\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"fgiv446\", \"ffczdla\"]\n  }\n}, {\n  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);}\"]\n});\nconst useMainStyles = /*#__PURE__*/__styles({\n  base: {\n    Ijaq50: \"f17iroih\",\n    Br312pm: \"fppdkoh\",\n    nk6f5a: \"fsb8d6n\",\n    Bw0ie65: \"f6k5g14\",\n    z8tnut: \"f1ngh7ph\",\n    z189sj: [\"f7x41pl\", \"fruq291\"],\n    Byoj8tv: \"f5o476b\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n  },\n  withDescription: {\n    z8tnut: \"f1ngh7ph\",\n    z189sj: [\"f7x41pl\", \"fruq291\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n  }\n}, {\n  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;}\"]\n});\nconst useDescriptionStyles = /*#__PURE__*/__styles({\n  base: {\n    Ijaq50: \"ffekjdo\",\n    Br312pm: \"f12wtlaa\",\n    nk6f5a: \"f1blqr63\",\n    Bw0ie65: \"f2ve1i\",\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fy9rknc\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"fwrc4pm\",\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"f7x41pl\", \"fruq291\"],\n    Byoj8tv: \"f5o476b\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n  }\n}, {\n  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);}\"]\n});\n/**\n * Styles for the action icon slot\n */\nconst useActionsStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Frg6f3: [\"fcgxt0o\", \"f1ujusj6\"],\n    qhf8xq: \"f10pi13n\",\n    Bj3rh1h: \"f19g0ac\",\n    Ijaq50: \"fobksn0\",\n    Br312pm: \"fmy5l6f\",\n    nk6f5a: \"fzqypwc\",\n    Bw0ie65: \"f1tmftl3\",\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n  }\n}, {\n  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;}\"]\n});\n/**\n * Styles for the action icon slot\n */\nconst useAsideStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Frg6f3: [\"fcgxt0o\", \"f1ujusj6\"],\n    Bt984gj: \"f122n59\",\n    Bj3rh1h: \"f11zp4z2\",\n    Ijaq50: \"fobksn0\",\n    Br312pm: \"fmy5l6f\",\n    nk6f5a: \"fzqypwc\",\n    Bw0ie65: \"f1tmftl3\",\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"fw5db7e\", \"f1uw59to\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"f1uw59to\", \"fw5db7e\"],\n    i8kkvl: \"f1ufnopg\",\n    Belr9w4: \"f14sijuj\"\n  }\n}, {\n  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);}\"]\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    Ijaq50: \"f1e6rimv\",\n    Br312pm: \"f10hsf66\",\n    nk6f5a: \"foflfm0\",\n    Bw0ie65: \"f1b3ebjb\",\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: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);}\"]\n});\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */\nexport 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//# sourceMappingURL=useTreeItemPersonaLayoutStyles.styles.js.map"],"names":["treeItemPersonaLayoutClassNames","useTreeItemPersonaLayoutStyles_unstable","root","media","description","main","expandIcon","aside","actions","selector","useRootStyles","__styles","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","state","rootStyles","mediaStyles","descriptionStyles","actionsStyles","asideStyles","expandIconStyles","mainStyles","itemType","useTreeItemContext_unstable","ctx","className","mergeClasses"],"mappings":"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"}
+{"version":3,"sources":["useTreeItemPersonaLayoutStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, 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 = /*#__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);}\"]);\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n  leaf: {\n    uwmqm3: [\"f1k1erfc\", \"faevyjx\"]\n  },\n  branch: {\n    uwmqm3: [\"fo100m9\", \"f6yw3pu\"]\n  }\n}, {\n  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));}\"]\n});\n/**\n * Styles for the expand icon slot\n */\nconst 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);}\"]);\nconst 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);}\"]);\nconst useMainStyles = /*#__PURE__*/__styles({\n  withDescription: {\n    z8tnut: \"f1ngh7ph\",\n    z189sj: [\"f7x41pl\", \"fruq291\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n  }\n}, {\n  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);}\"]\n});\nconst 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);}\"]);\n/**\n * Styles for the action icon slot\n */\nconst 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);}\"]);\n/**\n * Styles for the action icon slot\n */\nconst 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);}\"]);\n/**\n * Styles for the expand icon slot\n */\nconst 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;}\"]);\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */\nexport 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//# sourceMappingURL=useTreeItemPersonaLayoutStyles.styles.js.map"],"names":["treeItemPersonaLayoutClassNames","useTreeItemPersonaLayoutStyles_unstable","root","media","description","main","expandIcon","aside","actions","selector","useRootBaseStyles","__resetStyles","useRootStyles","__styles","leaf","uwmqm3","branch","d","useMediaBaseStyles","useMainBaseStyles","useMainStyles","withDescription","z8tnut","z189sj","Byoj8tv","useDescriptionBaseStyles","useActionsBaseStyles","useAsideBaseStyles","useExpandIconBaseStyles","state","rootBaseStyles","rootStyles","mediaBaseStyles","descriptionBaseStyles","actionsBaseStyles","asideBaseStyles","expandIconBaseStyles","mainBaseStyles","mainStyles","itemType","useTreeItemContext_unstable","ctx","className","mergeClasses"],"mappings":";;;;;;;;;;;IAIaA,+BAA+B;eAA/BA;;IAuDAC,uCAAuC;eAAvCA;;;uBA3DqD;iCAGtB;AACrC,MAAMD,kCAAkC;IAC7CE,MAAM;IACNC,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;IACZC,OAAO;IACPC,SAAS;IACTC,UAAU;AACZ;AACA,MAAMC,oBAAoB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAAC;IAAmW;IAAuH;IAAyG;IAAkH;CAAqG;AACl2B;;CAEC,GACD,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC1CC,MAAM;QACJC,QAAQ;YAAC;YAAY;SAAU;IACjC;IACAC,QAAQ;QACND,QAAQ;YAAC;YAAW;SAAU;IAChC;AACF,GAAG;IACDE,GAAG;QAAC;QAAiG;QAAiG;QAAsG;KAAsG;AACpZ;AACA;;CAEC,GACD,MAAMC,qBAAqB,WAAW,GAAEP,IAAAA,oBAAa,EAAC,YAAY,YAAY;IAAC;IAA6Q;CAA4Q;AACxmB,MAAMQ,oBAAoB,WAAW,GAAER,IAAAA,oBAAa,EAAC,YAAY,WAAW;IAAC;IAAsQ;CAAoQ;AACvlB,MAAMS,gBAAgB,WAAW,GAAEP,IAAAA,eAAQ,EAAC;IAC1CQ,iBAAiB;QACfC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,SAAS;QACTT,QAAQ;YAAC;YAAY;SAAW;IAClC;AACF,GAAG;IACDE,GAAG;QAAC;QAAwD;QAAuD;QAAsD;QAAgC;QAAsD;KAAsD;AACvT;AACA,MAAMQ,2BAA2B,WAAW,GAAEd,IAAAA,oBAAa,EAAC,YAAY,YAAY;IAAC;IAAoZ;CAAmZ;AAC53B;;CAEC,GACD,MAAMe,uBAAuB,WAAW,GAAEf,IAAAA,oBAAa,EAAC,YAAY,YAAY;IAAC;IAA6Q;CAA6Q;AAC3mB;;CAEC,GACD,MAAMgB,qBAAqB,WAAW,GAAEhB,IAAAA,oBAAa,EAAC,WAAW,YAAY;IAAC;IAAsV;CAAuV;AAC3vB;;CAEC,GACD,MAAMiB,0BAA0B,WAAW,GAAEjB,IAAAA,oBAAa,EAAC,YAAY,WAAW;IAAC;IAAgZ;CAA8Y;AAI12B,MAAMV,0CAA0C4B,CAAAA;IACrD,MAAMC,iBAAiBpB;IACvB,MAAMqB,aAAanB;IACnB,MAAMoB,kBAAkBd;IACxB,MAAMe,wBAAwBR;IAC9B,MAAMS,oBAAoBR;IAC1B,MAAMS,kBAAkBR;IACxB,MAAMS,uBAAuBR;IAC7B,MAAMS,iBAAiBlB;IACvB,MAAMmB,aAAalB;IACnB,MAAMmB,WAAWC,IAAAA,4CAA2B,EAACC,CAAAA,MAAOA,IAAIF,QAAQ;IAChEV,MAAM3B,IAAI,CAACwC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,gCAAgCE,IAAI,EAAE4B,gBAAgBC,UAAU,CAACQ,SAAS,EAAEV,MAAM3B,IAAI,CAACwC,SAAS;IACpIb,MAAM1B,KAAK,CAACuC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,gCAAgCG,KAAK,EAAE6B,iBAAiBH,MAAM1B,KAAK,CAACuC,SAAS;IAClH,IAAIb,MAAMxB,IAAI,EAAE;QACdwB,MAAMxB,IAAI,CAACqC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,gCAAgCK,IAAI,EAAEgC,gBAAgBR,MAAMzB,WAAW,IAAIkC,WAAWjB,eAAe,EAAEQ,MAAMxB,IAAI,CAACqC,SAAS;IACjK;IACA,IAAIb,MAAMzB,WAAW,EAAE;QACrByB,MAAMzB,WAAW,CAACsC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,gCAAgCI,WAAW,EAAE6B,uBAAuBJ,MAAMzB,WAAW,CAACsC,SAAS;IAC5I;IACA,IAAIb,MAAMrB,OAAO,EAAE;QACjBqB,MAAMrB,OAAO,CAACkC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,gCAAgCQ,OAAO,EAAE0B,mBAAmBL,MAAMrB,OAAO,CAACkC,SAAS;IAC5H;IACA,IAAIb,MAAMtB,KAAK,EAAE;QACfsB,MAAMtB,KAAK,CAACmC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,gCAAgCO,KAAK,EAAE4B,iBAAiBN,MAAMtB,KAAK,CAACmC,SAAS;IACpH;IACA,IAAIb,MAAMvB,UAAU,EAAE;QACpBuB,MAAMvB,UAAU,CAACoC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,gCAAgCM,UAAU,EAAE8B,sBAAsBP,MAAMvB,UAAU,CAACoC,SAAS;IACxI;IACA,IAAIb,MAAMpB,QAAQ,EAAE;QAClBoB,MAAMpB,QAAQ,CAACiC,SAAS,GAAGC,IAAAA,mBAAY,EAAC3C,gCAAgCS,QAAQ,EAAEoB,MAAMpB,QAAQ,CAACiC,SAAS;IAC5G;IACA,OAAOb;AACT,GACA,iEAAiE"}

package/lib-commonjs/hooks/useRootTree.js

@@ -80,8 +80,11 @@ function useRootTree(props, ref) {
         openItems,
         checkedItems,
         requestTreeResponse,
-        root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', {
-            ref,
+        root: _reactutilities.slot.always((0, _reactutilities.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-commonjs/hooks/useRootTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useRootTree.js"],"sourcesContent":["import { getNativeElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\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 */ export function useRootTree(props, ref) {\n    warnIfNoProperPropsRootTree(props);\n    const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n    const openItems = React.useMemo(()=>createOpenItems(props.openItems), [\n        props.openItems\n    ]);\n    const checkedItems = React.useMemo(()=>createCheckedItems(props.checkedItems), [\n        props.checkedItems\n    ]);\n    const requestOpenChange = (data)=>{\n        var _props_onOpenChange;\n        const nextOpenItems = createNextOpenItems(data, openItems);\n        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, data.event, {\n            ...data,\n            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n        });\n    };\n    const requestCheckedChange = (data)=>{\n        var _props_onCheckedChange;\n        return (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, data.event, data);\n    };\n    const requestNavigation = (data)=>{\n        var _props_onNavigation;\n        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, 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    const requestTreeResponse = useEventCallback((request)=>{\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,\n                    checkedItems: checkedItems.dangerouslyGetInternalMap_unstable()\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(getNativeElementProps('div', {\n            ref,\n            role: 'tree',\n            'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n}\nfunction warnIfNoProperPropsRootTree(props) {\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(`@fluentui/react-tree [useRootTree]:\nTree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined`);\n        }\n    }\n}\n"],"names":["useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","React","useMemo","createOpenItems","checkedItems","createCheckedItems","requestOpenChange","data","_props_onOpenChange","nextOpenItems","createNextOpenItems","onOpenChange","call","event","dangerouslyGetInternalSet_unstable","requestCheckedChange","_props_onCheckedChange","onCheckedChange","requestNavigation","_props_onNavigation","onNavigation","type","treeDataTypes","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","useEventCallback","request","requestType","open","itemType","has","value","dangerouslyGetInternalMap_unstable","components","root","contextType","level","slot","always","getNativeElementProps","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":";;;;+BAWoBA;;;eAAAA;;;;gCAX0C;iEACvC;iCACS;oCACG;wBACL;0CACM;AAMzB,SAASA,YAAYC,KAAK,EAAEC,GAAG;IACtCC,4BAA4BF;IAC5B,MAAM,EAAEG,aAAa,QAAQ,EAAEC,OAAO,QAAQ,EAAEC,gBAAgB,MAAM,EAAE,GAAGL;IAC3E,MAAMM,YAAYC,OAAMC,OAAO,CAAC,IAAIC,IAAAA,gCAAe,EAACT,MAAMM,SAAS,GAAG;QAClEN,MAAMM,SAAS;KAClB;IACD,MAAMI,eAAeH,OAAMC,OAAO,CAAC,IAAIG,IAAAA,sCAAkB,EAACX,MAAMU,YAAY,GAAG;QAC3EV,MAAMU,YAAY;KACrB;IACD,MAAME,oBAAoB,CAACC;QACvB,IAAIC;QACJ,MAAMC,gBAAgBC,IAAAA,6CAAmB,EAACH,MAAMP;QAC/CQ,CAAAA,sBAAsBd,MAAMiB,YAAY,AAAD,MAAO,QAAQH,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBI,IAAI,CAAClB,OAAOa,KAAKM,KAAK,EAAE;YACzI,GAAGN,IAAI;YACPP,WAAWS,cAAcK,kCAAkC;QAC/D;IACJ;IACA,MAAMC,uBAAuB,CAACR;QAC1B,IAAIS;QACJ,OAAO,AAACA,CAAAA,yBAAyBtB,MAAMuB,eAAe,AAAD,MAAO,QAAQD,2BAA2B,KAAK,IAAI,KAAK,IAAIA,uBAAuBJ,IAAI,CAAClB,OAAOa,KAAKM,KAAK,EAAEN;IACpK;IACA,MAAMW,oBAAoB,CAACX;QACvB,IAAIY;QACHA,CAAAA,sBAAsBzB,MAAM0B,YAAY,AAAD,MAAO,QAAQD,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBP,IAAI,CAAClB,OAAOa,KAAKM,KAAK,EAAEN;QAC7I,OAAOA,KAAKc,IAAI;YACZ,KAAKC,qBAAa,CAACC,SAAS;YAC5B,KAAKD,qBAAa,CAACE,OAAO;YAC1B,KAAKF,qBAAa,CAACG,IAAI;YACvB,KAAKH,qBAAa,CAACI,GAAG;gBAClB,yCAAyC;gBACzC,8BAA8B;gBAC9BnB,KAAKM,KAAK,CAACc,cAAc;QACjC;IACJ;IACA,MAAMC,sBAAsBC,IAAAA,gCAAgB,EAAC,CAACC;QAC1C,OAAOA,QAAQC,WAAW;YACtB,KAAK;gBACD,OAAOb,kBAAkBY;YAC7B,KAAK;gBACD,OAAOxB,kBAAkB;oBACrB,GAAGwB,OAAO;oBACVE,MAAMF,QAAQG,QAAQ,KAAK,YAAY,CAACjC,UAAUkC,GAAG,CAACJ,QAAQK,KAAK;oBACnEnC,WAAWA,UAAUc,kCAAkC;gBAC3D;YACJ,KAAK;gBACD,OAAOC,qBAAqB;oBACxB,GAAGe,OAAO;oBACV/B,eAAeA;oBACfK,cAAcA,aAAagC,kCAAkC;gBACjE;QACR;IACJ;IACA,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAC,aAAa;QACbxC;QACAiC,MAAM;QACNnC;QACAC;QACA0C,OAAO;QACPxC;QACAI;QACAwB;QACAU,MAAMG,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3ChD;YACAiD,MAAM;YACN,wBAAwB7C,kBAAkB,gBAAgB,OAAO8C;YACjE,GAAGnD,KAAK;QACZ,IAAI;YACAoD,aAAa;QACjB;IACJ;AACJ;AACA,SAASlD,4BAA4BF,KAAK;IACtC,IAAIqD,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACxC,IAAI,CAACvD,KAAK,CAAC,aAAa,IAAI,CAACA,KAAK,CAAC,kBAAkB,EAAE;YACnD,sCAAsC;YACtCwD,QAAQC,IAAI,CAAC,CAAC;8EACoD,CAAC;QACvE;IACJ;AACJ"}
+{"version":3,"sources":["useRootTree.js"],"sourcesContent":["import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\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 */ export function useRootTree(props, ref) {\n    warnIfNoProperPropsRootTree(props);\n    const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n    const openItems = React.useMemo(()=>createOpenItems(props.openItems), [\n        props.openItems\n    ]);\n    const checkedItems = React.useMemo(()=>createCheckedItems(props.checkedItems), [\n        props.checkedItems\n    ]);\n    const requestOpenChange = (data)=>{\n        var _props_onOpenChange;\n        const nextOpenItems = createNextOpenItems(data, openItems);\n        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, data.event, {\n            ...data,\n            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n        });\n    };\n    const requestCheckedChange = (data)=>{\n        var _props_onCheckedChange;\n        return (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, data.event, data);\n    };\n    const requestNavigation = (data)=>{\n        var _props_onNavigation;\n        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, 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    const requestTreeResponse = useEventCallback((request)=>{\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,\n                    checkedItems: checkedItems.dangerouslyGetInternalMap_unstable()\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(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,\n            role: 'tree',\n            'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n}\nfunction warnIfNoProperPropsRootTree(props) {\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(`@fluentui/react-tree [useRootTree]:\nTree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined`);\n        }\n    }\n}\n"],"names":["useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","React","useMemo","createOpenItems","checkedItems","createCheckedItems","requestOpenChange","data","_props_onOpenChange","nextOpenItems","createNextOpenItems","onOpenChange","call","event","dangerouslyGetInternalSet_unstable","requestCheckedChange","_props_onCheckedChange","onCheckedChange","requestNavigation","_props_onNavigation","onNavigation","type","treeDataTypes","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","useEventCallback","request","requestType","open","itemType","has","value","dangerouslyGetInternalMap_unstable","components","root","contextType","level","slot","always","getIntrinsicElementProps","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"mappings":"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"}

package/lib-commonjs/hooks/useSubtree.js

@@ -23,7 +23,10 @@ function useSubtree(props, ref) {
             root: 'div'
         },
         level: parentLevel + 1,
-        root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', {
+        root: _reactutilities.slot.always((0, _reactutilities.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: (0, _reactutilities.useMergedRefs)(ref, subtreeRef),
             role: 'group',
             ...props

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

@@ -1 +1 @@
-{"version":3,"sources":["useSubtree.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\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 */ export function useSubtree(props, ref) {\n    const subtreeRef = useTreeItemContext_unstable((ctx)=>ctx.subtreeRef);\n    const parentLevel = useTreeContext_unstable((ctx)=>ctx.level);\n    const open = useTreeItemContext_unstable((ctx)=>ctx.open);\n    return {\n        contextType: 'subtree',\n        open,\n        components: {\n            root: 'div'\n        },\n        level: parentLevel + 1,\n        root: slot.always(getNativeElementProps('div', {\n            ref: useMergedRefs(ref, subtreeRef),\n            role: 'group',\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n}\n"],"names":["useSubtree","props","ref","subtreeRef","useTreeItemContext_unstable","ctx","parentLevel","useTreeContext_unstable","level","open","contextType","components","root","slot","always","getNativeElementProps","useMergedRefs","role","elementType"],"mappings":";;;;+BAQoBA;;;eAAAA;;;;iEARG;uBAC8C;gCACV;AAMhD,SAASA,WAAWC,KAAK,EAAEC,GAAG;IACrC,MAAMC,aAAaC,IAAAA,kCAA2B,EAAC,CAACC,MAAMA,IAAIF,UAAU;IACpE,MAAMG,cAAcC,IAAAA,8BAAuB,EAAC,CAACF,MAAMA,IAAIG,KAAK;IAC5D,MAAMC,OAAOL,IAAAA,kCAA2B,EAAC,CAACC,MAAMA,IAAII,IAAI;IACxD,OAAO;QACHC,aAAa;QACbD;QACAE,YAAY;YACRC,MAAM;QACV;QACAJ,OAAOF,cAAc;QACrBM,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3Cb,KAAKc,IAAAA,6BAAa,EAACd,KAAKC;YACxBc,MAAM;YACN,GAAGhB,KAAK;QACZ,IAAI;YACAiB,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"sources":["useSubtree.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\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 */ export function useSubtree(props, ref) {\n    const subtreeRef = useTreeItemContext_unstable((ctx)=>ctx.subtreeRef);\n    const parentLevel = useTreeContext_unstable((ctx)=>ctx.level);\n    const open = useTreeItemContext_unstable((ctx)=>ctx.open);\n    return {\n        contextType: 'subtree',\n        open,\n        components: {\n            root: 'div'\n        },\n        level: parentLevel + 1,\n        root: slot.always(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),\n            role: 'group',\n            ...props\n        }), {\n            elementType: 'div'\n        })\n    };\n}\n"],"names":["useSubtree","props","ref","subtreeRef","useTreeItemContext_unstable","ctx","parentLevel","useTreeContext_unstable","level","open","contextType","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","role","elementType"],"mappings":";;;;+BAQoBA;;;eAAAA;;;;iEARG;uBAC8C;gCACP;AAMnD,SAASA,WAAWC,KAAK,EAAEC,GAAG;IACrC,MAAMC,aAAaC,IAAAA,kCAA2B,EAAC,CAACC,MAAMA,IAAIF,UAAU;IACpE,MAAMG,cAAcC,IAAAA,8BAAuB,EAAC,CAACF,MAAMA,IAAIG,KAAK;IAC5D,MAAMC,OAAOL,IAAAA,kCAA2B,EAAC,CAACC,MAAMA,IAAII,IAAI;IACxD,OAAO;QACHC,aAAa;QACbD;QACAE,YAAY;YACRC,MAAM;QACV;QACAJ,OAAOF,cAAc;QACrBM,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5Fb,KAAKc,IAAAA,6BAAa,EAACd,KAAKC;YACxBc,MAAM;YACN,GAAGhB,KAAK;QACZ,IAAI;YACAiB,aAAa;QACjB;IACJ;AACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tree",
-  "version": "9.4.0",
+  "version": "9.4.2",
   "description": "Tree component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -37,19 +37,19 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.6",
-    "@fluentui/react-aria": "^9.3.38",
-    "@fluentui/react-avatar": "^9.5.35",
-    "@fluentui/react-button": "^9.3.44",
-    "@fluentui/react-checkbox": "^9.1.45",
-    "@fluentui/react-context-selector": "^9.1.36",
+    "@fluentui/react-aria": "^9.3.40",
+    "@fluentui/react-avatar": "^9.5.37",
+    "@fluentui/react-button": "^9.3.46",
+    "@fluentui/react-checkbox": "^9.1.47",
+    "@fluentui/react-context-selector": "^9.1.38",
     "@fluentui/react-icons": "^2.0.217",
-    "@fluentui/react-portal": "^9.3.19",
-    "@fluentui/react-radio": "^9.1.45",
+    "@fluentui/react-portal": "^9.3.21",
+    "@fluentui/react-radio": "^9.1.47",
     "@fluentui/react-shared-contexts": "^9.9.2",
-    "@fluentui/react-tabster": "^9.13.2",
+    "@fluentui/react-tabster": "^9.13.4",
     "@fluentui/react-theme": "^9.1.14",
-    "@fluentui/react-utilities": "^9.13.5",
-    "@fluentui/react-jsx-runtime": "^9.0.12",
+    "@fluentui/react-utilities": "^9.14.1",
+    "@fluentui/react-jsx-runtime": "^9.0.14",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },