@fluentui/react-tree 9.0.0-beta.16 → 9.0.0-beta.18

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

@@ -1 +1 @@
-{"version":3,"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useMergedRefs","useTreeItemContext_unstable","TreeItemChevron","useTreeItemLayout_unstable","props","ref","iconAfter","iconBefore","expandIcon","as","layoutRef","ctx","expandIconRef","isBranch","itemType","components","root","defaultProps","required","children","createElement","undefined"],"sources":["../../../src/components/TreeItemLayout/useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutProps, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nimport { TreeItemChevron } from '../TreeItemChevron';\n\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n  props: TreeItemLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n  const { iconAfter, iconBefore, expandIcon, as = 'span' } = props;\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n  const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      iconAfter: 'div',\n    },\n    root: getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }),\n    iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),\n    iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),\n    expandIcon: resolveShorthand(expandIcon, {\n      required: isBranch,\n      defaultProps: {\n        children: <TreeItemChevron />,\n        'aria-hidden': true,\n        ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef),\n      },\n    }),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,mBAAmB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ;AAE5F,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,eAAe,QAAQ;AAEhC;;;;;;;;;AASA,OAAO,MAAMC,0BAAA,GAA6BA,CACxCC,KAAA,EACAC,GAAA,KACwB;EACxB,MAAM;IAAEC,SAAA;IAAWC,UAAA;IAAYC,UAAA;IAAYC,EAAA,GAAK;EAAM,CAAE,GAAGL,KAAA;EAE3D,MAAMM,SAAA,GAAYT,2BAAA,CAA4BU,GAAA,IAAOA,GAAA,CAAID,SAAS;EAClE,MAAME,aAAA,GAAgBX,2BAAA,CAA4BU,GAAA,IAAOA,GAAA,CAAIC,aAAa;EAC1E,MAAMC,QAAA,GAAWZ,2BAAA,CAA4BU,GAAA,IAAOA,GAAA,CAAIG,QAAQ,KAAK;EAErE,OAAO;IACLC,UAAA,EAAY;MACVC,IAAA,EAAM;MACNR,UAAA,EAAY;MACZD,UAAA,EAAY;MACZD,SAAA,EAAW;IACb;IACAU,IAAA,EAAMnB,qBAAA,CAAsBY,EAAA,EAAI;MAAE,GAAGL,KAAK;MAAEC,GAAA,EAAKL,aAAA,CAAcK,GAAA,EAAKK,SAAA;IAAW;IAC/EH,UAAA,EAAYR,gBAAA,CAAiBQ,UAAA,EAAY;MAAEU,YAAA,EAAc;QAAE,eAAe;MAAK;IAAE;IACjFX,SAAA,EAAWP,gBAAA,CAAiBO,SAAA,EAAW;MAAEW,YAAA,EAAc;QAAE,eAAe;MAAK;IAAE;IAC/ET,UAAA,EAAYT,gBAAA,CAAiBS,UAAA,EAAY;MACvCU,QAAA,EAAUL,QAAA;MACVI,YAAA,EAAc;QACZE,QAAA,eAAUvB,KAAA,CAAAwB,aAAA,CAAClB,eAAA;QACX,eAAe,IAAI;QACnBG,GAAA,EAAKL,aAAA,CAAcF,mBAAA,CAAoBU,UAAA,IAAcA,UAAA,CAAWH,GAAG,GAAGgB,SAAS,EAAET,aAAA;MACnF;IACF;EACF;AACF"}
+{"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeItemLayoutProps, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nimport { TreeItemChevron } from '../TreeItemChevron';\n\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n  props: TreeItemLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n  const { iconAfter, iconBefore, expandIcon, as = 'span' } = props;\n\n  const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n  const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n  const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n  return {\n    components: {\n      root: 'div',\n      expandIcon: 'div',\n      iconBefore: 'div',\n      iconAfter: 'div',\n    },\n    root: getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }),\n    iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),\n    iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),\n    expandIcon: resolveShorthand(expandIcon, {\n      required: isBranch,\n      defaultProps: {\n        children: <TreeItemChevron />,\n        'aria-hidden': true,\n        ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef),\n      },\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useMergedRefs","useTreeItemContext_unstable","TreeItemChevron","useTreeItemLayout_unstable","props","ref","iconAfter","iconBefore","expandIcon","as","layoutRef","ctx","expandIconRef","isBranch","itemType","components","root","defaultProps","required","children","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,mBAAmB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAExH,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,eAAe,QAAQ,qBAAqB;AAErD;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC,MACwB;IACxB,MAAM,EAAEC,UAAS,EAAEC,WAAU,EAAEC,WAAU,EAAEC,IAAK,OAAM,EAAE,GAAGL;IAE3D,MAAMM,YAAYT,4BAA4BU,CAAAA,MAAOA,IAAID,SAAS;IAClE,MAAME,gBAAgBX,4BAA4BU,CAAAA,MAAOA,IAAIC,aAAa;IAC1E,MAAMC,WAAWZ,4BAA4BU,CAAAA,MAAOA,IAAIG,QAAQ,KAAK;IAErE,OAAO;QACLC,YAAY;YACVC,MAAM;YACNR,YAAY;YACZD,YAAY;YACZD,WAAW;QACb;QACAU,MAAMnB,sBAAsBY,IAAI;YAAE,GAAGL,KAAK;YAAEC,KAAKL,cAAcK,KAAKK;QAAW;QAC/EH,YAAYR,iBAAiBQ,YAAY;YAAEU,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QACjFX,WAAWP,iBAAiBO,WAAW;YAAEW,cAAc;gBAAE,eAAe,IAAI;YAAC;QAAE;QAC/ET,YAAYT,iBAAiBS,YAAY;YACvCU,UAAUL;YACVI,cAAc;gBACZE,wBAAU,oBAACjB;gBACX,eAAe,IAAI;gBACnBG,KAAKL,cAAcF,oBAAoBU,cAAcA,WAAWH,GAAG,GAAGe,SAAS,EAAER;YACnF;QACF;IACF;AACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","expandIcon","iconBefore","iconAfter","useRootStyles","base","mc9l5x","Bt984gj","sshi5w","B7ck84d","Ijaq50","Br312pm","nk6f5a","Bw0ie65","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","lj723h","ecr2s2","qya0sb","Bi91k9c","Jwef8y","Becwuud","leaf","uwmqm3","branch","medium","i8kkvl","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","subtle","transparent","De3pzq","d","a","h","useExpandIconStyles","Brf1p80","Bf4jedk","sj55zd","Bh6795r","Bnnss6s","xawz","z8tnut","z189sj","Byoj8tv","useIconStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","iconStyles","expandIconStyles","size","ctx","appearance","itemType","className"],"sources":["../../../src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } 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  expandIcon: 'fui-TreeItemLayout__expandIcon',\n  iconBefore: 'fui-TreeItemLayout__iconBefore',\n  iconAfter: 'fui-TreeItemLayout__iconAfter',\n};\n\n/**\n * Styles for the root slot\n */\nconst 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 treeItemClassNames.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 treeItemClassNames.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    columnGap: tokens.spacingHorizontalSNudge,\n    ...typographyStyles.body1,\n  },\n  small: {\n    columnGap: tokens.spacingHorizontalXS,\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 expand icon slot\n */\nconst 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/**\n * Styles for the before/after icon slot\n */\nconst useIconStyles = makeStyles({\n  base: {\n    display: 'flex',\n    alignItems: 'center',\n    color: tokens.colorNeutralForeground2,\n    lineHeight: tokens.lineHeightBase500,\n    fontSize: tokens.fontSizeBase500,\n  },\n  iconBefore: {},\n  iconAfter: {},\n});\n\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */\nexport const useTreeItemLayoutStyles_unstable = (state: TreeItemLayoutState): TreeItemLayoutState => {\n  const { iconAfter, iconBefore, expandIcon, root } = state;\n  const rootStyles = useRootStyles();\n  const iconStyles = useIconStyles();\n  const expandIconStyles = useExpandIconStyles();\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    rootStyles.base,\n    rootStyles[appearance],\n    rootStyles[size],\n    rootStyles[itemType],\n    root.className,\n  );\n\n  if (expandIcon) {\n    expandIcon.className = mergeClasses(\n      treeItemLayoutClassNames.expandIcon,\n      expandIconStyles.base,\n      expandIcon.className,\n    );\n  }\n\n  if (iconBefore) {\n    iconBefore.className = mergeClasses(\n      treeItemLayoutClassNames.iconBefore,\n      iconStyles.base,\n      iconStyles.iconBefore,\n      iconBefore.className,\n    );\n  }\n\n  if (iconAfter) {\n    iconAfter.className = mergeClasses(\n      treeItemLayoutClassNames.iconAfter,\n      iconStyles.base,\n      iconStyles.iconAfter,\n      iconAfter.className,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","expandIcon","iconBefore","iconAfter","useRootStyles","base","mc9l5x","Bt984gj","sshi5w","B7ck84d","Ijaq50","Br312pm","nk6f5a","Bw0ie65","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","lj723h","ecr2s2","qya0sb","Bi91k9c","Jwef8y","Becwuud","leaf","uwmqm3","branch","medium","i8kkvl","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","subtle","transparent","De3pzq","d","a","h","useExpandIconStyles","Brf1p80","Bf4jedk","sj55zd","Bh6795r","Bnnss6s","xawz","z8tnut","z189sj","Byoj8tv","useIconStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","iconStyles","expandIconStyles","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    expandIcon: 'fui-TreeItemLayout__expandIcon',\n    iconBefore: 'fui-TreeItemLayout__iconBefore',\n    iconAfter: 'fui-TreeItemLayout__iconAfter'\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 treeItemClassNames.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 treeItemClassNames.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        columnGap: tokens.spacingHorizontalSNudge,\n        ...typographyStyles.body1\n    },\n    small: {\n        columnGap: tokens.spacingHorizontalXS,\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 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 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    iconBefore: {},\n    iconAfter: {}\n});\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */ export const useTreeItemLayoutStyles_unstable = (state)=>{\n    const { iconAfter , iconBefore , expandIcon , root  } = state;\n    const rootStyles = useRootStyles();\n    const iconStyles = useIconStyles();\n    const expandIconStyles = useExpandIconStyles();\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    if (expandIcon) {\n        expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);\n    }\n    if (iconBefore) {\n        iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconStyles.iconBefore, iconBefore.className);\n    }\n    if (iconAfter) {\n        iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconStyles.iconAfter, iconAfter.className);\n    }\n    return state;\n};\n"],"mappings":"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"}

