@fluentui/react-tree 9.0.0-beta.24 → 9.0.0-beta.26

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 { useControllableOpenItems, useNestedTreeNavigation, useNestedControllableCheckedItems, createNextOpenItems } from '../../hooks';
 import { treeDataTypes } from '../../utils/tokens';
 /**
  * Create the state required to render the root level Tree.
@@ -10,8 +10,9 @@ import { treeDataTypes } from '../../utils/tokens';
  * @param ref - reference to root HTMLElement of Tree
  */ export function useRootTree(props, ref) {
     warnIfNoProperPropsRootTree(props);
-    const { appearance ='subtle' , size ='medium'  } = props;
-    const [openItems, updateOpenItems] = useOpenItemsState(props);
+    const { appearance ='subtle' , size ='medium' , selectionMode ='none'  } = props;
+    const [openItems, setOpenItems] = useControllableOpenItems(props);
+    const [checkedItems] = useNestedControllableCheckedItems(props);
     const [navigate, navigationRef] = useNestedTreeNavigation();
     const requestOpenChange = (data)=>{
         var _props_onOpenChange;
@@ -19,7 +20,14 @@ import { treeDataTypes } from '../../utils/tokens';
         if (data.event.isDefaultPrevented()) {
             return;
         }
-        return updateOpenItems(data);
+        return setOpenItems(createNextOpenItems(data, openItems));
+    };
+    const requestCheckedChange = (data)=>{
+        var _props_onCheckedChange;
+        (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, data.event, data);
+    // TODO:
+    // we should implement the logic for nested tree selection
+    // return setCheckedItems(checkedItems);
     };
     const requestNavigation = (data)=>{
         var _props_onNavigation_unstable;
@@ -32,105 +40,95 @@ 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);
+            case treeDataTypes.Change:
+                {
+                    const previousCheckedValue = checkedItems.get(request.value);
+                    return requestCheckedChange({
+                        ...request,
+                        selectionMode: selectionMode,
+                        checked: previousCheckedValue === 'mixed' ? true : !previousCheckedValue
+                    });
+                }
         }
     });
     return {
         components: {
             root: 'div'
         },
+        selectionMode,
         open: true,
         appearance,
         size,
         level: 1,
         openItems,
+        checkedItems,
         requestTreeResponse,
         root: getNativeElementProps('div', {
             ref: useMergedRefs(navigationRef, ref),
             role: 'tree',
+            'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,
             ...props
         })
     };

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 { SelectionMode, getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport {\n  TreeOpenChangeData,\n  TreeProps,\n  TreeState,\n  TreeNavigationData_unstable,\n  TreeCheckedChangeData,\n} from './Tree.types';\nimport {\n  useControllableOpenItems,\n  useNestedTreeNavigation,\n  useNestedControllableCheckedItems,\n  createNextOpenItems,\n} 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', selectionMode = 'none' } = props;\n\n  const [openItems, setOpenItems] = useControllableOpenItems(props);\n\n  const [checkedItems] = useNestedControllableCheckedItems(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 setOpenItems(createNextOpenItems(data, openItems));\n  };\n\n  const requestCheckedChange = (data: TreeCheckedChangeData) => {\n    props.onCheckedChange?.(data.event, data);\n    // TODO:\n    // we should implement the logic for nested tree selection\n    // return setCheckedItems(checkedItems);\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      case treeDataTypes.Change: {\n        const previousCheckedValue = checkedItems.get(request.value);\n        return requestCheckedChange({\n          ...request,\n          selectionMode: selectionMode as SelectionMode,\n          checked: previousCheckedValue === 'mixed' ? true : !previousCheckedValue,\n        });\n      }\n    }\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    selectionMode,\n    open: true,\n    appearance,\n    size,\n    level: 1,\n    openItems,\n    checkedItems,\n    requestTreeResponse,\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(navigationRef, ref),\n      role: 'tree',\n      'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\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","useControllableOpenItems","useNestedTreeNavigation","useNestedControllableCheckedItems","createNextOpenItems","treeDataTypes","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","setOpenItems","checkedItems","navigate","navigationRef","requestOpenChange","data","onOpenChange","event","isDefaultPrevented","requestCheckedChange","onCheckedChange","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","Change","previousCheckedValue","get","checked","components","root","level","role","undefined","process","env","NODE_ENV","console","warn"],"mappings":"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"}

package/lib/components/Tree/useSubtree.js

@@ -13,7 +13,9 @@ import { useTreeContext_unstable, useTreeItemContext_unstable } from '../../cont
     const value = useTreeItemContext_unstable((ctx)=>ctx.value);
     const { appearance =contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'subtle' , size =contextSize !== null && contextSize !== void 0 ? contextSize : 'medium'  } = props;
     const parentLevel = useTreeContext_unstable((ctx)=>ctx.level);
+    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);
     const openItems = useTreeContext_unstable((ctx)=>ctx.openItems);
+    const checkedItems = useTreeContext_unstable((ctx)=>ctx.checkedItems);
     const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);
     const open = openItems.has(value);
     return {
@@ -23,6 +25,7 @@ import { useTreeContext_unstable, useTreeItemContext_unstable } from '../../cont
         },
         appearance,
         size,
