@fluentui/react-tree 9.0.4 → 9.0.6

package/lib/components/Tree/useTreeContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeContextValues.ts"],"sourcesContent":["import { TreeContextValue } from '../../contexts';\nimport { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n  const { openItems, checkedItems, selectionMode, level, appearance, size, requestTreeResponse } = state;\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const tree: TreeContextValue = {\n    size,\n    level,\n    openItems,\n    appearance,\n    checkedItems,\n    selectionMode,\n    requestTreeResponse,\n  };\n\n  return { tree };\n}\n"],"names":["useTreeContextValues_unstable","state","openItems","checkedItems","selectionMode","level","appearance","size","requestTreeResponse","tree"],"mappings":"AAGA,OAAO,SAASA,8BAA8BC,KAAgB,EAAqB;IACjF,MAAM,EAAEC,UAAS,EAAEC,aAAY,EAAEC,cAAa,EAAEC,MAAK,EAAEC,WAAU,EAAEC,KAAI,EAAEC,oBAAmB,EAAE,GAAGP;IACjG;;;GAGC,GACD,MAAMQ,OAAyB;QAC7BF;QACAF;QACAH;QACAI;QACAH;QACAC;QACAI;IACF;IAEA,OAAO;QAAEC;IAAK;AAChB,CAAC"}
+{"version":3,"sources":["useTreeContextValues.ts"],"sourcesContent":["import { TreeContextValue } from '../../contexts';\nimport { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n  const { openItems, checkedItems, selectionMode, level, appearance, size, requestTreeResponse } = state;\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const tree: TreeContextValue = {\n    size,\n    level,\n    openItems,\n    appearance,\n    checkedItems,\n    selectionMode,\n    requestTreeResponse,\n  };\n\n  return { tree };\n}\n"],"names":["useTreeContextValues_unstable","state","openItems","checkedItems","selectionMode","level","appearance","size","requestTreeResponse","tree"],"mappings":"AAGA,OAAO,SAASA,8BAA8BC,KAAgB;IAC5D,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,aAAa,EAAEC,KAAK,EAAEC,UAAU,EAAEC,IAAI,EAAEC,mBAAmB,EAAE,GAAGP;IACjG;;;GAGC,GACD,MAAMQ,OAAyB;QAC7BF;QACAF;QACAH;QACAI;QACAH;QACAC;QACAI;IACF;IAEA,OAAO;QAAEC;IAAK;AAChB"}

package/lib/components/Tree/useTreeNavigation.js

