npm - @fluentui/react-tree - Versions diffs - 9.0.0-beta.25 → 9.0.0-beta.27 - Mend

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

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 (184) hide show

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

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

package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js.map CHANGED Viewed

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

package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { ButtonContextProvider } from '@fluentui/react-button';
  * Render the final JSX of TreeItemPersonaLayout
  */ export const renderTreeItemPersonaLayout_unstable = (state, contextValues)=>{
     const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), /*#__PURE__*/ createElement(AvatarContextProvider, {
+    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), slots.selector && /*#__PURE__*/ createElement(slots.selector, slotProps.selector), /*#__PURE__*/ createElement(AvatarContextProvider, {
         value: contextValues.avatar
     }, /*#__PURE__*/ createElement(slots.media, slotProps.media)), /*#__PURE__*/ createElement(slots.content, slotProps.content), slots.description && /*#__PURE__*/ createElement(slots.description, slotProps.description), /*#__PURE__*/ createElement(ButtonContextProvider, {
         value: state.buttonContextValue

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

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

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js CHANGED Viewed

@@ -3,6 +3,8 @@ import { resolveShorthand } from '@fluentui/react-utilities';
 import { useTreeContext_unstable } from '../../contexts';
 import { treeAvatarSize } from '../../utils/tokens';
 import { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';
+import { Checkbox } from '@fluentui/react-checkbox';
+import { Radio } from '@fluentui/react-radio';
 /**
  * Create the state required to render TreeItemPersonaLayout.
  *
@@ -19,6 +21,7 @@ import { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout'
         iconAfter: null
     }, ref);
     const size = useTreeContext_unstable((ctx)=>ctx.size);
+    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);
     return {
         ...treeItemLayoutState,
         components: {
@@ -28,7 +31,9 @@ import { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout'
             root: 'div',
             media: 'div',
             aside: 'div',
-            actions: 'div'
+            actions: 'div',
+            // Casting here to a union between checkbox and radio
+            selector: selectionMode === 'multiselect' ? Checkbox : Radio
         },
         avatarSize: treeAvatarSize[size],
         content: resolveShorthand(content, {

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

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

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js CHANGED Viewed

@@ -9,7 +9,8 @@ export const treeItemPersonaLayoutClassNames = {
   content: 'fui-TreeItemPersonaLayout__content',
   expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',
   aside: 'fui-TreeItemPersonaLayout__aside',
-  actions: 'fui-TreeItemPersonaLayout__actions'
+  actions: 'fui-TreeItemPersonaLayout__actions',
+  selector: 'fui-TreeItemPersonaLayout__selector'
 };
 /**
  * Styles for the root slot
@@ -201,6 +202,9 @@ export const useTreeItemPersonaLayoutStyles_unstable = state => {
   if (state.expandIcon) {
     state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);
   }
+  if (state.selector) {
+    state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);
+  }
   return state;
 };
 //# sourceMappingURL=useTreeItemPersonaLayoutStyles.styles.js.map

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","treeItemPersonaLayoutClassNames","root","media","description","content","expandIcon","aside","actions","useRootStyles","base","mc9l5x","wkccdc","Budl1dq","zoa1oz","Bt984gj","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","lj723h","ecr2s2","zt0xaq","Bi91k9c","Jwef8y","tbva4x","leaf","uwmqm3","branch","d","a","h","useMediaStyles","a9b677","Bqenvij","Ijaq50","Br312pm","nk6f5a","Bw0ie65","z8tnut","z189sj","Byoj8tv","useContentStyles","withDescription","useDescriptionStyles","useActionsStyles","Frg6f3","qhf8xq","Bj3rh1h","useAsideStyles","i8kkvl","Belr9w4","useExpandIconStyles","Brf1p80","Bf4jedk","B7ck84d","sj55zd","Bh6795r","Bnnss6s","xawz","useTreeItemPersonaLayoutStyles_unstable","state","rootStyles","mediaStyles","descriptionStyles","actionsStyles","asideStyles","expandIconStyles","contentStyles","itemType","ctx","className"],"sources":["useTreeItemPersonaLayoutStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemPersonaLayoutClassNames = {\n root: 'fui-TreeItemPersonaLayout',\n media: 'fui-TreeItemPersonaLayout__media',\n description: 'fui-TreeItemPersonaLayout__description',\n content: 'fui-TreeItemPersonaLayout__content',\n expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n aside: 'fui-TreeItemPersonaLayout__aside',\n actions: 'fui-TreeItemPersonaLayout__actions'\n};\n/*\n Styles for the root slot\n / const useRootStyles = makeStyles({\n base: {\n display: 'grid',\n gridTemplateRows: '1fr auto',\n gridTemplateColumns: 'auto auto 1fr auto',\n gridTemplateAreas: `\n \"expandIcon media content 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 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 Styles for the expand icon slot\n / const useMediaStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n width: '32px',\n height: '32px',\n ...shorthands.gridArea('media'),\n ...shorthands.padding(0, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalXXS)\n }\n});\nconst useContentStyles = makeStyles({\n base: {\n ...shorthands.gridArea('content'),\n ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalXS, tokens.spacingVerticalMNudge, tokens.spacingHorizontalS)\n },\n withDescription: {\n ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalS)\n }\n});\nconst useDescriptionStyles = makeStyles({\n base: {\n ...shorthands.gridArea('description'),\n ...typographyStyles.caption1,\n ...shorthands.padding(0, tokens.spacingHorizontalXS, tokens.spacingVerticalMNudge, tokens.spacingHorizontalS)\n }\n});\n/\n Styles for the action icon slot\n / const useActionsStyles = makeStyles({\n base: {\n display: 'flex',\n marginLeft: 'auto',\n position: 'relative',\n zIndex: 1,\n ...shorthands.gridArea('aside'),\n ...shorthands.padding(0, tokens.spacingHorizontalS)\n }\n});\n/\n Styles for the action icon slot\n / const useAsideStyles = makeStyles({\n base: {\n display: 'flex',\n marginLeft: 'auto',\n alignItems: 'center',\n zIndex: 0,\n ...shorthands.gridArea('aside'),\n ...shorthands.padding(0, tokens.spacingHorizontalM),\n ...shorthands.gap(tokens.spacingHorizontalXS)\n }\n});\n/\n Styles for the expand icon slot\n / const useExpandIconStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minWidth: '24px',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3,\n ...shorthands.gridArea('expandIcon'),\n ...shorthands.flex(0, 0, 'auto'),\n ...shorthands.padding(tokens.spacingVerticalXS, 0)\n }\n});\n/\n Apply styling to the TreeItemPersonaLayout slots based on the state\n */ export const useTreeItemPersonaLayoutStyles_unstable = (state)=>{\n const rootStyles = useRootStyles();\n const mediaStyles = useMediaStyles();\n const descriptionStyles = useDescriptionStyles();\n const actionsStyles = useActionsStyles();\n const asideStyles = useAsideStyles();\n const expandIconStyles = useExpandIconStyles();\n const contentStyles = useContentStyles();\n const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootStyles.base, rootStyles[itemType], state.root.className);\n state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);\n if (state.content) {\n state.content.className = mergeClasses(treeItemPersonaLayoutClassNames.content, contentStyles.base, state.description && contentStyles.withDescription, state.content.className);\n }\n if (state.description) {\n state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);\n }\n if (state.actions) {\n state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsStyles.base, state.actions.className);\n }\n if (state.aside) {\n state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideStyles.base, state.aside.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);\n }\n return state;\n};\n"],"mappings":"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"}
1	+ {"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","treeItemPersonaLayoutClassNames","root","media","description","content","expandIcon","aside","actions","selector","useRootStyles","base","mc9l5x","wkccdc","Budl1dq","zoa1oz","Bt984gj","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","lj723h","ecr2s2","zt0xaq","Bi91k9c","Jwef8y","tbva4x","leaf","uwmqm3","branch","d","a","h","useMediaStyles","a9b677","Bqenvij","Ijaq50","Br312pm","nk6f5a","Bw0ie65","z8tnut","z189sj","Byoj8tv","useContentStyles","withDescription","useDescriptionStyles","useActionsStyles","Frg6f3","qhf8xq","Bj3rh1h","useAsideStyles","i8kkvl","Belr9w4","useExpandIconStyles","Brf1p80","Bf4jedk","B7ck84d","sj55zd","Bh6795r","Bnnss6s","xawz","useTreeItemPersonaLayoutStyles_unstable","state","rootStyles","mediaStyles","descriptionStyles","actionsStyles","asideStyles","expandIconStyles","contentStyles","itemType","ctx","className"],"sources":["useTreeItemPersonaLayoutStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemPersonaLayoutClassNames = {\n root: 'fui-TreeItemPersonaLayout',\n media: 'fui-TreeItemPersonaLayout__media',\n description: 'fui-TreeItemPersonaLayout__description',\n content: 'fui-TreeItemPersonaLayout__content',\n expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n aside: 'fui-TreeItemPersonaLayout__aside',\n actions: 'fui-TreeItemPersonaLayout__actions',\n selector: 'fui-TreeItemPersonaLayout__selector'\n};\n/*\n Styles for the root slot\n / const useRootStyles = makeStyles({\n base: {\n display: 'grid',\n gridTemplateRows: '1fr auto',\n gridTemplateColumns: 'auto auto 1fr auto',\n gridTemplateAreas: `\n \"expandIcon media content 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 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 Styles for the expand icon slot\n / const useMediaStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n width: '32px',\n height: '32px',\n ...shorthands.gridArea('media'),\n ...shorthands.padding(0, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalXXS)\n }\n});\nconst useContentStyles = makeStyles({\n base: {\n ...shorthands.gridArea('content'),\n ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalXS, tokens.spacingVerticalMNudge, tokens.spacingHorizontalS)\n },\n withDescription: {\n ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalS)\n }\n});\nconst useDescriptionStyles = makeStyles({\n base: {\n ...shorthands.gridArea('description'),\n ...typographyStyles.caption1,\n ...shorthands.padding(0, tokens.spacingHorizontalXS, tokens.spacingVerticalMNudge, tokens.spacingHorizontalS)\n }\n});\n/\n Styles for the action icon slot\n / const useActionsStyles = makeStyles({\n base: {\n display: 'flex',\n marginLeft: 'auto',\n position: 'relative',\n zIndex: 1,\n ...shorthands.gridArea('aside'),\n ...shorthands.padding(0, tokens.spacingHorizontalS)\n }\n});\n/\n Styles for the action icon slot\n / const useAsideStyles = makeStyles({\n base: {\n display: 'flex',\n marginLeft: 'auto',\n alignItems: 'center',\n zIndex: 0,\n ...shorthands.gridArea('aside'),\n ...shorthands.padding(0, tokens.spacingHorizontalM),\n ...shorthands.gap(tokens.spacingHorizontalXS)\n }\n});\n/\n Styles for the expand icon slot\n / const useExpandIconStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minWidth: '24px',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3,\n ...shorthands.gridArea('expandIcon'),\n ...shorthands.flex(0, 0, 'auto'),\n ...shorthands.padding(tokens.spacingVerticalXS, 0)\n }\n});\n/\n Apply styling to the TreeItemPersonaLayout slots based on the state\n */ export const useTreeItemPersonaLayoutStyles_unstable = (state)=>{\n const rootStyles = useRootStyles();\n const mediaStyles = useMediaStyles();\n const descriptionStyles = useDescriptionStyles();\n const actionsStyles = useActionsStyles();\n const asideStyles = useAsideStyles();\n const expandIconStyles = useExpandIconStyles();\n const contentStyles = useContentStyles();\n const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootStyles.base, rootStyles[itemType], state.root.className);\n state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);\n if (state.content) {\n state.content.className = mergeClasses(treeItemPersonaLayoutClassNames.content, contentStyles.base, state.description && contentStyles.withDescription, state.content.className);\n }\n if (state.description) {\n state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);\n }\n if (state.actions) {\n state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsStyles.base, state.actions.className);\n }\n if (state.aside) {\n state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideStyles.base, state.aside.className);\n }\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);\n }\n if (state.selector) {\n state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);\n }\n return state;\n};\n"],"mappings":"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"}