+        selectionMode,
         level: parentLevel + 1,
         root: getNativeElementProps('div', {
             ref: useMergedRefs(ref, subtreeRef),
@@ -30,6 +33,7 @@ import { useTreeContext_unstable, useTreeItemContext_unstable } from '../../cont
             ...props
         }),
         openItems,
+        checkedItems,
         requestTreeResponse
     };
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeProps, TreeState } from './Tree.types';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\n\n/**\n * Create the state required to render a sub-level Tree.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */\nexport function useSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  const contextAppearance = useTreeContext_unstable(ctx => ctx.appearance);\n  const contextSize = useTreeContext_unstable(ctx => ctx.size);\n  const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n  const value = useTreeItemContext_unstable(ctx => ctx.value);\n\n  const { appearance = contextAppearance ?? 'subtle', size = contextSize ?? 'medium' } = props;\n\n  const parentLevel = useTreeContext_unstable(ctx => ctx.level);\n  const openItems = useTreeContext_unstable(ctx => ctx.openItems);\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n\n  const open = openItems.has(value);\n\n  return {\n    open,\n    components: {\n      root: 'div',\n    },\n    appearance,\n    size,\n    level: parentLevel + 1,\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, subtreeRef),\n      role: 'group',\n      ...props,\n    }),\n    openItems,\n    requestTreeResponse,\n  };\n}\n"],"names":["React","getNativeElementProps","useMergedRefs","useTreeContext_unstable","useTreeItemContext_unstable","useSubtree","props","ref","contextAppearance","ctx","appearance","contextSize","size","subtreeRef","value","parentLevel","level","openItems","requestTreeResponse","open","has","components","root","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,4BAA4B;AAEjF,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,iBAAiB;AAEtF;;;;;CAKC,GACD,OAAO,SAASC,WAAWC,KAAgB,EAAEC,GAA2B,EAAa;IACnF,MAAMC,oBAAoBL,wBAAwBM,CAAAA,MAAOA,IAAIC,UAAU;IACvE,MAAMC,cAAcR,wBAAwBM,CAAAA,MAAOA,IAAIG,IAAI;IAC3D,MAAMC,aAAaT,4BAA4BK,CAAAA,MAAOA,IAAII,UAAU;IACpE,MAAMC,QAAQV,4BAA4BK,CAAAA,MAAOA,IAAIK,KAAK;IAE1D,MAAM,EAAEJ,YAAaF,8BAAAA,+BAAAA,oBAAqB,QAAQ,CAAA,EAAEI,MAAOD,wBAAAA,yBAAAA,cAAe,QAAQ,CAAA,EAAE,GAAGL;IAEvF,MAAMS,cAAcZ,wBAAwBM,CAAAA,MAAOA,IAAIO,KAAK;IAC5D,MAAMC,YAAYd,wBAAwBM,CAAAA,MAAOA,IAAIQ,SAAS;IAC9D,MAAMC,sBAAsBf,wBAAwBM,CAAAA,MAAOA,IAAIS,mBAAmB;IAElF,MAAMC,OAAOF,UAAUG,GAAG,CAACN;IAE3B,OAAO;QACLK;QACAE,YAAY;YACVC,MAAM;QACR;QACAZ;QACAE;QACAI,OAAOD,cAAc;QACrBO,MAAMrB,sBAAsB,OAAO;YACjCM,KAAKL,cAAcK,KAAKM;YACxBU,MAAM;YACN,GAAGjB,KAAK;QACV;QACAW;QACAC;IACF;AACF,CAAC"}
+{"version":3,"sources":["useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeProps, TreeState } from './Tree.types';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\n\n/**\n * Create the state required to render a sub-level Tree.\n *\n * @param props - props from this instance of Tree\n * @param ref - reference to root HTMLElement of Tree\n */\nexport function useSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n  const contextAppearance = useTreeContext_unstable(ctx => ctx.appearance);\n  const contextSize = useTreeContext_unstable(ctx => ctx.size);\n  const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n  const value = useTreeItemContext_unstable(ctx => ctx.value);\n\n  const { appearance = contextAppearance ?? 'subtle', size = contextSize ?? 'medium' } = props;\n\n  const parentLevel = useTreeContext_unstable(ctx => ctx.level);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n  const openItems = useTreeContext_unstable(ctx => ctx.openItems);\n  const checkedItems = useTreeContext_unstable(ctx => ctx.checkedItems);\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n\n  const open = openItems.has(value);\n\n  return {\n    open,\n    components: {\n      root: 'div',\n    },\n    appearance,\n    size,\n    selectionMode,\n    level: parentLevel + 1,\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, subtreeRef),\n      role: 'group',\n      ...props,\n    }),\n    openItems,\n    checkedItems,\n    requestTreeResponse,\n  };\n}\n"],"names":["React","getNativeElementProps","useMergedRefs","useTreeContext_unstable","useTreeItemContext_unstable","useSubtree","props","ref","contextAppearance","ctx","appearance","contextSize","size","subtreeRef","value","parentLevel","level","selectionMode","openItems","checkedItems","requestTreeResponse","open","has","components","root","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,4BAA4B;AAEjF,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,iBAAiB;AAEtF;;;;;CAKC,GACD,OAAO,SAASC,WAAWC,KAAgB,EAAEC,GAA2B,EAAa;IACnF,MAAMC,oBAAoBL,wBAAwBM,CAAAA,MAAOA,IAAIC,UAAU;IACvE,MAAMC,cAAcR,wBAAwBM,CAAAA,MAAOA,IAAIG,IAAI;IAC3D,MAAMC,aAAaT,4BAA4BK,CAAAA,MAAOA,IAAII,UAAU;IACpE,MAAMC,QAAQV,4BAA4BK,CAAAA,MAAOA,IAAIK,KAAK;IAE1D,MAAM,EAAEJ,YAAaF,8BAAAA,+BAAAA,oBAAqB,QAAQ,CAAA,EAAEI,MAAOD,wBAAAA,yBAAAA,cAAe,QAAQ,CAAA,EAAE,GAAGL;IAEvF,MAAMS,cAAcZ,wBAAwBM,CAAAA,MAAOA,IAAIO,KAAK;IAC5D,MAAMC,gBAAgBd,wBAAwBM,CAAAA,MAAOA,IAAIQ,aAAa;IACtE,MAAMC,YAAYf,wBAAwBM,CAAAA,MAAOA,IAAIS,SAAS;IAC9D,MAAMC,eAAehB,wBAAwBM,CAAAA,MAAOA,IAAIU,YAAY;IACpE,MAAMC,sBAAsBjB,wBAAwBM,CAAAA,MAAOA,IAAIW,mBAAmB;IAElF,MAAMC,OAAOH,UAAUI,GAAG,CAACR;IAE3B,OAAO;QACLO;QACAE,YAAY;YACVC,MAAM;QACR;QACAd;QACAE;QACAK;QACAD,OAAOD,cAAc;QACrBS,MAAMvB,sBAAsB,OAAO;YACjCM,KAAKL,cAAcK,KAAKM;YACxBY,MAAM;YACN,GAAGnB,KAAK;QACV;QACAY;QACAC;QACAC;IACF;AACF,CAAC"}

package/lib/components/Tree/useTreeContextValues.js

@@ -1,13 +1,15 @@
 export function useTreeContextValues_unstable(state) {
-    const { openItems , level , appearance , size , requestTreeResponse  } = state;
+    const { openItems , checkedItems , selectionMode , level , appearance , size , requestTreeResponse  } = state;
     /**
    * This context is created with "@fluentui/react-context-selector",
    * there is no sense to memoize it
    */ const tree = {
-        appearance,
         size,
         level,
         openItems,
+        appearance,
+        checkedItems,
+        selectionMode,
         requestTreeResponse
     };
     return {

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 type { 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/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';\nimport type { Checkbox } from '@fluentui/react-checkbox';\nimport type { Radio } from '@fluentui/react-radio';\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   * Selection indicator if selection type is checkbox\n   */\n  checkboxIndicator?: Slot<typeof Checkbox>;\n  /**\n   * Selection indicator if selection type is radio\n   */\n  radioIndicator?: Slot<typeof Radio>;\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,12 @@
 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';
+import { Space } from '@fluentui/keyboard-keys';
+import { treeDataTypes } from '../../utils/tokens';
 /**
  * Create the state required to render TreeItem.
  *
@@ -17,18 +19,38 @@ 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 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 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()) {
@@ -42,23 +64,33 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
         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,
-            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){
+            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:
@@ -68,6 +100,7 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
             case treeDataTypes.ArrowRight:
                 return requestTreeResponse({
                     event,
+                    target: event.currentTarget,
                     value,
                     itemType,
                     type: event.key
@@ -77,6 +110,7 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
         if (isTypeAheadCharacter) {
             requestTreeResponse({
                 event,
+                target: event.currentTarget,
                 value,
                 itemType,
                 type: treeDataTypes.TypeAhead
@@ -99,16 +133,53 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
             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,
-        actionsRef: useMergedRefs(actionsRef, handleActionsRef),
-        expandIconRef,
         layoutRef,
         itemType,
-        isActionsVisible,
-        isAsideVisible,
         level,
         components: {
             root: 'div'
@@ -120,13 +191,28 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
             role: 'treeitem',
             'aria-level': level,
             [dataTreeItemValueAttrName]: value,
-            'aria-expanded': itemType === 'branch' ? open : undefined,
+            '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
+            onBlur: handleActionsInvisible,
+            onChange: handleChange
+        }),
+        actions: actionsSlot,
+        aside: asideSlot,
+        expandIcon: expandIconSlot,
+        selector: selectionMode === 'none' ? undefined : resolveShorthand(selectionMode === 'multiselect' ? props.checkboxIndicator : props.radioIndicator, {
+            required: true,
+            defaultProps: {
+                checked,
+                tabIndex: -1,
+                'aria-hidden': true,
+                ref: selectionRef
+            }
         })
     };
 }