@fluentui/react-tree 9.4.9 → 9.4.11

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ExtractSlotProps,\n  getIntrinsicElementProps,\n  isResolvedShorthand,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\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 { main, iconAfter, iconBefore } = props;\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n  const [isActionsVisibleExternal, actionsShorthand]: [boolean | undefined, TreeItemLayoutSlots['actions']] =\n    isResolvedShorthand(props.actions)\n      ? // .visible prop should not be propagated to the DOM\n        [props.actions.visible, { ...props.actions, visible: undefined }]\n      : [undefined, props.actions];\n\n  const isActionsVisible = useTreeItemContext_unstable(ctx => ctx.isActionsVisible) || isActionsVisibleExternal;\n  const isAsideVisible = useTreeItemContext_unstable(ctx => ctx.isAsideVisible);\n  const selectionRef = useTreeItemContext_unstable(ctx => ctx.selectionRef);\n  const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n  const actionsRef = useTreeItemContext_unstable(ctx => ctx.actionsRef);\n  const checked = useTreeItemContext_unstable(ctx => ctx.checked);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n  const expandIcon = slot.optional(props.expandIcon, {\n    renderByDefault: isBranch,\n    defaultProps: {\n      children: <TreeItemChevron />,\n      'aria-hidden': true,\n    },\n    elementType: 'div',\n  });\n  const expandIconRefs = useMergedRefs(expandIcon?.ref, expandIconRef);\n  if (expandIcon) {\n    expandIcon.ref = expandIconRefs;\n  }\n  const arrowNavigationProps = useArrowNavigationGroup({ circular: true, axis: 'horizontal' });\n  const actions = isActionsVisible\n    ? slot.optional(actionsShorthand, {\n        defaultProps: { ...arrowNavigationProps, role: 'toolbar' } as ExtractSlotProps<TreeItemLayoutSlots['actions']>,\n        elementType: 'div',\n      })\n    : undefined;\n  const actionsRefs = useMergedRefs(actions?.ref, actionsRef);\n  if (actions) {\n    actions.ref = actionsRefs;\n  }\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      main: '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: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, layoutRef) as React.Ref<HTMLDivElement>,\n      }),\n      {\n        elementType: 'div',\n      },\n    ),\n    iconBefore: slot.optional(iconBefore, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),\n    main: slot.always(main, { elementType: 'div' }),\n    iconAfter: slot.optional(iconAfter, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),\n    aside: isAsideVisible\n      ? slot.optional(props.aside, { defaultProps: { 'aria-hidden': true }, elementType: 'div' })\n      : undefined,\n    actions,\n    expandIcon,\n    selector: slot.optional(props.selector, {\n      renderByDefault: selectionMode !== 'none',\n      defaultProps: {\n        checked,\n        tabIndex: -1,\n        'aria-hidden': true,\n        ref: selectionRef,\n        // casting here to a union between checkbox and radio\n        // since ref is not present on the selector signature\n        // FIXME: look into Slot type to see if we can make this work\n      } as CheckboxProps | RadioProps,\n      elementType: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<\n        CheckboxProps | RadioProps\n      >,\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","isResolvedShorthand","useMergedRefs","slot","useTreeItemContext_unstable","useTreeContext_unstable","Checkbox","Radio","TreeItemChevron","useArrowNavigationGroup","useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","layoutRef","ctx","selectionMode","isActionsVisibleExternal","actionsShorthand","actions","visible","undefined","isActionsVisible","isAsideVisible","selectionRef","expandIconRef","actionsRef","checked","isBranch","itemType","expandIcon","optional","renderByDefault","defaultProps","children","elementType","expandIconRefs","arrowNavigationProps","circular","axis","role","actionsRefs","components","root","aside","selector","buttonContextValue","size","always","tabIndex"],"mappings":"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"}
+{"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  isResolvedShorthand,\n  useMergedRefs,\n  slot,\n  useEventCallback,\n  elementContains,\n  useControllableState,\n} from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\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 { main, iconAfter, iconBefore } = props;\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n  const [isActionsVisibleFromProps, actionsShorthand]: [boolean | undefined, TreeItemLayoutSlots['actions']] =\n    isResolvedShorthand(props.actions)\n      ? // .visible prop should not be propagated to the DOM\n        [props.actions.visible, { ...props.actions, visible: undefined }]\n      : [undefined, props.actions];\n\n  const [isActionsVisible, setIsActionsVisible] = useControllableState({\n    state: isActionsVisibleFromProps,\n    initialState: false,\n  });\n\n  const selectionRef = useTreeItemContext_unstable(ctx => ctx.selectionRef);\n  const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n  const actionsRef = useTreeItemContext_unstable(ctx => ctx.actionsRef);\n  const actionsRefInternal = React.useRef<HTMLDivElement>(null);\n  const treeItemRef = useTreeItemContext_unstable(ctx => ctx.treeItemRef);\n  const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n  const checked = useTreeItemContext_unstable(ctx => ctx.checked);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n  // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n  assertIsRefObject(treeItemRef);\n  // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change\n  assertIsRefObject(subtreeRef);\n\n  const setActionsVisibleIfNotFromSubtree = React.useCallback(\n    (event: MouseEvent | FocusEvent) => {\n      const isTargetFromSubtree = Boolean(\n        subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n      );\n      if (!isTargetFromSubtree) {\n        setIsActionsVisible(true);\n      }\n    },\n    [subtreeRef, setIsActionsVisible],\n  );\n\n  const setActionsInvisibleIfNotFromSubtree = React.useCallback(\n    (event: FocusEvent | MouseEvent) => {\n      const isRelatedTargetFromActions = Boolean(\n        actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget as Node),\n      );\n      if (isRelatedTargetFromActions) {\n        setIsActionsVisible(true);\n        return;\n      }\n      const isTargetFromSubtree = Boolean(\n        subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n      );\n      if (!isTargetFromSubtree) {\n        setIsActionsVisible(false);\n        return;\n      }\n    },\n    [subtreeRef, setIsActionsVisible],\n  );\n\n  const expandIcon = slot.optional(props.expandIcon, {\n    renderByDefault: isBranch,\n    defaultProps: {\n      children: <TreeItemChevron />,\n      'aria-hidden': true,\n    },\n    elementType: 'div',\n  });\n  const expandIconRefs = useMergedRefs(expandIcon?.ref, expandIconRef);\n  if (expandIcon) {\n    expandIcon.ref = expandIconRefs;\n  }\n  const arrowNavigationProps = useArrowNavigationGroup({ circular: true, axis: 'horizontal' });\n  const actions = isActionsVisible\n    ? slot.optional(actionsShorthand, {\n        defaultProps: { ...arrowNavigationProps, role: 'toolbar' },\n        elementType: 'div',\n      })\n    : undefined;\n  const actionsRefs = useMergedRefs(actions?.ref, actionsRef, actionsRefInternal);\n  const handleActionsBlur = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {\n    if (isResolvedShorthand(actionsShorthand)) {\n      actionsShorthand.onBlur?.(event);\n    }\n    const isRelatedTargetFromActions = Boolean(elementContains(event.currentTarget, event.relatedTarget as Node));\n    setIsActionsVisible(isRelatedTargetFromActions);\n  });\n  if (actions) {\n    actions.ref = actionsRefs;\n    actions.onBlur = handleActionsBlur;\n  }\n\n  const hasActions = Boolean(actionsShorthand);\n\n  React.useEffect(() => {\n    if (treeItemRef.current && hasActions && isActionsVisibleFromProps === undefined) {\n      const treeItemElement = treeItemRef.current;\n\n      const handleMouseOver = setActionsVisibleIfNotFromSubtree;\n      const handleMouseOut = setActionsInvisibleIfNotFromSubtree;\n      const handleFocus = setActionsVisibleIfNotFromSubtree;\n      const handleBlur = setActionsInvisibleIfNotFromSubtree;\n\n      treeItemElement.addEventListener('mouseover', handleMouseOver);\n      treeItemElement.addEventListener('mouseout', handleMouseOut);\n      treeItemElement.addEventListener('focus', handleFocus);\n      treeItemElement.addEventListener('blur', handleBlur);\n\n      return () => {\n        treeItemElement.removeEventListener('mouseover', handleMouseOver);\n        treeItemElement.removeEventListener('mouseout', handleMouseOut);\n        treeItemElement.removeEventListener('focus', handleFocus);\n        treeItemElement.removeEventListener('blur', handleBlur);\n      };\n    }\n  }, [\n    hasActions,\n    treeItemRef,\n    isActionsVisibleFromProps,\n    setActionsVisibleIfNotFromSubtree,\n    setActionsInvisibleIfNotFromSubtree,\n  ]);\n\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      main: '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: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, layoutRef) as React.Ref<HTMLDivElement>,\n      }),\n      {\n        elementType: 'div',\n      },\n    ),\n    iconBefore: slot.optional(iconBefore, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),\n    main: slot.always(main, { elementType: 'div' }),\n    iconAfter: slot.optional(iconAfter, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),\n    aside: !isActionsVisible\n      ? slot.optional(props.aside, { defaultProps: { 'aria-hidden': true }, elementType: 'div' })\n      : undefined,\n    actions,\n    expandIcon,\n    selector: slot.optional(props.selector, {\n      renderByDefault: selectionMode !== 'none',\n      defaultProps: {\n        checked,\n        tabIndex: -1,\n        'aria-hidden': true,\n        ref: selectionRef,\n        // casting here to a union between checkbox and radio\n        // since ref is not present on the selector signature\n        // FIXME: look into Slot type to see if we can make this work\n      } as CheckboxProps | RadioProps,\n      elementType: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<\n        CheckboxProps | RadioProps\n      >,\n    }),\n  };\n};\n\nfunction assertIsRefObject<Value>(ref?: React.Ref<Value>): asserts ref is React.RefObject<Value> {\n  if (process.env.NODE_ENV !== 'production') {\n    if (typeof ref !== 'object' || ref === null || !('current' in ref)) {\n      throw new Error(`\n        @fluentui/react-tree [${useTreeItemLayout_unstable.name}]:\n        Internal Error: contextual ref is not a RefObject! Please report this bug immediately, as contextual refs should be RefObjects.\n      `);\n    }\n  }\n}\n"],"names":["React","getIntrinsicElementProps","isResolvedShorthand","useMergedRefs","slot","useEventCallback","elementContains","useControllableState","useTreeItemContext_unstable","useTreeContext_unstable","Checkbox","Radio","TreeItemChevron","useArrowNavigationGroup","useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","layoutRef","ctx","selectionMode","isActionsVisibleFromProps","actionsShorthand","actions","visible","undefined","isActionsVisible","setIsActionsVisible","state","initialState","selectionRef","expandIconRef","actionsRef","actionsRefInternal","useRef","treeItemRef","subtreeRef","checked","isBranch","itemType","assertIsRefObject","setActionsVisibleIfNotFromSubtree","useCallback","event","isTargetFromSubtree","Boolean","current","target","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","expandIcon","optional","renderByDefault","defaultProps","children","elementType","expandIconRefs","arrowNavigationProps","circular","axis","role","actionsRefs","handleActionsBlur","onBlur","currentTarget","hasActions","useEffect","treeItemElement","handleMouseOver","handleMouseOut","handleFocus","handleBlur","addEventListener","removeEventListener","components","root","aside","selector","buttonContextValue","size","always","tabIndex","process","env","NODE_ENV","Error","name"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,mBAAmB,EACnBC,aAAa,EACbC,IAAI,EACJC,gBAAgB,EAChBC,eAAe,EACfC,oBAAoB,QACf,4BAA4B;AACnC,SAASC,2BAA2B,EAAEC,uBAAuB,QAAQ,iBAAiB;AAEtF,SAASC,QAAQ,QAAuB,2BAA2B;AACnE,SAASC,KAAK,QAAoB,wBAAwB;AAC1D,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAEC,UAAU,EAAE,GAAGJ;IAExC,MAAMK,YAAYZ,4BAA4Ba,CAAAA,MAAOA,IAAID,SAAS;IAClE,MAAME,gBAAgBb,wBAAwBY,CAAAA,MAAOA,IAAIC,aAAa;IAEtE,MAAM,CAACC,2BAA2BC,iBAAiB,GACjDtB,oBAAoBa,MAAMU,OAAO,IAE7B;QAACV,MAAMU,OAAO,CAACC,OAAO;QAAE;YAAE,GAAGX,MAAMU,OAAO;YAAEC,SAASC;QAAU;KAAE,GACjE;QAACA;QAAWZ,MAAMU,OAAO;KAAC;IAEhC,MAAM,CAACG,kBAAkBC,oBAAoB,GAAGtB,qBAAqB;QACnEuB,OAAOP;QACPQ,cAAc;IAChB;IAEA,MAAMC,eAAexB,4BAA4Ba,CAAAA,MAAOA,IAAIW,YAAY;IACxE,MAAMC,gBAAgBzB,4BAA4Ba,CAAAA,MAAOA,IAAIY,aAAa;IAC1E,MAAMC,aAAa1B,4BAA4Ba,CAAAA,MAAOA,IAAIa,UAAU;IACpE,MAAMC,qBAAqBnC,MAAMoC,MAAM,CAAiB;IACxD,MAAMC,cAAc7B,4BAA4Ba,CAAAA,MAAOA,IAAIgB,WAAW;IACtE,MAAMC,aAAa9B,4BAA4Ba,CAAAA,MAAOA,IAAIiB,UAAU;IACpE,MAAMC,UAAU/B,4BAA4Ba,CAAAA,MAAOA,IAAIkB,OAAO;IAC9D,MAAMC,WAAWhC,4BAA4Ba,CAAAA,MAAOA,IAAIoB,QAAQ,KAAK;IAErE,gHAAgH;IAChHC,kBAAkBL;IAClB,gHAAgH;IAChHK,kBAAkBJ;IAElB,MAAMK,oCAAoC3C,MAAM4C,WAAW,CACzD,CAACC;QACC,MAAMC,sBAAsBC,QAC1BT,WAAWU,OAAO,IAAI1C,gBAAgBgC,WAAWU,OAAO,EAAEH,MAAMI,MAAM;QAExE,IAAI,CAACH,qBAAqB;YACxBjB,oBAAoB;QACtB;IACF,GACA;QAACS;QAAYT;KAAoB;IAGnC,MAAMqB,sCAAsClD,MAAM4C,WAAW,CAC3D,CAACC;QACC,MAAMM,6BAA6BJ,QACjCZ,mBAAmBa,OAAO,IAAI1C,gBAAgB6B,mBAAmBa,OAAO,EAAEH,MAAMO,aAAa;QAE/F,IAAID,4BAA4B;YAC9BtB,oBAAoB;YACpB;QACF;QACA,MAAMiB,sBAAsBC,QAC1BT,WAAWU,OAAO,IAAI1C,gBAAgBgC,WAAWU,OAAO,EAAEH,MAAMI,MAAM;QAExE,IAAI,CAACH,qBAAqB;YACxBjB,oBAAoB;YACpB;QACF;IACF,GACA;QAACS;QAAYT;KAAoB;IAGnC,MAAMwB,aAAajD,KAAKkD,QAAQ,CAACvC,MAAMsC,UAAU,EAAE;QACjDE,iBAAiBf;QACjBgB,cAAc;YACZC,wBAAU,oBAAC7C;YACX,eAAe;QACjB;QACA8C,aAAa;IACf;IACA,MAAMC,iBAAiBxD,cAAckD,uBAAAA,iCAAAA,WAAYrC,GAAG,EAAEiB;IACtD,IAAIoB,YAAY;QACdA,WAAWrC,GAAG,GAAG2C;IACnB;IACA,MAAMC,uBAAuB/C,wBAAwB;QAAEgD,UAAU;QAAMC,MAAM;IAAa;IAC1F,MAAMrC,UAAUG,mBACZxB,KAAKkD,QAAQ,CAAC9B,kBAAkB;QAC9BgC,cAAc;YAAE,GAAGI,oBAAoB;YAAEG,MAAM;QAAU;QACzDL,aAAa;IACf,KACA/B;IACJ,MAAMqC,cAAc7D,cAAcsB,oBAAAA,8BAAAA,QAAST,GAAG,EAAEkB,YAAYC;IAC5D,MAAM8B,oBAAoB5D,iBAAiB,CAACwC;QAC1C,IAAI3C,oBAAoBsB,mBAAmB;gBACzCA;aAAAA,2BAAAA,iBAAiB0C,MAAM,cAAvB1C,+CAAAA,8BAAAA,kBAA0BqB;QAC5B;QACA,MAAMM,6BAA6BJ,QAAQzC,gBAAgBuC,MAAMsB,aAAa,EAAEtB,MAAMO,aAAa;QACnGvB,oBAAoBsB;IACtB;IACA,IAAI1B,SAAS;QACXA,QAAQT,GAAG,GAAGgD;QACdvC,QAAQyC,MAAM,GAAGD;IACnB;IAEA,MAAMG,aAAarB,QAAQvB;IAE3BxB,MAAMqE,SAAS,CAAC;QACd,IAAIhC,YAAYW,OAAO,IAAIoB,cAAc7C,8BAA8BI,WAAW;YAChF,MAAM2C,kBAAkBjC,YAAYW,OAAO;YAE3C,MAAMuB,kBAAkB5B;YACxB,MAAM6B,iBAAiBtB;YACvB,MAAMuB,cAAc9B;YACpB,MAAM+B,aAAaxB;YAEnBoB,gBAAgBK,gBAAgB,CAAC,aAAaJ;YAC9CD,gBAAgBK,gBAAgB,CAAC,YAAYH;YAC7CF,gBAAgBK,gBAAgB,CAAC,SAASF;YAC1CH,gBAAgBK,gBAAgB,CAAC,QAAQD;YAEzC,OAAO;gBACLJ,gBAAgBM,mBAAmB,CAAC,aAAaL;gBACjDD,gBAAgBM,mBAAmB,CAAC,YAAYJ;gBAChDF,gBAAgBM,mBAAmB,CAAC,SAASH;gBAC7CH,gBAAgBM,mBAAmB,CAAC,QAAQF;YAC9C;QACF;IACF,GAAG;QACDN;QACA/B;QACAd;QACAoB;QACAO;KACD;IAED,OAAO;QACL2B,YAAY;YACVC,MAAM;YACNzB,YAAY;YACZlC,YAAY;YACZF,MAAM;YACNC,WAAW;YACXO,SAAS;YACTsD,OAAO;YACP,qDAAqD;YACrDC,UAAW1D,kBAAkB,gBAAgBZ,WAAWC;QAC1D;QACAsE,oBAAoB;YAAEC,MAAM;QAAQ;QACpCJ,MAAM1E,KAAK+E,MAAM,CACflF,yBAAyB,OAAO;YAC9B,GAAGc,KAAK;YACR,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKb,cAAca,KAAKI;QAC1B,IACA;YACEsC,aAAa;QACf;QAEFvC,YAAYf,KAAKkD,QAAQ,CAACnC,YAAY;YAAEqC,cAAc;gBAAE,eAAe;YAAK;YAAGE,aAAa;QAAM;QAClGzC,MAAMb,KAAK+E,MAAM,CAAClE,MAAM;YAAEyC,aAAa;QAAM;QAC7CxC,WAAWd,KAAKkD,QAAQ,CAACpC,WAAW;YAAEsC,cAAc;gBAAE,eAAe;YAAK;YAAGE,aAAa;QAAM;QAChGqB,OAAO,CAACnD,mBACJxB,KAAKkD,QAAQ,CAACvC,MAAMgE,KAAK,EAAE;YAAEvB,cAAc;gBAAE,eAAe;YAAK;YAAGE,aAAa;QAAM,KACvF/B;QACJF;QACA4B;QACA2B,UAAU5E,KAAKkD,QAAQ,CAACvC,MAAMiE,QAAQ,EAAE;YACtCzB,iBAAiBjC,kBAAkB;YACnCkC,cAAc;gBACZjB;gBACA6C,UAAU,CAAC;gBACX,eAAe;gBACfpE,KAAKgB;YAIP;YACA0B,aAAcpC,kBAAkB,gBAAgBZ,WAAWC;QAG7D;IACF;AACF,EAAE;AAEF,SAAS+B,kBAAyB1B,GAAsB;IACtD,IAAIqE,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,OAAOvE,QAAQ,YAAYA,QAAQ,QAAQ,CAAE,CAAA,aAAaA,GAAE,GAAI;YAClE,MAAM,IAAIwE,MAAM,CAAC;8BACO,EAAE1E,2BAA2B2E,IAAI,CAAC;;MAE1D,CAAC;QACH;IACF;AACF"}

package/lib/contexts/treeItemContext.js

@@ -5,6 +5,7 @@ const defaultContextValue = {
     value: headlessTreeRootId,
     selectionRef: React.createRef(),
     layoutRef: React.createRef(),
+    treeItemRef: React.createRef(),
     subtreeRef: React.createRef(),
     actionsRef: React.createRef(),
     expandIconRef: React.createRef(),

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 type { TreeItemType, TreeItemValue } from '../TreeItem';\nimport { headlessTreeRootId } from '../utils/createHeadlessTree';\nimport { TreeSelectionValue } from '../Tree';\n\nexport type TreeItemContextValue = {\n  isActionsVisible: boolean;\n  isAsideVisible: boolean;\n  selectionRef: React.Ref<HTMLInputElement>;\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: TreeItemValue;\n  open: boolean;\n  checked: TreeSelectionValue;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n  value: headlessTreeRootId,\n  selectionRef: React.createRef(),\n  layoutRef: React.createRef(),\n  subtreeRef: React.createRef(),\n  actionsRef: React.createRef(),\n  expandIconRef: React.createRef(),\n  isActionsVisible: false,\n  isAsideVisible: false,\n  itemType: 'leaf',\n  open: false,\n  checked: 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","headlessTreeRootId","defaultContextValue","value","selectionRef","createRef","layoutRef","subtreeRef","actionsRef","expandIconRef","isActionsVisible","isAsideVisible","itemType","open","checked","TreeItemContext","undefined","Provider","TreeItemProvider","useTreeItemContext_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAmCC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAE/G,SAASC,kBAAkB,QAAQ,8BAA8B;AAiBjE,MAAMC,sBAA4C;IAChDC,OAAOF;IACPG,cAAcN,MAAMO,SAAS;IAC7BC,WAAWR,MAAMO,SAAS;IAC1BE,YAAYT,MAAMO,SAAS;IAC3BG,YAAYV,MAAMO,SAAS;IAC3BI,eAAeX,MAAMO,SAAS;IAC9BK,kBAAkB;IAClBC,gBAAgB;IAChBC,UAAU;IACVC,MAAM;IACNC,SAAS;AACX;AAEA,OAAO,MAAMC,kBAA6DhB,cAExEiB,WAAW;AAEb,OAAO,MAAM,EAAEC,UAAUC,gBAAgB,EAAE,GAAGH,gBAAgB;AAC9D,OAAO,MAAMI,8BAA8B,CAAIC,WAC7CpB,mBAAmBe,iBAAiB,CAACM,MAAMnB,mBAAmB,GAAKkB,SAASC,MAAM"}
+{"version":3,"sources":["treeItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { TreeItemType, TreeItemValue } from '../TreeItem';\nimport { headlessTreeRootId } from '../utils/createHeadlessTree';\nimport { TreeSelectionValue } from '../Tree';\n\nexport type TreeItemContextValue = {\n  /**\n   * @deprecated - this value is irrelevant for the tree item\n   */\n  isActionsVisible: boolean;\n  /**\n   * @deprecated - this value is irrelevant for the tree item\n   */\n  isAsideVisible: boolean;\n  selectionRef: React.Ref<HTMLInputElement>;\n  actionsRef: React.Ref<HTMLDivElement>;\n  expandIconRef: React.Ref<HTMLDivElement>;\n  layoutRef: React.Ref<HTMLDivElement>;\n  // FIXME: this should be React.RefObject<HTMLDivElement>,\n  //  but as it would be a breaking change, we need to keep it as is for now\n  subtreeRef: React.Ref<HTMLDivElement>;\n  // FIXME: this is only marked as optional to avoid breaking changes\n  // it should always be provided internally\n  treeItemRef?: React.RefObject<HTMLDivElement>;\n  itemType: TreeItemType;\n  value: TreeItemValue;\n  open: boolean;\n  checked: TreeSelectionValue;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n  value: headlessTreeRootId,\n  selectionRef: React.createRef(),\n  layoutRef: React.createRef(),\n  treeItemRef: React.createRef(),\n  subtreeRef: React.createRef(),\n  actionsRef: React.createRef(),\n  expandIconRef: React.createRef(),\n  isActionsVisible: false,\n  isAsideVisible: false,\n  itemType: 'leaf',\n  open: false,\n  checked: 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","headlessTreeRootId","defaultContextValue","value","selectionRef","createRef","layoutRef","treeItemRef","subtreeRef","actionsRef","expandIconRef","isActionsVisible","isAsideVisible","itemType","open","checked","TreeItemContext","undefined","Provider","TreeItemProvider","useTreeItemContext_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAmCC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAE/G,SAASC,kBAAkB,QAAQ,8BAA8B;AA4BjE,MAAMC,sBAA4C;IAChDC,OAAOF;IACPG,cAAcN,MAAMO,SAAS;IAC7BC,WAAWR,MAAMO,SAAS;IAC1BE,aAAaT,MAAMO,SAAS;IAC5BG,YAAYV,MAAMO,SAAS;IAC3BI,YAAYX,MAAMO,SAAS;IAC3BK,eAAeZ,MAAMO,SAAS;IAC9BM,kBAAkB;IAClBC,gBAAgB;IAChBC,UAAU;IACVC,MAAM;IACNC,SAAS;AACX;AAEA,OAAO,MAAMC,kBAA6DjB,cAExEkB,WAAW;AAEb,OAAO,MAAM,EAAEC,UAAUC,gBAAgB,EAAE,GAAGH,gBAAgB;AAC9D,OAAO,MAAMI,8BAA8B,CAAIC,WAC7CrB,mBAAmBgB,iBAAiB,CAACM,MAAMpB,mBAAmB,GAAKmB,SAASC,MAAM"}

package/lib-commonjs/components/FlatTree/useFlatTree.js

@@ -16,7 +16,6 @@ const _createHTMLElementWalker = require("../../utils/createHTMLElementWalker");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _treeItemFilter = require("../../utils/treeItemFilter");
 const _reactutilities = require("@fluentui/react-utilities");
-const _treeContext = require("../../contexts/treeContext");
 const _useSubtree = require("../../hooks/useSubtree");
 const _ImmutableSet = require("../../utils/ImmutableSet");
 const _ImmutableMap = require("../../utils/ImmutableMap");
@@ -58,15 +57,9 @@ function useRootFlatTree(props, ref) {
 }
 function useSubFlatTree(props, ref) {
     if (process.env.NODE_ENV === 'development') {
-        // eslint-disable-next-line no-console
-        console.error(`@fluentui/react-tree [useFlatTree]:
+        throw new Error(`@fluentui/react-tree [useFlatTree]:
 Subtrees are not allowed in a FlatTree!
-You cannot use a <FlatTree> component inside of another <FlatTree> component.`);
-    }
-    if ((0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.treeType) === 'nested' && process.env.NODE_ENV === 'development') {
-        // eslint-disable-next-line no-console
-        console.error(`@fluentui/react-tree [useFlatTree]:
-Error: <FlatTree> component cannot be used inside of a nested <Tree> component and vice versa.`);
+You cannot use a <FlatTree> component inside of another <FlatTree> nor a <Tree> component!`);
     }
     return {
         ...(0, _useSubtree.useSubtree)(props, ref),
@@ -81,13 +74,7 @@ Error: <FlatTree> component cannot be used inside of a nested <Tree> component a
         appearance: 'subtle',
         size: 'medium',
         // ------ defaultTreeContextValue
-        open: false,
-        components: {
-            root: _react.Fragment
-        },
-        root: _reactutilities.slot.always(props, {
-            elementType: _react.Fragment
-        })
+        open: false
     };
 }
 function noop() {

package/lib-commonjs/components/FlatTree/useFlatTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useFlatTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nexport const useFlatTree_unstable = (props, ref)=>{\n    const isRoot = React.useContext(SubtreeContext) === undefined;\n    // as level is static, this doesn't break rule of hooks\n    // and if this becomes an issue later on, this can be easily converted\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);\n};\nfunction useRootFlatTree(props, ref) {\n    const { navigate, initialize } = useFlatTreeNavigation();\n    const walkerRef = React.useRef();\n    const { targetDocument } = useFluent_unstable();\n    const initializeWalker = React.useCallback((root)=>{\n        if (root && targetDocument) {\n            walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n            initialize(walkerRef.current);\n        }\n    }, [\n        initialize,\n        targetDocument\n    ]);\n    const handleNavigation = useEventCallback((event, data)=>{\n        var _props_onNavigation;\n        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);\n        if (walkerRef.current && !event.isDefaultPrevented()) {\n            navigate(data, walkerRef.current);\n        }\n    });\n    return {\n        treeType: 'flat',\n        ...useRootTree({\n            ...props,\n            onNavigation: handleNavigation\n        }, useMergedRefs(ref, initializeWalker))\n    };\n}\nfunction useSubFlatTree(props, ref) {\n    if (process.env.NODE_ENV === 'development') {\n        // eslint-disable-next-line no-console\n        console.error(`@fluentui/react-tree [useFlatTree]:\nSubtrees are not allowed in a FlatTree!\nYou cannot use a <FlatTree> component inside of another <FlatTree> component.`);\n    }\n    if (useTreeContext_unstable((ctx)=>ctx.treeType) === 'nested' && process.env.NODE_ENV === 'development') {\n        // eslint-disable-next-line no-console\n        console.error(`@fluentui/react-tree [useFlatTree]:\nError: <FlatTree> component cannot be used inside of a nested <Tree> component and vice versa.`);\n    }\n    return {\n        ...useSubtree(props, ref),\n        // ------ defaultTreeContextValue\n        level: 0,\n        contextType: 'root',\n        treeType: 'nested',\n        selectionMode: 'none',\n        openItems: ImmutableSet.empty,\n        checkedItems: ImmutableMap.empty,\n        requestTreeResponse: noop,\n        appearance: 'subtle',\n        size: 'medium',\n        // ------ defaultTreeContextValue\n        open: false,\n        components: {\n            root: React.Fragment\n        },\n        root: slot.always(props, {\n            elementType: React.Fragment\n        })\n    };\n}\nfunction noop() {\n/* do nothing */ }\n"],"names":["useFlatTree_unstable","props","ref","isRoot","React","useContext","SubtreeContext","undefined","useRootFlatTree","useSubFlatTree","navigate","initialize","useFlatTreeNavigation","walkerRef","useRef","targetDocument","useFluent_unstable","initializeWalker","useCallback","root","current","createHTMLElementWalker","treeItemFilter","handleNavigation","useEventCallback","event","data","_props_onNavigation","onNavigation","call","isDefaultPrevented","treeType","useRootTree","useMergedRefs","process","env","NODE_ENV","console","error","useTreeContext_unstable","ctx","useSubtree","level","contextType","selectionMode","openItems","ImmutableSet","empty","checkedItems","ImmutableMap","requestTreeResponse","noop","appearance","size","open","components","Fragment","slot","always","elementType"],"mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;6BACK;uCACU;yCACE;qCACL;gCACJ;gCACuB;6BACd;4BACb;8BACE;8BACA;gCACE;AACxB,MAAMA,uBAAuB,CAACC,OAAOC;IACxC,MAAMC,SAASC,OAAMC,UAAU,CAACC,8BAAc,MAAMC;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOJ,SAASK,gBAAgBP,OAAOC,OAAOO,eAAeR,OAAOC;AACxE;AACA,SAASM,gBAAgBP,KAAK,EAAEC,GAAG;IAC/B,MAAM,EAAEQ,QAAQ,EAAEC,UAAU,EAAE,GAAGC,IAAAA,4CAAqB;IACtD,MAAMC,YAAYT,OAAMU,MAAM;IAC9B,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAkB;IAC7C,MAAMC,mBAAmBb,OAAMc,WAAW,CAAC,CAACC;QACxC,IAAIA,QAAQJ,gBAAgB;YACxBF,UAAUO,OAAO,GAAGC,IAAAA,gDAAuB,EAACF,MAAMJ,gBAAgBO,8BAAc;YAChFX,WAAWE,UAAUO,OAAO;QAChC;IACJ,GAAG;QACCT;QACAI;KACH;IACD,MAAMQ,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QAC9C,IAAIC;QACHA,CAAAA,sBAAsB1B,MAAM2B,YAAY,AAAD,MAAO,QAAQD,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBE,IAAI,CAAC5B,OAAOwB,OAAOC;QACxI,IAAIb,UAAUO,OAAO,IAAI,CAACK,MAAMK,kBAAkB,IAAI;YAClDpB,SAASgB,MAAMb,UAAUO,OAAO;QACpC;IACJ;IACA,OAAO;QACHW,UAAU;QACV,GAAGC,IAAAA,wBAAW,EAAC;YACX,GAAG/B,KAAK;YACR2B,cAAcL;QAClB,GAAGU,IAAAA,6BAAa,EAAC/B,KAAKe,kBAAkB;IAC5C;AACJ;AACA,SAASR,eAAeR,KAAK,EAAEC,GAAG;IAC9B,IAAIgC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACxC,sCAAsC;QACtCC,QAAQC,KAAK,CAAC,CAAC;;6EAEsD,CAAC;IAC1E;IACA,IAAIC,IAAAA,oCAAuB,EAAC,CAACC,MAAMA,IAAIT,QAAQ,MAAM,YAAYG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACrG,sCAAsC;QACtCC,QAAQC,KAAK,CAAC,CAAC;8FACuE,CAAC;IAC3F;IACA,OAAO;QACH,GAAGG,IAAAA,sBAAU,EAACxC,OAAOC,IAAI;QACzB,iCAAiC;QACjCwC,OAAO;QACPC,aAAa;QACbZ,UAAU;QACVa,eAAe;QACfC,WAAWC,0BAAY,CAACC,KAAK;QAC7BC,cAAcC,0BAAY,CAACF,KAAK;QAChCG,qBAAqBC;QACrBC,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;QACNC,YAAY;YACRpC,MAAMf,OAAMoD,QAAQ;QACxB;QACArC,MAAMsC,oBAAI,CAACC,MAAM,CAACzD,OAAO;YACrB0D,aAAavD,OAAMoD,QAAQ;QAC/B;IACJ;AACJ;AACA,SAASL;AACT,cAAc,GAAG"}
+{"version":3,"sources":["useFlatTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nexport const useFlatTree_unstable = (props, ref)=>{\n    const isRoot = React.useContext(SubtreeContext) === undefined;\n    // as level is static, this doesn't break rule of hooks\n    // and if this becomes an issue later on, this can be easily converted\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);\n};\nfunction useRootFlatTree(props, ref) {\n    const { navigate, initialize } = useFlatTreeNavigation();\n    const walkerRef = React.useRef();\n    const { targetDocument } = useFluent_unstable();\n    const initializeWalker = React.useCallback((root)=>{\n        if (root && targetDocument) {\n            walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n            initialize(walkerRef.current);\n        }\n    }, [\n        initialize,\n        targetDocument\n    ]);\n    const handleNavigation = useEventCallback((event, data)=>{\n        var _props_onNavigation;\n        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);\n        if (walkerRef.current && !event.isDefaultPrevented()) {\n            navigate(data, walkerRef.current);\n        }\n    });\n    return {\n        treeType: 'flat',\n        ...useRootTree({\n            ...props,\n            onNavigation: handleNavigation\n        }, useMergedRefs(ref, initializeWalker))\n    };\n}\nfunction useSubFlatTree(props, ref) {\n    if (process.env.NODE_ENV === 'development') {\n        throw new Error(`@fluentui/react-tree [useFlatTree]:\nSubtrees are not allowed in a FlatTree!\nYou cannot use a <FlatTree> component inside of another <FlatTree> nor a <Tree> component!`);\n    }\n    return {\n        ...useSubtree(props, ref),\n        // ------ defaultTreeContextValue\n        level: 0,\n        contextType: 'root',\n        treeType: 'nested',\n        selectionMode: 'none',\n        openItems: ImmutableSet.empty,\n        checkedItems: ImmutableMap.empty,\n        requestTreeResponse: noop,\n        appearance: 'subtle',\n        size: 'medium',\n        // ------ defaultTreeContextValue\n        open: false\n    };\n}\nfunction noop() {\n/* do nothing */ }\n"],"names":["useFlatTree_unstable","props","ref","isRoot","React","useContext","SubtreeContext","undefined","useRootFlatTree","useSubFlatTree","navigate","initialize","useFlatTreeNavigation","walkerRef","useRef","targetDocument","useFluent_unstable","initializeWalker","useCallback","root","current","createHTMLElementWalker","treeItemFilter","handleNavigation","useEventCallback","event","data","_props_onNavigation","onNavigation","call","isDefaultPrevented","treeType","useRootTree","useMergedRefs","process","env","NODE_ENV","Error","useSubtree","level","contextType","selectionMode","openItems","ImmutableSet","empty","checkedItems","ImmutableMap","requestTreeResponse","noop","appearance","size","open"],"mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;6BACK;uCACU;yCACE;qCACL;gCACJ;gCACiB;4BACrB;8BACE;8BACA;gCACE;AACxB,MAAMA,uBAAuB,CAACC,OAAOC;IACxC,MAAMC,SAASC,OAAMC,UAAU,CAACC,8BAAc,MAAMC;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOJ,SAASK,gBAAgBP,OAAOC,OAAOO,eAAeR,OAAOC;AACxE;AACA,SAASM,gBAAgBP,KAAK,EAAEC,GAAG;IAC/B,MAAM,EAAEQ,QAAQ,EAAEC,UAAU,EAAE,GAAGC,IAAAA,4CAAqB;IACtD,MAAMC,YAAYT,OAAMU,MAAM;IAC9B,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAkB;IAC7C,MAAMC,mBAAmBb,OAAMc,WAAW,CAAC,CAACC;QACxC,IAAIA,QAAQJ,gBAAgB;YACxBF,UAAUO,OAAO,GAAGC,IAAAA,gDAAuB,EAACF,MAAMJ,gBAAgBO,8BAAc;YAChFX,WAAWE,UAAUO,OAAO;QAChC;IACJ,GAAG;QACCT;QACAI;KACH;IACD,MAAMQ,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QAC9C,IAAIC;QACHA,CAAAA,sBAAsB1B,MAAM2B,YAAY,AAAD,MAAO,QAAQD,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBE,IAAI,CAAC5B,OAAOwB,OAAOC;QACxI,IAAIb,UAAUO,OAAO,IAAI,CAACK,MAAMK,kBAAkB,IAAI;YAClDpB,SAASgB,MAAMb,UAAUO,OAAO;QACpC;IACJ;IACA,OAAO;QACHW,UAAU;QACV,GAAGC,IAAAA,wBAAW,EAAC;YACX,GAAG/B,KAAK;YACR2B,cAAcL;QAClB,GAAGU,IAAAA,6BAAa,EAAC/B,KAAKe,kBAAkB;IAC5C;AACJ;AACA,SAASR,eAAeR,KAAK,EAAEC,GAAG;IAC9B,IAAIgC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACxC,MAAM,IAAIC,MAAM,CAAC;;0FAEiE,CAAC;IACvF;IACA,OAAO;QACH,GAAGC,IAAAA,sBAAU,EAACrC,OAAOC,IAAI;QACzB,iCAAiC;QACjCqC,OAAO;QACPC,aAAa;QACbT,UAAU;QACVU,eAAe;QACfC,WAAWC,0BAAY,CAACC,KAAK;QAC7BC,cAAcC,0BAAY,CAACF,KAAK;QAChCG,qBAAqBC;QACrBC,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;IACV;AACJ;AACA,SAASH;AACT,cAAc,GAAG"}

package/lib-commonjs/components/Tree/useTree.js

@@ -82,10 +82,15 @@ function useNestedRootTree(props, ref) {
     };
 }
 function useNestedSubtree(props, ref) {
-    if ((0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.treeType) === 'flat' && process.env.NODE_ENV === 'development') {
-        // eslint-disable-next-line no-console
-        console.error(`@fluentui/react-tree [useTree]:
-Error: <Tree> component cannot be used inside of a nested <FlatTree> component and vice versa.`);
+    if (process.env.NODE_ENV === 'development') {
+        // this doesn't break rule of hooks, as environment is a static value
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const treeType = (0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.treeType);
+        if (treeType === 'flat') {
+            throw new Error(`@fluentui/react-tree [useTree]:
+Subtrees are not allowed in a FlatTree!
+You cannot use a <Tree> component inside of a <FlatTree> component!`);
+        }
     }
     return (0, _useSubtree.useSubtree)(props, ref);
 }

package/lib-commonjs/components/Tree/useTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useTreeNavigation } from './useTreeNavigation';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nexport const useTree_unstable = (props, ref)=>{\n    const isRoot = React.useContext(SubtreeContext) === undefined;\n    // as level is static, this doesn't break rule of hooks\n    // and if this becomes an issue later on, this can be easily converted\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);\n};\nfunction useNestedRootTree(props, ref) {\n    const [openItems, setOpenItems] = useControllableOpenItems(props);\n    const checkedItems = useNestedCheckedItems(props);\n    const { navigate, initialize } = useTreeNavigation();\n    const walkerRef = React.useRef();\n    const { targetDocument } = useFluent_unstable();\n    const initializeWalker = React.useCallback((root)=>{\n        if (root && targetDocument) {\n            walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n            initialize(walkerRef.current);\n        }\n    }, [\n        initialize,\n        targetDocument\n    ]);\n    const handleOpenChange = useEventCallback((event, data)=>{\n        var _props_onOpenChange;\n        const nextOpenItems = createNextOpenItems(data, openItems);\n        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {\n            ...data,\n            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n        });\n        setOpenItems(nextOpenItems);\n    });\n    const handleCheckedChange = useEventCallback((event, data)=>{\n        if (walkerRef.current) {\n            var _props_onCheckedChange;\n            const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n            (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, {\n                ...data,\n                checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()\n            });\n        }\n    });\n    const handleNavigation = useEventCallback((event, data)=>{\n        var _props_onNavigation;\n        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);\n        if (walkerRef.current && !event.isDefaultPrevented()) {\n            navigate(data, walkerRef.current);\n        }\n    });\n    return {\n        treeType: 'nested',\n        ...useRootTree({\n            ...props,\n            openItems,\n            checkedItems,\n            onOpenChange: handleOpenChange,\n            onNavigation: handleNavigation,\n            onCheckedChange: handleCheckedChange\n        }, useMergedRefs(ref, initializeWalker))\n    };\n}\nfunction useNestedSubtree(props, ref) {\n    if (useTreeContext_unstable((ctx)=>ctx.treeType) === 'flat' && process.env.NODE_ENV === 'development') {\n        // eslint-disable-next-line no-console\n        console.error(`@fluentui/react-tree [useTree]:\nError: <Tree> component cannot be used inside of a nested <FlatTree> component and vice versa.`);\n    }\n    return useSubtree(props, ref);\n}\n"],"names":["useTree_unstable","props","ref","isRoot","React","useContext","SubtreeContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","useControllableOpenItems","checkedItems","useNestedCheckedItems","navigate","initialize","useTreeNavigation","walkerRef","useRef","targetDocument","useFluent_unstable","initializeWalker","useCallback","root","current","createHTMLElementWalker","treeItemFilter","handleOpenChange","useEventCallback","event","data","_props_onOpenChange","nextOpenItems","createNextOpenItems","onOpenChange","call","dangerouslyGetInternalSet_unstable","handleCheckedChange","_props_onCheckedChange","nextCheckedItems","createNextNestedCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","handleNavigation","_props_onNavigation","onNavigation","isDefaultPrevented","treeType","useRootTree","useMergedRefs","useTreeContext_unstable","ctx","process","env","NODE_ENV","console","error","useSubtree"],"mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;gCACyB;0CACc;mDACM;gCACrC;6BACH;4BACD;yCACa;gCACT;mCACG;qCACC;6BACK;AACjC,MAAMA,mBAAmB,CAACC,OAAOC;IACpC,MAAMC,SAASC,OAAMC,UAAU,CAACC,8BAAc,MAAMC;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOJ,SAASK,kBAAkBP,OAAOC,OAAOO,iBAAiBR,OAAOC;AAC5E;AACA,SAASM,kBAAkBP,KAAK,EAAEC,GAAG;IACjC,MAAM,CAACQ,WAAWC,aAAa,GAAGC,IAAAA,kDAAwB,EAACX;IAC3D,MAAMY,eAAeC,IAAAA,wDAAqB,EAACb;IAC3C,MAAM,EAAEc,QAAQ,EAAEC,UAAU,EAAE,GAAGC,IAAAA,oCAAiB;IAClD,MAAMC,YAAYd,OAAMe,MAAM;IAC9B,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAkB;IAC7C,MAAMC,mBAAmBlB,OAAMmB,WAAW,CAAC,CAACC;QACxC,IAAIA,QAAQJ,gBAAgB;YACxBF,UAAUO,OAAO,GAAGC,IAAAA,gDAAuB,EAACF,MAAMJ,gBAAgBO,8BAAc;YAChFX,WAAWE,UAAUO,OAAO;QAChC;IACJ,GAAG;QACCT;QACAI;KACH;IACD,MAAMQ,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QAC9C,IAAIC;QACJ,MAAMC,gBAAgBC,IAAAA,6CAAmB,EAACH,MAAMrB;QAC/CsB,CAAAA,sBAAsB/B,MAAMkC,YAAY,AAAD,MAAO,QAAQH,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBI,IAAI,CAACnC,OAAO6B,OAAO;YACpI,GAAGC,IAAI;YACPrB,WAAWuB,cAAcI,kCAAkC;QAC/D;QACA1B,aAAasB;IACjB;IACA,MAAMK,sBAAsBT,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QACjD,IAAIb,UAAUO,OAAO,EAAE;YACnB,IAAIc;YACJ,MAAMC,mBAAmBC,IAAAA,+DAA4B,EAACV,MAAMlB;YAC3D0B,CAAAA,yBAAyBtC,MAAMyC,eAAe,AAAD,MAAO,QAAQH,2BAA2B,KAAK,IAAI,KAAK,IAAIA,uBAAuBH,IAAI,CAACnC,OAAO6B,OAAO;gBAChJ,GAAGC,IAAI;gBACPlB,cAAc2B,iBAAiBG,kCAAkC;YACrE;QACJ;IACJ;IACA,MAAMC,mBAAmBf,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QAC9C,IAAIc;QACHA,CAAAA,sBAAsB5C,MAAM6C,YAAY,AAAD,MAAO,QAAQD,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBT,IAAI,CAACnC,OAAO6B,OAAOC;QACxI,IAAIb,UAAUO,OAAO,IAAI,CAACK,MAAMiB,kBAAkB,IAAI;YAClDhC,SAASgB,MAAMb,UAAUO,OAAO;QACpC;IACJ;IACA,OAAO;QACHuB,UAAU;QACV,GAAGC,IAAAA,wBAAW,EAAC;YACX,GAAGhD,KAAK;YACRS;YACAG;YACAsB,cAAcP;YACdkB,cAAcF;YACdF,iBAAiBJ;QACrB,GAAGY,IAAAA,6BAAa,EAAChD,KAAKoB,kBAAkB;IAC5C;AACJ;AACA,SAASb,iBAAiBR,KAAK,EAAEC,GAAG;IAChC,IAAIiD,IAAAA,oCAAuB,EAAC,CAACC,MAAMA,IAAIJ,QAAQ,MAAM,UAAUK,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACnG,sCAAsC;QACtCC,QAAQC,KAAK,CAAC,CAAC;8FACuE,CAAC;IAC3F;IACA,OAAOC,IAAAA,sBAAU,EAACzD,OAAOC;AAC7B"}
+{"version":3,"sources":["useTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useTreeNavigation } from './useTreeNavigation';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nexport const useTree_unstable = (props, ref)=>{\n    const isRoot = React.useContext(SubtreeContext) === undefined;\n    // as level is static, this doesn't break rule of hooks\n    // and if this becomes an issue later on, this can be easily converted\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);\n};\nfunction useNestedRootTree(props, ref) {\n    const [openItems, setOpenItems] = useControllableOpenItems(props);\n    const checkedItems = useNestedCheckedItems(props);\n    const { navigate, initialize } = useTreeNavigation();\n    const walkerRef = React.useRef();\n    const { targetDocument } = useFluent_unstable();\n    const initializeWalker = React.useCallback((root)=>{\n        if (root && targetDocument) {\n            walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n            initialize(walkerRef.current);\n        }\n    }, [\n        initialize,\n        targetDocument\n    ]);\n    const handleOpenChange = useEventCallback((event, data)=>{\n        var _props_onOpenChange;\n        const nextOpenItems = createNextOpenItems(data, openItems);\n        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {\n            ...data,\n            openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n        });\n        setOpenItems(nextOpenItems);\n    });\n    const handleCheckedChange = useEventCallback((event, data)=>{\n        if (walkerRef.current) {\n            var _props_onCheckedChange;\n            const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n            (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, {\n                ...data,\n                checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()\n            });\n        }\n    });\n    const handleNavigation = useEventCallback((event, data)=>{\n        var _props_onNavigation;\n        (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);\n        if (walkerRef.current && !event.isDefaultPrevented()) {\n            navigate(data, walkerRef.current);\n        }\n    });\n    return {\n        treeType: 'nested',\n        ...useRootTree({\n            ...props,\n            openItems,\n            checkedItems,\n            onOpenChange: handleOpenChange,\n            onNavigation: handleNavigation,\n            onCheckedChange: handleCheckedChange\n        }, useMergedRefs(ref, initializeWalker))\n    };\n}\nfunction useNestedSubtree(props, ref) {\n    if (process.env.NODE_ENV === 'development') {\n        // this doesn't break rule of hooks, as environment is a static value\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);\n        if (treeType === 'flat') {\n            throw new Error(`@fluentui/react-tree [useTree]:\nSubtrees are not allowed in a FlatTree!\nYou cannot use a <Tree> component inside of a <FlatTree> component!`);\n        }\n    }\n    return useSubtree(props, ref);\n}\n"],"names":["useTree_unstable","props","ref","isRoot","React","useContext","SubtreeContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","useControllableOpenItems","checkedItems","useNestedCheckedItems","navigate","initialize","useTreeNavigation","walkerRef","useRef","targetDocument","useFluent_unstable","initializeWalker","useCallback","root","current","createHTMLElementWalker","treeItemFilter","handleOpenChange","useEventCallback","event","data","_props_onOpenChange","nextOpenItems","createNextOpenItems","onOpenChange","call","dangerouslyGetInternalSet_unstable","handleCheckedChange","_props_onCheckedChange","nextCheckedItems","createNextNestedCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","handleNavigation","_props_onNavigation","onNavigation","isDefaultPrevented","treeType","useRootTree","useMergedRefs","process","env","NODE_ENV","useTreeContext_unstable","ctx","Error","useSubtree"],"mappings":"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"}

package/lib-commonjs/components/TreeItem/useTreeItem.js

@@ -33,16 +33,12 @@ function useTreeItem_unstable(props, ref) {
     var _props_value;
     const value = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : internalValue;
     const { onClick, onKeyDown, onMouseOver, onFocus, onMouseOut, onBlur, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;
-    const [isActionsVisible, setActionsVisible] = _react.useState(false);
-    const [isAsideVisible, setAsideVisible] = _react.useState(true);
-    const handleActionsRef = _react.useCallback((actionsElement)=>{
-        setAsideVisible(actionsElement === null);
-    }, []);
     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 treeItemRef = _react.useRef(null);
     const open = (0, _contexts.useTreeContext_unstable)((ctx)=>{
         var _props_open;
         return (_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value);
@@ -186,38 +182,6 @@ function useTreeItem_unstable(props, ref) {
             });
         }
     });
-    const setActionsVisibleIfNotFromSubtree = _react.useCallback((event)=>{
-        const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactutilities.elementContains)(subtreeRef.current, event.target));
-        if (!isTargetFromSubtree) {
-            setActionsVisible(true);
-        }
-    }, []);
-    const setActionsInvisibleIfNotFromSubtree = _react.useCallback((event)=>{
-        const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactutilities.elementContains)(subtreeRef.current, event.target));
-        const isRelatedTargetFromActions = Boolean(actionsRef.current && (0, _reactutilities.elementContains)(actionsRef.current, event.relatedTarget));
-        if (isRelatedTargetFromActions) {
-            return setActionsVisible(true);
-        }
-        if (!isTargetFromSubtree) {
-            return setActionsVisible(false);
-        }
-    }, []);
-    const handleMouseOver = (0, _reactutilities.useEventCallback)((event)=>{
-        onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(event);
-        setActionsVisibleIfNotFromSubtree(event);
-    });
-    const handleFocus = (0, _reactutilities.useEventCallback)((event)=>{
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-        setActionsVisibleIfNotFromSubtree(event);
-    });
-    const handleMouseOut = (0, _reactutilities.useEventCallback)((event)=>{
-        onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(event);
-        setActionsInvisibleIfNotFromSubtree(event);
-    });
-    const handleBlur = (0, _reactutilities.useEventCallback)((event)=>{
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-        setActionsInvisibleIfNotFromSubtree(event);
-    });
     const handleChange = (0, _reactutilities.useEventCallback)((event)=>{
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
         if (event.isDefaultPrevented()) {
@@ -245,19 +209,22 @@ function useTreeItem_unstable(props, ref) {
         layoutRef,
         selectionRef,
         expandIconRef,
-        actionsRef: (0, _reactutilities.useMergedRefs)(handleActionsRef, actionsRef),
+        treeItemRef,
+        actionsRef,
         itemType,
         level,
         components: {
             root: 'div'
         },
-        isAsideVisible,
-        isActionsVisible,
+        // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false
+        isAsideVisible: false,
+        // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false
+        isActionsVisible: false,
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, {
             tabIndex: -1,
             [_getTreeItemValueFromElement.dataTreeItemValueAttrName]: value,
             ...rest,
-            ref,
+            ref: (0, _reactutilities.useMergedRefs)(ref, treeItemRef),
             role: 'treeitem',
             'aria-level': level,
             'aria-checked': selectionMode === 'multiselect' ? checked : undefined,
@@ -268,10 +235,6 @@ function useTreeItem_unstable(props, ref) {
             'aria-expanded': itemType === 'branch' ? open : undefined,
             onClick: handleClick,
             onKeyDown: handleKeyDown,
-            onMouseOver: handleMouseOver,
-            onFocus: handleFocus,
-            onMouseOut: handleMouseOut,
-            onBlur: handleBlur,
             onChange: handleChange
         }), {
             elementType: 'div'

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getIntrinsicElementProps, useId, useMergedRefs, useEventCallback, slot, elementContains } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\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 */ export function useTreeItem_unstable(props, ref) {\n    const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);\n    if (treeType === 'flat') {\n        warnIfNoProperPropsFlatTreeItem(props);\n    }\n    const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);\n    const { level: contextLevel } = useSubtreeContext_unstable();\n    const parentValue = useTreeItemContext_unstable((ctx)=>{\n        var _props_parentValue;\n        return (_props_parentValue = props.parentValue) !== null && _props_parentValue !== void 0 ? _props_parentValue : ctx.value;\n    });\n    // note, if the value is not externally provided,\n    // then selection and expansion will not work properly\n    const internalValue = useId('fuiTreeItemValue-');\n    var _props_value;\n    const value = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : internalValue;\n    const { onClick, onKeyDown, onMouseOver, onFocus, onMouseOut, onBlur, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n    const [isActionsVisible, setActionsVisible] = React.useState(false);\n    const [isAsideVisible, setAsideVisible] = React.useState(true);\n    const handleActionsRef = React.useCallback((actionsElement)=>{\n        setAsideVisible(actionsElement === null);\n    }, []);\n    const actionsRef = React.useRef(null);\n    const expandIconRef = React.useRef(null);\n    const layoutRef = React.useRef(null);\n    const subtreeRef = React.useRef(null);\n    const selectionRef = React.useRef(null);\n    const open = useTreeContext_unstable((ctx)=>{\n        var _props_open;\n        return (_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value);\n    });\n    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n    const checked = useTreeContext_unstable((ctx)=>{\n        var _ctx_checkedItems_get;\n        return (_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false;\n    });\n    const handleClick = useEventCallback((event)=>{\n        onClick === null || onClick === void 0 ? void 0 : onClick(event);\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n        const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target);\n        if (isEventFromActions) {\n            return;\n        }\n        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n        if (isEventFromSubtree) {\n            return;\n        }\n        const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target);\n        if (isEventFromSelection) {\n            return;\n        }\n        const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);\n        ReactDOM.unstable_batchedUpdates(()=>{\n            var _props_onOpenChange;\n            const data = {\n                event,\n                value,\n                open: !open,\n                target: event.currentTarget,\n                type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click\n            };\n            (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n            requestTreeResponse({\n                ...data,\n                itemType,\n                requestType: 'open'\n            });\n            requestTreeResponse({\n                ...data,\n                itemType,\n                parentValue,\n                requestType: 'navigate',\n                type: treeDataTypes.Click\n            });\n        });\n    });\n    const handleKeyDown = useEventCallback((event)=>{\n        onKeyDown === null || onKeyDown === void 0 ? void 0 : 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                    var _selectionRef_current;\n                    (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();\n                    // Prevents the page from scrolling down when the spacebar is pressed\n                    event.preventDefault();\n                }\n                return;\n            case treeDataTypes.Enter:\n                {\n                    return event.currentTarget.click();\n                }\n            case treeDataTypes.End:\n            case treeDataTypes.Home:\n            case treeDataTypes.ArrowUp:\n            case treeDataTypes.ArrowDown:\n                return requestTreeResponse({\n                    requestType: 'navigate',\n                    event,\n                    value,\n                    itemType,\n                    parentValue,\n                    type: event.key,\n                    target: event.currentTarget\n                });\n            case treeDataTypes.ArrowLeft:\n                {\n                    // do not navigate to parent if the item is on the top level\n                    if (level === 1 && !open) {\n                        return;\n                    }\n                    const data = {\n                        value,\n                        event,\n                        open: !open,\n                        type: event.key,\n                        target: event.currentTarget\n                    };\n                    if (open) {\n                        var _props_onOpenChange;\n                        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n                    }\n                    return requestTreeResponse({\n                        ...data,\n                        itemType,\n                        parentValue,\n                        requestType: open ? 'open' : 'navigate'\n                    });\n                }\n            case treeDataTypes.ArrowRight:\n                // do not navigate or open if the item is a leaf\n                if (itemType === 'leaf') {\n                    return;\n                }\n                const data = {\n                    value,\n                    event,\n                    open: !open,\n                    type: event.key,\n                    target: event.currentTarget\n                };\n                if (!open) {\n                    var _props_onOpenChange1;\n                    (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);\n                }\n                return requestTreeResponse({\n                    ...data,\n                    itemType,\n                    parentValue,\n                    requestType: open ? 'navigate' : 'open'\n                });\n        }\n        const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n        if (isTypeAheadCharacter) {\n            requestTreeResponse({\n                requestType: 'navigate',\n                event,\n                target: event.currentTarget,\n                value,\n                itemType,\n                type: treeDataTypes.TypeAhead,\n                parentValue\n            });\n        }\n    });\n    const setActionsVisibleIfNotFromSubtree = React.useCallback((event)=>{\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        if (!isTargetFromSubtree) {\n            setActionsVisible(true);\n        }\n    }, []);\n    const setActionsInvisibleIfNotFromSubtree = React.useCallback((event)=>{\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        const isRelatedTargetFromActions = Boolean(actionsRef.current && elementContains(actionsRef.current, event.relatedTarget));\n        if (isRelatedTargetFromActions) {\n            return setActionsVisible(true);\n        }\n        if (!isTargetFromSubtree) {\n            return setActionsVisible(false);\n        }\n    }, []);\n    const handleMouseOver = useEventCallback((event)=>{\n        onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(event);\n        setActionsVisibleIfNotFromSubtree(event);\n    });\n    const handleFocus = useEventCallback((event)=>{\n        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);\n        setActionsVisibleIfNotFromSubtree(event);\n    });\n    const handleMouseOut = useEventCallback((event)=>{\n        onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(event);\n        setActionsInvisibleIfNotFromSubtree(event);\n    });\n    const handleBlur = useEventCallback((event)=>{\n        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);\n        setActionsInvisibleIfNotFromSubtree(event);\n    });\n    const handleChange = useEventCallback((event)=>{\n        onChange === null || onChange === void 0 ? void 0 : onChange(event);\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n        if (isEventFromSubtree) {\n            return;\n        }\n        requestTreeResponse({\n            requestType: 'selection',\n            event,\n            value,\n            itemType,\n            type: 'Change',\n            target: event.currentTarget,\n            checked: checked === 'mixed' ? true : !checked\n        });\n    });\n    return {\n        value,\n        open,\n        checked,\n        subtreeRef,\n        layoutRef,\n        selectionRef,\n        expandIconRef,\n        actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n        itemType,\n        level,\n        components: {\n            root: 'div'\n        },\n        isAsideVisible,\n        isActionsVisible,\n        root: slot.always(getIntrinsicElementProps(as, {\n            tabIndex: -1,\n            [dataTreeItemValueAttrName]: value,\n            ...rest,\n            ref,\n            role: 'treeitem',\n            'aria-level': level,\n            'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n            // aria-selected is required according to WAI-ARIA spec\n            // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n            // Casting: when selectionMode is 'single', checked is a boolean\n            'aria-selected': selectionMode === 'single' ? checked : 'false',\n            'aria-expanded': itemType === 'branch' ? open : undefined,\n            onClick: handleClick,\n            onKeyDown: handleKeyDown,\n            onMouseOver: handleMouseOver,\n            onFocus: handleFocus,\n            onMouseOut: handleMouseOut,\n            onBlur: handleBlur,\n            onChange: handleChange\n        }), {\n            elementType: 'div'\n        })\n    };\n}\nfunction warnIfNoProperPropsFlatTreeItem(props) {\n    if (process.env.NODE_ENV !== 'production') {\n        if (props['aria-posinset'] === undefined || props['aria-setsize'] === undefined || props['aria-level'] === undefined || props.parentValue === undefined && props['aria-level'] !== 1) {\n            // eslint-disable-next-line no-console\n            console.error(`@fluentui/react-tree [${useTreeItem_unstable.name}]:\nA flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\nand \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n- \"aria-posinset\": the position of this treeitem in the current level of the tree.\n- \"aria-setsize\": the number of siblings in this level of the tree.\n- \"aria-level\": the current level of the treeitem.\n- \"parentValue\": the \"value\" property of the parent item of this item.`);\n        }\n    }\n}\n"],"names":["useTreeItem_unstable","props","ref","treeType","useTreeContext_unstable","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","useSubtreeContext_unstable","parentValue","useTreeItemContext_unstable","_props_parentValue","value","internalValue","useId","_props_value","onClick","onKeyDown","onMouseOver","onFocus","onMouseOut","onBlur","onChange","as","itemType","rest","isActionsVisible","setActionsVisible","React","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","_props_open","openItems","has","selectionMode","checked","_ctx_checkedItems_get","checkedItems","get","handleClick","useEventCallback","event","isDefaultPrevented","isEventFromActions","current","elementContains","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","ReactDOM","unstable_batchedUpdates","_props_onOpenChange","data","currentTarget","type","treeDataTypes","ExpandIconClick","Click","onOpenChange","call","requestType","handleKeyDown","key","Space","_selectionRef_current","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","_props_onOpenChange1","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","setActionsVisibleIfNotFromSubtree","isTargetFromSubtree","Boolean","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","handleMouseOver","handleFocus","handleMouseOut","handleBlur","handleChange","useMergedRefs","components","root","slot","always","getIntrinsicElementProps","tabIndex","dataTreeItemValueAttrName","role","undefined","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"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"}
+{"version":3,"sources":["useTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getIntrinsicElementProps, useId, useEventCallback, slot, elementContains, useMergedRefs } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\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 */ export function useTreeItem_unstable(props, ref) {\n    const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);\n    if (treeType === 'flat') {\n        warnIfNoProperPropsFlatTreeItem(props);\n    }\n    const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);\n    const { level: contextLevel } = useSubtreeContext_unstable();\n    const parentValue = useTreeItemContext_unstable((ctx)=>{\n        var _props_parentValue;\n        return (_props_parentValue = props.parentValue) !== null && _props_parentValue !== void 0 ? _props_parentValue : ctx.value;\n    });\n    // note, if the value is not externally provided,\n    // then selection and expansion will not work properly\n    const internalValue = useId('fuiTreeItemValue-');\n    var _props_value;\n    const value = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : internalValue;\n    const { onClick, onKeyDown, onMouseOver, onFocus, onMouseOut, onBlur, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n    const actionsRef = React.useRef(null);\n    const expandIconRef = React.useRef(null);\n    const layoutRef = React.useRef(null);\n    const subtreeRef = React.useRef(null);\n    const selectionRef = React.useRef(null);\n    const treeItemRef = React.useRef(null);\n    const open = useTreeContext_unstable((ctx)=>{\n        var _props_open;\n        return (_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value);\n    });\n    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n    const checked = useTreeContext_unstable((ctx)=>{\n        var _ctx_checkedItems_get;\n        return (_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false;\n    });\n    const handleClick = useEventCallback((event)=>{\n        onClick === null || onClick === void 0 ? void 0 : onClick(event);\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n        const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target);\n        if (isEventFromActions) {\n            return;\n        }\n        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n        if (isEventFromSubtree) {\n            return;\n        }\n        const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target);\n        if (isEventFromSelection) {\n            return;\n        }\n        const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);\n        ReactDOM.unstable_batchedUpdates(()=>{\n            var _props_onOpenChange;\n            const data = {\n                event,\n                value,\n                open: !open,\n                target: event.currentTarget,\n                type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click\n            };\n            (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n            requestTreeResponse({\n                ...data,\n                itemType,\n                requestType: 'open'\n            });\n            requestTreeResponse({\n                ...data,\n                itemType,\n                parentValue,\n                requestType: 'navigate',\n                type: treeDataTypes.Click\n            });\n        });\n    });\n    const handleKeyDown = useEventCallback((event)=>{\n        onKeyDown === null || onKeyDown === void 0 ? void 0 : 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                    var _selectionRef_current;\n                    (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();\n                    // Prevents the page from scrolling down when the spacebar is pressed\n                    event.preventDefault();\n                }\n                return;\n            case treeDataTypes.Enter:\n                {\n                    return event.currentTarget.click();\n                }\n            case treeDataTypes.End:\n            case treeDataTypes.Home:\n            case treeDataTypes.ArrowUp:\n            case treeDataTypes.ArrowDown:\n                return requestTreeResponse({\n                    requestType: 'navigate',\n                    event,\n                    value,\n                    itemType,\n                    parentValue,\n                    type: event.key,\n                    target: event.currentTarget\n                });\n            case treeDataTypes.ArrowLeft:\n                {\n                    // do not navigate to parent if the item is on the top level\n                    if (level === 1 && !open) {\n                        return;\n                    }\n                    const data = {\n                        value,\n                        event,\n                        open: !open,\n                        type: event.key,\n                        target: event.currentTarget\n                    };\n                    if (open) {\n                        var _props_onOpenChange;\n                        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n                    }\n                    return requestTreeResponse({\n                        ...data,\n                        itemType,\n                        parentValue,\n                        requestType: open ? 'open' : 'navigate'\n                    });\n                }\n            case treeDataTypes.ArrowRight:\n                // do not navigate or open if the item is a leaf\n                if (itemType === 'leaf') {\n                    return;\n                }\n                const data = {\n                    value,\n                    event,\n                    open: !open,\n                    type: event.key,\n                    target: event.currentTarget\n                };\n                if (!open) {\n                    var _props_onOpenChange1;\n                    (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);\n                }\n                return requestTreeResponse({\n                    ...data,\n                    itemType,\n                    parentValue,\n                    requestType: open ? 'navigate' : 'open'\n                });\n        }\n        const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n        if (isTypeAheadCharacter) {\n            requestTreeResponse({\n                requestType: 'navigate',\n                event,\n                target: event.currentTarget,\n                value,\n                itemType,\n                type: treeDataTypes.TypeAhead,\n                parentValue\n            });\n        }\n    });\n    const handleChange = useEventCallback((event)=>{\n        onChange === null || onChange === void 0 ? void 0 : onChange(event);\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n        if (isEventFromSubtree) {\n            return;\n        }\n        requestTreeResponse({\n            requestType: 'selection',\n            event,\n            value,\n            itemType,\n            type: 'Change',\n            target: event.currentTarget,\n            checked: checked === 'mixed' ? true : !checked\n        });\n    });\n    return {\n        value,\n        open,\n        checked,\n        subtreeRef,\n        layoutRef,\n        selectionRef,\n        expandIconRef,\n        treeItemRef,\n        actionsRef,\n        itemType,\n        level,\n        components: {\n            root: 'div'\n        },\n        // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false\n        isAsideVisible: false,\n        // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false\n        isActionsVisible: false,\n        root: slot.always(getIntrinsicElementProps(as, {\n            tabIndex: -1,\n            [dataTreeItemValueAttrName]: value,\n            ...rest,\n            ref: useMergedRefs(ref, treeItemRef),\n            role: 'treeitem',\n            'aria-level': level,\n            'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n            // aria-selected is required according to WAI-ARIA spec\n            // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n            // Casting: when selectionMode is 'single', checked is a boolean\n            'aria-selected': selectionMode === 'single' ? checked : 'false',\n            'aria-expanded': itemType === 'branch' ? open : undefined,\n            onClick: handleClick,\n            onKeyDown: handleKeyDown,\n            onChange: handleChange\n        }), {\n            elementType: 'div'\n        })\n    };\n}\nfunction warnIfNoProperPropsFlatTreeItem(props) {\n    if (process.env.NODE_ENV !== 'production') {\n        if (props['aria-posinset'] === undefined || props['aria-setsize'] === undefined || props['aria-level'] === undefined || props.parentValue === undefined && props['aria-level'] !== 1) {\n            // eslint-disable-next-line no-console\n            console.error(`@fluentui/react-tree [${useTreeItem_unstable.name}]:\nA flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\nand \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n- \"aria-posinset\": the position of this treeitem in the current level of the tree.\n- \"aria-setsize\": the number of siblings in this level of the tree.\n- \"aria-level\": the current level of the treeitem.\n- \"parentValue\": the \"value\" property of the parent item of this item.`);\n        }\n    }\n}\n"],"names":["useTreeItem_unstable","props","ref","treeType","useTreeContext_unstable","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","useSubtreeContext_unstable","parentValue","useTreeItemContext_unstable","_props_parentValue","value","internalValue","useId","_props_value","onClick","onKeyDown","onMouseOver","onFocus","onMouseOut","onBlur","onChange","as","itemType","rest","actionsRef","React","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","treeItemRef","open","_props_open","openItems","has","selectionMode","checked","_ctx_checkedItems_get","checkedItems","get","handleClick","useEventCallback","event","isDefaultPrevented","isEventFromActions","current","elementContains","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","ReactDOM","unstable_batchedUpdates","_props_onOpenChange","data","currentTarget","type","treeDataTypes","ExpandIconClick","Click","onOpenChange","call","requestType","handleKeyDown","key","Space","_selectionRef_current","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","_props_onOpenChange1","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleChange","components","root","isAsideVisible","isActionsVisible","slot","always","getIntrinsicElementProps","tabIndex","dataTreeItemValueAttrName","useMergedRefs","role","undefined","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"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"}

package/lib-commonjs/components/TreeItem/useTreeItemContextValues.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "useTreeItemContextValues_unstable", {
     }
 });
 function useTreeItemContextValues_unstable(state) {
-    const { value, itemType, layoutRef, subtreeRef, open, expandIconRef, actionsRef, isActionsVisible, isAsideVisible, selectionRef, checked } = state;
+    const { value, itemType, layoutRef, subtreeRef, open, expandIconRef, actionsRef, treeItemRef, isActionsVisible, isAsideVisible, selectionRef, checked } = state;
     /**
    * This context is created with "@fluentui/react-context-selector",
    * there is no sense to memoize it
@@ -24,6 +24,7 @@ function useTreeItemContextValues_unstable(state) {
         isActionsVisible,
         isAsideVisible,
         actionsRef,
+        treeItemRef,
         expandIconRef
     };
     return {

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemContextValues.js"],"sourcesContent":["export function useTreeItemContextValues_unstable(state) {\n    const { value, itemType, layoutRef, subtreeRef, open, expandIconRef, actionsRef, isActionsVisible, isAsideVisible, selectionRef, checked } = state;\n    /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */ const treeItem = {\n        value,\n        checked,\n        itemType,\n        layoutRef,\n        subtreeRef,\n        open,\n        selectionRef,\n        isActionsVisible,\n        isAsideVisible,\n        actionsRef,\n        expandIconRef\n    };\n    return {\n        treeItem\n    };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","expandIconRef","actionsRef","isActionsVisible","isAsideVisible","selectionRef","checked","treeItem"],"mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA,kCAAkCC,KAAK;IACnD,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,UAAU,EAAEC,IAAI,EAAEC,aAAa,EAAEC,UAAU,EAAEC,gBAAgB,EAAEC,cAAc,EAAEC,YAAY,EAAEC,OAAO,EAAE,GAAGX;IAC7I;;;GAGD,GAAG,MAAMY,WAAW;QACfX;QACAU;QACAT;QACAC;QACAC;QACAC;QACAK;QACAF;QACAC;QACAF;QACAD;IACJ;IACA,OAAO;QACHM;IACJ;AACJ"}
+{"version":3,"sources":["useTreeItemContextValues.js"],"sourcesContent":["export function useTreeItemContextValues_unstable(state) {\n    const { value, itemType, layoutRef, subtreeRef, open, expandIconRef, actionsRef, treeItemRef, // eslint-disable-next-line deprecation/deprecation\n    isActionsVisible, // eslint-disable-next-line deprecation/deprecation\n    isAsideVisible, selectionRef, checked } = state;\n    /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */ const treeItem = {\n        value,\n        checked,\n        itemType,\n        layoutRef,\n        subtreeRef,\n        open,\n        selectionRef,\n        isActionsVisible,\n        isAsideVisible,\n        actionsRef,\n        treeItemRef,\n        expandIconRef\n    };\n    return {\n        treeItem\n    };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","expandIconRef","actionsRef","treeItemRef","isActionsVisible","isAsideVisible","selectionRef","checked","treeItem"],"mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA,kCAAkCC,KAAK;IACnD,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,UAAU,EAAEC,IAAI,EAAEC,aAAa,EAAEC,UAAU,EAAEC,WAAW,EAC5FC,gBAAgB,EAChBC,cAAc,EAAEC,YAAY,EAAEC,OAAO,EAAE,GAAGZ;IAC1C;;;GAGD,GAAG,MAAMa,WAAW;QACfZ;QACAW;QACAV;QACAC;QACAC;QACAC;QACAM;QACAF;QACAC;QACAH;QACAC;QACAF;IACJ;IACA,OAAO;QACHO;IACJ;AACJ"}

package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js

@@ -20,7 +20,7 @@ const useTreeItemLayout_unstable = (props, ref)=>{
     const { main, iconAfter, iconBefore } = props;
     const layoutRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.layoutRef);
     const selectionMode = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.selectionMode);
-    const [isActionsVisibleExternal, actionsShorthand] = (0, _reactutilities.isResolvedShorthand)(props.actions) ? [
+    const [isActionsVisibleFromProps, actionsShorthand] = (0, _reactutilities.isResolvedShorthand)(props.actions) ? [
         props.actions.visible,
         {
             ...props.actions,
@@ -30,13 +30,46 @@ const useTreeItemLayout_unstable = (props, ref)=>{
         undefined,
         props.actions
     ];
-    const isActionsVisible = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.isActionsVisible) || isActionsVisibleExternal;
-    const isAsideVisible = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.isAsideVisible);
+    const [isActionsVisible, setIsActionsVisible] = (0, _reactutilities.useControllableState)({
+        state: isActionsVisibleFromProps,
+        initialState: false
+    });
     const selectionRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.selectionRef);
     const expandIconRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.expandIconRef);
     const actionsRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.actionsRef);
+    const actionsRefInternal = _react.useRef(null);
+    const treeItemRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.treeItemRef);
+    const subtreeRef = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.subtreeRef);
     const checked = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.checked);
     const isBranch = (0, _contexts.useTreeItemContext_unstable)((ctx)=>ctx.itemType === 'branch');
