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

package/lib/components/TreeItem/useTreeItem.js

@@ -3,9 +3,10 @@ import { getNativeElementProps, isResolvedShorthand, resolveShorthand, useContro
 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.
  *
@@ -39,11 +40,15 @@ import { TreeItemChevron } from '../TreeItemChevron';
     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)=>{
@@ -59,6 +64,10 @@ import { TreeItemChevron } from '../TreeItemChevron';
         if (isEventFromSubtree) {
             return;
         }
+        const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target);
+        if (isEventFromSelection) {
+            return;
+        }
         const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);
         requestTreeResponse({
             event,
@@ -75,6 +84,13 @@ import { TreeItemChevron } from '../TreeItemChevron';
             return;
         }
         switch(event.key){
+            case Space:
+                if (selectionMode !== 'none') {
+                    var _selectionRef_current;
+                    (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();
+                    event.preventDefault();
+                }
+                return;
             case treeDataTypes.End:
             case treeDataTypes.Home:
             case treeDataTypes.Enter:
@@ -117,6 +133,22 @@ import { TreeItemChevron } from '../TreeItemChevron';
             return setActionsVisible(false);
         }
     });
+    const handleChange = useEventCallback((event)=>{
+        if (event.isDefaultPrevented()) {
+            return;
+        }
+        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);
+        if (isEventFromSubtree) {
+            return;
+        }
+        requestTreeResponse({
+            event,
+            value,
+            itemType,
+            type: 'Change',
+            target: event.currentTarget
+        });
+    });
     const isBranch = itemType === 'branch';
     const actionsSlot = React.useMemo(()=>isActionsVisible ? resolveShorthand(actions) : undefined, [
         actions,
@@ -159,16 +191,28 @@ import { TreeItemChevron } from '../TreeItemChevron';
             role: 'treeitem',
             'aria-level': level,
             [dataTreeItemValueAttrName]: value,
+            'aria-checked': selectionMode === 'multiselect' ? checked : undefined,
+            'aria-selected': selectionMode === 'single' ? checked : undefined,
             'aria-expanded': isBranch ? open : undefined,
             onClick: handleClick,
             onKeyDown: handleKeyDown,
             onMouseOver: handleActionsVisible,
             onFocus: handleActionsVisible,
             onMouseOut: handleActionsInvisible,
-            onBlur: handleActionsInvisible
+            onBlur: handleActionsInvisible,
+            onChange: handleChange
         }),
         actions: actionsSlot,
         aside: asideSlot,
