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

package/lib/components/Tree/useRootTree.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
-import { useNestedTreeNavigation, useOpenItemsState } from '../../hooks';
+import { createNextOpenItems, useControllableOpenItems, useNestedTreeNavigation } from '../../hooks';
 import { treeDataTypes } from '../../utils/tokens';
 /**
  * Create the state required to render the root level Tree.
@@ -11,15 +11,19 @@ import { treeDataTypes } from '../../utils/tokens';
  */ export function useRootTree(props, ref) {
     warnIfNoProperPropsRootTree(props);
     const { appearance ='subtle' , size ='medium'  } = props;
-    const [openItems, updateOpenItems] = useOpenItemsState(props);
+    const [openItems, setOpenItems] = useControllableOpenItems(props);
     const [navigate, navigationRef] = useNestedTreeNavigation();
     const requestOpenChange = (data)=>{
         var _props_onOpenChange;
-        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, data.event, data);
+        const nextOpenItems = createNextOpenItems(data, openItems);
+        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, data.event, {
+            ...data,
+            openItems: nextOpenItems
+        });
         if (data.event.isDefaultPrevented()) {
             return;
         }
-        return updateOpenItems(data);
+        return setOpenItems(nextOpenItems);
     };
     const requestNavigation = (data)=>{
         var _props_onNavigation_unstable;
@@ -32,91 +36,69 @@ import { treeDataTypes } from '../../utils/tokens';
             data.event.preventDefault();
         }
     };
