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

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n  const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n\n  const value = useId('fuiTreeItemValue-', props.value?.toString());\n\n  const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n\n  const [isActionsVisible, setActionsVisible] = React.useState(false);\n  const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n  const handleActionsRef = (actions: HTMLDivElement | null) => {\n    setAsideVisible(actions === null);\n  };\n\n  const open = useTreeContext_unstable(ctx => ctx.openItems.has(value));\n\n  const actionsRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLDivElement>(null);\n  const layoutRef = React.useRef<HTMLDivElement>(null);\n  const subtreeRef = React.useRef<HTMLDivElement>(null);\n\n  const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n    if (isEventFromActions) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n    requestTreeResponse({\n      event,\n      itemType,\n      value,\n      type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n    });\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    if (event.currentTarget !== event.target) {\n      return;\n    }\n    switch (event.key) {\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.Enter:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n      case treeDataTypes.ArrowLeft:\n      case treeDataTypes.ArrowRight:\n        return requestTreeResponse({ event, value, itemType, type: event.key });\n    }\n    const isTypeAheadCharacter =\n      event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      requestTreeResponse({ event, value, itemType, type: treeDataTypes.TypeAhead });\n    }\n  });\n\n  const handleActionsVisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    if (!isTargetFromSubtree) {\n      setActionsVisible(true);\n    }\n  });\n\n  const handleActionsInvisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    const isRelatedTargetFromActions = Boolean(\n      actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n    );\n    if (isRelatedTargetFromActions) {\n      return setActionsVisible(true);\n    }\n    if (!isTargetFromSubtree) {\n      return setActionsVisible(false);\n    }\n  });\n\n  return {\n    value,\n    open,\n    subtreeRef,\n    actionsRef: useMergedRefs(actionsRef, handleActionsRef),\n    expandIconRef,\n    layoutRef,\n    itemType,\n    isActionsVisible,\n    isAsideVisible,\n    level,\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps(as, {\n      tabIndex: -1,\n      ...rest,\n      ref,\n      role: 'treeitem',\n      'aria-level': level,\n      [dataTreeItemValueAttrName]: value,\n      'aria-expanded': itemType === 'branch' ? open : undefined,\n      onClick: handleClick,\n      onKeyDown: handleKeyDown,\n      onMouseOver: handleActionsVisible,\n      onFocus: handleActionsVisible,\n      onMouseOut: handleActionsInvisible,\n      onBlur: handleActionsInvisible,\n    }),\n  };\n}\n"],"names":["React","getNativeElementProps","useId","useMergedRefs","useEventCallback","elementContains","useTreeContext_unstable","treeDataTypes","dataTreeItemValueAttrName","useTreeItem_unstable","props","ref","contextLevel","ctx","level","value","toString","onClick","onKeyDown","as","itemType","rest","requestTreeResponse","isActionsVisible","setActionsVisible","useState","isAsideVisible","setAsideVisible","handleActionsRef","actions","open","openItems","has","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isFromExpandIcon","type","ExpandIconClick","Click","handleKeyDown","currentTarget","key","End","Home","Enter","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","components","root","tabIndex","role","undefined","onMouseOver","onFocus","onMouseOut","onBlur"],"mappings":"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"}
+{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getNativeElementProps,\n  isResolvedShorthand,\n  resolveShorthand,\n  useControllableState,\n  useId,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemSlots, TreeItemState } from './TreeItem.types';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { 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":"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"}

package/lib/components/TreeItem/useTreeItemContextValues.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemContextValues.ts"],"sourcesContent":["import type { TreeItemContextValue } from '../../contexts';\nimport type { TreeItemContextValues, TreeItemState } from './TreeItem.types';\n\nexport function useTreeItemContextValues_unstable(\n  state: Pick<TreeItemState, keyof TreeItemContextValue>,\n): TreeItemContextValues {\n  const { value, isActionsVisible, isAsideVisible, actionsRef, itemType, layoutRef, subtreeRef, expandIconRef, open } =\n    state;\n\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const treeItem: TreeItemContextValue = {\n    isActionsVisible,\n    isAsideVisible,\n    value,\n    actionsRef,\n    itemType,\n    layoutRef,\n    subtreeRef,\n    expandIconRef,\n    open,\n  };\n\n  return { treeItem };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","isActionsVisible","isAsideVisible","actionsRef","itemType","layoutRef","subtreeRef","expandIconRef","open","treeItem"],"mappings":"AAGA,OAAO,SAASA,kCACdC,KAAsD,EAC/B;IACvB,MAAM,EAAEC,MAAK,EAAEC,iBAAgB,EAAEC,eAAc,EAAEC,WAAU,EAAEC,SAAQ,EAAEC,UAAS,EAAEC,WAAU,EAAEC,cAAa,EAAEC,KAAI,EAAE,GACjHT;IAEF;;;GAGC,GACD,MAAMU,WAAiC;QACrCR;QACAC;QACAF;QACAG;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAS;AACpB,CAAC"}
+{"version":3,"sources":["useTreeItemContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemContextValues, TreeItemState } from './TreeItem.types';\nimport type { TreeItemContextValue, TreeItemSlotsContextValue } from '../../contexts';\n\nexport function useTreeItemContextValues_unstable(state: TreeItemState): TreeItemContextValues {\n  const { value, itemType, layoutRef, subtreeRef, open, actions, aside, expandIcon, 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, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { ButtonContextValue } from '@fluentui/react-button';\n\nexport type TreeItemLayoutSlots = {\n  root: Slot<'div'>;\n  /**\n   * Content. Children of the root slot are automatically rendered here\n   */\n  content: NonNullable<Slot<'div'>>;\n  /**\n   * Icon slot that renders right before main content\n   */\n  iconBefore?: Slot<'div'>;\n  /**\n   * Icon slot that renders right after main content\n   */\n  iconAfter?: Slot<'div'>;\n  /**\n   * Expand icon slot,\n   * by default renders a chevron icon to indicate opening and closing\n   */\n  expandIcon?: Slot<'div'>;\n  aside?: Slot<'div'>;\n  /**\n   * actionable elements are normally buttons, menus, or other focusable elements.\n   * Those elements are only visibly available if the given tree item is currently active.\n   */\n  actions?: Slot<\n    ExtractSlotProps<\n      Slot<'div'> & {\n        /**\n         * Forces visibility of the aside/action content\n         */\n        visible?: boolean;\n      }\n    >\n  >;\n};\n\n/**\n * TreeItemLayout Props\n */\nexport type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemLayout\n */\nexport type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {\n  buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAiDE"}
+{"version":3,"sources":["TreeItemLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { 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, TreeItemLayoutSlots } from './TreeItemLayout.types';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemLayout\n */\nexport const renderTreeItemLayout_unstable = (state: TreeItemLayoutState) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemLayoutSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n      {slots.iconBefore && <slots.iconBefore {...slotProps.iconBefore} />}\n      <slots.content {...slotProps.content}>{slotProps.root.children}</slots.content>\n      {slots.iconAfter && <slots.iconAfter {...slotProps.iconAfter} />}\n      <ButtonContextProvider value={state.buttonContextValue}>\n        {slots.actions && <slots.actions {...slotProps.actions} />}\n        {slots.aside && <slots.aside {...slotProps.aside} />}\n      </ButtonContextProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","ButtonContextProvider","renderTreeItemLayout_unstable","state","slots","slotProps","root","expandIcon","iconBefore","content","children","iconAfter","value","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,QAA+B;IAC3E,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGL,aAAkCG;IAE/D,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,UAAU,kBAAI,AAf3B,cAe4BH,MAAMG,UAAU,EAAKF,UAAUE,UAAU,GAC9DH,MAAMI,UAAU,kBAAI,AAhB3B,cAgB4BJ,MAAMI,UAAU,EAAKH,UAAUG,UAAU,iBAC/D,AAjBN,cAiBOJ,MAAMK,OAAO,EAAKJ,UAAUI,OAAO,EAAGJ,UAAUC,IAAI,CAACI,QAAQ,GAC7DN,MAAMO,SAAS,kBAAI,AAlB1B,cAkB2BP,MAAMO,SAAS,EAAKN,UAAUM,SAAS,iBAC5D,AAnBN,cAmBOV;QAAsBW,OAAOT,MAAMU,kBAAkB;OACnDT,MAAMU,OAAO,kBAAI,AApB1B,cAoB2BV,MAAMU,OAAO,EAAKT,UAAUS,OAAO,GACrDV,MAAMW,KAAK,kBAAI,AArBxB,cAqByBX,MAAMW,KAAK,EAAKV,UAAUU,KAAK;AAIxD,EAAE"}
+{"version":3,"sources":["renderTreeItemLayout.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutState, TreeItemLayoutInternalSlots } from './TreeItemLayout.types';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemLayout\n */\nexport const renderTreeItemLayout_unstable = (state: TreeItemLayoutState) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemLayoutInternalSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n      {slots.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, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
-import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
-import { TreeItemChevron } from '../TreeItemChevron';
+import { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
+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.
  *
@@ -11,15 +12,10 @@ import { TreeItemChevron } from '../TreeItemChevron';
  * @param props - props from this instance of TreeItemLayout
  * @param ref - reference to root HTMLElement of TreeItemLayout
  */ export const useTreeItemLayout_unstable = (props, ref)=>{
-    const { content , iconAfter , iconBefore , expandIcon , as ='span' , aside , actions  } = props;
+    const { content , iconAfter , iconBefore , as ='span'  } = props;
+    const { actions , aside , expandIcon , selector  } = useTreeItemSlotsContext_unstable();
     const layoutRef = useTreeItemContext_unstable((ctx)=>ctx.layoutRef);
-    const expandIconRef = useTreeItemContext_unstable((ctx)=>ctx.expandIconRef);
-    const isActionsVisibleContext = useTreeItemContext_unstable((ctx)=>ctx.isActionsVisible);
-    const isAsideVisible = useTreeItemContext_unstable((ctx)=>ctx.isAsideVisible);
-    var _ref;
-    const isActionsVisible = (_ref = isResolvedShorthand(actions) ? actions.visible : undefined) !== null && _ref !== void 0 ? _ref : isActionsVisibleContext;
-    const isBranch = useTreeItemContext_unstable((ctx)=>ctx.itemType === 'branch');
-    const actionsRef = useMergedRefs(isResolvedShorthand(actions) ? actions.ref : undefined, useTreeItemContext_unstable((ctx)=>ctx.actionsRef));
+    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);
     return {
         components: {
             root: 'div',
@@ -28,7 +24,9 @@ import { TreeItemChevron } from '../TreeItemChevron';
             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'
@@ -50,23 +48,9 @@ import { TreeItemChevron } from '../TreeItemChevron';
                 'aria-hidden': true
             }
         }),
-        aside: isAsideVisible ? resolveShorthand(aside) : undefined,
-        actions: isActionsVisible ? resolveShorthand(// visible props should not be propagated to the DOM
-        isResolvedShorthand(actions) ? {
-            ...actions,
-            visible: undefined
-        } : actions, {
-            defaultProps: {
-                ref: actionsRef
-            }
-        }) : undefined,
-        expandIcon: resolveShorthand(expandIcon, {
-            required: isBranch,
-            defaultProps: {
-                children: /*#__PURE__*/ React.createElement(TreeItemChevron, null),
-                'aria-hidden': true,
-                ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef)
-            }
-        })
+        aside: resolveShorthand(aside),
+        actions: resolveShorthand(actions),
+        expandIcon: resolveShorthand(expandIcon),
+        selector: resolveShorthand(selector)
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ExtractSlotProps,\n  getNativeElementProps,\n  isResolvedShorthand,\n  resolveShorthand,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nimport { TreeItemChevron } from '../TreeItemChevron';\n\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n  props: TreeItemLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n  const { content, iconAfter, iconBefore, expandIcon, as = 'span', aside, actions } = props;\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n  const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n  const isActionsVisibleContext = useTreeItemContext_unstable(ctx => ctx.isActionsVisible);\n  const isAsideVisible = useTreeItemContext_unstable(ctx => ctx.isAsideVisible);\n  const isActionsVisible = (isResolvedShorthand(actions) ? actions.visible : undefined) ?? isActionsVisibleContext;\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n  const actionsRef = useMergedRefs(\n    isResolvedShorthand(actions) ? actions.ref : undefined,\n    useTreeItemContext_unstable(ctx => ctx.actionsRef),\n  );\n\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      content: 'div',\n      iconAfter: 'div',\n      actions: 'div',\n      aside: 'div',\n    },\n    buttonContextValue: { size: 'small' },\n    root: getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }),\n    iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),\n    content: resolveShorthand(content, { required: true }),\n    iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),\n    aside: isAsideVisible ? resolveShorthand(aside) : undefined,\n    actions: isActionsVisible\n      ? resolveShorthand<ExtractSlotProps<TreeItemLayoutSlots['actions']>>(\n          // visible props should not be propagated to the DOM\n          isResolvedShorthand(actions) ? { ...actions, visible: undefined } : actions,\n          {\n            defaultProps: { ref: actionsRef },\n          },\n        )\n      : undefined,\n    expandIcon: resolveShorthand(expandIcon, {\n      required: isBranch,\n      defaultProps: {\n        children: <TreeItemChevron />,\n        'aria-hidden': true,\n        ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef),\n      },\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useMergedRefs","useTreeItemContext_unstable","TreeItemChevron","useTreeItemLayout_unstable","props","ref","content","iconAfter","iconBefore","expandIcon","as","aside","actions","layoutRef","ctx","expandIconRef","isActionsVisibleContext","isActionsVisible","isAsideVisible","visible","undefined","isBranch","itemType","actionsRef","components","root","buttonContextValue","size","defaultProps","required","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAEEC,qBAAqB,EACrBC,mBAAmB,EACnBC,gBAAgB,EAChBC,aAAa,QACR,4BAA4B;AAEnC,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,eAAe,QAAQ,qBAAqB;AAErD;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC,MACwB;IACxB,MAAM,EAAEC,QAAO,EAAEC,UAAS,EAAEC,WAAU,EAAEC,WAAU,EAAEC,IAAK,OAAM,EAAEC,MAAK,EAAEC,QAAO,EAAE,GAAGR;IAEpF,MAAMS,YAAYZ,4BAA4Ba,CAAAA,MAAOA,IAAID,SAAS;IAClE,MAAME,gBAAgBd,4BAA4Ba,CAAAA,MAAOA,IAAIC,aAAa;IAC1E,MAAMC,0BAA0Bf,4BAA4Ba,CAAAA,MAAOA,IAAIG,gBAAgB;IACvF,MAAMC,iBAAiBjB,4BAA4Ba,CAAAA,MAAOA,IAAII,cAAc;QAClDpB;IAA1B,MAAMmB,mBAAmB,CAACnB,OAAAA,oBAAoBc,WAAWA,QAAQO,OAAO,GAAGC,SAAS,cAA1DtB,kBAAAA,OAA+DkB,uBAAuB;IAChH,MAAMK,WAAWpB,4BAA4Ba,CAAAA,MAAOA,IAAIQ,QAAQ,KAAK;IACrE,MAAMC,aAAavB,cACjBF,oBAAoBc,WAAWA,QAAQP,GAAG,GAAGe,SAAS,EACtDnB,4BAA4Ba,CAAAA,MAAOA,IAAIS,UAAU;IAGnD,OAAO;QACLC,YAAY;YACVC,MAAM;YACNhB,YAAY;YACZD,YAAY;YACZF,SAAS;YACTC,WAAW;YACXK,SAAS;YACTD,OAAO;QACT;QACAe,oBAAoB;YAAEC,MAAM;QAAQ;QACpCF,MAAM5B,sBAAsBa,IAAI;YAAE,GAAGN,KAAK;YAAEC,KAAKL,cAAcK,KAAKQ;QAAW;QAC/EL,YAAYT,iBAAiBS,YAAY;YAAEoB,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QACjFtB,SAASP,iBAAiBO,SAAS;YAAEuB,UAAU,IAAI;QAAC;QACpDtB,WAAWR,iBAAiBQ,WAAW;YAAEqB,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QAC/EjB,OAAOO,iBAAiBnB,iBAAiBY,SAASS,SAAS;QAC3DR,SAASK,mBACLlB,iBACE,oDAAoD;QACpDD,oBAAoBc,WAAW;YAAE,GAAGA,OAAO;YAAEO,SAASC;QAAU,IAAIR,OAAO,EAC3E;YACEgB,cAAc;gBAAEvB,KAAKkB;YAAW;QAClC,KAEFH,SAAS;QACbX,YAAYV,iBAAiBU,YAAY;YACvCoB,UAAUR;YACVO,cAAc;gBACZE,wBAAU,oBAAC5B;gBACX,eAAe,IAAI;gBACnBG,KAAKL,cAAcF,oBAAoBW,cAAcA,WAAWJ,GAAG,GAAGe,SAAS,EAAEL;YACnF;QACF;IACF;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/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TreeItemPersonaLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarContextValue, AvatarSize } from '@fluentui/react-avatar';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { TreeItemLayoutSlots } from '../TreeItemLayout/TreeItemLayout.types';\n\nexport type TreeItemPersonaLayoutContextValues = {\n  avatar: AvatarContextValue;\n};\n\nexport type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' | 'aside' | 'expandIcon'> & {\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * Avatar to display.\n   */\n  media: NonNullable<Slot<'div'>>;\n  /**\n   * Content. Children of the root slot are automatically rendered here\n   */\n  content: NonNullable<Slot<'div'>>;\n  /**\n   * Secondary text that describes or complements the content\n   */\n  description?: Slot<'div'>;\n};\n\n/**\n * TreeItemPersonaLayout Props\n */\nexport type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemPersonaLayout\n */\nexport type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {\n  avatarSize: AvatarSize;\n  buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAoCE"}
+{"version":3,"sources":["TreeItemPersonaLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarContextValue, AvatarSize } from '@fluentui/react-avatar';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { TreeItemSlots } from '../TreeItem/TreeItem.types';\n\nexport type TreeItemPersonaLayoutContextValues = {\n  avatar: AvatarContextValue;\n};\n\nexport type TreeItemPersonaLayoutSlots = {\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * Avatar to display.\n   */\n  media: NonNullable<Slot<'div'>>;\n  /**\n   * Content. Children of the root slot are automatically rendered here\n   */\n  content: NonNullable<Slot<'div'>>;\n  /**\n   * Secondary text that describes or complements the content\n   */\n  description?: Slot<'div'>;\n};\n\nexport type TreeItemPersonaLayoutInternalSlots = TreeItemPersonaLayoutSlots &\n  Pick<TreeItemSlots, 'actions' | 'aside' | 'expandIcon'>;\n\n/**\n * TreeItemPersonaLayout Props\n */\nexport type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemPersonaLayout\n */\nexport type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutInternalSlots> & {\n  avatarSize: AvatarSize;\n  buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAuCE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["renderTreeItemPersonaLayout.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type {\n  TreeItemPersonaLayoutState,\n  TreeItemPersonaLayoutContextValues,\n  TreeItemPersonaLayoutSlots,\n} from './TreeItemPersonaLayout.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (\n  state: TreeItemPersonaLayoutState,\n  contextValues: TreeItemPersonaLayoutContextValues,\n) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemPersonaLayoutSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n      <AvatarContextProvider value={contextValues.avatar}>\n        <slots.media {...slotProps.media} />\n      </AvatarContextProvider>\n      <slots.content {...slotProps.content} />\n      {slots.description && <slots.description {...slotProps.description} />}\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","AvatarContextProvider","ButtonContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","slots","slotProps","root","expandIcon","value","avatar","media","content","description","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAMzD,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC,gBACG;IACH,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGP,aAAyCI;IAEtE,qBACE,AAtBJ,cAsBKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,UAAU,kBAAI,AAvB3B,cAuB4BH,MAAMG,UAAU,EAAKF,UAAUE,UAAU,iBAC/D,AAxBN,cAwBOR;QAAsBS,OAAOL,cAAcM,MAAM;qBAChD,AAzBR,cAyBSL,MAAMM,KAAK,EAAKL,UAAUK,KAAK,kBAElC,AA3BN,cA2BON,MAAMO,OAAO,EAAKN,UAAUM,OAAO,GACnCP,MAAMQ,WAAW,kBAAI,AA5B5B,cA4B6BR,MAAMQ,WAAW,EAAKP,UAAUO,WAAW,iBAClE,AA7BN,cA6BOZ;QAAsBQ,OAAON,MAAMW,kBAAkB;OACnDT,MAAMU,OAAO,kBAAI,AA9B1B,cA8B2BV,MAAMU,OAAO,EAAKT,UAAUS,OAAO,GACrDV,MAAMW,KAAK,kBAAI,AA/BxB,cA+ByBX,MAAMW,KAAK,EAAKV,UAAUU,KAAK;AAIxD,EAAE"}
+{"version":3,"sources":["renderTreeItemPersonaLayout.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type {\n  TreeItemPersonaLayoutState,\n  TreeItemPersonaLayoutContextValues,\n  TreeItemPersonaLayoutInternalSlots,\n} from './TreeItemPersonaLayout.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (\n  state: TreeItemPersonaLayoutState,\n  contextValues: TreeItemPersonaLayoutContextValues,\n) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemPersonaLayoutInternalSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n      <AvatarContextProvider value={contextValues.avatar}>\n        <slots.media {...slotProps.media} />\n      </AvatarContextProvider>\n      <slots.content {...slotProps.content} />\n      {slots.description && <slots.description {...slotProps.description} />}\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","AvatarContextProvider","ButtonContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","slots","slotProps","root","expandIcon","value","avatar","media","content","description","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAMzD,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC,gBACG;IACH,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGP,aAAiDI;IAE9E,qBACE,AAtBJ,cAsBKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,UAAU,kBAAI,AAvB3B,cAuB4BH,MAAMG,UAAU,EAAKF,UAAUE,UAAU,iBAC/D,AAxBN,cAwBOR;QAAsBS,OAAOL,cAAcM,MAAM;qBAChD,AAzBR,cAyBSL,MAAMM,KAAK,EAAKL,UAAUK,KAAK,kBAElC,AA3BN,cA2BON,MAAMO,OAAO,EAAKN,UAAUM,OAAO,GACnCP,MAAMQ,WAAW,kBAAI,AA5B5B,cA4B6BR,MAAMQ,WAAW,EAAKP,UAAUO,WAAW,iBAClE,AA7BN,cA6BOZ;QAAsBQ,OAAON,MAAMW,kBAAkB;OACnDT,MAAMU,OAAO,kBAAI,AA9B1B,cA8B2BV,MAAMU,OAAO,EAAKT,UAAUS,OAAO,GACrDV,MAAMW,KAAK,kBAAI,AA/BxB,cA+ByBX,MAAMW,KAAK,EAAKV,UAAUU,KAAK;AAIxD,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemPersonaLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n  props: TreeItemPersonaLayoutProps,\n  ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n  const { media, children, content, description } = props;\n\n  const treeItemLayoutState = useTreeItemLayout_unstable(\n    {\n      ...props,\n      iconBefore: null,\n      iconAfter: null,\n    },\n    ref,\n  );\n\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  return {\n    ...treeItemLayoutState,\n    components: {\n      expandIcon: 'div',\n      content: 'div',\n      description: 'div',\n      root: 'div',\n      media: 'div',\n      aside: 'div',\n      actions: 'div',\n    },\n    avatarSize: treeAvatarSize[size],\n    content: resolveShorthand(content, { required: true, defaultProps: { children } }),\n    media: resolveShorthand(media, { required: true }),\n    description: resolveShorthand(description),\n  };\n};\n"],"names":["React","resolveShorthand","useTreeContext_unstable","treeAvatarSize","useTreeItemLayout_unstable","useTreeItemPersonaLayout_unstable","props","ref","media","children","content","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","components","expandIcon","root","aside","actions","avatarSize","required","defaultProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,uBAAuB,QAAQ,iBAAiB;AACzD,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,0BAA0B,QAAQ,sCAAsC;AAEjF;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC,MAC+B;IAC/B,MAAM,EAAEC,MAAK,EAAEC,SAAQ,EAAEC,QAAO,EAAEC,YAAW,EAAE,GAAGL;IAElD,MAAMM,sBAAsBR,2BAC1B;QACE,GAAGE,KAAK;QACRO,YAAY,IAAI;QAChBC,WAAW,IAAI;IACjB,GACAP;IAGF,MAAMQ,OAAOb,wBAAwBc,CAAAA,MAAOA,IAAID,IAAI;IACpD,OAAO;QACL,GAAGH,mBAAmB;QACtBK,YAAY;YACVC,YAAY;YACZR,SAAS;YACTC,aAAa;YACbQ,MAAM;YACNX,OAAO;YACPY,OAAO;YACPC,SAAS;QACX;QACAC,YAAYnB,cAAc,CAACY,KAAK;QAChCL,SAAST,iBAAiBS,SAAS;YAAEa,UAAU,IAAI;YAAEC,cAAc;gBAAEf;YAAS;QAAE;QAChFD,OAAOP,iBAAiBO,OAAO;YAAEe,UAAU,IAAI;QAAC;QAChDZ,aAAaV,iBAAiBU;IAChC;AACF,EAAE"}
+{"version":3,"sources":["useTreeItemPersonaLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n  props: TreeItemPersonaLayoutProps,\n  ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n  const { media, children, content, description } = props;\n\n  const treeItemLayoutState = useTreeItemLayout_unstable(\n    {\n      ...props,\n      iconBefore: null,\n      iconAfter: null,\n    },\n    ref,\n  );\n\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  return {\n    ...treeItemLayoutState,\n    components: {\n      expandIcon: 'div',\n      content: 'div',\n      description: 'div',\n      root: 'div',\n      media: 'div',\n      aside: 'div',\n      actions: 'div',\n    },\n    avatarSize: treeAvatarSize[size],\n    content: resolveShorthand(content, { required: true, defaultProps: { children } }),\n    media: resolveShorthand(media, { required: true }),\n    description: resolveShorthand(description),\n  };\n};\n"],"names":["React","resolveShorthand","useTreeContext_unstable","treeAvatarSize","useTreeItemLayout_unstable","useTreeItemPersonaLayout_unstable","props","ref","media","children","content","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","components","expandIcon","root","aside","actions","avatarSize","required","defaultProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,uBAAuB,QAAQ,iBAAiB;AACzD,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,0BAA0B,QAAQ,sCAAsC;AAEjF;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC,MAC+B;IAC/B,MAAM,EAAEC,MAAK,EAAEC,SAAQ,EAAEC,QAAO,EAAEC,YAAW,EAAE,GAAGL;IAElD,MAAMM,sBAAsBR,2BAC1B;QACE,GAAGE,KAAK;QACRO,YAAY,IAAI;QAChBC,WAAW,IAAI;IACjB,GACAP;IAGF,MAAMQ,OAAOb,wBAAwBc,CAAAA,MAAOA,IAAID,IAAI;IACpD,OAAO;QACL,GAAGH,mBAAmB;QACtBK,YAAY;YACVC,YAAY;YACZR,SAAS;YACTC,aAAa;YACbQ,MAAM;YACNX,OAAO;YACPY,OAAO;YACPC,SAAS;QACX;QACAC,YAAYnB,cAAc,CAACY,KAAK;QAChCL,SAAST,iBAAiBS,SAAS;YAAEa,UAAU,IAAI;YAAEC,cAAc;gBAAEf;YAAS;QAAE;QAChFD,OAAOP,iBAAiBO,OAAO;YAAEe,UAAU,IAAI;QAAC;QAChDZ,aAAaV,iBAAiBU;IAChC;AACF,EAAE"}

package/lib/contexts/index.js

@@ -1,2 +1,3 @@
 export * from './treeContext';
 export * from './treeItemContext';
+export * from './treeItemSlotsContext';

package/lib/contexts/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './treeContext';\nexport * from './treeItemContext';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,oBAAoB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './treeContext';\nexport * from './treeItemContext';\nexport * from './treeItemSlotsContext';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,oBAAoB;AAClC,cAAc,yBAAyB"}

package/lib/contexts/treeContext.js

@@ -1,8 +1,11 @@
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
-import { emptyImmutableSet } from '../utils/ImmutableSet';
+import { ImmutableSet } from '../utils/ImmutableSet';
+import { ImmutableMap } from '../utils/ImmutableMap';
 const defaultContextValue = {
     level: 0,
-    openItems: emptyImmutableSet,
+    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 { emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\nimport { TreeItemType } from '../TreeItem';\n\nexport type TreeContextValue = {\n  level: number;\n  appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n  size: 'small' | 'medium';\n  openItems: ImmutableSet<unknown>;\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' | 'target'>\n  | OmitWithoutExpanding<TreeNavigationData_unstable, 'target'>\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: emptyImmutableSet,\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","emptyImmutableSet","defaultContextValue","level","openItems","requestTreeResponse","noop","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAE/G,SAASC,iBAAiB,QAAsB,wBAAwB;AAsBxE,MAAMC,sBAAwC;IAC5CC,OAAO;IACPC,WAAWH;IACXI,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACR;AAEA,SAASF,OAAO;AACd,QAAQ,GACV;AAEA,OAAO,MAAMG,cAAqDV,cAChEW,WACA;AAEF,OAAO,MAAM,EAAEC,UAAUC,aAAY,EAAE,GAAGH,YAAY;AACtD,OAAO,MAAMI,0BAA0B,CAAIC,WACzCd,mBAAmBS,aAAa,CAACM,MAAMb,mBAAmB,GAAKY,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/treeItemContext.js

@@ -2,10 +2,6 @@ import * as React from 'react';
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 const defaultContextValue = {
     value: '',
-    isActionsVisible: false,
-    isAsideVisible: true,
-    actionsRef: React.createRef(),
-    expandIconRef: React.createRef(),
     layoutRef: React.createRef(),
     subtreeRef: React.createRef(),
     itemType: 'leaf',

package/lib/contexts/treeItemContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["treeItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType } from '../TreeItem';\n\nexport type TreeItemContextValue = {\n  isActionsVisible: boolean;\n  isAsideVisible: boolean;\n  actionsRef: React.Ref<HTMLDivElement>;\n  expandIconRef: React.Ref<HTMLDivElement>;\n  layoutRef: React.Ref<HTMLDivElement>;\n  subtreeRef: React.Ref<HTMLDivElement>;\n  itemType: TreeItemType;\n  value: string;\n  open: boolean;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n  value: '',\n  isActionsVisible: false,\n  isAsideVisible: true,\n  actionsRef: React.createRef(),\n  expandIconRef: React.createRef(),\n  layoutRef: React.createRef(),\n  subtreeRef: React.createRef(),\n  itemType: 'leaf',\n  open: false,\n};\n\nexport const TreeItemContext: Context<TreeItemContextValue | undefined> = createContext<\n  TreeItemContextValue | undefined\n>(undefined);\n\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = <T>(selector: ContextSelector<TreeItemContextValue, T>): T =>\n  useContextSelector(TreeItemContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","defaultContextValue","value","isActionsVisible","isAsideVisible","actionsRef","createRef","expandIconRef","layoutRef","subtreeRef","itemType","open","TreeItemContext","undefined","Provider","TreeItemProvider","useTreeItemContext_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAmCC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAe/G,MAAMC,sBAA4C;IAChDC,OAAO;IACPC,kBAAkB,KAAK;IACvBC,gBAAgB,IAAI;IACpBC,YAAYP,MAAMQ,SAAS;IAC3BC,eAAeT,MAAMQ,SAAS;IAC9BE,WAAWV,MAAMQ,SAAS;IAC1BG,YAAYX,MAAMQ,SAAS;IAC3BI,UAAU;IACVC,MAAM,KAAK;AACb;AAEA,OAAO,MAAMC,kBAA6Db,cAExEc,WAAW;AAEb,OAAO,MAAM,EAAEC,UAAUC,iBAAgB,EAAE,GAAGH,gBAAgB;AAC9D,OAAO,MAAMI,8BAA8B,CAAIC,WAC7CjB,mBAAmBY,iBAAiB,CAACM,MAAMjB,mBAAmB,GAAKgB,SAASC,MAAM"}
+{"version":3,"sources":["treeItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType } from '../TreeItem';\n\nexport type TreeItemContextValue = {\n  layoutRef: React.Ref<HTMLDivElement>;\n  subtreeRef: React.Ref<HTMLDivElement>;\n  itemType: TreeItemType;\n  value: string;\n  open: boolean;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n  value: '',\n  layoutRef: React.createRef(),\n  subtreeRef: React.createRef(),\n  itemType: 'leaf',\n  open: false,\n};\n\nexport const TreeItemContext: Context<TreeItemContextValue | undefined> = createContext<\n  TreeItemContextValue | undefined\n>(undefined);\n\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = <T>(selector: ContextSelector<TreeItemContextValue, T>): T =>\n  useContextSelector(TreeItemContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","defaultContextValue","value","layoutRef","createRef","subtreeRef","itemType","open","TreeItemContext","undefined","Provider","TreeItemProvider","useTreeItemContext_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAmCC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAW/G,MAAMC,sBAA4C;IAChDC,OAAO;IACPC,WAAWL,MAAMM,SAAS;IAC1BC,YAAYP,MAAMM,SAAS;IAC3BE,UAAU;IACVC,MAAM,KAAK;AACb;AAEA,OAAO,MAAMC,kBAA6DT,cAExEU,WAAW;AAEb,OAAO,MAAM,EAAEC,UAAUC,iBAAgB,EAAE,GAAGH,gBAAgB;AAC9D,OAAO,MAAMI,8BAA8B,CAAIC,WAC7Cb,mBAAmBQ,iBAAiB,CAACM,MAAMb,mBAAmB,GAAKY,SAASC,MAAM"}

package/lib/contexts/treeItemSlotsContext.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+const defaultContextValue = {
+    actions: undefined,
+    aside: undefined,
+    expandIcon: undefined
+};
+export const TreeItemSlotsContext = React.createContext(undefined);
+export const { Provider: TreeItemSlotsProvider  } = TreeItemSlotsContext;
+export const useTreeItemSlotsContext_unstable = ()=>React.useContext(TreeItemSlotsContext) || defaultContextValue;

package/lib/contexts/treeItemSlotsContext.js.map

@@ -0,0 +1 @@
+{"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 './useOpenItemsState';
+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 './useOpenItemsState';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,4BAA4B;AAC1C,cAAc,sBAAsB"}
+{"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/useControllableOpenItems.js

@@ -0,0 +1,25 @@
+import { useControllableState } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { ImmutableSet } from '../utils/ImmutableSet';
+/**
+ * @internal
+ */ export function useControllableOpenItems(props) {
+    return useControllableState({
+        state: React.useMemo(()=>props.openItems && ImmutableSet.create(props.openItems), [
+            props.openItems
+        ]),
+        defaultState: props.defaultOpenItems && (()=>ImmutableSet.create(props.defaultOpenItems)),
+        initialState: ImmutableSet.empty
+    });
+}
+export function createNextOpenItems(data, previousOpenItems) {
+    if (data.value === null) {
+        return previousOpenItems;
+    }
+    const previousOpenItemsHasId = previousOpenItems.has(data.value);
+    if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {
+        return previousOpenItems;
+    }
+    const nextOpenItems = ImmutableSet.create(previousOpenItems);
+    return data.open ? nextOpenItems.add(data.value) : nextOpenItems.delete(data.value);
+}

package/lib/hooks/useControllableOpenItems.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useControllableOpenItems.ts"],"sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport type { TreeOpenChangeData, TreeProps } from '../components/Tree/Tree.types';\nimport type { TreeItemValue } from '../components/TreeItem/TreeItem.types';\n\n/**\n * @internal\n */\nexport function useControllableOpenItems(props: Pick<TreeProps, 'openItems' | 'defaultOpenItems'>) {\n  return useControllableState({\n    state: React.useMemo(() => props.openItems && ImmutableSet.create(props.openItems), [props.openItems]),\n    defaultState: props.defaultOpenItems && (() => ImmutableSet.create(props.defaultOpenItems)),\n    initialState: ImmutableSet.empty,\n  });\n}\n\nexport function createNextOpenItems(\n  data: Pick<TreeOpenChangeData, 'value' | 'open'>,\n  previousOpenItems: ImmutableSet<TreeItemValue>,\n): ImmutableSet<TreeItemValue> {\n  if (data.value === null) {\n    return previousOpenItems;\n  }\n  const previousOpenItemsHasId = previousOpenItems.has(data.value);\n  if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {\n    return previousOpenItems;\n  }\n  const nextOpenItems = ImmutableSet.create(previousOpenItems);\n  return data.open ? nextOpenItems.add(data.value) : nextOpenItems.delete(data.value);\n}\n"],"names":["useControllableState","React","ImmutableSet","useControllableOpenItems","props","state","useMemo","openItems","create","defaultState","defaultOpenItems","initialState","empty","createNextOpenItems","data","previousOpenItems","value","previousOpenItemsHasId","has","open","nextOpenItems","add","delete"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,4BAA4B;AACjE,YAAYC,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,wBAAwB;AAIrD;;CAEC,GACD,OAAO,SAASC,yBAAyBC,KAAwD,EAAE;IACjG,OAAOJ,qBAAqB;QAC1BK,OAAOJ,MAAMK,OAAO,CAAC,IAAMF,MAAMG,SAAS,IAAIL,aAAaM,MAAM,CAACJ,MAAMG,SAAS,GAAG;YAACH,MAAMG,SAAS;SAAC;QACrGE,cAAcL,MAAMM,gBAAgB,IAAK,CAAA,IAAMR,aAAaM,MAAM,CAACJ,MAAMM,gBAAgB,CAAA;QACzFC,cAAcT,aAAaU,KAAK;IAClC;AACF,CAAC;AAED,OAAO,SAASC,oBACdC,IAAgD,EAChDC,iBAA8C,EACjB;IAC7B,IAAID,KAAKE,KAAK,KAAK,IAAI,EAAE;QACvB,OAAOD;IACT,CAAC;IACD,MAAME,yBAAyBF,kBAAkBG,GAAG,CAACJ,KAAKE,KAAK;IAC/D,IAAIF,KAAKK,IAAI,GAAGF,yBAAyB,CAACA,sBAAsB,EAAE;QAChE,OAAOF;IACT,CAAC;IACD,MAAMK,gBAAgBlB,aAAaM,MAAM,CAACO;IAC1C,OAAOD,KAAKK,IAAI,GAAGC,cAAcC,GAAG,CAACP,KAAKE,KAAK,IAAII,cAAcE,MAAM,CAACR,KAAKE,KAAK,CAAC;AACrF,CAAC"}