@fluentui/react-tree 9.0.0-beta.29 → 9.0.0-beta.30

package/CHANGELOG.json

@@ -2,7 +2,108 @@
   "name": "@fluentui/react-tree",
   "entries": [
     {
-      "date": "Tue, 01 Aug 2023 10:14:28 GMT",
+      "date": "Fri, 04 Aug 2023 08:48:23 GMT",
+      "tag": "@fluentui/react-tree_v9.0.0-beta.30",
+      "version": "9.0.0-beta.30",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "8f41df31be3a4bc203c496eb1183884d30e12031",
+            "comment": "bugfix: renames content slot to main"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "a5aa130c959a79a9c4cffcffdb9253e8d1ce4d0a",
+            "comment": "feat: converts actions to be a toolbar"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-aria to v9.3.28",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-avatar to v9.5.17",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-button to v9.3.27",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-checkbox to v9.1.28",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.27",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-portal to v9.3.5",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-radio to v9.1.28",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.1",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-tabster to v9.12.0",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-theme to v9.1.10",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-utilities to v9.11.0",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tree",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.13",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          }
+        ],
+        "none": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-tree",
+            "commit": "4b802ba3745dde01c68224329c1414f077faa1db",
+            "comment": "chore: adds bundle size metrics"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 01 Aug 2023 10:17:20 GMT",
       "tag": "@fluentui/react-tree_v9.0.0-beta.29",
       "version": "9.0.0-beta.29",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @fluentui/react-tree
 
-This log was last generated on Tue, 01 Aug 2023 10:14:28 GMT and should not be manually modified.
+This log was last generated on Fri, 04 Aug 2023 08:48:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.30](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.30)
+
+Fri, 04 Aug 2023 08:48:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.29..@fluentui/react-tree_v9.0.0-beta.30)
+
+### Changes
+
+- bugfix: renames content slot to main ([PR #28695](https://github.com/microsoft/fluentui/pull/28695) by bernardo.sunderhus@gmail.com)
+- feat: converts actions to be a toolbar ([PR #28719](https://github.com/microsoft/fluentui/pull/28719) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-aria to v9.3.28 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-avatar to v9.5.17 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-button to v9.3.27 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-checkbox to v9.1.28 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.27 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-portal to v9.3.5 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-radio to v9.1.28 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.1 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-tabster to v9.12.0 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-theme to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-utilities to v9.11.0 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.13 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+
 ## [9.0.0-beta.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.0.0-beta.29)
 
-Tue, 01 Aug 2023 10:14:28 GMT 
+Tue, 01 Aug 2023 10:17:20 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.0.0-beta.28..@fluentui/react-tree_v9.0.0-beta.29)
 
 ### Changes

package/dist/index.d.ts

@@ -461,7 +461,7 @@ export declare type TreeItemLayoutSlots = {
     /**
      * Content. Children of the root slot are automatically rendered here
      */
-    content: NonNullable<Slot<'div'>>;
+    main: NonNullable<Slot<'div'>>;
     /**
      * Icon slot that renders right before main content
      */
@@ -525,7 +525,7 @@ export declare type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'acti
     /**
      * Content. Children of the root slot are automatically rendered here
      */
-    content: NonNullable<Slot<'div'>>;
+    main: NonNullable<Slot<'div'>>;
     /**
      * Secondary text that describes or complements the content
      */

package/lib/components/TreeItemLayout/TreeItemLayout.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TreeItemLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\n\nexport type TreeItemLayoutSlots = {\n  root: Slot<'div'>;\n  /**\n   * Content. Children of the root slot are automatically rendered here\n   */\n  content: NonNullable<Slot<'div'>>;\n  /**\n   * Icon slot that renders right before main content\n   */\n  iconBefore?: Slot<'div'>;\n  /**\n   * Icon slot that renders right after main content\n   */\n  iconAfter?: Slot<'div'>;\n  /**\n   * Expand icon slot,\n   * by default renders a chevron icon to indicate opening and closing\n   */\n  expandIcon?: Slot<'div'>;\n  aside?: Slot<'div'>;\n  /**\n   * actionable elements are normally buttons, menus, or other focusable elements.\n   * Those elements are only visibly available if the given tree item is currently active.\n   */\n  actions?: Slot<\n    ExtractSlotProps<\n      Slot<'div'> & {\n        /**\n         * Forces visibility of the aside/action content\n         */\n        visible?: boolean;\n      }\n    >\n  >;\n  selector?: Slot<typeof Checkbox> | Slot<typeof Radio>;\n};\n\n/**\n * TreeItemLayout Props\n */\nexport type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemLayout\n */\nexport type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {\n  buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAoDE"}
+{"version":3,"sources":["TreeItemLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\n\nexport type TreeItemLayoutSlots = {\n  root: Slot<'div'>;\n  /**\n   * Content. Children of the root slot are automatically rendered here\n   */\n  main: NonNullable<Slot<'div'>>;\n  /**\n   * Icon slot that renders right before main content\n   */\n  iconBefore?: Slot<'div'>;\n  /**\n   * Icon slot that renders right after main content\n   */\n  iconAfter?: Slot<'div'>;\n  /**\n   * Expand icon slot,\n   * by default renders a chevron icon to indicate opening and closing\n   */\n  expandIcon?: Slot<'div'>;\n  aside?: Slot<'div'>;\n  /**\n   * actionable elements are normally buttons, menus, or other focusable elements.\n   * Those elements are only visibly available if the given tree item is currently active.\n   */\n  actions?: Slot<\n    ExtractSlotProps<\n      Slot<'div'> & {\n        /**\n         * Forces visibility of the aside/action content\n         */\n        visible?: boolean;\n      }\n    >\n  >;\n  selector?: Slot<typeof Checkbox> | Slot<typeof Radio>;\n};\n\n/**\n * TreeItemLayout Props\n */\nexport type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemLayout\n */\nexport type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {\n  buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAoDE"}

package/lib/components/TreeItemLayout/renderTreeItemLayout.js

@@ -5,7 +5,7 @@ import { ButtonContextProvider } from '@fluentui/react-button';
  * Render the final JSX of TreeItemLayout
  */ export const renderTreeItemLayout_unstable = (state)=>{
     const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), slots.selector && /*#__PURE__*/ createElement(slots.selector, slotProps.selector), slots.iconBefore && /*#__PURE__*/ createElement(slots.iconBefore, slotProps.iconBefore), /*#__PURE__*/ createElement(slots.content, slotProps.content, slotProps.root.children), slots.iconAfter && /*#__PURE__*/ createElement(slots.iconAfter, slotProps.iconAfter), /*#__PURE__*/ createElement(ButtonContextProvider, {
+    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), slots.selector && /*#__PURE__*/ createElement(slots.selector, slotProps.selector), slots.iconBefore && /*#__PURE__*/ createElement(slots.iconBefore, slotProps.iconBefore), /*#__PURE__*/ createElement(slots.main, slotProps.main, slotProps.root.children), slots.iconAfter && /*#__PURE__*/ createElement(slots.iconAfter, slotProps.iconAfter), /*#__PURE__*/ createElement(ButtonContextProvider, {
         value: state.buttonContextValue
     }, slots.actions && /*#__PURE__*/ createElement(slots.actions, slotProps.actions), slots.aside && /*#__PURE__*/ createElement(slots.aside, slotProps.aside)));
 };

package/lib/components/TreeItemLayout/renderTreeItemLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderTreeItemLayout.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutState, TreeItemLayoutSlots } from './TreeItemLayout.types';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemLayout\n */\nexport const renderTreeItemLayout_unstable = (state: TreeItemLayoutState) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemLayoutSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n      {slots.selector && <slots.selector {...slotProps.selector} />}\n      {slots.iconBefore && <slots.iconBefore {...slotProps.iconBefore} />}\n      <slots.content {...slotProps.content}>{slotProps.root.children}</slots.content>\n      {slots.iconAfter && <slots.iconAfter {...slotProps.iconAfter} />}\n      <ButtonContextProvider value={state.buttonContextValue}>\n        {slots.actions && <slots.actions {...slotProps.actions} />}\n        {slots.aside && <slots.aside {...slotProps.aside} />}\n      </ButtonContextProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","ButtonContextProvider","renderTreeItemLayout_unstable","state","slots","slotProps","root","expandIcon","selector","iconBefore","content","children","iconAfter","value","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,QAA+B;IAC3E,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGL,aAAkCG;IAE/D,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,UAAU,kBAAI,AAf3B,cAe4BH,MAAMG,UAAU,EAAKF,UAAUE,UAAU,GAC9DH,MAAMI,QAAQ,kBAAI,AAhBzB,cAgB0BJ,MAAMI,QAAQ,EAAKH,UAAUG,QAAQ,GACxDJ,MAAMK,UAAU,kBAAI,AAjB3B,cAiB4BL,MAAMK,UAAU,EAAKJ,UAAUI,UAAU,iBAC/D,AAlBN,cAkBOL,MAAMM,OAAO,EAAKL,UAAUK,OAAO,EAAGL,UAAUC,IAAI,CAACK,QAAQ,GAC7DP,MAAMQ,SAAS,kBAAI,AAnB1B,cAmB2BR,MAAMQ,SAAS,EAAKP,UAAUO,SAAS,iBAC5D,AApBN,cAoBOX;QAAsBY,OAAOV,MAAMW,kBAAkB;OACnDV,MAAMW,OAAO,kBAAI,AArB1B,cAqB2BX,MAAMW,OAAO,EAAKV,UAAUU,OAAO,GACrDX,MAAMY,KAAK,kBAAI,AAtBxB,cAsByBZ,MAAMY,KAAK,EAAKX,UAAUW,KAAK;AAIxD,EAAE"}
+{"version":3,"sources":["renderTreeItemLayout.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutState, TreeItemLayoutSlots } from './TreeItemLayout.types';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemLayout\n */\nexport const renderTreeItemLayout_unstable = (state: TreeItemLayoutState) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemLayoutSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n      {slots.selector && <slots.selector {...slotProps.selector} />}\n      {slots.iconBefore && <slots.iconBefore {...slotProps.iconBefore} />}\n      <slots.main {...slotProps.main}>{slotProps.root.children}</slots.main>\n      {slots.iconAfter && <slots.iconAfter {...slotProps.iconAfter} />}\n      <ButtonContextProvider value={state.buttonContextValue}>\n        {slots.actions && <slots.actions {...slotProps.actions} />}\n        {slots.aside && <slots.aside {...slotProps.aside} />}\n      </ButtonContextProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","ButtonContextProvider","renderTreeItemLayout_unstable","state","slots","slotProps","root","expandIcon","selector","iconBefore","main","children","iconAfter","value","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,QAA+B;IAC3E,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGL,aAAkCG;IAE/D,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,UAAU,kBAAI,AAf3B,cAe4BH,MAAMG,UAAU,EAAKF,UAAUE,UAAU,GAC9DH,MAAMI,QAAQ,kBAAI,AAhBzB,cAgB0BJ,MAAMI,QAAQ,EAAKH,UAAUG,QAAQ,GACxDJ,MAAMK,UAAU,kBAAI,AAjB3B,cAiB4BL,MAAMK,UAAU,EAAKJ,UAAUI,UAAU,iBAC/D,AAlBN,cAkBOL,MAAMM,IAAI,EAAKL,UAAUK,IAAI,EAAGL,UAAUC,IAAI,CAACK,QAAQ,GACvDP,MAAMQ,SAAS,kBAAI,AAnB1B,cAmB2BR,MAAMQ,SAAS,EAAKP,UAAUO,SAAS,iBAC5D,AApBN,cAoBOX;QAAsBY,OAAOV,MAAMW,kBAAkB;OACnDV,MAAMW,OAAO,kBAAI,AArB1B,cAqB2BX,MAAMW,OAAO,EAAKV,UAAUU,OAAO,GACrDX,MAAMY,KAAK,kBAAI,AAtBxB,cAsByBZ,MAAMY,KAAK,EAAKX,UAAUW,KAAK;AAIxD,EAAE"}

package/lib/components/TreeItemLayout/useTreeItemLayout.js

@@ -4,6 +4,7 @@ import { useTreeItemContext_unstable, useTreeContext_unstable } from '../../cont
 import { Checkbox } from '@fluentui/react-checkbox';
 import { Radio } from '@fluentui/react-radio';
 import { TreeItemChevron } from '../TreeItemChevron';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 /**
  * Create the state required to render TreeItemLayout.
  *
@@ -13,7 +14,7 @@ import { TreeItemChevron } from '../TreeItemChevron';
  * @param props - props from this instance of TreeItemLayout
  * @param ref - reference to root HTMLElement of TreeItemLayout
  */ export const useTreeItemLayout_unstable = (props, ref)=>{
-    const { content , iconAfter , iconBefore , as ='span'  } = props;
+    const { main , iconAfter , iconBefore , as ='span'  } = props;
     const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);
     const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);
     const [isActionsVisibleExternal, actionsShorthand] = isResolvedShorthand(props.actions) ? [
@@ -45,7 +46,16 @@ import { TreeItemChevron } from '../TreeItemChevron';
     if (expandIcon) {
         expandIcon.ref = expandIconRefs;
     }
-    const actions = isActionsVisible ? resolveShorthand(actionsShorthand) : undefined;
+    const arrowNavigationProps = useArrowNavigationGroup({
+        circular: true,
+        axis: 'horizontal'
+    });
+    const actions = isActionsVisible ? resolveShorthand(actionsShorthand, {
+        defaultProps: {
+            ...arrowNavigationProps,
+            role: 'toolbar'
+        }
+    }) : undefined;
     const actionsRefs = useMergedRefs(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef);
     if (actions) {
         actions.ref = actionsRefs;
@@ -55,7 +65,7 @@ import { TreeItemChevron } from '../TreeItemChevron';
             root: 'div',
             expandIcon: 'div',
             iconBefore: 'div',
-            content: 'div',
+            main: 'div',
             iconAfter: 'div',
             actions: 'div',
             aside: 'div',
@@ -74,7 +84,7 @@ import { TreeItemChevron } from '../TreeItemChevron';
                 'aria-hidden': true
             }
         }),
-        content: resolveShorthand(content, {
+        main: resolveShorthand(main, {
             required: true
         }),
         iconAfter: resolveShorthand(iconAfter, {

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\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  const { content, iconAfter, iconBefore, as = 'span' } = props;\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n  const [isActionsVisibleExternal, actionsShorthand]: [boolean | undefined, TreeItemLayoutSlots['actions']] =\n    isResolvedShorthand(props.actions)\n      ? // .visible prop should not be propagated to the DOM\n        [props.actions.visible, { ...props.actions, visible: undefined }]\n      : [undefined, props.actions];\n\n  const isActionsVisible = useTreeItemContext_unstable(ctx => ctx.isActionsVisible) || isActionsVisibleExternal;\n  const isAsideVisible = useTreeItemContext_unstable(ctx => ctx.isAsideVisible);\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 checked = useTreeItemContext_unstable(ctx => ctx.checked ?? false);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n  const expandIcon = resolveShorthand(props.expandIcon, {\n    required: isBranch,\n    defaultProps: {\n      children: <TreeItemChevron />,\n      'aria-hidden': true,\n    },\n  });\n\n  const expandIconRefs = useMergedRefs(expandIcon?.ref, expandIconRef);\n  if (expandIcon) {\n    expandIcon.ref = expandIconRefs;\n  }\n\n  const actions = isActionsVisible ? resolveShorthand(actionsShorthand) : undefined;\n\n  const actionsRefs = useMergedRefs(actions?.ref, actionsRef);\n  if (actions) {\n    actions.ref = actionsRefs;\n  }\n\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      content: '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: getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }),\n    iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),\n    content: resolveShorthand(content, { required: true }),\n    iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),\n    aside: isAsideVisible ? resolveShorthand(props.aside) : undefined,\n    actions,\n    expandIcon,\n    selector: resolveShorthand(props.selector, {\n      required: selectionMode !== 'none',\n      defaultProps: {\n        checked,\n        tabIndex: -1,\n        'aria-hidden': true,\n        ref: selectionRef,\n      },\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useMergedRefs","useTreeItemContext_unstable","useTreeContext_unstable","Checkbox","Radio","TreeItemChevron","useTreeItemLayout_unstable","props","ref","content","iconAfter","iconBefore","as","layoutRef","ctx","selectionMode","isActionsVisibleExternal","actionsShorthand","actions","visible","undefined","isActionsVisible","isAsideVisible","selectionRef","expandIconRef","actionsRef","checked","isBranch","itemType","expandIcon","required","defaultProps","children","expandIconRefs","actionsRefs","components","root","aside","selector","buttonContextValue","size","tabIndex"],"mappings":"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"}
+{"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ExtractSlotProps,\n  getNativeElementProps,\n  isResolvedShorthand,\n  resolveShorthand,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\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  const { main, iconAfter, iconBefore, as = 'span' } = props;\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n  const [isActionsVisibleExternal, actionsShorthand]: [boolean | undefined, TreeItemLayoutSlots['actions']] =\n    isResolvedShorthand(props.actions)\n      ? // .visible prop should not be propagated to the DOM\n        [props.actions.visible, { ...props.actions, visible: undefined }]\n      : [undefined, props.actions];\n\n  const isActionsVisible = useTreeItemContext_unstable(ctx => ctx.isActionsVisible) || isActionsVisibleExternal;\n  const isAsideVisible = useTreeItemContext_unstable(ctx => ctx.isAsideVisible);\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 checked = useTreeItemContext_unstable(ctx => ctx.checked ?? false);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n  const expandIcon = resolveShorthand(props.expandIcon, {\n    required: isBranch,\n    defaultProps: {\n      children: <TreeItemChevron />,\n      'aria-hidden': true,\n    },\n  });\n\n  const expandIconRefs = useMergedRefs(expandIcon?.ref, expandIconRef);\n  if (expandIcon) {\n    expandIcon.ref = expandIconRefs;\n  }\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'horizontal',\n  });\n  const actions = isActionsVisible\n    ? resolveShorthand(actionsShorthand, {\n        defaultProps: {\n          ...arrowNavigationProps,\n          role: 'toolbar',\n        } as ExtractSlotProps<TreeItemLayoutSlots['actions']>,\n      })\n    : undefined;\n\n  const actionsRefs = useMergedRefs(actions?.ref, actionsRef);\n  if (actions) {\n    actions.ref = actionsRefs;\n  }\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: getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }),\n    iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),\n    main: resolveShorthand(main, { required: true }),\n    iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),\n    aside: isAsideVisible ? resolveShorthand(props.aside) : undefined,\n    actions,\n    expandIcon,\n    selector: resolveShorthand(props.selector, {\n      required: selectionMode !== 'none',\n      defaultProps: {\n        checked,\n        tabIndex: -1,\n        'aria-hidden': true,\n        ref: selectionRef,\n      },\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useMergedRefs","useTreeItemContext_unstable","useTreeContext_unstable","Checkbox","Radio","TreeItemChevron","useArrowNavigationGroup","useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","as","layoutRef","ctx","selectionMode","isActionsVisibleExternal","actionsShorthand","actions","visible","undefined","isActionsVisible","isAsideVisible","selectionRef","expandIconRef","actionsRef","checked","isBranch","itemType","expandIcon","required","defaultProps","children","expandIconRefs","arrowNavigationProps","circular","axis","role","actionsRefs","components","root","aside","selector","buttonContextValue","size","tabIndex"],"mappings":"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"}

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

@@ -6,7 +6,7 @@ import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
 export const treeItemLayoutClassNames = {
   root: 'fui-TreeItemLayout',
   iconBefore: 'fui-TreeItemLayout__iconBefore',
-  content: 'fui-TreeItemLayout__content',
+  main: 'fui-TreeItemLayout__main',
   iconAfter: 'fui-TreeItemLayout__iconAfter',
   expandIcon: 'fui-TreeItemLayout__expandIcon',
   aside: 'fui-TreeItemLayout__aside',
@@ -140,7 +140,7 @@ const useExpandIconStyles = /*#__PURE__*/__styles({
 /**
  * Styles for the content slot
  */
-const useContentStyles = /*#__PURE__*/__styles({
+const useMainStyles = /*#__PURE__*/__styles({
   base: {
     z8tnut: "f1g0x7ka",
     z189sj: ["ffczdla", "fgiv446"],
@@ -189,7 +189,7 @@ const useIconAfterStyles = /*#__PURE__*/__styles({
  */
 export const useTreeItemLayoutStyles_unstable = state => {
   const {
-    content,
+    main,
     iconAfter,
     iconBefore,
     expandIcon,
@@ -201,7 +201,7 @@ export const useTreeItemLayoutStyles_unstable = state => {
   const rootStyles = useRootStyles();
   const actionsStyles = useActionsStyles();
   const asideStyles = useAsideStyles();
-  const contentStyles = useContentStyles();
+  const mainStyles = useMainStyles();
   const expandIconStyles = useExpandIconStyles();
   const iconStyles = useIconStyles();
   const iconBeforeStyles = useIconBeforeStyles();
@@ -210,7 +210,7 @@ export const useTreeItemLayoutStyles_unstable = state => {
   const appearance = useTreeContext_unstable(ctx => ctx.appearance);
   const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);
   root.className = mergeClasses(treeItemLayoutClassNames.root, rootStyles.base, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);
-  content.className = mergeClasses(treeItemLayoutClassNames.content, contentStyles.base, content.className);
+  main.className = mergeClasses(treeItemLayoutClassNames.main, mainStyles.base, main.className);
   if (expandIcon) {
     expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);
   }

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","iconBefore","content","iconAfter","expandIcon","aside","actions","selector","useRootStyles","base","mc9l5x","Bt984gj","sshi5w","B7ck84d","Ijaq50","Br312pm","nk6f5a","Bw0ie65","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","lj723h","ecr2s2","qya0sb","Bi91k9c","Jwef8y","Becwuud","leaf","uwmqm3","branch","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","subtle","transparent","De3pzq","d","a","h","useActionsStyles","Frg6f3","qhf8xq","Bj3rh1h","z8tnut","z189sj","Byoj8tv","useAsideStyles","i8kkvl","Belr9w4","useExpandIconStyles","Brf1p80","Bf4jedk","sj55zd","Bh6795r","Bnnss6s","xawz","useContentStyles","useIconStyles","useIconBeforeStyles","useIconAfterStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","actionsStyles","asideStyles","contentStyles","expandIconStyles","iconStyles","iconBeforeStyles","iconAfterStyles","size","ctx","appearance","itemType","className"],"sources":["useTreeItemLayoutStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemLayoutClassNames = {\n    root: 'fui-TreeItemLayout',\n    iconBefore: 'fui-TreeItemLayout__iconBefore',\n    content: 'fui-TreeItemLayout__content',\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/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        minHeight: '32px',\n        boxSizing: 'border-box',\n        ...shorthands.gridArea('layout'),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\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    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 useActionsStyles = makeStyles({\n    base: {\n        display: 'flex',\n        marginLeft: 'auto',\n        position: 'relative',\n        zIndex: 1,\n        ...shorthands.gridArea('aside'),\n        ...shorthands.padding(0, tokens.spacingHorizontalS)\n    }\n});\n/**\n * Styles for the action icon slot\n */ const useAsideStyles = makeStyles({\n    base: {\n        display: 'flex',\n        marginLeft: 'auto',\n        alignItems: 'center',\n        zIndex: 0,\n        ...shorthands.gridArea('aside'),\n        ...shorthands.padding(0, tokens.spacingHorizontalM),\n        ...shorthands.gap(tokens.spacingHorizontalXS)\n    }\n});\n/**\n * Styles for the expand icon slot\n */ const useExpandIconStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        minWidth: '24px',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.flex(0, 0, 'auto'),\n        ...shorthands.padding(tokens.spacingVerticalXS, 0)\n    }\n});\n/**\n * Styles for the content slot\n */ const useContentStyles = makeStyles({\n    base: {\n        ...shorthands.padding(0, tokens.spacingHorizontalXXS)\n    }\n});\n/**\n * Styles for the before/after icon slot\n */ const useIconStyles = makeStyles({\n    base: {\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});\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    const { content , iconAfter , iconBefore , expandIcon , root , aside , actions , selector  } = state;\n    const rootStyles = useRootStyles();\n    const actionsStyles = useActionsStyles();\n    const asideStyles = useAsideStyles();\n    const contentStyles = useContentStyles();\n    const expandIconStyles = useExpandIconStyles();\n    const iconStyles = useIconStyles();\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, rootStyles.base, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);\n    content.className = mergeClasses(treeItemLayoutClassNames.content, contentStyles.base, content.className);\n    if (expandIcon) {\n        expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);\n    }\n    if (iconBefore) {\n        iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconBeforeStyles[size], iconBefore.className);\n    }\n    if (iconAfter) {\n        iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconAfterStyles[size], iconAfter.className);\n    }\n    if (actions) {\n        actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsStyles.base, actions.className);\n    }\n    if (aside) {\n        aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideStyles.base, aside.className);\n    }\n    if (expandIcon) {\n        expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);\n    }\n    if (selector) {\n        selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);\n    }\n    return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","iconBefore","main","iconAfter","expandIcon","aside","actions","selector","useRootStyles","base","mc9l5x","Bt984gj","sshi5w","B7ck84d","Ijaq50","Br312pm","nk6f5a","Bw0ie65","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","lj723h","ecr2s2","qya0sb","Bi91k9c","Jwef8y","Becwuud","leaf","uwmqm3","branch","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","subtle","transparent","De3pzq","d","a","h","useActionsStyles","Frg6f3","qhf8xq","Bj3rh1h","z8tnut","z189sj","Byoj8tv","useAsideStyles","i8kkvl","Belr9w4","useExpandIconStyles","Brf1p80","Bf4jedk","sj55zd","Bh6795r","Bnnss6s","xawz","useMainStyles","useIconStyles","useIconBeforeStyles","useIconAfterStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","actionsStyles","asideStyles","mainStyles","expandIconStyles","iconStyles","iconBeforeStyles","iconAfterStyles","size","ctx","appearance","itemType","className"],"sources":["useTreeItemLayoutStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemLayoutClassNames = {\n    root: 'fui-TreeItemLayout',\n    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/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        minHeight: '32px',\n        boxSizing: 'border-box',\n        ...shorthands.gridArea('layout'),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\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    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 useActionsStyles = makeStyles({\n    base: {\n        display: 'flex',\n        marginLeft: 'auto',\n        position: 'relative',\n        zIndex: 1,\n        ...shorthands.gridArea('aside'),\n        ...shorthands.padding(0, tokens.spacingHorizontalS)\n    }\n});\n/**\n * Styles for the action icon slot\n */ const useAsideStyles = makeStyles({\n    base: {\n        display: 'flex',\n        marginLeft: 'auto',\n        alignItems: 'center',\n        zIndex: 0,\n        ...shorthands.gridArea('aside'),\n        ...shorthands.padding(0, tokens.spacingHorizontalM),\n        ...shorthands.gap(tokens.spacingHorizontalXS)\n    }\n});\n/**\n * Styles for the expand icon slot\n */ const useExpandIconStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        minWidth: '24px',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.flex(0, 0, 'auto'),\n        ...shorthands.padding(tokens.spacingVerticalXS, 0)\n    }\n});\n/**\n * Styles for the content slot\n */ const useMainStyles = makeStyles({\n    base: {\n        ...shorthands.padding(0, tokens.spacingHorizontalXXS)\n    }\n});\n/**\n * Styles for the before/after icon slot\n */ const useIconStyles = makeStyles({\n    base: {\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});\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    const { main , iconAfter , iconBefore , expandIcon , root , aside , actions , selector  } = state;\n    const rootStyles = useRootStyles();\n    const actionsStyles = useActionsStyles();\n    const asideStyles = useAsideStyles();\n    const mainStyles = useMainStyles();\n    const expandIconStyles = useExpandIconStyles();\n    const iconStyles = useIconStyles();\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, rootStyles.base, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);\n    main.className = mergeClasses(treeItemLayoutClassNames.main, mainStyles.base, main.className);\n    if (expandIcon) {\n        expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);\n    }\n    if (iconBefore) {\n        iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconBeforeStyles[size], iconBefore.className);\n    }\n    if (iconAfter) {\n        iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconAfterStyles[size], iconAfter.className);\n    }\n    if (actions) {\n        actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsStyles.base, actions.className);\n    }\n    if (aside) {\n        aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideStyles.base, aside.className);\n    }\n    if (expandIcon) {\n        expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);\n    }\n    if (selector) {\n        selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);\n    }\n    return state;\n};\n"],"mappings":"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"}

package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TreeItemPersonaLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarContextValue, AvatarSize } from '@fluentui/react-avatar';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { TreeItemLayoutSlots } from '../TreeItemLayout/TreeItemLayout.types';\n\nexport type TreeItemPersonaLayoutContextValues = {\n  avatar: AvatarContextValue;\n};\n\nexport type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' | 'aside' | 'expandIcon' | 'selector'> & {\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * Avatar to display.\n   */\n  media: NonNullable<Slot<'div'>>;\n  /**\n   * Content. Children of the root slot are automatically rendered here\n   */\n  content: NonNullable<Slot<'div'>>;\n  /**\n   * Secondary text that describes or complements the content\n   */\n  description?: Slot<'div'>;\n};\n\n/**\n * TreeItemPersonaLayout Props\n */\nexport type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemPersonaLayout\n */\nexport type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {\n  avatarSize: AvatarSize;\n  buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAoCE"}
+{"version":3,"sources":["TreeItemPersonaLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarContextValue, AvatarSize } from '@fluentui/react-avatar';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { TreeItemLayoutSlots } from '../TreeItemLayout/TreeItemLayout.types';\n\nexport type TreeItemPersonaLayoutContextValues = {\n  avatar: AvatarContextValue;\n};\n\nexport type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' | 'aside' | 'expandIcon' | 'selector'> & {\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * Avatar to display.\n   */\n  media: NonNullable<Slot<'div'>>;\n  /**\n   * Content. Children of the root slot are automatically rendered here\n   */\n  main: NonNullable<Slot<'div'>>;\n  /**\n   * Secondary text that describes or complements the content\n   */\n  description?: Slot<'div'>;\n};\n\n/**\n * TreeItemPersonaLayout Props\n */\nexport type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemPersonaLayout\n */\nexport type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {\n  avatarSize: AvatarSize;\n  buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAoCE"}

package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js

@@ -8,7 +8,7 @@ import { ButtonContextProvider } from '@fluentui/react-button';
     const { slots , slotProps  } = getSlotsNext(state);
     return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), slots.selector && /*#__PURE__*/ createElement(slots.selector, slotProps.selector), /*#__PURE__*/ createElement(AvatarContextProvider, {
         value: contextValues.avatar
-    }, /*#__PURE__*/ createElement(slots.media, slotProps.media)), /*#__PURE__*/ createElement(slots.content, slotProps.content), slots.description && /*#__PURE__*/ createElement(slots.description, slotProps.description), /*#__PURE__*/ createElement(ButtonContextProvider, {
+    }, /*#__PURE__*/ createElement(slots.media, slotProps.media)), /*#__PURE__*/ createElement(slots.main, slotProps.main), slots.description && /*#__PURE__*/ createElement(slots.description, slotProps.description), /*#__PURE__*/ createElement(ButtonContextProvider, {
         value: state.buttonContextValue
     }, slots.actions && /*#__PURE__*/ createElement(slots.actions, slotProps.actions), slots.aside && /*#__PURE__*/ createElement(slots.aside, slotProps.aside)));
 };