package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js

@@ -7,12 +7,10 @@ import { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPer
  * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.
  * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.
  * This component should only be used as a direct child of `TreeItem`.
- */
-export const TreeItemPersonaLayout = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useTreeItemPersonaLayout_unstable(props, ref);
-  useTreeItemPersonaLayoutStyles_unstable(state);
-  const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);
-  return renderTreeItemPersonaLayout_unstable(state, contextValues);
+ */ export const TreeItemPersonaLayout = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTreeItemPersonaLayout_unstable(props, ref);
+    useTreeItemPersonaLayoutStyles_unstable(state);
+    const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);
+    return renderTreeItemPersonaLayout_unstable(state, contextValues);
 });
 TreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';
-//# sourceMappingURL=TreeItemPersonaLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useTreeItemPersonaLayout_unstable","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayoutContextValues_unstable","TreeItemPersonaLayout","forwardRef","props","ref","state","contextValues","displayName"],"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';\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\n  const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n\n  return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\n\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,iCAAiC,QAAQ;AAClD,SAASC,oCAAoC,QAAQ;AACrD,SAASC,uCAAuC,QAAQ;AAGxD,SAASC,8CAA8C,QAAQ;AAE/D;;;;;AAKA,OAAO,MAAMC,qBAAA,gBAAyEL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrH,MAAMC,KAAA,GAAQR,iCAAA,CAAkCM,KAAA,EAAOC,GAAA;EAEvDL,uCAAA,CAAwCM,KAAA;EAExC,MAAMC,aAAA,GAAgBN,8CAAA,CAA+CK,KAAA;EAErE,OAAOP,oCAAA,CAAqCO,KAAA,EAAOC,aAAA;AACrD;AAEAL,qBAAA,CAAsBM,WAAW,GAAG"}
+{"version":3,"sources":["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';\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\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","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;AAEzG;;;;CAIC,GACD,OAAO,MAAMC,sCAAyEL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACrH,MAAMC,QAAQR,kCAAkCM,OAAOC;IAEvDL,wCAAwCM;IAExC,MAAMC,gBAAgBN,+CAA+CK;IAErE,OAAOP,qCAAqCO,OAAOC;AACrD,GAAG;AAEHL,sBAAsBM,WAAW,GAAG"}

package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=TreeItemPersonaLayout.types.js.map
+export { };

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

@@ -1 +1 @@
-{"version":3,"names":[],"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';\n\nexport type TreeItemPersonaLayoutContextValues = {\n  avatar: AvatarContextValue;\n};\n\nexport type TreeItemPersonaLayoutSlots = {\n  root: NonNullable<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   * Avatar to display.\n   */\n  media: NonNullable<Slot<'div'>>;\n  /**\n   * Main text. Children of the root slot are automatically rendered here\n   */\n  main: NonNullable<Slot<'div'>>;\n  /**\n   * Secondary text that describes or complements the main text\n   */\n  description?: Slot<'div'>;\n  /**\n   * A layout wrapper for the main and description slots\n   */\n  content: NonNullable<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};\n"],"mappings":"AAAA"}
+{"version":3,"sources":["TreeItemPersonaLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarContextValue, AvatarSize } from '@fluentui/react-avatar';\n\nexport type TreeItemPersonaLayoutContextValues = {\n  avatar: AvatarContextValue;\n};\n\nexport type TreeItemPersonaLayoutSlots = {\n  root: NonNullable<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   * Avatar to display.\n   */\n  media: NonNullable<Slot<'div'>>;\n  /**\n   * Main text. Children of the root slot are automatically rendered here\n   */\n  main: NonNullable<Slot<'div'>>;\n  /**\n   * Secondary text that describes or complements the main text\n   */\n  description?: Slot<'div'>;\n  /**\n   * A layout wrapper for the main and description slots\n   */\n  content: NonNullable<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};\n"],"names":[],"mappings":"AAAA,WA0CE"}