-        expandIcon: expandIconSlot
+        expandIcon: expandIconSlot,
+        selector: selectionMode === 'none' ? undefined : resolveShorthand(selectionMode === 'multiselect' ? props.checkboxIndicator : props.radioIndicator, {
+            required: true,
+            defaultProps: {
+                checked,
+                tabIndex: -1,
+                'aria-hidden': true,
+                ref: selectionRef
+            }
+        })
     };
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getNativeElementProps,\n  isResolvedShorthand,\n  resolveShorthand,\n  useControllableState,\n  useId,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemSlots, TreeItemState } from './TreeItem.types';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { TreeItemChevron } from '../TreeItemChevron';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n  const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n\n  const value = useId('fuiTreeItemValue-', props.value?.toString());\n\n  const {\n    onClick,\n    onKeyDown,\n    as = 'div',\n    itemType = 'leaf',\n    'aria-level': level = contextLevel,\n    expandIcon,\n    aside,\n    ...rest\n  } = props;\n\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n\n  const [isActionsVisibleExternal, actions]: [boolean | undefined, TreeItemSlots['actions']] = isResolvedShorthand(\n    props.actions,\n  )\n    ? // .visible prop should not be propagated to the DOM\n      [props.actions.visible, { ...props.actions, visible: undefined }]\n    : [undefined, props.actions];\n\n  const [isActionsVisible, setActionsVisible] = useControllableState({\n    state: isActionsVisibleExternal,\n    defaultState: false,\n    initialState: false,\n  });\n  const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n  const handleActionsRef = (actionsElement: HTMLDivElement | null) => {\n    setAsideVisible(actionsElement === null);\n  };\n\n  const open = useTreeContext_unstable(ctx => ctx.openItems.has(value));\n\n  const actionsRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLDivElement>(null);\n  const layoutRef = React.useRef<HTMLDivElement>(null);\n  const subtreeRef = React.useRef<HTMLDivElement>(null);\n\n  const actionsRefs = useMergedRefs(\n    isResolvedShorthand(actions) ? actions.ref : undefined,\n    handleActionsRef,\n    actionsRef,\n  );\n  const expandIconRefs = useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef);\n\n  const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n    if (isEventFromActions) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n    requestTreeResponse({\n      event,\n      value,\n      itemType,\n      target: event.currentTarget,\n      type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n    });\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    // Ignore keyboard events that do not originate from the current tree item.\n    if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n      return;\n    }\n    switch (event.key) {\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.Enter:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.ArrowLeft:\n      case treeDataTypes.ArrowRight:\n        return requestTreeResponse({ event, target: event.currentTarget, value, itemType, type: event.key });\n    }\n    const isTypeAheadCharacter =\n      event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      requestTreeResponse({ event, target: event.currentTarget, value, itemType, type: treeDataTypes.TypeAhead });\n    }\n  });\n\n  const handleActionsVisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    if (!isTargetFromSubtree) {\n      setActionsVisible(true);\n    }\n  });\n\n  const handleActionsInvisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    const isRelatedTargetFromActions = Boolean(\n      actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n    );\n    if (isRelatedTargetFromActions) {\n      return setActionsVisible(true);\n    }\n    if (!isTargetFromSubtree) {\n      return setActionsVisible(false);\n    }\n  });\n\n  const isBranch = itemType === 'branch';\n\n  const actionsSlot = React.useMemo(\n    () => (isActionsVisible ? resolveShorthand(actions) : undefined),\n    [actions, isActionsVisible],\n  );\n  if (actionsSlot) {\n    actionsSlot.ref = actionsRefs;\n  }\n  const asideSlot = React.useMemo(\n    () => (isAsideVisible ? resolveShorthand(aside) : undefined),\n    [aside, isAsideVisible],\n  );\n  const expandIconSlot = React.useMemo(\n    () =>\n      resolveShorthand(expandIcon, {\n        required: isBranch,\n        defaultProps: {\n          children: <TreeItemChevron />,\n          'aria-hidden': true,\n        },\n      }),\n    [expandIcon, isBranch],\n  );\n  if (expandIconSlot) {\n    expandIconSlot.ref = expandIconRefs;\n  }\n\n  return {\n    value,\n    open,\n    subtreeRef,\n    layoutRef,\n    itemType,\n    level,\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps(as, {\n      tabIndex: -1,\n      ...rest,\n      ref,\n      role: 'treeitem',\n      'aria-level': level,\n      [dataTreeItemValueAttrName]: value,\n      'aria-expanded': isBranch ? open : undefined,\n      onClick: handleClick,\n      onKeyDown: handleKeyDown,\n      onMouseOver: handleActionsVisible,\n      onFocus: handleActionsVisible,\n      onMouseOut: handleActionsInvisible,\n      onBlur: handleActionsInvisible,\n    }),\n    actions: actionsSlot,\n    aside: asideSlot,\n    expandIcon: expandIconSlot,\n  };\n}\n"],"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useControllableState","useId","useMergedRefs","useEventCallback","elementContains","useTreeContext_unstable","treeDataTypes","dataTreeItemValueAttrName","TreeItemChevron","useTreeItem_unstable","props","ref","contextLevel","ctx","level","value","toString","onClick","onKeyDown","as","itemType","expandIcon","aside","rest","requestTreeResponse","isActionsVisibleExternal","actions","visible","undefined","isActionsVisible","setActionsVisible","state","defaultState","initialState","isAsideVisible","setAsideVisible","useState","handleActionsRef","actionsElement","open","openItems","has","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","actionsRefs","expandIconRefs","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isFromExpandIcon","currentTarget","type","ExpandIconClick","Click","handleKeyDown","key","End","Home","Enter","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","isBranch","actionsSlot","useMemo","asideSlot","expandIconSlot","required","defaultProps","children","components","root","tabIndex","role","onMouseOver","onFocus","onMouseOut","onBlur"],"mappings":"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"}
+{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\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 { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n  const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n\n  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 actionsRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLDivElement>(null);\n  const layoutRef = React.useRef<HTMLDivElement>(null);\n  const subtreeRef = React.useRef<HTMLDivElement>(null);\n  const selectionRef = React.useRef<HTMLInputElement>(null);\n\n  const open = useTreeContext_unstable(ctx => ctx.openItems.has(value));\n  const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n  const 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 isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target as Node);\n    if (isEventFromSelection) {\n      return;\n    }\n    const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n    requestTreeResponse({\n      event,\n      value,\n      itemType,\n      target: event.currentTarget,\n      type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n    });\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    // Ignore keyboard events that do not originate from the current tree item.\n    if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n      return;\n    }\n    switch (event.key) {\n      case Space:\n        if (selectionMode !== 'none') {\n          selectionRef.current?.click();\n          event.preventDefault();\n        }\n        return;\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.Enter:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.ArrowLeft:\n      case treeDataTypes.ArrowRight:\n        return requestTreeResponse({ event, target: event.currentTarget, value, itemType, type: event.key });\n    }\n    const isTypeAheadCharacter =\n      event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      requestTreeResponse({ event, target: event.currentTarget, value, itemType, type: treeDataTypes.TypeAhead });\n    }\n  });\n\n  const handleActionsVisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    if (!isTargetFromSubtree) {\n      setActionsVisible(true);\n    }\n  });\n\n  const handleActionsInvisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    const isRelatedTargetFromActions = Boolean(\n      actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n    );\n    if (isRelatedTargetFromActions) {\n      return setActionsVisible(true);\n    }\n    if (!isTargetFromSubtree) {\n      return setActionsVisible(false);\n    }\n  });\n\n  const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    requestTreeResponse({ event, value, itemType, type: 'Change', target: event.currentTarget });\n  });\n\n  const isBranch = itemType === 'branch';\n\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-checked': selectionMode === 'multiselect' ? checked : undefined,\n      'aria-selected': selectionMode === 'single' ? checked : undefined,\n      'aria-expanded': isBranch ? open : undefined,\n      onClick: handleClick,\n      onKeyDown: handleKeyDown,\n      onMouseOver: handleActionsVisible,\n      onFocus: handleActionsVisible,\n      onMouseOut: handleActionsInvisible,\n      onBlur: handleActionsInvisible,\n      onChange: handleChange,\n    }),\n    actions: actionsSlot,\n    aside: asideSlot,\n    expandIcon: expandIconSlot,\n    selector:\n      selectionMode === 'none'\n        ? undefined\n        : resolveShorthand(selectionMode === 'multiselect' ? props.checkboxIndicator : props.radioIndicator, {\n            required: true,\n            defaultProps: {\n              checked,\n              tabIndex: -1,\n              'aria-hidden': true,\n              ref: selectionRef,\n              // onChange: handleChange,\n            },\n          }),\n  };\n}\n"],"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useControllableState","useId","useMergedRefs","useEventCallback","elementContains","useTreeContext_unstable","dataTreeItemValueAttrName","TreeItemChevron","Space","treeDataTypes","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","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","checked","checkedItems","get","selectionMode","actionsRefs","expandIconRefs","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isEventFromSelection","isFromExpandIcon","currentTarget","type","ExpandIconClick","Click","handleKeyDown","key","click","preventDefault","End","Home","Enter","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","handleChange","isBranch","actionsSlot","useMemo","asideSlot","expandIconSlot","required","defaultProps","children","components","root","tabIndex","role","onMouseOver","onFocus","onMouseOut","onBlur","onChange","selector","checkboxIndicator","radioIndicator"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,qBAAqB,EACrBC,mBAAmB,EACnBC,gBAAgB,EAChBC,oBAAoB,EACpBC,KAAK,EACLC,aAAa,QACR,4BAA4B;AACnC,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,eAAe,QAAQ,yBAAyB;AAEzD,SAASC,uBAAuB,QAAQ,uBAAuB;AAC/D,SAASC,yBAAyB,QAAQ,0CAA0C;AACpF,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,KAAK,QAAQ,0BAA0B;AAChD,SAASC,aAAa,QAAQ,qBAAqB;AAEnD;;;;;;;;CAQC,GACD,OAAO,SAASC,qBAAqBC,KAAoB,EAAEC,GAA8B,EAAiB;QAG/DD;IAFzC,MAAME,eAAeR,wBAAwBS,CAAAA,MAAOA,IAAIC,KAAK;IAE7D,MAAMC,QAAQf,MAAM,qBAAqBU,CAAAA,eAAAA,MAAMK,KAAK,cAAXL,0BAAAA,KAAAA,IAAAA,aAAaM;IAEtD,MAAM,EACJC,QAAO,EACPC,UAAS,EACTC,IAAK,MAAK,EACVC,UAAW,OAAM,EACjB,cAAcN,QAAQF,YAAY,CAAA,EAClCS,WAAU,EACVC,MAAK,EACL,GAAGC,MACJ,GAAGb;IAEJ,MAAMc,sBAAsBpB,wBAAwBS,CAAAA,MAAOA,IAAIW,mBAAmB;IAElF,MAAM,CAACC,0BAA0BC,QAAQ,GAAoD7B,oBAC3Fa,MAAMgB,OAAO,IAGX;QAAChB,MAAMgB,OAAO,CAACC,OAAO;QAAE;YAAE,GAAGjB,MAAMgB,OAAO;YAAEC,SAASC;QAAU;KAAE,GACjE;QAACA;QAAWlB,MAAMgB,OAAO;KAAC;IAE9B,MAAM,CAACG,kBAAkBC,kBAAkB,GAAG/B,qBAAqB;QACjEgC,OAAON;QACPO,cAAc,KAAK;QACnBC,cAAc,KAAK;IACrB;IACA,MAAM,CAACC,gBAAgBC,gBAAgB,GAAGxC,MAAMyC,QAAQ,CAAC,IAAI;IAE7D,MAAMC,mBAAmB,CAACC,iBAA0C;QAClEH,gBAAgBG,mBAAmB,IAAI;IACzC;IAEA,MAAMC,aAAa5C,MAAM6C,MAAM,CAAiB,IAAI;IACpD,MAAMC,gBAAgB9C,MAAM6C,MAAM,CAAiB,IAAI;IACvD,MAAME,YAAY/C,MAAM6C,MAAM,CAAiB,IAAI;IACnD,MAAMG,aAAahD,MAAM6C,MAAM,CAAiB,IAAI;IACpD,MAAMI,eAAejD,MAAM6C,MAAM,CAAmB,IAAI;IAExD,MAAMK,OAAOzC,wBAAwBS,CAAAA,MAAOA,IAAIiC,SAAS,CAACC,GAAG,CAAChC;QACfF;IAA/C,MAAMmC,UAAU5C,wBAAwBS,CAAAA,MAAOA,CAAAA,wBAAAA,IAAIoC,YAAY,CAACC,GAAG,CAACnC,oBAArBF,mCAAAA,wBAA+B,KAAK;IACnF,MAAMsC,gBAAgB/C,wBAAwBS,CAAAA,MAAOA,IAAIsC,aAAa;IAEtE,MAAMC,cAAcnD,cAClBJ,oBAAoB6B,WAAWA,QAAQf,GAAG,GAAGiB,SAAS,EACtDS,kBACAE;IAEF,MAAMc,iBAAiBpD,cAAcJ,oBAAoBwB,cAAcA,WAAWV,GAAG,GAAGiB,SAAS,EAAEa;IAEnG,MAAMa,cAAcpD,iBAAiB,CAACqD,QAA4C;QAChFtC,oBAAAA,qBAAAA,KAAAA,IAAAA,QAAUsC;QACV,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF,CAAC;QACD,MAAMC,qBAAqBlB,WAAWmB,OAAO,IAAIvD,gBAAgBoC,WAAWmB,OAAO,EAAEH,MAAMI,MAAM;QACjG,IAAIF,oBAAoB;YACtB;QACF,CAAC;QACD,MAAMG,qBAAqBjB,WAAWe,OAAO,IAAIvD,gBAAgBwC,WAAWe,OAAO,EAAEH,MAAMI,MAAM;QACjG,IAAIC,oBAAoB;YACtB;QACF,CAAC;QACD,MAAMC,uBAAuBjB,aAAac,OAAO,IAAIvD,gBAAgByC,aAAac,OAAO,EAAEH,MAAMI,MAAM;QACvG,IAAIE,sBAAsB;YACxB;QACF,CAAC;QACD,MAAMC,mBAAmBrB,cAAciB,OAAO,IAAIvD,gBAAgBsC,cAAciB,OAAO,EAAEH,MAAMI,MAAM;QACrGnC,oBAAoB;YAClB+B;YACAxC;YACAK;YACAuC,QAAQJ,MAAMQ,aAAa;YAC3BC,MAAMF,mBAAmBtD,cAAcyD,eAAe,GAAGzD,cAAc0D,KAAK;QAC9E;IACF;IAEA,MAAMC,gBAAgBjE,iBAAiB,CAACqD,QAA+C;QACrFrC,sBAAAA,uBAAAA,KAAAA,IAAAA,UAAYqC;QACZ,2EAA2E;QAC3E,IAAIA,MAAMC,kBAAkB,MAAMD,MAAMQ,aAAa,KAAKR,MAAMI,MAAM,EAAE;YACtE;QACF,CAAC;QACD,OAAQJ,MAAMa,GAAG;YACf,KAAK7D;gBACH,IAAI4C,kBAAkB,QAAQ;wBAC5BP;oBAAAA,CAAAA,wBAAAA,aAAac,OAAO,cAApBd,mCAAAA,KAAAA,IAAAA,sBAAsByB;oBACtBd,MAAMe,cAAc;gBACtB,CAAC;gBACD;YACF,KAAK9D,cAAc+D,GAAG;YACtB,KAAK/D,cAAcgE,IAAI;YACvB,KAAKhE,cAAciE,KAAK;YACxB,KAAKjE,cAAckE,OAAO;YAC1B,KAAKlE,cAAcmE,SAAS;YAC5B,KAAKnE,cAAcoE,SAAS;YAC5B,KAAKpE,cAAcqE,UAAU;gBAC3B,OAAOrD,oBAAoB;oBAAE+B;oBAAOI,QAAQJ,MAAMQ,aAAa;oBAAEhD;oBAAOK;oBAAU4C,MAAMT,MAAMa,GAAG;gBAAC;QACtG;QACA,MAAMU,uBACJvB,MAAMa,GAAG,CAACW,MAAM,KAAK,KAAKxB,MAAMa,GAAG,CAACY,KAAK,CAAC,SAAS,CAACzB,MAAM0B,MAAM,IAAI,CAAC1B,MAAM2B,OAAO,IAAI,CAAC3B,MAAM4B,OAAO;QACtG,IAAIL,sBAAsB;YACxBtD,oBAAoB;gBAAE+B;gBAAOI,QAAQJ,MAAMQ,aAAa;gBAAEhD;gBAAOK;gBAAU4C,MAAMxD,cAAc4E,SAAS;YAAC;QAC3G,CAAC;IACH;IAEA,MAAMC,uBAAuBnF,iBAAiB,CAACqD,QAA+C;QAC5F,MAAM+B,sBAAsBC,QAC1B5C,WAAWe,OAAO,IAAIvD,gBAAgBwC,WAAWe,OAAO,EAAEH,MAAMI,MAAM;QAExE,IAAI,CAAC2B,qBAAqB;YACxBxD,kBAAkB,IAAI;QACxB,CAAC;IACH;IAEA,MAAM0D,yBAAyBtF,iBAAiB,CAACqD,QAA+C;QAC9F,MAAM+B,sBAAsBC,QAC1B5C,WAAWe,OAAO,IAAIvD,gBAAgBwC,WAAWe,OAAO,EAAEH,MAAMI,MAAM;QAExE,MAAM8B,6BAA6BF,QACjChD,WAAWmB,OAAO,IAAIvD,gBAAgBoC,WAAWmB,OAAO,EAAEH,MAAMmC,aAAa;QAE/E,IAAID,4BAA4B;YAC9B,OAAO3D,kBAAkB,IAAI;QAC/B,CAAC;QACD,IAAI,CAACwD,qBAAqB;YACxB,OAAOxD,kBAAkB,KAAK;QAChC,CAAC;IACH;IAEA,MAAM6D,eAAezF,iBAAiB,CAACqD,QAA+C;QACpF,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF,CAAC;QACD,MAAMI,qBAAqBjB,WAAWe,OAAO,IAAIvD,gBAAgBwC,WAAWe,OAAO,EAAEH,MAAMI,MAAM;QACjG,IAAIC,oBAAoB;YACtB;QACF,CAAC;QACDpC,oBAAoB;YAAE+B;YAAOxC;YAAOK;YAAU4C,MAAM;YAAUL,QAAQJ,MAAMQ,aAAa;QAAC;IAC5F;IAEA,MAAM6B,WAAWxE,aAAa;IAE9B,MAAMyE,cAAclG,MAAMmG,OAAO,CAC/B,IAAOjE,mBAAmB/B,iBAAiB4B,WAAWE,SAAS,EAC/D;QAACF;QAASG;KAAiB;IAE7B,IAAIgE,aAAa;QACfA,YAAYlF,GAAG,GAAGyC;IACpB,CAAC;IACD,MAAM2C,YAAYpG,MAAMmG,OAAO,CAC7B,IAAO5D,iBAAiBpC,iBAAiBwB,SAASM,SAAS,EAC3D;QAACN;QAAOY;KAAe;IAEzB,MAAM8D,iBAAiBrG,MAAMmG,OAAO,CAClC,IACEhG,iBAAiBuB,YAAY;YAC3B4E,UAAUL;YACVM,cAAc;gBACZC,wBAAU,oBAAC7F;gBACX,eAAe,IAAI;YACrB;QACF,IACF;QAACe;QAAYuE;KAAS;IAExB,IAAII,gBAAgB;QAClBA,eAAerF,GAAG,GAAG0C;IACvB,CAAC;IAED,OAAO;QACLtC;QACA8B;QACAF;QACAD;QACAtB;QACAN;QACAsF,YAAY;YACVC,MAAM;QACR;QACAA,MAAMzG,sBAAsBuB,IAAI;YAC9BmF,UAAU,CAAC;YACX,GAAG/E,IAAI;YACPZ;YACA4F,MAAM;YACN,cAAczF;YACd,CAACT,0BAA0B,EAAEU;YAC7B,gBAAgBoC,kBAAkB,gBAAgBH,UAAUpB,SAAS;YACrE,iBAAiBuB,kBAAkB,WAAWH,UAAUpB,SAAS;YACjE,iBAAiBgE,WAAW/C,OAAOjB,SAAS;YAC5CX,SAASqC;YACTpC,WAAWiD;YACXqC,aAAanB;YACboB,SAASpB;YACTqB,YAAYlB;YACZmB,QAAQnB;YACRoB,UAAUjB;QACZ;QACAjE,SAASmE;QACTvE,OAAOyE;QACP1E,YAAY2E;QACZa,UACE1D,kBAAkB,SACdvB,YACA9B,iBAAiBqD,kBAAkB,gBAAgBzC,MAAMoG,iBAAiB,GAAGpG,MAAMqG,cAAc,EAAE;YACjGd,UAAU,IAAI;YACdC,cAAc;gBACZlD;gBACAsD,UAAU,CAAC;gBACX,eAAe,IAAI;gBACnB3F,KAAKiC;YAEP;QACF,EAAE;IACV;AACF,CAAC"}

package/lib/components/TreeItem/useTreeItemContextValues.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemContextValues, TreeItemState } from './TreeItem.types';\nimport type { TreeItemContextValue, TreeItemSlotsContextValue } from '../../contexts';\n\nexport function useTreeItemContextValues_unstable(state: TreeItemState): TreeItemContextValues {\n  const { value, itemType, layoutRef, subtreeRef, open, actions, aside, expandIcon } = state;\n\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const treeItem: TreeItemContextValue = {\n    value,\n    itemType,\n    layoutRef,\n    subtreeRef,\n    open,\n  };\n\n  const treeItemSlots: TreeItemSlotsContextValue = React.useMemo(\n    () => ({ actions, aside, expandIcon }),\n    [actions, aside, expandIcon],\n  );\n\n  return { treeItem, treeItemSlots };\n}\n"],"names":["React","useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","actions","aside","expandIcon","treeItem","treeItemSlots","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,kCAAkCC,KAAoB,EAAyB;IAC7F,MAAM,EAAEC,MAAK,EAAEC,SAAQ,EAAEC,UAAS,EAAEC,WAAU,EAAEC,KAAI,EAAEC,QAAO,EAAEC,MAAK,EAAEC,WAAU,EAAE,GAAGR;IAErF;;;GAGC,GACD,MAAMS,WAAiC;QACrCR;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,MAAMK,gBAA2CZ,MAAMa,OAAO,CAC5D,IAAO,CAAA;YAAEL;YAASC;YAAOC;QAAW,CAAA,GACpC;QAACF;QAASC;QAAOC;KAAW;IAG9B,OAAO;QAAEC;QAAUC;IAAc;AACnC,CAAC"}
+{"version":3,"sources":["useTreeItemContextValues.ts"],"sourcesContent":["import * 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, selector } = 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, selector }),\n    [actions, aside, expandIcon, selector],\n  );\n\n  return { treeItem, treeItemSlots };\n}\n"],"names":["React","useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","actions","aside","expandIcon","selector","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,EAAEC,SAAQ,EAAE,GAAGT;IAE/F;;;GAGC,GACD,MAAMU,WAAiC;QACrCT;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,MAAMM,gBAA2Cb,MAAMc,OAAO,CAC5D,IAAO,CAAA;YAAEN;YAASC;YAAOC;YAAYC;QAAS,CAAA,GAC9C;QAACH;QAASC;QAAOC;QAAYC;KAAS;IAGxC,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, Slot } from '@fluentui/react-utilities';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { TreeItemSlots } from '../TreeItem/TreeItem.types';\n\nexport type TreeItemLayoutSlots = {\n  root: Slot<'div'>;\n  /**\n   * Content. Children of the root slot are automatically rendered here\n   */\n  content: NonNullable<Slot<'div'>>;\n  /**\n   * Icon slot that renders right before main content\n   */\n  iconBefore?: Slot<'div'>;\n  /**\n   * Icon slot that renders right after main content\n   */\n  iconAfter?: Slot<'div'>;\n};\n\nexport type TreeItemLayoutInternalSlots = TreeItemLayoutSlots & Pick<TreeItemSlots, 'actions' | 'aside' | 'expandIcon'>;\n\n/**\n * TreeItemLayout Props\n */\nexport type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemLayout\n */\nexport type TreeItemLayoutState = ComponentState<TreeItemLayoutInternalSlots> & {\n  buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAgCE"}
+{"version":3,"sources":["TreeItemLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { TreeItemSlotsContextValue } from '../../contexts/treeItemSlotsContext';\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 & TreeItemSlotsContextValue;\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

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

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

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

package/lib/components/TreeItemLayout/useTreeItemLayout.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
-import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
-import { useTreeItemSlotsContext_unstable } from '../../contexts/treeItemSlotsContext';
+import { useTreeItemContext_unstable, useTreeContext_unstable, useTreeItemSlotsContext_unstable } from '../../contexts';
+import { Checkbox } from '@fluentui/react-checkbox';
+import { Radio } from '@fluentui/react-radio';
 /**
  * Create the state required to render TreeItemLayout.
  *
@@ -12,8 +13,9 @@ import { useTreeItemSlotsContext_unstable } from '../../contexts/treeItemSlotsCo
  * @param ref - reference to root HTMLElement of TreeItemLayout
  */ export const useTreeItemLayout_unstable = (props, ref)=>{
     const { content , iconAfter , iconBefore , as ='span'  } = props;
-    const { actions , aside , expandIcon  } = useTreeItemSlotsContext_unstable();
+    const { actions , aside , expandIcon , selector  } = useTreeItemSlotsContext_unstable();
     const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);
+    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);
     return {
         components: {
             root: 'div',
@@ -22,7 +24,9 @@ import { useTreeItemSlotsContext_unstable } from '../../contexts/treeItemSlotsCo
             content: 'div',
             iconAfter: 'div',
             actions: 'div',
-            aside: 'div'
+            aside: 'div',
+            // Casting here to a union between checkbox and radio
+            selector: selectionMode === 'multiselect' ? Checkbox : Radio
         },
         buttonContextValue: {
             size: 'small'
@@ -46,6 +50,7 @@ import { useTreeItemSlotsContext_unstable } from '../../contexts/treeItemSlotsCo
         }),
         aside: resolveShorthand(aside),
         actions: resolveShorthand(actions),
-        expandIcon: resolveShorthand(expandIcon)
+        expandIcon: resolveShorthand(expandIcon),
+        selector: resolveShorthand(selector)
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutProps, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nimport { useTreeItemSlotsContext_unstable } from '../../contexts/treeItemSlotsContext';\n\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n  props: TreeItemLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n  const { content, iconAfter, iconBefore, as = 'span' } = props;\n\n  const { actions, aside, expandIcon } = useTreeItemSlotsContext_unstable();\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      content: 'div',\n      iconAfter: 'div',\n      actions: 'div',\n      aside: 'div',\n    },\n    buttonContextValue: { size: 'small' },\n    root: getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }),\n    iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),\n    content: resolveShorthand(content, { required: true }),\n    iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),\n    aside: resolveShorthand(aside),\n    actions: resolveShorthand(actions),\n    expandIcon: resolveShorthand(expandIcon),\n  };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useMergedRefs","useTreeItemContext_unstable","useTreeItemSlotsContext_unstable","useTreeItemLayout_unstable","props","ref","content","iconAfter","iconBefore","as","actions","aside","expandIcon","layoutRef","ctx","components","root","buttonContextValue","size","defaultProps","required"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAEnG,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,gCAAgC,QAAQ,sCAAsC;AAEvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC,MACwB;IACxB,MAAM,EAAEC,QAAO,EAAEC,UAAS,EAAEC,WAAU,EAAEC,IAAK,OAAM,EAAE,GAAGL;IAExD,MAAM,EAAEM,QAAO,EAAEC,MAAK,EAAEC,WAAU,EAAE,GAAGV;IAEvC,MAAMW,YAAYZ,4BAA4Ba,CAAAA,MAAOA,IAAID,SAAS;IAElE,OAAO;QACLE,YAAY;YACVC,MAAM;YACNJ,YAAY;YACZJ,YAAY;YACZF,SAAS;YACTC,WAAW;YACXG,SAAS;YACTC,OAAO;QACT;QACAM,oBAAoB;YAAEC,MAAM;QAAQ;QACpCF,MAAMlB,sBAAsBW,IAAI;YAAE,GAAGL,KAAK;YAAEC,KAAKL,cAAcK,KAAKQ;QAAW;QAC/EL,YAAYT,iBAAiBS,YAAY;YAAEW,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QACjFb,SAASP,iBAAiBO,SAAS;YAAEc,UAAU,IAAI;QAAC;QACpDb,WAAWR,iBAAiBQ,WAAW;YAAEY,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QAC/ER,OAAOZ,iBAAiBY;QACxBD,SAASX,iBAAiBW;QAC1BE,YAAYb,iBAAiBa;IAC/B;AACF,EAAE"}
+{"version":3,"sources":["useTreeItemLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable, useTreeItemSlotsContext_unstable } from '../../contexts';\nimport type { TreeItemLayoutProps, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\n\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n  props: TreeItemLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n  const { content, iconAfter, iconBefore, as = 'span' } = props;\n\n  const { actions, aside, expandIcon, selector } = useTreeItemSlotsContext_unstable();\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      content: 'div',\n      iconAfter: 'div',\n      actions: 'div',\n      aside: 'div',\n      // Casting here to a union between checkbox and radio\n      selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\n    },\n    buttonContextValue: { size: 'small' },\n    root: getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }),\n    iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),\n    content: resolveShorthand(content, { required: true }),\n    iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),\n    aside: resolveShorthand(aside),\n    actions: resolveShorthand(actions),\n    expandIcon: resolveShorthand(expandIcon),\n    selector: resolveShorthand(selector),\n  };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useMergedRefs","useTreeItemContext_unstable","useTreeContext_unstable","useTreeItemSlotsContext_unstable","Checkbox","Radio","useTreeItemLayout_unstable","props","ref","content","iconAfter","iconBefore","as","actions","aside","expandIcon","selector","layoutRef","ctx","selectionMode","components","root","buttonContextValue","size","defaultProps","required"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AACnG,SAASC,2BAA2B,EAAEC,uBAAuB,EAAEC,gCAAgC,QAAQ,iBAAiB;AAExH,SAASC,QAAQ,QAAuB,2BAA2B;AACnE,SAASC,KAAK,QAAoB,wBAAwB;AAE1D;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC,MACwB;IACxB,MAAM,EAAEC,QAAO,EAAEC,UAAS,EAAEC,WAAU,EAAEC,IAAK,OAAM,EAAE,GAAGL;IAExD,MAAM,EAAEM,QAAO,EAAEC,MAAK,EAAEC,WAAU,EAAEC,SAAQ,EAAE,GAAGb;IAEjD,MAAMc,YAAYhB,4BAA4BiB,CAAAA,MAAOA,IAAID,SAAS;IAClE,MAAME,gBAAgBjB,wBAAwBgB,CAAAA,MAAOA,IAAIC,aAAa;IAEtE,OAAO;QACLC,YAAY;YACVC,MAAM;YACNN,YAAY;YACZJ,YAAY;YACZF,SAAS;YACTC,WAAW;YACXG,SAAS;YACTC,OAAO;YACP,qDAAqD;YACrDE,UAAWG,kBAAkB,gBAAgBf,WAAWC,KAAK;QAC/D;QACAiB,oBAAoB;YAAEC,MAAM;QAAQ;QACpCF,MAAMvB,sBAAsBc,IAAI;YAAE,GAAGL,KAAK;YAAEC,KAAKR,cAAcQ,KAAKS;QAAW;QAC/EN,YAAYZ,iBAAiBY,YAAY;YAAEa,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QACjFf,SAASV,iBAAiBU,SAAS;YAAEgB,UAAU,IAAI;QAAC;QACpDf,WAAWX,iBAAiBW,WAAW;YAAEc,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QAC/EV,OAAOf,iBAAiBe;QACxBD,SAASd,iBAAiBc;QAC1BE,YAAYhB,iBAAiBgB;QAC7BC,UAAUjB,iBAAiBiB;IAC7B;AACF,EAAE"}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","iconBefore","content","iconAfter","expandIcon","aside","actions","useRootStyles","base","mc9l5x","Bt984gj","sshi5w","B7ck84d","Ijaq50","Br312pm","nk6f5a","Bw0ie65","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","lj723h","ecr2s2","qya0sb","Bi91k9c","Jwef8y","Becwuud","leaf","uwmqm3","branch","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","subtle","transparent","De3pzq","d","a","h","useActionsStyles","Frg6f3","qhf8xq","Bj3rh1h","z8tnut","z189sj","Byoj8tv","useAsideStyles","i8kkvl","Belr9w4","useExpandIconStyles","Brf1p80","Bf4jedk","sj55zd","Bh6795r","Bnnss6s","xawz","useContentStyles","useIconStyles","useIconBeforeStyles","useIconAfterStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","actionsStyles","asideStyles","contentStyles","expandIconStyles","iconStyles","iconBeforeStyles","iconAfterStyles","size","ctx","appearance","itemType","className"],"sources":["useTreeItemLayoutStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemLayoutClassNames = {\n    root: 'fui-TreeItemLayout',\n    iconBefore: 'fui-TreeItemLayout__iconBefore',\n    content: 'fui-TreeItemLayout__content',\n    iconAfter: 'fui-TreeItemLayout__iconAfter',\n    expandIcon: 'fui-TreeItemLayout__expandIcon',\n    aside: 'fui-TreeItemLayout__aside',\n    actions: 'fui-TreeItemLayout__actions'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        minHeight: '32px',\n        boxSizing: 'border-box',\n        ...shorthands.gridArea('layout'),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        ':active': {\n            color: tokens.colorNeutralForeground2Pressed,\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n            [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n                color: tokens.colorNeutralForeground3Pressed\n            }\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground2Hover,\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            // TODO: stop using treeItemLayoutClassNames.expandIcon  for styling\n            [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n                color: tokens.colorNeutralForeground3Hover\n            }\n        }\n    },\n    leaf: {\n        paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    branch: {\n        paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    medium: {\n        ...typographyStyles.body1\n    },\n    small: {\n        minHeight: '24px',\n        ...typographyStyles.caption1\n    },\n    // Appearance variations\n    subtle: {},\n    'subtle-alpha': {\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        }\n    }\n});\n/**\n * Styles for the action icon slot\n */ const useActionsStyles = makeStyles({\n    base: {\n        display: 'flex',\n        marginLeft: 'auto',\n        position: 'relative',\n        zIndex: 1,\n        ...shorthands.gridArea('aside'),\n        ...shorthands.padding(0, tokens.spacingHorizontalS)\n    }\n});\n/**\n * Styles for the action icon slot\n */ const useAsideStyles = makeStyles({\n    base: {\n        display: 'flex',\n        marginLeft: 'auto',\n        alignItems: 'center',\n        zIndex: 0,\n        ...shorthands.gridArea('aside'),\n        ...shorthands.padding(0, tokens.spacingHorizontalM),\n        ...shorthands.gap(tokens.spacingHorizontalXS)\n    }\n});\n/**\n * Styles for the expand icon slot\n */ const useExpandIconStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        minWidth: '24px',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.flex(0, 0, 'auto'),\n        ...shorthands.padding(tokens.spacingVerticalXS, 0)\n    }\n});\n/**\n * Styles for the content slot\n */ const useContentStyles = makeStyles({\n    base: {\n        ...shorthands.padding(0, tokens.spacingHorizontalXXS)\n    }\n});\n/**\n * Styles for the before/after icon slot\n */ const useIconStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        color: tokens.colorNeutralForeground2,\n        lineHeight: tokens.lineHeightBase500,\n        fontSize: tokens.fontSizeBase500\n    }\n});\nconst useIconBeforeStyles = makeStyles({\n    medium: {\n        paddingRight: tokens.spacingHorizontalXS\n    },\n    small: {\n        paddingRight: tokens.spacingHorizontalXXS\n    }\n});\nconst useIconAfterStyles = makeStyles({\n    medium: {\n        paddingLeft: tokens.spacingHorizontalXS\n    },\n    small: {\n        paddingLeft: tokens.spacingHorizontalXXS\n    }\n});\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */ export const useTreeItemLayoutStyles_unstable = (state)=>{\n    const { content , iconAfter , iconBefore , expandIcon , root  } = state;\n    const rootStyles = useRootStyles();\n    const actionsStyles = useActionsStyles();\n    const asideStyles = useAsideStyles();\n    const contentStyles = useContentStyles();\n    const expandIconStyles = useExpandIconStyles();\n    const iconStyles = useIconStyles();\n    const iconBeforeStyles = useIconBeforeStyles();\n    const iconAfterStyles = useIconAfterStyles();\n    const size = useTreeContext_unstable((ctx)=>ctx.size);\n    const appearance = useTreeContext_unstable((ctx)=>ctx.appearance);\n    const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n    root.className = mergeClasses(treeItemLayoutClassNames.root, rootStyles.base, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);\n    content.className = mergeClasses(treeItemLayoutClassNames.content, contentStyles.base, content.className);\n    if (expandIcon) {\n        expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);\n    }\n    if (iconBefore) {\n        iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconBeforeStyles[size], iconBefore.className);\n    }\n    if (iconAfter) {\n        iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconAfterStyles[size], iconAfter.className);\n    }\n    if (state.actions) {\n        state.actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsStyles.base, state.actions.className);\n    }\n    if (state.aside) {\n        state.aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideStyles.base, state.aside.className);\n    }\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);\n    }\n    return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","iconBefore","content","iconAfter","expandIcon","aside","actions","selector","useRootStyles","base","mc9l5x","Bt984gj","sshi5w","B7ck84d","Ijaq50","Br312pm","nk6f5a","Bw0ie65","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","lj723h","ecr2s2","qya0sb","Bi91k9c","Jwef8y","Becwuud","leaf","uwmqm3","branch","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","subtle","transparent","De3pzq","d","a","h","useActionsStyles","Frg6f3","qhf8xq","Bj3rh1h","z8tnut","z189sj","Byoj8tv","useAsideStyles","i8kkvl","Belr9w4","useExpandIconStyles","Brf1p80","Bf4jedk","sj55zd","Bh6795r","Bnnss6s","xawz","useContentStyles","useIconStyles","useIconBeforeStyles","useIconAfterStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","actionsStyles","asideStyles","contentStyles","expandIconStyles","iconStyles","iconBeforeStyles","iconAfterStyles","size","ctx","appearance","itemType","className"],"sources":["useTreeItemLayoutStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemLayoutClassNames = {\n    root: 'fui-TreeItemLayout',\n    iconBefore: 'fui-TreeItemLayout__iconBefore',\n    content: 'fui-TreeItemLayout__content',\n    iconAfter: 'fui-TreeItemLayout__iconAfter',\n    expandIcon: 'fui-TreeItemLayout__expandIcon',\n    aside: 'fui-TreeItemLayout__aside',\n    actions: 'fui-TreeItemLayout__actions',\n    selector: 'fui-TreeItemLayout__selector'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        minHeight: '32px',\n        boxSizing: 'border-box',\n        ...shorthands.gridArea('layout'),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        ':active': {\n            color: tokens.colorNeutralForeground2Pressed,\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n            [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n                color: tokens.colorNeutralForeground3Pressed\n            }\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground2Hover,\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            // TODO: stop using treeItemLayoutClassNames.expandIcon  for styling\n            [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n                color: tokens.colorNeutralForeground3Hover\n            }\n        }\n    },\n    leaf: {\n        paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    branch: {\n        paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    medium: {\n        ...typographyStyles.body1\n    },\n    small: {\n        minHeight: '24px',\n        ...typographyStyles.caption1\n    },\n    // Appearance variations\n    subtle: {},\n    'subtle-alpha': {\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        }\n    }\n});\n/**\n * Styles for the action icon slot\n */ const useActionsStyles = makeStyles({\n    base: {\n        display: 'flex',\n        marginLeft: 'auto',\n        position: 'relative',\n        zIndex: 1,\n        ...shorthands.gridArea('aside'),\n        ...shorthands.padding(0, tokens.spacingHorizontalS)\n    }\n});\n/**\n * Styles for the action icon slot\n */ const useAsideStyles = makeStyles({\n    base: {\n        display: 'flex',\n        marginLeft: 'auto',\n        alignItems: 'center',\n        zIndex: 0,\n        ...shorthands.gridArea('aside'),\n        ...shorthands.padding(0, tokens.spacingHorizontalM),\n        ...shorthands.gap(tokens.spacingHorizontalXS)\n    }\n});\n/**\n * Styles for the expand icon slot\n */ const useExpandIconStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        minWidth: '24px',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.flex(0, 0, 'auto'),\n        ...shorthands.padding(tokens.spacingVerticalXS, 0)\n    }\n});\n/**\n * Styles for the content slot\n */ const useContentStyles = makeStyles({\n    base: {\n        ...shorthands.padding(0, tokens.spacingHorizontalXXS)\n    }\n});\n/**\n * Styles for the before/after icon slot\n */ const useIconStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        color: tokens.colorNeutralForeground2,\n        lineHeight: tokens.lineHeightBase500,\n        fontSize: tokens.fontSizeBase500\n    }\n});\nconst useIconBeforeStyles = makeStyles({\n    medium: {\n        paddingRight: tokens.spacingHorizontalXS\n    },\n    small: {\n        paddingRight: tokens.spacingHorizontalXXS\n    }\n});\nconst useIconAfterStyles = makeStyles({\n    medium: {\n        paddingLeft: tokens.spacingHorizontalXS\n    },\n    small: {\n        paddingLeft: tokens.spacingHorizontalXXS\n    }\n});\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */ export const useTreeItemLayoutStyles_unstable = (state)=>{\n    const { content , iconAfter , iconBefore , expandIcon , root , aside , actions , selector  } = state;\n    const rootStyles = useRootStyles();\n    const actionsStyles = useActionsStyles();\n    const asideStyles = useAsideStyles();\n    const contentStyles = useContentStyles();\n    const expandIconStyles = useExpandIconStyles();\n    const iconStyles = useIconStyles();\n    const iconBeforeStyles = useIconBeforeStyles();\n    const iconAfterStyles = useIconAfterStyles();\n    const size = useTreeContext_unstable((ctx)=>ctx.size);\n    const appearance = useTreeContext_unstable((ctx)=>ctx.appearance);\n    const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n    root.className = mergeClasses(treeItemLayoutClassNames.root, rootStyles.base, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);\n    content.className = mergeClasses(treeItemLayoutClassNames.content, contentStyles.base, content.className);\n    if (expandIcon) {\n        expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);\n    }\n    if (iconBefore) {\n        iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconBeforeStyles[size], iconBefore.className);\n    }\n    if (iconAfter) {\n        iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconAfterStyles[size], iconAfter.className);\n    }\n    if (actions) {\n        actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsStyles.base, actions.className);\n    }\n    if (aside) {\n        aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideStyles.base, aside.className);\n    }\n    if (expandIcon) {\n        expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);\n    }\n    if (selector) {\n        selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);\n    }\n    return state;\n};\n"],"mappings":"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"}

