@fluentui/react-tree 9.12.0 → 9.12.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (155) hide show
  1. package/CHANGELOG.md +42 -2
  2. package/lib/FlatTree.js.map +1 -1
  3. package/lib/FlatTreeItem.js.map +1 -1
  4. package/lib/Tree.js.map +1 -1
  5. package/lib/TreeItem.js.map +1 -1
  6. package/lib/TreeItemLayout.js.map +1 -1
  7. package/lib/TreeItemPersonaLayout.js.map +1 -1
  8. package/lib/components/FlatTree/FlatTree.js.map +1 -1
  9. package/lib/components/FlatTree/FlatTree.types.js.map +1 -1
  10. package/lib/components/FlatTree/index.js.map +1 -1
  11. package/lib/components/FlatTree/renderFlatTree.js.map +1 -1
  12. package/lib/components/FlatTree/useFlatControllableCheckedItems.js.map +1 -1
  13. package/lib/components/FlatTree/useFlatTree.js.map +1 -1
  14. package/lib/components/FlatTree/useFlatTreeContextValues.js.map +1 -1
  15. package/lib/components/FlatTree/useFlatTreeStyles.styles.raw.js.map +1 -1
  16. package/lib/components/FlatTree/useHeadlessFlatTree.js.map +1 -1
  17. package/lib/components/FlatTreeItem/FlatTreeItem.js.map +1 -1
  18. package/lib/components/FlatTreeItem/FlatTreeItem.types.js.map +1 -1
  19. package/lib/components/FlatTreeItem/index.js.map +1 -1
  20. package/lib/components/Tree/Tree.js.map +1 -1
  21. package/lib/components/Tree/Tree.types.js.map +1 -1
  22. package/lib/components/Tree/index.js.map +1 -1
  23. package/lib/components/Tree/renderTree.js.map +1 -1
  24. package/lib/components/Tree/useNestedControllableCheckedItems.js.map +1 -1
  25. package/lib/components/Tree/useTree.js.map +1 -1
  26. package/lib/components/Tree/useTreeContextValues.js.map +1 -1
  27. package/lib/components/Tree/useTreeStyles.styles.raw.js.map +1 -1
  28. package/lib/components/TreeItem/TreeItem.js.map +1 -1
  29. package/lib/components/TreeItem/TreeItem.types.js.map +1 -1
  30. package/lib/components/TreeItem/index.js.map +1 -1
  31. package/lib/components/TreeItem/renderTreeItem.js.map +1 -1
  32. package/lib/components/TreeItem/useTreeItem.js.map +1 -1
  33. package/lib/components/TreeItem/useTreeItemContextValues.js.map +1 -1
  34. package/lib/components/TreeItem/useTreeItemStyles.styles.raw.js.map +1 -1
  35. package/lib/components/TreeItemChevron.js.map +1 -1
  36. package/lib/components/TreeItemLayout/TreeItemLayout.js.map +1 -1
  37. package/lib/components/TreeItemLayout/TreeItemLayout.types.js.map +1 -1
  38. package/lib/components/TreeItemLayout/index.js.map +1 -1
  39. package/lib/components/TreeItemLayout/renderTreeItemLayout.js.map +1 -1
  40. package/lib/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
  41. package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.raw.js.map +1 -1
  42. package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js.map +1 -1
  43. package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js.map +1 -1
  44. package/lib/components/TreeItemPersonaLayout/index.js.map +1 -1
  45. package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map +1 -1
  46. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js.map +1 -1
  47. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js.map +1 -1
  48. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.raw.js.map +1 -1
  49. package/lib/components/TreeProvider.js.map +1 -1
  50. package/lib/contexts/index.js.map +1 -1
  51. package/lib/contexts/subtreeContext.js.map +1 -1
  52. package/lib/contexts/treeContext.js.map +1 -1
  53. package/lib/contexts/treeItemContext.js.map +1 -1
  54. package/lib/hooks/useControllableOpenItems.js.map +1 -1
  55. package/lib/hooks/useFlatTreeNavigation.js.map +1 -1
  56. package/lib/hooks/useHTMLElementWalkerRef.js.map +1 -1
  57. package/lib/hooks/useRootTree.js.map +1 -1
  58. package/lib/hooks/useRovingTabIndexes.js.map +1 -1
  59. package/lib/hooks/useSubtree.js.map +1 -1
  60. package/lib/hooks/useTreeNavigation.js.map +1 -1
  61. package/lib/index.js.map +1 -1
  62. package/lib/utils/ImmutableMap.js +3 -3
  63. package/lib/utils/ImmutableMap.js.map +1 -1
  64. package/lib/utils/ImmutableSet.js +3 -3
  65. package/lib/utils/ImmutableSet.js.map +1 -1
  66. package/lib/utils/assert.js.map +1 -1
  67. package/lib/utils/createCheckedItems.js.map +1 -1
  68. package/lib/utils/createHTMLElementWalker.js.map +1 -1
  69. package/lib/utils/createHeadlessTree.js.map +1 -1
  70. package/lib/utils/flattenTree.js.map +1 -1
  71. package/lib/utils/getTreeItemValueFromElement.js.map +1 -1
  72. package/lib/utils/nextTypeAheadElement.js.map +1 -1
  73. package/lib/utils/normalizeOpenItems.js.map +1 -1
  74. package/lib/utils/tokens.js.map +1 -1
  75. package/lib/utils/treeItemFilter.js.map +1 -1
  76. package/lib-commonjs/FlatTree.js.map +1 -1
  77. package/lib-commonjs/FlatTreeItem.js.map +1 -1
  78. package/lib-commonjs/Tree.js.map +1 -1
  79. package/lib-commonjs/TreeItem.js.map +1 -1
  80. package/lib-commonjs/TreeItemLayout.js.map +1 -1
  81. package/lib-commonjs/TreeItemPersonaLayout.js.map +1 -1
  82. package/lib-commonjs/components/FlatTree/FlatTree.js.map +1 -1
  83. package/lib-commonjs/components/FlatTree/FlatTree.types.js.map +1 -1
  84. package/lib-commonjs/components/FlatTree/index.js.map +1 -1
  85. package/lib-commonjs/components/FlatTree/renderFlatTree.js.map +1 -1
  86. package/lib-commonjs/components/FlatTree/useFlatControllableCheckedItems.js.map +1 -1
  87. package/lib-commonjs/components/FlatTree/useFlatTree.js.map +1 -1
  88. package/lib-commonjs/components/FlatTree/useFlatTreeContextValues.js.map +1 -1
  89. package/lib-commonjs/components/FlatTree/useFlatTreeStyles.styles.js.map +1 -1
  90. package/lib-commonjs/components/FlatTree/useFlatTreeStyles.styles.raw.js.map +1 -1
  91. package/lib-commonjs/components/FlatTree/useHeadlessFlatTree.js.map +1 -1
  92. package/lib-commonjs/components/FlatTreeItem/FlatTreeItem.js.map +1 -1
  93. package/lib-commonjs/components/FlatTreeItem/FlatTreeItem.types.js.map +1 -1
  94. package/lib-commonjs/components/FlatTreeItem/index.js.map +1 -1
  95. package/lib-commonjs/components/Tree/Tree.js.map +1 -1
  96. package/lib-commonjs/components/Tree/Tree.types.js.map +1 -1
  97. package/lib-commonjs/components/Tree/index.js.map +1 -1
  98. package/lib-commonjs/components/Tree/renderTree.js.map +1 -1
  99. package/lib-commonjs/components/Tree/useNestedControllableCheckedItems.js.map +1 -1
  100. package/lib-commonjs/components/Tree/useTree.js.map +1 -1
  101. package/lib-commonjs/components/Tree/useTreeContextValues.js.map +1 -1
  102. package/lib-commonjs/components/Tree/useTreeStyles.styles.js.map +1 -1
  103. package/lib-commonjs/components/Tree/useTreeStyles.styles.raw.js.map +1 -1
  104. package/lib-commonjs/components/TreeItem/TreeItem.js.map +1 -1
  105. package/lib-commonjs/components/TreeItem/TreeItem.types.js.map +1 -1
  106. package/lib-commonjs/components/TreeItem/index.js.map +1 -1
  107. package/lib-commonjs/components/TreeItem/renderTreeItem.js.map +1 -1
  108. package/lib-commonjs/components/TreeItem/useTreeItem.js.map +1 -1
  109. package/lib-commonjs/components/TreeItem/useTreeItemContextValues.js.map +1 -1
  110. package/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.js.map +1 -1
  111. package/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.raw.js.map +1 -1
  112. package/lib-commonjs/components/TreeItemChevron.js.map +1 -1
  113. package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.js.map +1 -1
  114. package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.types.js.map +1 -1
  115. package/lib-commonjs/components/TreeItemLayout/index.js.map +1 -1
  116. package/lib-commonjs/components/TreeItemLayout/renderTreeItemLayout.js.map +1 -1
  117. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
  118. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map +1 -1
  119. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.raw.js.map +1 -1
  120. package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js.map +1 -1
  121. package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js.map +1 -1
  122. package/lib-commonjs/components/TreeItemPersonaLayout/index.js.map +1 -1
  123. package/lib-commonjs/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map +1 -1
  124. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js.map +1 -1
  125. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js.map +1 -1
  126. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map +1 -1
  127. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.raw.js.map +1 -1
  128. package/lib-commonjs/components/TreeProvider.js.map +1 -1
  129. package/lib-commonjs/contexts/index.js.map +1 -1
  130. package/lib-commonjs/contexts/subtreeContext.js.map +1 -1
  131. package/lib-commonjs/contexts/treeContext.js.map +1 -1
  132. package/lib-commonjs/contexts/treeItemContext.js.map +1 -1
  133. package/lib-commonjs/hooks/useControllableOpenItems.js.map +1 -1
  134. package/lib-commonjs/hooks/useFlatTreeNavigation.js.map +1 -1
  135. package/lib-commonjs/hooks/useHTMLElementWalkerRef.js.map +1 -1
  136. package/lib-commonjs/hooks/useRootTree.js.map +1 -1
  137. package/lib-commonjs/hooks/useRovingTabIndexes.js.map +1 -1
  138. package/lib-commonjs/hooks/useSubtree.js.map +1 -1
  139. package/lib-commonjs/hooks/useTreeNavigation.js.map +1 -1
  140. package/lib-commonjs/index.js.map +1 -1
  141. package/lib-commonjs/utils/ImmutableMap.js +3 -3
  142. package/lib-commonjs/utils/ImmutableMap.js.map +1 -1
  143. package/lib-commonjs/utils/ImmutableSet.js +3 -3
  144. package/lib-commonjs/utils/ImmutableSet.js.map +1 -1
  145. package/lib-commonjs/utils/assert.js.map +1 -1
  146. package/lib-commonjs/utils/createCheckedItems.js.map +1 -1
  147. package/lib-commonjs/utils/createHTMLElementWalker.js.map +1 -1
  148. package/lib-commonjs/utils/createHeadlessTree.js.map +1 -1
  149. package/lib-commonjs/utils/flattenTree.js.map +1 -1
  150. package/lib-commonjs/utils/getTreeItemValueFromElement.js.map +1 -1
  151. package/lib-commonjs/utils/nextTypeAheadElement.js.map +1 -1
  152. package/lib-commonjs/utils/normalizeOpenItems.js.map +1 -1
  153. package/lib-commonjs/utils/tokens.js.map +1 -1
  154. package/lib-commonjs/utils/treeItemFilter.js.map +1 -1
  155. package/package.json +14 -14
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/TreeItem/useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport {\n getIntrinsicElementProps,\n useId,\n useEventCallback,\n slot,\n elementContains,\n useMergedRefs,\n isHTMLElement,\n} from '@fluentui/react-utilities';\nimport type { TreeItemProps, TreeItemState, TreeItemValue } from './TreeItem.types';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport {\n useTreeContext_unstable,\n useSubtreeContext_unstable,\n useTreeItemContext_unstable,\n TreeContext,\n} from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { treeClassNames } from '../../Tree';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n 'use no memo';\n\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 navigationMode = useTreeContext_unstable(ctx => ctx.navigationMode ?? 'tree');\n const forceUpdateRovingTabIndex = useTreeContext_unstable(ctx => ctx.forceUpdateRovingTabIndex);\n const { level: contextLevel } = useSubtreeContext_unstable();\n const parentValue = useTreeItemContext_unstable(ctx => 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 const value: TreeItemValue = props.value ?? internalValue;\n\n const {\n onClick,\n onKeyDown,\n onChange,\n as = 'div',\n itemType = 'leaf',\n 'aria-level': level = contextLevel,\n 'aria-selected': ariaSelected,\n 'aria-expanded': ariaExpanded,\n ...rest\n } = props;\n\n const actionsRef = React.useRef<HTMLDivElement>(null);\n const expandIconRef = React.useRef<HTMLDivElement>(null);\n const layoutRef = React.useRef<HTMLDivElement>(null);\n const subtreeRef = React.useRef<HTMLDivElement>(null);\n const selectionRef = React.useRef<HTMLInputElement>(null);\n const treeItemRef = React.useRef<HTMLDivElement>(null);\n\n if (process.env.NODE_ENV !== 'production') {\n // This is acceptable since the NODE_ENV will not change during runtime\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const hasTreeContext = useHasParentContext(TreeContext);\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (hasTreeContext) {\n return;\n }\n\n if (treeItemRef.current?.querySelector(`.${treeClassNames.root}`)) {\n // eslint-disable-next-line no-console\n console.error(/** #__DE-INDENT__ */ `\n @fluentui/react-tree [useTreeItem]:\n <TreeItem> should be declared inside a <Tree> component.\n `);\n }\n }, [hasTreeContext]);\n }\n\n React.useEffect(() => {\n // When the tree item is mounted, we might need to update the roving tab index\n // in edge cases where the tree is empty and then populated\n forceUpdateRovingTabIndex?.();\n const treeItem = treeItemRef.current;\n return () => {\n // When the tree item is unmounted, we need to update the roving tab index\n // if the tree item is the current tab indexed item\n if (treeItem && treeItem.tabIndex === 0) {\n forceUpdateRovingTabIndex?.();\n }\n };\n }, [forceUpdateRovingTabIndex]);\n\n const open = useTreeContext_unstable(ctx => props.open ?? ctx.openItems.has(value));\n const getNextOpen = () => (itemType === 'branch' ? !open : open);\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n\n const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n const isEventFromActions = () => actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n\n const isEventFromSubtree = () => subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n\n const isEventFromSelection = () => selectionRef.current?.contains(event.target as Node);\n\n const isEventFromExpandIcon = expandIconRef.current?.contains(event.target as Node);\n\n if (isEventFromActions() || isEventFromSubtree() || isEventFromSelection()) {\n return;\n } else if (!isEventFromExpandIcon) {\n onClick?.(event);\n }\n if (event.isDefaultPrevented() || itemType === 'leaf') {\n return;\n }\n\n ReactDOM.unstable_batchedUpdates(() => {\n const data = {\n event,\n value,\n open: getNextOpen(),\n target: event.currentTarget,\n type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n } as const;\n props.onOpenChange?.(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\n const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n if (event.isDefaultPrevented() || !treeItemRef.current) {\n return;\n }\n const isEventFromTreeItem = event.currentTarget === event.target;\n const isEventFromActions = actionsRef.current && actionsRef.current.contains(event.target as Node);\n\n switch (event.key) {\n case Space: {\n if (!isEventFromTreeItem) {\n return;\n }\n if (selectionMode !== 'none') {\n selectionRef.current?.click();\n // Prevents the page from scrolling down when the spacebar is pressed\n event.preventDefault();\n }\n return;\n }\n case treeDataTypes.Enter: {\n if (!isEventFromTreeItem) {\n return;\n }\n return event.currentTarget.click();\n }\n case treeDataTypes.End:\n case treeDataTypes.Home:\n case treeDataTypes.ArrowUp: {\n if (!isEventFromTreeItem && !isEventFromActions) {\n return;\n }\n return requestTreeResponse({\n requestType: 'navigate',\n event,\n value,\n itemType,\n parentValue,\n type: event.key,\n target: event.currentTarget,\n });\n }\n case treeDataTypes.ArrowDown: {\n if (!isEventFromTreeItem && !isEventFromActions) {\n return;\n }\n if (isEventFromActions && (!isHTMLElement(event.target) || event.target.hasAttribute('aria-haspopup'))) {\n return;\n }\n return requestTreeResponse({\n requestType: 'navigate',\n event,\n value,\n itemType,\n parentValue,\n type: event.key,\n target: event.currentTarget,\n });\n }\n case treeDataTypes.ArrowLeft: {\n // arrow left with alt key is reserved for history navigation\n if (event.altKey) {\n return;\n }\n const data = {\n value,\n event,\n open: getNextOpen(),\n type: event.key,\n itemType,\n parentValue,\n target: event.currentTarget,\n } as const;\n\n if (isEventFromActions && navigationMode === 'treegrid') {\n requestTreeResponse({ ...data, requestType: 'navigate' });\n return;\n }\n if (!isEventFromTreeItem) {\n return;\n }\n // do not navigate to parent if the item is on the top level\n if (level === 1 && !open) {\n return;\n }\n if (open) {\n props.onOpenChange?.(event, data);\n }\n requestTreeResponse({ ...data, requestType: open ? 'open' : 'navigate' });\n return;\n }\n case treeDataTypes.ArrowRight: {\n // Ignore keyboard events that do not originate from the current tree item.\n if (!isEventFromTreeItem) {\n return;\n }\n // arrow right with alt key is reserved for history navigation\n if (event.altKey) {\n return;\n }\n const data = {\n value,\n event,\n open: getNextOpen(),\n type: event.key,\n target: event.currentTarget,\n } as const;\n\n if (itemType === 'branch' && !open) {\n props.onOpenChange?.(event, data);\n requestTreeResponse({ ...data, itemType, requestType: 'open' });\n } else {\n requestTreeResponse({ ...data, itemType, parentValue, requestType: 'navigate' });\n }\n return;\n }\n }\n // Ignore keyboard events that do not originate from the current tree item.\n if (!isEventFromTreeItem) {\n return;\n }\n const isTypeAheadCharacter =\n 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\n const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (isEventFromSubtree) {\n return;\n }\n requestTreeResponse({\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\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(\n getIntrinsicElementProps(as, {\n tabIndex: -1,\n [dataTreeItemValueAttrName]: value,\n role: 'treeitem',\n ...rest,\n ref: useMergedRefs(ref, treeItemRef),\n 'aria-level': level,\n 'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n 'aria-selected': ariaSelected !== undefined ? ariaSelected : selectionMode === 'single' ? !!checked : undefined,\n 'aria-expanded': ariaExpanded !== undefined ? ariaExpanded : itemType === 'branch' ? open : undefined,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onChange: handleChange,\n } as const),\n { elementType: 'div' },\n ),\n };\n}\n\nfunction warnIfNoProperPropsFlatTreeItem(\n props: Pick<TreeItemProps, 'aria-setsize' | 'aria-posinset' | 'aria-level' | 'parentValue'>,\n) {\n if (process.env.NODE_ENV !== 'production') {\n if (\n props['aria-posinset'] === undefined ||\n props['aria-setsize'] === undefined ||\n props['aria-level'] === undefined ||\n (props.parentValue === undefined && props['aria-level'] !== 1)\n ) {\n // eslint-disable-next-line no-console\n console.error(/** #__DE-INDENT__ */ `\n @fluentui/react-tree [${useTreeItem_unstable.name}]:\n A flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\n and \"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}\n"],"names":["React","ReactDOM","getIntrinsicElementProps","useId","useEventCallback","slot","elementContains","useMergedRefs","isHTMLElement","Space","treeDataTypes","useTreeContext_unstable","useSubtreeContext_unstable","useTreeItemContext_unstable","TreeContext","dataTreeItemValueAttrName","useHasParentContext","treeClassNames","useTreeItem_unstable","props","ref","treeType","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","navigationMode","forceUpdateRovingTabIndex","level","contextLevel","parentValue","value","internalValue","onClick","onKeyDown","onChange","as","itemType","ariaSelected","ariaExpanded","rest","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","treeItemRef","process","env","NODE_ENV","hasTreeContext","useEffect","current","querySelector","root","console","error","treeItem","tabIndex","open","openItems","has","getNextOpen","selectionMode","checked","checkedItems","get","handleClick","event","isEventFromActions","target","isEventFromSubtree","isEventFromSelection","contains","isEventFromExpandIcon","isDefaultPrevented","unstable_batchedUpdates","data","currentTarget","type","ExpandIconClick","Click","onOpenChange","requestType","handleKeyDown","isEventFromTreeItem","key","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","hasAttribute","ArrowLeft","altKey","ArrowRight","isTypeAheadCharacter","length","match","ctrlKey","metaKey","TypeAhead","handleChange","components","isAsideVisible","isActionsVisible","always","role","undefined","elementType","name"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["../src/components/TreeItem/useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport {\n getIntrinsicElementProps,\n useId,\n useEventCallback,\n slot,\n elementContains,\n useMergedRefs,\n isHTMLElement,\n} from '@fluentui/react-utilities';\nimport type { TreeItemProps, TreeItemState, TreeItemValue } from './TreeItem.types';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport {\n useTreeContext_unstable,\n useSubtreeContext_unstable,\n useTreeItemContext_unstable,\n TreeContext,\n} from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { treeClassNames } from '../../Tree';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n 'use no memo';\n\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 navigationMode = useTreeContext_unstable(ctx => ctx.navigationMode ?? 'tree');\n const forceUpdateRovingTabIndex = useTreeContext_unstable(ctx => ctx.forceUpdateRovingTabIndex);\n const { level: contextLevel } = useSubtreeContext_unstable();\n const parentValue = useTreeItemContext_unstable(ctx => 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 const value: TreeItemValue = props.value ?? internalValue;\n\n const {\n onClick,\n onKeyDown,\n onChange,\n as = 'div',\n itemType = 'leaf',\n 'aria-level': level = contextLevel,\n 'aria-selected': ariaSelected,\n 'aria-expanded': ariaExpanded,\n ...rest\n } = props;\n\n const actionsRef = React.useRef<HTMLDivElement>(null);\n const expandIconRef = React.useRef<HTMLDivElement>(null);\n const layoutRef = React.useRef<HTMLDivElement>(null);\n const subtreeRef = React.useRef<HTMLDivElement>(null);\n const selectionRef = React.useRef<HTMLInputElement>(null);\n const treeItemRef = React.useRef<HTMLDivElement>(null);\n\n if (process.env.NODE_ENV !== 'production') {\n // This is acceptable since the NODE_ENV will not change during runtime\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const hasTreeContext = useHasParentContext(TreeContext);\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (hasTreeContext) {\n return;\n }\n\n if (treeItemRef.current?.querySelector(`.${treeClassNames.root}`)) {\n // eslint-disable-next-line no-console\n console.error(/** #__DE-INDENT__ */ `\n @fluentui/react-tree [useTreeItem]:\n <TreeItem> should be declared inside a <Tree> component.\n `);\n }\n }, [hasTreeContext]);\n }\n\n React.useEffect(() => {\n // When the tree item is mounted, we might need to update the roving tab index\n // in edge cases where the tree is empty and then populated\n forceUpdateRovingTabIndex?.();\n const treeItem = treeItemRef.current;\n return () => {\n // When the tree item is unmounted, we need to update the roving tab index\n // if the tree item is the current tab indexed item\n if (treeItem && treeItem.tabIndex === 0) {\n forceUpdateRovingTabIndex?.();\n }\n };\n }, [forceUpdateRovingTabIndex]);\n\n const open = useTreeContext_unstable(ctx => props.open ?? ctx.openItems.has(value));\n const getNextOpen = () => (itemType === 'branch' ? !open : open);\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n\n const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n const isEventFromActions = () => actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n\n const isEventFromSubtree = () => subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n\n const isEventFromSelection = () => selectionRef.current?.contains(event.target as Node);\n\n const isEventFromExpandIcon = expandIconRef.current?.contains(event.target as Node);\n\n if (isEventFromActions() || isEventFromSubtree() || isEventFromSelection()) {\n return;\n } else if (!isEventFromExpandIcon) {\n onClick?.(event);\n }\n if (event.isDefaultPrevented() || itemType === 'leaf') {\n return;\n }\n\n ReactDOM.unstable_batchedUpdates(() => {\n const data = {\n event,\n value,\n open: getNextOpen(),\n target: event.currentTarget,\n type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n } as const;\n props.onOpenChange?.(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\n const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n if (event.isDefaultPrevented() || !treeItemRef.current) {\n return;\n }\n const isEventFromTreeItem = event.currentTarget === event.target;\n const isEventFromActions = actionsRef.current && actionsRef.current.contains(event.target as Node);\n\n switch (event.key) {\n case Space: {\n if (!isEventFromTreeItem) {\n return;\n }\n if (selectionMode !== 'none') {\n selectionRef.current?.click();\n // Prevents the page from scrolling down when the spacebar is pressed\n event.preventDefault();\n }\n return;\n }\n case treeDataTypes.Enter: {\n if (!isEventFromTreeItem) {\n return;\n }\n return event.currentTarget.click();\n }\n case treeDataTypes.End:\n case treeDataTypes.Home:\n case treeDataTypes.ArrowUp: {\n if (!isEventFromTreeItem && !isEventFromActions) {\n return;\n }\n return requestTreeResponse({\n requestType: 'navigate',\n event,\n value,\n itemType,\n parentValue,\n type: event.key,\n target: event.currentTarget,\n });\n }\n case treeDataTypes.ArrowDown: {\n if (!isEventFromTreeItem && !isEventFromActions) {\n return;\n }\n if (isEventFromActions && (!isHTMLElement(event.target) || event.target.hasAttribute('aria-haspopup'))) {\n return;\n }\n return requestTreeResponse({\n requestType: 'navigate',\n event,\n value,\n itemType,\n parentValue,\n type: event.key,\n target: event.currentTarget,\n });\n }\n case treeDataTypes.ArrowLeft: {\n // arrow left with alt key is reserved for history navigation\n if (event.altKey) {\n return;\n }\n const data = {\n value,\n event,\n open: getNextOpen(),\n type: event.key,\n itemType,\n parentValue,\n target: event.currentTarget,\n } as const;\n\n if (isEventFromActions && navigationMode === 'treegrid') {\n requestTreeResponse({ ...data, requestType: 'navigate' });\n return;\n }\n if (!isEventFromTreeItem) {\n return;\n }\n // do not navigate to parent if the item is on the top level\n if (level === 1 && !open) {\n return;\n }\n if (open) {\n props.onOpenChange?.(event, data);\n }\n requestTreeResponse({ ...data, requestType: open ? 'open' : 'navigate' });\n return;\n }\n case treeDataTypes.ArrowRight: {\n // Ignore keyboard events that do not originate from the current tree item.\n if (!isEventFromTreeItem) {\n return;\n }\n // arrow right with alt key is reserved for history navigation\n if (event.altKey) {\n return;\n }\n const data = {\n value,\n event,\n open: getNextOpen(),\n type: event.key,\n target: event.currentTarget,\n } as const;\n\n if (itemType === 'branch' && !open) {\n props.onOpenChange?.(event, data);\n requestTreeResponse({ ...data, itemType, requestType: 'open' });\n } else {\n requestTreeResponse({ ...data, itemType, parentValue, requestType: 'navigate' });\n }\n return;\n }\n }\n // Ignore keyboard events that do not originate from the current tree item.\n if (!isEventFromTreeItem) {\n return;\n }\n const isTypeAheadCharacter =\n 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\n const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (isEventFromSubtree) {\n return;\n }\n requestTreeResponse({\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\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(\n getIntrinsicElementProps(as, {\n tabIndex: -1,\n [dataTreeItemValueAttrName]: value,\n role: 'treeitem',\n ...rest,\n ref: useMergedRefs(ref, treeItemRef),\n 'aria-level': level,\n 'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n 'aria-selected': ariaSelected !== undefined ? ariaSelected : selectionMode === 'single' ? !!checked : undefined,\n 'aria-expanded': ariaExpanded !== undefined ? ariaExpanded : itemType === 'branch' ? open : undefined,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onChange: handleChange,\n } as const),\n { elementType: 'div' },\n ),\n };\n}\n\nfunction warnIfNoProperPropsFlatTreeItem(\n props: Pick<TreeItemProps, 'aria-setsize' | 'aria-posinset' | 'aria-level' | 'parentValue'>,\n) {\n if (process.env.NODE_ENV !== 'production') {\n if (\n props['aria-posinset'] === undefined ||\n props['aria-setsize'] === undefined ||\n props['aria-level'] === undefined ||\n (props.parentValue === undefined && props['aria-level'] !== 1)\n ) {\n // eslint-disable-next-line no-console\n console.error(/** #__DE-INDENT__ */ `\n @fluentui/react-tree [${useTreeItem_unstable.name}]:\n A flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\n and \"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}\n"],"names":["React","ReactDOM","getIntrinsicElementProps","useId","useEventCallback","slot","elementContains","useMergedRefs","isHTMLElement","Space","treeDataTypes","useTreeContext_unstable","useSubtreeContext_unstable","useTreeItemContext_unstable","TreeContext","dataTreeItemValueAttrName","useHasParentContext","treeClassNames","useTreeItem_unstable","props","ref","treeType","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","navigationMode","forceUpdateRovingTabIndex","level","contextLevel","parentValue","value","internalValue","onClick","onKeyDown","onChange","as","itemType","ariaSelected","ariaExpanded","rest","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","treeItemRef","process","env","NODE_ENV","hasTreeContext","useEffect","current","querySelector","root","console","error","treeItem","tabIndex","open","openItems","has","getNextOpen","selectionMode","checked","checkedItems","get","handleClick","event","isEventFromActions","target","isEventFromSubtree","isEventFromSelection","contains","isEventFromExpandIcon","isDefaultPrevented","unstable_batchedUpdates","data","currentTarget","type","ExpandIconClick","Click","onOpenChange","requestType","handleKeyDown","isEventFromTreeItem","key","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","hasAttribute","ArrowLeft","altKey","ArrowRight","isTypeAheadCharacter","length","match","ctrlKey","metaKey","TypeAhead","handleChange","components","isAsideVisible","isActionsVisible","always","role","undefined","elementType","name"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/TreeItem/useTreeItemContextValues.ts"],"sourcesContent":["import type { TreeItemContextValues, TreeItemState } from './TreeItem.types';\nimport type { TreeItemContextValue } from '../../contexts';\n\nexport function useTreeItemContextValues_unstable(state: TreeItemState): TreeItemContextValues {\n const {\n value,\n itemType,\n layoutRef,\n subtreeRef,\n open,\n expandIconRef,\n actionsRef,\n treeItemRef,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n isActionsVisible,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n isAsideVisible,\n selectionRef,\n checked,\n } = state;\n\n /**\n * This context is created with \"@fluentui/react-context-selector\",\n * there is no sense to memoize it\n */\n const treeItem: TreeItemContextValue = {\n 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\n return { treeItem };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","expandIconRef","actionsRef","treeItemRef","isActionsVisible","isAsideVisible","selectionRef","checked","treeItem"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAGA,OAAO,SAASA,kCAAkCC,KAAoB;IACpE,MAAM,EACJC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,IAAI,EACJC,aAAa,EACbC,UAAU,EACVC,WAAW,EACX,4DAA4D;IAC5DC,gBAAgB,EAChB,4DAA4D;IAC5DC,cAAc,EACdC,YAAY,EACZC,OAAO,EACR,GAAGZ;IAEJ;;;GAGC,GACD,MAAMa,WAAiC;QACrCZ;QACAW;QACAV;QACAC;QACAC;QACAC;QACAM;QACAF;QACAC;QACAH;QACAC;QACAF;IACF;IAEA,OAAO;QAAEO;IAAS;AACpB"}
1
+ {"version":3,"sources":["../src/components/TreeItem/useTreeItemContextValues.ts"],"sourcesContent":["import type { TreeItemContextValues, TreeItemState } from './TreeItem.types';\nimport type { TreeItemContextValue } from '../../contexts';\n\nexport function useTreeItemContextValues_unstable(state: TreeItemState): TreeItemContextValues {\n const {\n value,\n itemType,\n layoutRef,\n subtreeRef,\n open,\n expandIconRef,\n actionsRef,\n treeItemRef,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n isActionsVisible,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n isAsideVisible,\n selectionRef,\n checked,\n } = state;\n\n /**\n * This context is created with \"@fluentui/react-context-selector\",\n * there is no sense to memoize it\n */\n const treeItem: TreeItemContextValue = {\n 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\n return { treeItem };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","expandIconRef","actionsRef","treeItemRef","isActionsVisible","isAsideVisible","selectionRef","checked","treeItem"],"mappings":"AAGA,OAAO,SAASA,kCAAkCC,KAAoB;IACpE,MAAM,EACJC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,IAAI,EACJC,aAAa,EACbC,UAAU,EACVC,WAAW,EACX,4DAA4D;IAC5DC,gBAAgB,EAChB,4DAA4D;IAC5DC,cAAc,EACdC,YAAY,EACZC,OAAO,EACR,GAAGZ;IAEJ;;;GAGC,GACD,MAAMa,WAAiC;QACrCZ;QACAW;QACAV;QACAC;QACAC;QACAC;QACAM;QACAF;QACAC;QACAH;QACAC;QACAF;IACF;IAEA,OAAO;QAAEO;IAAS;AACpB"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/TreeItem/useTreeItemStyles.styles.ts"],"sourcesContent":["import { GriffelStyle, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeItemCSSProperties, TreeItemSlots, TreeItemState } from './TreeItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';\nimport { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';\n\nexport const treeItemClassNames: SlotClassNames<TreeItemSlots> = {\n root: 'fui-TreeItem',\n};\n\nconst useBaseStyles = makeResetStyles({\n position: 'relative',\n cursor: 'pointer',\n display: 'flex',\n flexDirection: 'column',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n paddingRight: tokens.spacingHorizontalNone,\n // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser\n ':focus': {\n outlineStyle: 'none',\n },\n ':focus-visible': {\n outlineStyle: 'none',\n },\n // This adds the focus outline for the TreeItemLayout element\n ...createCustomFocusIndicatorStyle(\n {\n borderRadius: tokens.borderRadiusMedium,\n outlineColor: tokens.colorStrokeFocus2,\n outlineRadius: tokens.borderRadiusMedium,\n // FIXME: tokens.strokeWidthThick causes some weird bugs\n outlineWidth: '2px',\n outlineStyle: 'solid',\n },\n {\n customizeSelector: selector =>\n `${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`,\n },\n ),\n});\n\ntype StaticLevel = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\ntype StaticLevelProperty = `level${StaticLevel}`;\n\nconst useStyles = makeStyles({\n ...(Object.fromEntries(\n Array.from<never, [StaticLevelProperty, TreeItemCSSProperties]>({ length: 10 }, (_, index) => [\n `level${(index + 1) as StaticLevel}`,\n { [treeItemLevelToken]: index + 1 },\n ]),\n ) as Record<StaticLevelProperty, GriffelStyle>),\n});\n\n/**\n * Apply styling to the TreeItem slots based on the state\n */\nexport const useTreeItemStyles_unstable = (state: TreeItemState): TreeItemState => {\n 'use no memo';\n\n const baseStyles = useBaseStyles();\n const styles = useStyles();\n\n const { level } = state;\n\n state.root.className = mergeClasses(\n treeItemClassNames.root,\n baseStyles,\n isStaticallyDefinedLevel(level) && styles[`level${level}` as StaticLevelProperty],\n state.root.className,\n );\n\n return state;\n};\n\nfunction isStaticallyDefinedLevel(level: number): level is StaticLevel {\n return level >= 1 && level <= 10;\n}\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","treeItemLevelToken","treeItemLayoutClassNames","treeItemPersonaLayoutClassNames","treeItemClassNames","root","useBaseStyles","position","cursor","display","flexDirection","boxSizing","backgroundColor","colorSubtleBackground","color","colorNeutralForeground2","paddingRight","spacingHorizontalNone","outlineStyle","borderRadius","borderRadiusMedium","outlineColor","colorStrokeFocus2","outlineRadius","outlineWidth","customizeSelector","selector","useStyles","Object","fromEntries","Array","from","length","_","index","useTreeItemStyles_unstable","state","baseStyles","styles","level","className","isStaticallyDefinedLevel"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAAuBA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAGzF,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,kBAAkB,QAAQ,qBAAqB;AACxD,SAASC,wBAAwB,QAAQ,mDAAmD;AAC5F,SAASC,+BAA+B,QAAQ,iEAAiE;AAEjH,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAgBV,gBAAgB;IACpCW,UAAU;IACVC,QAAQ;IACRC,SAAS;IACTC,eAAe;IACfC,WAAW;IACXC,iBAAiBb,OAAOc,qBAAqB;IAC7CC,OAAOf,OAAOgB,uBAAuB;IACrCC,cAAcjB,OAAOkB,qBAAqB;IAC1C,iHAAiH;IACjH,UAAU;QACRC,cAAc;IAChB;IACA,kBAAkB;QAChBA,cAAc;IAChB;IACA,6DAA6D;IAC7D,GAAGlB,gCACD;QACEmB,cAAcpB,OAAOqB,kBAAkB;QACvCC,cAActB,OAAOuB,iBAAiB;QACtCC,eAAexB,OAAOqB,kBAAkB;QACxC,wDAAwD;QACxDI,cAAc;QACdN,cAAc;IAChB,GACA;QACEO,mBAAmBC,CAAAA,WACjB,CAAC,EAAEA,SAAS,IAAI,EAAExB,yBAAyBG,IAAI,CAAC,EAAE,EAAEqB,SAAS,IAAI,EAAEvB,gCAAgCE,IAAI,CAAC,CAAC;IAC7G,EACD;AACH;AAKA,MAAMsB,YAAY9B,WAAW;IAC3B,GAAI+B,OAAOC,WAAW,CACpBC,MAAMC,IAAI,CAAsD;QAAEC,QAAQ;IAAG,GAAG,CAACC,GAAGC,QAAU;YAC5F,CAAC,KAAK,EAAGA,QAAQ,EAAkB,CAAC;YACpC;gBAAE,CAACjC,mBAAmB,EAAEiC,QAAQ;YAAE;SACnC,EACF;AACH;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,aAAa/B;IACnB,MAAMgC,SAASX;IAEf,MAAM,EAAEY,KAAK,EAAE,GAAGH;IAElBA,MAAM/B,IAAI,CAACmC,SAAS,GAAG1C,aACrBM,mBAAmBC,IAAI,EACvBgC,YACAI,yBAAyBF,UAAUD,MAAM,CAAC,CAAC,KAAK,EAAEC,MAAM,CAAC,CAAwB,EACjFH,MAAM/B,IAAI,CAACmC,SAAS;IAGtB,OAAOJ;AACT,EAAE;AAEF,SAASK,yBAAyBF,KAAa;IAC7C,OAAOA,SAAS,KAAKA,SAAS;AAChC"}
1
+ {"version":3,"sources":["../src/components/TreeItem/useTreeItemStyles.styles.ts"],"sourcesContent":["import { GriffelStyle, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeItemCSSProperties, TreeItemSlots, TreeItemState } from './TreeItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';\nimport { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';\n\nexport const treeItemClassNames: SlotClassNames<TreeItemSlots> = {\n root: 'fui-TreeItem',\n};\n\nconst useBaseStyles = makeResetStyles({\n position: 'relative',\n cursor: 'pointer',\n display: 'flex',\n flexDirection: 'column',\n boxSizing: 'border-box',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n paddingRight: tokens.spacingHorizontalNone,\n // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser\n ':focus': {\n outlineStyle: 'none',\n },\n ':focus-visible': {\n outlineStyle: 'none',\n },\n // This adds the focus outline for the TreeItemLayout element\n ...createCustomFocusIndicatorStyle(\n {\n borderRadius: tokens.borderRadiusMedium,\n outlineColor: tokens.colorStrokeFocus2,\n outlineRadius: tokens.borderRadiusMedium,\n // FIXME: tokens.strokeWidthThick causes some weird bugs\n outlineWidth: '2px',\n outlineStyle: 'solid',\n },\n {\n customizeSelector: selector =>\n `${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`,\n },\n ),\n});\n\ntype StaticLevel = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\ntype StaticLevelProperty = `level${StaticLevel}`;\n\nconst useStyles = makeStyles({\n ...(Object.fromEntries(\n Array.from<never, [StaticLevelProperty, TreeItemCSSProperties]>({ length: 10 }, (_, index) => [\n `level${(index + 1) as StaticLevel}`,\n { [treeItemLevelToken]: index + 1 },\n ]),\n ) as Record<StaticLevelProperty, GriffelStyle>),\n});\n\n/**\n * Apply styling to the TreeItem slots based on the state\n */\nexport const useTreeItemStyles_unstable = (state: TreeItemState): TreeItemState => {\n 'use no memo';\n\n const baseStyles = useBaseStyles();\n const styles = useStyles();\n\n const { level } = state;\n\n state.root.className = mergeClasses(\n treeItemClassNames.root,\n baseStyles,\n isStaticallyDefinedLevel(level) && styles[`level${level}` as StaticLevelProperty],\n state.root.className,\n );\n\n return state;\n};\n\nfunction isStaticallyDefinedLevel(level: number): level is StaticLevel {\n return level >= 1 && level <= 10;\n}\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","treeItemLevelToken","treeItemLayoutClassNames","treeItemPersonaLayoutClassNames","treeItemClassNames","root","useBaseStyles","position","cursor","display","flexDirection","boxSizing","backgroundColor","colorSubtleBackground","color","colorNeutralForeground2","paddingRight","spacingHorizontalNone","outlineStyle","borderRadius","borderRadiusMedium","outlineColor","colorStrokeFocus2","outlineRadius","outlineWidth","customizeSelector","selector","useStyles","Object","fromEntries","Array","from","length","_","index","useTreeItemStyles_unstable","state","baseStyles","styles","level","className","isStaticallyDefinedLevel"],"mappings":"AAAA,SAAuBA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAGzF,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,kBAAkB,QAAQ,qBAAqB;AACxD,SAASC,wBAAwB,QAAQ,mDAAmD;AAC5F,SAASC,+BAA+B,QAAQ,iEAAiE;AAEjH,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAgBV,gBAAgB;IACpCW,UAAU;IACVC,QAAQ;IACRC,SAAS;IACTC,eAAe;IACfC,WAAW;IACXC,iBAAiBb,OAAOc,qBAAqB;IAC7CC,OAAOf,OAAOgB,uBAAuB;IACrCC,cAAcjB,OAAOkB,qBAAqB;IAC1C,iHAAiH;IACjH,UAAU;QACRC,cAAc;IAChB;IACA,kBAAkB;QAChBA,cAAc;IAChB;IACA,6DAA6D;IAC7D,GAAGlB,gCACD;QACEmB,cAAcpB,OAAOqB,kBAAkB;QACvCC,cAActB,OAAOuB,iBAAiB;QACtCC,eAAexB,OAAOqB,kBAAkB;QACxC,wDAAwD;QACxDI,cAAc;QACdN,cAAc;IAChB,GACA;QACEO,mBAAmBC,CAAAA,WACjB,GAAGA,SAAS,IAAI,EAAExB,yBAAyBG,IAAI,CAAC,EAAE,EAAEqB,SAAS,IAAI,EAAEvB,gCAAgCE,IAAI,EAAE;IAC7G,EACD;AACH;AAKA,MAAMsB,YAAY9B,WAAW;IAC3B,GAAI+B,OAAOC,WAAW,CACpBC,MAAMC,IAAI,CAAsD;QAAEC,QAAQ;IAAG,GAAG,CAACC,GAAGC,QAAU;YAC5F,CAAC,KAAK,EAAGA,QAAQ,GAAmB;YACpC;gBAAE,CAACjC,mBAAmB,EAAEiC,QAAQ;YAAE;SACnC,EACF;AACH;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,aAAa/B;IACnB,MAAMgC,SAASX;IAEf,MAAM,EAAEY,KAAK,EAAE,GAAGH;IAElBA,MAAM/B,IAAI,CAACmC,SAAS,GAAG1C,aACrBM,mBAAmBC,IAAI,EACvBgC,YACAI,yBAAyBF,UAAUD,MAAM,CAAC,CAAC,KAAK,EAAEC,OAAO,CAAwB,EACjFH,MAAM/B,IAAI,CAACmC,SAAS;IAGtB,OAAOJ;AACT,EAAE;AAEF,SAASK,yBAAyBF,KAAa;IAC7C,OAAOA,SAAS,KAAKA,SAAS;AAChC"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/TreeItemChevron.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { ChevronRight12Regular } from '@fluentui/react-icons';\nimport { durations, curves } from '@fluentui/react-motion';\nimport { useTreeItemContext_unstable } from '../contexts/treeItemContext';\n\nexport const TreeItemChevron = React.memo(() => {\n const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n const { dir } = useFluent_unstable();\n\n const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n return (\n <ChevronRight12Regular\n style={{\n ...expandIconInlineStyles[expandIconRotation],\n transition: `transform ${durations.durationNormal}ms ${curves.curveEasyEaseMax}`,\n }}\n />\n );\n});\nTreeItemChevron.displayName = 'TreeItemChevron';\n\nconst expandIconInlineStyles = {\n 90: { transform: `rotate(90deg)` },\n 0: { transform: `rotate(0deg)` },\n 180: { transform: `rotate(180deg)` },\n} as const;\n"],"names":["React","useFluent_unstable","ChevronRight12Regular","durations","curves","useTreeItemContext_unstable","TreeItemChevron","memo","open","ctx","dir","expandIconRotation","style","expandIconInlineStyles","transition","durationNormal","curveEasyEaseMax","displayName","transform"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,qBAAqB,QAAQ,wBAAwB;AAC9D,SAASC,SAAS,EAAEC,MAAM,QAAQ,yBAAyB;AAC3D,SAASC,2BAA2B,QAAQ,8BAA8B;AAE1E,OAAO,MAAMC,gCAAkBN,MAAMO,IAAI,CAAC;IACxC,MAAMC,OAAOH,4BAA4BI,CAAAA,MAAOA,IAAID,IAAI;IAExD,MAAM,EAAEE,GAAG,EAAE,GAAGT;IAEhB,MAAMU,qBAAqBH,OAAO,KAAKE,QAAQ,QAAQ,IAAI;IAC3D,qBACE,oBAACR;QACCU,OAAO;YACL,GAAGC,sBAAsB,CAACF,mBAAmB;YAC7CG,YAAY,CAAC,UAAU,EAAEX,UAAUY,cAAc,CAAC,GAAG,EAAEX,OAAOY,gBAAgB,CAAC,CAAC;QAClF;;AAGN,GAAG;AACHV,gBAAgBW,WAAW,GAAG;AAE9B,MAAMJ,yBAAyB;IAC7B,IAAI;QAAEK,WAAW,CAAC,aAAa,CAAC;IAAC;IACjC,GAAG;QAAEA,WAAW,CAAC,YAAY,CAAC;IAAC;IAC/B,KAAK;QAAEA,WAAW,CAAC,cAAc,CAAC;IAAC;AACrC"}
1
+ {"version":3,"sources":["../src/components/TreeItemChevron.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { ChevronRight12Regular } from '@fluentui/react-icons';\nimport { durations, curves } from '@fluentui/react-motion';\nimport { useTreeItemContext_unstable } from '../contexts/treeItemContext';\n\nexport const TreeItemChevron = React.memo(() => {\n const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n const { dir } = useFluent_unstable();\n\n const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n return (\n <ChevronRight12Regular\n style={{\n ...expandIconInlineStyles[expandIconRotation],\n transition: `transform ${durations.durationNormal}ms ${curves.curveEasyEaseMax}`,\n }}\n />\n );\n});\nTreeItemChevron.displayName = 'TreeItemChevron';\n\nconst expandIconInlineStyles = {\n 90: { transform: `rotate(90deg)` },\n 0: { transform: `rotate(0deg)` },\n 180: { transform: `rotate(180deg)` },\n} as const;\n"],"names":["React","useFluent_unstable","ChevronRight12Regular","durations","curves","useTreeItemContext_unstable","TreeItemChevron","memo","open","ctx","dir","expandIconRotation","style","expandIconInlineStyles","transition","durationNormal","curveEasyEaseMax","displayName","transform"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,qBAAqB,QAAQ,wBAAwB;AAC9D,SAASC,SAAS,EAAEC,MAAM,QAAQ,yBAAyB;AAC3D,SAASC,2BAA2B,QAAQ,8BAA8B;AAE1E,OAAO,MAAMC,gCAAkBN,MAAMO,IAAI,CAAC;IACxC,MAAMC,OAAOH,4BAA4BI,CAAAA,MAAOA,IAAID,IAAI;IAExD,MAAM,EAAEE,GAAG,EAAE,GAAGT;IAEhB,MAAMU,qBAAqBH,OAAO,KAAKE,QAAQ,QAAQ,IAAI;IAC3D,qBACE,oBAACR;QACCU,OAAO;YACL,GAAGC,sBAAsB,CAACF,mBAAmB;YAC7CG,YAAY,CAAC,UAAU,EAAEX,UAAUY,cAAc,CAAC,GAAG,EAAEX,OAAOY,gBAAgB,EAAE;QAClF;;AAGN,GAAG;AACHV,gBAAgBW,WAAW,GAAG;AAE9B,MAAMJ,yBAAyB;IAC7B,IAAI;QAAEK,WAAW,CAAC,aAAa,CAAC;IAAC;IACjC,GAAG;QAAEA,WAAW,CAAC,YAAY,CAAC;IAAC;IAC/B,KAAK;QAAEA,WAAW,CAAC,cAAc,CAAC;IAAC;AACrC"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/TreeItemLayout/TreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nimport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nimport { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles.styles';\nimport type { TreeItemLayoutProps } from './TreeItemLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.\n * It provides a consistent visual structure for tree items in a `Tree` component.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps> = React.forwardRef((props, ref) => {\n const state = useTreeItemLayout_unstable(props, ref);\n\n useTreeItemLayoutStyles_unstable(state);\n useCustomStyleHook_unstable('useTreeItemLayoutStyles_unstable')(state);\n\n return renderTreeItemLayout_unstable(state);\n});\n\nTreeItemLayout.displayName = 'TreeItemLayout';\n"],"names":["React","useTreeItemLayout_unstable","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","useCustomStyleHook_unstable","TreeItemLayout","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAGpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;CAIC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAEhDL,iCAAiCM;IACjCL,4BAA4B,oCAAoCK;IAEhE,OAAOP,8BAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}
1
+ {"version":3,"sources":["../src/components/TreeItemLayout/TreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nimport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nimport { useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles.styles';\nimport type { TreeItemLayoutProps } from './TreeItemLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.\n * It provides a consistent visual structure for tree items in a `Tree` component.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemLayout: ForwardRefComponent<TreeItemLayoutProps> = React.forwardRef((props, ref) => {\n const state = useTreeItemLayout_unstable(props, ref);\n\n useTreeItemLayoutStyles_unstable(state);\n useCustomStyleHook_unstable('useTreeItemLayoutStyles_unstable')(state);\n\n return renderTreeItemLayout_unstable(state);\n});\n\nTreeItemLayout.displayName = 'TreeItemLayout';\n"],"names":["React","useTreeItemLayout_unstable","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","useCustomStyleHook_unstable","TreeItemLayout","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAGpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;CAIC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAEhDL,iCAAiCM;IACjCL,4BAA4B,oCAAoCK;IAEhE,OAAOP,8BAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/TreeItemLayout/TreeItemLayout.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type {\n Slot,\n ComponentProps,\n ComponentState,\n ExtractSlotProps,\n EventData,\n EventHandler,\n} from '@fluentui/react-utilities';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\n\nexport type TreeItemLayoutActionVisibilityChangeData = (\n | EventData<'mouseover' | 'mouseout', MouseEvent>\n | EventData<'focus' | 'blur', FocusEvent>\n | EventData<'blur', React.FocusEvent>\n) & { visible: boolean };\n\nexport type TreeItemLayoutActionSlotProps = ExtractSlotProps<\n Slot<'div'> & {\n /**\n * Forces visibility of the aside/action content\n */\n visible?: boolean;\n onVisibilityChange?: EventHandler<TreeItemLayoutActionVisibilityChangeData>;\n }\n>;\n\nexport type TreeItemLayoutSlots = {\n root: Slot<'div'>;\n /**\n * Content. Children of the root slot are automatically rendered here\n */\n main: NonNullable<Slot<'div'>>;\n /**\n * Icon slot that renders right before main content\n */\n iconBefore?: Slot<'div'>;\n /**\n * Icon slot that renders right after main content\n */\n iconAfter?: Slot<'div'>;\n /**\n * Expand icon slot,\n * by default renders a chevron icon to indicate opening and closing\n */\n expandIcon?: Slot<'div'>;\n /**\n * Aside content is normally used to render a badge or other non-actionable content\n */\n aside?: Slot<'div'>;\n /**\n * Actionable elements are normally buttons, menus, or other focusable elements.\n * Those elements are only visibly available if the given tree item is currently active.\n *\n * `actions` and `aside` slots are positioned on the exact same spot,\n * so they won't be visible at the same time.\n * `aside` slot is visible by default meanwhile `actions` slot are only visible when the tree item is active.\n *\n * `actions` slot supports a `visible` prop to force visibility of the actions.\n */\n actions?: Slot<TreeItemLayoutActionSlotProps>;\n selector?: Slot<typeof Checkbox> | Slot<typeof Radio>;\n};\n\n/**\n * TreeItemLayout Props\n */\nexport type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemLayout\n */\nexport type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {\n buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAuEA;;CAEC,GACD,WAEE"}
1
+ {"version":3,"sources":["../src/components/TreeItemLayout/TreeItemLayout.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type {\n Slot,\n ComponentProps,\n ComponentState,\n ExtractSlotProps,\n EventData,\n EventHandler,\n} from '@fluentui/react-utilities';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\n\nexport type TreeItemLayoutActionVisibilityChangeData = (\n | EventData<'mouseover' | 'mouseout', MouseEvent>\n | EventData<'focus' | 'blur', FocusEvent>\n | EventData<'blur', React.FocusEvent>\n) & { visible: boolean };\n\nexport type TreeItemLayoutActionSlotProps = ExtractSlotProps<\n Slot<'div'> & {\n /**\n * Forces visibility of the aside/action content\n */\n visible?: boolean;\n onVisibilityChange?: EventHandler<TreeItemLayoutActionVisibilityChangeData>;\n }\n>;\n\nexport type TreeItemLayoutSlots = {\n root: Slot<'div'>;\n /**\n * Content. Children of the root slot are automatically rendered here\n */\n main: NonNullable<Slot<'div'>>;\n /**\n * Icon slot that renders right before main content\n */\n iconBefore?: Slot<'div'>;\n /**\n * Icon slot that renders right after main content\n */\n iconAfter?: Slot<'div'>;\n /**\n * Expand icon slot,\n * by default renders a chevron icon to indicate opening and closing\n */\n expandIcon?: Slot<'div'>;\n /**\n * Aside content is normally used to render a badge or other non-actionable content\n */\n aside?: Slot<'div'>;\n /**\n * Actionable elements are normally buttons, menus, or other focusable elements.\n * Those elements are only visibly available if the given tree item is currently active.\n *\n * `actions` and `aside` slots are positioned on the exact same spot,\n * so they won't be visible at the same time.\n * `aside` slot is visible by default meanwhile `actions` slot are only visible when the tree item is active.\n *\n * `actions` slot supports a `visible` prop to force visibility of the actions.\n */\n actions?: Slot<TreeItemLayoutActionSlotProps>;\n selector?: Slot<typeof Checkbox> | Slot<typeof Radio>;\n};\n\n/**\n * TreeItemLayout Props\n */\nexport type TreeItemLayoutProps = ComponentProps<Partial<TreeItemLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemLayout\n */\nexport type TreeItemLayoutState = ComponentState<TreeItemLayoutSlots> & {\n buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AAuEA;;CAEC,GACD,WAEE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/TreeItemLayout/index.ts"],"sourcesContent":["export { TreeItemLayout } from './TreeItemLayout';\nexport type {\n TreeItemLayoutActionSlotProps,\n TreeItemLayoutActionVisibilityChangeData,\n TreeItemLayoutProps,\n TreeItemLayoutSlots,\n TreeItemLayoutState,\n} from './TreeItemLayout.types';\nexport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nexport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nexport { treeItemLayoutClassNames, useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles.styles';\n"],"names":["TreeItemLayout","renderTreeItemLayout_unstable","useTreeItemLayout_unstable","treeItemLayoutClassNames","useTreeItemLayoutStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAQlD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC"}
1
+ {"version":3,"sources":["../src/components/TreeItemLayout/index.ts"],"sourcesContent":["export { TreeItemLayout } from './TreeItemLayout';\nexport type {\n TreeItemLayoutActionSlotProps,\n TreeItemLayoutActionVisibilityChangeData,\n TreeItemLayoutProps,\n TreeItemLayoutSlots,\n TreeItemLayoutState,\n} from './TreeItemLayout.types';\nexport { renderTreeItemLayout_unstable } from './renderTreeItemLayout';\nexport { useTreeItemLayout_unstable } from './useTreeItemLayout';\nexport { treeItemLayoutClassNames, useTreeItemLayoutStyles_unstable } from './useTreeItemLayoutStyles.styles';\n"],"names":["TreeItemLayout","renderTreeItemLayout_unstable","useTreeItemLayout_unstable","treeItemLayoutClassNames","useTreeItemLayoutStyles_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAQlD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/TreeItemLayout/renderTreeItemLayout.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutState, TreeItemLayoutSlots } from './TreeItemLayout.types';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemLayout\n */\nexport const renderTreeItemLayout_unstable = (state: TreeItemLayoutState) => {\n assertSlots<TreeItemLayoutSlots>(state);\n\n return (\n <state.root>\n {state.expandIcon && <state.expandIcon />}\n {state.selector && <state.selector />}\n {state.iconBefore && <state.iconBefore />}\n <state.main>{state.root.children}</state.main>\n {state.iconAfter && <state.iconAfter />}\n <ButtonContextProvider value={state.buttonContextValue}>\n {state.actions && <state.actions />}\n {state.aside && <state.aside />}\n </ButtonContextProvider>\n </state.root>\n );\n};\n"],"names":["assertSlots","ButtonContextProvider","renderTreeItemLayout_unstable","state","root","expandIcon","selector","iconBefore","main","children","iconAfter","value","buttonContextValue","actions","aside"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CH,YAAiCG;IAEjC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,UAAU,kBAAI,KAACF,MAAME,UAAU;YACrCF,MAAMG,QAAQ,kBAAI,KAACH,MAAMG,QAAQ;YACjCH,MAAMI,UAAU,kBAAI,KAACJ,MAAMI,UAAU;0BACtC,KAACJ,MAAMK,IAAI;0BAAEL,MAAMC,IAAI,CAACK,QAAQ;;YAC/BN,MAAMO,SAAS,kBAAI,KAACP,MAAMO,SAAS;0BACpC,MAACT;gBAAsBU,OAAOR,MAAMS,kBAAkB;;oBACnDT,MAAMU,OAAO,kBAAI,KAACV,MAAMU,OAAO;oBAC/BV,MAAMW,KAAK,kBAAI,KAACX,MAAMW,KAAK;;;;;AAIpC,EAAE"}
1
+ {"version":3,"sources":["../src/components/TreeItemLayout/renderTreeItemLayout.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutState, TreeItemLayoutSlots } from './TreeItemLayout.types';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemLayout\n */\nexport const renderTreeItemLayout_unstable = (state: TreeItemLayoutState) => {\n assertSlots<TreeItemLayoutSlots>(state);\n\n return (\n <state.root>\n {state.expandIcon && <state.expandIcon />}\n {state.selector && <state.selector />}\n {state.iconBefore && <state.iconBefore />}\n <state.main>{state.root.children}</state.main>\n {state.iconAfter && <state.iconAfter />}\n <ButtonContextProvider value={state.buttonContextValue}>\n {state.actions && <state.actions />}\n {state.aside && <state.aside />}\n </ButtonContextProvider>\n </state.root>\n );\n};\n"],"names":["assertSlots","ButtonContextProvider","renderTreeItemLayout_unstable","state","root","expandIcon","selector","iconBefore","main","children","iconAfter","value","buttonContextValue","actions","aside"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CH,YAAiCG;IAEjC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,UAAU,kBAAI,KAACF,MAAME,UAAU;YACrCF,MAAMG,QAAQ,kBAAI,KAACH,MAAMG,QAAQ;YACjCH,MAAMI,UAAU,kBAAI,KAACJ,MAAMI,UAAU;0BACtC,KAACJ,MAAMK,IAAI;0BAAEL,MAAMC,IAAI,CAACK,QAAQ;;YAC/BN,MAAMO,SAAS,kBAAI,KAACP,MAAMO,SAAS;0BACpC,MAACT;gBAAsBU,OAAOR,MAAMS,kBAAkB;;oBACnDT,MAAMU,OAAO,kBAAI,KAACV,MAAMU,OAAO;oBAC/BV,MAAMW,KAAK,kBAAI,KAACX,MAAMW,KAAK;;;;;AAIpC,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/TreeItemLayout/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 {\n TreeItemLayoutActionSlotProps,\n TreeItemLayoutActionVisibilityChangeData,\n TreeItemLayoutProps,\n TreeItemLayoutState,\n} from './TreeItemLayout.types';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup, useIsNavigatingWithKeyboard } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\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 'use no memo';\n\n const { main, iconAfter, iconBefore } = props;\n\n const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n const navigationMode = useTreeContext_unstable(ctx => ctx.navigationMode ?? 'tree');\n\n const [isActionsVisibleFromProps, onActionVisibilityChange]: [\n TreeItemLayoutActionSlotProps['visible'],\n TreeItemLayoutActionSlotProps['onVisibilityChange'],\n ] = isResolvedShorthand(props.actions)\n ? // .visible .onVisibilityChange prop should not be propagated to the DOM\n [props.actions.visible, props.actions.onVisibilityChange]\n : [undefined, undefined];\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 onActionVisibilityChange?.(event, {\n visible: true,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n if (event.defaultPrevented) {\n return;\n }\n setIsActionsVisible(true);\n }\n },\n [subtreeRef, setIsActionsVisible, onActionVisibilityChange],\n );\n\n const { targetDocument } = useFluent();\n const isNavigatingWithKeyboard = useIsNavigatingWithKeyboard();\n\n const setActionsInvisibleIfNotFromSubtree = React.useCallback(\n (event: FocusEvent | MouseEvent) => {\n const isRelatedTargetFromActions = () =>\n Boolean(actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget as Node));\n const isRelatedTargetFromTreeItem = () =>\n Boolean(treeItemRef.current && elementContains(treeItemRef.current, event.relatedTarget as Node));\n const isTargetFromActions = () => Boolean(actionsRefInternal.current?.contains(event.target as Node));\n if (isRelatedTargetFromActions()) {\n onActionVisibilityChange?.(event, {\n visible: true,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n if (event.defaultPrevented) {\n return;\n }\n setIsActionsVisible(true);\n return;\n }\n if (isTargetFromActions() && isRelatedTargetFromTreeItem()) {\n return;\n }\n // when a mouseout event happens during keyboard interaction\n // we should not hide the actions if the activeElement is the treeitem or an action\n // as the focus on the treeitem takes precedence over the mouseout event\n if (\n event.type === 'mouseout' &&\n isNavigatingWithKeyboard() &&\n (targetDocument?.activeElement === treeItemRef.current ||\n elementContains(actionsRefInternal.current, targetDocument?.activeElement as Node))\n ) {\n return;\n }\n onActionVisibilityChange?.(event, {\n visible: false,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n if (event.defaultPrevented) {\n return;\n }\n setIsActionsVisible(false);\n },\n [setIsActionsVisible, onActionVisibilityChange, treeItemRef, isNavigatingWithKeyboard, targetDocument],\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: navigationMode === 'tree', axis: 'horizontal' });\n const actions = isActionsVisible\n ? slot.optional(props.actions, {\n defaultProps: { ...arrowNavigationProps, role: 'toolbar' },\n elementType: 'div',\n })\n : undefined;\n delete actions?.visible;\n delete actions?.onVisibilityChange;\n\n const actionsRefs = useMergedRefs(actions?.ref, actionsRef, actionsRefInternal);\n const handleActionsBlur = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {\n if (isResolvedShorthand(props.actions)) {\n props.actions.onBlur?.(event);\n }\n const isRelatedTargetFromActions = Boolean(elementContains(event.currentTarget, event.relatedTarget as Node));\n onActionVisibilityChange?.(event, {\n visible: isRelatedTargetFromActions,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n setIsActionsVisible(isRelatedTargetFromActions);\n });\n if (actions) {\n actions.ref = actionsRefs;\n actions.onBlur = handleActionsBlur;\n }\n\n const hasActions = Boolean(props.actions);\n\n React.useEffect(() => {\n if (treeItemRef.current && hasActions) {\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 }, [hasActions, treeItemRef, setActionsVisibleIfNotFromSubtree, setActionsInvisibleIfNotFromSubtree]);\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, { elementType: 'div' }),\n main: slot.always(main, { elementType: 'div' }),\n iconAfter: slot.optional(iconAfter, { elementType: 'div' }),\n aside: !isActionsVisible ? slot.optional(props.aside, { elementType: 'div' }) : 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","useIsNavigatingWithKeyboard","useFluent_unstable","useFluent","useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","layoutRef","ctx","selectionMode","navigationMode","isActionsVisibleFromProps","onActionVisibilityChange","actions","visible","onVisibilityChange","undefined","isActionsVisible","setIsActionsVisible","state","initialState","selectionRef","expandIconRef","actionsRef","actionsRefInternal","useRef","treeItemRef","subtreeRef","checked","isBranch","itemType","assertIsRefObject","setActionsVisibleIfNotFromSubtree","useCallback","event","isTargetFromSubtree","Boolean","current","target","type","defaultPrevented","targetDocument","isNavigatingWithKeyboard","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","isRelatedTargetFromTreeItem","isTargetFromActions","contains","activeElement","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["../src/components/TreeItemLayout/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 {\n TreeItemLayoutActionSlotProps,\n TreeItemLayoutActionVisibilityChangeData,\n TreeItemLayoutProps,\n TreeItemLayoutState,\n} from './TreeItemLayout.types';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\nimport { useArrowNavigationGroup, useIsNavigatingWithKeyboard } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\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 'use no memo';\n\n const { main, iconAfter, iconBefore } = props;\n\n const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n const navigationMode = useTreeContext_unstable(ctx => ctx.navigationMode ?? 'tree');\n\n const [isActionsVisibleFromProps, onActionVisibilityChange]: [\n TreeItemLayoutActionSlotProps['visible'],\n TreeItemLayoutActionSlotProps['onVisibilityChange'],\n ] = isResolvedShorthand(props.actions)\n ? // .visible .onVisibilityChange prop should not be propagated to the DOM\n [props.actions.visible, props.actions.onVisibilityChange]\n : [undefined, undefined];\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 onActionVisibilityChange?.(event, {\n visible: true,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n if (event.defaultPrevented) {\n return;\n }\n setIsActionsVisible(true);\n }\n },\n [subtreeRef, setIsActionsVisible, onActionVisibilityChange],\n );\n\n const { targetDocument } = useFluent();\n const isNavigatingWithKeyboard = useIsNavigatingWithKeyboard();\n\n const setActionsInvisibleIfNotFromSubtree = React.useCallback(\n (event: FocusEvent | MouseEvent) => {\n const isRelatedTargetFromActions = () =>\n Boolean(actionsRefInternal.current && elementContains(actionsRefInternal.current, event.relatedTarget as Node));\n const isRelatedTargetFromTreeItem = () =>\n Boolean(treeItemRef.current && elementContains(treeItemRef.current, event.relatedTarget as Node));\n const isTargetFromActions = () => Boolean(actionsRefInternal.current?.contains(event.target as Node));\n if (isRelatedTargetFromActions()) {\n onActionVisibilityChange?.(event, {\n visible: true,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n if (event.defaultPrevented) {\n return;\n }\n setIsActionsVisible(true);\n return;\n }\n if (isTargetFromActions() && isRelatedTargetFromTreeItem()) {\n return;\n }\n // when a mouseout event happens during keyboard interaction\n // we should not hide the actions if the activeElement is the treeitem or an action\n // as the focus on the treeitem takes precedence over the mouseout event\n if (\n event.type === 'mouseout' &&\n isNavigatingWithKeyboard() &&\n (targetDocument?.activeElement === treeItemRef.current ||\n elementContains(actionsRefInternal.current, targetDocument?.activeElement as Node))\n ) {\n return;\n }\n onActionVisibilityChange?.(event, {\n visible: false,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n if (event.defaultPrevented) {\n return;\n }\n setIsActionsVisible(false);\n },\n [setIsActionsVisible, onActionVisibilityChange, treeItemRef, isNavigatingWithKeyboard, targetDocument],\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: navigationMode === 'tree', axis: 'horizontal' });\n const actions = isActionsVisible\n ? slot.optional(props.actions, {\n defaultProps: { ...arrowNavigationProps, role: 'toolbar' },\n elementType: 'div',\n })\n : undefined;\n delete actions?.visible;\n delete actions?.onVisibilityChange;\n\n const actionsRefs = useMergedRefs(actions?.ref, actionsRef, actionsRefInternal);\n const handleActionsBlur = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {\n if (isResolvedShorthand(props.actions)) {\n props.actions.onBlur?.(event);\n }\n const isRelatedTargetFromActions = Boolean(elementContains(event.currentTarget, event.relatedTarget as Node));\n onActionVisibilityChange?.(event, {\n visible: isRelatedTargetFromActions,\n event,\n type: event.type,\n } as Extract<TreeItemLayoutActionVisibilityChangeData, { event: typeof event }>);\n setIsActionsVisible(isRelatedTargetFromActions);\n });\n if (actions) {\n actions.ref = actionsRefs;\n actions.onBlur = handleActionsBlur;\n }\n\n const hasActions = Boolean(props.actions);\n\n React.useEffect(() => {\n if (treeItemRef.current && hasActions) {\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 }, [hasActions, treeItemRef, setActionsVisibleIfNotFromSubtree, setActionsInvisibleIfNotFromSubtree]);\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, { elementType: 'div' }),\n main: slot.always(main, { elementType: 'div' }),\n iconAfter: slot.optional(iconAfter, { elementType: 'div' }),\n aside: !isActionsVisible ? slot.optional(props.aside, { elementType: 'div' }) : 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","useIsNavigatingWithKeyboard","useFluent_unstable","useFluent","useTreeItemLayout_unstable","props","ref","main","iconAfter","iconBefore","layoutRef","ctx","selectionMode","navigationMode","isActionsVisibleFromProps","onActionVisibilityChange","actions","visible","onVisibilityChange","undefined","isActionsVisible","setIsActionsVisible","state","initialState","selectionRef","expandIconRef","actionsRef","actionsRefInternal","useRef","treeItemRef","subtreeRef","checked","isBranch","itemType","assertIsRefObject","setActionsVisibleIfNotFromSubtree","useCallback","event","isTargetFromSubtree","Boolean","current","target","type","defaultPrevented","targetDocument","isNavigatingWithKeyboard","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","isRelatedTargetFromTreeItem","isTargetFromActions","contains","activeElement","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":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\n\nexport const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots> = {\n root: 'fui-TreeItemLayout',\n iconBefore: 'fui-TreeItemLayout__iconBefore',\n main: 'fui-TreeItemLayout__main',\n iconAfter: 'fui-TreeItemLayout__iconAfter',\n expandIcon: 'fui-TreeItemLayout__expandIcon',\n aside: 'fui-TreeItemLayout__aside',\n actions: 'fui-TreeItemLayout__actions',\n selector: 'fui-TreeItemLayout__selector',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridArea: 'layout',\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Hover,\n },\n },\n ':active': {\n color: tokens.colorNeutralForeground2Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n },\n },\n});\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n leaf: {\n paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`,\n },\n branch: {\n paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`,\n },\n medium: {\n ...typographyStyles.body1,\n },\n small: {\n minHeight: '24px',\n ...typographyStyles.caption1,\n },\n // Appearance variations\n subtle: {},\n 'subtle-alpha': {\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n});\n\n/**\n * Styles for the action icon slot\n */\nconst useActionsBaseStyles = makeResetStyles({\n display: 'flex',\n marginLeft: 'auto',\n position: 'relative',\n zIndex: 1,\n gridArea: 'aside',\n padding: `0 ${tokens.spacingHorizontalS}`,\n});\n/**\n * Styles for the action icon slot\n */\nconst useAsideBaseStyles = makeResetStyles({\n display: 'flex',\n marginLeft: 'auto',\n alignItems: 'center',\n zIndex: 0,\n gridArea: 'aside',\n padding: `0 ${tokens.spacingHorizontalM}`,\n gap: tokens.spacingHorizontalXS,\n});\n\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconBaseStyles = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minWidth: '24px',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3,\n flex: `0 0 auto`,\n padding: `${tokens.spacingVerticalXS} 0`,\n});\n\n/**\n * Styles for the content slot\n */\nconst useMainBaseStyles = makeResetStyles({\n padding: `0 ${tokens.spacingHorizontalXXS}`,\n});\n\n/**\n * Styles for the before/after icon slot\n */\nconst useIconBaseStyles = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n color: tokens.colorNeutralForeground2,\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500,\n});\n\nconst useIconBeforeStyles = makeStyles({\n medium: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n small: {\n paddingRight: tokens.spacingHorizontalXXS,\n },\n});\n\nconst useIconAfterStyles = makeStyles({\n medium: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n small: {\n paddingLeft: tokens.spacingHorizontalXXS,\n },\n});\n\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */\nexport const useTreeItemLayoutStyles_unstable = (state: TreeItemLayoutState): TreeItemLayoutState => {\n 'use no memo';\n\n const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;\n const rootStyles = useRootStyles();\n const rootBaseStyles = useRootBaseStyles();\n const actionsBaseStyles = useActionsBaseStyles();\n const asideBaseStyles = useAsideBaseStyles();\n\n const mainBaseStyles = useMainBaseStyles();\n\n const expandIconBaseStyles = useExpandIconBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const iconBeforeStyles = useIconBeforeStyles();\n const iconAfterStyles = useIconAfterStyles();\n\n const size = useTreeContext_unstable(ctx => ctx.size);\n const appearance = useTreeContext_unstable(ctx => ctx.appearance);\n const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n\n root.className = mergeClasses(\n treeItemLayoutClassNames.root,\n rootBaseStyles,\n rootStyles[appearance],\n rootStyles[size],\n rootStyles[itemType],\n root.className,\n );\n\n main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);\n\n if (expandIcon) {\n expandIcon.className = mergeClasses(\n treeItemLayoutClassNames.expandIcon,\n expandIconBaseStyles,\n expandIcon.className,\n );\n }\n\n if (iconBefore) {\n iconBefore.className = mergeClasses(\n treeItemLayoutClassNames.iconBefore,\n iconBaseStyles,\n iconBeforeStyles[size],\n iconBefore.className,\n );\n }\n\n if (iconAfter) {\n iconAfter.className = mergeClasses(\n treeItemLayoutClassNames.iconAfter,\n iconBaseStyles,\n iconAfterStyles[size],\n iconAfter.className,\n );\n }\n\n if (actions) {\n actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);\n }\n if (aside) {\n aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);\n }\n if (selector) {\n selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","iconBefore","main","iconAfter","expandIcon","aside","actions","selector","useRootBaseStyles","display","alignItems","minHeight","boxSizing","gridArea","color","colorNeutralForeground2Hover","backgroundColor","colorSubtleBackgroundHover","colorNeutralForeground3Hover","colorNeutralForeground2Pressed","colorSubtleBackgroundPressed","colorNeutralForeground3Pressed","useRootStyles","leaf","paddingLeft","spacingHorizontalXXL","branch","medium","body1","small","caption1","subtle","colorSubtleBackgroundLightAlphaHover","colorSubtleBackgroundLightAlphaPressed","transparent","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","useActionsBaseStyles","marginLeft","position","zIndex","padding","spacingHorizontalS","useAsideBaseStyles","spacingHorizontalM","gap","spacingHorizontalXS","useExpandIconBaseStyles","justifyContent","minWidth","colorNeutralForeground3","flex","spacingVerticalXS","useMainBaseStyles","spacingHorizontalXXS","useIconBaseStyles","colorNeutralForeground2","lineHeight","lineHeightBase500","fontSize","fontSizeBase500","useIconBeforeStyles","paddingRight","useIconAfterStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","rootBaseStyles","actionsBaseStyles","asideBaseStyles","mainBaseStyles","expandIconBaseStyles","iconBaseStyles","iconBeforeStyles","iconAfterStyles","size","ctx","appearance","itemType","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["../src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\n\nexport const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots> = {\n root: 'fui-TreeItemLayout',\n iconBefore: 'fui-TreeItemLayout__iconBefore',\n main: 'fui-TreeItemLayout__main',\n iconAfter: 'fui-TreeItemLayout__iconAfter',\n expandIcon: 'fui-TreeItemLayout__expandIcon',\n aside: 'fui-TreeItemLayout__aside',\n actions: 'fui-TreeItemLayout__actions',\n selector: 'fui-TreeItemLayout__selector',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n minHeight: '32px',\n boxSizing: 'border-box',\n gridArea: 'layout',\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Hover,\n },\n },\n ':active': {\n color: tokens.colorNeutralForeground2Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n },\n },\n});\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n leaf: {\n paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`,\n },\n branch: {\n paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`,\n },\n medium: {\n ...typographyStyles.body1,\n },\n small: {\n minHeight: '24px',\n ...typographyStyles.caption1,\n },\n // Appearance variations\n subtle: {},\n 'subtle-alpha': {\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n});\n\n/**\n * Styles for the action icon slot\n */\nconst useActionsBaseStyles = makeResetStyles({\n display: 'flex',\n marginLeft: 'auto',\n position: 'relative',\n zIndex: 1,\n gridArea: 'aside',\n padding: `0 ${tokens.spacingHorizontalS}`,\n});\n/**\n * Styles for the action icon slot\n */\nconst useAsideBaseStyles = makeResetStyles({\n display: 'flex',\n marginLeft: 'auto',\n alignItems: 'center',\n zIndex: 0,\n gridArea: 'aside',\n padding: `0 ${tokens.spacingHorizontalM}`,\n gap: tokens.spacingHorizontalXS,\n});\n\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconBaseStyles = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minWidth: '24px',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3,\n flex: `0 0 auto`,\n padding: `${tokens.spacingVerticalXS} 0`,\n});\n\n/**\n * Styles for the content slot\n */\nconst useMainBaseStyles = makeResetStyles({\n padding: `0 ${tokens.spacingHorizontalXXS}`,\n});\n\n/**\n * Styles for the before/after icon slot\n */\nconst useIconBaseStyles = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n color: tokens.colorNeutralForeground2,\n lineHeight: tokens.lineHeightBase500,\n fontSize: tokens.fontSizeBase500,\n});\n\nconst useIconBeforeStyles = makeStyles({\n medium: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n small: {\n paddingRight: tokens.spacingHorizontalXXS,\n },\n});\n\nconst useIconAfterStyles = makeStyles({\n medium: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n small: {\n paddingLeft: tokens.spacingHorizontalXXS,\n },\n});\n\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */\nexport const useTreeItemLayoutStyles_unstable = (state: TreeItemLayoutState): TreeItemLayoutState => {\n 'use no memo';\n\n const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;\n const rootStyles = useRootStyles();\n const rootBaseStyles = useRootBaseStyles();\n const actionsBaseStyles = useActionsBaseStyles();\n const asideBaseStyles = useAsideBaseStyles();\n\n const mainBaseStyles = useMainBaseStyles();\n\n const expandIconBaseStyles = useExpandIconBaseStyles();\n const iconBaseStyles = useIconBaseStyles();\n const iconBeforeStyles = useIconBeforeStyles();\n const iconAfterStyles = useIconAfterStyles();\n\n const size = useTreeContext_unstable(ctx => ctx.size);\n const appearance = useTreeContext_unstable(ctx => ctx.appearance);\n const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n\n root.className = mergeClasses(\n treeItemLayoutClassNames.root,\n rootBaseStyles,\n rootStyles[appearance],\n rootStyles[size],\n rootStyles[itemType],\n root.className,\n );\n\n main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);\n\n if (expandIcon) {\n expandIcon.className = mergeClasses(\n treeItemLayoutClassNames.expandIcon,\n expandIconBaseStyles,\n expandIcon.className,\n );\n }\n\n if (iconBefore) {\n iconBefore.className = mergeClasses(\n treeItemLayoutClassNames.iconBefore,\n iconBaseStyles,\n iconBeforeStyles[size],\n iconBefore.className,\n );\n }\n\n if (iconAfter) {\n iconAfter.className = mergeClasses(\n treeItemLayoutClassNames.iconAfter,\n iconBaseStyles,\n iconAfterStyles[size],\n iconAfter.className,\n );\n }\n\n if (actions) {\n actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);\n }\n if (aside) {\n aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);\n }\n if (selector) {\n selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","iconBefore","main","iconAfter","expandIcon","aside","actions","selector","useRootBaseStyles","display","alignItems","minHeight","boxSizing","gridArea","color","colorNeutralForeground2Hover","backgroundColor","colorSubtleBackgroundHover","colorNeutralForeground3Hover","colorNeutralForeground2Pressed","colorSubtleBackgroundPressed","colorNeutralForeground3Pressed","useRootStyles","leaf","paddingLeft","spacingHorizontalXXL","branch","medium","body1","small","caption1","subtle","colorSubtleBackgroundLightAlphaHover","colorSubtleBackgroundLightAlphaPressed","transparent","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","useActionsBaseStyles","marginLeft","position","zIndex","padding","spacingHorizontalS","useAsideBaseStyles","spacingHorizontalM","gap","spacingHorizontalXS","useExpandIconBaseStyles","justifyContent","minWidth","colorNeutralForeground3","flex","spacingVerticalXS","useMainBaseStyles","spacingHorizontalXXS","useIconBaseStyles","colorNeutralForeground2","lineHeight","lineHeightBase500","fontSize","fontSizeBase500","useIconBeforeStyles","paddingRight","useIconAfterStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","rootBaseStyles","actionsBaseStyles","asideBaseStyles","mainBaseStyles","expandIconBaseStyles","iconBaseStyles","iconBeforeStyles","iconAfterStyles","size","ctx","appearance","itemType","className"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles';\nimport type { TreeItemPersonaLayoutProps } from './TreeItemPersonaLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.\n * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps> = React.forwardRef((props, ref) => {\n const state = useTreeItemPersonaLayout_unstable(props, ref);\n\n useTreeItemPersonaLayoutStyles_unstable(state);\n useCustomStyleHook_unstable('useTreeItemPersonaLayoutStyles_unstable')(state);\n\n const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n\n return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\n\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n"],"names":["React","useTreeItemPersonaLayout_unstable","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayoutContextValues_unstable","useCustomStyleHook_unstable","TreeItemPersonaLayout","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,uCAAuC,QAAQ,0CAA0C;AAGlG,SAASC,8CAA8C,QAAQ,0CAA0C;AACzG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;CAIC,GACD,OAAO,MAAMC,sCAAyEN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,QAAQT,kCAAkCO,OAAOC;IAEvDN,wCAAwCO;IACxCL,4BAA4B,2CAA2CK;IAEvE,MAAMC,gBAAgBP,+CAA+CM;IAErE,OAAOR,qCAAqCQ,OAAOC;AACrD,GAAG;AAEHL,sBAAsBM,WAAW,GAAG"}
1
+ {"version":3,"sources":["../src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles';\nimport type { TreeItemPersonaLayoutProps } from './TreeItemPersonaLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.\n * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps> = React.forwardRef((props, ref) => {\n const state = useTreeItemPersonaLayout_unstable(props, ref);\n\n useTreeItemPersonaLayoutStyles_unstable(state);\n useCustomStyleHook_unstable('useTreeItemPersonaLayoutStyles_unstable')(state);\n\n const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n\n return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\n\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n"],"names":["React","useTreeItemPersonaLayout_unstable","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayoutContextValues_unstable","useCustomStyleHook_unstable","TreeItemPersonaLayout","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,uCAAuC,QAAQ,0CAA0C;AAGlG,SAASC,8CAA8C,QAAQ,0CAA0C;AACzG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;CAIC,GACD,OAAO,MAAMC,sCAAyEN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,QAAQT,kCAAkCO,OAAOC;IAEvDN,wCAAwCO;IACxCL,4BAA4B,2CAA2CK;IAEvE,MAAMC,gBAAgBP,+CAA+CM;IAErE,OAAOR,qCAAqCQ,OAAOC;AACrD,GAAG;AAEHL,sBAAsBM,WAAW,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarContextValue, AvatarSize } from '@fluentui/react-avatar';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { TreeItemLayoutSlots } from '../TreeItemLayout/TreeItemLayout.types';\n\nexport type TreeItemPersonaLayoutContextValues = {\n avatar: AvatarContextValue;\n};\n\nexport type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' | 'aside' | 'expandIcon' | 'selector'> & {\n root: NonNullable<Slot<'div'>>;\n /**\n * Avatar to display.\n */\n media: NonNullable<Slot<'div'>>;\n /**\n * Content. Children of the root slot are automatically rendered here\n */\n main: NonNullable<Slot<'div'>>;\n /**\n * Secondary text that describes or complements the content\n */\n description?: Slot<'div'>;\n};\n\n/**\n * TreeItemPersonaLayout Props\n */\nexport type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemPersonaLayout\n */\nexport type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {\n avatarSize: AvatarSize;\n buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AA8BA;;CAEC,GACD,WAGE"}
1
+ {"version":3,"sources":["../src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarContextValue, AvatarSize } from '@fluentui/react-avatar';\nimport { ButtonContextValue } from '@fluentui/react-button';\nimport { TreeItemLayoutSlots } from '../TreeItemLayout/TreeItemLayout.types';\n\nexport type TreeItemPersonaLayoutContextValues = {\n avatar: AvatarContextValue;\n};\n\nexport type TreeItemPersonaLayoutSlots = Pick<TreeItemLayoutSlots, 'actions' | 'aside' | 'expandIcon' | 'selector'> & {\n root: NonNullable<Slot<'div'>>;\n /**\n * Avatar to display.\n */\n media: NonNullable<Slot<'div'>>;\n /**\n * Content. Children of the root slot are automatically rendered here\n */\n main: NonNullable<Slot<'div'>>;\n /**\n * Secondary text that describes or complements the content\n */\n description?: Slot<'div'>;\n};\n\n/**\n * TreeItemPersonaLayout Props\n */\nexport type TreeItemPersonaLayoutProps = ComponentProps<Partial<TreeItemPersonaLayoutSlots>>;\n\n/**\n * State used in rendering TreeItemPersonaLayout\n */\nexport type TreeItemPersonaLayoutState = ComponentState<TreeItemPersonaLayoutSlots> & {\n avatarSize: AvatarSize;\n buttonContextValue: ButtonContextValue;\n};\n"],"names":[],"mappings":"AA8BA;;CAEC,GACD,WAGE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/TreeItemPersonaLayout/index.ts"],"sourcesContent":["export { TreeItemPersonaLayout } from './TreeItemPersonaLayout';\nexport type {\n TreeItemPersonaLayoutContextValues,\n TreeItemPersonaLayoutProps,\n TreeItemPersonaLayoutSlots,\n TreeItemPersonaLayoutState,\n} from './TreeItemPersonaLayout.types';\nexport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nexport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nexport {\n treeItemPersonaLayoutClassNames,\n useTreeItemPersonaLayoutStyles_unstable,\n} from './useTreeItemPersonaLayoutStyles.styles';\n"],"names":["TreeItemPersonaLayout","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayout_unstable","treeItemPersonaLayoutClassNames","useTreeItemPersonaLayoutStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,qBAAqB,QAAQ,0BAA0B;AAOhE,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SACEC,+BAA+B,EAC/BC,uCAAuC,QAClC,0CAA0C"}
1
+ {"version":3,"sources":["../src/components/TreeItemPersonaLayout/index.ts"],"sourcesContent":["export { TreeItemPersonaLayout } from './TreeItemPersonaLayout';\nexport type {\n TreeItemPersonaLayoutContextValues,\n TreeItemPersonaLayoutProps,\n TreeItemPersonaLayoutSlots,\n TreeItemPersonaLayoutState,\n} from './TreeItemPersonaLayout.types';\nexport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nexport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nexport {\n treeItemPersonaLayoutClassNames,\n useTreeItemPersonaLayoutStyles_unstable,\n} from './useTreeItemPersonaLayoutStyles.styles';\n"],"names":["TreeItemPersonaLayout","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayout_unstable","treeItemPersonaLayoutClassNames","useTreeItemPersonaLayoutStyles_unstable"],"mappings":"AAAA,SAASA,qBAAqB,QAAQ,0BAA0B;AAOhE,SAASC,oCAAoC,QAAQ,gCAAgC;AACrF,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SACEC,+BAA+B,EAC/BC,uCAAuC,QAClC,0CAA0C"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type {\n TreeItemPersonaLayoutState,\n TreeItemPersonaLayoutContextValues,\n TreeItemPersonaLayoutSlots,\n} from './TreeItemPersonaLayout.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (\n state: TreeItemPersonaLayoutState,\n contextValues: TreeItemPersonaLayoutContextValues,\n) => {\n assertSlots<TreeItemPersonaLayoutSlots>(state);\n\n return (\n <state.root>\n {state.expandIcon && <state.expandIcon />}\n {state.selector && <state.selector />}\n <AvatarContextProvider value={contextValues.avatar}>\n <state.media />\n </AvatarContextProvider>\n <state.main />\n {state.description && <state.description />}\n <ButtonContextProvider value={state.buttonContextValue}>\n {state.actions && <state.actions />}\n {state.aside && <state.aside />}\n </ButtonContextProvider>\n </state.root>\n );\n};\n"],"names":["assertSlots","AvatarContextProvider","ButtonContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","root","expandIcon","selector","value","avatar","media","main","description","buttonContextValue","actions","aside"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAMxD,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC;IAEAL,YAAwCI;IAExC,qBACE,MAACA,MAAME,IAAI;;YACRF,MAAMG,UAAU,kBAAI,KAACH,MAAMG,UAAU;YACrCH,MAAMI,QAAQ,kBAAI,KAACJ,MAAMI,QAAQ;0BAClC,KAACP;gBAAsBQ,OAAOJ,cAAcK,MAAM;0BAChD,cAAA,KAACN,MAAMO,KAAK;;0BAEd,KAACP,MAAMQ,IAAI;YACVR,MAAMS,WAAW,kBAAI,KAACT,MAAMS,WAAW;0BACxC,MAACX;gBAAsBO,OAAOL,MAAMU,kBAAkB;;oBACnDV,MAAMW,OAAO,kBAAI,KAACX,MAAMW,OAAO;oBAC/BX,MAAMY,KAAK,kBAAI,KAACZ,MAAMY,KAAK;;;;;AAIpC,EAAE"}
1
+ {"version":3,"sources":["../src/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type {\n TreeItemPersonaLayoutState,\n TreeItemPersonaLayoutContextValues,\n TreeItemPersonaLayoutSlots,\n} from './TreeItemPersonaLayout.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (\n state: TreeItemPersonaLayoutState,\n contextValues: TreeItemPersonaLayoutContextValues,\n) => {\n assertSlots<TreeItemPersonaLayoutSlots>(state);\n\n return (\n <state.root>\n {state.expandIcon && <state.expandIcon />}\n {state.selector && <state.selector />}\n <AvatarContextProvider value={contextValues.avatar}>\n <state.media />\n </AvatarContextProvider>\n <state.main />\n {state.description && <state.description />}\n <ButtonContextProvider value={state.buttonContextValue}>\n {state.actions && <state.actions />}\n {state.aside && <state.aside />}\n </ButtonContextProvider>\n </state.root>\n );\n};\n"],"names":["assertSlots","AvatarContextProvider","ButtonContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","root","expandIcon","selector","value","avatar","media","main","description","buttonContextValue","actions","aside"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAMxD,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC;IAEAL,YAAwCI;IAExC,qBACE,MAACA,MAAME,IAAI;;YACRF,MAAMG,UAAU,kBAAI,KAACH,MAAMG,UAAU;YACrCH,MAAMI,QAAQ,kBAAI,KAACJ,MAAMI,QAAQ;0BAClC,KAACP;gBAAsBQ,OAAOJ,cAAcK,MAAM;0BAChD,cAAA,KAACN,MAAMO,KAAK;;0BAEd,KAACP,MAAMQ,IAAI;YACVR,MAAMS,WAAW,kBAAI,KAACT,MAAMS,WAAW;0BACxC,MAACX;gBAAsBO,OAAOL,MAAMU,kBAAkB;;oBACnDV,MAAMW,OAAO,kBAAI,KAACX,MAAMW,OAAO;oBAC/BX,MAAMY,KAAK,kBAAI,KAACZ,MAAMY,KAAK;;;;;AAIpC,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { slot } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n props: TreeItemPersonaLayoutProps,\n ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n const { media, children, main, description } = props;\n\n const treeItemLayoutState = useTreeItemLayout_unstable(\n {\n ...props,\n iconBefore: null,\n iconAfter: null,\n },\n ref,\n );\n\n const size = useTreeContext_unstable(ctx => ctx.size);\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n return {\n ...treeItemLayoutState,\n components: {\n expandIcon: 'div',\n main: 'div',\n description: 'div',\n root: 'div',\n media: 'div',\n aside: 'div',\n actions: 'div',\n // Casting here to a union between checkbox and radio\n selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\n },\n avatarSize: treeAvatarSize[size],\n main: slot.always(main, { defaultProps: { children }, elementType: 'div' }),\n media: slot.always(media, { elementType: 'div' }),\n description: slot.optional(description, { elementType: 'div' }),\n };\n};\n"],"names":["React","slot","useTreeContext_unstable","treeAvatarSize","useTreeItemLayout_unstable","Checkbox","Radio","useTreeItemPersonaLayout_unstable","props","ref","media","children","main","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","selectionMode","components","expandIcon","root","aside","actions","selector","avatarSize","always","defaultProps","elementType","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,uBAAuB,QAAQ,iBAAiB;AACzD,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,SAASC,QAAQ,QAAuB,2BAA2B;AACnE,SAASC,KAAK,QAAoB,wBAAwB;AAE1D;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGL;IAE/C,MAAMM,sBAAsBV,2BAC1B;QACE,GAAGI,KAAK;QACRO,YAAY;QACZC,WAAW;IACb,GACAP;IAGF,MAAMQ,OAAOf,wBAAwBgB,CAAAA,MAAOA,IAAID,IAAI;IACpD,MAAME,gBAAgBjB,wBAAwBgB,CAAAA,MAAOA,IAAIC,aAAa;IAEtE,OAAO;QACL,GAAGL,mBAAmB;QACtBM,YAAY;YACVC,YAAY;YACZT,MAAM;YACNC,aAAa;YACbS,MAAM;YACNZ,OAAO;YACPa,OAAO;YACPC,SAAS;YACT,qDAAqD;YACrDC,UAAWN,kBAAkB,gBAAgBd,WAAWC;QAC1D;QACAoB,YAAYvB,cAAc,CAACc,KAAK;QAChCL,MAAMX,KAAK0B,MAAM,CAACf,MAAM;YAAEgB,cAAc;gBAAEjB;YAAS;YAAGkB,aAAa;QAAM;QACzEnB,OAAOT,KAAK0B,MAAM,CAACjB,OAAO;YAAEmB,aAAa;QAAM;QAC/ChB,aAAaZ,KAAK6B,QAAQ,CAACjB,aAAa;YAAEgB,aAAa;QAAM;IAC/D;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { slot } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n props: TreeItemPersonaLayoutProps,\n ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n const { media, children, main, description } = props;\n\n const treeItemLayoutState = useTreeItemLayout_unstable(\n {\n ...props,\n iconBefore: null,\n iconAfter: null,\n },\n ref,\n );\n\n const size = useTreeContext_unstable(ctx => ctx.size);\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n return {\n ...treeItemLayoutState,\n components: {\n expandIcon: 'div',\n main: 'div',\n description: 'div',\n root: 'div',\n media: 'div',\n aside: 'div',\n actions: 'div',\n // Casting here to a union between checkbox and radio\n selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\n },\n avatarSize: treeAvatarSize[size],\n main: slot.always(main, { defaultProps: { children }, elementType: 'div' }),\n media: slot.always(media, { elementType: 'div' }),\n description: slot.optional(description, { elementType: 'div' }),\n };\n};\n"],"names":["React","slot","useTreeContext_unstable","treeAvatarSize","useTreeItemLayout_unstable","Checkbox","Radio","useTreeItemPersonaLayout_unstable","props","ref","media","children","main","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","selectionMode","components","expandIcon","root","aside","actions","selector","avatarSize","always","defaultProps","elementType","optional"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,uBAAuB,QAAQ,iBAAiB;AACzD,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,SAASC,QAAQ,QAAuB,2BAA2B;AACnE,SAASC,KAAK,QAAoB,wBAAwB;AAE1D;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGL;IAE/C,MAAMM,sBAAsBV,2BAC1B;QACE,GAAGI,KAAK;QACRO,YAAY;QACZC,WAAW;IACb,GACAP;IAGF,MAAMQ,OAAOf,wBAAwBgB,CAAAA,MAAOA,IAAID,IAAI;IACpD,MAAME,gBAAgBjB,wBAAwBgB,CAAAA,MAAOA,IAAIC,aAAa;IAEtE,OAAO;QACL,GAAGL,mBAAmB;QACtBM,YAAY;YACVC,YAAY;YACZT,MAAM;YACNC,aAAa;YACbS,MAAM;YACNZ,OAAO;YACPa,OAAO;YACPC,SAAS;YACT,qDAAqD;YACrDC,UAAWN,kBAAkB,gBAAgBd,WAAWC;QAC1D;QACAoB,YAAYvB,cAAc,CAACc,KAAK;QAChCL,MAAMX,KAAK0B,MAAM,CAACf,MAAM;YAAEgB,cAAc;gBAAEjB;YAAS;YAAGkB,aAAa;QAAM;QACzEnB,OAAOT,KAAK0B,MAAM,CAACjB,OAAO;YAAEmB,aAAa;QAAM;QAC/ChB,aAAaZ,KAAK6B,QAAQ,CAACjB,aAAa;YAAEgB,aAAa;QAAM;IAC/D;AACF,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.ts"],"sourcesContent":["import type { AvatarContextValue } from '@fluentui/react-avatar';\nimport * as React from 'react';\nimport type { TreeItemPersonaLayoutState, TreeItemPersonaLayoutContextValues } from './TreeItemPersonaLayout.types';\n\nexport function useTreeItemPersonaLayoutContextValues_unstable(\n state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutContextValues {\n const { avatarSize } = state;\n\n const avatar = React.useMemo<AvatarContextValue>(() => ({ size: avatarSize }), [avatarSize]);\n\n return { avatar };\n}\n"],"names":["React","useTreeItemPersonaLayoutContextValues_unstable","state","avatarSize","avatar","useMemo","size"],"rangeMappings":";;;;;;;;;;;","mappings":"AACA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,+CACdC,KAAiC;IAEjC,MAAM,EAAEC,UAAU,EAAE,GAAGD;IAEvB,MAAME,SAASJ,MAAMK,OAAO,CAAqB,IAAO,CAAA;YAAEC,MAAMH;QAAW,CAAA,GAAI;QAACA;KAAW;IAE3F,OAAO;QAAEC;IAAO;AAClB"}
1
+ {"version":3,"sources":["../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.ts"],"sourcesContent":["import type { AvatarContextValue } from '@fluentui/react-avatar';\nimport * as React from 'react';\nimport type { TreeItemPersonaLayoutState, TreeItemPersonaLayoutContextValues } from './TreeItemPersonaLayout.types';\n\nexport function useTreeItemPersonaLayoutContextValues_unstable(\n state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutContextValues {\n const { avatarSize } = state;\n\n const avatar = React.useMemo<AvatarContextValue>(() => ({ size: avatarSize }), [avatarSize]);\n\n return { avatar };\n}\n"],"names":["React","useTreeItemPersonaLayoutContextValues_unstable","state","avatarSize","avatar","useMemo","size"],"mappings":"AACA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,+CACdC,KAAiC;IAEjC,MAAM,EAAEC,UAAU,EAAE,GAAGD;IAEvB,MAAME,SAASJ,MAAMK,OAAO,CAAqB,IAAO,CAAA;YAAEC,MAAMH;QAAW,CAAA,GAAI;QAACA;KAAW;IAE3F,OAAO;QAAEC;IAAO;AAClB"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts"],"sourcesContent":["import type { TreeItemPersonaLayoutSlots, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\n\nexport const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutSlots> = {\n root: 'fui-TreeItemPersonaLayout',\n media: 'fui-TreeItemPersonaLayout__media',\n description: 'fui-TreeItemPersonaLayout__description',\n main: 'fui-TreeItemPersonaLayout__main',\n expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n aside: 'fui-TreeItemPersonaLayout__aside',\n actions: 'fui-TreeItemPersonaLayout__actions',\n selector: 'fui-TreeItemPersonaLayout__selector',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n display: 'grid',\n gridTemplateRows: '1fr auto',\n gridTemplateColumns: 'auto auto 1fr auto',\n gridTemplateAreas: `\n \"expandIcon media main aside\"\n \"expandIcon media description aside\"\n `,\n alignItems: 'center',\n ...typographyStyles.body1,\n ':active': {\n color: tokens.colorNeutralForeground2Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n },\n },\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Hover,\n },\n },\n});\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n leaf: {\n paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`,\n },\n branch: {\n paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`,\n },\n});\n\n/**\n * Styles for the expand icon slot\n */\nconst useMediaBaseStyles = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n width: '32px',\n height: '32px',\n gridArea: 'media',\n padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalXXS}`,\n});\n\nconst useMainBaseStyles = makeResetStyles({\n gridArea: 'main',\n padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`,\n});\n\nconst useMainStyles = makeStyles({\n withDescription: {\n padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalS}`,\n },\n});\n\nconst useDescriptionBaseStyles = makeResetStyles({\n gridArea: 'description',\n ...typographyStyles.caption1,\n padding: `0 ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`,\n});\n\n/**\n * Styles for the action icon slot\n */\nconst useActionsBaseStyles = makeResetStyles({\n display: 'flex',\n marginLeft: 'auto',\n position: 'relative',\n zIndex: 1,\n gridArea: 'aside',\n padding: `0 ${tokens.spacingHorizontalS}`,\n});\n/**\n * Styles for the action icon slot\n */\nconst useAsideBaseStyles = makeResetStyles({\n display: 'flex',\n marginLeft: 'auto',\n alignItems: 'center',\n zIndex: 0,\n gridArea: 'aside',\n padding: `0 ${tokens.spacingHorizontalM}`,\n gap: tokens.spacingHorizontalXS,\n});\n\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconBaseStyles = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minWidth: '24px',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3,\n gridArea: 'expandIcon',\n flex: `0 0 auto`,\n padding: `${tokens.spacingVerticalXS} 0`,\n});\n\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */\nexport const useTreeItemPersonaLayoutStyles_unstable = (\n state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n const rootStyles = useRootStyles();\n const mediaBaseStyles = useMediaBaseStyles();\n const descriptionBaseStyles = useDescriptionBaseStyles();\n const actionsBaseStyles = useActionsBaseStyles();\n const asideBaseStyles = useAsideBaseStyles();\n const expandIconBaseStyles = useExpandIconBaseStyles();\n const mainBaseStyles = useMainBaseStyles();\n const mainStyles = useMainStyles();\n\n const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n\n state.root.className = mergeClasses(\n treeItemPersonaLayoutClassNames.root,\n rootBaseStyles,\n rootStyles[itemType],\n state.root.className,\n );\n\n state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);\n\n if (state.main) {\n state.main.className = mergeClasses(\n treeItemPersonaLayoutClassNames.main,\n mainBaseStyles,\n state.description && mainStyles.withDescription,\n state.main.className,\n );\n }\n if (state.description) {\n state.description.className = mergeClasses(\n treeItemPersonaLayoutClassNames.description,\n descriptionBaseStyles,\n state.description.className,\n );\n }\n if (state.actions) {\n state.actions.className = mergeClasses(\n treeItemPersonaLayoutClassNames.actions,\n actionsBaseStyles,\n state.actions.className,\n );\n }\n if (state.aside) {\n state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(\n treeItemPersonaLayoutClassNames.expandIcon,\n expandIconBaseStyles,\n state.expandIcon.className,\n );\n }\n\n if (state.selector) {\n state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","treeItemPersonaLayoutClassNames","root","media","description","main","expandIcon","aside","actions","selector","useRootBaseStyles","display","gridTemplateRows","gridTemplateColumns","gridTemplateAreas","alignItems","body1","color","colorNeutralForeground2Pressed","backgroundColor","colorSubtleBackgroundPressed","colorNeutralForeground3Pressed","colorNeutralForeground2Hover","colorSubtleBackgroundHover","colorNeutralForeground3Hover","useRootStyles","leaf","paddingLeft","spacingHorizontalXXL","branch","useMediaBaseStyles","width","height","gridArea","padding","spacingHorizontalXS","spacingHorizontalXXS","useMainBaseStyles","spacingVerticalMNudge","spacingHorizontalS","useMainStyles","withDescription","useDescriptionBaseStyles","caption1","useActionsBaseStyles","marginLeft","position","zIndex","useAsideBaseStyles","spacingHorizontalM","gap","useExpandIconBaseStyles","justifyContent","minWidth","boxSizing","colorNeutralForeground3","flex","spacingVerticalXS","useTreeItemPersonaLayoutStyles_unstable","state","rootBaseStyles","rootStyles","mediaBaseStyles","descriptionBaseStyles","actionsBaseStyles","asideBaseStyles","expandIconBaseStyles","mainBaseStyles","mainStyles","itemType","ctx","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts"],"sourcesContent":["import type { TreeItemPersonaLayoutSlots, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\n\nexport const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutSlots> = {\n root: 'fui-TreeItemPersonaLayout',\n media: 'fui-TreeItemPersonaLayout__media',\n description: 'fui-TreeItemPersonaLayout__description',\n main: 'fui-TreeItemPersonaLayout__main',\n expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n aside: 'fui-TreeItemPersonaLayout__aside',\n actions: 'fui-TreeItemPersonaLayout__actions',\n selector: 'fui-TreeItemPersonaLayout__selector',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n display: 'grid',\n gridTemplateRows: '1fr auto',\n gridTemplateColumns: 'auto auto 1fr auto',\n gridTemplateAreas: `\n \"expandIcon media main aside\"\n \"expandIcon media description aside\"\n `,\n alignItems: 'center',\n ...typographyStyles.body1,\n ':active': {\n color: tokens.colorNeutralForeground2Pressed,\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Pressed,\n },\n },\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n color: tokens.colorNeutralForeground3Hover,\n },\n },\n});\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n leaf: {\n paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`,\n },\n branch: {\n paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`,\n },\n});\n\n/**\n * Styles for the expand icon slot\n */\nconst useMediaBaseStyles = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n width: '32px',\n height: '32px',\n gridArea: 'media',\n padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalXXS}`,\n});\n\nconst useMainBaseStyles = makeResetStyles({\n gridArea: 'main',\n padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`,\n});\n\nconst useMainStyles = makeStyles({\n withDescription: {\n padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalS}`,\n },\n});\n\nconst useDescriptionBaseStyles = makeResetStyles({\n gridArea: 'description',\n ...typographyStyles.caption1,\n padding: `0 ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`,\n});\n\n/**\n * Styles for the action icon slot\n */\nconst useActionsBaseStyles = makeResetStyles({\n display: 'flex',\n marginLeft: 'auto',\n position: 'relative',\n zIndex: 1,\n gridArea: 'aside',\n padding: `0 ${tokens.spacingHorizontalS}`,\n});\n/**\n * Styles for the action icon slot\n */\nconst useAsideBaseStyles = makeResetStyles({\n display: 'flex',\n marginLeft: 'auto',\n alignItems: 'center',\n zIndex: 0,\n gridArea: 'aside',\n padding: `0 ${tokens.spacingHorizontalM}`,\n gap: tokens.spacingHorizontalXS,\n});\n\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconBaseStyles = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minWidth: '24px',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3,\n gridArea: 'expandIcon',\n flex: `0 0 auto`,\n padding: `${tokens.spacingVerticalXS} 0`,\n});\n\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */\nexport const useTreeItemPersonaLayoutStyles_unstable = (\n state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n const rootStyles = useRootStyles();\n const mediaBaseStyles = useMediaBaseStyles();\n const descriptionBaseStyles = useDescriptionBaseStyles();\n const actionsBaseStyles = useActionsBaseStyles();\n const asideBaseStyles = useAsideBaseStyles();\n const expandIconBaseStyles = useExpandIconBaseStyles();\n const mainBaseStyles = useMainBaseStyles();\n const mainStyles = useMainStyles();\n\n const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n\n state.root.className = mergeClasses(\n treeItemPersonaLayoutClassNames.root,\n rootBaseStyles,\n rootStyles[itemType],\n state.root.className,\n );\n\n state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);\n\n if (state.main) {\n state.main.className = mergeClasses(\n treeItemPersonaLayoutClassNames.main,\n mainBaseStyles,\n state.description && mainStyles.withDescription,\n state.main.className,\n );\n }\n if (state.description) {\n state.description.className = mergeClasses(\n treeItemPersonaLayoutClassNames.description,\n descriptionBaseStyles,\n state.description.className,\n );\n }\n if (state.actions) {\n state.actions.className = mergeClasses(\n treeItemPersonaLayoutClassNames.actions,\n actionsBaseStyles,\n state.actions.className,\n );\n }\n if (state.aside) {\n state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(\n treeItemPersonaLayoutClassNames.expandIcon,\n expandIconBaseStyles,\n state.expandIcon.className,\n );\n }\n\n if (state.selector) {\n state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","treeItemPersonaLayoutClassNames","root","media","description","main","expandIcon","aside","actions","selector","useRootBaseStyles","display","gridTemplateRows","gridTemplateColumns","gridTemplateAreas","alignItems","body1","color","colorNeutralForeground2Pressed","backgroundColor","colorSubtleBackgroundPressed","colorNeutralForeground3Pressed","colorNeutralForeground2Hover","colorSubtleBackgroundHover","colorNeutralForeground3Hover","useRootStyles","leaf","paddingLeft","spacingHorizontalXXL","branch","useMediaBaseStyles","width","height","gridArea","padding","spacingHorizontalXS","spacingHorizontalXXS","useMainBaseStyles","spacingVerticalMNudge","spacingHorizontalS","useMainStyles","withDescription","useDescriptionBaseStyles","caption1","useActionsBaseStyles","marginLeft","position","zIndex","useAsideBaseStyles","spacingHorizontalM","gap","useExpandIconBaseStyles","justifyContent","minWidth","boxSizing","colorNeutralForeground3","flex","spacingVerticalXS","useTreeItemPersonaLayoutStyles_unstable","state","rootBaseStyles","rootStyles","mediaBaseStyles","descriptionBaseStyles","actionsBaseStyles","asideBaseStyles","expandIconBaseStyles","mainBaseStyles","mainStyles","itemType","ctx","className"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/TreeProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SubtreeContext, SubtreeContextValue, TreeContextValue, TreeContext } from '../contexts';\n\n/**\n * @internal\n */\nconst rootSubtreeContextValue: SubtreeContextValue = {\n level: 1,\n contextType: 'subtree',\n};\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const TreeProvider = (props: React.ProviderProps<TreeContextValue | SubtreeContextValue>): JSX.Element => {\n if (props.value.contextType === 'subtree') {\n return <SubtreeContext.Provider value={props.value}>{props.children}</SubtreeContext.Provider>;\n }\n return (\n <TreeContext.Provider value={props.value}>\n <SubtreeContext.Provider value={rootSubtreeContextValue}>{props.children}</SubtreeContext.Provider>\n </TreeContext.Provider>\n );\n};\n\nTreeProvider.displayName = 'TreeProvider';\n\nexport type TreeRootResetProps = {\n children?: React.ReactNode;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const TreeRootReset = (props: TreeRootResetProps): JSX.Element => (\n <SubtreeContext.Provider value={undefined as unknown as SubtreeContextValue}>\n {props.children}\n </SubtreeContext.Provider>\n);\n"],"names":["React","SubtreeContext","TreeContext","rootSubtreeContextValue","level","contextType","TreeProvider","props","value","Provider","children","displayName","TreeRootReset","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,EAAyCC,WAAW,QAAQ,cAAc;AAEjG;;CAEC,GACD,MAAMC,0BAA+C;IACnDC,OAAO;IACPC,aAAa;AACf;AAEA,4DAA4D;AAC5D,OAAO,MAAMC,eAAe,CAACC;IAC3B,IAAIA,MAAMC,KAAK,CAACH,WAAW,KAAK,WAAW;QACzC,qBAAO,oBAACJ,eAAeQ,QAAQ;YAACD,OAAOD,MAAMC,KAAK;WAAGD,MAAMG,QAAQ;IACrE;IACA,qBACE,oBAACR,YAAYO,QAAQ;QAACD,OAAOD,MAAMC,KAAK;qBACtC,oBAACP,eAAeQ,QAAQ;QAACD,OAAOL;OAA0BI,MAAMG,QAAQ;AAG9E,EAAE;AAEFJ,aAAaK,WAAW,GAAG;AAM3B,4DAA4D;AAC5D,OAAO,MAAMC,gBAAgB,CAACL,sBAC5B,oBAACN,eAAeQ,QAAQ;QAACD,OAAOK;OAC7BN,MAAMG,QAAQ,EAEjB"}
1
+ {"version":3,"sources":["../src/components/TreeProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SubtreeContext, SubtreeContextValue, TreeContextValue, TreeContext } from '../contexts';\n\n/**\n * @internal\n */\nconst rootSubtreeContextValue: SubtreeContextValue = {\n level: 1,\n contextType: 'subtree',\n};\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const TreeProvider = (props: React.ProviderProps<TreeContextValue | SubtreeContextValue>): JSX.Element => {\n if (props.value.contextType === 'subtree') {\n return <SubtreeContext.Provider value={props.value}>{props.children}</SubtreeContext.Provider>;\n }\n return (\n <TreeContext.Provider value={props.value}>\n <SubtreeContext.Provider value={rootSubtreeContextValue}>{props.children}</SubtreeContext.Provider>\n </TreeContext.Provider>\n );\n};\n\nTreeProvider.displayName = 'TreeProvider';\n\nexport type TreeRootResetProps = {\n children?: React.ReactNode;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const TreeRootReset = (props: TreeRootResetProps): JSX.Element => (\n <SubtreeContext.Provider value={undefined as unknown as SubtreeContextValue}>\n {props.children}\n </SubtreeContext.Provider>\n);\n"],"names":["React","SubtreeContext","TreeContext","rootSubtreeContextValue","level","contextType","TreeProvider","props","value","Provider","children","displayName","TreeRootReset","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,EAAyCC,WAAW,QAAQ,cAAc;AAEjG;;CAEC,GACD,MAAMC,0BAA+C;IACnDC,OAAO;IACPC,aAAa;AACf;AAEA,4DAA4D;AAC5D,OAAO,MAAMC,eAAe,CAACC;IAC3B,IAAIA,MAAMC,KAAK,CAACH,WAAW,KAAK,WAAW;QACzC,qBAAO,oBAACJ,eAAeQ,QAAQ;YAACD,OAAOD,MAAMC,KAAK;WAAGD,MAAMG,QAAQ;IACrE;IACA,qBACE,oBAACR,YAAYO,QAAQ;QAACD,OAAOD,MAAMC,KAAK;qBACtC,oBAACP,eAAeQ,QAAQ;QAACD,OAAOL;OAA0BI,MAAMG,QAAQ;AAG9E,EAAE;AAEFJ,aAAaK,WAAW,GAAG;AAM3B,4DAA4D;AAC5D,OAAO,MAAMC,gBAAgB,CAACL,sBAC5B,oBAACN,eAAeQ,QAAQ;QAACD,OAAOK;OAC7BN,MAAMG,QAAQ,EAEjB"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { TreeContextValue, TreeItemRequest } from './treeContext';\nexport { TreeContext, useTreeContext_unstable } from './treeContext';\nexport type { SubtreeContextValue } from './subtreeContext';\nexport { SubtreeContext, useSubtreeContext_unstable } from './subtreeContext';\nexport type { TreeItemContextValue } from './treeItemContext';\nexport { TreeItemProvider, useTreeItemContext_unstable } from './treeItemContext';\n"],"names":["TreeContext","useTreeContext_unstable","SubtreeContext","useSubtreeContext_unstable","TreeItemProvider","useTreeItemContext_unstable"],"rangeMappings":";;","mappings":"AACA,SAASA,WAAW,EAAEC,uBAAuB,QAAQ,gBAAgB;AAErE,SAASC,cAAc,EAAEC,0BAA0B,QAAQ,mBAAmB;AAE9E,SAASC,gBAAgB,EAAEC,2BAA2B,QAAQ,oBAAoB"}
1
+ {"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { TreeContextValue, TreeItemRequest } from './treeContext';\nexport { TreeContext, useTreeContext_unstable } from './treeContext';\nexport type { SubtreeContextValue } from './subtreeContext';\nexport { SubtreeContext, useSubtreeContext_unstable } from './subtreeContext';\nexport type { TreeItemContextValue } from './treeItemContext';\nexport { TreeItemProvider, useTreeItemContext_unstable } from './treeItemContext';\n"],"names":["TreeContext","useTreeContext_unstable","SubtreeContext","useSubtreeContext_unstable","TreeItemProvider","useTreeItemContext_unstable"],"mappings":"AACA,SAASA,WAAW,EAAEC,uBAAuB,QAAQ,gBAAgB;AAErE,SAASC,cAAc,EAAEC,0BAA0B,QAAQ,mBAAmB;AAE9E,SAASC,gBAAgB,EAAEC,2BAA2B,QAAQ,oBAAoB"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/contexts/subtreeContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type SubtreeContextValue = {\n contextType: 'subtree';\n level: number;\n};\n\n/**\n * @internal\n */\nconst defaultSubTreeContextValue: SubtreeContextValue = {\n level: 0,\n contextType: 'subtree',\n};\n\n/**\n * @internal\n */\nexport const SubtreeContext: React.Context<SubtreeContextValue> = React.createContext<SubtreeContextValue | undefined>(\n undefined,\n) as React.Context<SubtreeContextValue>;\n\nexport const useSubtreeContext_unstable = () => {\n return React.useContext(SubtreeContext) ?? defaultSubTreeContextValue;\n};\n"],"names":["React","defaultSubTreeContextValue","level","contextType","SubtreeContext","createContext","undefined","useSubtreeContext_unstable","useContext"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B;;CAEC,GACD,MAAMC,6BAAkD;IACtDC,OAAO;IACPC,aAAa;AACf;AAEA;;CAEC,GACD,OAAO,MAAMC,iBAAqDJ,MAAMK,aAAa,CACnFC,WACsC;AAExC,OAAO,MAAMC,6BAA6B;QACjCP;IAAP,OAAOA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACJ,6BAAjBJ,+BAAAA,oBAAoCC;AAC7C,EAAE"}
1
+ {"version":3,"sources":["../src/contexts/subtreeContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type SubtreeContextValue = {\n contextType: 'subtree';\n level: number;\n};\n\n/**\n * @internal\n */\nconst defaultSubTreeContextValue: SubtreeContextValue = {\n level: 0,\n contextType: 'subtree',\n};\n\n/**\n * @internal\n */\nexport const SubtreeContext: React.Context<SubtreeContextValue> = React.createContext<SubtreeContextValue | undefined>(\n undefined,\n) as React.Context<SubtreeContextValue>;\n\nexport const useSubtreeContext_unstable = () => {\n return React.useContext(SubtreeContext) ?? defaultSubTreeContextValue;\n};\n"],"names":["React","defaultSubTreeContextValue","level","contextType","SubtreeContext","createContext","undefined","useSubtreeContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B;;CAEC,GACD,MAAMC,6BAAkD;IACtDC,OAAO;IACPC,aAAa;AACf;AAEA;;CAEC,GACD,OAAO,MAAMC,iBAAqDJ,MAAMK,aAAa,CACnFC,WACsC;AAExC,OAAO,MAAMC,6BAA6B;QACjCP;IAAP,OAAOA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACJ,6BAAjBJ,+BAAAA,oBAAoCC;AAC7C,EAAE"}