@fluentui/react-tree 9.0.0-beta.25 → 9.0.0-beta.27

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeContextValues.ts"],"sourcesContent":["import { TreeContextValue } from '../../contexts';\nimport type { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n  const { openItems, 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    appearance,\n    size,\n    level,\n    openItems,\n    requestTreeResponse,\n  };\n\n  return { tree };\n}\n"],"names":["useTreeContextValues_unstable","state","openItems","level","appearance","size","requestTreeResponse","tree"],"mappings":"AAGA,OAAO,SAASA,8BAA8BC,KAAgB,EAAqB;IACjF,MAAM,EAAEC,UAAS,EAAEC,MAAK,EAAEC,WAAU,EAAEC,KAAI,EAAEC,oBAAmB,EAAE,GAAGL;IACpE;;;GAGC,GACD,MAAMM,OAAyB;QAC7BH;QACAC;QACAF;QACAD;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,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"}

package/lib/{hooks/useNestedTreeNavigation.js → components/Tree/useTreeNavigation.js}

@@ -1,10 +1,10 @@
 import { useMergedRefs } from '@fluentui/react-utilities';
-import { useHTMLElementWalkerRef } from './useHTMLElementWalker';
-import { nextTypeAheadElement } from '../utils/nextTypeAheadElement';
-import { treeDataTypes } from '../utils/tokens';
-import { treeItemFilter } from '../utils/treeItemFilter';
-import { useRovingTabIndex } from './useRovingTabIndexes';
-export function useNestedTreeNavigation() {
+import { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';
+import { treeDataTypes } from '../../utils/tokens';
+import { treeItemFilter } from '../../utils/treeItemFilter';
+import { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';
+import { useHTMLElementWalkerRef } from '../../hooks/useHTMLElementWalker';
+export function useTreeNavigation() {
     const [{ rove  }, rovingRootRef] = useRovingTabIndex(treeItemFilter);
     const [walkerRef, rootRef] = useHTMLElementWalkerRef(treeItemFilter);
     const getNextElement = (data)=>{

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useTreeNavigation.ts"],"sourcesContent":["import { useMergedRefs } from '@fluentui/react-utilities';\nimport { 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, useHTMLElementWalkerRef } from '../../hooks/useHTMLElementWalker';\n\nexport function useTreeNavigation() {\n  const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n  const [walkerRef, rootRef] = useHTMLElementWalkerRef(treeItemFilter);\n\n  const getNextElement = (data: TreeNavigationData_unstable) => {\n    if (!walkerRef.current) {\n      return;\n    }\n    const treeItemWalker = walkerRef.current;\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) {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  }\n  return [navigate, useMergedRefs(rootRef, rovingRootRef)] 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":["useMergedRefs","nextTypeAheadElement","treeDataTypes","treeItemFilter","useRovingTabIndex","useHTMLElementWalkerRef","useTreeNavigation","rove","rovingRootRef","walkerRef","rootRef","getNextElement","data","current","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":"AAAA,SAASA,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,iBAAiB,QAAQ,kCAAkC;AACpE,SAA4BC,uBAAuB,QAAQ,mCAAmC;AAE9F,OAAO,SAASC,oBAAoB;IAClC,MAAM,CAAC,EAAEC,KAAI,EAAE,EAAEC,cAAc,GAAGJ,kBAAkBD;IACpD,MAAM,CAACM,WAAWC,QAAQ,GAAGL,wBAAwBF;IAErD,MAAMQ,iBAAiB,CAACC,OAAsC;QAC5D,IAAI,CAACH,UAAUI,OAAO,EAAE;YACtB;QACF,CAAC;QACD,MAAMC,iBAAiBL,UAAUI,OAAO;QACxC,OAAQD,KAAKG,IAAI;YACf,KAAKb,cAAcc,KAAK;gBACtB,OAAOJ,KAAKK,MAAM;YACpB,KAAKf,cAAcgB,SAAS;gBAC1BJ,eAAeK,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOhB,qBAAqBa,gBAAgBF,KAAKQ,KAAK,CAACC,GAAG;YAC5D,KAAKnB,cAAcoB,SAAS;gBAC1BR,eAAeK,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOH,eAAeS,aAAa;YACrC,KAAKrB,cAAcsB,UAAU;gBAC3BV,eAAeK,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOH,eAAeW,UAAU;YAClC,KAAKvB,cAAcwB,GAAG;gBACpBZ,eAAeK,cAAc,GAAGL,eAAea,IAAI;gBACnD,OAAOC,mBAAmBd;YAC5B,KAAKZ,cAAc2B,IAAI;gBACrBf,eAAeK,cAAc,GAAGL,eAAea,IAAI;gBACnD,OAAOb,eAAeW,UAAU;YAClC,KAAKvB,cAAc4B,SAAS;gBAC1BhB,eAAeK,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOH,eAAeiB,WAAW;YACnC,KAAK7B,cAAc8B,OAAO;gBACxBlB,eAAeK,cAAc,GAAGP,KAAKK,MAAM;gBAC3C,OAAOH,eAAemB,eAAe;QACzC;IACF;IACA,SAASC,SAAStB,IAAiC,EAAE;QACnD,MAAMmB,cAAcpB,eAAeC;QACnC,IAAImB,aAAa;YACfxB,KAAKwB;QACP,CAAC;IACH;IACA,OAAO;QAACG;QAAUlC,cAAcU,SAASF;KAAe;AAC1D,CAAC;AAED,SAASoB,mBAAmBO,MAAyB,EAAE;IACrD,IAAIC,cAAkC,IAAI;IAC1C,IAAIL,cAAkC,IAAI;IAC1C,MAAQA,cAAcI,OAAOE,SAAS,GAAK;QACzCD,cAAcL;IAChB;IACA,OAAOK;AACT"}

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

@@ -23,8 +23,8 @@ const useStyles = /*#__PURE__*/__styles({
 });
 export const useTreeStyles_unstable = state => {
   const styles = useStyles();
-  const isSubtree = state.level > 0;
-  state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubtree && styles.subtree, state.root.className);
+  const isSubTree = state.level > 0;
+  state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);
   return state;
 };
 //# sourceMappingURL=useTreeStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","treeClassNames","root","useStyles","mc9l5x","Beiy3e4","Belr9w4","subtree","Bh6795r","Bnnss6s","xawz","Ijaq50","Br312pm","nk6f5a","Bw0ie65","d","useTreeStyles_unstable","state","styles","isSubtree","level","className"],"sources":["useTreeStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n    root: 'fui-Tree'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingVerticalXXS\n    },\n    subtree: {\n        ...shorthands.flex(1, 1, '100%'),\n        ...shorthands.gridArea('subtree')\n    }\n});\nexport const useTreeStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const isSubtree = state.level > 0;\n    state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubtree && styles.subtree, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUjB,CAAC;AACF,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1B,MAAMgB,SAAS,GAAGF,KAAK,CAACG,KAAK,GAAG,CAAC;EACjCH,KAAK,CAACf,IAAI,CAACmB,SAAS,GAAGvB,YAAY,CAACG,cAAc,CAACC,IAAI,EAAEgB,MAAM,CAAChB,IAAI,EAAEiB,SAAS,IAAID,MAAM,CAACX,OAAO,EAAEU,KAAK,CAACf,IAAI,CAACmB,SAAS,CAAC;EACxH,OAAOJ,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","treeClassNames","root","useStyles","mc9l5x","Beiy3e4","Belr9w4","subtree","Bh6795r","Bnnss6s","xawz","Ijaq50","Br312pm","nk6f5a","Bw0ie65","d","useTreeStyles_unstable","state","styles","isSubTree","level","className"],"sources":["useTreeStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n    root: 'fui-Tree'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingVerticalXXS\n    },\n    subtree: {\n        ...shorthands.flex(1, 1, '100%'),\n        ...shorthands.gridArea('subtree')\n    }\n});\nexport const useTreeStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const isSubTree = state.level > 0;\n    state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUjB,CAAC;AACF,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;EAC1B,MAAMgB,SAAS,GAAGF,KAAK,CAACG,KAAK,GAAG,CAAC;EACjCH,KAAK,CAACf,IAAI,CAACmB,SAAS,GAAGvB,YAAY,CAACG,cAAc,CAACC,IAAI,EAAEgB,MAAM,CAAChB,IAAI,EAAEiB,SAAS,IAAID,MAAM,CAACX,OAAO,EAAEU,KAAK,CAACf,IAAI,CAACmB,SAAS,CAAC;EACxH,OAAOJ,KAAK;AAChB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["TreeItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { TreeItemContextValue } from '../../contexts';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport * as React from 'react';\nimport { TreeItemSlotsContextValue } from '../../contexts/treeItemSlotsContext';\n\nexport type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };\n\nexport type TreeItemType = 'leaf' | 'branch';\n\nexport type TreeItemSlots = {\n  root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;\n  /**\n   * Expand icon slot,\n   * by default renders a chevron icon to indicate opening and closing\n   */\n  expandIcon?: Slot<'div'>;\n  aside?: Slot<'div'>;\n  /**\n   * actionable elements are normally buttons, menus, or other focusable elements.\n   * Those elements are only visibly available if the given tree item is currently active.\n   */\n  actions?: Slot<\n    ExtractSlotProps<\n      Slot<'div'> & {\n        /**\n         * Forces visibility of the aside/action content\n         */\n        visible?: boolean;\n      }\n    >\n  >;\n};\n\nexport type TreeItemInternalSlot = Pick<TreeItemSlots, 'root'>;\n\nexport type TreeItemValue = string | number;\n\nexport type TreeItemContextValues = {\n  treeItem: TreeItemContextValue;\n  treeItemSlots: TreeItemSlotsContextValue;\n};\n\n/**\n * TreeItem Props\n */\nexport type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {\n  itemType: TreeItemType;\n  value?: TreeItemValue;\n};\n\n/**\n * State used in rendering TreeItem\n */\nexport type TreeItemState = ComponentState<TreeItemInternalSlot> &\n  TreeItemContextValue &\n  TreeItemSlotsContextValue & {\n    level: number;\n    itemType: TreeItemType;\n  };\n"],"names":["React"],"mappings":"AAGA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["TreeItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { TreeItemContextValue } from '../../contexts';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport * as React from 'react';\n\nexport type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };\n\nexport type TreeItemType = 'leaf' | 'branch';\n\nexport type TreeItemSlots = {\n  root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;\n};\n\nexport type TreeItemValue = string | number;\n\nexport type TreeItemContextValues = {\n  treeItem: TreeItemContextValue;\n};\n\n/**\n * TreeItem Props\n */\nexport type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {\n  itemType: TreeItemType;\n  value?: TreeItemValue;\n};\n\n/**\n * State used in rendering TreeItem\n */\nexport type TreeItemState = ComponentState<TreeItemSlots> &\n  TreeItemContextValue & {\n    level: number;\n    itemType: TreeItemType;\n  };\n"],"names":["React"],"mappings":"AAGA,YAAYA,WAAW,QAAQ"}

package/lib/components/TreeItem/renderTreeItem.js

@@ -1,13 +1,11 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
-import { TreeItemProvider, TreeItemSlotsProvider } from '../../contexts';
+import { TreeItemProvider } from '../../contexts';
 /**
  * Render the final JSX of TreeItem
  */ export const renderTreeItem_unstable = (state, contextValues)=>{
     const { slots , slotProps  } = getSlotsNext(state);
     return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(TreeItemProvider, {
         value: contextValues.treeItem
-    }, /*#__PURE__*/ createElement(TreeItemSlotsProvider, {
-        value: contextValues.treeItemSlots
-    }, slotProps.root.children)));
+    }, slotProps.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 { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TreeItemState, TreeItemContextValues, TreeItemInternalSlot } from './TreeItem.types';\nimport { TreeItemProvider, TreeItemSlotsProvider } from '../../contexts';\n\n/**\n * Render the final JSX of TreeItem\n */\nexport const renderTreeItem_unstable = (state: TreeItemState, contextValues: TreeItemContextValues) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemInternalSlot>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <TreeItemProvider value={contextValues.treeItem}>\n        <TreeItemSlotsProvider value={contextValues.treeItemSlots}>{slotProps.root.children}</TreeItemSlotsProvider>\n      </TreeItemProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","TreeItemProvider","TreeItemSlotsProvider","renderTreeItem_unstable","state","contextValues","slots","slotProps","root","value","treeItem","treeItemSlots","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,gBAAgB,EAAEC,qBAAqB,QAAQ,iBAAiB;AAEzE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC,gBAAyC;IACrG,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGP,aAAmCI;IAEhE,qBACE,AAdJ,cAcKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,gBAC5B,AAfN,cAeOP;QAAiBQ,OAAOJ,cAAcK,QAAQ;qBAC7C,AAhBR,cAgBSR;QAAsBO,OAAOJ,cAAcM,aAAa;OAAGJ,UAAUC,IAAI,CAACI,QAAQ;AAI3F,EAAE"}
+{"version":3,"sources":["renderTreeItem.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } 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  const { slots, slotProps } = getSlotsNext<TreeItemSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <TreeItemProvider value={contextValues.treeItem}>{slotProps.root.children}</TreeItemProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","TreeItemProvider","renderTreeItem_unstable","state","contextValues","slots","slotProps","root","value","treeItem","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,gBAAgB,QAAQ,iBAAiB;AAElD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC,gBAAyC;IACrG,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAA4BG;IAEzD,qBACE,AAdJ,cAcKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,gBAC5B,AAfN,cAeON;QAAiBO,OAAOJ,cAAcK,QAAQ;OAAGH,UAAUC,IAAI,CAACG,QAAQ;AAG/E,EAAE"}

package/lib/components/TreeItem/useTreeItem.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { getNativeElementProps, isResolvedShorthand, resolveShorthand, useControllableState, useId, useMergedRefs } from '@fluentui/react-utilities';
+import { getNativeElementProps, useId, useMergedRefs } from '@fluentui/react-utilities';
 import { useEventCallback } from '@fluentui/react-utilities';
 import { elementContains } from '@fluentui/react-portal';
 import { useTreeContext_unstable } from '../../contexts/index';
-import { treeDataTypes } from '../../utils/tokens';
 import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
-import { TreeItemChevron } from '../TreeItemChevron';
+import { Space } from '@fluentui/keyboard-keys';
+import { treeDataTypes } from '../../utils/tokens';
 /**
  * Create the state required to render TreeItem.
  *
@@ -17,35 +17,25 @@ import { TreeItemChevron } from '../TreeItemChevron';
  */ export function useTreeItem_unstable(props, ref) {
     var _props_value;
     const contextLevel = useTreeContext_unstable((ctx)=>ctx.level);
+    // 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 , expandIcon , aside , ...rest } = props;
+    const { onClick , onKeyDown , as ='div' , itemType ='leaf' , 'aria-level': level = contextLevel , ...rest } = props;
     const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);
-    const [isActionsVisibleExternal, actions] = isResolvedShorthand(props.actions) ? [
-        props.actions.visible,
-        {
-            ...props.actions,
-            visible: undefined
-        }
-    ] : [
-        undefined,
-        props.actions
-    ];
-    const [isActionsVisible, setActionsVisible] = useControllableState({
-        state: isActionsVisibleExternal,
-        defaultState: false,
-        initialState: false
-    });
+    const [isActionsVisible, setActionsVisible] = React.useState(false);
     const [isAsideVisible, setAsideVisible] = React.useState(true);
     const handleActionsRef = (actionsElement)=>{
         setAsideVisible(actionsElement === null);
     };
-    const open = useTreeContext_unstable((ctx)=>ctx.openItems.has(value));
     const actionsRef = React.useRef(null);
     const expandIconRef = React.useRef(null);
     const layoutRef = React.useRef(null);
     const subtreeRef = React.useRef(null);
-    const actionsRefs = useMergedRefs(isResolvedShorthand(actions) ? actions.ref : undefined, handleActionsRef, actionsRef);
-    const expandIconRefs = useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef);
+    const selectionRef = React.useRef(null);
+    const open = useTreeContext_unstable((ctx)=>ctx.openItems.has(value));
+    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 selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);
     const handleClick = useEventCallback((event)=>{
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
         if (event.isDefaultPrevented()) {
@@ -59,6 +49,10 @@ import { TreeItemChevron } from '../TreeItemChevron';
         if (isEventFromSubtree) {
             return;
         }
+        const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target);
+        if (isEventFromSelection) {
+            return;
+        }
         const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);
         requestTreeResponse({
             event,
@@ -75,6 +69,13 @@ import { TreeItemChevron } from '../TreeItemChevron';
             return;
         }
         switch(event.key){
+            case Space:
+                if (selectionMode !== 'none') {
+                    var _selectionRef_current;
+                    (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();
+                    event.preventDefault();
+                }
+                return;
             case treeDataTypes.End:
             case treeDataTypes.Home:
             case treeDataTypes.Enter:
@@ -117,41 +118,38 @@ import { TreeItemChevron } from '../TreeItemChevron';
             return setActionsVisible(false);
         }
     });
+    const handleChange = useEventCallback((event)=>{
+        if (event.isDefaultPrevented()) {
+            return;
+        }
+        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);
+        if (isEventFromSubtree) {
+            return;
+        }
+        requestTreeResponse({
+            event,
+            value,
+            itemType,
+            type: 'Change',
+            target: event.currentTarget
+        });
+    });
     const isBranch = itemType === 'branch';
-    const actionsSlot = React.useMemo(()=>isActionsVisible ? resolveShorthand(actions) : undefined, [
-        actions,
-        isActionsVisible
-    ]);
-    if (actionsSlot) {
-        actionsSlot.ref = actionsRefs;
-    }
-    const asideSlot = React.useMemo(()=>isAsideVisible ? resolveShorthand(aside) : undefined, [
-        aside,
-        isAsideVisible
-    ]);
-    const expandIconSlot = React.useMemo(()=>resolveShorthand(expandIcon, {
-            required: isBranch,
-            defaultProps: {
-                children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),
-                'aria-hidden': true
-            }
-        }), [
-        expandIcon,
-        isBranch
-    ]);
-    if (expandIconSlot) {
-        expandIconSlot.ref = expandIconRefs;
-    }
     return {
         value,
         open,
         subtreeRef,
         layoutRef,
+        selectionRef,
+        expandIconRef,
+        actionsRef: useMergedRefs(handleActionsRef, actionsRef),
         itemType,
         level,
         components: {
             root: 'div'
         },
+        isAsideVisible,
+        isActionsVisible,
         root: getNativeElementProps(as, {
             tabIndex: -1,
             ...rest,
@@ -159,16 +157,16 @@ import { TreeItemChevron } from '../TreeItemChevron';
             role: 'treeitem',
             'aria-level': level,
             [dataTreeItemValueAttrName]: value,
+            'aria-checked': selectionMode === 'multiselect' ? checked : undefined,
+            'aria-selected': selectionMode === 'single' ? checked : undefined,
             'aria-expanded': isBranch ? open : undefined,
             onClick: handleClick,
             onKeyDown: handleKeyDown,
             onMouseOver: handleActionsVisible,
             onFocus: handleActionsVisible,
             onMouseOut: handleActionsInvisible,
-            onBlur: handleActionsInvisible
-        }),
-        actions: actionsSlot,
-        aside: asideSlot,
-        expandIcon: expandIconSlot
+            onBlur: handleActionsInvisible,
+            onChange: handleChange
+        })
     };
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getNativeElementProps,\n  isResolvedShorthand,\n  resolveShorthand,\n  useControllableState,\n  useId,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemSlots, TreeItemState } from './TreeItem.types';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { TreeItemChevron } from '../TreeItemChevron';\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  const value = useId('fuiTreeItemValue-', props.value?.toString());\n\n  const {\n    onClick,\n    onKeyDown,\n    as = 'div',\n    itemType = 'leaf',\n    'aria-level': level = contextLevel,\n    expandIcon,\n    aside,\n    ...rest\n  } = props;\n\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n\n  const [isActionsVisibleExternal, actions]: [boolean | undefined, TreeItemSlots['actions']] = isResolvedShorthand(\n    props.actions,\n  )\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, setActionsVisible] = useControllableState({\n    state: isActionsVisibleExternal,\n    defaultState: false,\n    initialState: false,\n  });\n  const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n  const handleActionsRef = (actionsElement: HTMLDivElement | null) => {\n    setAsideVisible(actionsElement === null);\n  };\n\n  const open = useTreeContext_unstable(ctx => ctx.openItems.has(value));\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\n  const actionsRefs = useMergedRefs(\n    isResolvedShorthand(actions) ? actions.ref : undefined,\n    handleActionsRef,\n    actionsRef,\n  );\n  const expandIconRefs = useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef);\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 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 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 isBranch = itemType === 'branch';\n\n  const actionsSlot = React.useMemo(\n    () => (isActionsVisible ? resolveShorthand(actions) : undefined),\n    [actions, isActionsVisible],\n  );\n  if (actionsSlot) {\n    actionsSlot.ref = actionsRefs;\n  }\n  const asideSlot = React.useMemo(\n    () => (isAsideVisible ? resolveShorthand(aside) : undefined),\n    [aside, isAsideVisible],\n  );\n  const expandIconSlot = React.useMemo(\n    () =>\n      resolveShorthand(expandIcon, {\n        required: isBranch,\n        defaultProps: {\n          children: <TreeItemChevron />,\n          'aria-hidden': true,\n        },\n      }),\n    [expandIcon, isBranch],\n  );\n  if (expandIconSlot) {\n    expandIconSlot.ref = expandIconRefs;\n  }\n\n  return {\n    value,\n    open,\n    subtreeRef,\n    layoutRef,\n    itemType,\n    level,\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps(as, {\n      tabIndex: -1,\n      ...rest,\n      ref,\n      role: 'treeitem',\n      'aria-level': level,\n      [dataTreeItemValueAttrName]: value,\n      'aria-expanded': isBranch ? open : undefined,\n      onClick: handleClick,\n      onKeyDown: handleKeyDown,\n      onMouseOver: handleActionsVisible,\n      onFocus: handleActionsVisible,\n      onMouseOut: handleActionsInvisible,\n      onBlur: handleActionsInvisible,\n    }),\n    actions: actionsSlot,\n    aside: asideSlot,\n    expandIcon: expandIconSlot,\n  };\n}\n"],"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useControllableState","useId","useMergedRefs","useEventCallback","elementContains","useTreeContext_unstable","treeDataTypes","dataTreeItemValueAttrName","TreeItemChevron","useTreeItem_unstable","props","ref","contextLevel","ctx","level","value","toString","onClick","onKeyDown","as","itemType","expandIcon","aside","rest","requestTreeResponse","isActionsVisibleExternal","actions","visible","undefined","isActionsVisible","setActionsVisible","state","defaultState","initialState","isAsideVisible","setAsideVisible","useState","handleActionsRef","actionsElement","open","openItems","has","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","actionsRefs","expandIconRefs","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isFromExpandIcon","currentTarget","type","ExpandIconClick","Click","handleKeyDown","key","End","Home","Enter","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","isBranch","actionsSlot","useMemo","asideSlot","expandIconSlot","required","defaultProps","children","components","root","tabIndex","role","onMouseOver","onFocus","onMouseOut","onBlur"],"mappings":"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"}
+{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useEventCallback } 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 = (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 checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\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({ event, value, itemType, type: 'Change', target: event.currentTarget });\n  });\n\n  const isBranch = itemType === 'branch';\n  return {\n    value,\n    open,\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: 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': selectionMode === 'single' ? checked : undefined,\n      'aria-expanded': isBranch ? 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  };\n}\n"],"names":["React","getNativeElementProps","useId","useMergedRefs","useEventCallback","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","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","checked","checkedItems","get","selectionMode","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","isBranch","components","root","tabIndex","role","undefined","onMouseOver","onFocus","onMouseOut","onBlur","onChange"],"mappings":"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"}

package/lib/components/TreeItem/useTreeItemContextValues.js

@@ -1,6 +1,5 @@
-import * as React from 'react';
 export function useTreeItemContextValues_unstable(state) {
-    const { value , itemType , layoutRef , subtreeRef , open , actions , aside , expandIcon  } = state;
+    const { value , itemType , layoutRef , subtreeRef , open , expandIconRef , actionsRef , isActionsVisible , isAsideVisible , selectionRef  } = state;
     /**
    * This context is created with "@fluentui/react-context-selector",
    * there is no sense to memoize it
@@ -9,19 +8,14 @@ export function useTreeItemContextValues_unstable(state) {
         itemType,
         layoutRef,
         subtreeRef,
-        open
+        open,
+        selectionRef,
+        isActionsVisible,
+        isAsideVisible,
+        actionsRef,
+        expandIconRef
     };
-    const treeItemSlots = React.useMemo(()=>({
-            actions,
-            aside,
-            expandIcon
-        }), [
-        actions,
-        aside,
-        expandIcon
-    ]);
     return {
-        treeItem,
-        treeItemSlots
+        treeItem
     };
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemContextValues, TreeItemState } from './TreeItem.types';\nimport type { TreeItemContextValue, TreeItemSlotsContextValue } from '../../contexts';\n\nexport function useTreeItemContextValues_unstable(state: TreeItemState): TreeItemContextValues {\n  const { value, itemType, layoutRef, subtreeRef, open, actions, aside, expandIcon } = 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    itemType,\n    layoutRef,\n    subtreeRef,\n    open,\n  };\n\n  const treeItemSlots: TreeItemSlotsContextValue = React.useMemo(\n    () => ({ actions, aside, expandIcon }),\n    [actions, aside, expandIcon],\n  );\n\n  return { treeItem, treeItemSlots };\n}\n"],"names":["React","useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","actions","aside","expandIcon","treeItem","treeItemSlots","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,kCAAkCC,KAAoB,EAAyB;IAC7F,MAAM,EAAEC,MAAK,EAAEC,SAAQ,EAAEC,UAAS,EAAEC,WAAU,EAAEC,KAAI,EAAEC,QAAO,EAAEC,MAAK,EAAEC,WAAU,EAAE,GAAGR;IAErF;;;GAGC,GACD,MAAMS,WAAiC;QACrCR;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,MAAMK,gBAA2CZ,MAAMa,OAAO,CAC5D,IAAO,CAAA;YAAEL;YAASC;YAAOC;QAAW,CAAA,GACpC;QAACF;QAASC;QAAOC;KAAW;IAG9B,OAAO;QAAEC;QAAUC;IAAc;AACnC,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  } = 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    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","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,EACb,GAAGV;IAEJ;;;GAGC,GACD,MAAMW,WAAiC;QACrCV;QACAC;QACAC;QACAC;QACAC;QACAK;QACAF;QACAC;QACAF;QACAD;IACF;IAEA,OAAO;QAAEK;IAAS;AACpB,CAAC"}

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

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

package/lib/components/TreeItemLayout/renderTreeItemLayout.js

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

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

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

package/lib/components/TreeItemLayout/useTreeItemLayout.js

@@ -1,7 +1,9 @@
 import * as React from 'react';
-import { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
-import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
-import { useTreeItemSlotsContext_unstable } from '../../contexts/treeItemSlotsContext';
+import { getNativeElementProps, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
+import { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';
+import { Checkbox } from '@fluentui/react-checkbox';
+import { Radio } from '@fluentui/react-radio';
+import { TreeItemChevron } from '../TreeItemChevron';
 /**
  * Create the state required to render TreeItemLayout.
  *
@@ -12,8 +14,43 @@ import { useTreeItemSlotsContext_unstable } from '../../contexts/treeItemSlotsCo
  * @param ref - reference to root HTMLElement of TreeItemLayout
  */ export const useTreeItemLayout_unstable = (props, ref)=>{
     const { content , iconAfter , iconBefore , as ='span'  } = props;
-    const { actions , aside , expandIcon  } = useTreeItemSlotsContext_unstable();
     const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);
+    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);
+    const [isActionsVisibleExternal, actionsShorthand] = isResolvedShorthand(props.actions) ? [
+        props.actions.visible,
+        {
+            ...props.actions,
+            visible: undefined
+        }
+    ] : [
+        undefined,
+        props.actions
+    ];
+    const isActionsVisible = useTreeItemContext_unstable((ctx)=>ctx.isActionsVisible) || isActionsVisibleExternal;
+    const isAsideVisible = useTreeItemContext_unstable((ctx)=>ctx.isAsideVisible);
+    const selectionRef = useTreeItemContext_unstable((ctx)=>ctx.selectionRef);
+    const expandIconRef = useTreeItemContext_unstable((ctx)=>ctx.expandIconRef);
+    const actionsRef = useTreeItemContext_unstable((ctx)=>ctx.actionsRef);
+    const value = useTreeItemContext_unstable((ctx)=>ctx.value);
+    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 isBranch = useTreeItemContext_unstable((ctx)=>ctx.itemType === 'branch');
+    const expandIcon = resolveShorthand(props.expandIcon, {
+        required: isBranch,
+        defaultProps: {
+            children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),
+            'aria-hidden': true
+        }
+    });
+    const expandIconRefs = useMergedRefs(expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon.ref, expandIconRef);
+    if (expandIcon) {
+        expandIcon.ref = expandIconRefs;
+    }
+    const actions = isActionsVisible ? resolveShorthand(actionsShorthand) : undefined;
+    const actionsRefs = useMergedRefs(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef);
+    if (actions) {
+        actions.ref = actionsRefs;
+    }
     return {
         components: {
             root: 'div',
@@ -22,7 +59,9 @@ import { useTreeItemSlotsContext_unstable } from '../../contexts/treeItemSlotsCo
             content: 'div',
             iconAfter: 'div',
             actions: 'div',
-            aside: 'div'
+            aside: 'div',
+            // Casting here to a union between checkbox and radio
+            selector: selectionMode === 'multiselect' ? Checkbox : Radio
         },
         buttonContextValue: {
             size: 'small'
@@ -44,8 +83,16 @@ import { useTreeItemSlotsContext_unstable } from '../../contexts/treeItemSlotsCo
                 'aria-hidden': true
             }
         }),
