npm - @fluentui/react-tree - Versions diffs - 9.10.9 → 9.10.11 - Mend

@fluentui/react-tree 9.10.9 → 9.10.11

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 (6) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,48 @@
 # Change Log - @fluentui/react-tree
-This log was last generated on Thu, 24 Apr 2025 09:56:28 GMT and should not be manually modified.
+This log was last generated on Fri, 06 Jun 2025 13:10:55 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.10.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.10.11)
+Fri, 06 Jun 2025 13:10:55 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.10.10..@fluentui/react-tree_v9.10.11)
+### Patches
+- chore: re-introduce active state style to TreeItemLayout ([PR #34558](https://github.com/microsoft/fluentui/pull/34558) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-aria to v9.14.8 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
+- Bump @fluentui/react-avatar to v9.7.8 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
+- Bump @fluentui/react-button to v9.4.8 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
+- Bump @fluentui/react-checkbox to v9.3.8 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.77 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.5.1 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
+- Bump @fluentui/react-motion to v9.7.4 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
+- Bump @fluentui/react-radio to v9.3.8 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
+- Bump @fluentui/react-tabster to v9.24.8 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
+- Bump @fluentui/react-utilities to v9.20.0 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.55 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
+## [9.10.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.10.10)
+Wed, 14 May 2025 18:49:20 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.10.9..@fluentui/react-tree_v9.10.10)
+### Patches
+- Bump @fluentui/react-aria to v9.14.7 ([PR #34438](https://github.com/microsoft/fluentui/pull/34438) by beachball)
+- Bump @fluentui/react-avatar to v9.7.7 ([PR #34438](https://github.com/microsoft/fluentui/pull/34438) by beachball)
+- Bump @fluentui/react-button to v9.4.7 ([PR #34438](https://github.com/microsoft/fluentui/pull/34438) by beachball)
+- Bump @fluentui/react-checkbox to v9.3.7 ([PR #34438](https://github.com/microsoft/fluentui/pull/34438) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.5.0 ([PR #34438](https://github.com/microsoft/fluentui/pull/34438) by beachball)
+- Bump @fluentui/react-motion to v9.7.3 ([PR #34438](https://github.com/microsoft/fluentui/pull/34438) by beachball)
+- Bump @fluentui/react-radio to v9.3.7 ([PR #34438](https://github.com/microsoft/fluentui/pull/34438) by beachball)
+- Bump @fluentui/react-tabster to v9.24.7 ([PR #34438](https://github.com/microsoft/fluentui/pull/34438) by beachball)
 ## [9.10.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.10.9)
-Thu, 24 Apr 2025 09:56:28 GMT
+Thu, 24 Apr 2025 09:59:45 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.10.8..@fluentui/react-tree_v9.10.9)
 ### Patches

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

@@ -13,7 +13,7 @@ export const treeItemLayoutClassNames = {
   actions: 'fui-TreeItemLayout__actions',
   selector: 'fui-TreeItemLayout__selector'
 };
-const useRootBaseStyles = /*#__PURE__*/__resetStyles("r1bx0xiv", null, [".r1bx0xiv{display:flex;align-items:center;min-height:32px;box-sizing:border-box;grid-area:layout;}", ".r1bx0xiv:active{color:var(--colorNeutralForeground2Pressed);background-color:var(--colorSubtleBackgroundPressed);}", ".r1bx0xiv:active .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}", ".r1bx0xiv:hover{color:var(--colorNeutralForeground2Hover);background-color:var(--colorSubtleBackgroundHover);}", ".r1bx0xiv:hover .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}"]);
+const useRootBaseStyles = /*#__PURE__*/__resetStyles("ryb8khq", null, [".ryb8khq{display:flex;align-items:center;min-height:32px;box-sizing:border-box;grid-area:layout;}", ".ryb8khq:hover{color:var(--colorNeutralForeground2Hover);background-color:var(--colorSubtleBackgroundHover);}", ".ryb8khq:hover .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}", ".ryb8khq:active{color:var(--colorNeutralForeground2Pressed);background-color:var(--colorSubtleBackgroundPressed);}", ".ryb8khq:active .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}"]);
 /**
  * Styles for the root slot
  */

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":["import { 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 ':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 ':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});\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":["import { 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":[]}

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

@@ -29,12 +29,12 @@ const treeItemLayoutClassNames = {
     actions: 'fui-TreeItemLayout__actions',
     selector: 'fui-TreeItemLayout__selector'
 };
-const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1bx0xiv", null, [
-    ".r1bx0xiv{display:flex;align-items:center;min-height:32px;box-sizing:border-box;grid-area:layout;}",
-    ".r1bx0xiv:active{color:var(--colorNeutralForeground2Pressed);background-color:var(--colorSubtleBackgroundPressed);}",
-    ".r1bx0xiv:active .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}",
-    ".r1bx0xiv:hover{color:var(--colorNeutralForeground2Hover);background-color:var(--colorSubtleBackgroundHover);}",
-    ".r1bx0xiv:hover .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}"
+const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("ryb8khq", null, [
+    ".ryb8khq{display:flex;align-items:center;min-height:32px;box-sizing:border-box;grid-area:layout;}",
+    ".ryb8khq:hover{color:var(--colorNeutralForeground2Hover);background-color:var(--colorSubtleBackgroundHover);}",
+    ".ryb8khq:hover .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}",
+    ".ryb8khq:active{color:var(--colorNeutralForeground2Pressed);background-color:var(--colorSubtleBackgroundPressed);}",
+    ".ryb8khq:active .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}"
 ]);
 /**
  * Styles for the root slot

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useTreeItemLayoutStyles.styles.js"],"sourcesContent":["import { 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 ':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 ':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});\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"],"names":["treeItemLayoutClassNames","useTreeItemLayoutStyles_unstable","root","iconBefore","main","iconAfter","expandIcon","aside","actions","selector","useRootBaseStyles","__resetStyles","useRootStyles","__styles","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","state","rootStyles","rootBaseStyles","actionsBaseStyles","asideBaseStyles","mainBaseStyles","expandIconBaseStyles","iconBaseStyles","iconBeforeStyles","iconAfterStyles","size","useTreeContext_unstable","ctx","appearance","itemType","useTreeItemContext_unstable","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,wBAAwB;eAAxBA;;IAsIIC,gCAAgC;eAAhCA;;;uBA3IyC;6BAElB;iCAEI;AACrC,MAAMD,2BAA2B;IACpCE,MAAM;IACNC,YAAY;IACZC,MAAM;IACNC,WAAW;IACXC,YAAY;IACZC,OAAO;IACPC,SAAS;IACTC,UAAU;AACd;AACA,MAAMC,oBAAiB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,YAAA,MAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CAsBzB;AACD;;CAEA,GAAI,MAAMC,gBAAa,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,QAAA;QAAAD,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAE,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAC,OAAA;QAAAC,QAAA;QAAAL,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAG,QAAA,CAAA;IAAA,gBAAA;QAAAC,QAAA;QAAAC,QAAA;IAAA;IAAAC,aAAA;QAAAC,QAAA;QAAAH,QAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAG,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;KAAA;AAAA;AAkC1B;;CAEA,GAAI,MAAMC,uBAAoB,WAAA,GAAGrB,IAAAA,oBAAA,EAAA,WAAA,YAAA;IAAA;IAAA;CAOhC;AACD;;CAEA,GAAI,MAAMsB,qBAAkB,WAAA,GAAGtB,IAAAA,oBAAA,EAAA,YAAA,WAAA;IAAA;IAAA;CAQ9B;AACD;;CAEA,GAAI,MAAMuB,0BAAuB,WAAA,GAAGvB,IAAAA,oBAAA,EAAA,WAAA,MAAA;IAAA;CASnC;AACD;;CAEA,GAAI,MAAMwB,oBAAiB,WAAA,GAAGxB,IAAAA,oBAAA,EAAA,WAAA,MAAA;IAAA;CAE7B;AACD;;CAEA,GAAI,MAAMyB,oBAAiB,WAAA,GAAGzB,IAAAA,oBAAA,EAAA,WAAA,MAAA;IAAA;CAM7B;AACD,MAAM0B,sBAAmB,WAAA,GAAGxB,IAAAA,eAAA,EAAA;IAAAI,QAAA;QAAAqB,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAhB,OAAA;QAAAgB,QAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAT,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAQ5B,MAAMU,qBAAkB,WAAA,GAAG1B,IAAAA,eAAA,EAAA;IAAAI,QAAA;QAAAF,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAO,OAAA;QAAAP,QAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAc,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAUhB,MAAM5B,mCAAoCuC,CAAAA;IACjD;IACA,MAAM,EAAEpC,IAAI,EAAEC,SAAS,EAAEF,UAAU,EAAEG,UAAU,EAAEJ,IAAI,EAAEK,KAAK,EAAEC,OAAO,EAAEC,QAAAA,EAAU,GAAG+B;IACpF,MAAMC,aAAa7B;IACnB,MAAM8B,iBAAiBhC;IACvB,MAAMiC,oBAAoBX;IAC1B,MAAMY,kBAAkBX;IACxB,MAAMY,iBAAiBV;IACvB,MAAMW,uBAAuBZ;IAC7B,MAAMa,iBAAiBX;IACvB,MAAMY,mBAAmBX;IACzB,MAAMY,kBAAkBV;IACxB,MAAMW,OAAOC,IAAAA,oCAAuB,EAAEC,CAAAA,MAAMA,IAAIF,IAAI;IACpD,MAAMG,aAAaF,IAAAA,oCAAuB,EAAEC,CAAAA,MAAMA,IAAIC,UAAU;IAChE,MAAMC,WAAWC,IAAAA,4CAA2B,EAAEH,CAAAA,MAAMA,IAAIE,QAAQ;IAChEpD,KAAKsD,SAAS,GAAGC,IAAAA,mBAAY,EAACzD,yBAAyBE,IAAI,EAAEwC,gBAAgBD,UAAU,CAACY,WAAW,EAAEZ,UAAU,CAACS,KAAK,EAAET,UAAU,CAACa,SAAS,EAAEpD,KAAKsD,SAAS;IAC3JpD,KAAKoD,SAAS,GAAGC,IAAAA,mBAAY,EAACzD,yBAAyBI,IAAI,EAAEyC,gBAAgBzC,KAAKoD,SAAS;IAC3F,IAAIlD,YAAY;QACZA,WAAWkD,SAAS,GAAGC,IAAAA,mBAAY,EAACzD,yBAAyBM,UAAU,EAAEwC,sBAAsBxC,WAAWkD,SAAS;IACvH;IACA,IAAIrD,YAAY;QACZA,WAAWqD,SAAS,GAAGC,IAAAA,mBAAY,EAACzD,yBAAyBG,UAAU,EAAE4C,gBAAgBC,gBAAgB,CAACE,KAAK,EAAE/C,WAAWqD,SAAS;IACzI;IACA,IAAInD,WAAW;QACXA,UAAUmD,SAAS,GAAGC,IAAAA,mBAAY,EAACzD,yBAAyBK,SAAS,EAAE0C,gBAAgBE,eAAe,CAACC,KAAK,EAAE7C,UAAUmD,SAAS;IACrI;IACA,IAAIhD,SAAS;QACTA,QAAQgD,SAAS,GAAGC,IAAAA,mBAAY,EAACzD,yBAAyBQ,OAAO,EAAEmC,mBAAmBnC,QAAQgD,SAAS;IAC3G;IACA,IAAIjD,OAAO;QACPA,MAAMiD,SAAS,GAAGC,IAAAA,mBAAY,EAACzD,yBAAyBO,KAAK,EAAEqC,iBAAiBrC,MAAMiD,SAAS;IACnG;IACA,IAAI/C,UAAU;QACVA,SAAS+C,SAAS,GAAGC,IAAAA,mBAAY,EAACzD,yBAAyBS,QAAQ,EAAEA,SAAS+C,SAAS;IAC3F;IACA,OAAOhB;AACX"}
1	+ {"version":3,"sources":["useTreeItemLayoutStyles.styles.js"],"sourcesContent":["import { 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"],"names":["treeItemLayoutClassNames","useTreeItemLayoutStyles_unstable","root","iconBefore","main","iconAfter","expandIcon","aside","actions","selector","useRootBaseStyles","__resetStyles","useRootStyles","__styles","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","state","rootStyles","rootBaseStyles","actionsBaseStyles","asideBaseStyles","mainBaseStyles","expandIconBaseStyles","iconBaseStyles","iconBeforeStyles","iconAfterStyles","size","useTreeContext_unstable","ctx","appearance","itemType","useTreeItemContext_unstable","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tree",
-  "version": "9.10.9",
+  "version": "9.10.11",
   "description": "Tree component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -21,20 +21,20 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-aria": "^9.14.6",
-    "@fluentui/react-avatar": "^9.7.6",
-    "@fluentui/react-button": "^9.4.6",
-    "@fluentui/react-checkbox": "^9.3.6",
-    "@fluentui/react-context-selector": "^9.1.76",
+    "@fluentui/react-aria": "^9.14.8",
+    "@fluentui/react-avatar": "^9.7.8",
+    "@fluentui/react-button": "^9.4.8",
+    "@fluentui/react-checkbox": "^9.3.8",
+    "@fluentui/react-context-selector": "^9.1.77",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-motion-components-preview": "^0.4.9",
-    "@fluentui/react-motion": "^9.7.2",
-    "@fluentui/react-radio": "^9.3.6",
+    "@fluentui/react-motion-components-preview": "^0.5.1",
+    "@fluentui/react-motion": "^9.7.4",
+    "@fluentui/react-radio": "^9.3.8",
     "@fluentui/react-shared-contexts": "^9.23.1",
-    "@fluentui/react-tabster": "^9.24.6",
+    "@fluentui/react-tabster": "^9.24.8",
     "@fluentui/react-theme": "^9.1.24",
-    "@fluentui/react-utilities": "^9.19.0",
-    "@fluentui/react-jsx-runtime": "^9.0.54",
+    "@fluentui/react-utilities": "^9.20.0",
+    "@fluentui/react-jsx-runtime": "^9.0.55",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },