@fluentui/react-tree 9.0.0-beta.2 → 9.0.0-beta.20

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

@@ -0,0 +1,102 @@
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { treeItemLevelToken } from '../../utils/tokens';
+export const treeItemClassNames = {
+  root: 'fui-TreeItem'
+};
+const useRootStyles = /*#__PURE__*/__styles({
+  level1: {
+    iytv0q: "f10bgyvd"
+  },
+  level2: {
+    iytv0q: "f1h0rod3"
+  },
+  level3: {
+    iytv0q: "fgoqafk"
+  },
+  level4: {
+    iytv0q: "f75dvuh"
+  },
+  level5: {
+    iytv0q: "fqk7yw6"
+  },
+  level6: {
+    iytv0q: "f1r3z17b"
+  },
+  level7: {
+    iytv0q: "f1hrpd1h"
+  },
+  level8: {
+    iytv0q: "f1iy65d0"
+  },
+  level9: {
+    iytv0q: "ftg42e5"
+  },
+  level10: {
+    iytv0q: "fyat3t"
+  },
+  base: {
+    qhf8xq: "f10pi13n",
+    Bceei9c: "f1k6fduh",
+    mc9l5x: "f13qh94s",
+    B7ck84d: "f1ewtqcl",
+    wkccdc: "ffh4ag3",
+    Budl1dq: "f1y1g942",
+    zoa1oz: "faz22wj",
+    De3pzq: "fhovq9v",
+    sj55zd: "fkfq4zb",
+    z189sj: ["flk2ux3", "fkl3uby"]
+  },
+  focusIndicator: {
+    Brovlpu: "ftqa4ok",
+    B486eqv: "f2hkw1w",
+    B8q5s1w: "f8hki3x",
+    Bci5o5g: ["f1d2448m", "ffh67wi"],
+    n8qw10: "f1bjia2o",
+    Bdrgwmp: ["ffh67wi", "f1d2448m"],
+    Bm4h7ae: "f15bsgw9",
+    B7ys5i9: "f14e48fq",
+    Busjfv9: "f18yb2kv",
+    Bhk32uz: "fd6o370",
+    Bf4ptjt: "fh1cnn4",
+    kclons: ["fy7oxxb", "f184ne2d"],
+    Bhdgwq3: "fpukqih",
+    Blkhhs4: ["f184ne2d", "fy7oxxb"],
+    Bqtpl0w: "frrh606",
+    clg4pj: ["f1v5zibi", "fo2hd23"],
+    hgwjuy: "ful5kiu",
+    Bonggc9: ["fo2hd23", "f1v5zibi"],
+    B1tsrr9: ["f1jqcqds", "ftffrms"],
+    Dah5zi: ["ftffrms", "f1jqcqds"],
+    Bkh64rk: ["f2e7qr6", "fsr1zz6"],
+    qqdqy8: ["fsr1zz6", "f2e7qr6"],
+    B6dhp37: "f1dvezut",
+    i03rao: ["fd0oaoj", "f1cwg4i8"],
+    Boxcth7: "fjvm52t",
+    Bsom6fd: ["f1cwg4i8", "fd0oaoj"],
+    J0r882: "f57olzd",
+    Bule8hv: ["f4stah7", "fs1por5"],
+    Bjwuhne: "f480a47",
+    Ghsupd: ["fs1por5", "f4stah7"]
+  }
+}, {
+  d: [".f10bgyvd{--fluent-TreeItem--level:1;}", ".f1h0rod3{--fluent-TreeItem--level:2;}", ".fgoqafk{--fluent-TreeItem--level:3;}", ".f75dvuh{--fluent-TreeItem--level:4;}", ".fqk7yw6{--fluent-TreeItem--level:5;}", ".f1r3z17b{--fluent-TreeItem--level:6;}", ".f1hrpd1h{--fluent-TreeItem--level:7;}", ".f1iy65d0{--fluent-TreeItem--level:8;}", ".ftg42e5{--fluent-TreeItem--level:9;}", ".fyat3t{--fluent-TreeItem--level:10;}", ".f10pi13n{position:relative;}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".f1ewtqcl{box-sizing:border-box;}", ".ffh4ag3{grid-template-rows:auto auto;}", ".f1y1g942{grid-template-columns:minmax(0, 100%) minmax(0px, min-content);}", ".faz22wj{grid-template-areas:\"layout  aside\" \"subtree subtree\";}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".flk2ux3{padding-right:var(--spacingHorizontalNone);}", ".fkl3uby{padding-left:var(--spacingHorizontalNone);}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}"],
+  f: [".ftqa4ok:focus{outline-style:none;}"],
+  i: [".f2hkw1w:focus-visible{outline-style:none;}"]
+});
+/**
+ * Apply styling to the TreeItem slots based on the state
+ */
+export const useTreeItemStyles_unstable = state => {
+  const rootStyles = useRootStyles();
+  const {
+    level
+  } = state;
+  state.root.className = mergeClasses(treeItemClassNames.root, isStaticallyDefinedLevel(level) && rootStyles[`level${level}`], rootStyles.base, rootStyles.focusIndicator, state.root.className);
+  return state;
+};
+function isStaticallyDefinedLevel(level) {
+  return level >= 1 && level <= 10;
+}
+//# sourceMappingURL=useTreeItemStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","tokens","createFocusOutlineStyle","treeItemLevelToken","treeItemClassNames","root","useRootStyles","level1","iytv0q","level2","level3","level4","level5","level6","level7","level8","level9","level10","base","qhf8xq","Bceei9c","mc9l5x","B7ck84d","wkccdc","Budl1dq","zoa1oz","De3pzq","sj55zd","z189sj","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bule8hv","Bjwuhne","Ghsupd","d","f","i","useTreeItemStyles_unstable","state","rootStyles","level","className","isStaticallyDefinedLevel"],"sources":["useTreeItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nexport const treeItemClassNames = {\n    root: 'fui-TreeItem'\n};\nconst useRootStyles = makeStyles({\n    ...Object.fromEntries(Array.from({\n        length: 10\n    }, (_, index)=>[\n            `level${index + 1}`,\n            {\n                [treeItemLevelToken]: index + 1\n            }\n        ])),\n    base: {\n        position: 'relative',\n        cursor: 'pointer',\n        display: 'grid',\n        boxSizing: 'border-box',\n        gridTemplateRows: 'auto auto',\n        gridTemplateColumns: 'minmax(0, 100%) minmax(0px, min-content)',\n        gridTemplateAreas: `\n    \"layout  aside\"\n    \"subtree subtree\"\n    `,\n        backgroundColor: tokens.colorSubtleBackground,\n        color: tokens.colorNeutralForeground2,\n        paddingRight: tokens.spacingHorizontalNone\n    },\n    focusIndicator: createFocusOutlineStyle()\n});\n/**\n * Apply styling to the TreeItem slots based on the state\n */ export const useTreeItemStyles_unstable = (state)=>{\n    const rootStyles = useRootStyles();\n    const { level  } = state;\n    state.root.className = mergeClasses(treeItemClassNames.root, isStaticallyDefinedLevel(level) && rootStyles[`level${level}`], rootStyles.base, rootStyles.focusIndicator, state.root.className);\n    return state;\n};\nfunction isStaticallyDefinedLevel(level) {\n    return level >= 1 && level <= 10;\n}\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGP,QAAA;EAAAQ,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;EAAAE,MAAA;IAAAF,MAAA;EAAA;EAAAG,MAAA;IAAAH,MAAA;EAAA;EAAAI,MAAA;IAAAJ,MAAA;EAAA;EAAAK,MAAA;IAAAL,MAAA;EAAA;EAAAM,MAAA;IAAAN,MAAA;EAAA;EAAAO,MAAA;IAAAP,MAAA;EAAA;EAAAQ,MAAA;IAAAR,MAAA;EAAA;EAAAS,OAAA;IAAAT,MAAA;EAAA;EAAAU,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,cAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAyBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,UAAU,GAAG3D,aAAa,CAAC,CAAC;EAClC,MAAM;IAAE4D;EAAO,CAAC,GAAGF,KAAK;EACxBA,KAAK,CAAC3D,IAAI,CAAC8D,SAAS,GAAGnE,YAAY,CAACI,kBAAkB,CAACC,IAAI,EAAE+D,wBAAwB,CAACF,KAAK,CAAC,IAAID,UAAU,CAAE,QAAOC,KAAM,EAAC,CAAC,EAAED,UAAU,CAAC/C,IAAI,EAAE+C,UAAU,CAACpC,cAAc,EAAEmC,KAAK,CAAC3D,IAAI,CAAC8D,SAAS,CAAC;EAC9L,OAAOH,KAAK;AAChB,CAAC;AACD,SAASI,wBAAwBA,CAACF,KAAK,EAAE;EACrC,OAAOA,KAAK,IAAI,CAAC,IAAIA,KAAK,IAAI,EAAE;AACpC"}

package/lib/components/TreeItemAside/TreeItemAside.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { useTreeItemAside_unstable } from './useTreeItemAside';
+import { renderTreeItemAside_unstable } from './renderTreeItemAside';
+import { useTreeItemAsideStyles_unstable } from './useTreeItemAsideStyles.styles';
+/**
+ * TreeItemAside component - represents a custom set of actionable elements that will be visible when a certain
+ * `TreeItem` is currently "active".
+ */ export const TreeItemAside = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTreeItemAside_unstable(props, ref);
+    useTreeItemAsideStyles_unstable(state);
+    return renderTreeItemAside_unstable(state);
+});
+TreeItemAside.displayName = 'TreeItemAside';

package/lib/components/TreeItemAside/TreeItemAside.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TreeItemAside.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemAside_unstable } from './useTreeItemAside';\nimport { renderTreeItemAside_unstable } from './renderTreeItemAside';\nimport { useTreeItemAsideStyles_unstable } from './useTreeItemAsideStyles.styles';\nimport type { TreeItemAsideProps } from './TreeItemAside.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TreeItemAside component - represents a custom set of actionable elements that will be visible when a certain\n * `TreeItem` is currently \"active\".\n */\nexport const TreeItemAside: ForwardRefComponent<TreeItemAsideProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItemAside_unstable(props, ref);\n\n  useTreeItemAsideStyles_unstable(state);\n  return renderTreeItemAside_unstable(state);\n});\n\nTreeItemAside.displayName = 'TreeItemAside';\n"],"names":["React","useTreeItemAside_unstable","renderTreeItemAside_unstable","useTreeItemAsideStyles_unstable","TreeItemAside","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAIlF;;;CAGC,GACD,OAAO,MAAMC,8BAAyDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACrG,MAAMC,QAAQP,0BAA0BK,OAAOC;IAE/CJ,gCAAgCK;IAChC,OAAON,6BAA6BM;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

package/lib/components/TreeItemAside/TreeItemAside.types.js

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["TreeItemAside.types.ts"],"sourcesContent":["import { ButtonContextValue } from '@fluentui/react-button';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TreeItemAsideSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * TreeItemAside Props\n */\nexport type TreeItemAsideProps = ComponentProps<TreeItemAsideSlots> & {\n  /**\n   * boolean indicating if the aside content should behave as \"actions\"\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?: boolean;\n  /**\n   * Forces visibility of the aside content, even if they're actions\n   */\n  visible?: true;\n};\n\n/**\n * State used in rendering TreeItemAside\n */\nexport type TreeItemAsideState = ComponentState<TreeItemAsideSlots> & {\n  actions: boolean;\n  visible: boolean;\n  buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAAA,WA+BE"}

package/lib/components/TreeItemAside/index.js

@@ -0,0 +1,5 @@
+export * from './TreeItemAside';
+export * from './TreeItemAside.types';
+export * from './renderTreeItemAside';
+export * from './useTreeItemAside';
+export * from './useTreeItemAsideStyles.styles';

package/lib/components/TreeItemAside/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TreeItemAside';\nexport * from './TreeItemAside.types';\nexport * from './renderTreeItemAside';\nexport * from './useTreeItemAside';\nexport * from './useTreeItemAsideStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,qBAAqB;AACnC,cAAc,kCAAkC"}

package/lib/components/TreeItemAside/renderTreeItemAside.js

@@ -0,0 +1,14 @@
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
+import { ButtonContextProvider } from '@fluentui/react-button';
+/**
+ * Render the final JSX of TreeItemAside
+ */ export const renderTreeItemAside_unstable = (state)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    if (!state.visible) {
+        return null;
+    }
+    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(ButtonContextProvider, {
+        value: state.buttonContextValue
+    }, slotProps.root.children));
+};

package/lib/components/TreeItemAside/renderTreeItemAside.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderTreeItemAside.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { ButtonContextProvider } from '@fluentui/react-button';\nimport type { TreeItemAsideState, TreeItemAsideSlots } from './TreeItemAside.types';\n\n/**\n * Render the final JSX of TreeItemAside\n */\nexport const renderTreeItemAside_unstable = (state: TreeItemAsideState) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemAsideSlots>(state);\n\n  if (!state.visible) {\n    return null;\n  }\n\n  return (\n    <slots.root {...slotProps.root}>\n      <ButtonContextProvider value={state.buttonContextValue}>{slotProps.root.children}</ButtonContextProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","ButtonContextProvider","renderTreeItemAside_unstable","state","slots","slotProps","visible","root","value","buttonContextValue","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,qBAAqB,QAAQ,yBAAyB;AAG/D;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,QAA8B;IACzE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGL,aAAiCG;IAE9D,IAAI,CAACA,MAAMG,OAAO,EAAE;QAClB,OAAO,IAAI;IACb,CAAC;IAED,qBACE,AAlBJ,cAkBKF,MAAMG,IAAI,EAAKF,UAAUE,IAAI,gBAC5B,AAnBN,cAmBON;QAAsBO,OAAOL,MAAMM,kBAAkB;OAAGJ,UAAUE,IAAI,CAACG,QAAQ;AAGtF,EAAE"}

package/lib/components/TreeItemAside/useTreeItemAside.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
+import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
+/**
+ * Create the state required to render TreeItemAside.
+ *
+ * The returned state can be modified with hooks such as useTreeItemAsideStyles_unstable,
+ * before being passed to renderTreeItemAside_unstable.
+ *
+ * @param props - props from this instance of TreeItemAside
+ * @param ref - reference to root HTMLElement of TreeItemAside
+ */ export const useTreeItemAside_unstable = (props, ref)=>{
+    const actionsRef = useTreeItemContext_unstable((ctx)=>ctx.actionsRef);
+    const contextVisible = useTreeItemContext_unstable((ctx)=>props.actions ? ctx.isActionsVisible : ctx.isAsideVisible);
+    const { actions =false , visible =contextVisible  } = props;
+    return {
+        actions,
+        visible,
+        buttonContextValue: {
+            size: 'small'
+        },
+        components: {
+            root: 'div'
+        },
+        root: getNativeElementProps('div', {
+            ref: useMergedRefs(ref, actions ? actionsRef : undefined),
+            ...props
+        })
+    };
+};

package/lib/components/TreeItemAside/useTreeItemAside.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTreeItemAside.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeItemAsideProps, TreeItemAsideState } from './TreeItemAside.types';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\n\n/**\n * Create the state required to render TreeItemAside.\n *\n * The returned state can be modified with hooks such as useTreeItemAsideStyles_unstable,\n * before being passed to renderTreeItemAside_unstable.\n *\n * @param props - props from this instance of TreeItemAside\n * @param ref - reference to root HTMLElement of TreeItemAside\n */\nexport const useTreeItemAside_unstable = (\n  props: TreeItemAsideProps,\n  ref: React.Ref<HTMLElement>,\n): TreeItemAsideState => {\n  const actionsRef = useTreeItemContext_unstable(ctx => ctx.actionsRef);\n  const contextVisible = useTreeItemContext_unstable(ctx =>\n    props.actions ? ctx.isActionsVisible : ctx.isAsideVisible,\n  );\n  const { actions = false, visible = contextVisible } = props;\n\n  return {\n    actions,\n    visible,\n    buttonContextValue: { size: 'small' },\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, actions ? actionsRef : undefined),\n      ...props,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","useMergedRefs","useTreeItemContext_unstable","useTreeItemAside_unstable","props","ref","actionsRef","ctx","contextVisible","actions","isActionsVisible","isAsideVisible","visible","buttonContextValue","size","components","root","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,4BAA4B;AAEjF,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC,MACuB;IACvB,MAAMC,aAAaJ,4BAA4BK,CAAAA,MAAOA,IAAID,UAAU;IACpE,MAAME,iBAAiBN,4BAA4BK,CAAAA,MACjDH,MAAMK,OAAO,GAAGF,IAAIG,gBAAgB,GAAGH,IAAII,cAAc;IAE3D,MAAM,EAAEF,SAAU,KAAK,CAAA,EAAEG,SAAUJ,eAAc,EAAE,GAAGJ;IAEtD,OAAO;QACLK;QACAG;QACAC,oBAAoB;YAAEC,MAAM;QAAQ;QACpCC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMhB,sBAAsB,OAAO;YACjCK,KAAKJ,cAAcI,KAAKI,UAAUH,aAAaW,SAAS;YACxD,GAAGb,KAAK;QACV;IACF;AACF,EAAE"}

package/lib/components/TreeItemAside/useTreeItemAsideStyles.styles.js

@@ -0,0 +1,47 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const treeItemAsideClassNames = {
+  root: 'fui-TreeItemAside'
+};
+/**
+ * Styles for the action icon slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "f22iagw",
+    Frg6f3: ["fcgxt0o", "f1ujusj6"],
+    Ijaq50: "fobksn0",
+    Br312pm: "fmy5l6f",
+    nk6f5a: "fzqypwc",
+    Bw0ie65: "f1tmftl3"
+  },
+  actions: {
+    qhf8xq: "f10pi13n",
+    Bj3rh1h: "f19g0ac",
+    z8tnut: "f1g0x7ka",
+    z189sj: ["f1vdfbxk", "f1f5gg8d"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
+  },
+  aside: {
+    Bt984gj: "f122n59",
+    Bj3rh1h: "f11zp4z2",
+    z8tnut: "f1g0x7ka",
+    z189sj: ["fw5db7e", "f1uw59to"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["f1uw59to", "fw5db7e"],
+    i8kkvl: "f1ufnopg",
+    Belr9w4: "f14sijuj"
+  }
+}, {
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".fobksn0{grid-row-start:aside;}", ".fmy5l6f{grid-column-start:aside;}", ".fzqypwc{grid-row-end:aside;}", ".f1tmftl3{grid-column-end:aside;}", ".f10pi13n{position:relative;}", ".f19g0ac{z-index:1;}", ".f1g0x7ka{padding-top:0;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1qch9an{padding-bottom:0;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f11zp4z2{z-index:0;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}"]
+});
+/**
+ * Apply styling to the TreeItemAside slots based on the state
+ */
+export const useTreeItemAsideStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(treeItemAsideClassNames.root, styles.base, state.actions ? styles.actions : styles.aside, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useTreeItemAsideStyles.styles.js.map

package/lib/components/TreeItemAside/useTreeItemAsideStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","treeItemAsideClassNames","root","useStyles","base","mc9l5x","Frg6f3","Ijaq50","Br312pm","nk6f5a","Bw0ie65","actions","qhf8xq","Bj3rh1h","z8tnut","z189sj","Byoj8tv","uwmqm3","aside","Bt984gj","i8kkvl","Belr9w4","d","useTreeItemAsideStyles_unstable","state","styles","className"],"sources":["useTreeItemAsideStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeItemAsideClassNames = {\n    root: 'fui-TreeItemAside'\n};\n/**\n * Styles for the action icon slot\n */ const useStyles = makeStyles({\n    base: {\n        display: 'flex',\n        marginLeft: 'auto',\n        ...shorthands.gridArea('aside')\n    },\n    actions: {\n        position: 'relative',\n        zIndex: 1,\n        ...shorthands.padding(0, tokens.spacingHorizontalS)\n    },\n    aside: {\n        alignItems: 'center',\n        zIndex: 0,\n        ...shorthands.padding(0, tokens.spacingHorizontalM),\n        ...shorthands.gap(tokens.spacingHorizontalXS)\n    }\n});\n/**\n * Apply styling to the TreeItemAside slots based on the state\n */ export const useTreeItemAsideStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(treeItemAsideClassNames.root, styles.base, state.actions ? styles.actions : styles.aside, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAO,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;IAAAN,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAG,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAiBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,MAAM,GAAGtB,SAAS,CAAC,CAAC;EAC1BqB,KAAK,CAACtB,IAAI,CAACwB,SAAS,GAAG5B,YAAY,CAACG,uBAAuB,CAACC,IAAI,EAAEuB,MAAM,CAACrB,IAAI,EAAEoB,KAAK,CAACb,OAAO,GAAGc,MAAM,CAACd,OAAO,GAAGc,MAAM,CAACP,KAAK,EAAEM,KAAK,CAACtB,IAAI,CAACwB,SAAS,CAAC;EACnJ,OAAOF,KAAK;AAChB,CAAC"}

package/lib/components/TreeItemChevron.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { useFluent_unstable } from '@fluentui/react-shared-contexts';
+import { ChevronRight12Regular } from '@fluentui/react-icons';
+import { useTreeItemContext_unstable } from '../contexts/treeItemContext';
+export const TreeItemChevron = /*#__PURE__*/ React.memo(()=>{
+    const open = useTreeItemContext_unstable((ctx)=>ctx.open);
+    const { dir  } = useFluent_unstable();
+    const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;
+    return /*#__PURE__*/ React.createElement(ChevronRight12Regular, {
+        style: expandIconInlineStyles[expandIconRotation]
+    });
+});
+TreeItemChevron.displayName = 'TreeItemChevron';
+const expandIconInlineStyles = {
+    90: {
+        transform: `rotate(90deg)`
+    },
+    0: {
+        transform: `rotate(0deg)`
+    },
+    180: {
+        transform: `rotate(180deg)`
+    }
+};

package/lib/components/TreeItemChevron.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TreeItemChevron.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { ChevronRight12Regular } from '@fluentui/react-icons';\nimport { useTreeItemContext_unstable } from '../contexts/treeItemContext';\n\nexport const TreeItemChevron = React.memo(() => {\n  const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n  const { dir } = useFluent_unstable();\n\n  const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n  return <ChevronRight12Regular style={expandIconInlineStyles[expandIconRotation]} />;\n});\nTreeItemChevron.displayName = 'TreeItemChevron';\n\nconst expandIconInlineStyles = {\n  90: { transform: `rotate(90deg)` },\n  0: { transform: `rotate(0deg)` },\n  180: { transform: `rotate(180deg)` },\n} as const;\n"],"names":["React","useFluent_unstable","ChevronRight12Regular","useTreeItemContext_unstable","TreeItemChevron","memo","open","ctx","dir","expandIconRotation","style","expandIconInlineStyles","displayName","transform"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,qBAAqB,QAAQ,wBAAwB;AAC9D,SAASC,2BAA2B,QAAQ,8BAA8B;AAE1E,OAAO,MAAMC,gCAAkBJ,MAAMK,IAAI,CAAC,IAAM;IAC9C,MAAMC,OAAOH,4BAA4BI,CAAAA,MAAOA,IAAID,IAAI;IAExD,MAAM,EAAEE,IAAG,EAAE,GAAGP;IAEhB,MAAMQ,qBAAqBH,OAAO,KAAKE,QAAQ,QAAQ,IAAI,GAAG;IAC9D,qBAAO,oBAACN;QAAsBQ,OAAOC,sBAAsB,CAACF,mBAAmB;;AACjF,GAAG;AACHL,gBAAgBQ,WAAW,GAAG;AAE9B,MAAMD,yBAAyB;IAC7B,IAAI;QAAEE,WAAW,CAAC,aAAa,CAAC;IAAC;IACjC,GAAG;QAAEA,WAAW,CAAC,YAAY,CAAC;IAAC;IAC/B,KAAK;QAAEA,WAAW,CAAC,cAAc,CAAC;IAAC;AACrC"}

package/lib/components/TreeItemLayout/TreeItemLayout.js

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { useTreeItemLayout_unstable } from './useTreeItemLayout';
 import { renderTreeItemLayout_unstable } from './renderTreeItemLayout';
-import { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles';
+import { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles.styles';
 /**
- * TreeItemLayout component - TODO: add more docs
- */
-export const TreeItemLayout = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useTreeItemLayout_unstable(props, ref);
-  useTreeItemLayoutStyles_unstable(state);
-  return renderTreeItemLayout_unstable(state);
+ * The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.
+ * It provides a consistent visual structure for tree items in a `Tree` component.
+ * This component should only be used as a direct child of `TreeItem`.
+ */ export const TreeItemLayout = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTreeItemLayout_unstable(props, ref);
+    useTreeItemLayoutStyles_unstable(state);
+    return renderTreeItemLayout_unstable(state);
 });
 TreeItemLayout.displayName = 'TreeItemLayout';
-//# sourceMappingURL=TreeItemLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useTreeItemLayout_unstable","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","TreeItemLayout","forwardRef","props","ref","state","displayName"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nimport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nimport { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles';\nimport type { TreeItemLayoutProps } from './TreeItemLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TreeItemLayout component - TODO: add more docs\n */\nexport const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItemLayout_unstable(props, ref);\n\n  useTreeItemLayoutStyles_unstable(state);\n  return renderTreeItemLayout_unstable(state);\n});\n\nTreeItemLayout.displayName = 'TreeItemLayout';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,gCAAgC,QAAQ,2BAA2B;AAI5E;;;AAGA,OAAO,MAAMC,cAAc,gBAA6CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtG,MAAMC,KAAK,GAAGP,0BAA0B,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEpDJ,gCAAgC,CAACK,KAAK,CAAC;EACvC,OAAON,6BAA6B,CAACM,KAAK,CAAC;AAC7C,CAAC,CAAC;AAEFJ,cAAc,CAACK,WAAW,GAAG,gBAAgB"}
+{"version":3,"sources":["TreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nimport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nimport { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles.styles';\nimport type { TreeItemLayoutProps } from './TreeItemLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.\n * It provides a consistent visual structure for tree items in a `Tree` component.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItemLayout_unstable(props, ref);\n\n  useTreeItemLayoutStyles_unstable(state);\n  return renderTreeItemLayout_unstable(state);\n});\n\nTreeItemLayout.displayName = 'TreeItemLayout';\n"],"names":["React","useTreeItemLayout_unstable","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","TreeItemLayout","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAIpF;;;;CAIC,GACD,OAAO,MAAMC,+BAA2DJ,MAAMK,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACvG,MAAMC,QAAQP,2BAA2BK,OAAOC;IAEhDJ,iCAAiCK;IACjC,OAAON,8BAA8BM;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

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

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=TreeItemLayout.types.js.map
+export { };

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

@@ -1 +1 @@
-{"version":3,"file":"TreeItemLayout.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-tree/src/components/TreeItemLayout/TreeItemLayout.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TreeItemContextValue } from '../../contexts/treeItemContext';\n\nexport type TreeItemLayoutSlots = {\n  root: Slot<'div'>;\n  /**\n   * Icon slot that renders right before main content\n   */\n  iconBefore?: Slot<'span'>;\n  /**\n   * Icon slot that renders right after main content\n   */\n  iconAfter?: Slot<'span'>;\n  aside?: Slot<'span'>;\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> & TreeItemContextValue;\n"]}
+{"version":3,"sources":["TreeItemLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TreeItemLayoutSlots = {\n  root: 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  /**\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\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"],"names":[],"mappings":"AAAA,WA2BsE"}

package/lib/components/TreeItemLayout/index.js

@@ -2,5 +2,4 @@ export * from './TreeItemLayout';
 export * from './TreeItemLayout.types';
 export * from './renderTreeItemLayout';
 export * from './useTreeItemLayout';
-export * from './useTreeItemLayoutStyles';
-//# sourceMappingURL=index.js.map
+export * from './useTreeItemLayoutStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-tree/src/components/TreeItemLayout/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './TreeItemLayout';\nexport * from './TreeItemLayout.types';\nexport * from './renderTreeItemLayout';\nexport * from './useTreeItemLayout';\nexport * from './useTreeItemLayoutStyles';\n"]}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TreeItemLayout';\nexport * from './TreeItemLayout.types';\nexport * from './renderTreeItemLayout';\nexport * from './useTreeItemLayout';\nexport * from './useTreeItemLayoutStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,mBAAmB;AACjC,cAAc,yBAAyB;AACvC,cAAc,yBAAyB;AACvC,cAAc,sBAAsB;AACpC,cAAc,mCAAmC"}

package/lib/components/TreeItemLayout/renderTreeItemLayout.js

@@ -1,24 +1,8 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of TreeItemLayout
- */
-export const renderTreeItemLayout_unstable = state => {
-  const {
-    isActionsVisible
-  } = state;
-  const {
-    slots,
-    slotProps
-  } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, {
-    ...slotProps.root
-  }, slots.iconBefore && /*#__PURE__*/React.createElement(slots.iconBefore, {
-    ...slotProps.iconBefore
-  }), slotProps.root.children, slots.iconAfter && /*#__PURE__*/React.createElement(slots.iconAfter, {
-    ...slotProps.iconAfter
-  }), !isActionsVisible && slots.aside && /*#__PURE__*/React.createElement(slots.aside, {
-    ...slotProps.aside
-  }));
+ */ 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.iconBefore && /*#__PURE__*/ createElement(slots.iconBefore, slotProps.iconBefore), slotProps.root.children, slots.iconAfter && /*#__PURE__*/ createElement(slots.iconAfter, slotProps.iconAfter));
 };
-//# sourceMappingURL=renderTreeItemLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","renderTreeItemLayout_unstable","state","isActionsVisible","slots","slotProps","createElement","root","iconBefore","children","iconAfter","aside"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItemLayout/renderTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutState, TreeItemLayoutSlots } from './TreeItemLayout.types';\n\n/**\n * Render the final JSX of TreeItemLayout\n */\nexport const renderTreeItemLayout_unstable = (state: TreeItemLayoutState) => {\n  const { isActionsVisible } = state;\n  const { slots, slotProps } = getSlots<TreeItemLayoutSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.iconBefore && <slots.iconBefore {...slotProps.iconBefore} />}\n      {slotProps.root.children}\n      {slots.iconAfter && <slots.iconAfter {...slotProps.iconAfter} />}\n      {!isActionsVisible && slots.aside && <slots.aside {...slotProps.aside} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,6BAA6B,GAAIC,KAA0B,IAAI;EAC1E,MAAM;IAAEC;EAAgB,CAAE,GAAGD,KAAK;EAClC,MAAM;IAAEE,KAAK;IAAEC;EAAS,CAAE,GAAGL,QAAQ,CAAsBE,KAAK,CAAC;EACjE,oBACEH,KAAA,CAAAO,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAC3BH,KAAK,CAACI,UAAU,iBAAIT,KAAA,CAAAO,aAAA,CAACF,KAAK,CAACI,UAAU;IAAA,GAAKH,SAAS,CAACG;EAAU,EAAI,EAClEH,SAAS,CAACE,IAAI,CAACE,QAAQ,EACvBL,KAAK,CAACM,SAAS,iBAAIX,KAAA,CAAAO,aAAA,CAACF,KAAK,CAACM,SAAS;IAAA,GAAKL,SAAS,CAACK;EAAS,EAAI,EAC/D,CAACP,gBAAgB,IAAIC,KAAK,CAACO,KAAK,iBAAIZ,KAAA,CAAAO,aAAA,CAACF,KAAK,CAACO,KAAK;IAAA,GAAKN,SAAS,CAACM;EAAK,EAAI,CAC9D;AAEjB,CAAC"}
+{"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';\n\n/**\n * Render the final JSX of TreeItemLayout\n */\nexport const renderTreeItemLayout_unstable = (state: TreeItemLayoutState) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemLayoutSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n      {slots.iconBefore && <slots.iconBefore {...slotProps.iconBefore} />}\n      {slotProps.root.children}\n      {slots.iconAfter && <slots.iconAfter {...slotProps.iconAfter} />}\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","renderTreeItemLayout_unstable","state","slots","slotProps","root","expandIcon","iconBefore","children","iconAfter"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,QAA+B;IAC3E,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAAkCE;IAC/D,qBACE,AAZJ,cAYKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,UAAU,kBAAI,AAb3B,cAa4BH,MAAMG,UAAU,EAAKF,UAAUE,UAAU,GAC9DH,MAAMI,UAAU,kBAAI,AAd3B,cAc4BJ,MAAMI,UAAU,EAAKH,UAAUG,UAAU,GAC9DH,UAAUC,IAAI,CAACG,QAAQ,EACvBL,MAAMM,SAAS,kBAAI,AAhB1B,cAgB2BN,MAAMM,SAAS,EAAKL,UAAUK,SAAS;AAGlE,EAAE"}

package/lib/components/TreeItemLayout/useTreeItemLayout.js

@@ -1,5 +1,7 @@
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { getNativeElementProps, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
 import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
+import { TreeItemChevron } from '../TreeItemChevron';
 /**
  * Create the state required to render TreeItemLayout.
  *
@@ -8,42 +10,39 @@ import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
  *
  * @param props - props from this instance of TreeItemLayout
  * @param ref - reference to root HTMLElement of TreeItemLayout
- */
-export const useTreeItemLayout_unstable = (props, ref) => {
-  const {
-    iconAfter,
-    iconBefore,
-    aside,
-    as = 'div'
-  } = props;
-  const treeItemContext = useTreeItemContext_unstable();
-  return {
-    ...treeItemContext,
-    components: {
-      root: 'div',
-      iconBefore: 'span',
-      iconAfter: 'span',
-      aside: 'span'
-    },
-    root: getNativeElementProps(as, {
-      ...props,
-      ref
-    }),
-    iconBefore: resolveShorthand(iconBefore, {
-      defaultProps: {
-        'aria-hidden': true
-      }
-    }),
-    iconAfter: resolveShorthand(iconAfter, {
-      defaultProps: {
-        'aria-hidden': true
-      }
-    }),
-    aside: resolveShorthand(aside, {
-      defaultProps: {
-        'aria-hidden': true
-      }
-    })
-  };
+ */ export const useTreeItemLayout_unstable = (props, ref)=>{
+    const { iconAfter , iconBefore , expandIcon , as ='span'  } = props;
+    const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);
+    const expandIconRef = useTreeItemContext_unstable((ctx)=>ctx.expandIconRef);
+    const isBranch = useTreeItemContext_unstable((ctx)=>ctx.itemType === 'branch');
+    return {
+        components: {
+            root: 'div',
+            expandIcon: 'div',
+            iconBefore: 'div',
+            iconAfter: 'div'
+        },
+        root: getNativeElementProps(as, {
+            ...props,
+            ref: useMergedRefs(ref, layoutRef)
+        }),
+        iconBefore: resolveShorthand(iconBefore, {
+            defaultProps: {
+                'aria-hidden': true
+            }
+        }),
+        iconAfter: resolveShorthand(iconAfter, {
+            defaultProps: {
+                'aria-hidden': true
+            }
+        }),
+        expandIcon: resolveShorthand(expandIcon, {
+            required: isBranch,
+            defaultProps: {
+                children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),
+                'aria-hidden': true,
+                ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef)
+            }
+        })
+    };
 };
-//# sourceMappingURL=useTreeItemLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["getNativeElementProps","resolveShorthand","useTreeItemContext_unstable","useTreeItemLayout_unstable","props","ref","iconAfter","iconBefore","aside","as","treeItemContext","components","root","defaultProps"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutProps, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\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 { iconAfter, iconBefore, aside, as = 'div' } = props;\n  const treeItemContext = useTreeItemContext_unstable();\n\n  return {\n    ...treeItemContext,\n    components: {\n      root: 'div',\n      iconBefore: 'span',\n      iconAfter: 'span',\n      aside: 'span',\n    },\n    root: getNativeElementProps(as, { ...props, ref }),\n    iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),\n    iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),\n    aside: resolveShorthand(aside, { defaultProps: { 'aria-hidden': true } }),\n  };\n};\n"],"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AAEnF,SAASC,2BAA2B,QAAQ,gCAAgC;AAE5E;;;;;;;;;AASA,OAAO,MAAMC,0BAA0B,GAAGA,CACxCC,KAA0B,EAC1BC,GAA2B,KACJ;EACvB,MAAM;IAAEC,SAAS;IAAEC,UAAU;IAAEC,KAAK;IAAEC,EAAE,GAAG;EAAK,CAAE,GAAGL,KAAK;EAC1D,MAAMM,eAAe,GAAGR,2BAA2B,EAAE;EAErD,OAAO;IACL,GAAGQ,eAAe;IAClBC,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXL,UAAU,EAAE,MAAM;MAClBD,SAAS,EAAE,MAAM;MACjBE,KAAK,EAAE;KACR;IACDI,IAAI,EAAEZ,qBAAqB,CAACS,EAAE,EAAE;MAAE,GAAGL,KAAK;MAAEC;IAAG,CAAE,CAAC;IAClDE,UAAU,EAAEN,gBAAgB,CAACM,UAAU,EAAE;MAAEM,YAAY,EAAE;QAAE,aAAa,EAAE;MAAI;IAAE,CAAE,CAAC;IACnFP,SAAS,EAAEL,gBAAgB,CAACK,SAAS,EAAE;MAAEO,YAAY,EAAE;QAAE,aAAa,EAAE;MAAI;IAAE,CAAE,CAAC;IACjFL,KAAK,EAAEP,gBAAgB,CAACO,KAAK,EAAE;MAAEK,YAAY,EAAE;QAAE,aAAa,EAAE;MAAI;IAAE,CAAE;GACzE;AACH,CAAC"}
+{"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutProps, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\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 { iconAfter, iconBefore, expandIcon, as = 'span' } = props;\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n  const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      iconAfter: 'div',\n    },\n    root: getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }),\n    iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),\n    iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),\n    expandIcon: resolveShorthand(expandIcon, {\n      required: isBranch,\n      defaultProps: {\n        children: <TreeItemChevron />,\n        'aria-hidden': true,\n        ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef),\n      },\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useMergedRefs","useTreeItemContext_unstable","TreeItemChevron","useTreeItemLayout_unstable","props","ref","iconAfter","iconBefore","expandIcon","as","layoutRef","ctx","expandIconRef","isBranch","itemType","components","root","defaultProps","required","children","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,mBAAmB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAExH,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,eAAe,QAAQ,qBAAqB;AAErD;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC,MACwB;IACxB,MAAM,EAAEC,UAAS,EAAEC,WAAU,EAAEC,WAAU,EAAEC,IAAK,OAAM,EAAE,GAAGL;IAE3D,MAAMM,YAAYT,4BAA4BU,CAAAA,MAAOA,IAAID,SAAS;IAClE,MAAME,gBAAgBX,4BAA4BU,CAAAA,MAAOA,IAAIC,aAAa;IAC1E,MAAMC,WAAWZ,4BAA4BU,CAAAA,MAAOA,IAAIG,QAAQ,KAAK;IAErE,OAAO;QACLC,YAAY;YACVC,MAAM;YACNR,YAAY;YACZD,YAAY;YACZD,WAAW;QACb;QACAU,MAAMnB,sBAAsBY,IAAI;YAAE,GAAGL,KAAK;YAAEC,KAAKL,cAAcK,KAAKK;QAAW;QAC/EH,YAAYR,iBAAiBQ,YAAY;YAAEU,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QACjFX,WAAWP,iBAAiBO,WAAW;YAAEW,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QAC/ET,YAAYT,iBAAiBS,YAAY;YACvCU,UAAUL;YACVI,cAAc;gBACZE,wBAAU,oBAACjB;gBACX,eAAe,IAAI;gBACnBG,KAAKL,cAAcF,oBAAoBU,cAAcA,WAAWH,GAAG,GAAGe,SAAS,EAAER;YACnF;QACF;IACF;AACF,EAAE"}