package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderTreeItemPersonaLayout.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type {\n  TreeItemPersonaLayoutState,\n  TreeItemPersonaLayoutContextValues,\n  TreeItemPersonaLayoutSlots,\n} from './TreeItemPersonaLayout.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (\n  state: TreeItemPersonaLayoutState,\n  contextValues: TreeItemPersonaLayoutContextValues,\n) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemPersonaLayoutSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n      {slots.selector && <slots.selector {...slotProps.selector} />}\n      <AvatarContextProvider value={contextValues.avatar}>\n        <slots.media {...slotProps.media} />\n      </AvatarContextProvider>\n      <slots.content {...slotProps.content} />\n      {slots.description && <slots.description {...slotProps.description} />}\n      <ButtonContextProvider value={state.buttonContextValue}>\n        {slots.actions && <slots.actions {...slotProps.actions} />}\n        {slots.aside && <slots.aside {...slotProps.aside} />}\n      </ButtonContextProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","AvatarContextProvider","ButtonContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","slots","slotProps","root","expandIcon","selector","value","avatar","media","content","description","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAMzD,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC,gBACG;IACH,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGP,aAAyCI;IAEtE,qBACE,AAtBJ,cAsBKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,UAAU,kBAAI,AAvB3B,cAuB4BH,MAAMG,UAAU,EAAKF,UAAUE,UAAU,GAC9DH,MAAMI,QAAQ,kBAAI,AAxBzB,cAwB0BJ,MAAMI,QAAQ,EAAKH,UAAUG,QAAQ,iBACzD,AAzBN,cAyBOT;QAAsBU,OAAON,cAAcO,MAAM;qBAChD,AA1BR,cA0BSN,MAAMO,KAAK,EAAKN,UAAUM,KAAK,kBAElC,AA5BN,cA4BOP,MAAMQ,OAAO,EAAKP,UAAUO,OAAO,GACnCR,MAAMS,WAAW,kBAAI,AA7B5B,cA6B6BT,MAAMS,WAAW,EAAKR,UAAUQ,WAAW,iBAClE,AA9BN,cA8BOb;QAAsBS,OAAOP,MAAMY,kBAAkB;OACnDV,MAAMW,OAAO,kBAAI,AA/B1B,cA+B2BX,MAAMW,OAAO,EAAKV,UAAUU,OAAO,GACrDX,MAAMY,KAAK,kBAAI,AAhCxB,cAgCyBZ,MAAMY,KAAK,EAAKX,UAAUW,KAAK;AAIxD,EAAE"}
+{"version":3,"sources":["renderTreeItemPersonaLayout.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type {\n  TreeItemPersonaLayoutState,\n  TreeItemPersonaLayoutContextValues,\n  TreeItemPersonaLayoutSlots,\n} from './TreeItemPersonaLayout.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (\n  state: TreeItemPersonaLayoutState,\n  contextValues: TreeItemPersonaLayoutContextValues,\n) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemPersonaLayoutSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n      {slots.selector && <slots.selector {...slotProps.selector} />}\n      <AvatarContextProvider value={contextValues.avatar}>\n        <slots.media {...slotProps.media} />\n      </AvatarContextProvider>\n      <slots.main {...slotProps.main} />\n      {slots.description && <slots.description {...slotProps.description} />}\n      <ButtonContextProvider value={state.buttonContextValue}>\n        {slots.actions && <slots.actions {...slotProps.actions} />}\n        {slots.aside && <slots.aside {...slotProps.aside} />}\n      </ButtonContextProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","AvatarContextProvider","ButtonContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","slots","slotProps","root","expandIcon","selector","value","avatar","media","main","description","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAMzD,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC,gBACG;IACH,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGP,aAAyCI;IAEtE,qBACE,AAtBJ,cAsBKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,UAAU,kBAAI,AAvB3B,cAuB4BH,MAAMG,UAAU,EAAKF,UAAUE,UAAU,GAC9DH,MAAMI,QAAQ,kBAAI,AAxBzB,cAwB0BJ,MAAMI,QAAQ,EAAKH,UAAUG,QAAQ,iBACzD,AAzBN,cAyBOT;QAAsBU,OAAON,cAAcO,MAAM;qBAChD,AA1BR,cA0BSN,MAAMO,KAAK,EAAKN,UAAUM,KAAK,kBAElC,AA5BN,cA4BOP,MAAMQ,IAAI,EAAKP,UAAUO,IAAI,GAC7BR,MAAMS,WAAW,kBAAI,AA7B5B,cA6B6BT,MAAMS,WAAW,EAAKR,UAAUQ,WAAW,iBAClE,AA9BN,cA8BOb;QAAsBS,OAAOP,MAAMY,kBAAkB;OACnDV,MAAMW,OAAO,kBAAI,AA/B1B,cA+B2BX,MAAMW,OAAO,EAAKV,UAAUU,OAAO,GACrDX,MAAMY,KAAK,kBAAI,AAhCxB,cAgCyBZ,MAAMY,KAAK,EAAKX,UAAUW,KAAK;AAIxD,EAAE"}

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js

@@ -14,7 +14,7 @@ import { Radio } from '@fluentui/react-radio';
  * @param props - props from this instance of TreeItemPersonaLayout
  * @param ref - reference to root HTMLElement of TreeItemPersonaLayout
  */ export const useTreeItemPersonaLayout_unstable = (props, ref)=>{
-    const { media , children , content , description  } = props;
+    const { media , children , main , description  } = props;
     const treeItemLayoutState = useTreeItemLayout_unstable({
         ...props,
         iconBefore: null,
@@ -26,7 +26,7 @@ import { Radio } from '@fluentui/react-radio';
         ...treeItemLayoutState,
         components: {
             expandIcon: 'div',
-            content: 'div',
+            main: 'div',
             description: 'div',
             root: 'div',
             media: 'div',
@@ -36,7 +36,7 @@ import { Radio } from '@fluentui/react-radio';
             selector: selectionMode === 'multiselect' ? Checkbox : Radio
         },
         avatarSize: treeAvatarSize[size],
-        content: resolveShorthand(content, {
+        main: resolveShorthand(main, {
             required: true,
             defaultProps: {
                 children

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemPersonaLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n  props: TreeItemPersonaLayoutProps,\n  ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n  const { media, children, content, description } = props;\n\n  const treeItemLayoutState = useTreeItemLayout_unstable(\n    {\n      ...props,\n      iconBefore: null,\n      iconAfter: null,\n    },\n    ref,\n  );\n\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n  return {\n    ...treeItemLayoutState,\n    components: {\n      expandIcon: 'div',\n      content: 'div',\n      description: 'div',\n      root: 'div',\n      media: 'div',\n      aside: 'div',\n      actions: 'div',\n      // Casting here to a union between checkbox and radio\n      selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\n    },\n    avatarSize: treeAvatarSize[size],\n    content: resolveShorthand(content, { required: true, defaultProps: { children } }),\n    media: resolveShorthand(media, { required: true }),\n    description: resolveShorthand(description),\n  };\n};\n"],"names":["React","resolveShorthand","useTreeContext_unstable","treeAvatarSize","useTreeItemLayout_unstable","Checkbox","Radio","useTreeItemPersonaLayout_unstable","props","ref","media","children","content","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","selectionMode","components","expandIcon","root","aside","actions","selector","avatarSize","required","defaultProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,uBAAuB,QAAQ,iBAAiB;AACzD,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,SAASC,QAAQ,QAAuB,2BAA2B;AACnE,SAASC,KAAK,QAAoB,wBAAwB;AAE1D;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC,MAC+B;IAC/B,MAAM,EAAEC,MAAK,EAAEC,SAAQ,EAAEC,QAAO,EAAEC,YAAW,EAAE,GAAGL;IAElD,MAAMM,sBAAsBV,2BAC1B;QACE,GAAGI,KAAK;QACRO,YAAY,IAAI;QAChBC,WAAW,IAAI;IACjB,GACAP;IAGF,MAAMQ,OAAOf,wBAAwBgB,CAAAA,MAAOA,IAAID,IAAI;IACpD,MAAME,gBAAgBjB,wBAAwBgB,CAAAA,MAAOA,IAAIC,aAAa;IAEtE,OAAO;QACL,GAAGL,mBAAmB;QACtBM,YAAY;YACVC,YAAY;YACZT,SAAS;YACTC,aAAa;YACbS,MAAM;YACNZ,OAAO;YACPa,OAAO;YACPC,SAAS;YACT,qDAAqD;YACrDC,UAAWN,kBAAkB,gBAAgBd,WAAWC,KAAK;QAC/D;QACAoB,YAAYvB,cAAc,CAACc,KAAK;QAChCL,SAASX,iBAAiBW,SAAS;YAAEe,UAAU,IAAI;YAAEC,cAAc;gBAAEjB;YAAS;QAAE;QAChFD,OAAOT,iBAAiBS,OAAO;YAAEiB,UAAU,IAAI;QAAC;QAChDd,aAAaZ,iBAAiBY;IAChC;AACF,EAAE"}
+{"version":3,"sources":["useTreeItemPersonaLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n  props: TreeItemPersonaLayoutProps,\n  ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n  const { media, children, main, description } = props;\n\n  const treeItemLayoutState = useTreeItemLayout_unstable(\n    {\n      ...props,\n      iconBefore: null,\n      iconAfter: null,\n    },\n    ref,\n  );\n\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n  return {\n    ...treeItemLayoutState,\n    components: {\n      expandIcon: 'div',\n      main: 'div',\n      description: 'div',\n      root: 'div',\n      media: 'div',\n      aside: 'div',\n      actions: 'div',\n      // Casting here to a union between checkbox and radio\n      selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\n    },\n    avatarSize: treeAvatarSize[size],\n    main: resolveShorthand(main, { required: true, defaultProps: { children } }),\n    media: resolveShorthand(media, { required: true }),\n    description: resolveShorthand(description),\n  };\n};\n"],"names":["React","resolveShorthand","useTreeContext_unstable","treeAvatarSize","useTreeItemLayout_unstable","Checkbox","Radio","useTreeItemPersonaLayout_unstable","props","ref","media","children","main","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","selectionMode","components","expandIcon","root","aside","actions","selector","avatarSize","required","defaultProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,uBAAuB,QAAQ,iBAAiB;AACzD,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,SAASC,QAAQ,QAAuB,2BAA2B;AACnE,SAASC,KAAK,QAAoB,wBAAwB;AAE1D;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC,MAC+B;IAC/B,MAAM,EAAEC,MAAK,EAAEC,SAAQ,EAAEC,KAAI,EAAEC,YAAW,EAAE,GAAGL;IAE/C,MAAMM,sBAAsBV,2BAC1B;QACE,GAAGI,KAAK;QACRO,YAAY,IAAI;QAChBC,WAAW,IAAI;IACjB,GACAP;IAGF,MAAMQ,OAAOf,wBAAwBgB,CAAAA,MAAOA,IAAID,IAAI;IACpD,MAAME,gBAAgBjB,wBAAwBgB,CAAAA,MAAOA,IAAIC,aAAa;IAEtE,OAAO;QACL,GAAGL,mBAAmB;QACtBM,YAAY;YACVC,YAAY;YACZT,MAAM;YACNC,aAAa;YACbS,MAAM;YACNZ,OAAO;YACPa,OAAO;YACPC,SAAS;YACT,qDAAqD;YACrDC,UAAWN,kBAAkB,gBAAgBd,WAAWC,KAAK;QAC/D;QACAoB,YAAYvB,cAAc,CAACc,KAAK;QAChCL,MAAMX,iBAAiBW,MAAM;YAAEe,UAAU,IAAI;YAAEC,cAAc;gBAAEjB;YAAS;QAAE;QAC1ED,OAAOT,iBAAiBS,OAAO;YAAEiB,UAAU,IAAI;QAAC;QAChDd,aAAaZ,iBAAiBY;IAChC;AACF,EAAE"}

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

@@ -6,7 +6,7 @@ export const treeItemPersonaLayoutClassNames = {
   root: 'fui-TreeItemPersonaLayout',
   media: 'fui-TreeItemPersonaLayout__media',
   description: 'fui-TreeItemPersonaLayout__description',
-  content: 'fui-TreeItemPersonaLayout__content',
+  main: 'fui-TreeItemPersonaLayout__main',
   expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',
   aside: 'fui-TreeItemPersonaLayout__aside',
   actions: 'fui-TreeItemPersonaLayout__actions',
@@ -20,7 +20,7 @@ const useRootStyles = /*#__PURE__*/__styles({
     mc9l5x: "f13qh94s",
     wkccdc: "f1y0tuzo",
     Budl1dq: "fellwe7",
-    zoa1oz: "f86xsft",
+    zoa1oz: "f1pam7zy",
     Bt984gj: "f122n59",
     Bahqtrf: "fk6fouc",
     Be2twd7: "fkhj508",
@@ -40,7 +40,7 @@ const useRootStyles = /*#__PURE__*/__styles({
     uwmqm3: ["fo100m9", "f6yw3pu"]
   }
 }, {
-  d: [".f13qh94s{display:-ms-grid;display:grid;}", ".f1y0tuzo{-ms-grid-rows:1fr auto;grid-template-rows:1fr auto;}", ".fellwe7{-ms-grid-columns:auto auto 1fr auto;grid-template-columns:auto auto 1fr auto;}", ".f86xsft{grid-template-areas:\"expandIcon media content        aside\" \"expandIcon media description aside\";}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}"],
+  d: [".f13qh94s{display:-ms-grid;display:grid;}", ".f1y0tuzo{-ms-grid-rows:1fr auto;grid-template-rows:1fr auto;}", ".fellwe7{-ms-grid-columns:auto auto 1fr auto;grid-template-columns:auto auto 1fr auto;}", ".f1pam7zy{grid-template-areas:\"expandIcon media main        aside\" \"expandIcon media description aside\";}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}"],
   a: [".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f5na5aj:active .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}"],
   h: [".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1oboesa:hover .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}"]
 });
@@ -65,12 +65,12 @@ const useMediaStyles = /*#__PURE__*/__styles({
 }, {
   d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}", ".f11uok23{-ms-grid-row:media;grid-row-start:media;}", ".f1qdfnnj{-ms-grid-column:media;grid-column-start:media;}", ".f1s27gz{-ms-grid-row-span:media;grid-row-end:media;}", ".f86d0yl{-ms-grid-column-span:media;grid-column-end:media;}", ".f1g0x7ka{padding-top:0;}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f1qch9an{padding-bottom:0;}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}"]
 });
-const useContentStyles = /*#__PURE__*/__styles({
+const useMainStyles = /*#__PURE__*/__styles({
   base: {
-    Ijaq50: "fxwmwwq",
-    Br312pm: "f1e0gndy",
-    nk6f5a: "f4zz6gv",
-    Bw0ie65: "f7idnck",
+    Ijaq50: "f17iroih",
+    Br312pm: "fppdkoh",
+    nk6f5a: "fsb8d6n",
+    Bw0ie65: "f6k5g14",
     z8tnut: "f1ngh7ph",
     z189sj: ["f7x41pl", "fruq291"],
     Byoj8tv: "f5o476b",
@@ -83,7 +83,7 @@ const useContentStyles = /*#__PURE__*/__styles({
     uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
   }
 }, {
-  d: [".fxwmwwq{-ms-grid-row:content;grid-row-start:content;}", ".f1e0gndy{-ms-grid-column:content;grid-column-start:content;}", ".f4zz6gv{-ms-grid-row-span:content;grid-row-end:content;}", ".f7idnck{-ms-grid-column-span:content;grid-column-end:content;}", ".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f5o476b{padding-bottom:var(--spacingVerticalMNudge);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1qch9an{padding-bottom:0;}"]
+  d: [".f17iroih{-ms-grid-row:main;grid-row-start:main;}", ".fppdkoh{-ms-grid-column:main;grid-column-start:main;}", ".fsb8d6n{-ms-grid-row-span:main;grid-row-end:main;}", ".f6k5g14{-ms-grid-column-span:main;grid-column-end:main;}", ".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f5o476b{padding-bottom:var(--spacingVerticalMNudge);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1qch9an{padding-bottom:0;}"]
 });
 const useDescriptionStyles = /*#__PURE__*/__styles({
   base: {
@@ -183,12 +183,12 @@ export const useTreeItemPersonaLayoutStyles_unstable = state => {
   const actionsStyles = useActionsStyles();
   const asideStyles = useAsideStyles();
   const expandIconStyles = useExpandIconStyles();
-  const contentStyles = useContentStyles();
+  const mainStyles = useMainStyles();
   const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);
   state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootStyles.base, rootStyles[itemType], state.root.className);
   state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);
-  if (state.content) {
-    state.content.className = mergeClasses(treeItemPersonaLayoutClassNames.content, contentStyles.base, state.description && contentStyles.withDescription, state.content.className);
+  if (state.main) {
+    state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainStyles.base, state.description && mainStyles.withDescription, state.main.className);
   }
   if (state.description) {
     state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);