npm - @fluentui/react-tree - Versions diffs - 9.16.0 → 9.16.1 - Mend

@fluentui/react-tree 9.16.0 → 9.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,28 +1,48 @@
 # Change Log - @fluentui/react-tree
-This log was last generated on Thu, 23 Apr 2026 11:59:37 GMT and should not be manually modified.
+This log was last generated on Tue, 26 May 2026 09:33:37 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.16.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.16.1)
+Tue, 26 May 2026 09:33:37 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.16.0..@fluentui/react-tree_v9.16.1)
+### Patches
+- fix(react-tree): support indentation for TreeItem levels greater than 10 via inline CSS variable fallback ([PR #36014](https://github.com/microsoft/fluentui/pull/36014) by 198982749+Copilot@users.noreply.github.com)
+- Bump @fluentui/react-aria to v9.17.12 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-avatar to v9.11.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-button to v9.9.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-checkbox to v9.6.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.17 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.15.5 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-motion to v9.16.0 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-radio to v9.6.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
 ## [9.16.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.16.0)
-Thu, 23 Apr 2026 11:59:37 GMT
+Thu, 23 Apr 2026 14:20:59 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.15.16..@fluentui/react-tree_v9.16.0)
 ### Minor changes
 - feat: add CollapseParams to the motion slot type ([PR #36011](https://github.com/microsoft/fluentui/pull/36011) by robertpenner@microsoft.com)
-- Bump @fluentui/react-aria to v9.17.11 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-avatar to v9.11.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-button to v9.9.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-checkbox to v9.6.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-context-selector to v9.2.16 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-motion-components-preview to v0.15.4 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-motion to v9.15.0 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-radio to v9.6.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-aria to v9.17.11 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-avatar to v9.11.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-button to v9.9.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-checkbox to v9.6.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.16 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.15.4 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-motion to v9.15.0 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-radio to v9.6.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
 ### Patches

package/lib/components/FlatTree/useFlatTreeStyles.styles.js CHANGED Viewed

@@ -10,6 +10,7 @@ export const useFlatTreeStyles_unstable = state => {
   'use no memo';
   const baseStyles = useBaseStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);
   return state;
 };

package/lib/components/FlatTree/useFlatTreeStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","mergeClasses","tokens","flatTreeClassNames","root","useBaseStyles","useFlatTreeStyles_unstable","state","baseStyles","className"],"sources":["useFlatTreeStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const flatTreeClassNames = {\n root: 'fui-FlatTree'\n};\nconst useBaseStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS\n});\nexport const useFlatTreeStyles_unstable = (state)=>{\n 'use no memo';\n const baseStyles = useBaseStyles();\n state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGL,aAAA,qGAIrB,CAAC;AACF,OAAO,MAAMM,0BAA0B,GAAIC,KAAK,IAAG;EAC/C,aAAa;;EACb,MAAMC,UAAU,GAAGH,aAAa,CAAC,CAAC;~~EAClCE~~,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,kBAAkB,CAACC,IAAI,EAAEI,UAAU,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","mergeClasses","tokens","flatTreeClassNames","root","useBaseStyles","useFlatTreeStyles_unstable","state","baseStyles","className"],"sources":["useFlatTreeStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const flatTreeClassNames = {\n root: 'fui-FlatTree'\n};\nconst useBaseStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS\n});\nexport const useFlatTreeStyles_unstable = (state)=>{\n 'use no memo';\n const baseStyles = useBaseStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGL,aAAA,qGAIrB,CAAC;AACF,OAAO,MAAMM,0BAA0B,GAAIC,KAAK,IAAG;EAC/C,aAAa;;EACb,MAAMC,UAAU,GAAGH,aAAa,CAAC,CAAC;EAClC;EACAE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,kBAAkB,CAACC,IAAI,EAAEI,UAAU,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/FlatTree/useFlatTreeStyles.styles.raw.js CHANGED Viewed

@@ -12,6 +12,7 @@ const useBaseStyles = makeResetStyles({
 export const useFlatTreeStyles_unstable = (state)=>{
     'use no memo';
     const baseStyles = useBaseStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);
     return state;
 };

package/lib/components/FlatTree/useFlatTreeStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/FlatTree/useFlatTreeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { FlatTreeSlots, FlatTreeState } from './FlatTree.types';\n\nexport const flatTreeClassNames: SlotClassNames<Omit<FlatTreeSlots, 'collapseMotion'>> = {\n root: 'fui-FlatTree',\n};\n\nconst useBaseStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS,\n});\n\nexport const useFlatTreeStyles_unstable = (state: FlatTreeState): FlatTreeState => {\n 'use no memo';\n\n const baseStyles = useBaseStyles();\n state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","flatTreeClassNames","root","useBaseStyles","display","flexDirection","rowGap","spacingVerticalXXS","useFlatTreeStyles_unstable","state","baseStyles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAE/D,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,OAAO,MAAMC,qBAA4E;IACvFC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAgBL,gBAAgB;IACpCM,SAAS;IACTC,eAAe;IACfC,QAAQN,OAAOO,kBAAkB;AACnC;AAEA,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,aAAaP;~~IACnBM~~,MAAMP,IAAI,CAACS,SAAS,GAAGZ,aAAaE,mBAAmBC,IAAI,EAAEQ,YAAYD,MAAMP,IAAI,CAACS,SAAS;IAC7F,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/FlatTree/useFlatTreeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { FlatTreeSlots, FlatTreeState } from './FlatTree.types';\n\nexport const flatTreeClassNames: SlotClassNames<Omit<FlatTreeSlots, 'collapseMotion'>> = {\n root: 'fui-FlatTree',\n};\n\nconst useBaseStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS,\n});\n\nexport const useFlatTreeStyles_unstable = (state: FlatTreeState): FlatTreeState => {\n 'use no memo';\n\n const baseStyles = useBaseStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","flatTreeClassNames","root","useBaseStyles","display","flexDirection","rowGap","spacingVerticalXXS","useFlatTreeStyles_unstable","state","baseStyles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAE/D,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,OAAO,MAAMC,qBAA4E;IACvFC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAgBL,gBAAgB;IACpCM,SAAS;IACTC,eAAe;IACfC,QAAQN,OAAOO,kBAAkB;AACnC;AAEA,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,aAAaP;IACnB,oDAAoD;IACpDM,MAAMP,IAAI,CAACS,SAAS,GAAGZ,aAAaE,mBAAmBC,IAAI,EAAEQ,YAAYD,MAAMP,IAAI,CAACS,SAAS;IAC7F,OAAOF;AACT,EAAE"}

package/lib/components/Tree/useTreeStyles.styles.js CHANGED Viewed

@@ -19,6 +19,7 @@ export const useTreeStyles_unstable = state => {
   const baseStyles = useBaseStyles();
   const styles = useStyles();
   const isSubTree = state.level > 1;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(treeClassNames.root, baseStyles, isSubTree && styles.subtree, state.root.className);
   return state;
 };

package/lib/components/Tree/useTreeStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","treeClassNames","root","useBaseStyles","useStyles","subtree","z8tnut","d","useTreeStyles_unstable","state","baseStyles","styles","isSubTree","level","className"],"sources":["useTreeStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n root: 'fui-Tree'\n};\nconst useBaseStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS\n});\nconst useStyles = makeStyles({\n subtree: {\n paddingTop: tokens.spacingVerticalXXS\n }\n});\nexport const useTreeStyles_unstable = (state)=>{\n 'use no memo';\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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGN,aAAA,qGAIrB,CAAC;AACF,MAAMO,SAAS,gBAAGN,QAAA;EAAAO,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC3C,aAAa;;EACb,MAAMC,UAAU,GAAGP,aAAa,CAAC,CAAC;EAClC,MAAMQ,MAAM,GAAGP,SAAS,CAAC,CAAC;EAC1B,MAAMQ,SAAS,GAAGH,KAAK,CAACI,KAAK,GAAG,CAAC;~~EACjCJ~~,KAAK,CAACP,IAAI,CAACY,SAAS,GAAGf,YAAY,CAACE,cAAc,CAACC,IAAI,EAAEQ,UAAU,EAAEE,SAAS,IAAID,MAAM,CAACN,OAAO,EAAEI,KAAK,CAACP,IAAI,CAACY,SAAS,CAAC;EACvH,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","treeClassNames","root","useBaseStyles","useStyles","subtree","z8tnut","d","useTreeStyles_unstable","state","baseStyles","styles","isSubTree","level","className"],"sources":["useTreeStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n root: 'fui-Tree'\n};\nconst useBaseStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS\n});\nconst useStyles = makeStyles({\n subtree: {\n paddingTop: tokens.spacingVerticalXXS\n }\n});\nexport const useTreeStyles_unstable = (state)=>{\n 'use no memo';\n const baseStyles = useBaseStyles();\n const styles = useStyles();\n const isSubTree = state.level > 1;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(treeClassNames.root, baseStyles, isSubTree && styles.subtree, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGN,aAAA,qGAIrB,CAAC;AACF,MAAMO,SAAS,gBAAGN,QAAA;EAAAO,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC3C,aAAa;;EACb,MAAMC,UAAU,GAAGP,aAAa,CAAC,CAAC;EAClC,MAAMQ,MAAM,GAAGP,SAAS,CAAC,CAAC;EAC1B,MAAMQ,SAAS,GAAGH,KAAK,CAACI,KAAK,GAAG,CAAC;EACjC;EACAJ,KAAK,CAACP,IAAI,CAACY,SAAS,GAAGf,YAAY,CAACE,cAAc,CAACC,IAAI,EAAEQ,UAAU,EAAEE,SAAS,IAAID,MAAM,CAACN,OAAO,EAAEI,KAAK,CAACP,IAAI,CAACY,SAAS,CAAC;EACvH,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/Tree/useTreeStyles.styles.raw.js CHANGED Viewed

@@ -19,6 +19,7 @@ export const useTreeStyles_unstable = (state)=>{
     const baseStyles = useBaseStyles();
     const styles = useStyles();
     const isSubTree = state.level > 1;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(treeClassNames.root, baseStyles, isSubTree && styles.subtree, state.root.className);
     return state;
 };

package/lib/components/Tree/useTreeStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Tree/useTreeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeSlots, TreeState } from './Tree.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const treeClassNames: SlotClassNames<Omit<TreeSlots, 'collapseMotion'>> = {\n root: 'fui-Tree',\n};\n\nconst useBaseStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS,\n});\n\nconst useStyles = makeStyles({\n subtree: {\n paddingTop: tokens.spacingVerticalXXS,\n },\n});\n\nexport const useTreeStyles_unstable = (state: TreeState): TreeState => {\n 'use no memo';\n\n const baseStyles = useBaseStyles();\n const styles = useStyles();\n const isSubTree = state.level > 1;\n\n state.root.className = mergeClasses(\n treeClassNames.root,\n baseStyles,\n isSubTree && styles.subtree,\n state.root.className,\n );\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","treeClassNames","root","useBaseStyles","display","flexDirection","rowGap","spacingVerticalXXS","useStyles","subtree","paddingTop","useTreeStyles_unstable","state","baseStyles","styles","isSubTree","level","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,iBAAoE;IAC/EC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAgBN,gBAAgB;IACpCO,SAAS;IACTC,eAAe;IACfC,QAAQN,OAAOO,kBAAkB;AACnC;AAEA,MAAMC,YAAYV,WAAW;IAC3BW,SAAS;QACPC,YAAYV,OAAOO,kBAAkB;IACvC;AACF;AAEA,OAAO,MAAMI,yBAAyB,CAACC;IACrC;IAEA,MAAMC,aAAaV;IACnB,MAAMW,SAASN;IACf,MAAMO,YAAYH,MAAMI,KAAK,GAAG;~~IAEhCJ~~,MAAMV,IAAI,CAACe,SAAS,GAAGlB,aACrBE,eAAeC,IAAI,EACnBW,YACAE,aAAaD,OAAOL,OAAO,EAC3BG,MAAMV,IAAI,CAACe,SAAS;IAEtB,OAAOL;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/Tree/useTreeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeSlots, TreeState } from './Tree.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const treeClassNames: SlotClassNames<Omit<TreeSlots, 'collapseMotion'>> = {\n root: 'fui-Tree',\n};\n\nconst useBaseStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS,\n});\n\nconst useStyles = makeStyles({\n subtree: {\n paddingTop: tokens.spacingVerticalXXS,\n },\n});\n\nexport const useTreeStyles_unstable = (state: TreeState): TreeState => {\n 'use no memo';\n\n const baseStyles = useBaseStyles();\n const styles = useStyles();\n const isSubTree = state.level > 1;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n treeClassNames.root,\n baseStyles,\n isSubTree && styles.subtree,\n state.root.className,\n );\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","treeClassNames","root","useBaseStyles","display","flexDirection","rowGap","spacingVerticalXXS","useStyles","subtree","paddingTop","useTreeStyles_unstable","state","baseStyles","styles","isSubTree","level","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,iBAAoE;IAC/EC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAgBN,gBAAgB;IACpCO,SAAS;IACTC,eAAe;IACfC,QAAQN,OAAOO,kBAAkB;AACnC;AAEA,MAAMC,YAAYV,WAAW;IAC3BW,SAAS;QACPC,YAAYV,OAAOO,kBAAkB;IACvC;AACF;AAEA,OAAO,MAAMI,yBAAyB,CAACC;IACrC;IAEA,MAAMC,aAAaV;IACnB,MAAMW,SAASN;IACf,MAAMO,YAAYH,MAAMI,KAAK,GAAG;IAEhC,oDAAoD;IACpDJ,MAAMV,IAAI,CAACe,SAAS,GAAGlB,aACrBE,eAAeC,IAAI,EACnBW,YACAE,aAAaD,OAAOL,OAAO,EAC3BG,MAAMV,IAAI,CAACe,SAAS;IAEtB,OAAOL;AACT,EAAE"}