package/lib/components/TreeItemPersonaLayout/index.js

@@ -3,4 +3,3 @@ export * from './TreeItemPersonaLayout.types';
 export * from './renderTreeItemPersonaLayout';
 export * from './useTreeItemPersonaLayout';
 export * from './useTreeItemPersonaLayoutStyles.styles';
-//# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/TreeItemPersonaLayout/index.ts"],"sourcesContent":["export * from './TreeItemPersonaLayout';\nexport * from './TreeItemPersonaLayout.types';\nexport * from './renderTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayoutStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TreeItemPersonaLayout';\nexport * from './TreeItemPersonaLayout.types';\nexport * from './renderTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayout';\nexport * from './useTreeItemPersonaLayoutStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,0BAA0B;AACxC,cAAc,gCAAgC;AAC9C,cAAc,gCAAgC;AAC9C,cAAc,6BAA6B;AAC3C,cAAc,0CAA0C"}

package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js

@@ -1,16 +1,11 @@
-/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
 import { AvatarContextProvider } from '@fluentui/react-avatar';
 /**
  * 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, {
-    value: contextValues.avatar
-  }, /*#__PURE__*/createElement(slots.media, slotProps.media)), /*#__PURE__*/createElement(slots.content, slotProps.content, /*#__PURE__*/createElement(slots.main, slotProps.main), slots.description && /*#__PURE__*/createElement(slots.description, slotProps.description)));
+ */ 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, {
+        value: contextValues.avatar
+    }, /*#__PURE__*/ createElement(slots.media, slotProps.media)), /*#__PURE__*/ createElement(slots.content, slotProps.content, /*#__PURE__*/ createElement(slots.main, slotProps.main), slots.description && /*#__PURE__*/ createElement(slots.description, slotProps.description)));
 };