package/lib/contexts/treeContext.js

@@ -1,8 +1,11 @@
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 import { ImmutableSet } from '../utils/ImmutableSet';
+import { ImmutableMap } from '../utils/ImmutableMap';
 const defaultContextValue = {
     level: 0,
+    selectionMode: 'none',
     openItems: ImmutableSet.empty,
+    checkedItems: ImmutableMap.empty,
     requestTreeResponse: noop,
     appearance: 'subtle',
     size: 'medium'

package/lib/contexts/treeContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\nimport { TreeItemType, TreeItemValue } from '../TreeItem';\nimport { ImmutableSet } from '../utils/ImmutableSet';\n\nexport type TreeContextValue = {\n  level: number;\n  appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n  size: 'small' | 'medium';\n  openItems: ImmutableSet<TreeItemValue>;\n  /**\n   * requests root Tree component to respond to some tree item event,\n   */\n  requestTreeResponse(request: TreeItemRequest): void;\n};\n\nexport type TreeItemRequest = { itemType: TreeItemType } & (\n  | OmitWithoutExpanding<TreeOpenChangeData, 'open' | 'openItems'>\n  | TreeNavigationData_unstable\n);\n\n// helper type that avoids the expansion of unions while inferring it, should work exactly the same as Omit\ntype OmitWithoutExpanding<P, K extends string | number | symbol> = P extends unknown ? Omit<P, K> : P;\n\nconst defaultContextValue: TreeContextValue = {\n  level: 0,\n  openItems: ImmutableSet.empty,\n  requestTreeResponse: noop,\n  appearance: 'subtle',\n  size: 'medium',\n};\n\nfunction noop() {\n  /* noop */\n}\n\nexport const TreeContext: Context<TreeContextValue | undefined> = createContext<TreeContextValue | undefined>(\n  undefined,\n);\n\nexport const { Provider: TreeProvider } = TreeContext;\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n  useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","ImmutableSet","defaultContextValue","level","openItems","empty","requestTreeResponse","noop","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAG/G,SAASC,YAAY,QAAQ,wBAAwB;AAqBrD,MAAMC,sBAAwC;IAC5CC,OAAO;IACPC,WAAWH,aAAaI,KAAK;IAC7BC,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACR;AAEA,SAASF,OAAO;AACd,QAAQ,GACV;AAEA,OAAO,MAAMG,cAAqDX,cAChEY,WACA;AAEF,OAAO,MAAM,EAAEC,UAAUC,aAAY,EAAE,GAAGH,YAAY;AACtD,OAAO,MAAMI,0BAA0B,CAAIC,WACzCf,mBAAmBU,aAAa,CAACM,MAAMd,mBAAmB,GAAKa,SAASC,MAAM"}
+{"version":3,"sources":["treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeCheckedChangeData, TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\nimport { TreeItemType, TreeItemValue } from '../TreeItem';\nimport { SelectionMode } from '@fluentui/react-utilities';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\n\nexport type TreeContextValue = {\n  level: number;\n  selectionMode: 'none' | SelectionMode;\n  appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n  size: 'small' | 'medium';\n  openItems: ImmutableSet<TreeItemValue>;\n  checkedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>;\n  /**\n   * requests root Tree component to respond to some tree item event,\n   */\n  requestTreeResponse(request: TreeItemRequest): void;\n};\n\nexport type TreeItemRequest = { itemType: TreeItemType } & (\n  | OmitWithoutExpanding<TreeOpenChangeData, 'open'>\n  | TreeNavigationData_unstable\n  | OmitWithoutExpanding<TreeCheckedChangeData, 'checked' | 'selectionMode'>\n);\n\n// helper type that avoids the expansion of unions while inferring it, should work exactly the same as Omit\ntype OmitWithoutExpanding<P, K extends string | number | symbol> = P extends unknown ? Omit<P, K> : P;\n\nconst defaultContextValue: TreeContextValue = {\n  level: 0,\n  selectionMode: 'none',\n  openItems: ImmutableSet.empty,\n  checkedItems: ImmutableMap.empty,\n  requestTreeResponse: noop,\n  appearance: 'subtle',\n  size: 'medium',\n};\n\nfunction noop() {\n  /* noop */\n}\n\nexport const TreeContext: Context<TreeContextValue | undefined> = createContext<TreeContextValue | undefined>(\n  undefined,\n);\n\nexport const { Provider: TreeProvider } = TreeContext;\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n  useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","ImmutableSet","ImmutableMap","defaultContextValue","level","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAI/G,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,YAAY,QAAQ,wBAAwB;AAwBrD,MAAMC,sBAAwC;IAC5CC,OAAO;IACPC,eAAe;IACfC,WAAWL,aAAaM,KAAK;IAC7BC,cAAcN,aAAaK,KAAK;IAChCE,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACR;AAEA,SAASF,OAAO;AACd,QAAQ,GACV;AAEA,OAAO,MAAMG,cAAqDd,cAChEe,WACA;AAEF,OAAO,MAAM,EAAEC,UAAUC,aAAY,EAAE,GAAGH,YAAY;AACtD,OAAO,MAAMI,0BAA0B,CAAIC,WACzClB,mBAAmBa,aAAa,CAACM,MAAMhB,mBAAmB,GAAKe,SAASC,MAAM"}

package/lib/contexts/treeItemSlotsContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["treeItemSlotsContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemSlots } from '../TreeItem';\n\nexport type TreeItemSlotsContextValue = Pick<TreeItemSlots, 'actions' | 'aside' | 'expandIcon'>;\n\nconst defaultContextValue: TreeItemSlotsContextValue = {\n  actions: undefined,\n  aside: undefined,\n  expandIcon: undefined,\n};\n\nexport const TreeItemSlotsContext: React.Context<TreeItemSlotsContextValue | undefined> = React.createContext<\n  TreeItemSlotsContextValue | undefined\n>(undefined);\n\nexport const { Provider: TreeItemSlotsProvider } = TreeItemSlotsContext;\nexport const useTreeItemSlotsContext_unstable = (): TreeItemSlotsContextValue =>\n  React.useContext(TreeItemSlotsContext) || defaultContextValue;\n"],"names":["React","defaultContextValue","actions","undefined","aside","expandIcon","TreeItemSlotsContext","createContext","Provider","TreeItemSlotsProvider","useTreeItemSlotsContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAK/B,MAAMC,sBAAiD;IACrDC,SAASC;IACTC,OAAOD;IACPE,YAAYF;AACd;AAEA,OAAO,MAAMG,uBAA6EN,MAAMO,aAAa,CAE3GJ,WAAW;AAEb,OAAO,MAAM,EAAEK,UAAUC,sBAAqB,EAAE,GAAGH,qBAAqB;AACxE,OAAO,MAAMI,mCAAmC,IAC9CV,MAAMW,UAAU,CAACL,yBAAyBL,oBAAoB"}
+{"version":3,"sources":["treeItemSlotsContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemSlots } from '../TreeItem';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { Checkbox } from '@fluentui/react-checkbox';\nimport type { Radio } from '@fluentui/react-radio';\n\nexport type TreeItemSlotsContextValue = Pick<TreeItemSlots, 'actions' | 'aside' | 'expandIcon'> & {\n  selector?: Slot<typeof Checkbox> | Slot<typeof Radio>;\n};\n\nconst defaultContextValue: TreeItemSlotsContextValue = {\n  actions: undefined,\n  aside: undefined,\n  expandIcon: undefined,\n};\n\nexport const TreeItemSlotsContext: React.Context<TreeItemSlotsContextValue | undefined> = React.createContext<\n  TreeItemSlotsContextValue | undefined\n>(undefined);\n\nexport const { Provider: TreeItemSlotsProvider } = TreeItemSlotsContext;\nexport const useTreeItemSlotsContext_unstable = (): TreeItemSlotsContextValue =>\n  React.useContext(TreeItemSlotsContext) || defaultContextValue;\n"],"names":["React","defaultContextValue","actions","undefined","aside","expandIcon","TreeItemSlotsContext","createContext","Provider","TreeItemSlotsProvider","useTreeItemSlotsContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAU/B,MAAMC,sBAAiD;IACrDC,SAASC;IACTC,OAAOD;IACPE,YAAYF;AACd;AAEA,OAAO,MAAMG,uBAA6EN,MAAMO,aAAa,CAE3GJ,WAAW;AAEb,OAAO,MAAM,EAAEK,UAAUC,sBAAqB,EAAE,GAAGH,qBAAqB;AACxE,OAAO,MAAMI,mCAAmC,IAC9CV,MAAMW,UAAU,CAACL,yBAAyBL,oBAAoB"}

package/lib/hooks/index.js

@@ -1,3 +1,5 @@
 export * from './useFlatTree';
 export * from './useNestedTreeNavigation';
 export * from './useControllableOpenItems';
+export * from './useNestedControllableCheckedItems';
+export * from './useFlatControllableCheckedItems';

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useFlatTree';\nexport * from './useNestedTreeNavigation';\nexport * from './useControllableOpenItems';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,4BAA4B;AAC1C,cAAc,6BAA6B"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useFlatTree';\nexport * from './useNestedTreeNavigation';\nexport * from './useControllableOpenItems';\nexport * from './useNestedControllableCheckedItems';\nexport * from './useFlatControllableCheckedItems';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,4BAA4B;AAC1C,cAAc,6BAA6B;AAC3C,cAAc,sCAAsC;AACpD,cAAc,oCAAoC"}

package/lib/hooks/useFlatControllableCheckedItems.js

@@ -0,0 +1,76 @@
+import { useControllableState } from '@fluentui/react-utilities';
+import { ImmutableMap } from '../utils/ImmutableMap';
+import * as React from 'react';
+function initializeMap(iterable) {
+    const map = new Map();
+    if (iterable === undefined) {
+        return ImmutableMap.empty;
+    }
+    for (const item of iterable){
+        if (Array.isArray(item)) {
+            map.set(item[0], item[1]);
+        } else {
+            map.set(item, true);
+        }
+    }
+    return ImmutableMap.dangerouslyCreate_unstable(map);
+}
+export function useFlatControllableCheckedItems(props) {
+    const [checkedItems, setCheckedItems] = useControllableState({
+        initialState: ImmutableMap.empty,
+        state: React.useMemo(()=>props.checkedItems && initializeMap(props.checkedItems), [
+            props.checkedItems
+        ]),
+        defaultState: ()=>initializeMap(props.defaultCheckedItems)
+    });
+    return [
+        checkedItems,
+        setCheckedItems
+    ];
+}
+export function createNextFlatCheckedItems(data, previousCheckedItems, flatTreeItems) {
+    if (data.selectionMode === 'single') {
+        return ImmutableMap.create([
+            [
+                data.value,
+                data.checked
+            ]
+        ]);
+    }
+    const treeItem = flatTreeItems.get(data.value);
+    if (!treeItem) {
+        if (process.env.NODE_ENV !== 'production') {
+            // eslint-disable-next-line no-console
+            console.error(`useFlatTree: tree item ${data.value} not found`);
+        }
+        return previousCheckedItems;
+    }
+    const nextCheckedItems = new Map(previousCheckedItems);
+    for (const children of flatTreeItems.subtree(data.value)){
+        nextCheckedItems.set(children.value, data.checked);
+    }
+    nextCheckedItems.set(data.value, data.checked);
+    let isAncestorsMixed = false;
+    for (const parent of flatTreeItems.ancestors(treeItem.value)){
+        // if one parent is mixed, all ancestors are mixed
+        if (isAncestorsMixed) {
+            nextCheckedItems.set(parent.value, 'mixed');
+            continue;
+        }
+        const checkedChildren = [];
+        for (const child of flatTreeItems.children(parent.value)){
+            var _nextCheckedItems_get;
+            if (((_nextCheckedItems_get = nextCheckedItems.get(child.value)) !== null && _nextCheckedItems_get !== void 0 ? _nextCheckedItems_get : false) === data.checked) {
+                checkedChildren.push(child);
+            }
+        }
+        if (checkedChildren.length === parent.childrenValues.length) {
+            nextCheckedItems.set(parent.value, data.checked);
+        } else {
+            // if one parent is mixed, all ancestors are mixed
+            isAncestorsMixed = true;
+            nextCheckedItems.set(parent.value, 'mixed');
+        }
+    }
+    return ImmutableMap.dangerouslyCreate_unstable(nextCheckedItems);
+}

package/lib/hooks/useFlatControllableCheckedItems.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useFlatControllableCheckedItems.ts"],"sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport type { TreeCheckedChangeData, TreeProps } from '../Tree';\nimport { TreeItemValue } from '../TreeItem';\nimport { ImmutableMap } from '../utils/ImmutableMap';\nimport * as React from 'react';\nimport type { FlatTreeItemProps } from './useFlatTree';\nimport { FlatTreeItems } from '../utils/createFlatTreeItems';\n\nfunction initializeMap(iterable?: Iterable<TreeItemValue | [TreeItemValue, 'mixed' | boolean]>) {\n  const map = new Map<TreeItemValue, 'mixed' | boolean>();\n  if (iterable === undefined) {\n    return ImmutableMap.empty;\n  }\n  for (const item of iterable) {\n    if (Array.isArray(item)) {\n      map.set(item[0], item[1]);\n    } else {\n      map.set(item, true);\n    }\n  }\n  return ImmutableMap.dangerouslyCreate_unstable(map);\n}\n\nexport function useFlatControllableCheckedItems(\n  props: Pick<TreeProps, 'checkedItems' | 'defaultCheckedItems' | 'selectionMode'>,\n) {\n  const [checkedItems, setCheckedItems] = useControllableState({\n    initialState: ImmutableMap.empty,\n    state: React.useMemo(() => props.checkedItems && initializeMap(props.checkedItems), [props.checkedItems]),\n    defaultState: () => initializeMap(props.defaultCheckedItems),\n  });\n\n  return [checkedItems, setCheckedItems] as const;\n}\n\nexport function createNextFlatCheckedItems<Props extends FlatTreeItemProps = FlatTreeItemProps>(\n  data: Pick<TreeCheckedChangeData, 'value' | 'checked' | 'selectionMode'>,\n  previousCheckedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>,\n  flatTreeItems: FlatTreeItems<Props>,\n): ImmutableMap<TreeItemValue, 'mixed' | boolean> {\n  if (data.selectionMode === 'single') {\n    return ImmutableMap.create([[data.value, data.checked]]);\n  }\n  const treeItem = flatTreeItems.get(data.value);\n  if (!treeItem) {\n    if (process.env.NODE_ENV !== 'production') {\n      // eslint-disable-next-line no-console\n      console.error(`useFlatTree: tree item ${data.value} not found`);\n    }\n    return previousCheckedItems;\n  }\n  const nextCheckedItems = new Map(previousCheckedItems);\n  for (const children of flatTreeItems.subtree(data.value)) {\n    nextCheckedItems.set(children.value, data.checked);\n  }\n  nextCheckedItems.set(data.value, data.checked);\n\n  let isAncestorsMixed = false;\n  for (const parent of flatTreeItems.ancestors(treeItem.value)) {\n    // if one parent is mixed, all ancestors are mixed\n    if (isAncestorsMixed) {\n      nextCheckedItems.set(parent.value, 'mixed');\n      continue;\n    }\n    const checkedChildren = [];\n    for (const child of flatTreeItems.children(parent.value)) {\n      if ((nextCheckedItems.get(child.value) ?? false) === data.checked) {\n        checkedChildren.push(child);\n      }\n    }\n    if (checkedChildren.length === parent.childrenValues.length) {\n      nextCheckedItems.set(parent.value, data.checked);\n    } else {\n      // if one parent is mixed, all ancestors are mixed\n      isAncestorsMixed = true;\n      nextCheckedItems.set(parent.value, 'mixed');\n    }\n  }\n  return ImmutableMap.dangerouslyCreate_unstable(nextCheckedItems);\n}\n"],"names":["useControllableState","ImmutableMap","React","initializeMap","iterable","map","Map","undefined","empty","item","Array","isArray","set","dangerouslyCreate_unstable","useFlatControllableCheckedItems","props","checkedItems","setCheckedItems","initialState","state","useMemo","defaultState","defaultCheckedItems","createNextFlatCheckedItems","data","previousCheckedItems","flatTreeItems","selectionMode","create","value","checked","treeItem","get","process","env","NODE_ENV","console","error","nextCheckedItems","children","subtree","isAncestorsMixed","parent","ancestors","checkedChildren","child","push","length","childrenValues"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,4BAA4B;AAGjE,SAASC,YAAY,QAAQ,wBAAwB;AACrD,YAAYC,WAAW,QAAQ;AAI/B,SAASC,cAAcC,QAAuE,EAAE;IAC9F,MAAMC,MAAM,IAAIC;IAChB,IAAIF,aAAaG,WAAW;QAC1B,OAAON,aAAaO,KAAK;IAC3B,CAAC;IACD,KAAK,MAAMC,QAAQL,SAAU;QAC3B,IAAIM,MAAMC,OAAO,CAACF,OAAO;YACvBJ,IAAIO,GAAG,CAACH,IAAI,CAAC,EAAE,EAAEA,IAAI,CAAC,EAAE;QAC1B,OAAO;YACLJ,IAAIO,GAAG,CAACH,MAAM,IAAI;QACpB,CAAC;IACH;IACA,OAAOR,aAAaY,0BAA0B,CAACR;AACjD;AAEA,OAAO,SAASS,gCACdC,KAAgF,EAChF;IACA,MAAM,CAACC,cAAcC,gBAAgB,GAAGjB,qBAAqB;QAC3DkB,cAAcjB,aAAaO,KAAK;QAChCW,OAAOjB,MAAMkB,OAAO,CAAC,IAAML,MAAMC,YAAY,IAAIb,cAAcY,MAAMC,YAAY,GAAG;YAACD,MAAMC,YAAY;SAAC;QACxGK,cAAc,IAAMlB,cAAcY,MAAMO,mBAAmB;IAC7D;IAEA,OAAO;QAACN;QAAcC;KAAgB;AACxC,CAAC;AAED,OAAO,SAASM,2BACdC,IAAwE,EACxEC,oBAAoE,EACpEC,aAAmC,EACa;IAChD,IAAIF,KAAKG,aAAa,KAAK,UAAU;QACnC,OAAO1B,aAAa2B,MAAM,CAAC;YAAC;gBAACJ,KAAKK,KAAK;gBAAEL,KAAKM,OAAO;aAAC;SAAC;IACzD,CAAC;IACD,MAAMC,WAAWL,cAAcM,GAAG,CAACR,KAAKK,KAAK;IAC7C,IAAI,CAACE,UAAU;QACb,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,sCAAsC;YACtCC,QAAQC,KAAK,CAAC,CAAC,uBAAuB,EAAEb,KAAKK,KAAK,CAAC,UAAU,CAAC;QAChE,CAAC;QACD,OAAOJ;IACT,CAAC;IACD,MAAMa,mBAAmB,IAAIhC,IAAImB;IACjC,KAAK,MAAMc,YAAYb,cAAcc,OAAO,CAAChB,KAAKK,KAAK,EAAG;QACxDS,iBAAiB1B,GAAG,CAAC2B,SAASV,KAAK,EAAEL,KAAKM,OAAO;IACnD;IACAQ,iBAAiB1B,GAAG,CAACY,KAAKK,KAAK,EAAEL,KAAKM,OAAO;IAE7C,IAAIW,mBAAmB,KAAK;IAC5B,KAAK,MAAMC,UAAUhB,cAAciB,SAAS,CAACZ,SAASF,KAAK,EAAG;QAC5D,kDAAkD;QAClD,IAAIY,kBAAkB;YACpBH,iBAAiB1B,GAAG,CAAC8B,OAAOb,KAAK,EAAE;YACnC,QAAS;QACX,CAAC;QACD,MAAMe,kBAAkB,EAAE;QAC1B,KAAK,MAAMC,SAASnB,cAAca,QAAQ,CAACG,OAAOb,KAAK,EAAG;gBACnDS;YAAL,IAAI,AAACA,CAAAA,CAAAA,wBAAAA,iBAAiBN,GAAG,CAACa,MAAMhB,KAAK,eAAhCS,mCAAAA,wBAAqC,KAAK,AAAD,MAAOd,KAAKM,OAAO,EAAE;gBACjEc,gBAAgBE,IAAI,CAACD;YACvB,CAAC;QACH;QACA,IAAID,gBAAgBG,MAAM,KAAKL,OAAOM,cAAc,CAACD,MAAM,EAAE;YAC3DT,iBAAiB1B,GAAG,CAAC8B,OAAOb,KAAK,EAAEL,KAAKM,OAAO;QACjD,OAAO;YACL,kDAAkD;YAClDW,mBAAmB,IAAI;YACvBH,iBAAiB1B,GAAG,CAAC8B,OAAOb,KAAK,EAAE;QACrC,CAAC;IACH;IACA,OAAO5B,aAAaY,0BAA0B,CAACyB;AACjD,CAAC"}