package/lib/contexts/index.js CHANGED Viewed

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

package/lib/contexts/index.js.map CHANGED Viewed

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

package/lib/contexts/treeContext.js CHANGED Viewed

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

package/lib/contexts/treeContext.js.map CHANGED Viewed

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

package/lib/contexts/treeItemContext.js CHANGED Viewed

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

package/lib/contexts/treeItemContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["treeItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType } from '../TreeItem';\n\nexport type TreeItemContextValue = {\n layoutRef: React.Ref<HTMLDivElement>;\n subtreeRef: React.Ref<HTMLDivElement>;\n itemType: TreeItemType;\n value: ~~string~~;\n open: boolean;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n value: '',\n layoutRef: React.createRef(),\n subtreeRef: React.createRef(),\n itemType: 'leaf',\n open: false,\n};\n\nexport const TreeItemContext: Context<TreeItemContextValue \| undefined> = createContext<\n TreeItemContextValue \| undefined\n>(undefined);\n\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = <T>(selector: ContextSelector<TreeItemContextValue, T>): T =>\n useContextSelector(TreeItemContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","defaultContextValue","value","~~layoutRef~~","createRef","subtreeRef","itemType","open","TreeItemContext","undefined","Provider","TreeItemProvider","useTreeItemContext_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAmCC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;~~AAW~~/G,MAAMC,sBAA4C;IAChDC,OAAO;IACPC,~~WAAWL~~,MAAMM,SAAS;~~IAC1BC~~,~~YAAYP~~,MAAMM,SAAS;~~IAC3BE~~,UAAU;IACVC,MAAM,KAAK;AACb;AAEA,OAAO,MAAMC,~~kBAA6DT~~,~~cAExEU~~,WAAW;AAEb,OAAO,MAAM,EAAEC,UAAUC,iBAAgB,EAAE,GAAGH,gBAAgB;AAC9D,OAAO,MAAMI,8BAA8B,CAAIC,~~WAC7Cb~~,~~mBAAmBQ~~,iBAAiB,CAACM,~~MAAMb~~,mBAAmB,~~GAAKY~~,SAASC,MAAM"}
1	+ {"version":3,"sources":["treeItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { TreeItemType, TreeItemValue } from '../TreeItem';\n\nexport type TreeItemContextValue = {\n isActionsVisible: boolean;\n isAsideVisible: boolean;\n selectionRef: React.Ref<HTMLInputElement>;\n actionsRef: React.Ref<HTMLDivElement>;\n expandIconRef: React.Ref<HTMLDivElement>;\n layoutRef: React.Ref<HTMLDivElement>;\n subtreeRef: React.Ref<HTMLDivElement>;\n itemType: TreeItemType;\n value: TreeItemValue;\n open: boolean;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n value: '',\n selectionRef: React.createRef(),\n layoutRef: React.createRef(),\n subtreeRef: React.createRef(),\n actionsRef: React.createRef(),\n expandIconRef: React.createRef(),\n isActionsVisible: false,\n isAsideVisible: false,\n itemType: 'leaf',\n open: false,\n};\n\nexport const TreeItemContext: Context<TreeItemContextValue \| undefined> = createContext<\n TreeItemContextValue \| undefined\n>(undefined);\n\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = <T>(selector: ContextSelector<TreeItemContextValue, T>): T =>\n useContextSelector(TreeItemContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","defaultContextValue","value","selectionRef","createRef","layoutRef","subtreeRef","actionsRef","expandIconRef","isActionsVisible","isAsideVisible","itemType","open","TreeItemContext","undefined","Provider","TreeItemProvider","useTreeItemContext_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAmCC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAgB/G,MAAMC,sBAA4C;IAChDC,OAAO;IACPC,cAAcL,MAAMM,SAAS;IAC7BC,WAAWP,MAAMM,SAAS;IAC1BE,YAAYR,MAAMM,SAAS;IAC3BG,YAAYT,MAAMM,SAAS;IAC3BI,eAAeV,MAAMM,SAAS;IAC9BK,kBAAkB,KAAK;IACvBC,gBAAgB,KAAK;IACrBC,UAAU;IACVC,MAAM,KAAK;AACb;AAEA,OAAO,MAAMC,kBAA6Dd,cAExEe,WAAW;AAEb,OAAO,MAAM,EAAEC,UAAUC,iBAAgB,EAAE,GAAGH,gBAAgB;AAC9D,OAAO,MAAMI,8BAA8B,CAAIC,WAC7ClB,mBAAmBa,iBAAiB,CAACM,MAAMlB,mBAAmB,GAAKiB,SAASC,MAAM"}

package/lib/hooks/useControllableOpenItems.js CHANGED Viewed

@@ -1,18 +1,21 @@
 import { useControllableState } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { ImmutableSet } from '../utils/ImmutableSet';
+import { createOpenItems } from '../utils/createOpenItems';
 /**
  * @internal
  */ export function useControllableOpenItems(props) {
     return useControllableState({
-        state: React.useMemo(()=>props.openItems && ImmutableSet.create(props.openItems), [
+        state: React.useMemo(()=>props.openItems && createOpenItems(props.openItems), [
             props.openItems
         ]),
-        defaultState: props.defaultOpenItems && (()=>ImmutableSet.create(props.defaultOpenItems)),
+        defaultState: ()=>createOpenItems(props.defaultOpenItems),
         initialState: ImmutableSet.empty
     });
 }
-export function createNextOpenItems(data, previousOpenItems) {
+/**
+ * @internal
+ */ export function createNextOpenItems(data, previousOpenItems) {
     if (data.value === null) {
         return previousOpenItems;
     }

package/lib/hooks/useControllableOpenItems.js.map CHANGED Viewed

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

package/lib/{components/Tree → hooks}/useRootTree.js RENAMED Viewed

@@ -1,37 +1,34 @@
+import { getNativeElementProps, useEventCallback } from '@fluentui/react-utilities';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
-import { createNextOpenItems, useControllableOpenItems, useNestedTreeNavigation } from '../../hooks';
-import { treeDataTypes } from '../../utils/tokens';
+import { createOpenItems } from '../utils/createOpenItems';
+import { createCheckedItems } from '../utils/createCheckedItems';
+import { treeDataTypes } from '../utils/tokens';
 /**
- * Create the state required to render the root level Tree.
+ * Create the state required to render the root level BaseTree.
  *
- * @param props - props from this instance of Tree
- * @param ref - reference to root HTMLElement of Tree
+ * @param props - props from this instance of BaseTree
+ * @param ref - reference to root HTMLElement of BaseTree
  */ export function useRootTree(props, ref) {
     warnIfNoProperPropsRootTree(props);
-    const { appearance ='subtle' , size ='medium'  } = props;
-    const [openItems, setOpenItems] = useControllableOpenItems(props);
-    const [navigate, navigationRef] = useNestedTreeNavigation();
+    const { appearance ='subtle' , size ='medium' , selectionMode ='none'  } = props;
+    const openItems = React.useMemo(()=>createOpenItems(props.openItems), [
+        props.openItems
+    ]);
+    const checkedItems = React.useMemo(()=>createCheckedItems(props.checkedItems), [
+        props.checkedItems
+    ]);
     const requestOpenChange = (data)=>{
         var _props_onOpenChange;
-        const nextOpenItems = createNextOpenItems(data, openItems);
-        (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, data.event, {
-            ...data,
-            openItems: nextOpenItems
-        });
-        if (data.event.isDefaultPrevented()) {
-            return;
-        }
-        return setOpenItems(nextOpenItems);
+        return (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, data.event, data);
+    };
+    const requestCheckedChange = (data)=>{
+        var _props_onCheckedChange;
+        return (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, data.event, data);
     };
     const requestNavigation = (data)=>{
         var _props_onNavigation_unstable;
         (_props_onNavigation_unstable = props.onNavigation_unstable) === null || _props_onNavigation_unstable === void 0 ? void 0 : _props_onNavigation_unstable.call(props, data.event, data);
-        if (data.event.isDefaultPrevented()) {
-            return;
-        }
-        navigate(data);
         if (data.type === treeDataTypes.ArrowDown || data.type === treeDataTypes.ArrowUp) {
             data.event.preventDefault();
         }
@@ -98,21 +95,33 @@ import { treeDataTypes } from '../../utils/tokens';
                     ...request,
                     target: request.event.currentTarget
                 });
+            case treeDataTypes.Change:
+                {
+                    const previousCheckedValue = checkedItems.get(request.value);
+                    return requestCheckedChange({
+                        ...request,
+                        selectionMode: selectionMode,
+                        checked: previousCheckedValue === 'mixed' ? true : !previousCheckedValue
+                    });
+                }
         }
     });
     return {
         components: {
             root: 'div'
         },
+        selectionMode,
         open: true,
         appearance,
         size,
         level: 1,
         openItems,
+        checkedItems,
         requestTreeResponse,
         root: getNativeElementProps('div', {
-            ref: useMergedRefs(navigationRef, ref),
-            role: 'tree',
+            ref,
+            role: 'baseTree',
+            'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,
             ...props
         })
     };
@@ -121,7 +130,7 @@ function warnIfNoProperPropsRootTree(props) {
     if (process.env.NODE_ENV === 'development') {
         if (!props['aria-label'] && !props['aria-labelledby']) {
             // eslint-disable-next-line no-console
-            console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');
+            console.warn('BaseTree must have either a `aria-label` or `aria-labelledby` property defined');
         }
     }
 }

package/lib/hooks/useRootTree.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import { SelectionMode, getNativeElementProps, useEventCallback } from '@fluentui/react-utilities';\nimport type {\n TreeCheckedChangeData,\n TreeNavigationData_unstable,\n TreeOpenChangeData,\n TreeProps,\n TreeState,\n} from '../Tree';\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { TreeItemRequest } from '../contexts/treeContext';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\n\n/**\n * Create the state required to render the root level BaseTree.\n *\n * @param props - props from this instance of BaseTree\n * @param ref - reference to root HTMLElement of BaseTree\n */\nexport function useRootTree(\n props: Pick<\n TreeProps,\n | 'selectionMode'\n | 'appearance'\n | 'size'\n | 'openItems'\n | 'checkedItems'\n | 'onOpenChange'\n | 'onCheckedChange'\n | 'onNavigation_unstable'\n | 'aria-label'\n | 'aria-labelledby'\n >,\n ref: React.Ref<HTMLElement>,\n): TreeState {\n warnIfNoProperPropsRootTree(props);\n\n const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n\n const openItems = React.useMemo(() => createOpenItems(props.openItems), [props.openItems]);\n const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n const requestOpenChange = (data: TreeOpenChangeData) => props.onOpenChange?.(data.event, data);\n\n const requestCheckedChange = (data: TreeCheckedChangeData) => props.onCheckedChange?.(data.event, data);\n const requestNavigation = (data: TreeNavigationData_unstable) => {\n props.onNavigation_unstable?.(data.event, data);\n if (data.type === treeDataTypes.ArrowDown || data.type === treeDataTypes.ArrowUp) {\n data.event.preventDefault();\n }\n };\n\n const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n switch (request.type) {\n case treeDataTypes.Click:\n case treeDataTypes.ExpandIconClick: {\n return ReactDOM.unstable_batchedUpdates(() => {\n requestOpenChange({ ...request, open: request.itemType === 'branch' && !openItems.has(request.value) });\n requestNavigation({ ...request, type: treeDataTypes.Click });\n });\n }\n case treeDataTypes.ArrowRight: {\n if (request.itemType === 'leaf') {\n return;\n }\n const open = openItems.has(request.value);\n if (!open) {\n return requestOpenChange({ ...request, open: true });\n }\n return requestNavigation(request);\n }\n case treeDataTypes.Enter: {\n const open = openItems.has(request.value);\n return requestOpenChange({ ...request, open: request.itemType === 'branch' && !open });\n }\n case treeDataTypes.ArrowLeft: {\n const open = openItems.has(request.value);\n if (open && request.itemType === 'branch') {\n return requestOpenChange({ ...request, open: false, type: treeDataTypes.ArrowLeft });\n }\n return requestNavigation({ ...request, type: treeDataTypes.ArrowLeft });\n }\n case treeDataTypes.End:\n case treeDataTypes.Home:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.ArrowDown:\n case treeDataTypes.TypeAhead:\n return requestNavigation({ ...request, target: request.event.currentTarget });\n case treeDataTypes.Change: {\n const previousCheckedValue = checkedItems.get(request.value);\n return requestCheckedChange({\n ...request,\n selectionMode: selectionMode as SelectionMode,\n checked: previousCheckedValue === 'mixed' ? true : !previousCheckedValue,\n });\n }\n }\n });\n\n return {\n components: {\n root: 'div',\n },\n selectionMode,\n open: true,\n appearance,\n size,\n level: 1,\n openItems,\n checkedItems,\n requestTreeResponse,\n root: getNativeElementProps('div', {\n ref,\n role: 'baseTree',\n 'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n ...props,\n }),\n };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n if (process.env.NODE_ENV === 'development') {\n if (!props['aria-label'] && !props['aria-labelledby']) {\n // eslint-disable-next-line no-console\n console.warn('BaseTree must have either a `aria-label` or `aria-labelledby` property defined');\n }\n }\n}\n"],"names":["getNativeElementProps","useEventCallback","React","ReactDOM","createOpenItems","createCheckedItems","treeDataTypes","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","useMemo","checkedItems","requestOpenChange","data","onOpenChange","event","requestCheckedChange","onCheckedChange","requestNavigation","onNavigation_unstable","type","ArrowDown","ArrowUp","preventDefault","requestTreeResponse","request","Click","ExpandIconClick","unstable_batchedUpdates","open","itemType","has","value","ArrowRight","Enter","ArrowLeft","End","Home","TypeAhead","target","currentTarget","Change","previousCheckedValue","get","checked","components","root","level","role","undefined","process","env","NODE_ENV","console","warn"],"mappings":"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"}

package/lib/{components/Tree → hooks}/useSubtree.js RENAMED Viewed

@@ -1,11 +1,11 @@
 import * as React from 'react';
+import { useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';
 import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
-import { useTreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';
 /**
- * Create the state required to render a sub-level Tree.
+ * Create the state required to render a sub-level BaseTree.
  *
- * @param props - props from this instance of Tree
- * @param ref - reference to root HTMLElement of Tree
+ * @param props - props from this instance of BaseTree
+ * @param ref - reference to root HTMLElement of BaseTree
  */ export function useSubtree(props, ref) {
     const contextAppearance = useTreeContext_unstable((ctx)=>ctx.appearance);
     const contextSize = useTreeContext_unstable((ctx)=>ctx.size);
@@ -13,7 +13,9 @@ import { useTreeContext_unstable, useTreeItemContext_unstable } from '../../cont
     const value = useTreeItemContext_unstable((ctx)=>ctx.value);
     const { appearance =contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'subtle' , size =contextSize !== null && contextSize !== void 0 ? contextSize : 'medium'  } = props;
     const parentLevel = useTreeContext_unstable((ctx)=>ctx.level);
+    const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);
     const openItems = useTreeContext_unstable((ctx)=>ctx.openItems);
+    const checkedItems = useTreeContext_unstable((ctx)=>ctx.checkedItems);
     const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);
     const open = openItems.has(value);
     return {
@@ -23,6 +25,7 @@ import { useTreeContext_unstable, useTreeItemContext_unstable } from '../../cont
         },
         appearance,
         size,
+        selectionMode,
         level: parentLevel + 1,
         root: getNativeElementProps('div', {
             ref: useMergedRefs(ref, subtreeRef),
@@ -30,6 +33,7 @@ import { useTreeContext_unstable, useTreeItemContext_unstable } from '../../cont
             ...props
         }),
         openItems,
+        checkedItems,
         requestTreeResponse
     };
 }

package/lib/hooks/useSubtree.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render a sub-level BaseTree.\n *\n * @param props - props from this instance of BaseTree\n * @param ref - reference to root HTMLElement of BaseTree\n */\nexport function useSubtree(props: Pick<TreeProps, 'appearance' | 'size'>, ref: React.Ref<HTMLElement>): TreeState {\n const contextAppearance = useTreeContext_unstable(ctx => ctx.appearance);\n const contextSize = useTreeContext_unstable(ctx => ctx.size);\n const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n const value = useTreeItemContext_unstable(ctx => ctx.value);\n\n const { appearance = contextAppearance ?? 'subtle', size = contextSize ?? 'medium' } = props;\n\n const parentLevel = useTreeContext_unstable(ctx => ctx.level);\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n const openItems = useTreeContext_unstable(ctx => ctx.openItems);\n const checkedItems = useTreeContext_unstable(ctx => ctx.checkedItems);\n const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n\n const open = openItems.has(value);\n\n return {\n open,\n components: {\n root: 'div',\n },\n appearance,\n size,\n selectionMode,\n level: parentLevel + 1,\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, subtreeRef),\n role: 'group',\n ...props,\n }),\n openItems,\n checkedItems,\n requestTreeResponse,\n };\n}\n"],"names":["React","useTreeContext_unstable","useTreeItemContext_unstable","getNativeElementProps","useMergedRefs","useSubtree","props","ref","contextAppearance","ctx","appearance","contextSize","size","subtreeRef","value","parentLevel","level","selectionMode","openItems","checkedItems","requestTreeResponse","open","has","components","root","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,oBAAoB;AACzF,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,4BAA4B;AAEjF;;;;;CAKC,GACD,OAAO,SAASC,WAAWC,KAA6C,EAAEC,GAA2B,EAAa;IAChH,MAAMC,oBAAoBP,wBAAwBQ,CAAAA,MAAOA,IAAIC,UAAU;IACvE,MAAMC,cAAcV,wBAAwBQ,CAAAA,MAAOA,IAAIG,IAAI;IAC3D,MAAMC,aAAaX,4BAA4BO,CAAAA,MAAOA,IAAII,UAAU;IACpE,MAAMC,QAAQZ,4BAA4BO,CAAAA,MAAOA,IAAIK,KAAK;IAE1D,MAAM,EAAEJ,YAAaF,8BAAAA,+BAAAA,oBAAqB,QAAQ,CAAA,EAAEI,MAAOD,wBAAAA,yBAAAA,cAAe,QAAQ,CAAA,EAAE,GAAGL;IAEvF,MAAMS,cAAcd,wBAAwBQ,CAAAA,MAAOA,IAAIO,KAAK;IAC5D,MAAMC,gBAAgBhB,wBAAwBQ,CAAAA,MAAOA,IAAIQ,aAAa;IACtE,MAAMC,YAAYjB,wBAAwBQ,CAAAA,MAAOA,IAAIS,SAAS;IAC9D,MAAMC,eAAelB,wBAAwBQ,CAAAA,MAAOA,IAAIU,YAAY;IACpE,MAAMC,sBAAsBnB,wBAAwBQ,CAAAA,MAAOA,IAAIW,mBAAmB;IAElF,MAAMC,OAAOH,UAAUI,GAAG,CAACR;IAE3B,OAAO;QACLO;QACAE,YAAY;YACVC,MAAM;QACR;QACAd;QACAE;QACAK;QACAD,OAAOD,cAAc;QACrBS,MAAMrB,sBAAsB,OAAO;YACjCI,KAAKH,cAAcG,KAAKM;YACxBY,MAAM;YACN,GAAGnB,KAAK;QACV;QACAY;QACAC;QACAC;IACF;AACF,CAAC"}