-//# sourceMappingURL=renderTreeItemPersonaLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["createElement","getSlotsNext","AvatarContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","slots","slotProps","root","expandIcon","value","avatar","media","content","main","description"],"sources":["../../../src/components/TreeItemPersonaLayout/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  TreeItemPersonaLayoutSlots,\n  TreeItemPersonaLayoutContextValues,\n} from './TreeItemPersonaLayout.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\n\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (\n  state: TreeItemPersonaLayoutState,\n  contextValues: TreeItemPersonaLayoutContextValues,\n) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemPersonaLayoutSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n      <AvatarContextProvider value={contextValues.avatar}>\n        <slots.media {...slotProps.media} />\n      </AvatarContextProvider>\n      <slots.content {...slotProps.content}>\n        <slots.main {...slotProps.main} />\n        {slots.description && <slots.description {...slotProps.description} />}\n      </slots.content>\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAM7B,SAASC,qBAAqB,QAAQ;AAEtC;;;AAGA,OAAO,MAAMC,oCAAA,GAAuCA,CAClDC,KAAA,EACAC,aAAA,KACG;EACH,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,YAAA,CAAyCG,KAAA;EAEtE,oBACEJ,aArBJ,CAqBKM,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,EAC3BF,KAAA,CAAMG,UAAU,iBAAIT,aAtB3B,CAsB4BM,KAAA,CAAMG,UAAU,EAAKF,SAAA,CAAUE,UAAU,gBAC/DT,aAvBN,CAuBOE,qBAAA;IAAsBQ,KAAA,EAAOL,aAAA,CAAcM;kBAC1CX,aAxBR,CAwBSM,KAAA,CAAMM,KAAK,EAAKL,SAAA,CAAUK,KAAK,iBAElCZ,aA1BN,CA0BOM,KAAA,CAAMO,OAAO,EAAKN,SAAA,CAAUM,OAAO,eAClCb,aA3BR,CA2BSM,KAAA,CAAMQ,IAAI,EAAKP,SAAA,CAAUO,IAAI,GAC7BR,KAAA,CAAMS,WAAW,iBAAIf,aA5B9B,CA4B+BM,KAAA,CAAMS,WAAW,EAAKR,SAAA,CAAUQ,WAAW;AAI1E"}
+{"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  TreeItemPersonaLayoutSlots,\n  TreeItemPersonaLayoutContextValues,\n} from './TreeItemPersonaLayout.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\n\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (\n  state: TreeItemPersonaLayoutState,\n  contextValues: TreeItemPersonaLayoutContextValues,\n) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemPersonaLayoutSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n      <AvatarContextProvider value={contextValues.avatar}>\n        <slots.media {...slotProps.media} />\n      </AvatarContextProvider>\n      <slots.content {...slotProps.content}>\n        <slots.main {...slotProps.main} />\n        {slots.description && <slots.description {...slotProps.description} />}\n      </slots.content>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","AvatarContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","slots","slotProps","root","expandIcon","value","avatar","media","content","main","description"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAMzD,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC,gBACG;IACH,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAAyCG;IAEtE,qBACE,AArBJ,cAqBKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,UAAU,kBAAI,AAtB3B,cAsB4BH,MAAMG,UAAU,EAAKF,UAAUE,UAAU,iBAC/D,AAvBN,cAuBOP;QAAsBQ,OAAOL,cAAcM,MAAM;qBAChD,AAxBR,cAwBSL,MAAMM,KAAK,EAAKL,UAAUK,KAAK,kBAElC,AA1BN,cA0BON,MAAMO,OAAO,EAAKN,UAAUM,OAAO,gBAClC,AA3BR,cA2BSP,MAAMQ,IAAI,EAAKP,UAAUO,IAAI,GAC7BR,MAAMS,WAAW,kBAAI,AA5B9B,cA4B+BT,MAAMS,WAAW,EAAKR,UAAUQ,WAAW;AAI1E,EAAE"}

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js

@@ -11,45 +11,37 @@ import { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout'
  *
  * @param props - props from this instance of TreeItemPersonaLayout
  * @param ref - reference to root HTMLElement of TreeItemPersonaLayout
- */
-export const useTreeItemPersonaLayout_unstable = (props, ref) => {
-  const {
-    media,
-    content,
-    children,
-    main,
-    description
-  } = props;
-  const treeItemLayoutState = useTreeItemLayout_unstable({
-    ...props,
-    iconBefore: null,
-    iconAfter: null
-  }, ref);
-  const size = useTreeContext_unstable(ctx => ctx.size);
-  return {
-    ...treeItemLayoutState,
-    components: {
-      expandIcon: 'div',
-      content: 'div',
-      main: 'div',
-      description: 'div',
-      root: 'div',
-      media: 'div'
-    },
-    avatarSize: treeAvatarSize[size],
-    main: resolveShorthand(main, {
-      required: true,
-      defaultProps: {
-        children
-      }
-    }),
-    media: resolveShorthand(media, {
-      required: true
-    }),
-    content: resolveShorthand(content, {
-      required: true
-    }),
-    description: resolveShorthand(description)
-  };
+ */ export const useTreeItemPersonaLayout_unstable = (props, ref)=>{
+    const { media , content , children , main , description  } = props;
+    const treeItemLayoutState = useTreeItemLayout_unstable({
+        ...props,
+        iconBefore: null,
+        iconAfter: null
+    }, ref);
+    const size = useTreeContext_unstable((ctx)=>ctx.size);
+    return {
+        ...treeItemLayoutState,
+        components: {
+            expandIcon: 'div',
+            content: 'div',
+            main: 'div',
+            description: 'div',
+            root: 'div',
+            media: 'div'
+        },
+        avatarSize: treeAvatarSize[size],
+        main: resolveShorthand(main, {
+            required: true,
+            defaultProps: {
+                children
+            }
+        }),
+        media: resolveShorthand(media, {
+            required: true
+        }),
+        content: resolveShorthand(content, {
+            required: true
+        }),
+        description: resolveShorthand(description)
+    };
 };
-//# sourceMappingURL=useTreeItemPersonaLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","resolveShorthand","useTreeContext_unstable","treeAvatarSize","useTreeItemLayout_unstable","useTreeItemPersonaLayout_unstable","props","ref","media","content","children","main","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","components","expandIcon","root","avatarSize","required","defaultProps"],"sources":["../../../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n  props: TreeItemPersonaLayoutProps,\n  ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n  const { media, content, 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  return {\n    ...treeItemLayoutState,\n    components: {\n      expandIcon: 'div',\n      content: 'div',\n      main: 'div',\n      description: 'div',\n      root: 'div',\n      media: 'div',\n    },\n    avatarSize: treeAvatarSize[size],\n    main: resolveShorthand(main, { required: true, defaultProps: { children } }),\n    media: resolveShorthand(media, { required: true }),\n    content: resolveShorthand(content, { required: true }),\n    description: resolveShorthand(description),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAEvB,SAASC,gBAAgB,QAAQ;AACjC,SAASC,uBAAuB,QAAQ;AACxC,SAASC,cAAc,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ;AAE3C;;;;;;;;;AASA,OAAO,MAAMC,iCAAA,GAAoCA,CAC/CC,KAAA,EACAC,GAAA,KAC+B;EAC/B,MAAM;IAAEC,KAAA;IAAOC,OAAA;IAASC,QAAA;IAAUC,IAAA;IAAMC;EAAW,CAAE,GAAGN,KAAA;EAExD,MAAMO,mBAAA,GAAsBT,0BAAA,CAC1B;IACE,GAAGE,KAAK;IACRQ,UAAA,EAAY,IAAI;IAChBC,SAAA,EAAW;EACb,GACAR,GAAA;EAGF,MAAMS,IAAA,GAAOd,uBAAA,CAAwBe,GAAA,IAAOA,GAAA,CAAID,IAAI;EACpD,OAAO;IACL,GAAGH,mBAAmB;IACtBK,UAAA,EAAY;MACVC,UAAA,EAAY;MACZV,OAAA,EAAS;MACTE,IAAA,EAAM;MACNC,WAAA,EAAa;MACbQ,IAAA,EAAM;MACNZ,KAAA,EAAO;IACT;IACAa,UAAA,EAAYlB,cAAc,CAACa,IAAA,CAAK;IAChCL,IAAA,EAAMV,gBAAA,CAAiBU,IAAA,EAAM;MAAEW,QAAA,EAAU,IAAI;MAAEC,YAAA,EAAc;QAAEb;MAAS;IAAE;IAC1EF,KAAA,EAAOP,gBAAA,CAAiBO,KAAA,EAAO;MAAEc,QAAA,EAAU;IAAK;IAChDb,OAAA,EAASR,gBAAA,CAAiBQ,OAAA,EAAS;MAAEa,QAAA,EAAU;IAAK;IACpDV,WAAA,EAAaX,gBAAA,CAAiBW,WAAA;EAChC;AACF"}
+{"version":3,"sources":["useTreeItemPersonaLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n  props: TreeItemPersonaLayoutProps,\n  ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n  const { media, content, 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  return {\n    ...treeItemLayoutState,\n    components: {\n      expandIcon: 'div',\n      content: 'div',\n      main: 'div',\n      description: 'div',\n      root: 'div',\n      media: 'div',\n    },\n    avatarSize: treeAvatarSize[size],\n    main: resolveShorthand(main, { required: true, defaultProps: { children } }),\n    media: resolveShorthand(media, { required: true }),\n    content: resolveShorthand(content, { required: true }),\n    description: resolveShorthand(description),\n  };\n};\n"],"names":["React","resolveShorthand","useTreeContext_unstable","treeAvatarSize","useTreeItemLayout_unstable","useTreeItemPersonaLayout_unstable","props","ref","media","content","children","main","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","components","expandIcon","root","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,QAAO,EAAEC,SAAQ,EAAEC,KAAI,EAAEC,YAAW,EAAE,GAAGN;IAExD,MAAMO,sBAAsBT,2BAC1B;QACE,GAAGE,KAAK;QACRQ,YAAY,IAAI;QAChBC,WAAW,IAAI;IACjB,GACAR;IAGF,MAAMS,OAAOd,wBAAwBe,CAAAA,MAAOA,IAAID,IAAI;IACpD,OAAO;QACL,GAAGH,mBAAmB;QACtBK,YAAY;YACVC,YAAY;YACZV,SAAS;YACTE,MAAM;YACNC,aAAa;YACbQ,MAAM;YACNZ,OAAO;QACT;QACAa,YAAYlB,cAAc,CAACa,KAAK;QAChCL,MAAMV,iBAAiBU,MAAM;YAAEW,UAAU,IAAI;YAAEC,cAAc;gBAAEb;YAAS;QAAE;QAC1EF,OAAOP,iBAAiBO,OAAO;YAAEc,UAAU,IAAI;QAAC;QAChDb,SAASR,iBAAiBQ,SAAS;YAAEa,UAAU,IAAI;QAAC;QACpDV,aAAaX,iBAAiBW;IAChC;AACF,EAAE"}

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js

@@ -1,13 +1,12 @@
 import * as React from 'react';
 export function useTreeItemPersonaLayoutContextValues_unstable(state) {
-  const {
-    avatarSize
-  } = state;
-  const avatar = React.useMemo(() => ({
-    size: avatarSize
-  }), [avatarSize]);
-  return {
-    avatar
-  };
+    const { avatarSize  } = state;
+    const avatar = React.useMemo(()=>({
+            size: avatarSize
+        }), [
+        avatarSize
+    ]);
+    return {
+        avatar
+    };
 }
-//# sourceMappingURL=useTreeItemPersonaLayoutContextValues.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useTreeItemPersonaLayoutContextValues_unstable","state","avatarSize","avatar","useMemo","size"],"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"],"mappings":"AACA,YAAYA,KAAA,MAAW;AAGvB,OAAO,SAASC,+CACdC,KAAiC,EACG;EACpC,MAAM;IAAEC;EAAU,CAAE,GAAGD,KAAA;EAEvB,MAAME,MAAA,GAASJ,KAAA,CAAMK,OAAO,CAAqB,OAAO;IAAEC,IAAA,EAAMH;EAAW,IAAI,CAACA,UAAA,CAAW;EAE3F,OAAO;IAAEC;EAAO;AAClB"}
+{"version":3,"sources":["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,EACG;IACpC,MAAM,EAAEC,WAAU,EAAE,GAAGD;IAEvB,MAAME,SAASJ,MAAMK,OAAO,CAAqB,IAAO,CAAA;YAAEC,MAAMH;QAAW,CAAA,GAAI;QAACA;KAAW;IAE3F,OAAO;QAAEC;IAAO;AAClB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","treeItemPersonaLayoutClassNames","root","expandIcon","media","content","description","main","useRootStyles","base","mc9l5x","Bt984gj","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Ijaq50","Br312pm","nk6f5a","Bw0ie65","lj723h","ecr2s2","zt0xaq","Bi91k9c","Jwef8y","tbva4x","leaf","uwmqm3","branch","d","a","h","useMediaStyles","a9b677","Bqenvij","z8tnut","z189sj","Byoj8tv","useContentStyles","Beiy3e4","i8kkvl","Belr9w4","useDescriptionStyles","useExpandIconStyles","Brf1p80","Bf4jedk","B7ck84d","sj55zd","Bh6795r","Bnnss6s","xawz","useTreeItemPersonaLayoutStyles_unstable","state","rootStyles","mediaStyles","contentStyles","descriptionStyles","expandIconStyles","itemType","ctx","className"],"sources":["../../../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts"],"sourcesContent":["import type { TreeItemPersonaLayoutSlots, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } 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  expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n  media: 'fui-TreeItemPersonaLayout__media',\n  content: 'fui-TreeItemPersonaLayout__content',\n  description: 'fui-TreeItemPersonaLayout__description',\n  main: 'fui-TreeItemPersonaLayout__main',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'flex',\n    alignItems: 'center',\n    ...typographyStyles.body1,\n    ...shorthands.gridArea('layout'),\n    ':active': {\n      color: tokens.colorNeutralForeground2Pressed,\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      // TODO: stop using treeItemClassNames.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 treeItemClassNames.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/**\n * Styles for the expand icon slot\n */\nconst useMediaStyles = makeStyles({\n  base: {\n    display: 'flex',\n    alignItems: 'center',\n    width: '32px',\n    height: '32px',\n    ...shorthands.padding(0, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalXXS),\n  },\n});\n\nconst useContentStyles = makeStyles({\n  base: {\n    width: '100%',\n    display: 'flex',\n    flexDirection: 'column',\n    ...shorthands.padding(\n      tokens.spacingVerticalMNudge,\n      tokens.spacingHorizontalXS,\n      tokens.spacingVerticalMNudge,\n      tokens.spacingHorizontalS,\n    ),\n    ...shorthands.gap(tokens.spacingVerticalNone, tokens.spacingHorizontalNone),\n  },\n});\n\nconst useDescriptionStyles = makeStyles({\n  base: {\n    ...typographyStyles.caption1,\n  },\n});\n\n/**\n * Styles for the expand icon slot\n */\nconst 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/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */\nexport const useTreeItemPersonaLayoutStyles_unstable = (\n  state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutState => {\n  const rootStyles = useRootStyles();\n  const mediaStyles = useMediaStyles();\n  const contentStyles = useContentStyles();\n  const descriptionStyles = useDescriptionStyles();\n  const expandIconStyles = useExpandIconStyles();\n\n  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n\n  state.root.className = mergeClasses(\n    treeItemPersonaLayoutClassNames.root,\n    rootStyles.base,\n    rootStyles[itemType],\n    state.root.className,\n  );\n\n  state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);\n\n  if (state.content) {\n    state.content.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.content,\n      contentStyles.base,\n      state.content.className,\n    );\n  }\n  if (state.main) {\n    state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, state.main.className);\n  }\n  if (state.description) {\n    state.description.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.description,\n      descriptionStyles.base,\n      state.description.className,\n    );\n  }\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.expandIcon,\n      expandIconStyles.base,\n      state.expandIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","treeItemPersonaLayoutClassNames","root","expandIcon","media","content","description","main","useRootStyles","base","mc9l5x","Bt984gj","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Ijaq50","Br312pm","nk6f5a","Bw0ie65","lj723h","ecr2s2","zt0xaq","Bi91k9c","Jwef8y","tbva4x","leaf","uwmqm3","branch","d","a","h","useMediaStyles","a9b677","Bqenvij","z8tnut","z189sj","Byoj8tv","useContentStyles","Beiy3e4","i8kkvl","Belr9w4","useDescriptionStyles","useExpandIconStyles","Brf1p80","Bf4jedk","B7ck84d","sj55zd","Bh6795r","Bnnss6s","xawz","useTreeItemPersonaLayoutStyles_unstable","state","rootStyles","mediaStyles","contentStyles","descriptionStyles","expandIconStyles","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    expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n    media: 'fui-TreeItemPersonaLayout__media',\n    content: 'fui-TreeItemPersonaLayout__content',\n    description: 'fui-TreeItemPersonaLayout__description',\n    main: 'fui-TreeItemPersonaLayout__main'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        ...typographyStyles.body1,\n        ...shorthands.gridArea('layout'),\n        ':active': {\n            color: tokens.colorNeutralForeground2Pressed,\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            // TODO: stop using treeItemClassNames.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 treeItemClassNames.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.padding(0, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalXXS)\n    }\n});\nconst useContentStyles = makeStyles({\n    base: {\n        width: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n        ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalXS, tokens.spacingVerticalMNudge, tokens.spacingHorizontalS),\n        ...shorthands.gap(tokens.spacingVerticalNone, tokens.spacingHorizontalNone)\n    }\n});\nconst useDescriptionStyles = makeStyles({\n    base: {\n        ...typographyStyles.caption1\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 * 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 contentStyles = useContentStyles();\n    const descriptionStyles = useDescriptionStyles();\n    const expandIconStyles = useExpandIconStyles();\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.content.className);\n    }\n    if (state.main) {\n        state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, state.main.className);\n    }\n    if (state.description) {\n        state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.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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"}

package/lib/contexts/index.js

@@ -1,3 +1,2 @@
 export * from './treeContext';
 export * from './treeItemContext';
-//# sourceMappingURL=index.js.map

package/lib/contexts/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../src/contexts/index.ts"],"sourcesContent":["export * from './treeContext';\nexport * from './treeItemContext';\n"],"mappings":"AAAA,cAAc;AACd,cAAc"}
+{"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

@@ -1,17 +1,14 @@
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 import { emptyImmutableSet } from '../utils/ImmutableSet';
 const defaultContextValue = {
-  level: 0,
-  openItems: emptyImmutableSet,
-  requestTreeResponse: noop,
-  appearance: 'subtle',
-  size: 'medium'
+    level: 0,
+    openItems: emptyImmutableSet,
+    requestTreeResponse: noop,
+    appearance: 'subtle',
+    size: 'medium'
 };
 function noop() {
-  /* noop */}
-export const TreeContext = /*#__PURE__*/createContext(undefined);
-export const {
-  Provider: TreeProvider
-} = TreeContext;
-export const useTreeContext_unstable = selector => useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));
-//# sourceMappingURL=treeContext.js.map
+/* noop */ }
+export const TreeContext = createContext(undefined);
+export const { Provider: TreeProvider  } = TreeContext;
+export const useTreeContext_unstable = (selector)=>useContextSelector(TreeContext, (ctx = defaultContextValue)=>selector(ctx));

package/lib/contexts/treeContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","useContextSelector","emptyImmutableSet","defaultContextValue","level","openItems","requestTreeResponse","noop","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"sources":["../../src/contexts/treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\nimport { emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\nimport { TreeItemType } from '../TreeItem';\n\nexport type TreeContextValue = {\n  level: number;\n  appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n  size: 'small' | 'medium';\n  openItems: ImmutableSet<unknown>;\n  /**\n   * requests root Tree component to respond to some tree item event,\n   */\n  requestTreeResponse(request: TreeItemRequest<unknown>): void;\n};\n\nexport type TreeItemRequest<Value> = { itemType: TreeItemType } & (\n  | OmitWithoutExpanding<TreeOpenChangeData<Value>, 'open' | 'target'>\n  | OmitWithoutExpanding<TreeNavigationData_unstable<Value>, 'target'>\n);\n\n// helper type that avoids the expansion of unions while inferring it, should work exactly the same as Omit\ntype OmitWithoutExpanding<P, K extends string | number | symbol> = P extends unknown ? Omit<P, K> : P;\n\nconst defaultContextValue: TreeContextValue = {\n  level: 0,\n  openItems: emptyImmutableSet,\n  requestTreeResponse: noop,\n  appearance: 'subtle',\n  size: 'medium',\n};\n\nfunction noop() {\n  /* noop */\n}\n\nexport const TreeContext: Context<TreeContextValue | undefined> = createContext<TreeContextValue | undefined>(\n  undefined,\n);\n\nexport const { Provider: TreeProvider } = TreeContext;\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n  useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));\n"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ;AAE5E,SAASC,iBAAiB,QAAsB;AAsBhD,MAAMC,mBAAA,GAAwC;EAC5CC,KAAA,EAAO;EACPC,SAAA,EAAWH,iBAAA;EACXI,mBAAA,EAAqBC,IAAA;EACrBC,UAAA,EAAY;EACZC,IAAA,EAAM;AACR;AAEA,SAASF,KAAA,EAAO;EACd;AAGF,OAAO,MAAMG,WAAA,gBAAqDV,aAAA,CAChEW,SAAA;AAGF,OAAO,MAAM;EAAEC,QAAA,EAAUC;AAAY,CAAE,GAAGH,WAAA;AAC1C,OAAO,MAAMI,uBAAA,GAA8BC,QAAA,IACzCd,kBAAA,CAAmBS,WAAA,EAAa,CAACM,GAAA,GAAMb,mBAAmB,KAAKY,QAAA,CAASC,GAAA"}
+{"version":3,"sources":["treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\nimport { emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\nimport { TreeItemType } from '../TreeItem';\n\nexport type TreeContextValue = {\n  level: number;\n  appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n  size: 'small' | 'medium';\n  openItems: ImmutableSet<unknown>;\n  /**\n   * requests root Tree component to respond to some tree item event,\n   */\n  requestTreeResponse(request: TreeItemRequest<unknown>): void;\n};\n\nexport type TreeItemRequest<Value> = { itemType: TreeItemType } & (\n  | OmitWithoutExpanding<TreeOpenChangeData<Value>, 'open' | 'target'>\n  | OmitWithoutExpanding<TreeNavigationData_unstable<Value>, 'target'>\n);\n\n// helper type that avoids the expansion of unions while inferring it, should work exactly the same as Omit\ntype OmitWithoutExpanding<P, K extends string | number | symbol> = P extends unknown ? Omit<P, K> : P;\n\nconst defaultContextValue: TreeContextValue = {\n  level: 0,\n  openItems: emptyImmutableSet,\n  requestTreeResponse: noop,\n  appearance: 'subtle',\n  size: 'medium',\n};\n\nfunction noop() {\n  /* noop */\n}\n\nexport const TreeContext: Context<TreeContextValue | undefined> = createContext<TreeContextValue | undefined>(\n  undefined,\n);\n\nexport const { Provider: TreeProvider } = TreeContext;\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n  useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","emptyImmutableSet","defaultContextValue","level","openItems","requestTreeResponse","noop","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAE/G,SAASC,iBAAiB,QAAsB,wBAAwB;AAsBxE,MAAMC,sBAAwC;IAC5CC,OAAO;IACPC,WAAWH;IACXI,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACR;AAEA,SAASF,OAAO;AACd,QAAQ,GACV;AAEA,OAAO,MAAMG,cAAqDV,cAChEW,WACA;AAEF,OAAO,MAAM,EAAEC,UAAUC,aAAY,EAAE,GAAGH,YAAY;AACtD,OAAO,MAAMI,0BAA0B,CAAIC,WACzCd,mBAAmBS,aAAa,CAACM,MAAMb,mBAAmB,GAAKY,SAASC,MAAM"}

package/lib/contexts/treeItemContext.js

@@ -1,19 +1,16 @@
 import * as React from 'react';
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 const defaultContextValue = {
-  value: undefined,
-  isActionsVisible: false,
-  isAsideVisible: true,
-  actionsRef: /*#__PURE__*/React.createRef(),
-  expandIconRef: /*#__PURE__*/React.createRef(),
-  layoutRef: /*#__PURE__*/React.createRef(),
-  subtreeRef: /*#__PURE__*/React.createRef(),
-  itemType: 'leaf',
-  open: false
+    value: undefined,
+    isActionsVisible: false,
+    isAsideVisible: true,
+    actionsRef: React.createRef(),
+    expandIconRef: React.createRef(),
+    layoutRef: React.createRef(),
+    subtreeRef: React.createRef(),
+    itemType: 'leaf',
+    open: false
 };
-export const TreeItemContext = /*#__PURE__*/createContext(undefined);
-export const {
-  Provider: TreeItemProvider
-} = TreeItemContext;
-export const useTreeItemContext_unstable = selector => useContextSelector(TreeItemContext, (ctx = defaultContextValue) => selector(ctx));
-//# sourceMappingURL=treeItemContext.js.map
+export const TreeItemContext = createContext(undefined);
+export const { Provider: TreeItemProvider  } = TreeItemContext;
+export const useTreeItemContext_unstable = (selector)=>useContextSelector(TreeItemContext, (ctx = defaultContextValue)=>selector(ctx));

package/lib/contexts/treeItemContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","createContext","useContextSelector","defaultContextValue","value","undefined","isActionsVisible","isAsideVisible","actionsRef","createRef","expandIconRef","layoutRef","subtreeRef","itemType","open","TreeItemContext","Provider","TreeItemProvider","useTreeItemContext_unstable","selector","ctx"],"sources":["../../src/contexts/treeItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType } from '../TreeItem';\n\nexport type TreeItemContextValue = {\n  isActionsVisible: boolean;\n  isAsideVisible: boolean;\n  actionsRef: React.Ref<HTMLDivElement>;\n  expandIconRef: React.Ref<HTMLDivElement>;\n  layoutRef: React.Ref<HTMLDivElement>;\n  subtreeRef: React.Ref<HTMLDivElement>;\n  value: unknown;\n  itemType: TreeItemType;\n  open: boolean;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n  value: undefined,\n  isActionsVisible: false,\n  isAsideVisible: true,\n  actionsRef: React.createRef(),\n  expandIconRef: React.createRef(),\n  layoutRef: React.createRef(),\n  subtreeRef: React.createRef(),\n  itemType: 'leaf',\n  open: false,\n};\n\nexport const TreeItemContext: Context<TreeItemContextValue | undefined> = createContext<\n  TreeItemContextValue | undefined\n>(undefined);\n\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = <T>(selector: ContextSelector<TreeItemContextValue, T>): T =>\n  useContextSelector(TreeItemContext, (ctx = defaultContextValue) => selector(ctx));\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAAmCC,aAAa,EAAEC,kBAAkB,QAAQ;AAe5E,MAAMC,mBAAA,GAA4C;EAChDC,KAAA,EAAOC,SAAA;EACPC,gBAAA,EAAkB,KAAK;EACvBC,cAAA,EAAgB,IAAI;EACpBC,UAAA,eAAYR,KAAA,CAAMS,SAAS;EAC3BC,aAAA,eAAeV,KAAA,CAAMS,SAAS;EAC9BE,SAAA,eAAWX,KAAA,CAAMS,SAAS;EAC1BG,UAAA,eAAYZ,KAAA,CAAMS,SAAS;EAC3BI,QAAA,EAAU;EACVC,IAAA,EAAM;AACR;AAEA,OAAO,MAAMC,eAAA,gBAA6Dd,aAAA,CAExEI,SAAA;AAEF,OAAO,MAAM;EAAEW,QAAA,EAAUC;AAAgB,CAAE,GAAGF,eAAA;AAC9C,OAAO,MAAMG,2BAAA,GAAkCC,QAAA,IAC7CjB,kBAAA,CAAmBa,eAAA,EAAiB,CAACK,GAAA,GAAMjB,mBAAmB,KAAKgB,QAAA,CAASC,GAAA"}
+{"version":3,"sources":["treeItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType } from '../TreeItem';\n\nexport type TreeItemContextValue = {\n  isActionsVisible: boolean;\n  isAsideVisible: boolean;\n  actionsRef: React.Ref<HTMLDivElement>;\n  expandIconRef: React.Ref<HTMLDivElement>;\n  layoutRef: React.Ref<HTMLDivElement>;\n  subtreeRef: React.Ref<HTMLDivElement>;\n  value: unknown;\n  itemType: TreeItemType;\n  open: boolean;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n  value: undefined,\n  isActionsVisible: false,\n  isAsideVisible: true,\n  actionsRef: React.createRef(),\n  expandIconRef: React.createRef(),\n  layoutRef: React.createRef(),\n  subtreeRef: React.createRef(),\n  itemType: 'leaf',\n  open: false,\n};\n\nexport const TreeItemContext: Context<TreeItemContextValue | undefined> = createContext<\n  TreeItemContextValue | undefined\n>(undefined);\n\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = <T>(selector: ContextSelector<TreeItemContextValue, T>): T =>\n  useContextSelector(TreeItemContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","defaultContextValue","value","undefined","isActionsVisible","isAsideVisible","actionsRef","createRef","expandIconRef","layoutRef","subtreeRef","itemType","open","TreeItemContext","Provider","TreeItemProvider","useTreeItemContext_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAmCC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAe/G,MAAMC,sBAA4C;IAChDC,OAAOC;IACPC,kBAAkB,KAAK;IACvBC,gBAAgB,IAAI;IACpBC,YAAYR,MAAMS,SAAS;IAC3BC,eAAeV,MAAMS,SAAS;IAC9BE,WAAWX,MAAMS,SAAS;IAC1BG,YAAYZ,MAAMS,SAAS;IAC3BI,UAAU;IACVC,MAAM,KAAK;AACb;AAEA,OAAO,MAAMC,kBAA6Dd,cAExEI,WAAW;AAEb,OAAO,MAAM,EAAEW,UAAUC,iBAAgB,EAAE,GAAGF,gBAAgB;AAC9D,OAAO,MAAMG,8BAA8B,CAAIC,WAC7CjB,mBAAmBa,iBAAiB,CAACK,MAAMjB,mBAAmB,GAAKgB,SAASC,MAAM"}

package/lib/hooks/index.js

@@ -1,4 +1,3 @@
 export * from './useFlatTree';
 export * from './useNestedTreeNavigation';
 export * from './useOpenItemsState';
-//# sourceMappingURL=index.js.map

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../src/hooks/index.ts"],"sourcesContent":["export * from './useFlatTree';\nexport * from './useNestedTreeNavigation';\nexport * from './useOpenItemsState';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useFlatTree';\nexport * from './useNestedTreeNavigation';\nexport * from './useOpenItemsState';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,4BAA4B;AAC1C,cAAc,sBAAsB"}