@@ -3,7 +3,7 @@ import { treeDataTypes } from '../../utils/tokens';
 import { treeItemFilter } from '../../utils/treeItemFilter';
 import { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';
 export function useTreeNavigation() {
-    const { rove , initialize  } = useRovingTabIndex(treeItemFilter);
+    const { rove, initialize } = useRovingTabIndex(treeItemFilter);
     const getNextElement = (data, treeItemWalker)=>{
         switch(data.type){
             case treeDataTypes.Click:

package/lib/components/Tree/useTreeNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeNavigation.ts"],"sourcesContent":["import { TreeNavigationData_unstable } from './Tree.types';\nimport { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';\nimport { HTMLElementWalker } from '../../utils/createHTMLElementWalker';\n\nexport function useTreeNavigation() {\n  const { rove, initialize } = useRovingTabIndex(treeItemFilter);\n\n  const getNextElement = (data: TreeNavigationData_unstable, treeItemWalker: HTMLElementWalker) => {\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        treeItemWalker.currentElement = data.target;\n        return nextTypeAheadElement(treeItemWalker, data.event.key);\n      case treeDataTypes.ArrowLeft:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.parentElement();\n      case treeDataTypes.ArrowRight:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.firstChild();\n      case treeDataTypes.End:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return lastChildRecursive(treeItemWalker);\n      case treeDataTypes.Home:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return treeItemWalker.firstChild();\n      case treeDataTypes.ArrowDown:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.nextElement();\n      case treeDataTypes.ArrowUp:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.previousElement();\n    }\n  };\n  function navigate(data: TreeNavigationData_unstable, walker: HTMLElementWalker) {\n    const nextElement = getNextElement(data, walker);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  }\n  return { navigate, initialize } as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n  let lastElement: HTMLElement | null = null;\n  let nextElement: HTMLElement | null = null;\n  while ((nextElement = walker.lastChild())) {\n    lastElement = nextElement;\n  }\n  return lastElement;\n}\n"],"names":["nextTypeAheadElement","treeDataTypes","treeItemFilter","useRovingTabIndex","useTreeNavigation","rove","initialize","getNextElement","data","treeItemWalker","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","root","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","walker","lastElement","lastChild"],"mappings":"AACA,SAASA,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,iBAAiB,QAAQ,kCAAkC;AAGpE,OAAO,SAASC,oBAAoB;IAClC,MAAM,EAAEC,KAAI,EAAEC,WAAU,EAAE,GAAGH,kBAAkBD;IAE/C,MAAMK,iBAAiB,CAACC,MAAmCC,iBAAsC;QAC/F,OAAQD,KAAKE,IAAI;YACf,KAAKT,cAAcU,KAAK;gBACtB,OAAOH,KAAKI,MAAM;YACpB,KAAKX,cAAcY,SAAS;gBAC1BJ,eAAeK,cAAc,GAAGN,KAAKI,MAAM;gBAC3C,OAAOZ,qBAAqBS,gBAAgBD,KAAKO,KAAK,CAACC,GAAG;YAC5D,KAAKf,cAAcgB,SAAS;gBAC1BR,eAAeK,cAAc,GAAGN,KAAKI,MAAM;gBAC3C,OAAOH,eAAeS,aAAa;YACrC,KAAKjB,cAAckB,UAAU;gBAC3BV,eAAeK,cAAc,GAAGN,KAAKI,MAAM;gBAC3C,OAAOH,eAAeW,UAAU;YAClC,KAAKnB,cAAcoB,GAAG;gBACpBZ,eAAeK,cAAc,GAAGL,eAAea,IAAI;gBACnD,OAAOC,mBAAmBd;YAC5B,KAAKR,cAAcuB,IAAI;gBACrBf,eAAeK,cAAc,GAAGL,eAAea,IAAI;gBACnD,OAAOb,eAAeW,UAAU;YAClC,KAAKnB,cAAcwB,SAAS;gBAC1BhB,eAAeK,cAAc,GAAGN,KAAKI,MAAM;gBAC3C,OAAOH,eAAeiB,WAAW;YACnC,KAAKzB,cAAc0B,OAAO;gBACxBlB,eAAeK,cAAc,GAAGN,KAAKI,MAAM;gBAC3C,OAAOH,eAAemB,eAAe;QACzC;IACF;IACA,SAASC,SAASrB,IAAiC,EAAEsB,MAAyB,EAAE;QAC9E,MAAMJ,cAAcnB,eAAeC,MAAMsB;QACzC,IAAIJ,aAAa;YACfrB,KAAKqB;QACP,CAAC;IACH;IACA,OAAO;QAAEG;QAAUvB;IAAW;AAChC,CAAC;AAED,SAASiB,mBAAmBO,MAAyB,EAAE;IACrD,IAAIC,cAAkC,IAAI;IAC1C,IAAIL,cAAkC,IAAI;IAC1C,MAAQA,cAAcI,OAAOE,SAAS,GAAK;QACzCD,cAAcL;IAChB;IACA,OAAOK;AACT"}
+{"version":3,"sources":["useTreeNavigation.ts"],"sourcesContent":["import { TreeNavigationData_unstable } from './Tree.types';\nimport { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';\nimport { HTMLElementWalker } from '../../utils/createHTMLElementWalker';\n\nexport function useTreeNavigation() {\n  const { rove, initialize } = useRovingTabIndex(treeItemFilter);\n\n  const getNextElement = (data: TreeNavigationData_unstable, treeItemWalker: HTMLElementWalker) => {\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        treeItemWalker.currentElement = data.target;\n        return nextTypeAheadElement(treeItemWalker, data.event.key);\n      case treeDataTypes.ArrowLeft:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.parentElement();\n      case treeDataTypes.ArrowRight:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.firstChild();\n      case treeDataTypes.End:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return lastChildRecursive(treeItemWalker);\n      case treeDataTypes.Home:\n        treeItemWalker.currentElement = treeItemWalker.root;\n        return treeItemWalker.firstChild();\n      case treeDataTypes.ArrowDown:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.nextElement();\n      case treeDataTypes.ArrowUp:\n        treeItemWalker.currentElement = data.target;\n        return treeItemWalker.previousElement();\n    }\n  };\n  function navigate(data: TreeNavigationData_unstable, walker: HTMLElementWalker) {\n    const nextElement = getNextElement(data, walker);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  }\n  return { navigate, initialize } as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n  let lastElement: HTMLElement | null = null;\n  let nextElement: HTMLElement | null = null;\n  while ((nextElement = walker.lastChild())) {\n    lastElement = nextElement;\n  }\n  return lastElement;\n}\n"],"names":["nextTypeAheadElement","treeDataTypes","treeItemFilter","useRovingTabIndex","useTreeNavigation","rove","initialize","getNextElement","data","treeItemWalker","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","root","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","walker","lastElement","lastChild"],"mappings":"AACA,SAASA,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,iBAAiB,QAAQ,kCAAkC;AAGpE,OAAO,SAASC;IACd,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAE,GAAGH,kBAAkBD;IAE/C,MAAMK,iBAAiB,CAACC,MAAmCC;QACzD,OAAQD,KAAKE,IAAI;YACf,KAAKT,cAAcU,KAAK;gBACtB,OAAOH,KAAKI,MAAM;YACpB,KAAKX,cAAcY,SAAS;gBAC1BJ,eAAeK,cAAc,GAAGN,KAAKI,MAAM;gBAC3C,OAAOZ,qBAAqBS,gBAAgBD,KAAKO,KAAK,CAACC,GAAG;YAC5D,KAAKf,cAAcgB,SAAS;gBAC1BR,eAAeK,cAAc,GAAGN,KAAKI,MAAM;gBAC3C,OAAOH,eAAeS,aAAa;YACrC,KAAKjB,cAAckB,UAAU;gBAC3BV,eAAeK,cAAc,GAAGN,KAAKI,MAAM;gBAC3C,OAAOH,eAAeW,UAAU;YAClC,KAAKnB,cAAcoB,GAAG;gBACpBZ,eAAeK,cAAc,GAAGL,eAAea,IAAI;gBACnD,OAAOC,mBAAmBd;YAC5B,KAAKR,cAAcuB,IAAI;gBACrBf,eAAeK,cAAc,GAAGL,eAAea,IAAI;gBACnD,OAAOb,eAAeW,UAAU;YAClC,KAAKnB,cAAcwB,SAAS;gBAC1BhB,eAAeK,cAAc,GAAGN,KAAKI,MAAM;gBAC3C,OAAOH,eAAeiB,WAAW;YACnC,KAAKzB,cAAc0B,OAAO;gBACxBlB,eAAeK,cAAc,GAAGN,KAAKI,MAAM;gBAC3C,OAAOH,eAAemB,eAAe;QACzC;IACF;IACA,SAASC,SAASrB,IAAiC,EAAEsB,MAAyB;QAC5E,MAAMJ,cAAcnB,eAAeC,MAAMsB;QACzC,IAAIJ,aAAa;YACfrB,KAAKqB;QACP;IACF;IACA,OAAO;QAAEG;QAAUvB;IAAW;AAChC;AAEA,SAASiB,mBAAmBO,MAAyB;IACnD,IAAIC,cAAkC;IACtC,IAAIL,cAAkC;IACtC,MAAQA,cAAcI,OAAOE,SAAS,GAAK;QACzCD,cAAcL;IAChB;IACA,OAAOK;AACT"}

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

@@ -1 +1 @@
-{"version":3,"sources":["TreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles.styles';\nimport type { TreeItemProps } from './TreeItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n\n/**\n * The `TreeItem` component represents a single item in a tree.\n * It expects a certain order of children to work properly: the first child should be the node itself,\n * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.\n * This order follows the same order as document traversal for the TreeWalker API in JavaScript:\n * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.\n * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,\n * which should be used as a direct child of TreeItem.\n *\n * When a TreeItem has nested child subtree, an expand/collapse control is displayed,\n * allowing the user to show or hide the children.\n */\nexport const TreeItem: ForwardRefComponent<TreeItemProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItem_unstable(props, ref);\n\n  useTreeItemStyles_unstable(state);\n  const contextValues = useTreeItemContextValues_unstable(state);\n  return renderTreeItem_unstable(state, contextValues);\n});\n\nTreeItem.displayName = 'TreeItem';\n"],"names":["React","useTreeItem_unstable","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","TreeItem","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,SAASC,iCAAiC,QAAQ,6BAA6B;AAE/E;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC3F,MAAMC,QAAQR,qBAAqBM,OAAOC;IAE1CL,2BAA2BM;IAC3B,MAAMC,gBAAgBN,kCAAkCK;IACxD,OAAOP,wBAAwBO,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}
+{"version":3,"sources":["TreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles.styles';\nimport type { TreeItemProps } from './TreeItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n\n/**\n * The `TreeItem` component represents a single item in a tree.\n * It expects a certain order of children to work properly: the first child should be the node itself,\n * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.\n * This order follows the same order as document traversal for the TreeWalker API in JavaScript:\n * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.\n * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,\n * which should be used as a direct child of TreeItem.\n *\n * When a TreeItem has nested child subtree, an expand/collapse control is displayed,\n * allowing the user to show or hide the children.\n */\nexport const TreeItem: ForwardRefComponent<TreeItemProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItem_unstable(props, ref);\n\n  useTreeItemStyles_unstable(state);\n  const contextValues = useTreeItemContextValues_unstable(state);\n  return renderTreeItem_unstable(state, contextValues);\n});\n\nTreeItem.displayName = 'TreeItem';\n"],"names":["React","useTreeItem_unstable","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","TreeItem","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,SAASC,iCAAiC,QAAQ,6BAA6B;AAE/E;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQR,qBAAqBM,OAAOC;IAE1CL,2BAA2BM;IAC3B,MAAMC,gBAAgBN,kCAAkCK;IACxD,OAAOP,wBAAwBO,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

package/lib/components/TreeItem/renderTreeItem.js

@@ -1,11 +1,14 @@
-/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 import { TreeItemProvider } from '../../contexts';
 /**
  * Render the final JSX of TreeItem
  */ export const renderTreeItem_unstable = (state, contextValues)=>{
     assertSlots(state);
-    return /*#__PURE__*/ createElement(state.root, null, /*#__PURE__*/ createElement(TreeItemProvider, {
-        value: contextValues.treeItem
-    }, state.root.children));
+    return /*#__PURE__*/ _jsx(state.root, {
+        children: /*#__PURE__*/ _jsx(TreeItemProvider, {
+            value: contextValues.treeItem,
+            children: state.root.children
+        })
+    });
 };

package/lib/components/TreeItem/renderTreeItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderTreeItem.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TreeItemState, TreeItemContextValues, TreeItemSlots } from './TreeItem.types';\nimport { TreeItemProvider } from '../../contexts';\n\n/**\n * Render the final JSX of TreeItem\n */\nexport const renderTreeItem_unstable = (state: TreeItemState, contextValues: TreeItemContextValues) => {\n  assertSlots<TreeItemSlots>(state);\n\n  return (\n    <state.root>\n      <TreeItemProvider value={contextValues.treeItem}>{state.root.children}</TreeItemProvider>\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","TreeItemProvider","renderTreeItem_unstable","state","contextValues","root","value","treeItem","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,gBAAgB,QAAQ,iBAAiB;AAElD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC,gBAAyC;IACrGJ,YAA2BG;IAE3B,qBACE,AAdJ,cAcKA,MAAME,IAAI,sBACT,AAfN,cAeOJ;QAAiBK,OAAOF,cAAcG,QAAQ;OAAGJ,MAAME,IAAI,CAACG,QAAQ;AAG3E,EAAE"}
+{"version":3,"sources":["renderTreeItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TreeItemState, TreeItemContextValues, TreeItemSlots } from './TreeItem.types';\nimport { TreeItemProvider } from '../../contexts';\n\n/**\n * Render the final JSX of TreeItem\n */\nexport const renderTreeItem_unstable = (state: TreeItemState, contextValues: TreeItemContextValues) => {\n  assertSlots<TreeItemSlots>(state);\n\n  return (\n    <state.root>\n      <TreeItemProvider value={contextValues.treeItem}>{state.root.children}</TreeItemProvider>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","TreeItemProvider","renderTreeItem_unstable","state","contextValues","root","value","treeItem","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,gBAAgB,QAAQ,iBAAiB;AAElD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DJ,YAA2BG;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACJ;YAAiBK,OAAOF,cAAcG,QAAQ;sBAAGJ,MAAME,IAAI,CAACG,QAAQ;;;AAG3E,EAAE"}

package/lib/components/TreeItem/useTreeItem.js

@@ -19,7 +19,7 @@ import { treeDataTypes } from '../../utils/tokens';
     // note, if the value is not externally provided,
     // then selection and expansion will not work properly
     const value = useId('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());
-    const { onClick , onKeyDown , as ='div' , itemType ='leaf' , 'aria-level': level = contextLevel , ...rest } = props;
+    const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;
     const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);
     const [isActionsVisible, setActionsVisible] = React.useState(false);
     const [isAsideVisible, setAsideVisible] = React.useState(true);
@@ -36,7 +36,8 @@ import { treeDataTypes } from '../../utils/tokens';
     var _ctx_checkedItems_get;
     const checked = useTreeContext_unstable((ctx)=>(_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false);
     const handleClick = useEventCallback((event)=>{
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        var _onClick;
+        (_onClick = onClick) === null || _onClick === void 0 ? void 0 : _onClick(event);
         if (event.isDefaultPrevented()) {
             return;
         }
@@ -62,7 +63,8 @@ import { treeDataTypes } from '../../utils/tokens';
         });
     });
     const handleKeyDown = useEventCallback((event)=>{
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        var _onKeyDown;
+        (_onKeyDown = onKeyDown) === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(event);
         // Ignore keyboard events that do not originate from the current tree item.
         if (event.isDefaultPrevented() || event.currentTarget !== event.target) {
             return;

package/lib/components/TreeItem/useTreeItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n  const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n\n  // note, if the value is not externally provided,\n  // then selection and expansion will not work properly\n  const value = useId('fuiTreeItemValue-', props.value?.toString());\n\n  const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n\n  const [isActionsVisible, setActionsVisible] = React.useState(false);\n  const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n  const handleActionsRef = React.useCallback((actionsElement: HTMLDivElement | null) => {\n    setAsideVisible(actionsElement === null);\n  }, []);\n\n  const actionsRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLDivElement>(null);\n  const layoutRef = React.useRef<HTMLDivElement>(null);\n  const subtreeRef = React.useRef<HTMLDivElement>(null);\n  const selectionRef = React.useRef<HTMLInputElement>(null);\n\n  const open = useTreeContext_unstable(ctx => ctx.openItems.has(value));\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n  const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n\n  const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n    if (isEventFromActions) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target as Node);\n    if (isEventFromSelection) {\n      return;\n    }\n    const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n    requestTreeResponse({\n      event,\n      value,\n      itemType,\n      target: event.currentTarget,\n      type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n    });\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    // Ignore keyboard events that do not originate from the current tree item.\n    if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n      return;\n    }\n    switch (event.key) {\n      case Space:\n        if (selectionMode !== 'none') {\n          selectionRef.current?.click();\n          event.preventDefault();\n        }\n        return;\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.Enter:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.ArrowLeft:\n      case treeDataTypes.ArrowRight:\n        return requestTreeResponse({ event, target: event.currentTarget, value, itemType, type: event.key });\n    }\n    const isTypeAheadCharacter =\n      event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      requestTreeResponse({ event, target: event.currentTarget, value, itemType, type: treeDataTypes.TypeAhead });\n    }\n  });\n\n  const handleActionsVisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    if (!isTargetFromSubtree) {\n      setActionsVisible(true);\n    }\n  });\n\n  const handleActionsInvisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    const isRelatedTargetFromActions = Boolean(\n      actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n    );\n    if (isRelatedTargetFromActions) {\n      return setActionsVisible(true);\n    }\n    if (!isTargetFromSubtree) {\n      return setActionsVisible(false);\n    }\n  });\n\n  const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    requestTreeResponse({\n      event,\n      value,\n      itemType,\n      type: 'Change',\n      target: event.currentTarget,\n      checked: checked === 'mixed' ? true : !checked,\n    });\n  });\n\n  return {\n    value,\n    open,\n    checked,\n    subtreeRef,\n    layoutRef,\n    selectionRef,\n    expandIconRef,\n    actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n    itemType,\n    level,\n    components: {\n      root: 'div',\n    },\n    isAsideVisible,\n    isActionsVisible,\n    root: slot.always(\n      getNativeElementProps(as, {\n        tabIndex: -1,\n        ...rest,\n        ref,\n        role: 'treeitem',\n        'aria-level': level,\n        [dataTreeItemValueAttrName]: value,\n        'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n        // aria-selected is required according to WAI-ARIA spec\n        // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n        // Casting: when selectionMode is 'single', checked is a boolean\n        'aria-selected': selectionMode === 'single' ? (checked as boolean) : 'false',\n        'aria-expanded': itemType === 'branch' ? open : undefined,\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n        onMouseOver: handleActionsVisible,\n        onFocus: handleActionsVisible,\n        onMouseOut: handleActionsInvisible,\n        onBlur: handleActionsInvisible,\n        onChange: handleChange,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","getNativeElementProps","useId","useMergedRefs","useEventCallback","slot","elementContains","useTreeContext_unstable","dataTreeItemValueAttrName","Space","treeDataTypes","useTreeItem_unstable","props","ref","contextLevel","ctx","level","value","toString","onClick","onKeyDown","as","itemType","rest","requestTreeResponse","isActionsVisible","setActionsVisible","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","selectionMode","checked","checkedItems","get","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isEventFromSelection","isFromExpandIcon","currentTarget","type","ExpandIconClick","Click","handleKeyDown","key","click","preventDefault","End","Home","Enter","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","handleChange","components","root","always","tabIndex","role","undefined","onMouseOver","onFocus","onMouseOut","onBlur","onChange","elementType"],"mappings":"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"}
+{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n  const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n\n  // note, if the value is not externally provided,\n  // then selection and expansion will not work properly\n  const value = useId('fuiTreeItemValue-', props.value?.toString());\n\n  const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n\n  const [isActionsVisible, setActionsVisible] = React.useState(false);\n  const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n  const handleActionsRef = React.useCallback((actionsElement: HTMLDivElement | null) => {\n    setAsideVisible(actionsElement === null);\n  }, []);\n\n  const actionsRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLDivElement>(null);\n  const layoutRef = React.useRef<HTMLDivElement>(null);\n  const subtreeRef = React.useRef<HTMLDivElement>(null);\n  const selectionRef = React.useRef<HTMLInputElement>(null);\n\n  const open = useTreeContext_unstable(ctx => ctx.openItems.has(value));\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n  const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n\n  const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n    if (isEventFromActions) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target as Node);\n    if (isEventFromSelection) {\n      return;\n    }\n    const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n    requestTreeResponse({\n      event,\n      value,\n      itemType,\n      target: event.currentTarget,\n      type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n    });\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    // Ignore keyboard events that do not originate from the current tree item.\n    if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n      return;\n    }\n    switch (event.key) {\n      case Space:\n        if (selectionMode !== 'none') {\n          selectionRef.current?.click();\n          event.preventDefault();\n        }\n        return;\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.Enter:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.ArrowLeft:\n      case treeDataTypes.ArrowRight:\n        return requestTreeResponse({ event, target: event.currentTarget, value, itemType, type: event.key });\n    }\n    const isTypeAheadCharacter =\n      event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      requestTreeResponse({ event, target: event.currentTarget, value, itemType, type: treeDataTypes.TypeAhead });\n    }\n  });\n\n  const handleActionsVisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    if (!isTargetFromSubtree) {\n      setActionsVisible(true);\n    }\n  });\n\n  const handleActionsInvisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    const isRelatedTargetFromActions = Boolean(\n      actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n    );\n    if (isRelatedTargetFromActions) {\n      return setActionsVisible(true);\n    }\n    if (!isTargetFromSubtree) {\n      return setActionsVisible(false);\n    }\n  });\n\n  const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    requestTreeResponse({\n      event,\n      value,\n      itemType,\n      type: 'Change',\n      target: event.currentTarget,\n      checked: checked === 'mixed' ? true : !checked,\n    });\n  });\n\n  return {\n    value,\n    open,\n    checked,\n    subtreeRef,\n    layoutRef,\n    selectionRef,\n    expandIconRef,\n    actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n    itemType,\n    level,\n    components: {\n      root: 'div',\n    },\n    isAsideVisible,\n    isActionsVisible,\n    root: slot.always(\n      getNativeElementProps(as, {\n        tabIndex: -1,\n        ...rest,\n        ref,\n        role: 'treeitem',\n        'aria-level': level,\n        [dataTreeItemValueAttrName]: value,\n        'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n        // aria-selected is required according to WAI-ARIA spec\n        // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n        // Casting: when selectionMode is 'single', checked is a boolean\n        'aria-selected': selectionMode === 'single' ? (checked as boolean) : 'false',\n        'aria-expanded': itemType === 'branch' ? open : undefined,\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n        onMouseOver: handleActionsVisible,\n        onFocus: handleActionsVisible,\n        onMouseOut: handleActionsInvisible,\n        onBlur: handleActionsInvisible,\n        onChange: handleChange,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","getNativeElementProps","useId","useMergedRefs","useEventCallback","slot","elementContains","useTreeContext_unstable","dataTreeItemValueAttrName","Space","treeDataTypes","useTreeItem_unstable","props","ref","contextLevel","ctx","level","value","toString","onClick","onKeyDown","as","itemType","rest","requestTreeResponse","isActionsVisible","setActionsVisible","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","selectionMode","checked","checkedItems","get","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isEventFromSelection","isFromExpandIcon","currentTarget","type","ExpandIconClick","Click","handleKeyDown","key","click","preventDefault","End","Home","Enter","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","handleChange","components","root","always","tabIndex","role","undefined","onMouseOver","onFocus","onMouseOut","onBlur","onChange","elementType"],"mappings":"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"}

package/lib/components/TreeItem/useTreeItemContextValues.js

@@ -1,5 +1,5 @@
 export function useTreeItemContextValues_unstable(state) {
-    const { value , itemType , layoutRef , subtreeRef , open , expandIconRef , actionsRef , isActionsVisible , isAsideVisible , selectionRef , checked  } = state;
+    const { value, itemType, layoutRef, subtreeRef, open, expandIconRef, actionsRef, isActionsVisible, isAsideVisible, selectionRef, checked } = state;
     /**
    * This context is created with "@fluentui/react-context-selector",
    * there is no sense to memoize it

package/lib/components/TreeItem/useTreeItemContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemContextValues.ts"],"sourcesContent":["import type { TreeItemContextValues, TreeItemState } from './TreeItem.types';\nimport type { TreeItemContextValue } from '../../contexts';\n\nexport function useTreeItemContextValues_unstable(state: TreeItemState): TreeItemContextValues {\n  const {\n    value,\n    itemType,\n    layoutRef,\n    subtreeRef,\n    open,\n    expandIconRef,\n    actionsRef,\n    isActionsVisible,\n    isAsideVisible,\n    selectionRef,\n    checked,\n  } = state;\n\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const treeItem: TreeItemContextValue = {\n    value,\n    checked,\n    itemType,\n    layoutRef,\n    subtreeRef,\n    open,\n    selectionRef,\n    isActionsVisible,\n    isAsideVisible,\n    actionsRef,\n    expandIconRef,\n  };\n\n  return { treeItem };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","expandIconRef","actionsRef","isActionsVisible","isAsideVisible","selectionRef","checked","treeItem"],"mappings":"AAGA,OAAO,SAASA,kCAAkCC,KAAoB,EAAyB;IAC7F,MAAM,EACJC,MAAK,EACLC,SAAQ,EACRC,UAAS,EACTC,WAAU,EACVC,KAAI,EACJC,cAAa,EACbC,WAAU,EACVC,iBAAgB,EAChBC,eAAc,EACdC,aAAY,EACZC,QAAO,EACR,GAAGX;IAEJ;;;GAGC,GACD,MAAMY,WAAiC;QACrCX;QACAU;QACAT;QACAC;QACAC;QACAC;QACAK;QACAF;QACAC;QACAF;QACAD;IACF;IAEA,OAAO;QAAEM;IAAS;AACpB,CAAC"}
+{"version":3,"sources":["useTreeItemContextValues.ts"],"sourcesContent":["import type { TreeItemContextValues, TreeItemState } from './TreeItem.types';\nimport type { TreeItemContextValue } from '../../contexts';\n\nexport function useTreeItemContextValues_unstable(state: TreeItemState): TreeItemContextValues {\n  const {\n    value,\n    itemType,\n    layoutRef,\n    subtreeRef,\n    open,\n    expandIconRef,\n    actionsRef,\n    isActionsVisible,\n    isAsideVisible,\n    selectionRef,\n    checked,\n  } = state;\n\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const treeItem: TreeItemContextValue = {\n    value,\n    checked,\n    itemType,\n    layoutRef,\n    subtreeRef,\n    open,\n    selectionRef,\n    isActionsVisible,\n    isAsideVisible,\n    actionsRef,\n    expandIconRef,\n  };\n\n  return { treeItem };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","expandIconRef","actionsRef","isActionsVisible","isAsideVisible","selectionRef","checked","treeItem"],"mappings":"AAGA,OAAO,SAASA,kCAAkCC,KAAoB;IACpE,MAAM,EACJC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,IAAI,EACJC,aAAa,EACbC,UAAU,EACVC,gBAAgB,EAChBC,cAAc,EACdC,YAAY,EACZC,OAAO,EACR,GAAGX;IAEJ;;;GAGC,GACD,MAAMY,WAAiC;QACrCX;QACAU;QACAT;QACAC;QACAC;QACAC;QACAK;QACAF;QACAC;QACAF;QACAD;IACF;IAEA,OAAO;QAAEM;IAAS;AACpB"}

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

@@ -1 +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","Beiy3e4","B7ck84d","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: 'flex',\n        flexDirection: 'column',\n        boxSizing: 'border-box',\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,OAAA;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,CAoBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,UAAU,GAAGzD,aAAa,CAAC,CAAC;EAClC,MAAM;IAAE0D;EAAO,CAAC,GAAGF,KAAK;EACxBA,KAAK,CAACzD,IAAI,CAAC4D,SAAS,GAAGjE,YAAY,CAACI,kBAAkB,CAACC,IAAI,EAAE6D,wBAAwB,CAACF,KAAK,CAAC,IAAID,UAAU,CAAE,QAAOC,KAAM,EAAC,CAAC,EAAED,UAAU,CAAC7C,IAAI,EAAE6C,UAAU,CAACpC,cAAc,EAAEmC,KAAK,CAACzD,IAAI,CAAC4D,SAAS,CAAC;EAC9L,OAAOH,KAAK;AAChB,CAAC;AACD,SAASI,wBAAwBA,CAACF,KAAK,EAAE;EACrC,OAAOA,KAAK,IAAI,CAAC,IAAIA,KAAK,IAAI,EAAE;AACpC"}
+{"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","Beiy3e4","B7ck84d","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: 'flex',\n        flexDirection: 'column',\n        boxSizing: 'border-box',\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,OAAA;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,CAoBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,UAAU,GAAGzD,aAAa,CAAC,CAAC;EAClC,MAAM;IAAE0D;EAAM,CAAC,GAAGF,KAAK;EACvBA,KAAK,CAACzD,IAAI,CAAC4D,SAAS,GAAGjE,YAAY,CAACI,kBAAkB,CAACC,IAAI,EAAE6D,wBAAwB,CAACF,KAAK,CAAC,IAAID,UAAU,CAAE,QAAOC,KAAM,EAAC,CAAC,EAAED,UAAU,CAAC7C,IAAI,EAAE6C,UAAU,CAACpC,cAAc,EAAEmC,KAAK,CAACzD,IAAI,CAAC4D,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/TreeItemChevron.js

@@ -4,7 +4,7 @@ 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 { dir } = useFluent_unstable();
     const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;
     return /*#__PURE__*/ React.createElement(ChevronRight12Regular, {
         style: expandIconInlineStyles[expandIconRotation]

package/lib/components/TreeItemChevron.js.map

@@ -1 +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"}
+{"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;IACxC,MAAMC,OAAOH,4BAA4BI,CAAAA,MAAOA,IAAID,IAAI;IAExD,MAAM,EAAEE,GAAG,EAAE,GAAGP;IAEhB,MAAMQ,qBAAqBH,OAAO,KAAKE,QAAQ,QAAQ,IAAI;IAC3D,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.map

@@ -1 +1 @@
-{"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"}
+{"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;IAC/F,MAAMC,QAAQP,2BAA2BK,OAAOC;IAEhDJ,iCAAiCK;IACjC,OAAON,8BAA8BM;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

package/lib/components/TreeItemLayout/renderTreeItemLayout.js

@@ -1,11 +1,26 @@
-/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 import { ButtonContextProvider } from '@fluentui/react-button';
 /**
  * Render the final JSX of TreeItemLayout
  */ export const renderTreeItemLayout_unstable = (state)=>{
     assertSlots(state);
-    return /*#__PURE__*/ createElement(state.root, null, state.expandIcon && /*#__PURE__*/ createElement(state.expandIcon, null), state.selector && /*#__PURE__*/ createElement(state.selector, null), state.iconBefore && /*#__PURE__*/ createElement(state.iconBefore, null), /*#__PURE__*/ createElement(state.main, null, state.root.children), state.iconAfter && /*#__PURE__*/ createElement(state.iconAfter, null), /*#__PURE__*/ createElement(ButtonContextProvider, {
-        value: state.buttonContextValue
-    }, state.actions && /*#__PURE__*/ createElement(state.actions, null), state.aside && /*#__PURE__*/ createElement(state.aside, null)));
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {}),
+            state.selector && /*#__PURE__*/ _jsx(state.selector, {}),
+            state.iconBefore && /*#__PURE__*/ _jsx(state.iconBefore, {}),
+            /*#__PURE__*/ _jsx(state.main, {
+                children: state.root.children
+            }),
+            state.iconAfter && /*#__PURE__*/ _jsx(state.iconAfter, {}),
+            /*#__PURE__*/ _jsxs(ButtonContextProvider, {
+                value: state.buttonContextValue,
+                children: [
+                    state.actions && /*#__PURE__*/ _jsx(state.actions, {}),
+                    state.aside && /*#__PURE__*/ _jsx(state.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 { assertSlots } 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  assertSlots<TreeItemLayoutSlots>(state);\n\n  return (\n    <state.root>\n      {state.expandIcon && <state.expandIcon />}\n      {state.selector && <state.selector />}\n      {state.iconBefore && <state.iconBefore />}\n      <state.main>{state.root.children}</state.main>\n      {state.iconAfter && <state.iconAfter />}\n      <ButtonContextProvider value={state.buttonContextValue}>\n        {state.actions && <state.actions />}\n        {state.aside && <state.aside />}\n      </ButtonContextProvider>\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","ButtonContextProvider","renderTreeItemLayout_unstable","state","root","expandIcon","selector","iconBefore","main","children","iconAfter","value","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,QAA+B;IAC3EH,YAAiCG;IAEjC,qBACE,AAdJ,cAcKA,MAAMC,IAAI,QACRD,MAAME,UAAU,kBAAI,AAf3B,cAe4BF,MAAME,UAAU,SACrCF,MAAMG,QAAQ,kBAAI,AAhBzB,cAgB0BH,MAAMG,QAAQ,SACjCH,MAAMI,UAAU,kBAAI,AAjB3B,cAiB4BJ,MAAMI,UAAU,uBACtC,AAlBN,cAkBOJ,MAAMK,IAAI,QAAEL,MAAMC,IAAI,CAACK,QAAQ,GAC/BN,MAAMO,SAAS,kBAAI,AAnB1B,cAmB2BP,MAAMO,SAAS,uBACpC,AApBN,cAoBOT;QAAsBU,OAAOR,MAAMS,kBAAkB;OACnDT,MAAMU,OAAO,kBAAI,AArB1B,cAqB2BV,MAAMU,OAAO,SAC/BV,MAAMW,KAAK,kBAAI,AAtBxB,cAsByBX,MAAMW,KAAK;AAIpC,EAAE"}
+{"version":3,"sources":["renderTreeItemLayout.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } 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  assertSlots<TreeItemLayoutSlots>(state);\n\n  return (\n    <state.root>\n      {state.expandIcon && <state.expandIcon />}\n      {state.selector && <state.selector />}\n      {state.iconBefore && <state.iconBefore />}\n      <state.main>{state.root.children}</state.main>\n      {state.iconAfter && <state.iconAfter />}\n      <ButtonContextProvider value={state.buttonContextValue}>\n        {state.actions && <state.actions />}\n        {state.aside && <state.aside />}\n      </ButtonContextProvider>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","ButtonContextProvider","renderTreeItemLayout_unstable","state","root","expandIcon","selector","iconBefore","main","children","iconAfter","value","buttonContextValue","actions","aside"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CH,YAAiCG;IAEjC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,UAAU,kBAAI,KAACF,MAAME,UAAU;YACrCF,MAAMG,QAAQ,kBAAI,KAACH,MAAMG,QAAQ;YACjCH,MAAMI,UAAU,kBAAI,KAACJ,MAAMI,UAAU;0BACtC,KAACJ,MAAMK,IAAI;0BAAEL,MAAMC,IAAI,CAACK,QAAQ;;YAC/BN,MAAMO,SAAS,kBAAI,KAACP,MAAMO,SAAS;0BACpC,MAACT;gBAAsBU,OAAOR,MAAMS,kBAAkB;;oBACnDT,MAAMU,OAAO,kBAAI,KAACV,MAAMU,OAAO;oBAC/BV,MAAMW,KAAK,kBAAI,KAACX,MAAMW,KAAK;;;;;AAIpC,EAAE"}

package/lib/components/TreeItemLayout/useTreeItemLayout.js

@@ -14,7 +14,8 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
  * @param props - props from this instance of TreeItemLayout
  * @param ref - reference to root HTMLElement of TreeItemLayout
  */ export const useTreeItemLayout_unstable = (props, ref)=>{
-    const { main , iconAfter , iconBefore , as ='span'  } = props;
+    var _expandIcon, _actions;
+    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) ? [
@@ -42,7 +43,7 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
         },
         elementType: 'div'
     });
-    const expandIconRefs = useMergedRefs(expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.ref, expandIconRef);
+    const expandIconRefs = useMergedRefs((_expandIcon = expandIcon) === null || _expandIcon === void 0 ? void 0 : _expandIcon.ref, expandIconRef);
     if (expandIcon) {
         expandIcon.ref = expandIconRefs;
     }
@@ -57,7 +58,7 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
         },
         elementType: 'div'
     }) : undefined;
-    const actionsRefs = useMergedRefs(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef);
+    const actionsRefs = useMergedRefs((_actions = actions) === null || _actions === void 0 ? void 0 : _actions.ref, actionsRef);
     if (actions) {
         actions.ref = actionsRefs;
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ExtractSlotProps,\n  getNativeElementProps,\n  isResolvedShorthand,\n  useMergedRefs,\n  slot,\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);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n  const expandIcon = slot.optional(props.expandIcon, {\n    renderByDefault: isBranch,\n    defaultProps: {\n      children: <TreeItemChevron />,\n      'aria-hidden': true,\n    },\n    elementType: 'div',\n  });\n  const expandIconRefs = useMergedRefs(expandIcon?.ref, expandIconRef);\n  if (expandIcon) {\n    expandIcon.ref = expandIconRefs;\n  }\n  const arrowNavigationProps = useArrowNavigationGroup({ circular: true, axis: 'horizontal' });\n  const actions = isActionsVisible\n    ? slot.optional(actionsShorthand, {\n        defaultProps: { ...arrowNavigationProps, role: 'toolbar' } as ExtractSlotProps<TreeItemLayoutSlots['actions']>,\n        elementType: 'div',\n      })\n    : undefined;\n  const actionsRefs = useMergedRefs(actions?.ref, actionsRef);\n  if (actions) {\n    actions.ref = actionsRefs;\n  }\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      main: 'div',\n      iconAfter: 'div',\n      actions: 'div',\n      aside: 'div',\n      // Casting here to a union between checkbox and radio\n      selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\n    },\n    buttonContextValue: { size: 'small' },\n    root: slot.always(getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }), {\n      elementType: 'div',\n    }),\n    iconBefore: slot.optional(iconBefore, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),\n    main: slot.always(main, { elementType: 'div' }),\n    iconAfter: slot.optional(iconAfter, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),\n    aside: isAsideVisible\n      ? slot.optional(props.aside, { defaultProps: { 'aria-hidden': true }, elementType: 'div' })\n      : undefined,\n    actions,\n    expandIcon,\n    selector: slot.optional(props.selector, {\n      renderByDefault: selectionMode !== 'none',\n      defaultProps: {\n        checked,\n        tabIndex: -1,\n        'aria-hidden': true,\n        ref: selectionRef,\n        // casting here to a union between checkbox and radio\n        // since ref is not present on the selector signature\n        // FIXME: look into Slot type to see if we can make this work\n      } as CheckboxProps | RadioProps,\n      elementType: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<\n        CheckboxProps | RadioProps\n      >,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","isResolvedShorthand","useMergedRefs","slot","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","optional","renderByDefault","defaultProps","children","elementType","expandIconRefs","arrowNavigationProps","circular","axis","role","actionsRefs","components","root","aside","selector","buttonContextValue","size","always","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  useMergedRefs,\n  slot,\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);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n  const expandIcon = slot.optional(props.expandIcon, {\n    renderByDefault: isBranch,\n    defaultProps: {\n      children: <TreeItemChevron />,\n      'aria-hidden': true,\n    },\n    elementType: 'div',\n  });\n  const expandIconRefs = useMergedRefs(expandIcon?.ref, expandIconRef);\n  if (expandIcon) {\n    expandIcon.ref = expandIconRefs;\n  }\n  const arrowNavigationProps = useArrowNavigationGroup({ circular: true, axis: 'horizontal' });\n  const actions = isActionsVisible\n    ? slot.optional(actionsShorthand, {\n        defaultProps: { ...arrowNavigationProps, role: 'toolbar' } as ExtractSlotProps<TreeItemLayoutSlots['actions']>,\n        elementType: 'div',\n      })\n    : undefined;\n  const actionsRefs = useMergedRefs(actions?.ref, actionsRef);\n  if (actions) {\n    actions.ref = actionsRefs;\n  }\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      main: 'div',\n      iconAfter: 'div',\n      actions: 'div',\n      aside: 'div',\n      // Casting here to a union between checkbox and radio\n      selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\n    },\n    buttonContextValue: { size: 'small' },\n    root: slot.always(getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }), {\n      elementType: 'div',\n    }),\n    iconBefore: slot.optional(iconBefore, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),\n    main: slot.always(main, { elementType: 'div' }),\n    iconAfter: slot.optional(iconAfter, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),\n    aside: isAsideVisible\n      ? slot.optional(props.aside, { defaultProps: { 'aria-hidden': true }, elementType: 'div' })\n      : undefined,\n    actions,\n    expandIcon,\n    selector: slot.optional(props.selector, {\n      renderByDefault: selectionMode !== 'none',\n      defaultProps: {\n        checked,\n        tabIndex: -1,\n        'aria-hidden': true,\n        ref: selectionRef,\n        // casting here to a union between checkbox and radio\n        // since ref is not present on the selector signature\n        // FIXME: look into Slot type to see if we can make this work\n      } as CheckboxProps | RadioProps,\n      elementType: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<\n        CheckboxProps | RadioProps\n      >,\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","isResolvedShorthand","useMergedRefs","slot","useTreeItemContext_unstable","useTreeContext_unstable","Checkbox","Radio","TreeItemChevron","useArrowNavigationGroup","useTreeItemLayout_unstable","props","ref","expandIcon","actions","main","iconAfter","iconBefore","as","layoutRef","ctx","selectionMode","isActionsVisibleExternal","actionsShorthand","visible","undefined","isActionsVisible","isAsideVisible","selectionRef","expandIconRef","actionsRef","checked","isBranch","itemType","optional","renderByDefault","defaultProps","children","elementType","expandIconRefs","arrowNavigationProps","circular","axis","role","actionsRefs","components","root","aside","selector","buttonContextValue","size","always","tabIndex"],"mappings":"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"}

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","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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"}
+{"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.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TreeItemPersonaLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles';\nimport type { TreeItemPersonaLayoutProps } from './TreeItemPersonaLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\n\n/**\n * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.\n * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItemPersonaLayout_unstable(props, ref);\n\n  useTreeItemPersonaLayoutStyles_unstable(state);\n\n  const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n\n  return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\n\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n"],"names":["React","useTreeItemPersonaLayout_unstable","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayoutContextValues_unstable","TreeItemPersonaLayout","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,uCAAuC,QAAQ,0CAA0C;AAGlG,SAASC,8CAA8C,QAAQ,0CAA0C;AAEzG;;;;CAIC,GACD,OAAO,MAAMC,sCAAyEL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACrH,MAAMC,QAAQR,kCAAkCM,OAAOC;IAEvDL,wCAAwCM;IAExC,MAAMC,gBAAgBN,+CAA+CK;IAErE,OAAOP,qCAAqCO,OAAOC;AACrD,GAAG;AAEHL,sBAAsBM,WAAW,GAAG"}
+{"version":3,"sources":["TreeItemPersonaLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles';\nimport type { TreeItemPersonaLayoutProps } from './TreeItemPersonaLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\n\n/**\n * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.\n * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItemPersonaLayout_unstable(props, ref);\n\n  useTreeItemPersonaLayoutStyles_unstable(state);\n\n  const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n\n  return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\n\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n"],"names":["React","useTreeItemPersonaLayout_unstable","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayoutContextValues_unstable","TreeItemPersonaLayout","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,uCAAuC,QAAQ,0CAA0C;AAGlG,SAASC,8CAA8C,QAAQ,0CAA0C;AAEzG;;;;CAIC,GACD,OAAO,MAAMC,sCAAyEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,QAAQR,kCAAkCM,OAAOC;IAEvDL,wCAAwCM;IAExC,MAAMC,gBAAgBN,+CAA+CK;IAErE,OAAOP,qCAAqCO,OAAOC;AACrD,GAAG;AAEHL,sBAAsBM,WAAW,GAAG"}

package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js

@@ -1,4 +1,4 @@
-/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 import { AvatarContextProvider } from '@fluentui/react-avatar';
 import { ButtonContextProvider } from '@fluentui/react-button';
@@ -6,9 +6,23 @@ import { ButtonContextProvider } from '@fluentui/react-button';
  * Render the final JSX of TreeItemPersonaLayout
  */ export const renderTreeItemPersonaLayout_unstable = (state, contextValues)=>{
     assertSlots(state);
-    return /*#__PURE__*/ createElement(state.root, null, state.expandIcon && /*#__PURE__*/ createElement(state.expandIcon, null), state.selector && /*#__PURE__*/ createElement(state.selector, null), /*#__PURE__*/ createElement(AvatarContextProvider, {
-        value: contextValues.avatar
-    }, /*#__PURE__*/ createElement(state.media, null)), /*#__PURE__*/ createElement(state.main, null), state.description && /*#__PURE__*/ createElement(state.description, null), /*#__PURE__*/ createElement(ButtonContextProvider, {
-        value: state.buttonContextValue
-    }, state.actions && /*#__PURE__*/ createElement(state.actions, null), state.aside && /*#__PURE__*/ createElement(state.aside, null)));
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {}),
+            state.selector && /*#__PURE__*/ _jsx(state.selector, {}),
+            /*#__PURE__*/ _jsx(AvatarContextProvider, {
+                value: contextValues.avatar,
+                children: /*#__PURE__*/ _jsx(state.media, {})
+            }),
+            /*#__PURE__*/ _jsx(state.main, {}),
+            state.description && /*#__PURE__*/ _jsx(state.description, {}),
+            /*#__PURE__*/ _jsxs(ButtonContextProvider, {
+                value: state.buttonContextValue,
+                children: [
+                    state.actions && /*#__PURE__*/ _jsx(state.actions, {}),
+                    state.aside && /*#__PURE__*/ _jsx(state.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 { assertSlots } 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  assertSlots<TreeItemPersonaLayoutSlots>(state);\n\n  return (\n    <state.root>\n      {state.expandIcon && <state.expandIcon />}\n      {state.selector && <state.selector />}\n      <AvatarContextProvider value={contextValues.avatar}>\n        <state.media />\n      </AvatarContextProvider>\n      <state.main />\n      {state.description && <state.description />}\n      <ButtonContextProvider value={state.buttonContextValue}>\n        {state.actions && <state.actions />}\n        {state.aside && <state.aside />}\n      </ButtonContextProvider>\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","AvatarContextProvider","ButtonContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","root","expandIcon","selector","value","avatar","media","main","description","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAMxD,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC,gBACG;IACHL,YAAwCI;IAExC,qBACE,AAtBJ,cAsBKA,MAAME,IAAI,QACRF,MAAMG,UAAU,kBAAI,AAvB3B,cAuB4BH,MAAMG,UAAU,SACrCH,MAAMI,QAAQ,kBAAI,AAxBzB,cAwB0BJ,MAAMI,QAAQ,uBAClC,AAzBN,cAyBOP;QAAsBQ,OAAOJ,cAAcK,MAAM;qBAChD,AA1BR,cA0BSN,MAAMO,KAAK,wBAEd,AA5BN,cA4BOP,MAAMQ,IAAI,SACVR,MAAMS,WAAW,kBAAI,AA7B5B,cA6B6BT,MAAMS,WAAW,uBACxC,AA9BN,cA8BOX;QAAsBO,OAAOL,MAAMU,kBAAkB;OACnDV,MAAMW,OAAO,kBAAI,AA/B1B,cA+B2BX,MAAMW,OAAO,SAC/BX,MAAMY,KAAK,kBAAI,AAhCxB,cAgCyBZ,MAAMY,KAAK;AAIpC,EAAE"}
+{"version":3,"sources":["renderTreeItemPersonaLayout.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } 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  assertSlots<TreeItemPersonaLayoutSlots>(state);\n\n  return (\n    <state.root>\n      {state.expandIcon && <state.expandIcon />}\n      {state.selector && <state.selector />}\n      <AvatarContextProvider value={contextValues.avatar}>\n        <state.media />\n      </AvatarContextProvider>\n      <state.main />\n      {state.description && <state.description />}\n      <ButtonContextProvider value={state.buttonContextValue}>\n        {state.actions && <state.actions />}\n        {state.aside && <state.aside />}\n      </ButtonContextProvider>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","AvatarContextProvider","ButtonContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","root","expandIcon","selector","value","avatar","media","main","description","buttonContextValue","actions","aside"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAMxD,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC;IAEAL,YAAwCI;IAExC,qBACE,MAACA,MAAME,IAAI;;YACRF,MAAMG,UAAU,kBAAI,KAACH,MAAMG,UAAU;YACrCH,MAAMI,QAAQ,kBAAI,KAACJ,MAAMI,QAAQ;0BAClC,KAACP;gBAAsBQ,OAAOJ,cAAcK,MAAM;0BAChD,cAAA,KAACN,MAAMO,KAAK;;0BAEd,KAACP,MAAMQ,IAAI;YACVR,MAAMS,WAAW,kBAAI,KAACT,MAAMS,WAAW;0BACxC,MAACX;gBAAsBO,OAAOL,MAAMU,kBAAkB;;oBACnDV,MAAMW,OAAO,kBAAI,KAACX,MAAMW,OAAO;oBAC/BX,MAAMY,KAAK,kBAAI,KAACZ,MAAMY,KAAK;;;;;AAIpC,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 , main , description  } = props;
+    const { media, children, main, description } = props;
     const treeItemLayoutState = useTreeItemLayout_unstable({
         ...props,
         iconBefore: null,

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 { slot } 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: slot.always(main, { defaultProps: { children }, elementType: 'div' }),\n    media: slot.always(media, { elementType: 'div' }),\n    description: slot.optional(description, { elementType: 'div' }),\n  };\n};\n"],"names":["React","slot","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","always","defaultProps","elementType","optional"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,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,KAAK0B,MAAM,CAACf,MAAM;YAAEgB,cAAc;gBAAEjB;YAAS;YAAGkB,aAAa;QAAM;QACzEnB,OAAOT,KAAK0B,MAAM,CAACjB,OAAO;YAAEmB,aAAa;QAAM;QAC/ChB,aAAaZ,KAAK6B,QAAQ,CAACjB,aAAa;YAAEgB,aAAa;QAAM;IAC/D;AACF,EAAE"}
+{"version":3,"sources":["useTreeItemPersonaLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { slot } 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: slot.always(main, { defaultProps: { children }, elementType: 'div' }),\n    media: slot.always(media, { elementType: 'div' }),\n    description: slot.optional(description, { elementType: 'div' }),\n  };\n};\n"],"names":["React","slot","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","always","defaultProps","elementType","optional"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,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;IAEA,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGL;IAE/C,MAAMM,sBAAsBV,2BAC1B;QACE,GAAGI,KAAK;QACRO,YAAY;QACZC,WAAW;IACb,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;QAC1D;QACAoB,YAAYvB,cAAc,CAACc,KAAK;QAChCL,MAAMX,KAAK0B,MAAM,CAACf,MAAM;YAAEgB,cAAc;gBAAEjB;YAAS;YAAGkB,aAAa;QAAM;QACzEnB,OAAOT,KAAK0B,MAAM,CAACjB,OAAO;YAAEmB,aAAa;QAAM;QAC/ChB,aAAaZ,KAAK6B,QAAQ,CAACjB,aAAa;YAAEgB,aAAa;QAAM;IAC/D;AACF,EAAE"}

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export function useTreeItemPersonaLayoutContextValues_unstable(state) {
-    const { avatarSize  } = state;
+    const { avatarSize } = state;
     const avatar = React.useMemo(()=>({
             size: avatarSize
         }), [

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemPersonaLayoutContextValues.ts"],"sourcesContent":["import type { AvatarContextValue } from '@fluentui/react-avatar';\nimport * as React from 'react';\nimport type { TreeItemPersonaLayoutState, TreeItemPersonaLayoutContextValues } from './TreeItemPersonaLayout.types';\n\nexport function useTreeItemPersonaLayoutContextValues_unstable(\n  state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutContextValues {\n  const { avatarSize } = state;\n\n  const avatar = React.useMemo<AvatarContextValue>(() => ({ size: avatarSize }), [avatarSize]);\n\n  return { avatar };\n}\n"],"names":["React","useTreeItemPersonaLayoutContextValues_unstable","state","avatarSize","avatar","useMemo","size"],"mappings":"AACA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,+CACdC,KAAiC,EACG;IACpC,MAAM,EAAEC,WAAU,EAAE,GAAGD;IAEvB,MAAME,SAASJ,MAAMK,OAAO,CAAqB,IAAO,CAAA;YAAEC,MAAMH;QAAW,CAAA,GAAI;QAACA;KAAW;IAE3F,OAAO;QAAEC;IAAO;AAClB,CAAC"}
+{"version":3,"sources":["useTreeItemPersonaLayoutContextValues.ts"],"sourcesContent":["import type { AvatarContextValue } from '@fluentui/react-avatar';\nimport * as React from 'react';\nimport type { TreeItemPersonaLayoutState, TreeItemPersonaLayoutContextValues } from './TreeItemPersonaLayout.types';\n\nexport function useTreeItemPersonaLayoutContextValues_unstable(\n  state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutContextValues {\n  const { avatarSize } = state;\n\n  const avatar = React.useMemo<AvatarContextValue>(() => ({ size: avatarSize }), [avatarSize]);\n\n  return { avatar };\n}\n"],"names":["React","useTreeItemPersonaLayoutContextValues_unstable","state","avatarSize","avatar","useMemo","size"],"mappings":"AACA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,+CACdC,KAAiC;IAEjC,MAAM,EAAEC,UAAU,EAAE,GAAGD;IAEvB,MAAME,SAASJ,MAAMK,OAAO,CAAqB,IAAO,CAAA;YAAEC,MAAMH;QAAW,CAAA,GAAI;QAACA;KAAW;IAE3F,OAAO;QAAEC;IAAO;AAClB"}