package/lib/index.js CHANGED Viewed

@@ -1,8 +1,8 @@
-export { Tree, treeClassNames, renderTree_unstable, useTreeStyles_unstable, useTree_unstable, useTreeContextValues_unstable } from './Tree';
+export { Tree, treeClassNames, useTree_unstable, useTreeStyles_unstable, useTreeContextValues_unstable, renderTree_unstable } from './Tree';
+export { FlatTree, flatTreeClassNames, useFlatTree_unstable, useFlatTreeStyles_unstable, useFlatTreeContextValues_unstable, renderFlatTree_unstable, useHeadlessFlatTree_unstable } from './FlatTree';
 export { TreeProvider, useTreeContext_unstable, useTreeItemContext_unstable, TreeItemProvider } from './contexts';
 export { treeItemLevelToken } from './utils/tokens';
 export { TreeItem, treeItemClassNames, renderTreeItem_unstable, useTreeItemStyles_unstable, useTreeItemContextValues_unstable, useTreeItem_unstable } from './TreeItem';
 export { TreeItemLayout, treeItemLayoutClassNames, renderTreeItemLayout_unstable, useTreeItemLayoutStyles_unstable, useTreeItemLayout_unstable } from './TreeItemLayout';
 export { TreeItemPersonaLayout, treeItemPersonaLayoutClassNames, renderTreeItemPersonaLayout_unstable, useTreeItemPersonaLayoutStyles_unstable, useTreeItemPersonaLayout_unstable } from './TreeItemPersonaLayout';