package/lib/components/TreeItem/useTreeItemStyles.styles.js CHANGED Viewed

@@ -55,7 +55,19 @@ export const useTreeItemStyles_unstable = state => {
   const {
     level
   } = state;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);
+  // For levels beyond the statically generated classes (> 10), fall back to an
+  // inline style that sets the indentation CSS variable dynamically. This avoids
+  // generating an unbounded number of atomic classes while still supporting
+  // arbitrarily deep trees. User-provided inline styles take precedence.
+  if (!isStaticallyDefinedLevel(level)) {
+    // eslint-disable-next-line react-hooks/immutability
+    state.root.style = {
+      [treeItemLevelToken]: level,
+      ...state.root.style
+    };
+  }
   return state;
 };
 function isStaticallyDefinedLevel(level) {

package/lib/components/TreeItem/useTreeItemStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","treeItemLevelToken","treeItemLayoutClassNames","treeItemPersonaLayoutClassNames","treeItemClassNames","root","useBaseStyles","useStyles","level1","iytv0q","level2","level3","level4","level5","level6","level7","level8","level9","level10","d","useTreeItemStyles_unstable","state","baseStyles","styles","level","className","isStaticallyDefinedLevel"],"sources":["useTreeItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';\nimport { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';\nexport const treeItemClassNames = {\n root: 'fui-TreeItem'\n};\nconst useBaseStyles = makeResetStyles({\n position: 'relative',\n cursor: 'pointer',\n display: 'flex',\n flexDirection: 'column',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n paddingRight: tokens.spacingHorizontalNone,\n // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser\n ':focus': {\n outlineStyle: 'none'\n },\n ':focus-visible': {\n outlineStyle: 'none'\n },\n // This adds the focus outline for the TreeItemLayout element\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium,\n outlineColor: tokens.colorStrokeFocus2,\n outlineRadius: tokens.borderRadiusMedium,\n // FIXME: tokens.strokeWidthThick causes some weird bugs\n outlineWidth: '2px',\n outlineStyle: 'solid'\n }, {\n customizeSelector: (selector)=>`${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`\n })\n});\nconst useStyles = makeStyles({\n ...Object.fromEntries(Array.from({\n length: 10\n }, (_, index)=>[\n `level${index + 1}`,\n {\n [treeItemLevelToken]: index + 1\n }\n ]))\n});\n/*\n Apply styling to the TreeItem slots based on the state\n */ export const useTreeItemStyles_unstable = (state)=>{\n 'use no memo';\n const baseStyles = useBaseStyles();\n const styles = useStyles();\n const { level } = state;\n state.root.className = mergeClasses(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);\n return state;\n};\nfunction isStaticallyDefinedLevel(level) {\n return level >= 1 && level <= 10;\n}\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,wBAAwB,QAAQ,kDAAkD;AAC3F,SAASC,+BAA+B,QAAQ,gEAAgE;AAChH,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGV,aAAA,4rCA2BrB,CAAC;AACF,MAAMW,SAAS,gBAAGV,QAAA;EAAAW,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;EAAAE,MAAA;IAAAF,MAAA;EAAA;EAAAG,MAAA;IAAAH,MAAA;EAAA;EAAAI,MAAA;IAAAJ,MAAA;EAAA;EAAAK,MAAA;IAAAL,MAAA;EAAA;EAAAM,MAAA;IAAAN,MAAA;EAAA;EAAAO,MAAA;IAAAP,MAAA;EAAA;EAAAQ,MAAA;IAAAR,MAAA;EAAA;EAAAS,OAAA;IAAAT,MAAA;EAAA;AAAA;EAAAU,CAAA;AAAA,CASjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,UAAU,GAAGhB,aAAa,CAAC,CAAC;EAClC,MAAMiB,MAAM,GAAGhB,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEiB;EAAM,CAAC,GAAGH,KAAK;~~EACvBA~~,KAAK,CAAChB,IAAI,CAACoB,SAAS,GAAG3B,YAAY,CAACM,kBAAkB,CAACC,IAAI,EAAEiB,UAAU,EAAEI,wBAAwB,CAACF,KAAK,CAAC,IAAID,MAAM,CAAC,QAAQC,KAAK,EAAE,CAAC,EAAEH,KAAK,CAAChB,IAAI,CAACoB,SAAS,CAAC;EAC1J,~~OAAOJ~~,KAAK;AAChB,CAAC;AACD,SAASK,wBAAwBA,CAACF,KAAK,EAAE;EACrC,OAAOA,KAAK,IAAI,CAAC,IAAIA,KAAK,IAAI,EAAE;AACpC","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","treeItemLevelToken","treeItemLayoutClassNames","treeItemPersonaLayoutClassNames","treeItemClassNames","root","useBaseStyles","useStyles","level1","iytv0q","level2","level3","level4","level5","level6","level7","level8","level9","level10","d","useTreeItemStyles_unstable","state","baseStyles","styles","level","className","isStaticallyDefinedLevel","style"],"sources":["useTreeItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';\nimport { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';\nexport const treeItemClassNames = {\n root: 'fui-TreeItem'\n};\nconst useBaseStyles = makeResetStyles({\n position: 'relative',\n cursor: 'pointer',\n display: 'flex',\n flexDirection: 'column',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n paddingRight: tokens.spacingHorizontalNone,\n // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser\n ':focus': {\n outlineStyle: 'none'\n },\n ':focus-visible': {\n outlineStyle: 'none'\n },\n // This adds the focus outline for the TreeItemLayout element\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium,\n outlineColor: tokens.colorStrokeFocus2,\n outlineRadius: tokens.borderRadiusMedium,\n // FIXME: tokens.strokeWidthThick causes some weird bugs\n outlineWidth: '2px',\n outlineStyle: 'solid'\n }, {\n customizeSelector: (selector)=>`${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`\n })\n});\nconst useStyles = makeStyles({\n ...Object.fromEntries(Array.from({\n length: 10\n }, (_, index)=>[\n `level${index + 1}`,\n {\n [treeItemLevelToken]: index + 1\n }\n ]))\n});\n/*\n Apply styling to the TreeItem slots based on the state\n */ export const useTreeItemStyles_unstable = (state)=>{\n 'use no memo';\n const baseStyles = useBaseStyles();\n const styles = useStyles();\n const { level } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);\n // For levels beyond the statically generated classes (> 10), fall back to an\n // inline style that sets the indentation CSS variable dynamically. This avoids\n // generating an unbounded number of atomic classes while still supporting\n // arbitrarily deep trees. User-provided inline styles take precedence.\n if (!isStaticallyDefinedLevel(level)) {\n // eslint-disable-next-line react-hooks/immutability\n state.root.style = {\n [treeItemLevelToken]: level,\n ...state.root.style\n };\n }\n return state;\n};\nfunction isStaticallyDefinedLevel(level) {\n return level >= 1 && level <= 10;\n}\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,wBAAwB,QAAQ,kDAAkD;AAC3F,SAASC,+BAA+B,QAAQ,gEAAgE;AAChH,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGV,aAAA,4rCA2BrB,CAAC;AACF,MAAMW,SAAS,gBAAGV,QAAA;EAAAW,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;EAAAE,MAAA;IAAAF,MAAA;EAAA;EAAAG,MAAA;IAAAH,MAAA;EAAA;EAAAI,MAAA;IAAAJ,MAAA;EAAA;EAAAK,MAAA;IAAAL,MAAA;EAAA;EAAAM,MAAA;IAAAN,MAAA;EAAA;EAAAO,MAAA;IAAAP,MAAA;EAAA;EAAAQ,MAAA;IAAAR,MAAA;EAAA;EAAAS,OAAA;IAAAT,MAAA;EAAA;AAAA;EAAAU,CAAA;AAAA,CASjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,UAAU,GAAGhB,aAAa,CAAC,CAAC;EAClC,MAAMiB,MAAM,GAAGhB,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEiB;EAAM,CAAC,GAAGH,KAAK;EACvB;EACAA,KAAK,CAAChB,IAAI,CAACoB,SAAS,GAAG3B,YAAY,CAACM,kBAAkB,CAACC,IAAI,EAAEiB,UAAU,EAAEI,wBAAwB,CAACF,KAAK,CAAC,IAAID,MAAM,CAAC,QAAQC,KAAK,EAAE,CAAC,EAAEH,KAAK,CAAChB,IAAI,CAACoB,SAAS,CAAC;EAC1J;EACA;EACA;EACA;EACA,IAAI,CAACC,wBAAwB,CAACF,KAAK,CAAC,EAAE;IAClC;IACAH,KAAK,CAAChB,IAAI,CAACsB,KAAK,GAAG;MACf,CAAC1B,kBAAkB,GAAGuB,KAAK;MAC3B,GAAGH,KAAK,CAAChB,IAAI,CAACsB;IAClB,CAAC;EACL;EACA,OAAON,KAAK;AAChB,CAAC;AACD,SAASK,wBAAwBA,CAACF,KAAK,EAAE;EACrC,OAAOA,KAAK,IAAI,CAAC,IAAIA,KAAK,IAAI,EAAE;AACpC","ignoreList":[]}

package/lib/components/TreeItem/useTreeItemStyles.styles.raw.js CHANGED Viewed

@@ -53,7 +53,19 @@ const useStyles = makeStyles({
     const baseStyles = useBaseStyles();
     const styles = useStyles();
     const { level } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);
+    // For levels beyond the statically generated classes (> 10), fall back to an
+    // inline style that sets the indentation CSS variable dynamically. This avoids
+    // generating an unbounded number of atomic classes while still supporting
+    // arbitrarily deep trees. User-provided inline styles take precedence.
+    if (!isStaticallyDefinedLevel(level)) {
+        // eslint-disable-next-line react-hooks/immutability
+        state.root.style = {
+            [treeItemLevelToken]: level,
+            ...state.root.style
+        };
+    }
     return state;
 };
 function isStaticallyDefinedLevel(level) {

package/lib/components/TreeItem/useTreeItemStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TreeItem/useTreeItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { GriffelStyle } from '@griffel/react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeItemCSSProperties, TreeItemSlots, TreeItemState } from './TreeItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';\nimport { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';\n\nexport const treeItemClassNames: SlotClassNames<TreeItemSlots> = {\n root: 'fui-TreeItem',\n};\n\nconst useBaseStyles = makeResetStyles({\n position: 'relative',\n cursor: 'pointer',\n display: 'flex',\n flexDirection: 'column',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n paddingRight: tokens.spacingHorizontalNone,\n // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser\n ':focus': {\n outlineStyle: 'none',\n },\n ':focus-visible': {\n outlineStyle: 'none',\n },\n // This adds the focus outline for the TreeItemLayout element\n ...createCustomFocusIndicatorStyle(\n {\n borderRadius: tokens.borderRadiusMedium,\n outlineColor: tokens.colorStrokeFocus2,\n outlineRadius: tokens.borderRadiusMedium,\n // FIXME: tokens.strokeWidthThick causes some weird bugs\n outlineWidth: '2px',\n outlineStyle: 'solid',\n },\n {\n customizeSelector: selector =>\n `${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`,\n },\n ),\n});\n\ntype StaticLevel = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10;\ntype StaticLevelProperty = `level${StaticLevel}`;\n\nconst useStyles = makeStyles({\n ...(Object.fromEntries(\n Array.from<never, [StaticLevelProperty, TreeItemCSSProperties]>({ length: 10 }, (_, index) => [\n `level${(index + 1) as StaticLevel}`,\n { [treeItemLevelToken]: index + 1 },\n ]),\n ) as Record<StaticLevelProperty, GriffelStyle>),\n});\n\n/*\n Apply styling to the TreeItem slots based on the state\n */\nexport const useTreeItemStyles_unstable = (state: TreeItemState): TreeItemState => {\n 'use no memo';\n\n const baseStyles = useBaseStyles();\n const styles = useStyles();\n\n const { level } = state;\n\n state.root.className = mergeClasses(\n treeItemClassNames.root,\n baseStyles,\n isStaticallyDefinedLevel(level) && styles[`level${level}` as StaticLevelProperty],\n state.root.className,\n );\n\n return state;\n};\n\nfunction isStaticallyDefinedLevel(level: number): level is StaticLevel {\n return level >= 1 && level <= 10;\n}\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","treeItemLevelToken","treeItemLayoutClassNames","treeItemPersonaLayoutClassNames","treeItemClassNames","root","useBaseStyles","position","cursor","display","flexDirection","boxSizing","backgroundColor","colorSubtleBackground","color","colorNeutralForeground2","paddingRight","spacingHorizontalNone","outlineStyle","borderRadius","borderRadiusMedium","outlineColor","colorStrokeFocus2","outlineRadius","outlineWidth","customizeSelector","selector","useStyles","Object","fromEntries","Array","from","length","_","index","useTreeItemStyles_unstable","state","baseStyles","styles","level","className","isStaticallyDefinedLevel"],"mappings":"AAAA;AAGA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,kBAAkB,QAAQ,qBAAqB;AACxD,SAASC,wBAAwB,QAAQ,mDAAmD;AAC5F,SAASC,+BAA+B,QAAQ,iEAAiE;AAEjH,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAgBV,gBAAgB;IACpCW,UAAU;IACVC,QAAQ;IACRC,SAAS;IACTC,eAAe;IACfC,WAAW;IACXC,iBAAiBb,OAAOc,qBAAqB;IAC7CC,OAAOf,OAAOgB,uBAAuB;IACrCC,cAAcjB,OAAOkB,qBAAqB;IAC1C,iHAAiH;IACjH,UAAU;QACRC,cAAc;IAChB;IACA,kBAAkB;QAChBA,cAAc;IAChB;IACA,6DAA6D;IAC7D,GAAGlB,gCACD;QACEmB,cAAcpB,OAAOqB,kBAAkB;QACvCC,cAActB,OAAOuB,iBAAiB;QACtCC,eAAexB,OAAOqB,kBAAkB;QACxC,wDAAwD;QACxDI,cAAc;QACdN,cAAc;IAChB,GACA;QACEO,mBAAmBC,CAAAA,WACjB,GAAGA,SAAS,IAAI,EAAExB,yBAAyBG,IAAI,CAAC,EAAE,EAAEqB,SAAS,IAAI,EAAEvB,gCAAgCE,IAAI,EAAE;IAC7G,EACD;AACH;AAKA,MAAMsB,YAAY9B,WAAW;IAC3B,GAAI+B,OAAOC,WAAW,CACpBC,MAAMC,IAAI,CAAsD;QAAEC,QAAQ;IAAG,GAAG,CAACC,GAAGC,QAAU;YAC5F,CAAC,KAAK,EAAGA,QAAQ,GAAmB;YACpC;gBAAE,CAACjC,mBAAmB,EAAEiC,QAAQ;YAAE;SACnC,EACF;AACH;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,aAAa/B;IACnB,MAAMgC,SAASX;IAEf,MAAM,EAAEY,KAAK,EAAE,GAAGH;~~IAElBA~~,MAAM/B,IAAI,CAACmC,SAAS,GAAG1C,aACrBM,mBAAmBC,IAAI,EACvBgC,YACAI,yBAAyBF,UAAUD,MAAM,CAAC,CAAC,KAAK,EAAEC,OAAO,CAAwB,EACjFH,MAAM/B,IAAI,CAACmC,SAAS;IAGtB,~~OAAOJ~~;AACT,EAAE;AAEF,SAASK,yBAAyBF,KAAa;IAC7C,OAAOA,SAAS,KAAKA,SAAS;AAChC"}
1	+ {"version":3,"sources":["../src/components/TreeItem/useTreeItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { GriffelStyle } from '@griffel/react';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeItemCSSProperties, TreeItemSlots, TreeItemState } from './TreeItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';\nimport { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';\n\nexport const treeItemClassNames: SlotClassNames<TreeItemSlots> = {\n root: 'fui-TreeItem',\n};\n\nconst useBaseStyles = makeResetStyles({\n position: 'relative',\n cursor: 'pointer',\n display: 'flex',\n flexDirection: 'column',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n paddingRight: tokens.spacingHorizontalNone,\n // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser\n ':focus': {\n outlineStyle: 'none',\n },\n ':focus-visible': {\n outlineStyle: 'none',\n },\n // This adds the focus outline for the TreeItemLayout element\n ...createCustomFocusIndicatorStyle(\n {\n borderRadius: tokens.borderRadiusMedium,\n outlineColor: tokens.colorStrokeFocus2,\n outlineRadius: tokens.borderRadiusMedium,\n // FIXME: tokens.strokeWidthThick causes some weird bugs\n outlineWidth: '2px',\n outlineStyle: 'solid',\n },\n {\n customizeSelector: selector =>\n `${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`,\n },\n ),\n});\n\ntype StaticLevel = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10;\ntype StaticLevelProperty = `level${StaticLevel}`;\n\nconst useStyles = makeStyles({\n ...(Object.fromEntries(\n Array.from<never, [StaticLevelProperty, TreeItemCSSProperties]>({ length: 10 }, (_, index) => [\n `level${(index + 1) as StaticLevel}`,\n { [treeItemLevelToken]: index + 1 },\n ]),\n ) as Record<StaticLevelProperty, GriffelStyle>),\n});\n\n/*\n Apply styling to the TreeItem slots based on the state\n */\nexport const useTreeItemStyles_unstable = (state: TreeItemState): TreeItemState => {\n 'use no memo';\n\n const baseStyles = useBaseStyles();\n const styles = useStyles();\n\n const { level } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n treeItemClassNames.root,\n baseStyles,\n isStaticallyDefinedLevel(level) && styles[`level${level}` as StaticLevelProperty],\n state.root.className,\n );\n\n // For levels beyond the statically generated classes (> 10), fall back to an\n // inline style that sets the indentation CSS variable dynamically. This avoids\n // generating an unbounded number of atomic classes while still supporting\n // arbitrarily deep trees. User-provided inline styles take precedence.\n if (!isStaticallyDefinedLevel(level)) {\n // eslint-disable-next-line react-hooks/immutability\n state.root.style = {\n [treeItemLevelToken]: level,\n ...state.root.style,\n };\n }\n\n return state;\n};\n\nfunction isStaticallyDefinedLevel(level: number): level is StaticLevel {\n return level >= 1 && level <= 10;\n}\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","treeItemLevelToken","treeItemLayoutClassNames","treeItemPersonaLayoutClassNames","treeItemClassNames","root","useBaseStyles","position","cursor","display","flexDirection","boxSizing","backgroundColor","colorSubtleBackground","color","colorNeutralForeground2","paddingRight","spacingHorizontalNone","outlineStyle","borderRadius","borderRadiusMedium","outlineColor","colorStrokeFocus2","outlineRadius","outlineWidth","customizeSelector","selector","useStyles","Object","fromEntries","Array","from","length","_","index","useTreeItemStyles_unstable","state","baseStyles","styles","level","className","isStaticallyDefinedLevel","style"],"mappings":"AAAA;AAGA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,kBAAkB,QAAQ,qBAAqB;AACxD,SAASC,wBAAwB,QAAQ,mDAAmD;AAC5F,SAASC,+BAA+B,QAAQ,iEAAiE;AAEjH,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAgBV,gBAAgB;IACpCW,UAAU;IACVC,QAAQ;IACRC,SAAS;IACTC,eAAe;IACfC,WAAW;IACXC,iBAAiBb,OAAOc,qBAAqB;IAC7CC,OAAOf,OAAOgB,uBAAuB;IACrCC,cAAcjB,OAAOkB,qBAAqB;IAC1C,iHAAiH;IACjH,UAAU;QACRC,cAAc;IAChB;IACA,kBAAkB;QAChBA,cAAc;IAChB;IACA,6DAA6D;IAC7D,GAAGlB,gCACD;QACEmB,cAAcpB,OAAOqB,kBAAkB;QACvCC,cAActB,OAAOuB,iBAAiB;QACtCC,eAAexB,OAAOqB,kBAAkB;QACxC,wDAAwD;QACxDI,cAAc;QACdN,cAAc;IAChB,GACA;QACEO,mBAAmBC,CAAAA,WACjB,GAAGA,SAAS,IAAI,EAAExB,yBAAyBG,IAAI,CAAC,EAAE,EAAEqB,SAAS,IAAI,EAAEvB,gCAAgCE,IAAI,EAAE;IAC7G,EACD;AACH;AAKA,MAAMsB,YAAY9B,WAAW;IAC3B,GAAI+B,OAAOC,WAAW,CACpBC,MAAMC,IAAI,CAAsD;QAAEC,QAAQ;IAAG,GAAG,CAACC,GAAGC,QAAU;YAC5F,CAAC,KAAK,EAAGA,QAAQ,GAAmB;YACpC;gBAAE,CAACjC,mBAAmB,EAAEiC,QAAQ;YAAE;SACnC,EACF;AACH;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,aAAa/B;IACnB,MAAMgC,SAASX;IAEf,MAAM,EAAEY,KAAK,EAAE,GAAGH;IAElB,oDAAoD;IACpDA,MAAM/B,IAAI,CAACmC,SAAS,GAAG1C,aACrBM,mBAAmBC,IAAI,EACvBgC,YACAI,yBAAyBF,UAAUD,MAAM,CAAC,CAAC,KAAK,EAAEC,OAAO,CAAwB,EACjFH,MAAM/B,IAAI,CAACmC,SAAS;IAGtB,6EAA6E;IAC7E,+EAA+E;IAC/E,0EAA0E;IAC1E,uEAAuE;IACvE,IAAI,CAACC,yBAAyBF,QAAQ;QACpC,oDAAoD;QACpDH,MAAM/B,IAAI,CAACqC,KAAK,GAAG;YACjB,CAACzC,mBAAmB,EAAEsC;YACtB,GAAGH,MAAM/B,IAAI,CAACqC,KAAK;QACrB;IACF;IAEA,OAAON;AACT,EAAE;AAEF,SAASK,yBAAyBF,KAAa;IAC7C,OAAOA,SAAS,KAAKA,SAAS;AAChC"}

package/lib/components/TreeItemLayout/useTreeItemLayout.js CHANGED Viewed

@@ -44,8 +44,10 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
     const checked = useTreeItemContext_unstable((ctx)=>ctx.checked);
     const isBranch = useTreeItemContext_unstable((ctx)=>ctx.itemType === 'branch');
     // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change
+    // eslint-disable-next-line react-hooks/refs
     assertIsRefObject(treeItemRef);
     // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change
+    // eslint-disable-next-line react-hooks/refs
     assertIsRefObject(subtreeRef);
     const setActionsVisibleIfNotFromSubtree = React.useCallback((event)=>{
         const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));

package/lib/components/TreeItemLayout/useTreeItemLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TreeItemLayout/useTreeItemLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n getIntrinsicElementProps,\n isResolvedShorthand,\n useMergedRefs,\n slot,\n useEventCallback,\n elementContains,\n useControllableState,\n} from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport type {\n TreeItemLayoutActionSlotProps,\n TreeItemLayoutActionVisibilityChangeData,\n TreeItemLayoutProps,\n TreeItemLayoutState,\n} from './TreeItemLayout.types';\nimport type { CheckboxProps } from '@fluentui/react-checkbox';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport type { RadioProps } from '@fluentui/react-radio';\nimport { Radio } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup, useIsNavigatingWithKeyboard } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/*\n Create the state required to render TreeItemLayout.\n \n The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n \n @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n props: TreeItemLayoutProps,\n ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n 'use no memo';\n\n const { main, iconAfter, iconBefore } = props;\n\n const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n const navigationMode = useTreeContext_unstable(ctx => ctx.navigationMode ?? 'tree');\n\n const [isActionsVisibleFromProps, onActionVisibilityChange]: [\n TreeItemLayoutActionSlotProps['visible'],\n TreeItemLayoutActionSlotProps['onVisibilityChange'],\n ] = isResolvedShorthand(props.actions)\n ? // .visible .onVisibilityChange prop should not be propagated to the DOM\n [props.actions.visible, props.actions.onVisibilityChange]\n : [undefined, undefined];\n\n const [isActionsVisible, setIsActionsVisible] = useControllableState({\n state: isActionsVisibleFromProps,\n initialState: false,\n });\n\n const selectionRef = useTreeItemContext_unstable(ctx => ctx.selectionRef);\n const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n const actionsRef = useTreeItemContext_unstable(ctx => ctx.actionsRef);\n const actionsRefInternal = React.useRef<HTMLDivElement>(null);\n const treeItemRef = useTreeItemContext_unstable(ctx => ctx.treeItemRef);\n const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n const checked = useTreeItemContext_unstable(ctx => ctx.checked);\n const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n assertIsRefObject(treeItemRef);\n // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n assertIsRefObject(subtreeRef);\n\n const setActionsVisibleIfNotFromSubtree = React.useCallback(\n (event: MouseEvent \| FocusEvent) => {\n const isTargetFromSubtree = Boolean(\n subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n );\n if (!isTargetFromSubtree) {\n onActionVisibilityChange?.(event, {\n visible: true,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n if (event.defaultPrevented) {\n return;\n }\n setIsActionsVisible(true);\n }\n },\n [subtreeRef, setIsActionsVisible, onActionVisibilityChange],\n );\n\n const { targetDocument } = useFluent();\n const isNavigatingWithKeyboard = useIsNavigatingWithKeyboard();\n\n const setActionsInvisibleIfNotFromSubtree = React.useCallback(\n (event: FocusEvent \| MouseEvent) => {\n const isRelatedTargetFromActions = () =>\n Boolean(actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget as Node));\n const isRelatedTargetFromTreeItem = () =>\n Boolean(treeItemRef.current && elementContains(treeItemRef.current, event.relatedTarget as Node));\n const isTargetFromActions = () => Boolean(actionsRefInternal.current?.contains(event.target as Node));\n if (isRelatedTargetFromActions()) {\n onActionVisibilityChange?.(event, {\n visible: true,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n if (event.defaultPrevented) {\n return;\n }\n setIsActionsVisible(true);\n return;\n }\n if (isTargetFromActions() && isRelatedTargetFromTreeItem()) {\n return;\n }\n // when a mouseout event happens during keyboard interaction\n // we should not hide the actions if the activeElement is the treeitem or an action\n // as the focus on the treeitem takes precedence over the mouseout event\n if (\n event.type === 'mouseout' &&\n isNavigatingWithKeyboard() &&\n (targetDocument?.activeElement === treeItemRef.current \|\|\n elementContains(actionsRefInternal.current, targetDocument?.activeElement as Node))\n ) {\n return;\n }\n onActionVisibilityChange?.(event, {\n visible: false,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n if (event.defaultPrevented) {\n return;\n }\n setIsActionsVisible(false);\n },\n [setIsActionsVisible, onActionVisibilityChange, treeItemRef, isNavigatingWithKeyboard, targetDocument],\n );\n\n const expandIcon = slot.optional(props.expandIcon, {\n renderByDefault: isBranch,\n defaultProps: {\n children: <TreeItemChevron />,\n 'aria-hidden': true,\n },\n elementType: 'div',\n });\n const expandIconRefs = useMergedRefs(expandIcon?.ref, expandIconRef);\n if (expandIcon) {\n expandIcon.ref = expandIconRefs;\n }\n const arrowNavigationProps = useArrowNavigationGroup({ circular: navigationMode === 'tree', axis: 'horizontal' });\n const actions = isActionsVisible\n ? slot.optional(props.actions, {\n defaultProps: { ...arrowNavigationProps, role: 'toolbar' },\n elementType: 'div',\n })\n : undefined;\n delete actions?.visible;\n delete actions?.onVisibilityChange;\n\n const actionsRefs = useMergedRefs(actions?.ref, actionsRef, actionsRefInternal);\n const handleActionsBlur = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {\n if (isResolvedShorthand(props.actions)) {\n props.actions.onBlur?.(event);\n }\n const isRelatedTargetFromActions = Boolean(elementContains(event.currentTarget, event.relatedTarget as Node));\n onActionVisibilityChange?.(event, {\n visible: isRelatedTargetFromActions,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n setIsActionsVisible(isRelatedTargetFromActions);\n });\n if (actions) {\n actions.ref = actionsRefs;\n actions.onBlur = handleActionsBlur;\n }\n\n const hasActions = Boolean(props.actions);\n\n React.useEffect(() => {\n if (treeItemRef.current && hasActions) {\n const treeItemElement = treeItemRef.current;\n\n const handleMouseOver = setActionsVisibleIfNotFromSubtree;\n const handleMouseOut = setActionsInvisibleIfNotFromSubtree;\n const handleFocus = setActionsVisibleIfNotFromSubtree;\n const handleBlur = setActionsInvisibleIfNotFromSubtree;\n\n treeItemElement.addEventListener('mouseover', handleMouseOver);\n treeItemElement.addEventListener('mouseout', handleMouseOut);\n treeItemElement.addEventListener('focus', handleFocus);\n treeItemElement.addEventListener('blur', handleBlur);\n\n return () => {\n treeItemElement.removeEventListener('mouseover', handleMouseOver);\n treeItemElement.removeEventListener('mouseout', handleMouseOut);\n treeItemElement.removeEventListener('focus', handleFocus);\n treeItemElement.removeEventListener('blur', handleBlur);\n };\n }\n }, [hasActions, treeItemRef, setActionsVisibleIfNotFromSubtree, setActionsInvisibleIfNotFromSubtree]);\n\n return {\n components: {\n root: 'div',\n expandIcon: 'div',\n iconBefore: 'div',\n main: 'div',\n iconAfter: 'div',\n actions: 'div',\n aside: 'div',\n // Casting here to a union between checkbox and radio\n selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps \| RadioProps>,\n },\n buttonContextValue: { size: 'small' },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\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, layoutRef) as React.Ref<HTMLDivElement>,\n }),\n {\n elementType: 'div',\n },\n ),\n iconBefore: slot.optional(iconBefore, { elementType: 'div' }),\n main: slot.always(main, { elementType: 'div' }),\n iconAfter: slot.optional(iconAfter, { elementType: 'div' }),\n aside: !isActionsVisible ? slot.optional(props.aside, { elementType: 'div' }) : undefined,\n actions,\n expandIcon,\n selector: slot.optional(props.selector, {\n renderByDefault: selectionMode !== 'none',\n defaultProps: {\n checked,\n tabIndex: -1,\n 'aria-hidden': true,\n ref: selectionRef,\n // casting here to a union between checkbox and radio\n // since ref is not present on the selector signature\n // FIXME: look into Slot type to see if we can make this work\n } as CheckboxProps \| RadioProps,\n elementType: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<\n CheckboxProps \| RadioProps\n >,\n }),\n };\n};\n\nfunction assertIsRefObject<Value>(ref?: React.Ref<Value>): asserts ref is React.RefObject<Value> {\n if (process.env.NODE_ENV !== 'production') {\n if (typeof ref !== 'object' \|\| ref === null \|\| !('current' in ref)) {\n throw new Error(`\n @fluentui/react-tree [${useTreeItemLayout_unstable.name}]:\n Internal Error: contextual ref is not a RefObject! Please report this bug immediately, as contextual refs should be RefObjects.\n `);\n }\n }\n}\n"],"names":["React","getIntrinsicElementProps","isResolvedShorthand","useMergedRefs","slot","useEventCallback","elementContains","useControllableState","useTreeItemContext_unstable","useTreeContext_unstable","Checkbox","Radio","TreeItemChevron","useArrowNavigationGroup","useIsNavigatingWithKeyboard","useFluent_unstable","useFluent","useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","layoutRef","ctx","selectionMode","navigationMode","isActionsVisibleFromProps","onActionVisibilityChange","actions","visible","onVisibilityChange","undefined","isActionsVisible","setIsActionsVisible","state","initialState","selectionRef","expandIconRef","actionsRef","actionsRefInternal","useRef","treeItemRef","subtreeRef","checked","isBranch","itemType","assertIsRefObject","setActionsVisibleIfNotFromSubtree","useCallback","event","isTargetFromSubtree","Boolean","current","target","type","defaultPrevented","targetDocument","isNavigatingWithKeyboard","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","isRelatedTargetFromTreeItem","isTargetFromActions","contains","activeElement","expandIcon","optional","renderByDefault","defaultProps","children","elementType","expandIconRefs","arrowNavigationProps","circular","axis","role","actionsRefs","handleActionsBlur","onBlur","currentTarget","hasActions","useEffect","treeItemElement","handleMouseOver","handleMouseOut","handleFocus","handleBlur","addEventListener","removeEventListener","components","root","aside","selector","buttonContextValue","size","always","tabIndex","process","env","NODE_ENV","Error","name"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/TreeItemLayout/useTreeItemLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n getIntrinsicElementProps,\n isResolvedShorthand,\n useMergedRefs,\n slot,\n useEventCallback,\n elementContains,\n useControllableState,\n} from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport type {\n TreeItemLayoutActionSlotProps,\n TreeItemLayoutActionVisibilityChangeData,\n TreeItemLayoutProps,\n TreeItemLayoutState,\n} from './TreeItemLayout.types';\nimport type { CheckboxProps } from '@fluentui/react-checkbox';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport type { RadioProps } from '@fluentui/react-radio';\nimport { Radio } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup, useIsNavigatingWithKeyboard } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/*\n Create the state required to render TreeItemLayout.\n \n The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n \n @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n props: TreeItemLayoutProps,\n ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n 'use no memo';\n\n const { main, iconAfter, iconBefore } = props;\n\n const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n const navigationMode = useTreeContext_unstable(ctx => ctx.navigationMode ?? 'tree');\n\n const [isActionsVisibleFromProps, onActionVisibilityChange]: [\n TreeItemLayoutActionSlotProps['visible'],\n TreeItemLayoutActionSlotProps['onVisibilityChange'],\n ] = isResolvedShorthand(props.actions)\n ? // .visible .onVisibilityChange prop should not be propagated to the DOM\n [props.actions.visible, props.actions.onVisibilityChange]\n : [undefined, undefined];\n\n const [isActionsVisible, setIsActionsVisible] = useControllableState({\n state: isActionsVisibleFromProps,\n initialState: false,\n });\n\n const selectionRef = useTreeItemContext_unstable(ctx => ctx.selectionRef);\n const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n const actionsRef = useTreeItemContext_unstable(ctx => ctx.actionsRef);\n const actionsRefInternal = React.useRef<HTMLDivElement>(null);\n const treeItemRef = useTreeItemContext_unstable(ctx => ctx.treeItemRef);\n const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n const checked = useTreeItemContext_unstable(ctx => ctx.checked);\n const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n // eslint-disable-next-line react-hooks/refs\n assertIsRefObject(treeItemRef);\n // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n // eslint-disable-next-line react-hooks/refs\n assertIsRefObject(subtreeRef);\n\n const setActionsVisibleIfNotFromSubtree = React.useCallback(\n (event: MouseEvent \| FocusEvent) => {\n const isTargetFromSubtree = Boolean(\n subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n );\n if (!isTargetFromSubtree) {\n onActionVisibilityChange?.(event, {\n visible: true,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n if (event.defaultPrevented) {\n return;\n }\n setIsActionsVisible(true);\n }\n },\n [subtreeRef, setIsActionsVisible, onActionVisibilityChange],\n );\n\n const { targetDocument } = useFluent();\n const isNavigatingWithKeyboard = useIsNavigatingWithKeyboard();\n\n const setActionsInvisibleIfNotFromSubtree = React.useCallback(\n (event: FocusEvent \| MouseEvent) => {\n const isRelatedTargetFromActions = () =>\n Boolean(actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget as Node));\n const isRelatedTargetFromTreeItem = () =>\n Boolean(treeItemRef.current && elementContains(treeItemRef.current, event.relatedTarget as Node));\n const isTargetFromActions = () => Boolean(actionsRefInternal.current?.contains(event.target as Node));\n if (isRelatedTargetFromActions()) {\n onActionVisibilityChange?.(event, {\n visible: true,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n if (event.defaultPrevented) {\n return;\n }\n setIsActionsVisible(true);\n return;\n }\n if (isTargetFromActions() && isRelatedTargetFromTreeItem()) {\n return;\n }\n // when a mouseout event happens during keyboard interaction\n // we should not hide the actions if the activeElement is the treeitem or an action\n // as the focus on the treeitem takes precedence over the mouseout event\n if (\n event.type === 'mouseout' &&\n isNavigatingWithKeyboard() &&\n (targetDocument?.activeElement === treeItemRef.current \|\|\n elementContains(actionsRefInternal.current, targetDocument?.activeElement as Node))\n ) {\n return;\n }\n onActionVisibilityChange?.(event, {\n visible: false,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n if (event.defaultPrevented) {\n return;\n }\n setIsActionsVisible(false);\n },\n [setIsActionsVisible, onActionVisibilityChange, treeItemRef, isNavigatingWithKeyboard, targetDocument],\n );\n\n const expandIcon = slot.optional(props.expandIcon, {\n renderByDefault: isBranch,\n defaultProps: {\n children: <TreeItemChevron />,\n 'aria-hidden': true,\n },\n elementType: 'div',\n });\n const expandIconRefs = useMergedRefs(expandIcon?.ref, expandIconRef);\n if (expandIcon) {\n expandIcon.ref = expandIconRefs;\n }\n const arrowNavigationProps = useArrowNavigationGroup({ circular: navigationMode === 'tree', axis: 'horizontal' });\n const actions = isActionsVisible\n ? slot.optional(props.actions, {\n defaultProps: { ...arrowNavigationProps, role: 'toolbar' },\n elementType: 'div',\n })\n : undefined;\n delete actions?.visible;\n delete actions?.onVisibilityChange;\n\n const actionsRefs = useMergedRefs(actions?.ref, actionsRef, actionsRefInternal);\n const handleActionsBlur = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {\n if (isResolvedShorthand(props.actions)) {\n props.actions.onBlur?.(event);\n }\n const isRelatedTargetFromActions = Boolean(elementContains(event.currentTarget, event.relatedTarget as Node));\n onActionVisibilityChange?.(event, {\n visible: isRelatedTargetFromActions,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n setIsActionsVisible(isRelatedTargetFromActions);\n });\n if (actions) {\n actions.ref = actionsRefs;\n actions.onBlur = handleActionsBlur;\n }\n\n const hasActions = Boolean(props.actions);\n\n React.useEffect(() => {\n if (treeItemRef.current && hasActions) {\n const treeItemElement = treeItemRef.current;\n\n const handleMouseOver = setActionsVisibleIfNotFromSubtree;\n const handleMouseOut = setActionsInvisibleIfNotFromSubtree;\n const handleFocus = setActionsVisibleIfNotFromSubtree;\n const handleBlur = setActionsInvisibleIfNotFromSubtree;\n\n treeItemElement.addEventListener('mouseover', handleMouseOver);\n treeItemElement.addEventListener('mouseout', handleMouseOut);\n treeItemElement.addEventListener('focus', handleFocus);\n treeItemElement.addEventListener('blur', handleBlur);\n\n return () => {\n treeItemElement.removeEventListener('mouseover', handleMouseOver);\n treeItemElement.removeEventListener('mouseout', handleMouseOut);\n treeItemElement.removeEventListener('focus', handleFocus);\n treeItemElement.removeEventListener('blur', handleBlur);\n };\n }\n }, [hasActions, treeItemRef, setActionsVisibleIfNotFromSubtree, setActionsInvisibleIfNotFromSubtree]);\n\n return {\n components: {\n root: 'div',\n expandIcon: 'div',\n iconBefore: 'div',\n main: 'div',\n iconAfter: 'div',\n actions: 'div',\n aside: 'div',\n // Casting here to a union between checkbox and radio\n selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps \| RadioProps>,\n },\n buttonContextValue: { size: 'small' },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\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, layoutRef) as React.Ref<HTMLDivElement>,\n }),\n {\n elementType: 'div',\n },\n ),\n iconBefore: slot.optional(iconBefore, { elementType: 'div' }),\n main: slot.always(main, { elementType: 'div' }),\n iconAfter: slot.optional(iconAfter, { elementType: 'div' }),\n aside: !isActionsVisible ? slot.optional(props.aside, { elementType: 'div' }) : undefined,\n actions,\n expandIcon,\n selector: slot.optional(props.selector, {\n renderByDefault: selectionMode !== 'none',\n defaultProps: {\n checked,\n tabIndex: -1,\n 'aria-hidden': true,\n ref: selectionRef,\n // casting here to a union between checkbox and radio\n // since ref is not present on the selector signature\n // FIXME: look into Slot type to see if we can make this work\n } as CheckboxProps \| RadioProps,\n elementType: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<\n CheckboxProps \| RadioProps\n >,\n }),\n };\n};\n\nfunction assertIsRefObject<Value>(ref?: React.Ref<Value>): asserts ref is React.RefObject<Value> {\n if (process.env.NODE_ENV !== 'production') {\n if (typeof ref !== 'object' \|\| ref === null \|\| !('current' in ref)) {\n throw new Error(`\n @fluentui/react-tree [${useTreeItemLayout_unstable.name}]:\n Internal Error: contextual ref is not a RefObject! Please report this bug immediately, as contextual refs should be RefObjects.\n `);\n }\n }\n}\n"],"names":["React","getIntrinsicElementProps","isResolvedShorthand","useMergedRefs","slot","useEventCallback","elementContains","useControllableState","useTreeItemContext_unstable","useTreeContext_unstable","Checkbox","Radio","TreeItemChevron","useArrowNavigationGroup","useIsNavigatingWithKeyboard","useFluent_unstable","useFluent","useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","layoutRef","ctx","selectionMode","navigationMode","isActionsVisibleFromProps","onActionVisibilityChange","actions","visible","onVisibilityChange","undefined","isActionsVisible","setIsActionsVisible","state","initialState","selectionRef","expandIconRef","actionsRef","actionsRefInternal","useRef","treeItemRef","subtreeRef","checked","isBranch","itemType","assertIsRefObject","setActionsVisibleIfNotFromSubtree","useCallback","event","isTargetFromSubtree","Boolean","current","target","type","defaultPrevented","targetDocument","isNavigatingWithKeyboard","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","isRelatedTargetFromTreeItem","isTargetFromActions","contains","activeElement","expandIcon","optional","renderByDefault","defaultProps","children","elementType","expandIconRefs","arrowNavigationProps","circular","axis","role","actionsRefs","handleActionsBlur","onBlur","currentTarget","hasActions","useEffect","treeItemElement","handleMouseOver","handleMouseOut","handleFocus","handleBlur","addEventListener","removeEventListener","components","root","aside","selector","buttonContextValue","size","always","tabIndex","process","env","NODE_ENV","Error","name"],"mappings":"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"}

package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js CHANGED Viewed

@@ -122,24 +122,32 @@ export const useTreeItemLayoutStyles_unstable = state => {
   const size = useTreeContext_unstable(ctx => ctx.size);
   const appearance = useTreeContext_unstable(ctx => ctx.appearance);
   const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);
+  // eslint-disable-next-line react-hooks/immutability
   root.className = mergeClasses(treeItemLayoutClassNames.root, rootBaseStyles, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);
+  // eslint-disable-next-line react-hooks/immutability
   main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);
   if (expandIcon) {
+    // eslint-disable-next-line react-hooks/immutability
     expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconBaseStyles, expandIcon.className);
   }
   if (iconBefore) {
+    // eslint-disable-next-line react-hooks/immutability
     iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconBaseStyles, iconBeforeStyles[size], iconBefore.className);
   }
   if (iconAfter) {
+    // eslint-disable-next-line react-hooks/immutability
     iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconBaseStyles, iconAfterStyles[size], iconAfter.className);
   }
   if (actions) {
+    // eslint-disable-next-line react-hooks/immutability
     actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);
   }
   if (aside) {
+    // eslint-disable-next-line react-hooks/immutability
     aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);
   }
   if (selector) {
+    // eslint-disable-next-line react-hooks/immutability
     selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);
   }
   return state;

package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","iconBefore","main","iconAfter","expandIcon","aside","actions","selector","useRootBaseStyles","useRootStyles","leaf","uwmqm3","branch","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","sshi5w","subtle","Jwef8y","ecr2s2","transparent","De3pzq","d","h","a","useActionsBaseStyles","useAsideBaseStyles","useExpandIconBaseStyles","useMainBaseStyles","useIconBaseStyles","useIconBeforeStyles","z189sj","useIconAfterStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","rootBaseStyles","actionsBaseStyles","asideBaseStyles","mainBaseStyles","expandIconBaseStyles","iconBaseStyles","iconBeforeStyles","iconAfterStyles","size","ctx","appearance","itemType","className"],"sources":["useTreeItemLayoutStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemLayoutClassNames = {\n root: 'fui-TreeItemLayout',\n iconBefore: 'fui-TreeItemLayout__iconBefore',\n main: 'fui-TreeItemLayout__main',\n iconAfter: 'fui-TreeItemLayout__iconAfter',\n expandIcon: 'fui-TreeItemLayout__expandIcon',\n aside: 'fui-TreeItemLayout__aside',\n actions: 'fui-TreeItemLayout__actions',\n selector: 'fui-TreeItemLayout__selector'\n};\nconst useRootBaseStyles = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridArea: 'layout',\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Hover\n }\n },\n ':active': {\n color: tokens.colorNeutralForeground2Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Pressed\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 medium: {\n ...typographyStyles.body1\n },\n small: {\n minHeight: '24px',\n ...typographyStyles.caption1\n },\n // Appearance variations\n subtle: {},\n 'subtle-alpha': {\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed\n }\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed\n }\n }\n});\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 gridArea: 'aside',\n 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 gridArea: 'aside',\n padding: `0 ${tokens.spacingHorizontalM}`,\n 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 flex: `0 0 auto`,\n padding: `${tokens.spacingVerticalXS} 0`\n});\n/\n Styles for the content slot\n / const useMainBaseStyles = makeResetStyles({\n padding: `0 ${tokens.spacingHorizontalXXS}`\n});\n/\n Styles for the before/after icon slot\n / const useIconBaseStyles = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n color: tokens.colorNeutralForeground2,\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500\n});\nconst useIconBeforeStyles = makeStyles({\n medium: {\n paddingRight: tokens.spacingHorizontalXS\n },\n small: {\n paddingRight: tokens.spacingHorizontalXXS\n }\n});\nconst useIconAfterStyles = makeStyles({\n medium: {\n paddingLeft: tokens.spacingHorizontalXS\n },\n small: {\n paddingLeft: tokens.spacingHorizontalXXS\n }\n});\n/\n Apply styling to the TreeItemLayout slots based on the state\n */ export const useTreeItemLayoutStyles_unstable = (state)=>{\n 'use no memo';\n const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;\n const rootStyles = useRootStyles();\n const rootBaseStyles = useRootBaseStyles();\n const actionsBaseStyles = useActionsBaseStyles();\n const asideBaseStyles = useAsideBaseStyles();\n const mainBaseStyles = useMainBaseStyles();\n const expandIconBaseStyles = useExpandIconBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const iconBeforeStyles = useIconBeforeStyles();\n const iconAfterStyles = useIconAfterStyles();\n const size = useTreeContext_unstable((ctx)=>ctx.size);\n const appearance = useTreeContext_unstable((ctx)=>ctx.appearance);\n const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n root.className = mergeClasses(treeItemLayoutClassNames.root, rootBaseStyles, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);\n main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);\n if (expandIcon) {\n expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconBaseStyles, expandIcon.className);\n }\n if (iconBefore) {\n iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconBaseStyles, iconBeforeStyles[size], iconBefore.className);\n }\n if (iconAfter) {\n iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconBaseStyles, iconAfterStyles[size], iconAfter.className);\n }\n if (actions) {\n actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);\n }\n if (aside) {\n aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);\n }\n if (selector) {\n selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","iconBefore","main","iconAfter","expandIcon","aside","actions","selector","useRootBaseStyles","useRootStyles","leaf","uwmqm3","branch","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","sshi5w","subtle","Jwef8y","ecr2s2","transparent","De3pzq","d","h","a","useActionsBaseStyles","useAsideBaseStyles","useExpandIconBaseStyles","useMainBaseStyles","useIconBaseStyles","useIconBeforeStyles","z189sj","useIconAfterStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","rootBaseStyles","actionsBaseStyles","asideBaseStyles","mainBaseStyles","expandIconBaseStyles","iconBaseStyles","iconBeforeStyles","iconAfterStyles","size","ctx","appearance","itemType","className"],"sources":["useTreeItemLayoutStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemLayoutClassNames = {\n root: 'fui-TreeItemLayout',\n iconBefore: 'fui-TreeItemLayout__iconBefore',\n main: 'fui-TreeItemLayout__main',\n iconAfter: 'fui-TreeItemLayout__iconAfter',\n expandIcon: 'fui-TreeItemLayout__expandIcon',\n aside: 'fui-TreeItemLayout__aside',\n actions: 'fui-TreeItemLayout__actions',\n selector: 'fui-TreeItemLayout__selector'\n};\nconst useRootBaseStyles = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridArea: 'layout',\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Hover\n }\n },\n ':active': {\n color: tokens.colorNeutralForeground2Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Pressed\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 medium: {\n ...typographyStyles.body1\n },\n small: {\n minHeight: '24px',\n ...typographyStyles.caption1\n },\n // Appearance variations\n subtle: {},\n 'subtle-alpha': {\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed\n }\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed\n }\n }\n});\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 gridArea: 'aside',\n 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 gridArea: 'aside',\n padding: `0 ${tokens.spacingHorizontalM}`,\n 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 flex: `0 0 auto`,\n padding: `${tokens.spacingVerticalXS} 0`\n});\n/\n Styles for the content slot\n / const useMainBaseStyles = makeResetStyles({\n padding: `0 ${tokens.spacingHorizontalXXS}`\n});\n/\n Styles for the before/after icon slot\n / const useIconBaseStyles = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n color: tokens.colorNeutralForeground2,\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500\n});\nconst useIconBeforeStyles = makeStyles({\n medium: {\n paddingRight: tokens.spacingHorizontalXS\n },\n small: {\n paddingRight: tokens.spacingHorizontalXXS\n }\n});\nconst useIconAfterStyles = makeStyles({\n medium: {\n paddingLeft: tokens.spacingHorizontalXS\n },\n small: {\n paddingLeft: tokens.spacingHorizontalXXS\n }\n});\n/\n Apply styling to the TreeItemLayout slots based on the state\n */ export const useTreeItemLayoutStyles_unstable = (state)=>{\n 'use no memo';\n const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;\n const rootStyles = useRootStyles();\n const rootBaseStyles = useRootBaseStyles();\n const actionsBaseStyles = useActionsBaseStyles();\n const asideBaseStyles = useAsideBaseStyles();\n const mainBaseStyles = useMainBaseStyles();\n const expandIconBaseStyles = useExpandIconBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const iconBeforeStyles = useIconBeforeStyles();\n const iconAfterStyles = useIconAfterStyles();\n const size = useTreeContext_unstable((ctx)=>ctx.size);\n const appearance = useTreeContext_unstable((ctx)=>ctx.appearance);\n const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n // eslint-disable-next-line react-hooks/immutability\n root.className = mergeClasses(treeItemLayoutClassNames.root, rootBaseStyles, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);\n // eslint-disable-next-line react-hooks/immutability\n main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);\n if (expandIcon) {\n // eslint-disable-next-line react-hooks/immutability\n expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconBaseStyles, expandIcon.className);\n }\n if (iconBefore) {\n // eslint-disable-next-line react-hooks/immutability\n iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconBaseStyles, iconBeforeStyles[size], iconBefore.className);\n }\n if (iconAfter) {\n // eslint-disable-next-line react-hooks/immutability\n iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconBaseStyles, iconAfterStyles[size], iconAfter.className);\n }\n if (actions) {\n // eslint-disable-next-line react-hooks/immutability\n actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);\n }\n if (aside) {\n // eslint-disable-next-line react-hooks/immutability\n aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);\n }\n if (selector) {\n // eslint-disable-next-line react-hooks/immutability\n selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.raw.js CHANGED Viewed

@@ -153,24 +153,32 @@ const useIconAfterStyles = makeStyles({
     const size = useTreeContext_unstable((ctx)=>ctx.size);
     const appearance = useTreeContext_unstable((ctx)=>ctx.appearance);
     const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);
+    // eslint-disable-next-line react-hooks/immutability
     root.className = mergeClasses(treeItemLayoutClassNames.root, rootBaseStyles, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);
+    // eslint-disable-next-line react-hooks/immutability
     main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);
     if (expandIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconBaseStyles, expandIcon.className);
     }
     if (iconBefore) {
+        // eslint-disable-next-line react-hooks/immutability
         iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconBaseStyles, iconBeforeStyles[size], iconBefore.className);
     }
     if (iconAfter) {
+        // eslint-disable-next-line react-hooks/immutability
         iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconBaseStyles, iconAfterStyles[size], iconAfter.className);
     }
     if (actions) {
+        // eslint-disable-next-line react-hooks/immutability
         actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);
     }
     if (aside) {
+        // eslint-disable-next-line react-hooks/immutability
         aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);
     }
     if (selector) {
+        // eslint-disable-next-line react-hooks/immutability
         selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);
     }
     return state;

