@fluentui/react-tree 9.16.3 → 9.16.5

package/lib-commonjs/components/TreeItemLayout/{useTreeItemLayoutStyles.styles.raw.js.map → useTreeItemLayoutStyles.styles.raw.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\n\nexport const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots> = {\n  root: 'fui-TreeItemLayout',\n  iconBefore: 'fui-TreeItemLayout__iconBefore',\n  main: 'fui-TreeItemLayout__main',\n  iconAfter: 'fui-TreeItemLayout__iconAfter',\n  expandIcon: 'fui-TreeItemLayout__expandIcon',\n  aside: 'fui-TreeItemLayout__aside',\n  actions: 'fui-TreeItemLayout__actions',\n  selector: 'fui-TreeItemLayout__selector',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n  minHeight: '32px',\n  boxSizing: 'border-box',\n  gridArea: 'layout',\n  ':hover': {\n    color: tokens.colorNeutralForeground2Hover,\n    backgroundColor: tokens.colorSubtleBackgroundHover,\n    // TODO: stop using treeItemLayoutClassNames.expandIcon  for styling\n    [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n  },\n  ':active': {\n    color: tokens.colorNeutralForeground2Pressed,\n    backgroundColor: tokens.colorSubtleBackgroundPressed,\n    // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n    [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n      color: tokens.colorNeutralForeground3Pressed,\n    },\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  leaf: {\n    paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`,\n  },\n  branch: {\n    paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`,\n  },\n  medium: {\n    ...typographyStyles.body1,\n  },\n  small: {\n    minHeight: '24px',\n    ...typographyStyles.caption1,\n  },\n  // Appearance variations\n  subtle: {},\n  'subtle-alpha': {\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed,\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n  },\n});\n\n/**\n * Styles for the action icon slot\n */\nconst useActionsBaseStyles = makeResetStyles({\n  display: 'flex',\n  marginLeft: 'auto',\n  position: 'relative',\n  zIndex: 1,\n  gridArea: 'aside',\n  padding: `0 ${tokens.spacingHorizontalS}`,\n});\n/**\n * Styles for the action icon slot\n */\nconst useAsideBaseStyles = makeResetStyles({\n  display: 'flex',\n  marginLeft: 'auto',\n  alignItems: 'center',\n  zIndex: 0,\n  gridArea: 'aside',\n  padding: `0 ${tokens.spacingHorizontalM}`,\n  gap: tokens.spacingHorizontalXS,\n});\n\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconBaseStyles = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minWidth: '24px',\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground3,\n  flex: `0 0 auto`,\n  padding: `${tokens.spacingVerticalXS} 0`,\n});\n\n/**\n * Styles for the content slot\n */\nconst useMainBaseStyles = makeResetStyles({\n  padding: `0 ${tokens.spacingHorizontalXXS}`,\n});\n\n/**\n * Styles for the before/after icon slot\n */\nconst useIconBaseStyles = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n  color: tokens.colorNeutralForeground2,\n  lineHeight: tokens.lineHeightBase500,\n  fontSize: tokens.fontSizeBase500,\n});\n\nconst useIconBeforeStyles = makeStyles({\n  medium: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n  small: {\n    paddingRight: tokens.spacingHorizontalXXS,\n  },\n});\n\nconst useIconAfterStyles = makeStyles({\n  medium: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n  small: {\n    paddingLeft: tokens.spacingHorizontalXXS,\n  },\n});\n\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */\nexport const useTreeItemLayoutStyles_unstable = (state: TreeItemLayoutState): TreeItemLayoutState => {\n  const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;\n  const rootStyles = useRootStyles();\n  const rootBaseStyles = useRootBaseStyles();\n  const actionsBaseStyles = useActionsBaseStyles();\n  const asideBaseStyles = useAsideBaseStyles();\n\n  const mainBaseStyles = useMainBaseStyles();\n\n  const expandIconBaseStyles = useExpandIconBaseStyles();\n  const iconBaseStyles = useIconBaseStyles();\n  const iconBeforeStyles = useIconBeforeStyles();\n  const iconAfterStyles = useIconAfterStyles();\n\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  const appearance = useTreeContext_unstable(ctx => ctx.appearance);\n  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n\n  // eslint-disable-next-line react-hooks/immutability\n  root.className = mergeClasses(\n    treeItemLayoutClassNames.root,\n    rootBaseStyles,\n    rootStyles[appearance],\n    rootStyles[size],\n    rootStyles[itemType],\n    root.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);\n\n  if (expandIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    expandIcon.className = mergeClasses(\n      treeItemLayoutClassNames.expandIcon,\n      expandIconBaseStyles,\n      expandIcon.className,\n    );\n  }\n\n  if (iconBefore) {\n    // eslint-disable-next-line react-hooks/immutability\n    iconBefore.className = mergeClasses(\n      treeItemLayoutClassNames.iconBefore,\n      iconBaseStyles,\n      iconBeforeStyles[size],\n      iconBefore.className,\n    );\n  }\n\n  if (iconAfter) {\n    // eslint-disable-next-line react-hooks/immutability\n    iconAfter.className = mergeClasses(\n      treeItemLayoutClassNames.iconAfter,\n      iconBaseStyles,\n      iconAfterStyles[size],\n      iconAfter.className,\n    );\n  }\n\n  if (actions) {\n    // eslint-disable-next-line react-hooks/immutability\n    actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);\n  }\n  if (aside) {\n    // eslint-disable-next-line react-hooks/immutability\n    aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);\n  }\n  if (selector) {\n    // eslint-disable-next-line react-hooks/immutability\n    selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","iconBefore","main","iconAfter","expandIcon","aside","actions","selector","useRootBaseStyles","display","alignItems","minHeight","boxSizing","gridArea","color","colorNeutralForeground2Hover","backgroundColor","colorSubtleBackgroundHover","colorNeutralForeground3Hover","colorNeutralForeground2Pressed","colorSubtleBackgroundPressed","colorNeutralForeground3Pressed","useRootStyles","leaf","paddingLeft","spacingHorizontalXXL","branch","medium","body1","small","caption1","subtle","colorSubtleBackgroundLightAlphaHover","colorSubtleBackgroundLightAlphaPressed","transparent","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","useActionsBaseStyles","marginLeft","position","zIndex","padding","spacingHorizontalS","useAsideBaseStyles","spacingHorizontalM","gap","spacingHorizontalXS","useExpandIconBaseStyles","justifyContent","minWidth","colorNeutralForeground3","flex","spacingVerticalXS","useMainBaseStyles","spacingHorizontalXXS","useIconBaseStyles","colorNeutralForeground2","lineHeight","lineHeightBase500","fontSize","fontSizeBase500","useIconBeforeStyles","paddingRight","useIconAfterStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","rootBaseStyles","actionsBaseStyles","asideBaseStyles","mainBaseStyles","expandIconBaseStyles","iconBaseStyles","iconBeforeStyles","iconAfterStyles","size","ctx","appearance","itemType","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TreeItemLayout/useTreeItemLayoutStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\n\nexport const treeItemLayoutClassNames: SlotClassNames<TreeItemLayoutSlots> = {\n  root: 'fui-TreeItemLayout',\n  iconBefore: 'fui-TreeItemLayout__iconBefore',\n  main: 'fui-TreeItemLayout__main',\n  iconAfter: 'fui-TreeItemLayout__iconAfter',\n  expandIcon: 'fui-TreeItemLayout__expandIcon',\n  aside: 'fui-TreeItemLayout__aside',\n  actions: 'fui-TreeItemLayout__actions',\n  selector: 'fui-TreeItemLayout__selector',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n  minHeight: '32px',\n  boxSizing: 'border-box',\n  gridArea: 'layout',\n  ':hover': {\n    color: tokens.colorNeutralForeground2Hover,\n    backgroundColor: tokens.colorSubtleBackgroundHover,\n    // TODO: stop using treeItemLayoutClassNames.expandIcon  for styling\n    [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n  },\n  ':active': {\n    color: tokens.colorNeutralForeground2Pressed,\n    backgroundColor: tokens.colorSubtleBackgroundPressed,\n    // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n    [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n      color: tokens.colorNeutralForeground3Pressed,\n    },\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  leaf: {\n    paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`,\n  },\n  branch: {\n    paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`,\n  },\n  medium: {\n    ...typographyStyles.body1,\n  },\n  small: {\n    minHeight: '24px',\n    ...typographyStyles.caption1,\n  },\n  // Appearance variations\n  subtle: {},\n  'subtle-alpha': {\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed,\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n  },\n});\n\n/**\n * Styles for the action icon slot\n */\nconst useActionsBaseStyles = makeResetStyles({\n  display: 'flex',\n  marginLeft: 'auto',\n  position: 'relative',\n  zIndex: 1,\n  gridArea: 'aside',\n  padding: `0 ${tokens.spacingHorizontalS}`,\n});\n/**\n * Styles for the action icon slot\n */\nconst useAsideBaseStyles = makeResetStyles({\n  display: 'flex',\n  marginLeft: 'auto',\n  alignItems: 'center',\n  zIndex: 0,\n  gridArea: 'aside',\n  padding: `0 ${tokens.spacingHorizontalM}`,\n  gap: tokens.spacingHorizontalXS,\n});\n\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconBaseStyles = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minWidth: '24px',\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground3,\n  flex: `0 0 auto`,\n  padding: `${tokens.spacingVerticalXS} 0`,\n});\n\n/**\n * Styles for the content slot\n */\nconst useMainBaseStyles = makeResetStyles({\n  padding: `0 ${tokens.spacingHorizontalXXS}`,\n});\n\n/**\n * Styles for the before/after icon slot\n */\nconst useIconBaseStyles = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n  color: tokens.colorNeutralForeground2,\n  lineHeight: tokens.lineHeightBase500,\n  fontSize: tokens.fontSizeBase500,\n});\n\nconst useIconBeforeStyles = makeStyles({\n  medium: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n  small: {\n    paddingRight: tokens.spacingHorizontalXXS,\n  },\n});\n\nconst useIconAfterStyles = makeStyles({\n  medium: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n  small: {\n    paddingLeft: tokens.spacingHorizontalXXS,\n  },\n});\n\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */\nexport const useTreeItemLayoutStyles_unstable = (state: TreeItemLayoutState): TreeItemLayoutState => {\n  const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;\n  const rootStyles = useRootStyles();\n  const rootBaseStyles = useRootBaseStyles();\n  const actionsBaseStyles = useActionsBaseStyles();\n  const asideBaseStyles = useAsideBaseStyles();\n\n  const mainBaseStyles = useMainBaseStyles();\n\n  const expandIconBaseStyles = useExpandIconBaseStyles();\n  const iconBaseStyles = useIconBaseStyles();\n  const iconBeforeStyles = useIconBeforeStyles();\n  const iconAfterStyles = useIconAfterStyles();\n\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  const appearance = useTreeContext_unstable(ctx => ctx.appearance);\n  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n\n  // eslint-disable-next-line react-hooks/immutability\n  root.className = mergeClasses(\n    treeItemLayoutClassNames.root,\n    rootBaseStyles,\n    rootStyles[appearance],\n    rootStyles[size],\n    rootStyles[itemType],\n    root.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);\n\n  if (expandIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    expandIcon.className = mergeClasses(\n      treeItemLayoutClassNames.expandIcon,\n      expandIconBaseStyles,\n      expandIcon.className,\n    );\n  }\n\n  if (iconBefore) {\n    // eslint-disable-next-line react-hooks/immutability\n    iconBefore.className = mergeClasses(\n      treeItemLayoutClassNames.iconBefore,\n      iconBaseStyles,\n      iconBeforeStyles[size],\n      iconBefore.className,\n    );\n  }\n\n  if (iconAfter) {\n    // eslint-disable-next-line react-hooks/immutability\n    iconAfter.className = mergeClasses(\n      treeItemLayoutClassNames.iconAfter,\n      iconBaseStyles,\n      iconAfterStyles[size],\n      iconAfter.className,\n    );\n  }\n\n  if (actions) {\n    // eslint-disable-next-line react-hooks/immutability\n    actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);\n  }\n  if (aside) {\n    // eslint-disable-next-line react-hooks/immutability\n    aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);\n  }\n  if (selector) {\n    // eslint-disable-next-line react-hooks/immutability\n    selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","iconBefore","main","iconAfter","expandIcon","aside","actions","selector","useRootBaseStyles","display","alignItems","minHeight","boxSizing","gridArea","color","colorNeutralForeground2Hover","backgroundColor","colorSubtleBackgroundHover","colorNeutralForeground3Hover","colorNeutralForeground2Pressed","colorSubtleBackgroundPressed","colorNeutralForeground3Pressed","useRootStyles","leaf","paddingLeft","spacingHorizontalXXL","branch","medium","body1","small","caption1","subtle","colorSubtleBackgroundLightAlphaHover","colorSubtleBackgroundLightAlphaPressed","transparent","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","useActionsBaseStyles","marginLeft","position","zIndex","padding","spacingHorizontalS","useAsideBaseStyles","spacingHorizontalM","gap","spacingHorizontalXS","useExpandIconBaseStyles","justifyContent","minWidth","colorNeutralForeground3","flex","spacingVerticalXS","useMainBaseStyles","spacingHorizontalXXS","useIconBaseStyles","colorNeutralForeground2","lineHeight","lineHeightBase500","fontSize","fontSizeBase500","useIconBeforeStyles","paddingRight","useIconAfterStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","rootBaseStyles","actionsBaseStyles","asideBaseStyles","mainBaseStyles","expandIconBaseStyles","iconBaseStyles","iconBeforeStyles","iconAfterStyles","size","ctx","appearance","itemType","className"],"mappings":"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"}

package/lib-commonjs/components/TreeItemPersonaLayout/{TreeItemPersonaLayout.js → TreeItemPersonaLayout.cjs}

@@ -11,10 +11,10 @@ Object.defineProperty(exports, "TreeItemPersonaLayout", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useTreeItemPersonaLayout = require("./useTreeItemPersonaLayout");
-const _renderTreeItemPersonaLayout = require("./renderTreeItemPersonaLayout");
-const _useTreeItemPersonaLayoutStylesstyles = require("./useTreeItemPersonaLayoutStyles.styles");
-const _useTreeItemPersonaLayoutContextValues = require("./useTreeItemPersonaLayoutContextValues");
+const _useTreeItemPersonaLayout = require("./useTreeItemPersonaLayout.cjs");
+const _renderTreeItemPersonaLayout = require("./renderTreeItemPersonaLayout.cjs");
+const _useTreeItemPersonaLayoutStylesstyles = require("./useTreeItemPersonaLayoutStyles.styles.cjs");
+const _useTreeItemPersonaLayoutContextValues = require("./useTreeItemPersonaLayoutContextValues.cjs");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const TreeItemPersonaLayout = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useTreeItemPersonaLayout.useTreeItemPersonaLayout_unstable)(props, ref);

package/lib-commonjs/components/TreeItemPersonaLayout/{TreeItemPersonaLayout.js.map → TreeItemPersonaLayout.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles';\nimport type { TreeItemPersonaLayoutProps } from './TreeItemPersonaLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.\n * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItemPersonaLayout_unstable(props, ref);\n\n  useTreeItemPersonaLayoutStyles_unstable(state);\n  useCustomStyleHook_unstable('useTreeItemPersonaLayoutStyles_unstable')(state);\n\n  const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n\n  return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\n\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n"],"names":["React","useTreeItemPersonaLayout_unstable","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayoutContextValues_unstable","useCustomStyleHook_unstable","TreeItemPersonaLayout","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;0CACmB,6BAA6B;6CAC1B,gCAAgC;sDAC7B,0CAA0C;uDAGnC,0CAA0C;qCAC7D,kCAAkC;AAOvE,MAAMM,wBAAAA,WAAAA,GAAyEN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,YAAQT,2DAAAA,EAAkCO,OAAOC;QAEvDN,6EAAAA,EAAwCO;QACxCL,gDAAAA,EAA4B,2CAA2CK;IAEvE,MAAMC,oBAAgBP,qFAAAA,EAA+CM;IAErE,WAAOR,iEAAAA,EAAqCQ,OAAOC;AACrD,GAAG;AAEHL,sBAAsBM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nimport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nimport { useTreeItemPersonaLayoutStyles_unstable } from './useTreeItemPersonaLayoutStyles.styles';\nimport type { TreeItemPersonaLayoutProps } from './TreeItemPersonaLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemPersonaLayoutContextValues_unstable } from './useTreeItemPersonaLayoutContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.\n * It provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.\n * This component should only be used as a direct child of `TreeItem`.\n */\nexport const TreeItemPersonaLayout: ForwardRefComponent<TreeItemPersonaLayoutProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItemPersonaLayout_unstable(props, ref);\n\n  useTreeItemPersonaLayoutStyles_unstable(state);\n  useCustomStyleHook_unstable('useTreeItemPersonaLayoutStyles_unstable')(state);\n\n  const contextValues = useTreeItemPersonaLayoutContextValues_unstable(state);\n\n  return renderTreeItemPersonaLayout_unstable(state, contextValues);\n});\n\nTreeItemPersonaLayout.displayName = 'TreeItemPersonaLayout';\n"],"names":["React","useTreeItemPersonaLayout_unstable","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayoutStyles_unstable","useTreeItemPersonaLayoutContextValues_unstable","useCustomStyleHook_unstable","TreeItemPersonaLayout","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;0CACmB,gCAA6B;6CAC1B,mCAAgC;sDAC7B,6CAA0C;uDAGnC,6CAA0C;qCAC7D,kCAAkC;AAOvE,MAAMM,wBAAAA,WAAAA,GAAyEN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7G,MAAMC,YAAQT,2DAAAA,EAAkCO,OAAOC;QAEvDN,6EAAAA,EAAwCO;QACxCL,gDAAAA,EAA4B,2CAA2CK;IAEvE,MAAMC,oBAAgBP,qFAAAA,EAA+CM;IAErE,WAAOR,iEAAAA,EAAqCQ,OAAOC;AACrD,GAAG;AAEHL,sBAAsBM,WAAW,GAAG"}

package/lib-commonjs/components/TreeItemPersonaLayout/{index.js → index.cjs}

@@ -25,7 +25,7 @@ _export(exports, {
         return _useTreeItemPersonaLayout.useTreeItemPersonaLayout_unstable;
     }
 });
-const _TreeItemPersonaLayout = require("./TreeItemPersonaLayout");
-const _renderTreeItemPersonaLayout = require("./renderTreeItemPersonaLayout");
-const _useTreeItemPersonaLayout = require("./useTreeItemPersonaLayout");
-const _useTreeItemPersonaLayoutStylesstyles = require("./useTreeItemPersonaLayoutStyles.styles");
+const _TreeItemPersonaLayout = require("./TreeItemPersonaLayout.cjs");
+const _renderTreeItemPersonaLayout = require("./renderTreeItemPersonaLayout.cjs");
+const _useTreeItemPersonaLayout = require("./useTreeItemPersonaLayout.cjs");
+const _useTreeItemPersonaLayoutStylesstyles = require("./useTreeItemPersonaLayoutStyles.styles.cjs");

package/lib-commonjs/components/TreeItemPersonaLayout/{index.js.map → index.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TreeItemPersonaLayout/index.ts"],"sourcesContent":["export { TreeItemPersonaLayout } from './TreeItemPersonaLayout';\nexport type {\n  TreeItemPersonaLayoutContextValues,\n  TreeItemPersonaLayoutProps,\n  TreeItemPersonaLayoutSlots,\n  TreeItemPersonaLayoutState,\n} from './TreeItemPersonaLayout.types';\nexport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nexport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nexport {\n  treeItemPersonaLayoutClassNames,\n  useTreeItemPersonaLayoutStyles_unstable,\n} from './useTreeItemPersonaLayoutStyles.styles';\n"],"names":["TreeItemPersonaLayout","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayout_unstable","treeItemPersonaLayoutClassNames","useTreeItemPersonaLayoutStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,4CAAqB;;;eAOrBC,iEAAoC;;;eAG3CE,qEAA+B;;;eAC/BC,6EAAuC;;;eAHhCF,2DAAiC;;;uCARJ,0BAA0B;6CAOX,gCAAgC;0CACnC,6BAA6B;sDAIxE,0CAA0C"}
+{"version":3,"sources":["../src/components/TreeItemPersonaLayout/index.ts"],"sourcesContent":["export { TreeItemPersonaLayout } from './TreeItemPersonaLayout';\nexport type {\n  TreeItemPersonaLayoutContextValues,\n  TreeItemPersonaLayoutProps,\n  TreeItemPersonaLayoutSlots,\n  TreeItemPersonaLayoutState,\n} from './TreeItemPersonaLayout.types';\nexport { renderTreeItemPersonaLayout_unstable } from './renderTreeItemPersonaLayout';\nexport { useTreeItemPersonaLayout_unstable } from './useTreeItemPersonaLayout';\nexport {\n  treeItemPersonaLayoutClassNames,\n  useTreeItemPersonaLayoutStyles_unstable,\n} from './useTreeItemPersonaLayoutStyles.styles';\n"],"names":["TreeItemPersonaLayout","renderTreeItemPersonaLayout_unstable","useTreeItemPersonaLayout_unstable","treeItemPersonaLayoutClassNames","useTreeItemPersonaLayoutStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,4CAAqB;;;eAOrBC,iEAAoC;;;eAG3CE,qEAA+B;;;eAC/BC,6EAAuC;;;eAHhCF,2DAAiC;;;uCARJ,6BAA0B;6CAOX,mCAAgC;0CACnC,gCAA6B;sDAIxE,6CAA0C"}

package/lib-commonjs/components/TreeItemPersonaLayout/{useTreeItemPersonaLayout.js → useTreeItemPersonaLayout.cjs}

@@ -10,9 +10,9 @@ Object.defineProperty(exports, "useTreeItemPersonaLayout_unstable", {
     }
 });
 const _reactutilities = require("@fluentui/react-utilities");
-const _contexts = require("../../contexts");
-const _tokens = require("../../utils/tokens");
-const _useTreeItemLayout = require("../TreeItemLayout/useTreeItemLayout");
+const _index = require("../../contexts/index.cjs");
+const _tokens = require("../../utils/tokens.cjs");
+const _useTreeItemLayout = require("../TreeItemLayout/useTreeItemLayout.cjs");
 const _reactcheckbox = require("@fluentui/react-checkbox");
 const _reactradio = require("@fluentui/react-radio");
 const useTreeItemPersonaLayout_unstable = (props, ref)=>{
@@ -22,8 +22,8 @@ const useTreeItemPersonaLayout_unstable = (props, ref)=>{
         iconBefore: null,
         iconAfter: null
     }, ref);
-    const size = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.size);
-    const selectionMode = (0, _contexts.useTreeContext_unstable)((ctx)=>ctx.selectionMode);
+    const size = (0, _index.useTreeContext_unstable)((ctx)=>ctx.size);
+    const selectionMode = (0, _index.useTreeContext_unstable)((ctx)=>ctx.selectionMode);
     return {
         ...treeItemLayoutState,
         components: {
@@ -40,7 +40,8 @@ const useTreeItemPersonaLayout_unstable = (props, ref)=>{
         avatarSize: _tokens.treeAvatarSize[size],
         main: _reactutilities.slot.always(main, {
             defaultProps: {
-                children
+                children,
+                id: treeItemLayoutState.main.id
             },
             elementType: 'div'
         }),

package/lib-commonjs/components/TreeItemPersonaLayout/{useTreeItemPersonaLayout.js.map → useTreeItemPersonaLayout.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { slot } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\nimport type { CheckboxProps } from '@fluentui/react-checkbox';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport type { RadioProps } from '@fluentui/react-radio';\nimport { Radio } from '@fluentui/react-radio';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n  props: TreeItemPersonaLayoutProps,\n  ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n  const { media, children, main, description } = props;\n\n  const treeItemLayoutState = useTreeItemLayout_unstable(\n    {\n      ...props,\n      iconBefore: null,\n      iconAfter: null,\n    },\n    ref,\n  );\n\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n  return {\n    ...treeItemLayoutState,\n    components: {\n      expandIcon: 'div',\n      main: 'div',\n      description: 'div',\n      root: 'div',\n      media: 'div',\n      aside: 'div',\n      actions: 'div',\n      // Casting here to a union between checkbox and radio\n      selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\n    },\n    avatarSize: treeAvatarSize[size],\n    main: slot.always(main, { defaultProps: { children }, elementType: 'div' }),\n    media: slot.always(media, { elementType: 'div' }),\n    description: slot.optional(description, { elementType: 'div' }),\n  };\n};\n"],"names":["slot","useTreeContext_unstable","treeAvatarSize","useTreeItemLayout_unstable","Checkbox","Radio","useTreeItemPersonaLayout_unstable","props","ref","media","children","main","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","selectionMode","components","expandIcon","root","aside","actions","selector","avatarSize","always","defaultProps","elementType","optional"],"mappings":"AAAA;;;;;+BAsBaM;;;;;;gCAlBQ,4BAA4B;0BACT,iBAAiB;wBAC1B,qBAAqB;mCACT,sCAAsC;+BAExD,2BAA2B;4BAE9B,wBAAwB;AAWvC,0CAA0C,CAC/CC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGL;IAE/C,MAAMM,0BAAsBV,6CAAAA,EAC1B;QACE,GAAGI,KAAK;QACRO,YAAY;QACZC,WAAW;IACb,GACAP;IAGF,MAAMQ,WAAOf,iCAAAA,EAAwBgB,CAAAA,MAAOA,IAAID,IAAI;IACpD,MAAME,oBAAgBjB,iCAAAA,EAAwBgB,CAAAA,MAAOA,IAAIC,aAAa;IAEtE,OAAO;QACL,GAAGL,mBAAmB;QACtBM,YAAY;YACVC,YAAY;YACZT,MAAM;YACNC,aAAa;YACbS,MAAM;YACNZ,OAAO;YACPa,OAAO;YACPC,SAAS;YACT,qDAAqD;YACrDC,UAAWN,kBAAkB,gBAAgBd,uBAAAA,GAAWC,iBAAAA;QAC1D;QACAoB,YAAYvB,sBAAc,CAACc,KAAK;QAChCL,MAAMX,oBAAAA,CAAK0B,MAAM,CAACf,MAAM;YAAEgB,cAAc;gBAAEjB;YAAS;YAAGkB,aAAa;QAAM;QACzEnB,OAAOT,oBAAAA,CAAK0B,MAAM,CAACjB,OAAO;YAAEmB,aAAa;QAAM;QAC/ChB,aAAaZ,oBAAAA,CAAK6B,QAAQ,CAACjB,aAAa;YAAEgB,aAAa;QAAM;IAC/D;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { slot } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\nimport type { CheckboxProps } from '@fluentui/react-checkbox';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport type { RadioProps } from '@fluentui/react-radio';\nimport { Radio } from '@fluentui/react-radio';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n  props: TreeItemPersonaLayoutProps,\n  ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n  const { media, children, main, description } = props;\n\n  const treeItemLayoutState = useTreeItemLayout_unstable(\n    {\n      ...props,\n      iconBefore: null,\n      iconAfter: null,\n    },\n    ref,\n  );\n\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n  return {\n    ...treeItemLayoutState,\n    components: {\n      expandIcon: 'div',\n      main: 'div',\n      description: 'div',\n      root: 'div',\n      media: 'div',\n      aside: 'div',\n      actions: 'div',\n      // Casting here to a union between checkbox and radio\n      selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\n    },\n    avatarSize: treeAvatarSize[size],\n    main: slot.always(main, {\n      defaultProps: { children, id: treeItemLayoutState.main.id },\n      elementType: 'div',\n    }),\n    media: slot.always(media, { elementType: 'div' }),\n    description: slot.optional(description, { elementType: 'div' }),\n  };\n};\n"],"names":["slot","useTreeContext_unstable","treeAvatarSize","useTreeItemLayout_unstable","Checkbox","Radio","useTreeItemPersonaLayout_unstable","props","ref","media","children","main","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","selectionMode","components","expandIcon","root","aside","actions","selector","avatarSize","always","defaultProps","id","elementType","optional"],"mappings":"AAAA;;;;;+BAsBaM;;;;;;gCAlBQ,4BAA4B;uBACT,0BAAiB;wBAC1B,wBAAqB;mCACT,yCAAsC;+BAExD,2BAA2B;4BAE9B,wBAAwB;AAWvC,0CAA0C,CAC/CC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGL;IAE/C,MAAMM,0BAAsBV,6CAAAA,EAC1B;QACE,GAAGI,KAAK;QACRO,YAAY;QACZC,WAAW;IACb,GACAP;IAGF,MAAMQ,OAAOf,kCAAAA,EAAwBgB,CAAAA,MAAOA,IAAID,IAAI;IACpD,MAAME,oBAAgBjB,8BAAAA,EAAwBgB,CAAAA,MAAOA,IAAIC,aAAa;IAEtE,OAAO;QACL,GAAGL,mBAAmB;QACtBM,YAAY;YACVC,YAAY;YACZT,MAAM;YACNC,aAAa;YACbS,MAAM;YACNZ,OAAO;YACPa,OAAO;YACPC,SAAS;YACT,qDAAqD;YACrDC,UAAWN,kBAAkB,gBAAgBd,uBAAAA,GAAWC,iBAAAA;QAC1D;QACAoB,YAAYvB,sBAAc,CAACc,KAAK;QAChCL,MAAMX,oBAAAA,CAAK0B,MAAM,CAACf,MAAM;YACtBgB,cAAc;gBAAEjB;gBAAUkB,IAAIf,oBAAoBF,IAAI,CAACiB,EAAE;YAAC;YAC1DC,aAAa;QACf;QACApB,OAAOT,oBAAAA,CAAK0B,MAAM,CAACjB,OAAO;YAAEoB,aAAa;QAAM;QAC/CjB,aAAaZ,oBAAAA,CAAK8B,QAAQ,CAAClB,aAAa;YAAEiB,aAAa;QAAM;IAC/D;AACF,EAAE"}

package/lib-commonjs/components/TreeItemPersonaLayout/{useTreeItemPersonaLayoutStyles.styles.js → useTreeItemPersonaLayoutStyles.styles.cjs}

@@ -18,8 +18,8 @@ _export(exports, {
     }
 });
 const _react = require("@griffel/react");
-const _treeItemContext = require("../../contexts/treeItemContext");
-const _treeContext = require("../../contexts/treeContext");
+const _treeItemContext = require("../../contexts/treeItemContext.cjs");
+const _treeContext = require("../../contexts/treeContext.cjs");
 const treeItemPersonaLayoutClassNames = {
     root: 'fui-TreeItemPersonaLayout',
     media: 'fui-TreeItemPersonaLayout__media',

package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTreeItemPersonaLayoutStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from \"@griffel/react\";\nimport { tokens, typographyStyles } from \"@fluentui/react-theme\";\nimport { treeItemLevelToken } from \"../../utils/tokens.js\";\nimport { useTreeItemContext_unstable } from \"../../contexts/treeItemContext.js\";\nimport { useTreeContext_unstable } from \"../../contexts/treeContext.js\";\nexport const treeItemPersonaLayoutClassNames = {\n    root: 'fui-TreeItemPersonaLayout',\n    media: 'fui-TreeItemPersonaLayout__media',\n    description: 'fui-TreeItemPersonaLayout__description',\n    main: 'fui-TreeItemPersonaLayout__main',\n    expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n    aside: 'fui-TreeItemPersonaLayout__aside',\n    actions: 'fui-TreeItemPersonaLayout__actions',\n    selector: 'fui-TreeItemPersonaLayout__selector'\n};\nconst useRootBaseStyles = makeResetStyles({\n    display: 'grid',\n    gridTemplateRows: '1fr auto',\n    gridTemplateColumns: 'auto auto 1fr auto',\n    gridTemplateAreas: `\n    \"expandIcon media main        aside\"\n    \"expandIcon media description aside\"\n  `,\n    alignItems: 'center',\n    ...typographyStyles.body1,\n    ':active': {\n        color: tokens.colorNeutralForeground2Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n        // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n        [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n            color: tokens.colorNeutralForeground3Pressed\n        }\n    },\n    ':hover': {\n        color: tokens.colorNeutralForeground2Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n        // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n        [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n            color: tokens.colorNeutralForeground3Hover\n        }\n    }\n});\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    leaf: {\n        paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    branch: {\n        paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    // Size variations\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 expand icon slot\n */ const useMediaBaseStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    width: '32px',\n    height: '32px',\n    gridArea: 'media',\n    padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalXXS}`\n});\nconst useMainBaseStyles = makeResetStyles({\n    gridArea: 'main',\n    padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`\n});\nconst useMainStyles = makeStyles({\n    withDescription: {\n        padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalS}`\n    }\n});\nconst useDescriptionBaseStyles = makeResetStyles({\n    gridArea: 'description',\n    ...typographyStyles.caption1,\n    padding: `0 ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`\n});\n/**\n * Styles for the action icon slot\n */ const useActionsBaseStyles = makeResetStyles({\n    display: 'flex',\n    marginLeft: 'auto',\n    position: 'relative',\n    zIndex: 1,\n    gridArea: 'aside',\n    padding: `0 ${tokens.spacingHorizontalS}`\n});\n/**\n * Styles for the action icon slot\n */ const useAsideBaseStyles = makeResetStyles({\n    display: 'flex',\n    marginLeft: 'auto',\n    alignItems: 'center',\n    zIndex: 0,\n    gridArea: 'aside',\n    padding: `0 ${tokens.spacingHorizontalM}`,\n    gap: tokens.spacingHorizontalXS\n});\n/**\n * Styles for the expand icon slot\n */ const useExpandIconBaseStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: '24px',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground3,\n    gridArea: 'expandIcon',\n    flex: `0 0 auto`,\n    padding: `${tokens.spacingVerticalXS} 0`\n});\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */ export const useTreeItemPersonaLayoutStyles_unstable = (state)=>{\n    const rootBaseStyles = useRootBaseStyles();\n    const rootStyles = useRootStyles();\n    const mediaBaseStyles = useMediaBaseStyles();\n    const descriptionBaseStyles = useDescriptionBaseStyles();\n    const actionsBaseStyles = useActionsBaseStyles();\n    const asideBaseStyles = useAsideBaseStyles();\n    const expandIconBaseStyles = useExpandIconBaseStyles();\n    const mainBaseStyles = useMainBaseStyles();\n    const mainStyles = useMainStyles();\n    const size = useTreeContext_unstable((ctx)=>ctx.size);\n    const appearance = useTreeContext_unstable((ctx)=>ctx.appearance);\n    const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootBaseStyles, rootStyles[itemType], rootStyles[appearance], rootStyles[size], state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);\n    if (state.main) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainBaseStyles, state.description && mainStyles.withDescription, state.main.className);\n    }\n    if (state.description) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionBaseStyles, state.description.className);\n    }\n    if (state.actions) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsBaseStyles, state.actions.className);\n    }\n    if (state.aside) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);\n    }\n    if (state.expandIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconBaseStyles, state.expandIcon.className);\n    }\n    if (state.selector) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);\n    }\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","useTreeContext_unstable","treeItemPersonaLayoutClassNames","root","media","description","main","expandIcon","aside","actions","selector","useRootBaseStyles","useRootStyles","leaf","uwmqm3","branch","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","sshi5w","subtle","Jwef8y","ecr2s2","transparent","De3pzq","d","h","a","useMediaBaseStyles","useMainBaseStyles","useMainStyles","withDescription","Byoj8tv","z189sj","z8tnut","B0ocmuz","p","useDescriptionBaseStyles","useActionsBaseStyles","useAsideBaseStyles","useExpandIconBaseStyles","useTreeItemPersonaLayoutStyles_unstable","state","rootBaseStyles","rootStyles","mediaBaseStyles","descriptionBaseStyles","actionsBaseStyles","asideBaseStyles","expandIconBaseStyles","mainBaseStyles","mainStyles","size","ctx","appearance","itemType","className"],"mappings":"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"}

package/lib-commonjs/components/TreeItemPersonaLayout/{useTreeItemPersonaLayoutStyles.styles.raw.js → useTreeItemPersonaLayoutStyles.styles.raw.cjs}

@@ -19,9 +19,9 @@ _export(exports, {
 });
 const _react = require("@griffel/react");
 const _reacttheme = require("@fluentui/react-theme");
-const _tokens = require("../../utils/tokens");
-const _treeItemContext = require("../../contexts/treeItemContext");
-const _treeContext = require("../../contexts/treeContext");
+const _tokens = require("../../utils/tokens.cjs");
+const _treeItemContext = require("../../contexts/treeItemContext.cjs");
+const _treeContext = require("../../contexts/treeContext.cjs");
 const treeItemPersonaLayoutClassNames = {
     root: 'fui-TreeItemPersonaLayout',
     media: 'fui-TreeItemPersonaLayout__media',

package/lib-commonjs/components/TreeItemPersonaLayout/{useTreeItemPersonaLayoutStyles.styles.raw.js.map → useTreeItemPersonaLayoutStyles.styles.raw.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { TreeItemPersonaLayoutSlots, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\n\nexport const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutSlots> = {\n  root: 'fui-TreeItemPersonaLayout',\n  media: 'fui-TreeItemPersonaLayout__media',\n  description: 'fui-TreeItemPersonaLayout__description',\n  main: 'fui-TreeItemPersonaLayout__main',\n  expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n  aside: 'fui-TreeItemPersonaLayout__aside',\n  actions: 'fui-TreeItemPersonaLayout__actions',\n  selector: 'fui-TreeItemPersonaLayout__selector',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n  display: 'grid',\n  gridTemplateRows: '1fr auto',\n  gridTemplateColumns: 'auto auto 1fr auto',\n  gridTemplateAreas: `\n    \"expandIcon media main        aside\"\n    \"expandIcon media description aside\"\n  `,\n  alignItems: 'center',\n  ...typographyStyles.body1,\n  ':active': {\n    color: tokens.colorNeutralForeground2Pressed,\n    backgroundColor: tokens.colorSubtleBackgroundPressed,\n    // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n    [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n      color: tokens.colorNeutralForeground3Pressed,\n    },\n  },\n  ':hover': {\n    color: tokens.colorNeutralForeground2Hover,\n    backgroundColor: tokens.colorSubtleBackgroundHover,\n    // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n    [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  leaf: {\n    paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`,\n  },\n  branch: {\n    paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`,\n  },\n  // Size variations\n  medium: {\n    ...typographyStyles.body1,\n  },\n  small: {\n    minHeight: '24px',\n    ...typographyStyles.caption1,\n  },\n  // Appearance variations\n  subtle: {},\n  'subtle-alpha': {\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed,\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n  },\n});\n\n/**\n * Styles for the expand icon slot\n */\nconst useMediaBaseStyles = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n  width: '32px',\n  height: '32px',\n  gridArea: 'media',\n  padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalXXS}`,\n});\n\nconst useMainBaseStyles = makeResetStyles({\n  gridArea: 'main',\n  padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`,\n});\n\nconst useMainStyles = makeStyles({\n  withDescription: {\n    padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalS}`,\n  },\n});\n\nconst useDescriptionBaseStyles = makeResetStyles({\n  gridArea: 'description',\n  ...typographyStyles.caption1,\n  padding: `0 ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`,\n});\n\n/**\n * Styles for the action icon slot\n */\nconst useActionsBaseStyles = makeResetStyles({\n  display: 'flex',\n  marginLeft: 'auto',\n  position: 'relative',\n  zIndex: 1,\n  gridArea: 'aside',\n  padding: `0 ${tokens.spacingHorizontalS}`,\n});\n/**\n * Styles for the action icon slot\n */\nconst useAsideBaseStyles = makeResetStyles({\n  display: 'flex',\n  marginLeft: 'auto',\n  alignItems: 'center',\n  zIndex: 0,\n  gridArea: 'aside',\n  padding: `0 ${tokens.spacingHorizontalM}`,\n  gap: tokens.spacingHorizontalXS,\n});\n\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconBaseStyles = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minWidth: '24px',\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground3,\n  gridArea: 'expandIcon',\n  flex: `0 0 auto`,\n  padding: `${tokens.spacingVerticalXS} 0`,\n});\n\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */\nexport const useTreeItemPersonaLayoutStyles_unstable = (\n  state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutState => {\n  const rootBaseStyles = useRootBaseStyles();\n  const rootStyles = useRootStyles();\n  const mediaBaseStyles = useMediaBaseStyles();\n  const descriptionBaseStyles = useDescriptionBaseStyles();\n  const actionsBaseStyles = useActionsBaseStyles();\n  const asideBaseStyles = useAsideBaseStyles();\n  const expandIconBaseStyles = useExpandIconBaseStyles();\n  const mainBaseStyles = useMainBaseStyles();\n  const mainStyles = useMainStyles();\n\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  const appearance = useTreeContext_unstable(ctx => ctx.appearance);\n  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    treeItemPersonaLayoutClassNames.root,\n    rootBaseStyles,\n    rootStyles[itemType],\n    rootStyles[appearance],\n    rootStyles[size],\n    state.root.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);\n\n  if (state.main) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.main.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.main,\n      mainBaseStyles,\n      state.description && mainStyles.withDescription,\n      state.main.className,\n    );\n  }\n  if (state.description) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.description.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.description,\n      descriptionBaseStyles,\n      state.description.className,\n    );\n  }\n  if (state.actions) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.actions.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.actions,\n      actionsBaseStyles,\n      state.actions.className,\n    );\n  }\n  if (state.aside) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);\n  }\n  if (state.expandIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.expandIcon.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.expandIcon,\n      expandIconBaseStyles,\n      state.expandIcon.className,\n    );\n  }\n\n  if (state.selector) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","useTreeContext_unstable","treeItemPersonaLayoutClassNames","root","media","description","main","expandIcon","aside","actions","selector","useRootBaseStyles","display","gridTemplateRows","gridTemplateColumns","gridTemplateAreas","alignItems","body1","color","colorNeutralForeground2Pressed","backgroundColor","colorSubtleBackgroundPressed","colorNeutralForeground3Pressed","colorNeutralForeground2Hover","colorSubtleBackgroundHover","colorNeutralForeground3Hover","useRootStyles","leaf","paddingLeft","spacingHorizontalXXL","branch","medium","small","minHeight","caption1","subtle","colorSubtleBackgroundLightAlphaHover","colorSubtleBackgroundLightAlphaPressed","transparent","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","useMediaBaseStyles","width","height","gridArea","padding","spacingHorizontalXS","spacingHorizontalXXS","useMainBaseStyles","spacingVerticalMNudge","spacingHorizontalS","useMainStyles","withDescription","useDescriptionBaseStyles","useActionsBaseStyles","marginLeft","position","zIndex","useAsideBaseStyles","spacingHorizontalM","gap","useExpandIconBaseStyles","justifyContent","minWidth","boxSizing","colorNeutralForeground3","flex","spacingVerticalXS","useTreeItemPersonaLayoutStyles_unstable","state","rootBaseStyles","rootStyles","mediaBaseStyles","descriptionBaseStyles","actionsBaseStyles","asideBaseStyles","expandIconBaseStyles","mainBaseStyles","mainStyles","size","ctx","appearance","itemType","className"],"mappings":"AAAA;;;;;;;;;;;;IAUaQ,+BAAAA;;;2CAqJAmE;eAAAA;;;uBA3J6C,iBAAiB;4BAClC,wBAAwB;wBAC9B,qBAAqB;iCACZ,iCAAiC;6BACrC,6BAA6B;AAE9D,wCAAoF;IACzFlE,MAAM;IACNC,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;IACZC,OAAO;IACPC,SAAS;IACTC,UAAU;AACZ,EAAE;AAEF,MAAMC,wBAAoBjB,sBAAAA,EAAgB;IACxCkB,SAAS;IACTC,kBAAkB;IAClBC,qBAAqB;IACrBC,mBAAmB,CAAC;;;EAGpB,CAAC;IACDC,YAAY;IACZ,GAAGlB,4BAAAA,CAAiBmB,KAAK;IACzB,WAAW;QACTC,OAAOrB,kBAAAA,CAAOsB,8BAA8B;QAC5CC,iBAAiBvB,kBAAAA,CAAOwB,4BAA4B;QACpD,0EAA0E;QAC1E,CAAC,CAAC,GAAG,EAAEnB,gCAAgCK,UAAU,EAAE,CAAC,EAAE;YACpDW,OAAOrB,kBAAAA,CAAOyB,8BAA8B;QAC9C;IACF;IACA,UAAU;QACRJ,OAAOrB,kBAAAA,CAAO0B,4BAA4B;QAC1CH,iBAAiBvB,kBAAAA,CAAO2B,0BAA0B;QAClD,0EAA0E;QAC1E,CAAC,CAAC,GAAG,EAAEtB,gCAAgCK,UAAU,EAAE,CAAC,EAAE;YACpDW,OAAOrB,kBAAAA,CAAO4B,4BAA4B;QAC5C;IACF;AACF;AAEA;;CAEC,GACD,MAAMC,oBAAgB/B,iBAAAA,EAAW;IAC/BgC,MAAM;QACJC,aAAa,CAAC,SAAS,EAAE7B,0BAAAA,CAAmB,OAAO,EAAEF,kBAAAA,CAAOgC,oBAAoB,CAAC,CAAC,CAAC;IACrF;IACAC,QAAQ;QACNF,aAAa,CAAC,UAAU,EAAE7B,0BAAAA,CAAmB,YAAY,EAAEF,kBAAAA,CAAOgC,oBAAoB,CAAC,CAAC,CAAC;IAC3F;IACA,kBAAkB;IAClBE,QAAQ;QACN,GAAGjC,4BAAAA,CAAiBmB,KAAK;IAC3B;IACAe,OAAO;QACLC,WAAW;QACX,GAAGnC,4BAAAA,CAAiBoC,QAAQ;IAC9B;IACA,wBAAwB;IACxBC,QAAQ,CAAC;IACT,gBAAgB;QACd,UAAU;YACRf,iBAAiBvB,kBAAAA,CAAOuC,oCAAoC;QAC9D;QACA,WAAW;YACThB,iBAAiBvB,kBAAAA,CAAOwC,sCAAsC;QAChE;IACF;IACAC,aAAa;QACXlB,iBAAiBvB,kBAAAA,CAAO0C,0BAA0B;QAClD,UAAU;YACRnB,iBAAiBvB,kBAAAA,CAAO2C,+BAA+B;QACzD;QACA,WAAW;YACTpB,iBAAiBvB,kBAAAA,CAAO4C,iCAAiC;QAC3D;IACF;AACF;AAEA;;CAEC,GACD,MAAMC,qBAAqBhD,0BAAAA,EAAgB;IACzCkB,SAAS;IACTI,YAAY;IACZ2B,OAAO;IACPC,QAAQ;IACRC,UAAU;IACVC,SAAS,CAAC,EAAE,EAAEjD,kBAAAA,CAAOkD,mBAAmB,CAAC,GAAG,EAAElD,kBAAAA,CAAOmD,oBAAoB,EAAE;AAC7E;AAEA,MAAMC,wBAAoBvD,sBAAAA,EAAgB;IACxCmD,UAAU;IACVC,SAAS,GAAGjD,kBAAAA,CAAOqD,qBAAqB,CAAC,CAAC,EAAErD,kBAAAA,CAAOkD,mBAAmB,CAAC,CAAC,EAAElD,kBAAAA,CAAOqD,qBAAqB,CAAC,CAAC,EAAErD,kBAAAA,CAAOsD,kBAAkB,EAAE;AACvI;AAEA,MAAMC,oBAAgBzD,iBAAAA,EAAW;IAC/B0D,iBAAiB;QACfP,SAAS,GAAGjD,kBAAAA,CAAOqD,qBAAqB,CAAC,CAAC,EAAErD,kBAAAA,CAAOkD,mBAAmB,CAAC,GAAG,EAAElD,kBAAAA,CAAOsD,kBAAkB,EAAE;IACzG;AACF;AAEA,MAAMG,2BAA2B5D,0BAAAA,EAAgB;IAC/CmD,UAAU;IACV,GAAG/C,4BAAAA,CAAiBoC,QAAQ;IAC5BY,SAAS,CAAC,EAAE,EAAEjD,kBAAAA,CAAOkD,mBAAmB,CAAC,CAAC,EAAElD,kBAAAA,CAAOqD,qBAAqB,CAAC,CAAC,EAAErD,kBAAAA,CAAOsD,kBAAkB,EAAE;AACzG;AAEA;;CAEC,GACD,MAAMI,2BAAuB7D,sBAAAA,EAAgB;IAC3CkB,SAAS;IACT4C,YAAY;IACZC,UAAU;IACVC,QAAQ;IACRb,UAAU;IACVC,SAAS,CAAC,EAAE,EAAEjD,kBAAAA,CAAOsD,kBAAkB,EAAE;AAC3C;AACA;;CAEC,GACD,MAAMQ,yBAAqBjE,sBAAAA,EAAgB;IACzCkB,SAAS;IACT4C,YAAY;IACZxC,YAAY;IACZ0C,QAAQ;IACRb,UAAU;IACVC,SAAS,CAAC,EAAE,EAAEjD,kBAAAA,CAAO+D,kBAAkB,EAAE;IACzCC,KAAKhE,kBAAAA,CAAOkD,mBAAmB;AACjC;AAEA;;CAEC,GACD,MAAMe,8BAA0BpE,sBAAAA,EAAgB;IAC9CkB,SAAS;IACTI,YAAY;IACZ+C,gBAAgB;IAChBC,UAAU;IACVC,WAAW;IACX/C,OAAOrB,kBAAAA,CAAOqE,uBAAuB;IACrCrB,UAAU;IACVsB,MAAM,CAAC,QAAQ,CAAC;IAChBrB,SAAS,GAAGjD,kBAAAA,CAAOuE,iBAAiB,CAAC,EAAE,CAAC;AAC1C;AAKO,gDAAgD,CACrDE;IAEA,MAAMC,iBAAiB5D;IACvB,MAAM6D,aAAa9C;IACnB,MAAM+C,kBAAkB/B;IACxB,MAAMgC,wBAAwBpB;IAC9B,MAAMqB,oBAAoBpB;IAC1B,MAAMqB,kBAAkBjB;IACxB,MAAMkB,uBAAuBf;IAC7B,MAAMgB,iBAAiB7B;IACvB,MAAM8B,aAAa3B;IAEnB,MAAM4B,WAAO/E,oCAAAA,EAAwBgF,CAAAA,MAAOA,IAAID,IAAI;IACpD,MAAME,aAAajF,wCAAAA,EAAwBgF,CAAAA,MAAOA,IAAIC,UAAU;IAChE,MAAMC,eAAWnF,4CAAAA,EAA4BiF,CAAAA,MAAOA,IAAIE,QAAQ;IAEhE,oDAAoD;IACpDb,MAAMnE,IAAI,CAACiF,SAAS,OAAGxF,mBAAAA,EACrBM,gCAAgCC,IAAI,EACpCoE,gBACAC,UAAU,CAACW,SAAS,EACpBX,UAAU,CAACU,WAAW,EACtBV,UAAU,CAACQ,KAAK,EAChBV,MAAMnE,IAAI,CAACiF,SAAS;IAGtB,oDAAoD;IACpDd,MAAMlE,KAAK,CAACgF,SAAS,OAAGxF,mBAAAA,EAAaM,gCAAgCE,KAAK,EAAEqE,iBAAiBH,MAAMlE,KAAK,CAACgF,SAAS;IAElH,IAAId,MAAMhE,IAAI,EAAE;QACd,oDAAoD;QACpDgE,MAAMhE,IAAI,CAAC8E,SAAS,OAAGxF,mBAAAA,EACrBM,gCAAgCI,IAAI,EACpCwE,gBACAR,MAAMjE,WAAW,IAAI0E,WAAW1B,eAAe,EAC/CiB,MAAMhE,IAAI,CAAC8E,SAAS;IAExB;IACA,IAAId,MAAMjE,WAAW,EAAE;QACrB,oDAAoD;QACpDiE,MAAMjE,WAAW,CAAC+E,SAAS,OAAGxF,mBAAAA,EAC5BM,gCAAgCG,WAAW,EAC3CqE,uBACAJ,MAAMjE,WAAW,CAAC+E,SAAS;IAE/B;IACA,IAAId,MAAM7D,OAAO,EAAE;QACjB,oDAAoD;QACpD6D,MAAM7D,OAAO,CAAC2E,SAAS,OAAGxF,mBAAAA,EACxBM,gCAAgCO,OAAO,EACvCkE,mBACAL,MAAM7D,OAAO,CAAC2E,SAAS;IAE3B;IACA,IAAId,MAAM9D,KAAK,EAAE;QACf,oDAAoD;QACpD8D,MAAM9D,KAAK,CAAC4E,SAAS,GAAGxF,uBAAAA,EAAaM,gCAAgCM,KAAK,EAAEoE,iBAAiBN,MAAM9D,KAAK,CAAC4E,SAAS;IACpH;IACA,IAAId,MAAM/D,UAAU,EAAE;QACpB,oDAAoD;QACpD+D,MAAM/D,UAAU,CAAC6E,SAAS,OAAGxF,mBAAAA,EAC3BM,gCAAgCK,UAAU,EAC1CsE,sBACAP,MAAM/D,UAAU,CAAC6E,SAAS;IAE9B;IAEA,IAAId,MAAM5D,QAAQ,EAAE;QAClB,oDAAoD;QACpD4D,MAAM5D,QAAQ,CAAC0E,SAAS,OAAGxF,mBAAAA,EAAaM,gCAAgCQ,QAAQ,EAAE4D,MAAM5D,QAAQ,CAAC0E,SAAS;IAC5G;IAEA,OAAOd;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { TreeItemPersonaLayoutSlots, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\n\nexport const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutSlots> = {\n  root: 'fui-TreeItemPersonaLayout',\n  media: 'fui-TreeItemPersonaLayout__media',\n  description: 'fui-TreeItemPersonaLayout__description',\n  main: 'fui-TreeItemPersonaLayout__main',\n  expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n  aside: 'fui-TreeItemPersonaLayout__aside',\n  actions: 'fui-TreeItemPersonaLayout__actions',\n  selector: 'fui-TreeItemPersonaLayout__selector',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n  display: 'grid',\n  gridTemplateRows: '1fr auto',\n  gridTemplateColumns: 'auto auto 1fr auto',\n  gridTemplateAreas: `\n    \"expandIcon media main        aside\"\n    \"expandIcon media description aside\"\n  `,\n  alignItems: 'center',\n  ...typographyStyles.body1,\n  ':active': {\n    color: tokens.colorNeutralForeground2Pressed,\n    backgroundColor: tokens.colorSubtleBackgroundPressed,\n    // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n    [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n      color: tokens.colorNeutralForeground3Pressed,\n    },\n  },\n  ':hover': {\n    color: tokens.colorNeutralForeground2Hover,\n    backgroundColor: tokens.colorSubtleBackgroundHover,\n    // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n    [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n      color: tokens.colorNeutralForeground3Hover,\n    },\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  leaf: {\n    paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`,\n  },\n  branch: {\n    paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`,\n  },\n  // Size variations\n  medium: {\n    ...typographyStyles.body1,\n  },\n  small: {\n    minHeight: '24px',\n    ...typographyStyles.caption1,\n  },\n  // Appearance variations\n  subtle: {},\n  'subtle-alpha': {\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed,\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n  },\n});\n\n/**\n * Styles for the expand icon slot\n */\nconst useMediaBaseStyles = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n  width: '32px',\n  height: '32px',\n  gridArea: 'media',\n  padding: `0 ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalXXS}`,\n});\n\nconst useMainBaseStyles = makeResetStyles({\n  gridArea: 'main',\n  padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`,\n});\n\nconst useMainStyles = makeStyles({\n  withDescription: {\n    padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalXS} 0 ${tokens.spacingHorizontalS}`,\n  },\n});\n\nconst useDescriptionBaseStyles = makeResetStyles({\n  gridArea: 'description',\n  ...typographyStyles.caption1,\n  padding: `0 ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS}`,\n});\n\n/**\n * Styles for the action icon slot\n */\nconst useActionsBaseStyles = makeResetStyles({\n  display: 'flex',\n  marginLeft: 'auto',\n  position: 'relative',\n  zIndex: 1,\n  gridArea: 'aside',\n  padding: `0 ${tokens.spacingHorizontalS}`,\n});\n/**\n * Styles for the action icon slot\n */\nconst useAsideBaseStyles = makeResetStyles({\n  display: 'flex',\n  marginLeft: 'auto',\n  alignItems: 'center',\n  zIndex: 0,\n  gridArea: 'aside',\n  padding: `0 ${tokens.spacingHorizontalM}`,\n  gap: tokens.spacingHorizontalXS,\n});\n\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconBaseStyles = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minWidth: '24px',\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground3,\n  gridArea: 'expandIcon',\n  flex: `0 0 auto`,\n  padding: `${tokens.spacingVerticalXS} 0`,\n});\n\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */\nexport const useTreeItemPersonaLayoutStyles_unstable = (\n  state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutState => {\n  const rootBaseStyles = useRootBaseStyles();\n  const rootStyles = useRootStyles();\n  const mediaBaseStyles = useMediaBaseStyles();\n  const descriptionBaseStyles = useDescriptionBaseStyles();\n  const actionsBaseStyles = useActionsBaseStyles();\n  const asideBaseStyles = useAsideBaseStyles();\n  const expandIconBaseStyles = useExpandIconBaseStyles();\n  const mainBaseStyles = useMainBaseStyles();\n  const mainStyles = useMainStyles();\n\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  const appearance = useTreeContext_unstable(ctx => ctx.appearance);\n  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    treeItemPersonaLayoutClassNames.root,\n    rootBaseStyles,\n    rootStyles[itemType],\n    rootStyles[appearance],\n    rootStyles[size],\n    state.root.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);\n\n  if (state.main) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.main.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.main,\n      mainBaseStyles,\n      state.description && mainStyles.withDescription,\n      state.main.className,\n    );\n  }\n  if (state.description) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.description.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.description,\n      descriptionBaseStyles,\n      state.description.className,\n    );\n  }\n  if (state.actions) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.actions.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.actions,\n      actionsBaseStyles,\n      state.actions.className,\n    );\n  }\n  if (state.aside) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);\n  }\n  if (state.expandIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.expandIcon.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.expandIcon,\n      expandIconBaseStyles,\n      state.expandIcon.className,\n    );\n  }\n\n  if (state.selector) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","useTreeContext_unstable","treeItemPersonaLayoutClassNames","root","media","description","main","expandIcon","aside","actions","selector","useRootBaseStyles","display","gridTemplateRows","gridTemplateColumns","gridTemplateAreas","alignItems","body1","color","colorNeutralForeground2Pressed","backgroundColor","colorSubtleBackgroundPressed","colorNeutralForeground3Pressed","colorNeutralForeground2Hover","colorSubtleBackgroundHover","colorNeutralForeground3Hover","useRootStyles","leaf","paddingLeft","spacingHorizontalXXL","branch","medium","small","minHeight","caption1","subtle","colorSubtleBackgroundLightAlphaHover","colorSubtleBackgroundLightAlphaPressed","transparent","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","useMediaBaseStyles","width","height","gridArea","padding","spacingHorizontalXS","spacingHorizontalXXS","useMainBaseStyles","spacingVerticalMNudge","spacingHorizontalS","useMainStyles","withDescription","useDescriptionBaseStyles","useActionsBaseStyles","marginLeft","position","zIndex","useAsideBaseStyles","spacingHorizontalM","gap","useExpandIconBaseStyles","justifyContent","minWidth","boxSizing","colorNeutralForeground3","flex","spacingVerticalXS","useTreeItemPersonaLayoutStyles_unstable","state","rootBaseStyles","rootStyles","mediaBaseStyles","descriptionBaseStyles","actionsBaseStyles","asideBaseStyles","expandIconBaseStyles","mainBaseStyles","mainStyles","size","ctx","appearance","itemType","className"],"mappings":"AAAA;;;;;;;;;;;;IAUaQ,+BAAAA;;;2CAqJAmE;eAAAA;;;uBA3J6C,iBAAiB;4BAClC,wBAAwB;wBAC9B,wBAAqB;iCACZ,oCAAiC;6BACrC,gCAA6B;AAE9D,wCAAoF;IACzFlE,MAAM;IACNC,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;IACZC,OAAO;IACPC,SAAS;IACTC,UAAU;AACZ,EAAE;AAEF,MAAMC,wBAAoBjB,sBAAAA,EAAgB;IACxCkB,SAAS;IACTC,kBAAkB;IAClBC,qBAAqB;IACrBC,mBAAmB,CAAC;;;EAGpB,CAAC;IACDC,YAAY;IACZ,GAAGlB,4BAAAA,CAAiBmB,KAAK;IACzB,WAAW;QACTC,OAAOrB,kBAAAA,CAAOsB,8BAA8B;QAC5CC,iBAAiBvB,kBAAAA,CAAOwB,4BAA4B;QACpD,0EAA0E;QAC1E,CAAC,CAAC,GAAG,EAAEnB,gCAAgCK,UAAU,EAAE,CAAC,EAAE;YACpDW,OAAOrB,kBAAAA,CAAOyB,8BAA8B;QAC9C;IACF;IACA,UAAU;QACRJ,OAAOrB,kBAAAA,CAAO0B,4BAA4B;QAC1CH,iBAAiBvB,kBAAAA,CAAO2B,0BAA0B;QAClD,0EAA0E;QAC1E,CAAC,CAAC,GAAG,EAAEtB,gCAAgCK,UAAU,EAAE,CAAC,EAAE;YACpDW,OAAOrB,kBAAAA,CAAO4B,4BAA4B;QAC5C;IACF;AACF;AAEA;;CAEC,GACD,MAAMC,oBAAgB/B,iBAAAA,EAAW;IAC/BgC,MAAM;QACJC,aAAa,CAAC,SAAS,EAAE7B,0BAAAA,CAAmB,OAAO,EAAEF,kBAAAA,CAAOgC,oBAAoB,CAAC,CAAC,CAAC;IACrF;IACAC,QAAQ;QACNF,aAAa,CAAC,UAAU,EAAE7B,0BAAAA,CAAmB,YAAY,EAAEF,kBAAAA,CAAOgC,oBAAoB,CAAC,CAAC,CAAC;IAC3F;IACA,kBAAkB;IAClBE,QAAQ;QACN,GAAGjC,4BAAAA,CAAiBmB,KAAK;IAC3B;IACAe,OAAO;QACLC,WAAW;QACX,GAAGnC,4BAAAA,CAAiBoC,QAAQ;IAC9B;IACA,wBAAwB;IACxBC,QAAQ,CAAC;IACT,gBAAgB;QACd,UAAU;YACRf,iBAAiBvB,kBAAAA,CAAOuC,oCAAoC;QAC9D;QACA,WAAW;YACThB,iBAAiBvB,kBAAAA,CAAOwC,sCAAsC;QAChE;IACF;IACAC,aAAa;QACXlB,iBAAiBvB,kBAAAA,CAAO0C,0BAA0B;QAClD,UAAU;YACRnB,iBAAiBvB,kBAAAA,CAAO2C,+BAA+B;QACzD;QACA,WAAW;YACTpB,iBAAiBvB,kBAAAA,CAAO4C,iCAAiC;QAC3D;IACF;AACF;AAEA;;CAEC,GACD,MAAMC,qBAAqBhD,0BAAAA,EAAgB;IACzCkB,SAAS;IACTI,YAAY;IACZ2B,OAAO;IACPC,QAAQ;IACRC,UAAU;IACVC,SAAS,CAAC,EAAE,EAAEjD,kBAAAA,CAAOkD,mBAAmB,CAAC,GAAG,EAAElD,kBAAAA,CAAOmD,oBAAoB,EAAE;AAC7E;AAEA,MAAMC,wBAAoBvD,sBAAAA,EAAgB;IACxCmD,UAAU;IACVC,SAAS,GAAGjD,kBAAAA,CAAOqD,qBAAqB,CAAC,CAAC,EAAErD,kBAAAA,CAAOkD,mBAAmB,CAAC,CAAC,EAAElD,kBAAAA,CAAOqD,qBAAqB,CAAC,CAAC,EAAErD,kBAAAA,CAAOsD,kBAAkB,EAAE;AACvI;AAEA,MAAMC,oBAAgBzD,iBAAAA,EAAW;IAC/B0D,iBAAiB;QACfP,SAAS,GAAGjD,kBAAAA,CAAOqD,qBAAqB,CAAC,CAAC,EAAErD,kBAAAA,CAAOkD,mBAAmB,CAAC,GAAG,EAAElD,kBAAAA,CAAOsD,kBAAkB,EAAE;IACzG;AACF;AAEA,MAAMG,2BAA2B5D,0BAAAA,EAAgB;IAC/CmD,UAAU;IACV,GAAG/C,4BAAAA,CAAiBoC,QAAQ;IAC5BY,SAAS,CAAC,EAAE,EAAEjD,kBAAAA,CAAOkD,mBAAmB,CAAC,CAAC,EAAElD,kBAAAA,CAAOqD,qBAAqB,CAAC,CAAC,EAAErD,kBAAAA,CAAOsD,kBAAkB,EAAE;AACzG;AAEA;;CAEC,GACD,MAAMI,2BAAuB7D,sBAAAA,EAAgB;IAC3CkB,SAAS;IACT4C,YAAY;IACZC,UAAU;IACVC,QAAQ;IACRb,UAAU;IACVC,SAAS,CAAC,EAAE,EAAEjD,kBAAAA,CAAOsD,kBAAkB,EAAE;AAC3C;AACA;;CAEC,GACD,MAAMQ,yBAAqBjE,sBAAAA,EAAgB;IACzCkB,SAAS;IACT4C,YAAY;IACZxC,YAAY;IACZ0C,QAAQ;IACRb,UAAU;IACVC,SAAS,CAAC,EAAE,EAAEjD,kBAAAA,CAAO+D,kBAAkB,EAAE;IACzCC,KAAKhE,kBAAAA,CAAOkD,mBAAmB;AACjC;AAEA;;CAEC,GACD,MAAMe,8BAA0BpE,sBAAAA,EAAgB;IAC9CkB,SAAS;IACTI,YAAY;IACZ+C,gBAAgB;IAChBC,UAAU;IACVC,WAAW;IACX/C,OAAOrB,kBAAAA,CAAOqE,uBAAuB;IACrCrB,UAAU;IACVsB,MAAM,CAAC,QAAQ,CAAC;IAChBrB,SAAS,GAAGjD,kBAAAA,CAAOuE,iBAAiB,CAAC,EAAE,CAAC;AAC1C;AAKO,gDAAgD,CACrDE;IAEA,MAAMC,iBAAiB5D;IACvB,MAAM6D,aAAa9C;IACnB,MAAM+C,kBAAkB/B;IACxB,MAAMgC,wBAAwBpB;IAC9B,MAAMqB,oBAAoBpB;IAC1B,MAAMqB,kBAAkBjB;IACxB,MAAMkB,uBAAuBf;IAC7B,MAAMgB,iBAAiB7B;IACvB,MAAM8B,aAAa3B;IAEnB,MAAM4B,WAAO/E,oCAAAA,EAAwBgF,CAAAA,MAAOA,IAAID,IAAI;IACpD,MAAME,aAAajF,wCAAAA,EAAwBgF,CAAAA,MAAOA,IAAIC,UAAU;IAChE,MAAMC,eAAWnF,4CAAAA,EAA4BiF,CAAAA,MAAOA,IAAIE,QAAQ;IAEhE,oDAAoD;IACpDb,MAAMnE,IAAI,CAACiF,SAAS,OAAGxF,mBAAAA,EACrBM,gCAAgCC,IAAI,EACpCoE,gBACAC,UAAU,CAACW,SAAS,EACpBX,UAAU,CAACU,WAAW,EACtBV,UAAU,CAACQ,KAAK,EAChBV,MAAMnE,IAAI,CAACiF,SAAS;IAGtB,oDAAoD;IACpDd,MAAMlE,KAAK,CAACgF,SAAS,OAAGxF,mBAAAA,EAAaM,gCAAgCE,KAAK,EAAEqE,iBAAiBH,MAAMlE,KAAK,CAACgF,SAAS;IAElH,IAAId,MAAMhE,IAAI,EAAE;QACd,oDAAoD;QACpDgE,MAAMhE,IAAI,CAAC8E,SAAS,OAAGxF,mBAAAA,EACrBM,gCAAgCI,IAAI,EACpCwE,gBACAR,MAAMjE,WAAW,IAAI0E,WAAW1B,eAAe,EAC/CiB,MAAMhE,IAAI,CAAC8E,SAAS;IAExB;IACA,IAAId,MAAMjE,WAAW,EAAE;QACrB,oDAAoD;QACpDiE,MAAMjE,WAAW,CAAC+E,SAAS,OAAGxF,mBAAAA,EAC5BM,gCAAgCG,WAAW,EAC3CqE,uBACAJ,MAAMjE,WAAW,CAAC+E,SAAS;IAE/B;IACA,IAAId,MAAM7D,OAAO,EAAE;QACjB,oDAAoD;QACpD6D,MAAM7D,OAAO,CAAC2E,SAAS,OAAGxF,mBAAAA,EACxBM,gCAAgCO,OAAO,EACvCkE,mBACAL,MAAM7D,OAAO,CAAC2E,SAAS;IAE3B;IACA,IAAId,MAAM9D,KAAK,EAAE;QACf,oDAAoD;QACpD8D,MAAM9D,KAAK,CAAC4E,SAAS,GAAGxF,uBAAAA,EAAaM,gCAAgCM,KAAK,EAAEoE,iBAAiBN,MAAM9D,KAAK,CAAC4E,SAAS;IACpH;IACA,IAAId,MAAM/D,UAAU,EAAE;QACpB,oDAAoD;QACpD+D,MAAM/D,UAAU,CAAC6E,SAAS,OAAGxF,mBAAAA,EAC3BM,gCAAgCK,UAAU,EAC1CsE,sBACAP,MAAM/D,UAAU,CAAC6E,SAAS;IAE9B;IAEA,IAAId,MAAM5D,QAAQ,EAAE;QAClB,oDAAoD;QACpD4D,MAAM5D,QAAQ,CAAC0E,SAAS,OAAGxF,mBAAAA,EAAaM,gCAAgCQ,QAAQ,EAAE4D,MAAM5D,QAAQ,CAAC0E,SAAS;IAC5G;IAEA,OAAOd;AACT,EAAE"}

package/lib-commonjs/components/{TreeProvider.js → TreeProvider.cjs}

@@ -18,7 +18,7 @@ _export(exports, {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _contexts = require("../contexts");
+const _index = require("../contexts/index.cjs");
 /**
  * @internal
  */ const rootSubtreeContextValue = {
@@ -27,17 +27,17 @@ const _contexts = require("../contexts");
 };
 const TreeProvider = (props)=>{
     if (props.value.contextType === 'subtree') {
-        return /*#__PURE__*/ _react.createElement(_contexts.SubtreeContext.Provider, {
+        return /*#__PURE__*/ _react.createElement(_index.SubtreeContext.Provider, {
             value: props.value
         }, props.children);
     }
-    return /*#__PURE__*/ _react.createElement(_contexts.TreeContext.Provider, {
+    return /*#__PURE__*/ _react.createElement(_index.TreeContext.Provider, {
         value: props.value
-    }, /*#__PURE__*/ _react.createElement(_contexts.SubtreeContext.Provider, {
+    }, /*#__PURE__*/ _react.createElement(_index.SubtreeContext.Provider, {
         value: rootSubtreeContextValue
     }, props.children));
 };
 TreeProvider.displayName = 'TreeProvider';
-const TreeRootReset = (props)=>/*#__PURE__*/ _react.createElement(_contexts.SubtreeContext.Provider, {
+const TreeRootReset = (props)=>/*#__PURE__*/ _react.createElement(_index.SubtreeContext.Provider, {
         value: undefined
     }, props.children);

package/lib-commonjs/components/{TreeProvider.js.map → TreeProvider.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TreeProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { SubtreeContextValue, TreeContextValue } from '../contexts';\nimport { SubtreeContext, TreeContext } from '../contexts';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\n/**\n * @internal\n */\nconst rootSubtreeContextValue: SubtreeContextValue = {\n  level: 1,\n  contextType: 'subtree',\n};\nexport const TreeProvider = (props: React.ProviderProps<TreeContextValue | SubtreeContextValue>): JSXElement => {\n  if (props.value.contextType === 'subtree') {\n    return <SubtreeContext.Provider value={props.value}>{props.children}</SubtreeContext.Provider>;\n  }\n  return (\n    <TreeContext.Provider value={props.value}>\n      <SubtreeContext.Provider value={rootSubtreeContextValue}>{props.children}</SubtreeContext.Provider>\n    </TreeContext.Provider>\n  );\n};\n\nTreeProvider.displayName = 'TreeProvider';\n\nexport type TreeRootResetProps = {\n  children?: React.ReactNode;\n};\nexport const TreeRootReset = (props: TreeRootResetProps): JSXElement => (\n  <SubtreeContext.Provider value={undefined as unknown as SubtreeContextValue}>\n    {props.children}\n  </SubtreeContext.Provider>\n);\n"],"names":["React","SubtreeContext","TreeContext","rootSubtreeContextValue","level","contextType","TreeProvider","props","value","Provider","children","displayName","TreeRootReset","undefined"],"mappings":";;;;;;;;;;;IAYaM,YAAAA;;;iBAgBAM;;;;;iEA5BU,QAAQ;0BAEa,cAAc;AAG1D;;CAEC,GACD,MAAMT,0BAA+C;IACnDC,OAAO;IACPC,aAAa;AACf;AACO,qBAAqB,CAACE;IAC3B,IAAIA,MAAMC,KAAK,CAACH,WAAW,KAAK,WAAW;QACzC,OAAA,WAAA,GAAO,OAAA,aAAA,CAACJ,wBAAAA,CAAeQ,QAAQ,EAAA;YAACD,OAAOD,MAAMC,KAAK;WAAGD,MAAMG,QAAQ;IACrE;IACA,OAAA,WAAA,GACE,OAAA,aAAA,CAACR,qBAAAA,CAAYO,QAAQ,EAAA;QAACD,OAAOD,MAAMC,KAAK;qBACtC,OAAA,aAAA,CAACP,wBAAAA,CAAeQ,QAAQ,EAAA;QAACD,OAAOL;OAA0BI,MAAMG,QAAQ;AAG9E,EAAE;AAEFJ,aAAaK,WAAW,GAAG;AAKpB,MAAMC,gBAAgB,CAACL,QAAAA,WAAAA,GAC5B,OAAA,aAAA,CAACN,wBAAAA,CAAeQ,QAAQ,EAAA;QAACD,OAAOK;OAC7BN,MAAMG,QAAQ,EAEjB"}
+{"version":3,"sources":["../src/components/TreeProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { SubtreeContextValue, TreeContextValue } from '../contexts';\nimport { SubtreeContext, TreeContext } from '../contexts';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\n/**\n * @internal\n */\nconst rootSubtreeContextValue: SubtreeContextValue = {\n  level: 1,\n  contextType: 'subtree',\n};\nexport const TreeProvider = (props: React.ProviderProps<TreeContextValue | SubtreeContextValue>): JSXElement => {\n  if (props.value.contextType === 'subtree') {\n    return <SubtreeContext.Provider value={props.value}>{props.children}</SubtreeContext.Provider>;\n  }\n  return (\n    <TreeContext.Provider value={props.value}>\n      <SubtreeContext.Provider value={rootSubtreeContextValue}>{props.children}</SubtreeContext.Provider>\n    </TreeContext.Provider>\n  );\n};\n\nTreeProvider.displayName = 'TreeProvider';\n\nexport type TreeRootResetProps = {\n  children?: React.ReactNode;\n};\nexport const TreeRootReset = (props: TreeRootResetProps): JSXElement => (\n  <SubtreeContext.Provider value={undefined as unknown as SubtreeContextValue}>\n    {props.children}\n  </SubtreeContext.Provider>\n);\n"],"names":["React","SubtreeContext","TreeContext","rootSubtreeContextValue","level","contextType","TreeProvider","props","value","Provider","children","displayName","TreeRootReset","undefined"],"mappings":";;;;;;;;;;;IAYaM,YAAAA;;;iBAgBAM;;;;;iEA5BU,QAAQ;uBAEa,uBAAc;AAG1D;;CAEC,GACD,MAAMT,0BAA+C;IACnDC,OAAO;IACPC,aAAa;AACf;AACO,qBAAqB,CAACE;IAC3B,IAAIA,MAAMC,KAAK,CAACH,WAAW,KAAK,WAAW;QACzC,OAAA,WAAA,GAAO,OAAA,aAAA,CAACJ,qBAAAA,CAAeQ,QAAQ,EAAA;YAACD,OAAOD,MAAMC,KAAK;WAAGD,MAAMG,QAAQ;IACrE;IACA,OAAA,WAAA,GACE,OAAA,aAAA,CAACR,kBAAAA,CAAYO,QAAQ,EAAA;QAACD,OAAOD,MAAMC,KAAK;qBACtC,OAAA,aAAA,CAACP,qBAAAA,CAAeQ,QAAQ,EAAA;QAACD,OAAOL;OAA0BI,MAAMG,QAAQ;AAG9E,EAAE;AAEFJ,aAAaK,WAAW,GAAG;AAKpB,MAAMC,gBAAgB,CAACL,QAAAA,WAAAA,GAC5B,OAAA,aAAA,CAACN,qBAAAA,CAAeQ,QAAQ,EAAA;QAACD,OAAOK;OAC7BN,MAAMG,QAAQ,EAEjB"}

package/lib-commonjs/contexts/{index.js → index.cjs}

@@ -28,6 +28,6 @@ _export(exports, {
         return _treeItemContext.useTreeItemContext_unstable;
     }
 });
-const _treeContext = require("./treeContext");
-const _subtreeContext = require("./subtreeContext");
-const _treeItemContext = require("./treeItemContext");
+const _treeContext = require("./treeContext.cjs");
+const _subtreeContext = require("./subtreeContext.cjs");
+const _treeItemContext = require("./treeItemContext.cjs");

package/lib-commonjs/contexts/{index.js.map → index.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { TreeContextValue, TreeItemRequest } from './treeContext';\nexport { TreeContext, useTreeContext_unstable } from './treeContext';\nexport type { SubtreeContextValue } from './subtreeContext';\nexport { SubtreeContext, useSubtreeContext_unstable } from './subtreeContext';\nexport type { TreeItemContextValue } from './treeItemContext';\nexport { TreeItemProvider, useTreeItemContext_unstable } from './treeItemContext';\n"],"names":["TreeContext","useTreeContext_unstable","SubtreeContext","useSubtreeContext_unstable","TreeItemProvider","useTreeItemContext_unstable"],"mappings":";;;;;;;;;;;;eAGSE,8BAAc;;;eAFdF,wBAAW;;;eAIXI,iCAAgB;;;eAFAD,0CAA0B;;;eAF7BF,oCAAuB;;;eAIlBI,4CAA2B;;;6BAJD,gBAAgB;gCAEV,mBAAmB;iCAEhB,oBAAoB"}
+{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { TreeContextValue, TreeItemRequest } from './treeContext';\nexport { TreeContext, useTreeContext_unstable } from './treeContext';\nexport type { SubtreeContextValue } from './subtreeContext';\nexport { SubtreeContext, useSubtreeContext_unstable } from './subtreeContext';\nexport type { TreeItemContextValue } from './treeItemContext';\nexport { TreeItemProvider, useTreeItemContext_unstable } from './treeItemContext';\n"],"names":["TreeContext","useTreeContext_unstable","SubtreeContext","useSubtreeContext_unstable","TreeItemProvider","useTreeItemContext_unstable"],"mappings":";;;;;;;;;;;;eAGSE,8BAAc;;;eAFdF,wBAAW;;;eAIXI,iCAAgB;;;eAFAD,0CAA0B;;;eAF7BF,oCAAuB;;;eAIlBI,4CAA2B;;;6BAJD,mBAAgB;gCAEV,sBAAmB;iCAEhB,uBAAoB"}

package/lib-commonjs/contexts/{treeContext.js → treeContext.cjs}

@@ -18,8 +18,8 @@ _export(exports, {
     }
 });
 const _reactcontextselector = require("@fluentui/react-context-selector");
-const _ImmutableSet = require("../utils/ImmutableSet");
-const _ImmutableMap = require("../utils/ImmutableMap");
+const _ImmutableSet = require("../utils/ImmutableSet.cjs");
+const _ImmutableMap = require("../utils/ImmutableMap.cjs");
 /**
  * @internal
  */ const defaultTreeContextValue = {

package/lib-commonjs/contexts/{treeContext.js.map → treeContext.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/treeContext.ts"],"sourcesContent":["'use client';\n\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { TreeItemType, TreeItemValue } from '../TreeItem';\nimport type { SelectionMode, DistributiveOmit } from '@fluentui/react-utilities';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\nimport type { TreeCheckedChangeData, TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\n\nexport type TreeContextValue = {\n  contextType?: 'root';\n  level: number;\n  treeType: 'nested' | 'flat';\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  // FIXME: this is only marked as optional to avoid breaking changes\n  // it should always be provided internally\n  forceUpdateRovingTabIndex?(): void;\n  // FIXME: this is only marked as optional to avoid breaking changes\n  // it should always be provided internally\n  navigationMode?: 'tree' | 'treegrid';\n};\n\nexport type TreeItemRequest = { itemType: TreeItemType } & (\n  | (DistributiveOmit<TreeOpenChangeData, 'openItems'> & { requestType: 'open' })\n  | (TreeNavigationData_unstable & { requestType: 'navigate' })\n  | (DistributiveOmit<TreeCheckedChangeData, 'selectionMode' | 'checkedItems'> & { requestType: 'selection' })\n);\n\n/**\n * @internal\n */\nconst defaultTreeContextValue: TreeContextValue = {\n  level: 0,\n  contextType: 'root',\n  treeType: 'nested',\n  selectionMode: 'none',\n  openItems: ImmutableSet.empty,\n  checkedItems: ImmutableMap.empty,\n  requestTreeResponse: noop,\n  forceUpdateRovingTabIndex: noop,\n  appearance: 'subtle',\n  size: 'medium',\n  navigationMode: 'tree',\n};\n\nfunction noop() {\n  /* noop */\n}\n\n/**\n * @internal\n */\nexport const TreeContext: Context<TreeContextValue> = createContext<TreeContextValue | undefined>(\n  undefined,\n) as Context<TreeContextValue>;\n\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n  useContextSelector(TreeContext, (ctx = defaultTreeContextValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","ImmutableSet","ImmutableMap","defaultTreeContextValue","level","contextType","treeType","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","forceUpdateRovingTabIndex","appearance","size","navigationMode","TreeContext","undefined","useTreeContext_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;eA6DakB;;;2BAIAE;;;;sCA9DqC,mCAAmC;8BAGxD,wBAAwB;8BACxB,wBAAwB;AA8BrD;;CAEC,GACD,MAAMhB,0BAA4C;IAChDC,OAAO;IACPC,aAAa;IACbC,UAAU;IACVC,eAAe;IACfC,WAAWP,0BAAAA,CAAaQ,KAAK;IAC7BC,cAAcR,0BAAAA,CAAaO,KAAK;IAChCE,qBAAqBC;IACrBC,2BAA2BD;IAC3BE,YAAY;IACZC,MAAM;IACNC,gBAAgB;AAClB;AAEA,SAASJ;AACP,QAAQ,GACV;AAKO,MAAMK,kBAAyClB,mCAAAA,EACpDmB,WAC6B;AAExB,MAAMC,0BAA0B,CAAIC,eACzCpB,wCAAAA,EAAmBiB,aAAa,CAACI,MAAMlB,uBAAuB,GAAKiB,SAASC,MAAM"}
+{"version":3,"sources":["../src/contexts/treeContext.ts"],"sourcesContent":["'use client';\n\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { TreeItemType, TreeItemValue } from '../TreeItem';\nimport type { SelectionMode, DistributiveOmit } from '@fluentui/react-utilities';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\nimport type { TreeCheckedChangeData, TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\n\nexport type TreeContextValue = {\n  contextType?: 'root';\n  level: number;\n  treeType: 'nested' | 'flat';\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  // FIXME: this is only marked as optional to avoid breaking changes\n  // it should always be provided internally\n  forceUpdateRovingTabIndex?(): void;\n  // FIXME: this is only marked as optional to avoid breaking changes\n  // it should always be provided internally\n  navigationMode?: 'tree' | 'treegrid';\n};\n\nexport type TreeItemRequest = { itemType: TreeItemType } & (\n  | (DistributiveOmit<TreeOpenChangeData, 'openItems'> & { requestType: 'open' })\n  | (TreeNavigationData_unstable & { requestType: 'navigate' })\n  | (DistributiveOmit<TreeCheckedChangeData, 'selectionMode' | 'checkedItems'> & { requestType: 'selection' })\n);\n\n/**\n * @internal\n */\nconst defaultTreeContextValue: TreeContextValue = {\n  level: 0,\n  contextType: 'root',\n  treeType: 'nested',\n  selectionMode: 'none',\n  openItems: ImmutableSet.empty,\n  checkedItems: ImmutableMap.empty,\n  requestTreeResponse: noop,\n  forceUpdateRovingTabIndex: noop,\n  appearance: 'subtle',\n  size: 'medium',\n  navigationMode: 'tree',\n};\n\nfunction noop() {\n  /* noop */\n}\n\n/**\n * @internal\n */\nexport const TreeContext: Context<TreeContextValue> = createContext<TreeContextValue | undefined>(\n  undefined,\n) as Context<TreeContextValue>;\n\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n  useContextSelector(TreeContext, (ctx = defaultTreeContextValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","ImmutableSet","ImmutableMap","defaultTreeContextValue","level","contextType","treeType","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","forceUpdateRovingTabIndex","appearance","size","navigationMode","TreeContext","undefined","useTreeContext_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;eA6DakB;;;2BAIAE;;;;sCA9DqC,mCAAmC;8BAGxD,2BAAwB;8BACxB,2BAAwB;AA8BrD;;CAEC,GACD,MAAMhB,0BAA4C;IAChDC,OAAO;IACPC,aAAa;IACbC,UAAU;IACVC,eAAe;IACfC,WAAWP,0BAAAA,CAAaQ,KAAK;IAC7BC,cAAcR,0BAAAA,CAAaO,KAAK;IAChCE,qBAAqBC;IACrBC,2BAA2BD;IAC3BE,YAAY;IACZC,MAAM;IACNC,gBAAgB;AAClB;AAEA,SAASJ;AACP,QAAQ,GACV;AAKO,MAAMK,kBAAyClB,mCAAAA,EACpDmB,WAC6B;AAExB,MAAMC,0BAA0B,CAAIC,eACzCpB,wCAAAA,EAAmBiB,aAAa,CAACI,MAAMlB,uBAAuB,GAAKiB,SAASC,MAAM"}

package/lib-commonjs/contexts/{treeItemContext.js → treeItemContext.cjs}

@@ -20,7 +20,7 @@ _export(exports, {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactcontextselector = require("@fluentui/react-context-selector");
-const _createHeadlessTree = require("../utils/createHeadlessTree");
+const _createHeadlessTree = require("../utils/createHeadlessTree.cjs");
 const defaultContextValue = {
     value: _createHeadlessTree.headlessTreeRootId,
     selectionRef: /*#__PURE__*/ _react.createRef(),

package/lib-commonjs/contexts/{treeItemContext.js.map → treeItemContext.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/treeItemContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { TreeItemType, TreeItemValue } from '../TreeItem';\nimport { headlessTreeRootId } from '../utils/createHeadlessTree';\nimport type { TreeSelectionValue } from '../Tree';\n\nexport type TreeItemContextValue = {\n  /**\n   * @deprecated - this value is irrelevant for the tree item\n   */\n  isActionsVisible: boolean;\n  /**\n   * @deprecated - this value is irrelevant for the tree item\n   */\n  isAsideVisible: boolean;\n  selectionRef: React.Ref<HTMLInputElement>;\n  actionsRef: React.Ref<HTMLDivElement>;\n  expandIconRef: React.Ref<HTMLDivElement>;\n  layoutRef: React.Ref<HTMLDivElement>;\n  // FIXME: this should be React.RefObject<HTMLDivElement>,\n  //  but as it would be a breaking change, we need to keep it as is for now\n  subtreeRef: React.Ref<HTMLDivElement>;\n  // FIXME: this is only marked as optional to avoid breaking changes\n  // it should always be provided internally\n  treeItemRef?: React.RefObject<HTMLDivElement | null>;\n  itemType: TreeItemType;\n  value: TreeItemValue;\n  open: boolean;\n  checked: TreeSelectionValue;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n  value: headlessTreeRootId,\n  selectionRef: React.createRef(),\n  layoutRef: React.createRef(),\n  treeItemRef: React.createRef(),\n  subtreeRef: React.createRef(),\n  actionsRef: React.createRef(),\n  expandIconRef: React.createRef(),\n  isActionsVisible: false,\n  isAsideVisible: false,\n  itemType: 'leaf',\n  open: false,\n  checked: false,\n};\n\nconst TreeItemContext: Context<TreeItemContextValue | undefined> = createContext<TreeItemContextValue | undefined>(\n  undefined,\n);\n\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = <T>(selector: ContextSelector<TreeItemContextValue, T>): T =>\n  useContextSelector(TreeItemContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","headlessTreeRootId","defaultContextValue","value","selectionRef","createRef","layoutRef","treeItemRef","subtreeRef","actionsRef","expandIconRef","isActionsVisible","isAsideVisible","itemType","open","checked","TreeItemContext","undefined","Provider","TreeItemProvider","useTreeItemContext_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;;;;+BAsDasB;;;;;iEApDU,QAAQ;sCAEmB,mCAAmC;oCAElD,8BAA8B;AA4BjE,MAAMlB,sBAA4C;IAChDC,OAAOF,sCAAAA;IACPG,4BAAcN,OAAMO,SAAS;IAC7BC,yBAAWR,OAAMO,SAAS;IAC1BE,2BAAaT,OAAMO,SAAS;IAC5BG,0BAAYV,OAAMO,SAAS;IAC3BI,0BAAYX,OAAMO,SAAS;IAC3BK,6BAAeZ,OAAMO,SAAS;IAC9BM,kBAAkB;IAClBC,gBAAgB;IAChBC,UAAU;IACVC,MAAM;IACNC,SAAS;AACX;AAEA,MAAMC,sBAA6DjB,mCAAAA,EACjEkB;AAGK,MAAM,EAAEC,UAAUC,gBAAgB,EAAE,GAAGH,gBAAgB;AACvD,MAAMI,8BAA8B,CAAIC,eAC7CrB,wCAAAA,EAAmBgB,iBAAiB,CAACM,MAAMpB,mBAAmB,GAAKmB,SAASC,MAAM"}
+{"version":3,"sources":["../src/contexts/treeItemContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { TreeItemType, TreeItemValue } from '../TreeItem';\nimport { headlessTreeRootId } from '../utils/createHeadlessTree';\nimport type { TreeSelectionValue } from '../Tree';\n\nexport type TreeItemContextValue = {\n  /**\n   * @deprecated - this value is irrelevant for the tree item\n   */\n  isActionsVisible: boolean;\n  /**\n   * @deprecated - this value is irrelevant for the tree item\n   */\n  isAsideVisible: boolean;\n  selectionRef: React.Ref<HTMLInputElement>;\n  actionsRef: React.Ref<HTMLDivElement>;\n  expandIconRef: React.Ref<HTMLDivElement>;\n  layoutRef: React.Ref<HTMLDivElement>;\n  // FIXME: this should be React.RefObject<HTMLDivElement>,\n  //  but as it would be a breaking change, we need to keep it as is for now\n  subtreeRef: React.Ref<HTMLDivElement>;\n  // FIXME: this is only marked as optional to avoid breaking changes\n  // it should always be provided internally\n  treeItemRef?: React.RefObject<HTMLDivElement | null>;\n  itemType: TreeItemType;\n  value: TreeItemValue;\n  open: boolean;\n  checked: TreeSelectionValue;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n  value: headlessTreeRootId,\n  selectionRef: React.createRef(),\n  layoutRef: React.createRef(),\n  treeItemRef: React.createRef(),\n  subtreeRef: React.createRef(),\n  actionsRef: React.createRef(),\n  expandIconRef: React.createRef(),\n  isActionsVisible: false,\n  isAsideVisible: false,\n  itemType: 'leaf',\n  open: false,\n  checked: false,\n};\n\nconst TreeItemContext: Context<TreeItemContextValue | undefined> = createContext<TreeItemContextValue | undefined>(\n  undefined,\n);\n\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = <T>(selector: ContextSelector<TreeItemContextValue, T>): T =>\n  useContextSelector(TreeItemContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","headlessTreeRootId","defaultContextValue","value","selectionRef","createRef","layoutRef","treeItemRef","subtreeRef","actionsRef","expandIconRef","isActionsVisible","isAsideVisible","itemType","open","checked","TreeItemContext","undefined","Provider","TreeItemProvider","useTreeItemContext_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;;;;+BAsDasB;;;;;iEApDU,QAAQ;sCAEmB,mCAAmC;oCAElD,iCAA8B;AA4BjE,MAAMlB,sBAA4C;IAChDC,OAAOF,sCAAAA;IACPG,4BAAcN,OAAMO,SAAS;IAC7BC,yBAAWR,OAAMO,SAAS;IAC1BE,2BAAaT,OAAMO,SAAS;IAC5BG,0BAAYV,OAAMO,SAAS;IAC3BI,0BAAYX,OAAMO,SAAS;IAC3BK,6BAAeZ,OAAMO,SAAS;IAC9BM,kBAAkB;IAClBC,gBAAgB;IAChBC,UAAU;IACVC,MAAM;IACNC,SAAS;AACX;AAEA,MAAMC,sBAA6DjB,mCAAAA,EACjEkB;AAGK,MAAM,EAAEC,UAAUC,gBAAgB,EAAE,GAAGH,gBAAgB;AACvD,MAAMI,8BAA8B,CAAIC,eAC7CrB,wCAAAA,EAAmBgB,iBAAiB,CAACM,MAAMpB,mBAAmB,GAAKmB,SAASC,MAAM"}

package/lib-commonjs/hooks/{useControllableOpenItems.js → useControllableOpenItems.cjs}

@@ -20,7 +20,7 @@ _export(exports, {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _reactutilities = require("@fluentui/react-utilities");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _ImmutableSet = require("../utils/ImmutableSet");
+const _ImmutableSet = require("../utils/ImmutableSet.cjs");
 function useControllableOpenItems(props) {
     return (0, _reactutilities.useControllableState)({
         state: _react.useMemo(()=>props.openItems && _ImmutableSet.ImmutableSet.from(props.openItems), [

package/lib-commonjs/hooks/{useControllableOpenItems.js.map → useControllableOpenItems.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useControllableOpenItems.ts"],"sourcesContent":["'use client';\n\nimport { useControllableState } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport type { TreeItemValue } from '../components/TreeItem/TreeItem.types';\nimport type { TreeOpenChangeData, TreeProps } from '../Tree';\n\n/**\n * @internal\n */\nexport function useControllableOpenItems(\n  props: Pick<TreeProps, 'openItems' | 'defaultOpenItems'>,\n): [ImmutableSet<TreeItemValue>, React.Dispatch<React.SetStateAction<ImmutableSet<TreeItemValue>>>] {\n  return useControllableState({\n    state: React.useMemo(() => props.openItems && ImmutableSet.from(props.openItems), [props.openItems]),\n    defaultState: props.defaultOpenItems && (() => ImmutableSet.from(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  return data.open ? previousOpenItems.add(data.value) : previousOpenItems.delete(data.value);\n}\n"],"names":["useControllableState","React","ImmutableSet","useControllableOpenItems","props","state","useMemo","openItems","from","defaultState","defaultOpenItems","initialState","empty","createNextOpenItems","data","previousOpenItems","open","add","value","delete"],"mappings":"AAAA;;;;;;;;;;;;uBAwBgBa;;;4BAbAV;;;;;gCATqB,4BAA4B;iEAC1C,QAAQ;8BACF,wBAAwB;AAO9C,SAASA,yBACdC,KAAwD;IAExD,WAAOJ,oCAAAA,EAAqB;QAC1BK,OAAOJ,OAAMK,OAAO,CAAC,IAAMF,MAAMG,SAAS,IAAIL,0BAAAA,CAAaM,IAAI,CAACJ,MAAMG,SAAS,GAAG;YAACH,MAAMG,SAAS;SAAC;QACnGE,cAAcL,MAAMM,gBAAgB,IAAK,KAAMR,0BAAAA,CAAaM,IAAI,CAACJ,MAAMM,iBAAgB,CAAA;QACvFC,cAAcT,0BAAAA,CAAaU,KAAK;IAClC;AACF;AAKO,SAASC,oBACdC,IAAgD,EAChDC,iBAA8C;IAE9C,OAAOD,KAAKE,IAAI,GAAGD,kBAAkBE,GAAG,CAACH,KAAKI,KAAK,IAAIH,kBAAkBI,MAAM,CAACL,KAAKI,KAAK;AAC5F"}
+{"version":3,"sources":["../src/hooks/useControllableOpenItems.ts"],"sourcesContent":["'use client';\n\nimport { useControllableState } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport type { TreeItemValue } from '../components/TreeItem/TreeItem.types';\nimport type { TreeOpenChangeData, TreeProps } from '../Tree';\n\n/**\n * @internal\n */\nexport function useControllableOpenItems(\n  props: Pick<TreeProps, 'openItems' | 'defaultOpenItems'>,\n): [ImmutableSet<TreeItemValue>, React.Dispatch<React.SetStateAction<ImmutableSet<TreeItemValue>>>] {\n  return useControllableState({\n    state: React.useMemo(() => props.openItems && ImmutableSet.from(props.openItems), [props.openItems]),\n    defaultState: props.defaultOpenItems && (() => ImmutableSet.from(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  return data.open ? previousOpenItems.add(data.value) : previousOpenItems.delete(data.value);\n}\n"],"names":["useControllableState","React","ImmutableSet","useControllableOpenItems","props","state","useMemo","openItems","from","defaultState","defaultOpenItems","initialState","empty","createNextOpenItems","data","previousOpenItems","open","add","value","delete"],"mappings":"AAAA;;;;;;;;;;;;uBAwBgBa;;;4BAbAV;;;;;gCATqB,4BAA4B;iEAC1C,QAAQ;8BACF,2BAAwB;AAO9C,SAASA,yBACdC,KAAwD;IAExD,WAAOJ,oCAAAA,EAAqB;QAC1BK,OAAOJ,OAAMK,OAAO,CAAC,IAAMF,MAAMG,SAAS,IAAIL,0BAAAA,CAAaM,IAAI,CAACJ,MAAMG,SAAS,GAAG;YAACH,MAAMG,SAAS;SAAC;QACnGE,cAAcL,MAAMM,gBAAgB,IAAK,KAAMR,0BAAAA,CAAaM,IAAI,CAACJ,MAAMM,iBAAgB,CAAA;QACvFC,cAAcT,0BAAAA,CAAaU,KAAK;IAClC;AACF;AAKO,SAASC,oBACdC,IAAgD,EAChDC,iBAA8C;IAE9C,OAAOD,KAAKE,IAAI,GAAGD,kBAAkBE,GAAG,CAACH,KAAKI,KAAK,IAAIH,kBAAkBI,MAAM,CAACL,KAAKI,KAAK;AAC5F"}

package/lib-commonjs/hooks/{useFlatTreeNavigation.js → useFlatTreeNavigation.cjs}

@@ -11,14 +11,14 @@ Object.defineProperty(exports, "useFlatTreeNavigation", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _reactutilities = require("@fluentui/react-utilities");
-const _nextTypeAheadElement = require("../utils/nextTypeAheadElement");
-const _tokens = require("../utils/tokens");
-const _useRovingTabIndexes = require("./useRovingTabIndexes");
-const _getTreeItemValueFromElement = require("../utils/getTreeItemValueFromElement");
+const _nextTypeAheadElement = require("../utils/nextTypeAheadElement.cjs");
+const _tokens = require("../utils/tokens.cjs");
+const _useRovingTabIndexes = require("./useRovingTabIndexes.cjs");
+const _getTreeItemValueFromElement = require("../utils/getTreeItemValueFromElement.cjs");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useHTMLElementWalkerRef = require("./useHTMLElementWalkerRef");
+const _useHTMLElementWalkerRef = require("./useHTMLElementWalkerRef.cjs");
 const _reacttabster = require("@fluentui/react-tabster");
-const _TreeItemLayout = require("../TreeItemLayout");
+const _TreeItemLayout = require("../TreeItemLayout.cjs");
 function useFlatTreeNavigation(navigationMode = 'tree') {
     'use no memo'; // justified: compiler would optimize useFlatTreeNavigation — manual opt-out to preserve runtime behavior
     const { walkerRef, rootRef: walkerRootRef } = (0, _useHTMLElementWalkerRef.useHTMLElementWalkerRef)();

package/lib-commonjs/hooks/{useFlatTreeNavigation.js.map → useFlatTreeNavigation.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useFlatTreeNavigation.ts"],"sourcesContent":["'use client';\n\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeNavigationData_unstable } from '../Tree';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport type { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport type { TreeItemValue } from '../TreeItem';\nimport { dataTreeItemValueAttrName } from '../utils/getTreeItemValueFromElement';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport type { TreeNavigationMode } from '../components/Tree/Tree.types';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout';\n\nexport function useFlatTreeNavigation(navigationMode: TreeNavigationMode = 'tree'): {\n  navigate: (data: TreeNavigationData_unstable) => void;\n  rootRef: React.RefCallback<HTMLElement>;\n  forceUpdateRovingTabIndex: () => void;\n} {\n  'use no memo'; // justified: compiler would optimize useFlatTreeNavigation — manual opt-out to preserve runtime behavior\n\n  const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n  const { rove, forceUpdate: forceUpdateRovingTabIndex, initialize: initializeRovingTabIndex } = useRovingTabIndex();\n  const { findFirstFocusable } = useFocusFinders();\n\n  const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n    root => {\n      if (walkerRef.current && root) {\n        initializeRovingTabIndex(walkerRef.current);\n      }\n    },\n    [initializeRovingTabIndex, walkerRef],\n  );\n\n  function getNextElement(data: TreeNavigationData_unstable) {\n    if (!walkerRef.current) {\n      return null;\n    }\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        walkerRef.current.currentElement = data.target;\n        return nextTypeAheadElement(walkerRef.current, data.event.key);\n      case treeDataTypes.ArrowLeft: {\n        const actions = queryActions(data.target);\n        if (navigationMode === 'treegrid' && actions?.contains(data.target.ownerDocument.activeElement)) {\n          return data.target;\n        }\n        const nextElement = parentElement(data.parentValue, walkerRef.current);\n        if (!nextElement && process.env.NODE_ENV !== 'production') {\n          // eslint-disable-next-line no-console\n          console.warn(\n            /* #__DE-INDENT__ */ `\n            @fluentui/react-tree [useFlatTreeNavigation]:\n            \\'ArrowLeft\\' navigation was not possible.\n            No parent element found for the current element:\n          `,\n            data.target,\n          );\n        }\n        return nextElement;\n      }\n      case treeDataTypes.ArrowRight: {\n        if (navigationMode === 'treegrid') {\n          const actions = queryActions(data.target);\n          if (actions) {\n            findFirstFocusable(actions)?.focus();\n          }\n          return null;\n        }\n        walkerRef.current.currentElement = data.target;\n        const nextElement = firstChild(data.target, walkerRef.current);\n        if (!nextElement && process.env.NODE_ENV !== 'production') {\n          const ariaLevel = Number(data.target.getAttribute('aria-level'));\n          // eslint-disable-next-line no-console\n          console.warn(\n            /* #__DE-INDENT__ */ `\n            @fluentui/react-tree [useFlatTreeNavigation]:\n            \\'ArrowRight\\' navigation was not possible.\n            No element with \"aria-posinset=1\" and \"aria-level=${ariaLevel + 1}\"\n            was found after the current element!\n          `,\n            data.target,\n          );\n        }\n        return nextElement;\n      }\n      case treeDataTypes.End:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.lastChild();\n      case treeDataTypes.Home:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.firstChild();\n      case treeDataTypes.ArrowDown:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.nextElement();\n      case treeDataTypes.ArrowUp:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.previousElement();\n    }\n  }\n  const navigate = useEventCallback((data: TreeNavigationData_unstable) => {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  });\n  return {\n    navigate,\n    rootRef: useMergedRefs<HTMLElement>(walkerRootRef, rootRefCallback),\n    forceUpdateRovingTabIndex,\n  } as const;\n}\n\nfunction firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLElement | null {\n  const nextElement = treeWalker.nextElement();\n  if (!nextElement) {\n    return null;\n  }\n  const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n  const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n  const targetAriaLevel = target.getAttribute('aria-level');\n  if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n    return nextElement;\n  }\n  return null;\n}\n\nfunction parentElement(parentValue: TreeItemValue | undefined, treeWalker: HTMLElementWalker) {\n  if (parentValue === undefined) {\n    return null;\n  }\n  return treeWalker.root.querySelector<HTMLElement>(`[${dataTreeItemValueAttrName}=\"${parentValue}\"]`);\n}\n\nconst queryActions = (target: HTMLElement) =>\n  target.querySelector<HTMLElement>(\n    `:scope > .${treeItemLayoutClassNames.root} > .${treeItemLayoutClassNames.actions}`,\n  );\n"],"names":["useEventCallback","useMergedRefs","nextTypeAheadElement","treeDataTypes","useRovingTabIndex","dataTreeItemValueAttrName","React","useHTMLElementWalkerRef","useFocusFinders","treeItemLayoutClassNames","useFlatTreeNavigation","navigationMode","walkerRef","rootRef","walkerRootRef","rove","forceUpdate","forceUpdateRovingTabIndex","initialize","initializeRovingTabIndex","findFirstFocusable","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","actions","queryActions","contains","ownerDocument","activeElement","nextElement","parentElement","parentValue","process","env","NODE_ENV","console","warn","ArrowRight","focus","firstChild","ariaLevel","Number","getAttribute","End","lastChild","Home","ArrowDown","ArrowUp","previousElement","navigate","treeWalker","nextElementAriaPosInSet","nextElementAriaLevel","targetAriaLevel","undefined","querySelector"],"mappings":"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"}
+{"version":3,"sources":["../src/hooks/useFlatTreeNavigation.ts"],"sourcesContent":["'use client';\n\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeNavigationData_unstable } from '../Tree';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport type { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport type { TreeItemValue } from '../TreeItem';\nimport { dataTreeItemValueAttrName } from '../utils/getTreeItemValueFromElement';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport type { TreeNavigationMode } from '../components/Tree/Tree.types';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout';\n\nexport function useFlatTreeNavigation(navigationMode: TreeNavigationMode = 'tree'): {\n  navigate: (data: TreeNavigationData_unstable) => void;\n  rootRef: React.RefCallback<HTMLElement>;\n  forceUpdateRovingTabIndex: () => void;\n} {\n  'use no memo'; // justified: compiler would optimize useFlatTreeNavigation — manual opt-out to preserve runtime behavior\n\n  const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n  const { rove, forceUpdate: forceUpdateRovingTabIndex, initialize: initializeRovingTabIndex } = useRovingTabIndex();\n  const { findFirstFocusable } = useFocusFinders();\n\n  const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n    root => {\n      if (walkerRef.current && root) {\n        initializeRovingTabIndex(walkerRef.current);\n      }\n    },\n    [initializeRovingTabIndex, walkerRef],\n  );\n\n  function getNextElement(data: TreeNavigationData_unstable) {\n    if (!walkerRef.current) {\n      return null;\n    }\n    switch (data.type) {\n      case treeDataTypes.Click:\n        return data.target;\n      case treeDataTypes.TypeAhead:\n        walkerRef.current.currentElement = data.target;\n        return nextTypeAheadElement(walkerRef.current, data.event.key);\n      case treeDataTypes.ArrowLeft: {\n        const actions = queryActions(data.target);\n        if (navigationMode === 'treegrid' && actions?.contains(data.target.ownerDocument.activeElement)) {\n          return data.target;\n        }\n        const nextElement = parentElement(data.parentValue, walkerRef.current);\n        if (!nextElement && process.env.NODE_ENV !== 'production') {\n          // eslint-disable-next-line no-console\n          console.warn(\n            /* #__DE-INDENT__ */ `\n            @fluentui/react-tree [useFlatTreeNavigation]:\n            \\'ArrowLeft\\' navigation was not possible.\n            No parent element found for the current element:\n          `,\n            data.target,\n          );\n        }\n        return nextElement;\n      }\n      case treeDataTypes.ArrowRight: {\n        if (navigationMode === 'treegrid') {\n          const actions = queryActions(data.target);\n          if (actions) {\n            findFirstFocusable(actions)?.focus();\n          }\n          return null;\n        }\n        walkerRef.current.currentElement = data.target;\n        const nextElement = firstChild(data.target, walkerRef.current);\n        if (!nextElement && process.env.NODE_ENV !== 'production') {\n          const ariaLevel = Number(data.target.getAttribute('aria-level'));\n          // eslint-disable-next-line no-console\n          console.warn(\n            /* #__DE-INDENT__ */ `\n            @fluentui/react-tree [useFlatTreeNavigation]:\n            \\'ArrowRight\\' navigation was not possible.\n            No element with \"aria-posinset=1\" and \"aria-level=${ariaLevel + 1}\"\n            was found after the current element!\n          `,\n            data.target,\n          );\n        }\n        return nextElement;\n      }\n      case treeDataTypes.End:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.lastChild();\n      case treeDataTypes.Home:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return walkerRef.current.firstChild();\n      case treeDataTypes.ArrowDown:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.nextElement();\n      case treeDataTypes.ArrowUp:\n        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.previousElement();\n    }\n  }\n  const navigate = useEventCallback((data: TreeNavigationData_unstable) => {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement);\n    }\n  });\n  return {\n    navigate,\n    rootRef: useMergedRefs<HTMLElement>(walkerRootRef, rootRefCallback),\n    forceUpdateRovingTabIndex,\n  } as const;\n}\n\nfunction firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLElement | null {\n  const nextElement = treeWalker.nextElement();\n  if (!nextElement) {\n    return null;\n  }\n  const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n  const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n  const targetAriaLevel = target.getAttribute('aria-level');\n  if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n    return nextElement;\n  }\n  return null;\n}\n\nfunction parentElement(parentValue: TreeItemValue | undefined, treeWalker: HTMLElementWalker) {\n  if (parentValue === undefined) {\n    return null;\n  }\n  return treeWalker.root.querySelector<HTMLElement>(`[${dataTreeItemValueAttrName}=\"${parentValue}\"]`);\n}\n\nconst queryActions = (target: HTMLElement) =>\n  target.querySelector<HTMLElement>(\n    `:scope > .${treeItemLayoutClassNames.root} > .${treeItemLayoutClassNames.actions}`,\n  );\n"],"names":["useEventCallback","useMergedRefs","nextTypeAheadElement","treeDataTypes","useRovingTabIndex","dataTreeItemValueAttrName","React","useHTMLElementWalkerRef","useFocusFinders","treeItemLayoutClassNames","useFlatTreeNavigation","navigationMode","walkerRef","rootRef","walkerRootRef","rove","forceUpdate","forceUpdateRovingTabIndex","initialize","initializeRovingTabIndex","findFirstFocusable","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","actions","queryActions","contains","ownerDocument","activeElement","nextElement","parentElement","parentValue","process","env","NODE_ENV","console","warn","ArrowRight","focus","firstChild","ariaLevel","Number","getAttribute","End","lastChild","Home","ArrowDown","ArrowUp","previousElement","navigate","treeWalker","nextElementAriaPosInSet","nextElementAriaLevel","targetAriaLevel","undefined","querySelector"],"mappings":"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"}

package/lib-commonjs/hooks/{useHTMLElementWalkerRef.js → useHTMLElementWalkerRef.cjs}

@@ -12,8 +12,8 @@ Object.defineProperty(exports, "useHTMLElementWalkerRef", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
-const _createHTMLElementWalker = require("../utils/createHTMLElementWalker");
-const _treeItemFilter = require("../utils/treeItemFilter");
+const _createHTMLElementWalker = require("../utils/createHTMLElementWalker.cjs");
+const _treeItemFilter = require("../utils/treeItemFilter.cjs");
 function useHTMLElementWalkerRef() {
     const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
     const walkerRef = _react.useRef(undefined);

package/lib-commonjs/hooks/{useHTMLElementWalkerRef.js.map → useHTMLElementWalkerRef.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useHTMLElementWalkerRef.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport type { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { createHTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../utils/treeItemFilter';\n\nexport function useHTMLElementWalkerRef(): {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  walkerRef: React.MutableRefObject<HTMLElementWalker | undefined>;\n  rootRef: React.Ref<HTMLElement>;\n} {\n  const { targetDocument } = useFluent_unstable();\n\n  const walkerRef = React.useRef<HTMLElementWalker>(undefined);\n\n  const rootRef: React.Ref<HTMLElement> = React.useCallback(\n    (root: HTMLElement) => {\n      walkerRef.current =\n        targetDocument && root ? createHTMLElementWalker(root, targetDocument, treeItemFilter) : undefined;\n    },\n    [targetDocument],\n  );\n  return { walkerRef, rootRef } as const;\n}\n"],"names":["React","useFluent_unstable","createHTMLElementWalker","treeItemFilter","useHTMLElementWalkerRef","targetDocument","walkerRef","useRef","undefined","rootRef","useCallback","root","current"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCACI,kCAAkC;yCAE7B,mCAAmC;gCAC5C,0BAA0B;AAElD,SAASI;IAKd,MAAM,EAAEC,cAAc,EAAE,OAAGJ,uCAAAA;IAE3B,MAAMK,YAAYN,OAAMO,MAAM,CAAoBC;IAElD,MAAMC,UAAkCT,OAAMU,WAAW,CACvD,CAACC;QACCL,UAAUM,OAAO,GACfP,kBAAkBM,WAAOT,gDAAAA,EAAwBS,MAAMN,gBAAgBF,8BAAAA,IAAkBK;IAC7F,GACA;QAACH;KAAe;IAElB,OAAO;QAAEC;QAAWG;IAAQ;AAC9B"}
+{"version":3,"sources":["../src/hooks/useHTMLElementWalkerRef.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport type { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { createHTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../utils/treeItemFilter';\n\nexport function useHTMLElementWalkerRef(): {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  walkerRef: React.MutableRefObject<HTMLElementWalker | undefined>;\n  rootRef: React.Ref<HTMLElement>;\n} {\n  const { targetDocument } = useFluent_unstable();\n\n  const walkerRef = React.useRef<HTMLElementWalker>(undefined);\n\n  const rootRef: React.Ref<HTMLElement> = React.useCallback(\n    (root: HTMLElement) => {\n      walkerRef.current =\n        targetDocument && root ? createHTMLElementWalker(root, targetDocument, treeItemFilter) : undefined;\n    },\n    [targetDocument],\n  );\n  return { walkerRef, rootRef } as const;\n}\n"],"names":["React","useFluent_unstable","createHTMLElementWalker","treeItemFilter","useHTMLElementWalkerRef","targetDocument","walkerRef","useRef","undefined","rootRef","useCallback","root","current"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCACI,kCAAkC;yCAE7B,sCAAmC;gCAC5C,6BAA0B;AAElD,SAASI;IAKd,MAAM,EAAEC,cAAc,EAAE,OAAGJ,uCAAAA;IAE3B,MAAMK,YAAYN,OAAMO,MAAM,CAAoBC;IAElD,MAAMC,UAAkCT,OAAMU,WAAW,CACvD,CAACC;QACCL,UAAUM,OAAO,GACfP,kBAAkBM,WAAOT,gDAAAA,EAAwBS,MAAMN,gBAAgBF,8BAAAA,IAAkBK;IAC7F,GACA;QAACH;KAAe;IAElB,OAAO;QAAEC;QAAWG;IAAQ;AAC9B"}