+    // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change
+    assertIsRefObject(treeItemRef);
+    // FIXME: Asserting is required here, as converting this to RefObject on context type would be a breaking change
+    assertIsRefObject(subtreeRef);
+    const setActionsVisibleIfNotFromSubtree = _react.useCallback((event)=>{
+        const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactutilities.elementContains)(subtreeRef.current, event.target));
+        if (!isTargetFromSubtree) {
+            setIsActionsVisible(true);
+        }
+    }, [
+        subtreeRef,
+        setIsActionsVisible
+    ]);
+    const setActionsInvisibleIfNotFromSubtree = _react.useCallback((event)=>{
+        const isRelatedTargetFromActions = Boolean(actionsRefInternal.current && (0, _reactutilities.elementContains)(actionsRefInternal.current, event.relatedTarget));
+        if (isRelatedTargetFromActions) {
+            setIsActionsVisible(true);
+            return;
+        }
+        const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactutilities.elementContains)(subtreeRef.current, event.target));
+        if (!isTargetFromSubtree) {
+            setIsActionsVisible(false);
+            return;
+        }
+    }, [
+        subtreeRef,
+        setIsActionsVisible
+    ]);
     const expandIcon = _reactutilities.slot.optional(props.expandIcon, {
         renderByDefault: isBranch,
         defaultProps: {
@@ -60,10 +93,45 @@ const useTreeItemLayout_unstable = (props, ref)=>{
         },
         elementType: 'div'
     }) : undefined;
-    const actionsRefs = (0, _reactutilities.useMergedRefs)(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef);
+    const actionsRefs = (0, _reactutilities.useMergedRefs)(actions === null || actions === void 0 ? void 0 : actions.ref, actionsRef, actionsRefInternal);
+    const handleActionsBlur = (0, _reactutilities.useEventCallback)((event)=>{
+        if ((0, _reactutilities.isResolvedShorthand)(actionsShorthand)) {
+            var _actionsShorthand_onBlur;
+            (_actionsShorthand_onBlur = actionsShorthand.onBlur) === null || _actionsShorthand_onBlur === void 0 ? void 0 : _actionsShorthand_onBlur.call(actionsShorthand, event);
+        }
+        const isRelatedTargetFromActions = Boolean((0, _reactutilities.elementContains)(event.currentTarget, event.relatedTarget));
+        setIsActionsVisible(isRelatedTargetFromActions);
+    });
     if (actions) {
         actions.ref = actionsRefs;
+        actions.onBlur = handleActionsBlur;
     }
+    const hasActions = Boolean(actionsShorthand);
+    _react.useEffect(()=>{
+        if (treeItemRef.current && hasActions && isActionsVisibleFromProps === undefined) {
+            const treeItemElement = treeItemRef.current;
+            const handleMouseOver = setActionsVisibleIfNotFromSubtree;
+            const handleMouseOut = setActionsInvisibleIfNotFromSubtree;
+            const handleFocus = setActionsVisibleIfNotFromSubtree;
+            const handleBlur = setActionsInvisibleIfNotFromSubtree;
+            treeItemElement.addEventListener('mouseover', handleMouseOver);
+            treeItemElement.addEventListener('mouseout', handleMouseOut);
+            treeItemElement.addEventListener('focus', handleFocus);
+            treeItemElement.addEventListener('blur', handleBlur);
+            return ()=>{
+                treeItemElement.removeEventListener('mouseover', handleMouseOver);
+                treeItemElement.removeEventListener('mouseout', handleMouseOut);
+                treeItemElement.removeEventListener('focus', handleFocus);
+                treeItemElement.removeEventListener('blur', handleBlur);
+            };
+        }
+    }, [
+        hasActions,
+        treeItemRef,
+        isActionsVisibleFromProps,
+        setActionsVisibleIfNotFromSubtree,
+        setActionsInvisibleIfNotFromSubtree
+    ]);
     return {
         components: {
             root: 'div',
@@ -103,7 +171,7 @@ const useTreeItemLayout_unstable = (props, ref)=>{
             },
             elementType: 'div'
         }),
-        aside: isAsideVisible ? _reactutilities.slot.optional(props.aside, {
+        aside: !isActionsVisible ? _reactutilities.slot.optional(props.aside, {
             defaultProps: {
                 'aria-hidden': true
             },
@@ -123,3 +191,13 @@ const useTreeItemLayout_unstable = (props, ref)=>{
         })
     };
 };
+function assertIsRefObject(ref) {
+    if (process.env.NODE_ENV !== 'production') {
+        if (typeof ref !== 'object' || ref === null || !('current' in ref)) {
+            throw new Error(`
+        @fluentui/react-tree [${useTreeItemLayout_unstable.name}]:
+        Internal Error: contextual ref is not a RefObject! Please report this bug immediately, as contextual refs should be RefObjects.
+      `);
+        }
+    }
+}