-export { useFlatTree_unstable } from './hooks/index';
 export { flattenTree_unstable } from './utils/flattenTree';

package/lib/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["index.ts"],"sourcesContent":["export {\n Tree,\n treeClassNames,\n ~~renderTree_unstable~~,\n useTreeStyles_unstable,\n ~~useTree_unstable~~,\n ~~useTreeContextValues_unstable~~,\n} from './Tree';\nexport type {\n TreeProps,\n TreeState,\n ~~TreeSlots~~,\n TreeOpenChangeData,\n TreeOpenChangeEvent,\n ~~TreeNavigationEvent_unstable~~,\n TreeNavigationData_unstable,\n} from './Tree';\n\nexport { TreeProvider, useTreeContext_unstable, useTreeItemContext_unstable, TreeItemProvider } from './contexts';\nexport type { TreeContextValue } from './contexts';\n\nexport { treeItemLevelToken } from './utils/tokens';\n\nexport {\n TreeItem,\n treeItemClassNames,\n renderTreeItem_unstable,\n useTreeItemStyles_unstable,\n useTreeItemContextValues_unstable,\n useTreeItem_unstable,\n} from './TreeItem';\nexport type { TreeItemProps, TreeItemState, TreeItemSlots, TreeItemValue } from './TreeItem';\n\nexport {\n TreeItemLayout,\n treeItemLayoutClassNames,\n renderTreeItemLayout_unstable,\n useTreeItemLayoutStyles_unstable,\n useTreeItemLayout_unstable,\n} from './TreeItemLayout';\nexport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout';\n\nexport {\n TreeItemPersonaLayout,\n treeItemPersonaLayoutClassNames,\n renderTreeItemPersonaLayout_unstable,\n useTreeItemPersonaLayoutStyles_unstable,\n useTreeItemPersonaLayout_unstable,\n} from './TreeItemPersonaLayout';\nexport type {\n TreeItemPersonaLayoutProps,\n TreeItemPersonaLayoutSlots,\n TreeItemPersonaLayoutState,\n} from './TreeItemPersonaLayout';\n\nexport { ~~useFlatTree_unstable } from './hooks/index';\nexport type { FlatTreeItem, FlatTreeItemProps, FlatTreeProps, FlatTree } from './hooks/index';\n\nexport {~~ flattenTree_unstable } from './utils/flattenTree';\nexport type { ~~NestedTreeItem~~ } from './utils/flattenTree';\n"],"names":["Tree","treeClassNames","~~renderTree_unstable~~","useTreeStyles_unstable","~~useTree_unstable~~","~~useTreeContextValues_unstable~~","TreeProvider","useTreeContext_unstable","useTreeItemContext_unstable","TreeItemProvider","treeItemLevelToken","TreeItem","treeItemClassNames","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","useTreeItem_unstable","TreeItemLayout","treeItemLayoutClassNames","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","useTreeItemLayout_unstable","TreeItemPersonaLayout","treeItemPersonaLayoutClassNames","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayout_unstable","~~useFlatTree_unstable","~~flattenTree_unstable"],"mappings":"AAAA,SACEA,IAAI,EACJC,cAAc,EACdC,~~mBAAmB~~,~~EACnBC~~,sBAAsB,EACtBC,~~gBAAgB~~,~~EAChBC~~,~~6BAA6B~~,~~QACxB~~,SAAS;~~AAWhB~~,SAASC,YAAY,EAAEC,uBAAuB,EAAEC,2BAA2B,EAAEC,gBAAgB,QAAQ,aAAa;AAGlH,SAASC,kBAAkB,QAAQ,iBAAiB;AAEpD,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,iCAAiC,EACjCC,oBAAoB,QACf,aAAa;AAGpB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAG1B,SACEC,qBAAqB,EACrBC,+BAA+B,EAC/BC,oCAAoC,EACpCC,uCAAuC,EACvCC,iCAAiC,QAC5B,0BAA0B;AAOjC,SAASC,oBAAoB,QAAQ,~~gBAAgB;AAGrD,SAASC,oBAAoB,QAAQ,~~sBAAsB"}
1	+ {"version":3,"sources":["index.ts"],"sourcesContent":["export {\n Tree,\n treeClassNames,\n useTree_unstable,\n useTreeStyles_unstable,\n useTreeContextValues_unstable,\n renderTree_unstable,\n} from './Tree';\n\nexport type {\n TreeSlots,\n TreeProps,\n TreeState,\n TreeContextValues,\n TreeOpenChangeData,\n TreeSelectionValue,\n TreeOpenChangeEvent,\n TreeCheckedChangeData,\n TreeCheckedChangeEvent,\n TreeNavigationData_unstable,\n TreeNavigationEvent_unstable,\n} from './Tree';\n\nexport {\n FlatTree,\n flatTreeClassNames,\n useFlatTree_unstable,\n useFlatTreeStyles_unstable,\n useFlatTreeContextValues_unstable,\n renderFlatTree_unstable,\n useHeadlessFlatTree_unstable,\n} from './FlatTree';\n\nexport type {\n FlatTreeSlots,\n FlatTreeProps,\n FlatTreeState,\n HeadlessFlatTree,\n HeadlessFlatTreeItem,\n HeadlessFlatTreeOptions,\n HeadlessFlatTreeItemProps,\n} from './FlatTree';\n\nexport { TreeProvider, useTreeContext_unstable, useTreeItemContext_unstable, TreeItemProvider } from './contexts';\nexport type { TreeContextValue, TreeItemContextValue } from './contexts';\n\nexport { treeItemLevelToken } from './utils/tokens';\n\nexport {\n TreeItem,\n treeItemClassNames,\n renderTreeItem_unstable,\n useTreeItemStyles_unstable,\n useTreeItemContextValues_unstable,\n useTreeItem_unstable,\n} from './TreeItem';\nexport type { TreeItemProps, TreeItemState, TreeItemSlots, TreeItemValue } from './TreeItem';\n\nexport {\n TreeItemLayout,\n treeItemLayoutClassNames,\n renderTreeItemLayout_unstable,\n useTreeItemLayoutStyles_unstable,\n useTreeItemLayout_unstable,\n} from './TreeItemLayout';\nexport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout';\n\nexport {\n TreeItemPersonaLayout,\n treeItemPersonaLayoutClassNames,\n renderTreeItemPersonaLayout_unstable,\n useTreeItemPersonaLayoutStyles_unstable,\n useTreeItemPersonaLayout_unstable,\n} from './TreeItemPersonaLayout';\nexport type {\n TreeItemPersonaLayoutProps,\n TreeItemPersonaLayoutSlots,\n TreeItemPersonaLayoutState,\n} from './TreeItemPersonaLayout';\n\nexport { flattenTree_unstable } from './utils/flattenTree';\nexport type { FlattenTreeItem } from './utils/flattenTree';\n"],"names":["Tree","treeClassNames","useTree_unstable","useTreeStyles_unstable","useTreeContextValues_unstable","renderTree_unstable","FlatTree","flatTreeClassNames","useFlatTree_unstable","useFlatTreeStyles_unstable","useFlatTreeContextValues_unstable","renderFlatTree_unstable","useHeadlessFlatTree_unstable","TreeProvider","useTreeContext_unstable","useTreeItemContext_unstable","TreeItemProvider","treeItemLevelToken","TreeItem","treeItemClassNames","renderTreeItem_unstable","useTreeItemStyles_unstable","useTreeItemContextValues_unstable","useTreeItem_unstable","TreeItemLayout","treeItemLayoutClassNames","renderTreeItemLayout_unstable","useTreeItemLayoutStyles_unstable","useTreeItemLayout_unstable","TreeItemPersonaLayout","treeItemPersonaLayoutClassNames","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayout_unstable","flattenTree_unstable"],"mappings":"AAAA,SACEA,IAAI,EACJC,cAAc,EACdC,gBAAgB,EAChBC,sBAAsB,EACtBC,6BAA6B,EAC7BC,mBAAmB,QACd,SAAS;AAgBhB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,oBAAoB,EACpBC,0BAA0B,EAC1BC,iCAAiC,EACjCC,uBAAuB,EACvBC,4BAA4B,QACvB,aAAa;AAYpB,SAASC,YAAY,EAAEC,uBAAuB,EAAEC,2BAA2B,EAAEC,gBAAgB,QAAQ,aAAa;AAGlH,SAASC,kBAAkB,QAAQ,iBAAiB;AAEpD,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,iCAAiC,EACjCC,oBAAoB,QACf,aAAa;AAGpB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAG1B,SACEC,qBAAqB,EACrBC,+BAA+B,EAC/BC,oCAAoC,EACpCC,uCAAuC,EACvCC,iCAAiC,QAC5B,0BAA0B;AAOjC,SAASC,oBAAoB,QAAQ,sBAAsB"}