-    const handleTreeItemClick = ({ event , value , itemType , type  })=>{
-        ReactDOM.unstable_batchedUpdates(()=>{
-            requestOpenChange({
-                event,
-                value,
-                open: itemType === 'branch' && !openItems.has(value),
-                type,
-                target: event.currentTarget
-            });
-            requestNavigation({
-                event,
-                value,
-                target: event.currentTarget,
-                type: treeDataTypes.Click
-            });
-        });
-    };
-    const handleTreeItemKeyDown = ({ event , type , value , itemType  })=>{
-        const open = openItems.has(value);
-        switch(type){
+    const requestTreeResponse = useEventCallback((request)=>{
+        switch(request.type){
+            case treeDataTypes.Click:
+            case treeDataTypes.ExpandIconClick:
+                {
+                    return ReactDOM.unstable_batchedUpdates(()=>{
+                        requestOpenChange({
+                            ...request,
+                            open: request.itemType === 'branch' && !openItems.has(request.value)
+                        });
+                        requestNavigation({
+                            ...request,
+                            type: treeDataTypes.Click
+                        });
+                    });
+                }
             case treeDataTypes.ArrowRight:
-                if (itemType === 'leaf') {
-                    return;
+                {
+                    if (request.itemType === 'leaf') {
+                        return;
+                    }
+                    const open = openItems.has(request.value);
+                    if (!open) {
+                        return requestOpenChange({
+                            ...request,
+                            open: true
+                        });
+                    }
+                    return requestNavigation(request);
                 }
-                if (!open) {
+            case treeDataTypes.Enter:
+                {
+                    const open = openItems.has(request.value);
                     return requestOpenChange({
-                        event,
-                        value,
-                        open: true,
-                        type: treeDataTypes.ArrowRight,
-                        target: event.currentTarget
+                        ...request,
+                        open: request.itemType === 'branch' && !open
                     });
                 }
-                return requestNavigation({
-                    event,
-                    value,
-                    type,
-                    target: event.currentTarget
-                });
-            case treeDataTypes.Enter:
-                return requestOpenChange({
-                    event,
-                    value,
-                    open: itemType === 'branch' && !open,
-                    type: treeDataTypes.Enter,
-                    target: event.currentTarget
-                });
             case treeDataTypes.ArrowLeft:
-                if (open && itemType === 'branch') {
-                    return requestOpenChange({
-                        event,
-                        value,
-                        open: false,
-                        type: treeDataTypes.ArrowLeft,
-                        target: event.currentTarget
+                {
+                    const open = openItems.has(request.value);
+                    if (open && request.itemType === 'branch') {
+                        return requestOpenChange({
+                            ...request,
+                            open: false,
+                            type: treeDataTypes.ArrowLeft
+                        });
+                    }
+                    return requestNavigation({
+                        ...request,
+                        type: treeDataTypes.ArrowLeft
                     });
                 }
-                return requestNavigation({
-                    event,
-                    value,
-                    target: event.currentTarget,
-                    type: treeDataTypes.ArrowLeft
-                });
             case treeDataTypes.End:
             case treeDataTypes.Home:
             case treeDataTypes.ArrowUp:
             case treeDataTypes.ArrowDown:
             case treeDataTypes.TypeAhead:
                 return requestNavigation({
-                    event,
-                    value,
-                    type,
-                    target: event.currentTarget
+                    ...request,
+                    target: request.event.currentTarget
                 });
         }
-    };
-    const requestTreeResponse = useEventCallback((request)=>{
-        switch(request.event.type){
-            case 'click':
-                // casting is required here as we're narrowing down the event to only click events
-                return handleTreeItemClick(request);
-            case 'keydown':
-                // casting is required here as we're narrowing down the event to only keyboard events
-                return handleTreeItemKeyDown(request);
-        }
     });
     return {
         components: {

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

@@ -1 +1 @@
-{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeOpenChangeData, TreeProps, TreeState, TreeNavigationData_unstable } from './Tree.types';\nimport { useNestedTreeNavigation, useOpenItemsState } from '../../hooks';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { TreeItemRequest } from '../../contexts/index';\n\n/**\n * Create the state required to render the root level Tree.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */\nexport function useRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium' } = props;\n\n  const [openItems, updateOpenItems] = useOpenItemsState(props);\n  const [navigate, navigationRef] = useNestedTreeNavigation();\n\n  const requestOpenChange = (data: TreeOpenChangeData) => {\n    props.onOpenChange?.(data.event, data);\n    if (data.event.isDefaultPrevented()) {\n      return;\n    }\n    return updateOpenItems(data);\n  };\n\n  const requestNavigation = (data: TreeNavigationData_unstable) => {\n    props.onNavigation_unstable?.(data.event, data);\n    if (data.event.isDefaultPrevented()) {\n      return;\n    }\n    navigate(data);\n    if (data.type === treeDataTypes.ArrowDown || data.type === treeDataTypes.ArrowUp) {\n      data.event.preventDefault();\n    }\n  };\n\n  const handleTreeItemClick = ({\n    event,\n    value,\n    itemType,\n    type,\n  }: Extract<TreeItemRequest, { type: 'Click' | 'ExpandIconClick' }>) => {\n    ReactDOM.unstable_batchedUpdates(() => {\n      requestOpenChange({\n        event,\n        value,\n        open: itemType === 'branch' && !openItems.has(value),\n        type,\n        target: event.currentTarget,\n      });\n      requestNavigation({ event, value, target: event.currentTarget, type: treeDataTypes.Click });\n    });\n  };\n\n  const handleTreeItemKeyDown = ({\n    event,\n    type,\n    value,\n    itemType,\n  }: Exclude<TreeItemRequest, { type: 'Click' | 'ExpandIconClick' }>) => {\n    const open = openItems.has(value);\n    switch (type) {\n      case treeDataTypes.ArrowRight:\n        if (itemType === 'leaf') {\n          return;\n        }\n        if (!open) {\n          return requestOpenChange({\n            event,\n            value,\n            open: true,\n            type: treeDataTypes.ArrowRight,\n            target: event.currentTarget,\n          });\n        }\n        return requestNavigation({ event, value, type, target: event.currentTarget });\n      case treeDataTypes.Enter:\n        return requestOpenChange({\n          event,\n          value,\n          open: itemType === 'branch' && !open,\n          type: treeDataTypes.Enter,\n          target: event.currentTarget,\n        });\n      case treeDataTypes.ArrowLeft:\n        if (open && itemType === 'branch') {\n          return requestOpenChange({\n            event,\n            value,\n            open: false,\n            type: treeDataTypes.ArrowLeft,\n            target: event.currentTarget,\n          });\n        }\n        return requestNavigation({ event, value, target: event.currentTarget, type: treeDataTypes.ArrowLeft });\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.TypeAhead:\n        return requestNavigation({ event, value, type, target: event.currentTarget });\n    }\n  };\n\n  const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n    switch (request.event.type) {\n      case 'click':\n        // casting is required here as we're narrowing down the event to only click events\n        return handleTreeItemClick(request as Extract<TreeItemRequest, { type: 'Click' | 'ExpandIconClick' }>);\n      case 'keydown':\n        // casting is required here as we're narrowing down the event to only keyboard events\n        return handleTreeItemKeyDown(request as Exclude<TreeItemRequest, { type: 'Click' | 'ExpandIconClick' }>);\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    requestTreeResponse,\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(navigationRef, ref),\n      role: 'tree',\n      ...props,\n    }),\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');\n    }\n  }\n}\n"],"names":["React","ReactDOM","getNativeElementProps","useEventCallback","useMergedRefs","useNestedTreeNavigation","useOpenItemsState","treeDataTypes","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","openItems","updateOpenItems","navigate","navigationRef","requestOpenChange","data","onOpenChange","event","isDefaultPrevented","requestNavigation","onNavigation_unstable","type","ArrowDown","ArrowUp","preventDefault","handleTreeItemClick","value","itemType","unstable_batchedUpdates","open","has","target","currentTarget","Click","handleTreeItemKeyDown","ArrowRight","Enter","ArrowLeft","End","Home","TypeAhead","requestTreeResponse","request","components","root","level","role","process","env","NODE_ENV","console","warn"],"mappings":"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"}
+{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeOpenChangeData, TreeProps, TreeState, TreeNavigationData_unstable } from './Tree.types';\nimport { createNextOpenItems, useControllableOpenItems, useNestedTreeNavigation } from '../../hooks';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { TreeItemRequest } from '../../contexts';\n\n/**\n * Create the state required to render the root level Tree.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */\nexport function useRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  warnIfNoProperPropsRootTree(props);\n\n  const { appearance = 'subtle', size = 'medium' } = props;\n\n  const [openItems, setOpenItems] = useControllableOpenItems(props);\n\n  const [navigate, navigationRef] = useNestedTreeNavigation();\n\n  const requestOpenChange = (data: Omit<TreeOpenChangeData, 'openItems'>) => {\n    const nextOpenItems = createNextOpenItems(data, openItems);\n    props.onOpenChange?.(data.event, { ...data, openItems: nextOpenItems } as TreeOpenChangeData);\n    if (data.event.isDefaultPrevented()) {\n      return;\n    }\n    return setOpenItems(nextOpenItems);\n  };\n\n  const requestNavigation = (data: TreeNavigationData_unstable) => {\n    props.onNavigation_unstable?.(data.event, data);\n    if (data.event.isDefaultPrevented()) {\n      return;\n    }\n    navigate(data);\n    if (data.type === treeDataTypes.ArrowDown || data.type === treeDataTypes.ArrowUp) {\n      data.event.preventDefault();\n    }\n  };\n\n  const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n    switch (request.type) {\n      case treeDataTypes.Click:\n      case treeDataTypes.ExpandIconClick: {\n        return ReactDOM.unstable_batchedUpdates(() => {\n          requestOpenChange({ ...request, open: request.itemType === 'branch' && !openItems.has(request.value) });\n          requestNavigation({ ...request, type: treeDataTypes.Click });\n        });\n      }\n      case treeDataTypes.ArrowRight: {\n        if (request.itemType === 'leaf') {\n          return;\n        }\n        const open = openItems.has(request.value);\n        if (!open) {\n          return requestOpenChange({ ...request, open: true });\n        }\n        return requestNavigation(request);\n      }\n      case treeDataTypes.Enter: {\n        const open = openItems.has(request.value);\n        return requestOpenChange({ ...request, open: request.itemType === 'branch' && !open });\n      }\n      case treeDataTypes.ArrowLeft: {\n        const open = openItems.has(request.value);\n        if (open && request.itemType === 'branch') {\n          return requestOpenChange({ ...request, open: false, type: treeDataTypes.ArrowLeft });\n        }\n        return requestNavigation({ ...request, type: treeDataTypes.ArrowLeft });\n      }\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.TypeAhead:\n        return requestNavigation({ ...request, target: request.event.currentTarget });\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    requestTreeResponse,\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(navigationRef, ref),\n      role: 'tree',\n      ...props,\n    }),\n  };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n  if (process.env.NODE_ENV === 'development') {\n    if (!props['aria-label'] && !props['aria-labelledby']) {\n      // eslint-disable-next-line no-console\n      console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');\n    }\n  }\n}\n"],"names":["React","ReactDOM","getNativeElementProps","useEventCallback","useMergedRefs","createNextOpenItems","useControllableOpenItems","useNestedTreeNavigation","treeDataTypes","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","openItems","setOpenItems","navigate","navigationRef","requestOpenChange","data","nextOpenItems","onOpenChange","event","isDefaultPrevented","requestNavigation","onNavigation_unstable","type","ArrowDown","ArrowUp","preventDefault","requestTreeResponse","request","Click","ExpandIconClick","unstable_batchedUpdates","open","itemType","has","value","ArrowRight","Enter","ArrowLeft","End","Home","TypeAhead","target","currentTarget","components","root","level","role","process","env","NODE_ENV","console","warn"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,YAAYC,cAAc,YAAY;AACtC,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAEnG,SAASC,mBAAmB,EAAEC,wBAAwB,EAAEC,uBAAuB,QAAQ,cAAc;AACrG,SAASC,aAAa,QAAQ,qBAAqB;AAGnD;;;;;CAKC,GACD,OAAO,SAASC,YAAYC,KAAgB,EAAEC,GAA2B,EAAa;IACpFC,4BAA4BF;IAE5B,MAAM,EAAEG,YAAa,SAAQ,EAAEC,MAAO,SAAQ,EAAE,GAAGJ;IAEnD,MAAM,CAACK,WAAWC,aAAa,GAAGV,yBAAyBI;IAE3D,MAAM,CAACO,UAAUC,cAAc,GAAGX;IAElC,MAAMY,oBAAoB,CAACC,OAAgD;YAEzEV;QADA,MAAMW,gBAAgBhB,oBAAoBe,MAAML;QAChDL,CAAAA,sBAAAA,MAAMY,YAAY,cAAlBZ,iCAAAA,KAAAA,IAAAA,oBAAAA,KAAAA,OAAqBU,KAAKG,KAAK,EAAE;YAAE,GAAGH,IAAI;YAAEL,WAAWM;QAAc;QACrE,IAAID,KAAKG,KAAK,CAACC,kBAAkB,IAAI;YACnC;QACF,CAAC;QACD,OAAOR,aAAaK;IACtB;IAEA,MAAMI,oBAAoB,CAACL,OAAsC;YAC/DV;QAAAA,CAAAA,+BAAAA,MAAMgB,qBAAqB,cAA3BhB,0CAAAA,KAAAA,IAAAA,6BAAAA,KAAAA,OAA8BU,KAAKG,KAAK,EAAEH;QAC1C,IAAIA,KAAKG,KAAK,CAACC,kBAAkB,IAAI;YACnC;QACF,CAAC;QACDP,SAASG;QACT,IAAIA,KAAKO,IAAI,KAAKnB,cAAcoB,SAAS,IAAIR,KAAKO,IAAI,KAAKnB,cAAcqB,OAAO,EAAE;YAChFT,KAAKG,KAAK,CAACO,cAAc;QAC3B,CAAC;IACH;IAEA,MAAMC,sBAAsB5B,iBAAiB,CAAC6B,UAA6B;QACzE,OAAQA,QAAQL,IAAI;YAClB,KAAKnB,cAAcyB,KAAK;YACxB,KAAKzB,cAAc0B,eAAe;gBAAE;oBAClC,OAAOjC,SAASkC,uBAAuB,CAAC,IAAM;wBAC5ChB,kBAAkB;4BAAE,GAAGa,OAAO;4BAAEI,MAAMJ,QAAQK,QAAQ,KAAK,YAAY,CAACtB,UAAUuB,GAAG,CAACN,QAAQO,KAAK;wBAAE;wBACrGd,kBAAkB;4BAAE,GAAGO,OAAO;4BAAEL,MAAMnB,cAAcyB,KAAK;wBAAC;oBAC5D;gBACF;YACA,KAAKzB,cAAcgC,UAAU;gBAAE;oBAC7B,IAAIR,QAAQK,QAAQ,KAAK,QAAQ;wBAC/B;oBACF,CAAC;oBACD,MAAMD,OAAOrB,UAAUuB,GAAG,CAACN,QAAQO,KAAK;oBACxC,IAAI,CAACH,MAAM;wBACT,OAAOjB,kBAAkB;4BAAE,GAAGa,OAAO;4BAAEI,MAAM,IAAI;wBAAC;oBACpD,CAAC;oBACD,OAAOX,kBAAkBO;gBAC3B;YACA,KAAKxB,cAAciC,KAAK;gBAAE;oBACxB,MAAML,OAAOrB,UAAUuB,GAAG,CAACN,QAAQO,KAAK;oBACxC,OAAOpB,kBAAkB;wBAAE,GAAGa,OAAO;wBAAEI,MAAMJ,QAAQK,QAAQ,KAAK,YAAY,CAACD;oBAAK;gBACtF;YACA,KAAK5B,cAAckC,SAAS;gBAAE;oBAC5B,MAAMN,OAAOrB,UAAUuB,GAAG,CAACN,QAAQO,KAAK;oBACxC,IAAIH,QAAQJ,QAAQK,QAAQ,KAAK,UAAU;wBACzC,OAAOlB,kBAAkB;4BAAE,GAAGa,OAAO;4BAAEI,MAAM,KAAK;4BAAET,MAAMnB,cAAckC,SAAS;wBAAC;oBACpF,CAAC;oBACD,OAAOjB,kBAAkB;wBAAE,GAAGO,OAAO;wBAAEL,MAAMnB,cAAckC,SAAS;oBAAC;gBACvE;YACA,KAAKlC,cAAcmC,GAAG;YACtB,KAAKnC,cAAcoC,IAAI;YACvB,KAAKpC,cAAcqB,OAAO;YAC1B,KAAKrB,cAAcoB,SAAS;YAC5B,KAAKpB,cAAcqC,SAAS;gBAC1B,OAAOpB,kBAAkB;oBAAE,GAAGO,OAAO;oBAAEc,QAAQd,QAAQT,KAAK,CAACwB,aAAa;gBAAC;QAC/E;IACF;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAb,MAAM,IAAI;QACVvB;QACAC;QACAoC,OAAO;QACPnC;QACAgB;QACAkB,MAAM/C,sBAAsB,OAAO;YACjCS,KAAKP,cAAcc,eAAeP;YAClCwC,MAAM;YACN,GAAGzC,KAAK;QACV;IACF;AACF,CAAC;AAED,SAASE,4BAA4BF,KAAwD,EAAE;IAC7F,IAAI0C,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAI,CAAC5C,KAAK,CAAC,aAAa,IAAI,CAACA,KAAK,CAAC,kBAAkB,EAAE;YACrD,sCAAsC;YACtC6C,QAAQC,IAAI,CAAC;QACf,CAAC;IACH,CAAC;AACH"}

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';\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 = { treeItem: TreeItemContextValue };\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"}
+{"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"}

package/lib/components/TreeItem/renderTreeItem.js

@@ -1,11 +1,13 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
-import { TreeItemProvider } from '../../contexts';
+import { TreeItemProvider, TreeItemSlotsProvider } 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
-    }, slotProps.root.children));
+    }, /*#__PURE__*/ createElement(TreeItemSlotsProvider, {
+        value: contextValues.treeItemSlots
+    }, 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, TreeItemSlots, TreeItemContextValues } 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"}
+{"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"}

package/lib/components/TreeItem/useTreeItem.js

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { getNativeElementProps, useId, useMergedRefs } from '@fluentui/react-utilities';
+import { getNativeElementProps, isResolvedShorthand, resolveShorthand, useControllableState, 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';
 /**
  * Create the state required to render TreeItem.
  *
@@ -17,18 +18,34 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
     var _props_value;
     const contextLevel = useTreeContext_unstable((ctx)=>ctx.level);
     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 , expandIcon , aside , ...rest } = props;
     const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);
-    const [isActionsVisible, setActionsVisible] = React.useState(false);
+    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 [isAsideVisible, setAsideVisible] = React.useState(true);
-    const handleActionsRef = (actions)=>{
-        setAsideVisible(actions === null);
+    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 handleClick = useEventCallback((event)=>{
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
         if (event.isDefaultPrevented()) {
@@ -45,17 +62,16 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
         const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);
         requestTreeResponse({
             event,
-            itemType,
             value,
+            itemType,
+            target: event.currentTarget,
             type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click
         });
     });
     const handleKeyDown = useEventCallback((event)=>{
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-        if (event.isDefaultPrevented()) {
-            return;
-        }
-        if (event.currentTarget !== event.target) {
+        // Ignore keyboard events that do not originate from the current tree item.
+        if (event.isDefaultPrevented() || event.currentTarget !== event.target) {
             return;
         }
         switch(event.key){
@@ -68,6 +84,7 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
             case treeDataTypes.ArrowRight:
                 return requestTreeResponse({
                     event,
+                    target: event.currentTarget,
                     value,
                     itemType,
                     type: event.key
@@ -77,6 +94,7 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
         if (isTypeAheadCharacter) {
             requestTreeResponse({
                 event,
+                target: event.currentTarget,
                 value,
                 itemType,
                 type: treeDataTypes.TypeAhead
@@ -99,16 +117,37 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
             return setActionsVisible(false);
         }
     });
+    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,
-        actionsRef: useMergedRefs(actionsRef, handleActionsRef),
-        expandIconRef,
         layoutRef,
         itemType,
-        isActionsVisible,
-        isAsideVisible,
         level,
         components: {
             root: 'div'
@@ -120,13 +159,16 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
             role: 'treeitem',
             'aria-level': level,
             [dataTreeItemValueAttrName]: value,
-            'aria-expanded': itemType === 'branch' ? open : undefined,
+            'aria-expanded': isBranch ? open : undefined,
             onClick: handleClick,
             onKeyDown: handleKeyDown,
             onMouseOver: handleActionsVisible,
             onFocus: handleActionsVisible,
             onMouseOut: handleActionsInvisible,
             onBlur: handleActionsInvisible
-        })
+        }),
+        actions: actionsSlot,
+        aside: asideSlot,
+        expandIcon: expandIconSlot
     };
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItem.ts"],"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 { treeDataTypes } from '../../utils/tokens';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\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 { 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 = (actions: HTMLDivElement | null) => {\n    setAsideVisible(actions === 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 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      itemType,\n      value,\n      type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n    });\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    if (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, 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, 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  return {\n    value,\n    open,\n    subtreeRef,\n    actionsRef: useMergedRefs(actionsRef, handleActionsRef),\n    expandIconRef,\n    layoutRef,\n    itemType,\n    isActionsVisible,\n    isAsideVisible,\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': itemType === 'branch' ? open : undefined,\n      onClick: handleClick,\n      onKeyDown: handleKeyDown,\n      onMouseOver: handleActionsVisible,\n      onFocus: handleActionsVisible,\n      onMouseOut: handleActionsInvisible,\n      onBlur: handleActionsInvisible,\n    }),\n  };\n}\n"],"names":["React","getNativeElementProps","useId","useMergedRefs","useEventCallback","elementContains","useTreeContext_unstable","treeDataTypes","dataTreeItemValueAttrName","useTreeItem_unstable","props","ref","contextLevel","ctx","level","value","toString","onClick","onKeyDown","as","itemType","rest","requestTreeResponse","isActionsVisible","setActionsVisible","useState","isAsideVisible","setAsideVisible","handleActionsRef","actions","open","openItems","has","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isFromExpandIcon","type","ExpandIconClick","Click","handleKeyDown","currentTarget","key","End","Home","Enter","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","components","root","tabIndex","role","undefined","onMouseOver","onFocus","onMouseOut","onBlur"],"mappings":"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"}
+{"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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"}

package/lib/components/TreeItem/useTreeItemContextValues.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemContextValues.ts"],"sourcesContent":["import type { TreeItemContextValue } from '../../contexts';\nimport type { TreeItemContextValues, TreeItemState } from './TreeItem.types';\n\nexport function useTreeItemContextValues_unstable(\n  state: Pick<TreeItemState, keyof TreeItemContextValue>,\n): TreeItemContextValues {\n  const { value, isActionsVisible, isAsideVisible, actionsRef, itemType, layoutRef, subtreeRef, expandIconRef, open } =\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    isActionsVisible,\n    isAsideVisible,\n    value,\n    actionsRef,\n    itemType,\n    layoutRef,\n    subtreeRef,\n    expandIconRef,\n    open,\n  };\n\n  return { treeItem };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","isActionsVisible","isAsideVisible","actionsRef","itemType","layoutRef","subtreeRef","expandIconRef","open","treeItem"],"mappings":"AAGA,OAAO,SAASA,kCACdC,KAAsD,EAC/B;IACvB,MAAM,EAAEC,MAAK,EAAEC,iBAAgB,EAAEC,eAAc,EAAEC,WAAU,EAAEC,SAAQ,EAAEC,UAAS,EAAEC,WAAU,EAAEC,cAAa,EAAEC,KAAI,EAAE,GACjHT;IAEF;;;GAGC,GACD,MAAMU,WAAiC;QACrCR;QACAC;QACAF;QACAG;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAS;AACpB,CAAC"}
+{"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["TreeItemLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { ButtonContextValue } from '@fluentui/react-button';\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};\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,WAiDE"}
+{"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["renderTreeItemLayout.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutState, TreeItemLayoutSlots } from './TreeItemLayout.types';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemLayout\n */\nexport const renderTreeItemLayout_unstable = (state: TreeItemLayoutState) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemLayoutSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n      {slots.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,aAAkCG;IAE/D,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, 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"}

package/lib/components/TreeItemLayout/useTreeItemLayout.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { getNativeElementProps, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
+import { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
 import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
-import { TreeItemChevron } from '../TreeItemChevron';
+import { useTreeItemSlotsContext_unstable } from '../../contexts/treeItemSlotsContext';
 /**
  * Create the state required to render TreeItemLayout.
  *
@@ -11,15 +11,9 @@ import { TreeItemChevron } from '../TreeItemChevron';
  * @param props - props from this instance of TreeItemLayout
  * @param ref - reference to root HTMLElement of TreeItemLayout
  */ export const useTreeItemLayout_unstable = (props, ref)=>{
-    const { content , iconAfter , iconBefore , expandIcon , as ='span' , aside , actions  } = props;
+    const { content , iconAfter , iconBefore , as ='span'  } = props;
+    const { actions , aside , expandIcon  } = useTreeItemSlotsContext_unstable();
     const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);
-    const expandIconRef = useTreeItemContext_unstable((ctx)=>ctx.expandIconRef);
-    const isActionsVisibleContext = useTreeItemContext_unstable((ctx)=>ctx.isActionsVisible);
-    const isAsideVisible = useTreeItemContext_unstable((ctx)=>ctx.isAsideVisible);
-    var _ref;
-    const isActionsVisible = (_ref = isResolvedShorthand(actions) ? actions.visible : undefined) !== null && _ref !== void 0 ? _ref : isActionsVisibleContext;
-    const isBranch = useTreeItemContext_unstable((ctx)=>ctx.itemType === 'branch');
-    const actionsRef = useMergedRefs(isResolvedShorthand(actions) ? actions.ref : undefined, useTreeItemContext_unstable((ctx)=>ctx.actionsRef));
     return {
         components: {
             root: 'div',
@@ -50,23 +44,8 @@ import { TreeItemChevron } from '../TreeItemChevron';
                 'aria-hidden': true
             }
         }),
-        aside: isAsideVisible ? resolveShorthand(aside) : undefined,
-        actions: isActionsVisible ? resolveShorthand(// visible props should not be propagated to the DOM
-        isResolvedShorthand(actions) ? {
-            ...actions,
-            visible: undefined
-        } : actions, {
-            defaultProps: {
-                ref: actionsRef
-            }
-        }) : undefined,
-        expandIcon: resolveShorthand(expandIcon, {
-            required: isBranch,
-            defaultProps: {
-                children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),
-                'aria-hidden': true,
-                ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef)
-            }
-        })
+        aside: resolveShorthand(aside),
+        actions: resolveShorthand(actions),
+        expandIcon: resolveShorthand(expandIcon)
     };
 };