-        aside: resolveShorthand(aside),
-        actions: resolveShorthand(actions),
-        expandIcon: resolveShorthand(expandIcon)
+        aside: isAsideVisible ? resolveShorthand(props.aside) : undefined,
+        actions,
+        expandIcon,
+        selector: resolveShorthand(props.selector, {
+            defaultProps: {
+                checked,
+                tabIndex: -1,
+                'aria-hidden': true,
+                ref: selectionRef
+            }
+        })
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutProps, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nimport { useTreeItemSlotsContext_unstable } from '../../contexts/treeItemSlotsContext';\n\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n  props: TreeItemLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n  const { content, iconAfter, iconBefore, as = 'span' } = props;\n\n  const { actions, aside, expandIcon } = useTreeItemSlotsContext_unstable();\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      content: 'div',\n      iconAfter: 'div',\n      actions: 'div',\n      aside: 'div',\n    },\n    buttonContextValue: { size: 'small' },\n    root: getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }),\n    iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),\n    content: resolveShorthand(content, { required: true }),\n    iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),\n    aside: resolveShorthand(aside),\n    actions: resolveShorthand(actions),\n    expandIcon: resolveShorthand(expandIcon),\n  };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useMergedRefs","useTreeItemContext_unstable","useTreeItemSlotsContext_unstable","useTreeItemLayout_unstable","props","ref","content","iconAfter","iconBefore","as","actions","aside","expandIcon","layoutRef","ctx","components","root","buttonContextValue","size","defaultProps","required"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAEnG,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,gCAAgC,QAAQ,sCAAsC;AAEvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC,MACwB;IACxB,MAAM,EAAEC,QAAO,EAAEC,UAAS,EAAEC,WAAU,EAAEC,IAAK,OAAM,EAAE,GAAGL;IAExD,MAAM,EAAEM,QAAO,EAAEC,MAAK,EAAEC,WAAU,EAAE,GAAGV;IAEvC,MAAMW,YAAYZ,4BAA4Ba,CAAAA,MAAOA,IAAID,SAAS;IAElE,OAAO;QACLE,YAAY;YACVC,MAAM;YACNJ,YAAY;YACZJ,YAAY;YACZF,SAAS;YACTC,WAAW;YACXG,SAAS;YACTC,OAAO;QACT;QACAM,oBAAoB;YAAEC,MAAM;QAAQ;QACpCF,MAAMlB,sBAAsBW,IAAI;YAAE,GAAGL,KAAK;YAAEC,KAAKL,cAAcK,KAAKQ;QAAW;QAC/EL,YAAYT,iBAAiBS,YAAY;YAAEW,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QACjFb,SAASP,iBAAiBO,SAAS;YAAEc,UAAU,IAAI;QAAC;QACpDb,WAAWR,iBAAiBQ,WAAW;YAAEY,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QAC/ER,OAAOZ,iBAAiBY;QACxBD,SAASX,iBAAiBW;QAC1BE,YAAYb,iBAAiBa;IAC/B;AACF,EAAE"}
+{"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\n\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n  props: TreeItemLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n  const { content, iconAfter, iconBefore, as = 'span' } = props;\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n  const [isActionsVisibleExternal, actionsShorthand]: [boolean | undefined, TreeItemLayoutSlots['actions']] =\n    isResolvedShorthand(props.actions)\n      ? // .visible prop should not be propagated to the DOM\n        [props.actions.visible, { ...props.actions, visible: undefined }]\n      : [undefined, props.actions];\n\n  const isActionsVisible = useTreeItemContext_unstable(ctx => ctx.isActionsVisible) || isActionsVisibleExternal;\n  const isAsideVisible = useTreeItemContext_unstable(ctx => ctx.isAsideVisible);\n  const selectionRef = useTreeItemContext_unstable(ctx => ctx.selectionRef);\n  const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n  const actionsRef = useTreeItemContext_unstable(ctx => ctx.actionsRef);\n  const value = useTreeItemContext_unstable(ctx => ctx.value);\n  const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n  const expandIcon = resolveShorthand(props.expandIcon, {\n    required: isBranch,\n    defaultProps: {\n      children: <TreeItemChevron />,\n      'aria-hidden': true,\n    },\n  });\n\n  const expandIconRefs = useMergedRefs(expandIcon?.ref, expandIconRef);\n  if (expandIcon) {\n    expandIcon.ref = expandIconRefs;\n  }\n\n  const actions = isActionsVisible ? resolveShorthand(actionsShorthand) : undefined;\n\n  const actionsRefs = useMergedRefs(actions?.ref, actionsRef);\n  if (actions) {\n    actions.ref = actionsRefs;\n  }\n\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      content: 'div',\n      iconAfter: 'div',\n      actions: 'div',\n      aside: 'div',\n      // Casting here to a union between checkbox and radio\n      selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\n    },\n    buttonContextValue: { size: 'small' },\n    root: getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }),\n    iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),\n    content: resolveShorthand(content, { required: true }),\n    iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),\n    aside: isAsideVisible ? resolveShorthand(props.aside) : undefined,\n    actions,\n    expandIcon,\n    selector: resolveShorthand(props.selector, {\n      defaultProps: {\n        checked,\n        tabIndex: -1,\n        'aria-hidden': true,\n        ref: selectionRef,\n      },\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useMergedRefs","useTreeItemContext_unstable","useTreeContext_unstable","Checkbox","Radio","TreeItemChevron","useTreeItemLayout_unstable","props","ref","content","iconAfter","iconBefore","as","layoutRef","ctx","selectionMode","isActionsVisibleExternal","actionsShorthand","actions","visible","undefined","isActionsVisible","isAsideVisible","selectionRef","expandIconRef","actionsRef","value","checked","checkedItems","get","isBranch","itemType","expandIcon","required","defaultProps","children","expandIconRefs","actionsRefs","components","root","aside","selector","buttonContextValue","size","tabIndex"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,mBAAmB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AACxH,SAASC,2BAA2B,EAAEC,uBAAuB,QAAQ,iBAAiB;AAEtF,SAASC,QAAQ,QAAuB,2BAA2B;AACnE,SAASC,KAAK,QAAoB,wBAAwB;AAC1D,SAASC,eAAe,QAAQ,qBAAqB;AAErD;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC,MACwB;IACxB,MAAM,EAAEC,QAAO,EAAEC,UAAS,EAAEC,WAAU,EAAEC,IAAK,OAAM,EAAE,GAAGL;IAExD,MAAMM,YAAYZ,4BAA4Ba,CAAAA,MAAOA,IAAID,SAAS;IAClE,MAAME,gBAAgBb,wBAAwBY,CAAAA,MAAOA,IAAIC,aAAa;IAEtE,MAAM,CAACC,0BAA0BC,iBAAiB,GAChDnB,oBAAoBS,MAAMW,OAAO,IAE7B;QAACX,MAAMW,OAAO,CAACC,OAAO;QAAE;YAAE,GAAGZ,MAAMW,OAAO;YAAEC,SAASC;QAAU;KAAE,GACjE;QAACA;QAAWb,MAAMW,OAAO;KAAC;IAEhC,MAAMG,mBAAmBpB,4BAA4Ba,CAAAA,MAAOA,IAAIO,gBAAgB,KAAKL;IACrF,MAAMM,iBAAiBrB,4BAA4Ba,CAAAA,MAAOA,IAAIQ,cAAc;IAC5E,MAAMC,eAAetB,4BAA4Ba,CAAAA,MAAOA,IAAIS,YAAY;IACxE,MAAMC,gBAAgBvB,4BAA4Ba,CAAAA,MAAOA,IAAIU,aAAa;IAC1E,MAAMC,aAAaxB,4BAA4Ba,CAAAA,MAAOA,IAAIW,UAAU;IACpE,MAAMC,QAAQzB,4BAA4Ba,CAAAA,MAAOA,IAAIY,KAAK;QACXZ;IAA/C,MAAMa,UAAUzB,wBAAwBY,CAAAA,MAAOA,CAAAA,wBAAAA,IAAIc,YAAY,CAACC,GAAG,CAACH,oBAArBZ,mCAAAA,wBAA+B,KAAK;IACnF,MAAMgB,WAAW7B,4BAA4Ba,CAAAA,MAAOA,IAAIiB,QAAQ,KAAK;IAErE,MAAMC,aAAajC,iBAAiBQ,MAAMyB,UAAU,EAAE;QACpDC,UAAUH;QACVI,cAAc;YACZC,wBAAU,oBAAC9B;YACX,eAAe,IAAI;QACrB;IACF;IAEA,MAAM+B,iBAAiBpC,cAAcgC,uBAAAA,wBAAAA,KAAAA,IAAAA,WAAYxB,GAAG,EAAEgB;IACtD,IAAIQ,YAAY;QACdA,WAAWxB,GAAG,GAAG4B;IACnB,CAAC;IAED,MAAMlB,UAAUG,mBAAmBtB,iBAAiBkB,oBAAoBG,SAAS;IAEjF,MAAMiB,cAAcrC,cAAckB,oBAAAA,qBAAAA,KAAAA,IAAAA,QAASV,GAAG,EAAEiB;IAChD,IAAIP,SAAS;QACXA,QAAQV,GAAG,GAAG6B;IAChB,CAAC;IAED,OAAO;QACLC,YAAY;YACVC,MAAM;YACNP,YAAY;YACZrB,YAAY;YACZF,SAAS;YACTC,WAAW;YACXQ,SAAS;YACTsB,OAAO;YACP,qDAAqD;YACrDC,UAAW1B,kBAAkB,gBAAgBZ,WAAWC,KAAK;QAC/D;QACAsC,oBAAoB;YAAEC,MAAM;QAAQ;QACpCJ,MAAM1C,sBAAsBe,IAAI;YAAE,GAAGL,KAAK;YAAEC,KAAKR,cAAcQ,KAAKK;QAAW;QAC/EF,YAAYZ,iBAAiBY,YAAY;YAAEuB,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QACjFzB,SAASV,iBAAiBU,SAAS;YAAEwB,UAAU,IAAI;QAAC;QACpDvB,WAAWX,iBAAiBW,WAAW;YAAEwB,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QAC/EM,OAAOlB,iBAAiBvB,iBAAiBQ,MAAMiC,KAAK,IAAIpB,SAAS;QACjEF;QACAc;QACAS,UAAU1C,iBAAiBQ,MAAMkC,QAAQ,EAAE;YACzCP,cAAc;gBACZP;gBACAiB,UAAU,CAAC;gBACX,eAAe,IAAI;gBACnBpC,KAAKe;YACP;QACF;IACF;AACF,EAAE"}

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

@@ -10,7 +10,8 @@ export const treeItemLayoutClassNames = {
   iconAfter: 'fui-TreeItemLayout__iconAfter',
   expandIcon: 'fui-TreeItemLayout__expandIcon',
   aside: 'fui-TreeItemLayout__aside',
-  actions: 'fui-TreeItemLayout__actions'
+  actions: 'fui-TreeItemLayout__actions',
+  selector: 'fui-TreeItemLayout__selector'
 };
 /**
  * Styles for the root slot
@@ -192,7 +193,10 @@ export const useTreeItemLayoutStyles_unstable = state => {
     iconAfter,
     iconBefore,
     expandIcon,
-    root
+    root,
+    aside,
+    actions,
+    selector
   } = state;
   const rootStyles = useRootStyles();
   const actionsStyles = useActionsStyles();
@@ -216,14 +220,17 @@ export const useTreeItemLayoutStyles_unstable = state => {
   if (iconAfter) {
     iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconAfterStyles[size], iconAfter.className);
   }
-  if (state.actions) {
-    state.actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsStyles.base, state.actions.className);
+  if (actions) {
+    actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsStyles.base, actions.className);
   }
-  if (state.aside) {
-    state.aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideStyles.base, state.aside.className);
+  if (aside) {
+    aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideStyles.base, aside.className);
   }
-  if (state.expandIcon) {
-    state.expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);
+  if (expandIcon) {
+    expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);
+  }
+  if (selector) {
+    selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);
   }
   return state;
 };