package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\n\nexport const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots> = {\n root: 'fui-TreeItemLayout',\n iconBefore: 'fui-TreeItemLayout__iconBefore',\n main: 'fui-TreeItemLayout__main',\n iconAfter: 'fui-TreeItemLayout__iconAfter',\n expandIcon: 'fui-TreeItemLayout__expandIcon',\n aside: 'fui-TreeItemLayout__aside',\n actions: 'fui-TreeItemLayout__actions',\n selector: 'fui-TreeItemLayout__selector',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridArea: 'layout',\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Hover,\n },\n },\n ':active': {\n color: tokens.colorNeutralForeground2Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n },\n },\n});\n\n/*\n Styles for the root slot\n /\nconst 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 medium: {\n ...typographyStyles.body1,\n },\n small: {\n minHeight: '24px',\n ...typographyStyles.caption1,\n },\n // Appearance variations\n subtle: {},\n 'subtle-alpha': {\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n});\n\n/*\n Styles for the action icon slot\n /\nconst useActionsBaseStyles = makeResetStyles({\n display: 'flex',\n marginLeft: 'auto',\n position: 'relative',\n zIndex: 1,\n gridArea: 'aside',\n padding: `0 ${tokens.spacingHorizontalS}`,\n});\n/\n Styles for the action icon slot\n /\nconst useAsideBaseStyles = makeResetStyles({\n display: 'flex',\n marginLeft: 'auto',\n alignItems: 'center',\n zIndex: 0,\n gridArea: 'aside',\n padding: `0 ${tokens.spacingHorizontalM}`,\n gap: tokens.spacingHorizontalXS,\n});\n\n/\n Styles for the expand icon slot\n /\nconst useExpandIconBaseStyles = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minWidth: '24px',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3,\n flex: `0 0 auto`,\n padding: `${tokens.spacingVerticalXS} 0`,\n});\n\n/\n Styles for the content slot\n /\nconst useMainBaseStyles = makeResetStyles({\n padding: `0 ${tokens.spacingHorizontalXXS}`,\n});\n\n/\n Styles for the before/after icon slot\n /\nconst useIconBaseStyles = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n color: tokens.colorNeutralForeground2,\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500,\n});\n\nconst useIconBeforeStyles = makeStyles({\n medium: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n small: {\n paddingRight: tokens.spacingHorizontalXXS,\n },\n});\n\nconst useIconAfterStyles = makeStyles({\n medium: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n small: {\n paddingLeft: tokens.spacingHorizontalXXS,\n },\n});\n\n/\n Apply styling to the TreeItemLayout slots based on the state\n */\nexport const useTreeItemLayoutStyles_unstable = (state: TreeItemLayoutState): TreeItemLayoutState => {\n 'use no memo';\n\n const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;\n const rootStyles = useRootStyles();\n const rootBaseStyles = useRootBaseStyles();\n const actionsBaseStyles = useActionsBaseStyles();\n const asideBaseStyles = useAsideBaseStyles();\n\n const mainBaseStyles = useMainBaseStyles();\n\n const expandIconBaseStyles = useExpandIconBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const iconBeforeStyles = useIconBeforeStyles();\n const iconAfterStyles = useIconAfterStyles();\n\n const size = useTreeContext_unstable(ctx => ctx.size);\n const appearance = useTreeContext_unstable(ctx => ctx.appearance);\n const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n\n root.className = mergeClasses(\n treeItemLayoutClassNames.root,\n rootBaseStyles,\n rootStyles[appearance],\n rootStyles[size],\n rootStyles[itemType],\n root.className,\n );\n\n main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);\n\n if (expandIcon) {\n expandIcon.className = mergeClasses(\n treeItemLayoutClassNames.expandIcon,\n expandIconBaseStyles,\n expandIcon.className,\n );\n }\n\n if (iconBefore) {\n iconBefore.className = mergeClasses(\n treeItemLayoutClassNames.iconBefore,\n iconBaseStyles,\n iconBeforeStyles[size],\n iconBefore.className,\n );\n }\n\n if (iconAfter) {\n iconAfter.className = mergeClasses(\n treeItemLayoutClassNames.iconAfter,\n iconBaseStyles,\n iconAfterStyles[size],\n iconAfter.className,\n );\n }\n\n if (actions) {\n actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);\n }\n if (aside) {\n aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);\n }\n if (selector) {\n selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","iconBefore","main","iconAfter","expandIcon","aside","actions","selector","useRootBaseStyles","display","alignItems","minHeight","boxSizing","gridArea","color","colorNeutralForeground2Hover","backgroundColor","colorSubtleBackgroundHover","colorNeutralForeground3Hover","colorNeutralForeground2Pressed","colorSubtleBackgroundPressed","colorNeutralForeground3Pressed","useRootStyles","leaf","paddingLeft","spacingHorizontalXXL","branch","medium","body1","small","caption1","subtle","colorSubtleBackgroundLightAlphaHover","colorSubtleBackgroundLightAlphaPressed","transparent","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","useActionsBaseStyles","marginLeft","position","zIndex","padding","spacingHorizontalS","useAsideBaseStyles","spacingHorizontalM","gap","spacingHorizontalXS","useExpandIconBaseStyles","justifyContent","minWidth","colorNeutralForeground3","flex","spacingVerticalXS","useMainBaseStyles","spacingHorizontalXXS","useIconBaseStyles","colorNeutralForeground2","lineHeight","lineHeightBase500","fontSize","fontSizeBase500","useIconBeforeStyles","paddingRight","useIconAfterStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","rootBaseStyles","actionsBaseStyles","asideBaseStyles","mainBaseStyles","expandIconBaseStyles","iconBaseStyles","iconBeforeStyles","iconAfterStyles","size","ctx","appearance","itemType","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,kBAAkB,QAAQ,qBAAqB;AACxD,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,YAAY;IACZC,MAAM;IACNC,WAAW;IACXC,YAAY;IACZC,OAAO;IACPC,SAAS;IACTC,UAAU;AACZ,EAAE;AAEF,MAAMC,oBAAoBjB,gBAAgB;IACxCkB,SAAS;IACTC,YAAY;IACZC,WAAW;IACXC,WAAW;IACXC,UAAU;IACV,UAAU;QACRC,OAAOpB,OAAOqB,4BAA4B;QAC1CC,iBAAiBtB,OAAOuB,0BAA0B;QAClD,oEAAoE;QACpE,CAAC,CAAC,GAAG,EAAElB,yBAAyBK,UAAU,EAAE,CAAC,EAAE;YAC7CU,OAAOpB,OAAOwB,4BAA4B;QAC5C;IACF;IACA,WAAW;QACTJ,OAAOpB,OAAOyB,8BAA8B;QAC5CH,iBAAiBtB,OAAO0B,4BAA4B;QACpD,mEAAmE;QACnE,CAAC,CAAC,GAAG,EAAErB,yBAAyBK,UAAU,EAAE,CAAC,EAAE;YAC7CU,OAAOpB,OAAO2B,8BAA8B;QAC9C;IACF;AACF;AAEA;;CAEC,GACD,MAAMC,gBAAgB9B,WAAW;IAC/B+B,MAAM;QACJC,aAAa,CAAC,SAAS,EAAE3B,mBAAmB,OAAO,EAAEH,OAAO+B,oBAAoB,CAAC,CAAC,CAAC;IACrF;IACAC,QAAQ;QACNF,aAAa,CAAC,UAAU,EAAE3B,mBAAmB,YAAY,EAAEH,OAAO+B,oBAAoB,CAAC,CAAC,CAAC;IAC3F;IACAE,QAAQ;QACN,GAAGhC,iBAAiBiC,KAAK;IAC3B;IACAC,OAAO;QACLlB,WAAW;QACX,GAAGhB,iBAAiBmC,QAAQ;IAC9B;IACA,wBAAwB;IACxBC,QAAQ,CAAC;IACT,gBAAgB;QACd,UAAU;YACRf,iBAAiBtB,OAAOsC,oCAAoC;QAC9D;QACA,WAAW;YACThB,iBAAiBtB,OAAOuC,sCAAsC;QAChE;IACF;IACAC,aAAa;QACXlB,iBAAiBtB,OAAOyC,0BAA0B;QAClD,UAAU;YACRnB,iBAAiBtB,OAAO0C,+BAA+B;QACzD;QACA,WAAW;YACTpB,iBAAiBtB,OAAO2C,iCAAiC;QAC3D;IACF;AACF;AAEA;;CAEC,GACD,MAAMC,uBAAuB/C,gBAAgB;IAC3CkB,SAAS;IACT8B,YAAY;IACZC,UAAU;IACVC,QAAQ;IACR5B,UAAU;IACV6B,SAAS,CAAC,EAAE,EAAEhD,OAAOiD,kBAAkB,EAAE;AAC3C;AACA;;CAEC,GACD,MAAMC,qBAAqBrD,gBAAgB;IACzCkB,SAAS;IACT8B,YAAY;IACZ7B,YAAY;IACZ+B,QAAQ;IACR5B,UAAU;IACV6B,SAAS,CAAC,EAAE,EAAEhD,OAAOmD,kBAAkB,EAAE;IACzCC,KAAKpD,OAAOqD,mBAAmB;AACjC;AAEA;;CAEC,GACD,MAAMC,0BAA0BzD,gBAAgB;IAC9CkB,SAAS;IACTC,YAAY;IACZuC,gBAAgB;IAChBC,UAAU;IACVtC,WAAW;IACXE,OAAOpB,OAAOyD,uBAAuB;IACrCC,MAAM,CAAC,QAAQ,CAAC;IAChBV,SAAS,GAAGhD,OAAO2D,iBAAiB,CAAC,EAAE,CAAC;AAC1C;AAEA;;CAEC,GACD,MAAMC,oBAAoB/D,gBAAgB;IACxCmD,SAAS,CAAC,EAAE,EAAEhD,OAAO6D,oBAAoB,EAAE;AAC7C;AAEA;;CAEC,GACD,MAAMC,oBAAoBjE,gBAAgB;IACxCkB,SAAS;IACTC,YAAY;IACZI,OAAOpB,OAAO+D,uBAAuB;IACrCC,YAAYhE,OAAOiE,iBAAiB;IACpCC,UAAUlE,OAAOmE,eAAe;AAClC;AAEA,MAAMC,sBAAsBtE,WAAW;IACrCmC,QAAQ;QACNoC,cAAcrE,OAAOqD,mBAAmB;IAC1C;IACAlB,OAAO;QACLkC,cAAcrE,OAAO6D,oBAAoB;IAC3C;AACF;AAEA,MAAMS,qBAAqBxE,WAAW;IACpCmC,QAAQ;QACNH,aAAa9B,OAAOqD,mBAAmB;IACzC;IACAlB,OAAO;QACLL,aAAa9B,OAAO6D,oBAAoB;IAC1C;AACF;AAEA;;CAEC,GACD,OAAO,MAAMU,mCAAmC,CAACC;IAC/C;IAEA,MAAM,EAAEhE,IAAI,EAAEC,SAAS,EAAEF,UAAU,EAAEG,UAAU,EAAEJ,IAAI,EAAEK,KAAK,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAG2D;IACpF,MAAMC,aAAa7C;IACnB,MAAM8C,iBAAiB5D;IACvB,MAAM6D,oBAAoB/B;IAC1B,MAAMgC,kBAAkB1B;IAExB,MAAM2B,iBAAiBjB;IAEvB,MAAMkB,uBAAuBxB;IAC7B,MAAMyB,iBAAiBjB;IACvB,MAAMkB,mBAAmBZ;IACzB,MAAMa,kBAAkBX;IAExB,MAAMY,OAAOhF,wBAAwBiF,CAAAA,MAAOA,IAAID,IAAI;IACpD,MAAME,aAAalF,wBAAwBiF,CAAAA,MAAOA,IAAIC,UAAU;IAChE,MAAMC,WAAWjF,4BAA4B+E,CAAAA,MAAOA,IAAIE,QAAQ;IAEhE/E,KAAKgF,SAAS,GAAGvF,aACfM,yBAAyBC,IAAI,EAC7BoE,gBACAD,UAAU,CAACW,WAAW,EACtBX,UAAU,CAACS,KAAK,EAChBT,UAAU,CAACY,SAAS,EACpB/E,KAAKgF,SAAS;IAGhB9E,KAAK8E,SAAS,GAAGvF,aAAaM,yBAAyBG,IAAI,EAAEqE,gBAAgBrE,KAAK8E,SAAS;IAE3F,IAAI5E,YAAY;QACdA,WAAW4E,SAAS,GAAGvF,aACrBM,yBAAyBK,UAAU,EACnCoE,sBACApE,WAAW4E,SAAS;IAExB;IAEA,IAAI/E,YAAY;QACdA,WAAW+E,SAAS,GAAGvF,aACrBM,yBAAyBE,UAAU,EACnCwE,gBACAC,gBAAgB,CAACE,KAAK,EACtB3E,WAAW+E,SAAS;IAExB;IAEA,IAAI7E,WAAW;QACbA,UAAU6E,SAAS,GAAGvF,aACpBM,yBAAyBI,SAAS,EAClCsE,gBACAE,eAAe,CAACC,KAAK,EACrBzE,UAAU6E,SAAS;IAEvB;IAEA,IAAI1E,SAAS;QACXA,QAAQ0E,SAAS,GAAGvF,aAAaM,yBAAyBO,OAAO,EAAE+D,mBAAmB/D,QAAQ0E,SAAS;IACzG;IACA,IAAI3E,OAAO;QACTA,MAAM2E,SAAS,GAAGvF,aAAaM,yBAAyBM,KAAK,EAAEiE,iBAAiBjE,MAAM2E,SAAS;IACjG;IACA,IAAIzE,UAAU;QACZA,SAASyE,SAAS,GAAGvF,aAAaM,yBAAyBQ,QAAQ,EAAEA,SAASyE,SAAS;IACzF;IAEA,OAAOd;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\n\nexport const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots> = {\n root: 'fui-TreeItemLayout',\n iconBefore: 'fui-TreeItemLayout__iconBefore',\n main: 'fui-TreeItemLayout__main',\n iconAfter: 'fui-TreeItemLayout__iconAfter',\n expandIcon: 'fui-TreeItemLayout__expandIcon',\n aside: 'fui-TreeItemLayout__aside',\n actions: 'fui-TreeItemLayout__actions',\n selector: 'fui-TreeItemLayout__selector',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridArea: 'layout',\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Hover,\n },\n },\n ':active': {\n color: tokens.colorNeutralForeground2Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n },\n },\n});\n\n/*\n Styles for the root slot\n /\nconst 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 medium: {\n ...typographyStyles.body1,\n },\n small: {\n minHeight: '24px',\n ...typographyStyles.caption1,\n },\n // Appearance variations\n subtle: {},\n 'subtle-alpha': {\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n});\n\n/*\n Styles for the action icon slot\n /\nconst useActionsBaseStyles = makeResetStyles({\n display: 'flex',\n marginLeft: 'auto',\n position: 'relative',\n zIndex: 1,\n gridArea: 'aside',\n padding: `0 ${tokens.spacingHorizontalS}`,\n});\n/\n Styles for the action icon slot\n /\nconst useAsideBaseStyles = makeResetStyles({\n display: 'flex',\n marginLeft: 'auto',\n alignItems: 'center',\n zIndex: 0,\n gridArea: 'aside',\n padding: `0 ${tokens.spacingHorizontalM}`,\n gap: tokens.spacingHorizontalXS,\n});\n\n/\n Styles for the expand icon slot\n /\nconst useExpandIconBaseStyles = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minWidth: '24px',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3,\n flex: `0 0 auto`,\n padding: `${tokens.spacingVerticalXS} 0`,\n});\n\n/\n Styles for the content slot\n /\nconst useMainBaseStyles = makeResetStyles({\n padding: `0 ${tokens.spacingHorizontalXXS}`,\n});\n\n/\n Styles for the before/after icon slot\n /\nconst useIconBaseStyles = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n color: tokens.colorNeutralForeground2,\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500,\n});\n\nconst useIconBeforeStyles = makeStyles({\n medium: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n small: {\n paddingRight: tokens.spacingHorizontalXXS,\n },\n});\n\nconst useIconAfterStyles = makeStyles({\n medium: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n small: {\n paddingLeft: tokens.spacingHorizontalXXS,\n },\n});\n\n/\n Apply styling to the TreeItemLayout slots based on the state\n */\nexport const useTreeItemLayoutStyles_unstable = (state: TreeItemLayoutState): TreeItemLayoutState => {\n 'use no memo';\n\n const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;\n const rootStyles = useRootStyles();\n const rootBaseStyles = useRootBaseStyles();\n const actionsBaseStyles = useActionsBaseStyles();\n const asideBaseStyles = useAsideBaseStyles();\n\n const mainBaseStyles = useMainBaseStyles();\n\n const expandIconBaseStyles = useExpandIconBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const iconBeforeStyles = useIconBeforeStyles();\n const iconAfterStyles = useIconAfterStyles();\n\n const size = useTreeContext_unstable(ctx => ctx.size);\n const appearance = useTreeContext_unstable(ctx => ctx.appearance);\n const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n\n // eslint-disable-next-line react-hooks/immutability\n root.className = mergeClasses(\n treeItemLayoutClassNames.root,\n rootBaseStyles,\n rootStyles[appearance],\n rootStyles[size],\n rootStyles[itemType],\n root.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);\n\n if (expandIcon) {\n // eslint-disable-next-line react-hooks/immutability\n expandIcon.className = mergeClasses(\n treeItemLayoutClassNames.expandIcon,\n expandIconBaseStyles,\n expandIcon.className,\n );\n }\n\n if (iconBefore) {\n // eslint-disable-next-line react-hooks/immutability\n iconBefore.className = mergeClasses(\n treeItemLayoutClassNames.iconBefore,\n iconBaseStyles,\n iconBeforeStyles[size],\n iconBefore.className,\n );\n }\n\n if (iconAfter) {\n // eslint-disable-next-line react-hooks/immutability\n iconAfter.className = mergeClasses(\n treeItemLayoutClassNames.iconAfter,\n iconBaseStyles,\n iconAfterStyles[size],\n iconAfter.className,\n );\n }\n\n if (actions) {\n // eslint-disable-next-line react-hooks/immutability\n actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);\n }\n if (aside) {\n // eslint-disable-next-line react-hooks/immutability\n aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);\n }\n if (selector) {\n // eslint-disable-next-line react-hooks/immutability\n selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","iconBefore","main","iconAfter","expandIcon","aside","actions","selector","useRootBaseStyles","display","alignItems","minHeight","boxSizing","gridArea","color","colorNeutralForeground2Hover","backgroundColor","colorSubtleBackgroundHover","colorNeutralForeground3Hover","colorNeutralForeground2Pressed","colorSubtleBackgroundPressed","colorNeutralForeground3Pressed","useRootStyles","leaf","paddingLeft","spacingHorizontalXXL","branch","medium","body1","small","caption1","subtle","colorSubtleBackgroundLightAlphaHover","colorSubtleBackgroundLightAlphaPressed","transparent","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","useActionsBaseStyles","marginLeft","position","zIndex","padding","spacingHorizontalS","useAsideBaseStyles","spacingHorizontalM","gap","spacingHorizontalXS","useExpandIconBaseStyles","justifyContent","minWidth","colorNeutralForeground3","flex","spacingVerticalXS","useMainBaseStyles","spacingHorizontalXXS","useIconBaseStyles","colorNeutralForeground2","lineHeight","lineHeightBase500","fontSize","fontSizeBase500","useIconBeforeStyles","paddingRight","useIconAfterStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","rootBaseStyles","actionsBaseStyles","asideBaseStyles","mainBaseStyles","expandIconBaseStyles","iconBaseStyles","iconBeforeStyles","iconAfterStyles","size","ctx","appearance","itemType","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,kBAAkB,QAAQ,qBAAqB;AACxD,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,YAAY;IACZC,MAAM;IACNC,WAAW;IACXC,YAAY;IACZC,OAAO;IACPC,SAAS;IACTC,UAAU;AACZ,EAAE;AAEF,MAAMC,oBAAoBjB,gBAAgB;IACxCkB,SAAS;IACTC,YAAY;IACZC,WAAW;IACXC,WAAW;IACXC,UAAU;IACV,UAAU;QACRC,OAAOpB,OAAOqB,4BAA4B;QAC1CC,iBAAiBtB,OAAOuB,0BAA0B;QAClD,oEAAoE;QACpE,CAAC,CAAC,GAAG,EAAElB,yBAAyBK,UAAU,EAAE,CAAC,EAAE;YAC7CU,OAAOpB,OAAOwB,4BAA4B;QAC5C;IACF;IACA,WAAW;QACTJ,OAAOpB,OAAOyB,8BAA8B;QAC5CH,iBAAiBtB,OAAO0B,4BAA4B;QACpD,mEAAmE;QACnE,CAAC,CAAC,GAAG,EAAErB,yBAAyBK,UAAU,EAAE,CAAC,EAAE;YAC7CU,OAAOpB,OAAO2B,8BAA8B;QAC9C;IACF;AACF;AAEA;;CAEC,GACD,MAAMC,gBAAgB9B,WAAW;IAC/B+B,MAAM;QACJC,aAAa,CAAC,SAAS,EAAE3B,mBAAmB,OAAO,EAAEH,OAAO+B,oBAAoB,CAAC,CAAC,CAAC;IACrF;IACAC,QAAQ;QACNF,aAAa,CAAC,UAAU,EAAE3B,mBAAmB,YAAY,EAAEH,OAAO+B,oBAAoB,CAAC,CAAC,CAAC;IAC3F;IACAE,QAAQ;QACN,GAAGhC,iBAAiBiC,KAAK;IAC3B;IACAC,OAAO;QACLlB,WAAW;QACX,GAAGhB,iBAAiBmC,QAAQ;IAC9B;IACA,wBAAwB;IACxBC,QAAQ,CAAC;IACT,gBAAgB;QACd,UAAU;YACRf,iBAAiBtB,OAAOsC,oCAAoC;QAC9D;QACA,WAAW;YACThB,iBAAiBtB,OAAOuC,sCAAsC;QAChE;IACF;IACAC,aAAa;QACXlB,iBAAiBtB,OAAOyC,0BAA0B;QAClD,UAAU;YACRnB,iBAAiBtB,OAAO0C,+BAA+B;QACzD;QACA,WAAW;YACTpB,iBAAiBtB,OAAO2C,iCAAiC;QAC3D;IACF;AACF;AAEA;;CAEC,GACD,MAAMC,uBAAuB/C,gBAAgB;IAC3CkB,SAAS;IACT8B,YAAY;IACZC,UAAU;IACVC,QAAQ;IACR5B,UAAU;IACV6B,SAAS,CAAC,EAAE,EAAEhD,OAAOiD,kBAAkB,EAAE;AAC3C;AACA;;CAEC,GACD,MAAMC,qBAAqBrD,gBAAgB;IACzCkB,SAAS;IACT8B,YAAY;IACZ7B,YAAY;IACZ+B,QAAQ;IACR5B,UAAU;IACV6B,SAAS,CAAC,EAAE,EAAEhD,OAAOmD,kBAAkB,EAAE;IACzCC,KAAKpD,OAAOqD,mBAAmB;AACjC;AAEA;;CAEC,GACD,MAAMC,0BAA0BzD,gBAAgB;IAC9CkB,SAAS;IACTC,YAAY;IACZuC,gBAAgB;IAChBC,UAAU;IACVtC,WAAW;IACXE,OAAOpB,OAAOyD,uBAAuB;IACrCC,MAAM,CAAC,QAAQ,CAAC;IAChBV,SAAS,GAAGhD,OAAO2D,iBAAiB,CAAC,EAAE,CAAC;AAC1C;AAEA;;CAEC,GACD,MAAMC,oBAAoB/D,gBAAgB;IACxCmD,SAAS,CAAC,EAAE,EAAEhD,OAAO6D,oBAAoB,EAAE;AAC7C;AAEA;;CAEC,GACD,MAAMC,oBAAoBjE,gBAAgB;IACxCkB,SAAS;IACTC,YAAY;IACZI,OAAOpB,OAAO+D,uBAAuB;IACrCC,YAAYhE,OAAOiE,iBAAiB;IACpCC,UAAUlE,OAAOmE,eAAe;AAClC;AAEA,MAAMC,sBAAsBtE,WAAW;IACrCmC,QAAQ;QACNoC,cAAcrE,OAAOqD,mBAAmB;IAC1C;IACAlB,OAAO;QACLkC,cAAcrE,OAAO6D,oBAAoB;IAC3C;AACF;AAEA,MAAMS,qBAAqBxE,WAAW;IACpCmC,QAAQ;QACNH,aAAa9B,OAAOqD,mBAAmB;IACzC;IACAlB,OAAO;QACLL,aAAa9B,OAAO6D,oBAAoB;IAC1C;AACF;AAEA;;CAEC,GACD,OAAO,MAAMU,mCAAmC,CAACC;IAC/C;IAEA,MAAM,EAAEhE,IAAI,EAAEC,SAAS,EAAEF,UAAU,EAAEG,UAAU,EAAEJ,IAAI,EAAEK,KAAK,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAG2D;IACpF,MAAMC,aAAa7C;IACnB,MAAM8C,iBAAiB5D;IACvB,MAAM6D,oBAAoB/B;IAC1B,MAAMgC,kBAAkB1B;IAExB,MAAM2B,iBAAiBjB;IAEvB,MAAMkB,uBAAuBxB;IAC7B,MAAMyB,iBAAiBjB;IACvB,MAAMkB,mBAAmBZ;IACzB,MAAMa,kBAAkBX;IAExB,MAAMY,OAAOhF,wBAAwBiF,CAAAA,MAAOA,IAAID,IAAI;IACpD,MAAME,aAAalF,wBAAwBiF,CAAAA,MAAOA,IAAIC,UAAU;IAChE,MAAMC,WAAWjF,4BAA4B+E,CAAAA,MAAOA,IAAIE,QAAQ;IAEhE,oDAAoD;IACpD/E,KAAKgF,SAAS,GAAGvF,aACfM,yBAAyBC,IAAI,EAC7BoE,gBACAD,UAAU,CAACW,WAAW,EACtBX,UAAU,CAACS,KAAK,EAChBT,UAAU,CAACY,SAAS,EACpB/E,KAAKgF,SAAS;IAGhB,oDAAoD;IACpD9E,KAAK8E,SAAS,GAAGvF,aAAaM,yBAAyBG,IAAI,EAAEqE,gBAAgBrE,KAAK8E,SAAS;IAE3F,IAAI5E,YAAY;QACd,oDAAoD;QACpDA,WAAW4E,SAAS,GAAGvF,aACrBM,yBAAyBK,UAAU,EACnCoE,sBACApE,WAAW4E,SAAS;IAExB;IAEA,IAAI/E,YAAY;QACd,oDAAoD;QACpDA,WAAW+E,SAAS,GAAGvF,aACrBM,yBAAyBE,UAAU,EACnCwE,gBACAC,gBAAgB,CAACE,KAAK,EACtB3E,WAAW+E,SAAS;IAExB;IAEA,IAAI7E,WAAW;QACb,oDAAoD;QACpDA,UAAU6E,SAAS,GAAGvF,aACpBM,yBAAyBI,SAAS,EAClCsE,gBACAE,eAAe,CAACC,KAAK,EACrBzE,UAAU6E,SAAS;IAEvB;IAEA,IAAI1E,SAAS;QACX,oDAAoD;QACpDA,QAAQ0E,SAAS,GAAGvF,aAAaM,yBAAyBO,OAAO,EAAE+D,mBAAmB/D,QAAQ0E,SAAS;IACzG;IACA,IAAI3E,OAAO;QACT,oDAAoD;QACpDA,MAAM2E,SAAS,GAAGvF,aAAaM,yBAAyBM,KAAK,EAAEiE,iBAAiBjE,MAAM2E,SAAS;IACjG;IACA,IAAIzE,UAAU;QACZ,oDAAoD;QACpDA,SAASyE,SAAS,GAAGvF,aAAaM,yBAAyBQ,QAAQ,EAAEA,SAASyE,SAAS;IACzF;IAEA,OAAOd;AACT,EAAE"}

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

@@ -105,24 +105,32 @@ export const useTreeItemPersonaLayoutStyles_unstable = state => {
   const size = useTreeContext_unstable(ctx => ctx.size);
   const appearance = useTreeContext_unstable(ctx => ctx.appearance);
   const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootBaseStyles, rootStyles[itemType], rootStyles[appearance], rootStyles[size], state.root.className);
+  // eslint-disable-next-line react-hooks/immutability
   state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);
   if (state.main) {
+    // eslint-disable-next-line react-hooks/immutability
     state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainBaseStyles, state.description && mainStyles.withDescription, state.main.className);
   }
   if (state.description) {
+    // eslint-disable-next-line react-hooks/immutability
     state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionBaseStyles, state.description.className);
   }
   if (state.actions) {
+    // eslint-disable-next-line react-hooks/immutability
     state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsBaseStyles, state.actions.className);
   }
   if (state.aside) {
+    // eslint-disable-next-line react-hooks/immutability
     state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);
   }
   if (state.expandIcon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconBaseStyles, state.expandIcon.className);
   }
   if (state.selector) {
+    // eslint-disable-next-line react-hooks/immutability
     state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);
   }
   return state;