@fluentui/react-tree 9.16.0 → 9.16.2

package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.raw.js.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  'use no memo';\n\n  const rootBaseStyles = useRootBaseStyles();\n  const rootStyles = useRootStyles();\n  const mediaBaseStyles = useMediaBaseStyles();\n  const descriptionBaseStyles = useDescriptionBaseStyles();\n  const actionsBaseStyles = useActionsBaseStyles();\n  const asideBaseStyles = useAsideBaseStyles();\n  const expandIconBaseStyles = useExpandIconBaseStyles();\n  const mainBaseStyles = useMainBaseStyles();\n  const mainStyles = useMainStyles();\n\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  const appearance = useTreeContext_unstable(ctx => ctx.appearance);\n  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n\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  state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);\n\n  if (state.main) {\n    state.main.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.main,\n      mainBaseStyles,\n      state.description && mainStyles.withDescription,\n      state.main.className,\n    );\n  }\n  if (state.description) {\n    state.description.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.description,\n      descriptionBaseStyles,\n      state.description.className,\n    );\n  }\n  if (state.actions) {\n    state.actions.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.actions,\n      actionsBaseStyles,\n      state.actions.className,\n    );\n  }\n  if (state.aside) {\n    state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);\n  }\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(\n      treeItemPersonaLayoutClassNames.expandIcon,\n      expandIconBaseStyles,\n      state.expandIcon.className,\n    );\n  }\n\n  if (state.selector) {\n    state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","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":"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"}
+{"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"}

package/lib-commonjs/hooks/useFlatTreeNavigation.js

@@ -20,7 +20,7 @@ const _useHTMLElementWalkerRef = require("./useHTMLElementWalkerRef");
 const _reacttabster = require("@fluentui/react-tabster");
 const _TreeItemLayout = require("../TreeItemLayout");
 function useFlatTreeNavigation(navigationMode = 'tree') {
-    'use no memo';
+    'use no memo'; // justified: compiler would optimize useFlatTreeNavigation — manual opt-out to preserve runtime behavior
     const { walkerRef, rootRef: walkerRootRef } = (0, _useHTMLElementWalkerRef.useHTMLElementWalkerRef)();
     const { rove, forceUpdate: forceUpdateRovingTabIndex, initialize: initializeRovingTabIndex } = (0, _useRovingTabIndexes.useRovingTabIndex)();
     const { findFirstFocusable } = (0, _reacttabster.useFocusFinders)();

package/lib-commonjs/hooks/useFlatTreeNavigation.js.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';\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/useRovingTabIndexes.js

@@ -30,6 +30,7 @@ function useRovingTabIndex() {
             if (walkerRef.current.root !== treeitemRoot) {
                 return;
             }
+            // eslint-disable-next-line react-hooks/immutability, react-hooks/preserve-manual-memoization
             rove(element);
         }
     });
@@ -49,6 +50,7 @@ function useRovingTabIndex() {
             nextElement.tabIndex = -1;
         }
     }, []);
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
     const rove = _react.useCallback((nextElement, focusOptions)=>{
         if (!currentElementRef.current) {
             return;

package/lib-commonjs/hooks/useRovingTabIndexes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useRovingTabIndexes.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { useFocusedElementChange } from '@fluentui/react-tabster';\n\nconst findTreeItemRoot = (element: HTMLElement) => {\n  let parent = element.parentElement;\n  while (parent && parent.getAttribute('role') !== 'tree') {\n    parent = parent.parentElement;\n  }\n  return parent;\n};\n\n/**\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n *\n * @internal\n */\nexport function useRovingTabIndex(): {\n  rove: (nextElement: HTMLElement, focusOptions?: FocusOptions) => void;\n  initialize: (walker: HTMLElementWalker) => void;\n  forceUpdate: () => void;\n} {\n  const currentElementRef = React.useRef<HTMLElement | null>(null);\n  const walkerRef = React.useRef<HTMLElementWalker | null>(null);\n  const { targetDocument } = useFluent();\n\n  useFocusedElementChange(element => {\n    if (element?.getAttribute('role') === 'treeitem' && walkerRef.current && walkerRef.current.root.contains(element)) {\n      const treeitemRoot = findTreeItemRoot(element);\n      if (walkerRef.current.root !== treeitemRoot) {\n        return;\n      }\n      rove(element);\n    }\n  });\n\n  const initialize = React.useCallback((walker: HTMLElementWalker) => {\n    walkerRef.current = walker;\n    walker.currentElement = walker.root;\n    let tabbableChild = walker.firstChild(element =>\n      element.tabIndex === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP,\n    );\n    walker.currentElement = walker.root;\n    tabbableChild ??= walker.firstChild();\n    if (!tabbableChild) {\n      return;\n    }\n    tabbableChild.tabIndex = 0;\n    currentElementRef.current = tabbableChild;\n    let nextElement: HTMLElement | null = null;\n    while ((nextElement = walker.nextElement()) && nextElement !== tabbableChild) {\n      nextElement.tabIndex = -1;\n    }\n  }, []);\n  const rove = React.useCallback((nextElement: HTMLElement, focusOptions?: FocusOptions) => {\n    if (!currentElementRef.current) {\n      return;\n    }\n    currentElementRef.current.tabIndex = -1;\n    nextElement.tabIndex = 0;\n    nextElement.focus(focusOptions);\n    currentElementRef.current = nextElement;\n  }, []);\n\n  const forceUpdate = React.useCallback(() => {\n    if (\n      (currentElementRef.current === null || !targetDocument?.body.contains(currentElementRef.current)) &&\n      walkerRef.current\n    ) {\n      initialize(walkerRef.current);\n    }\n  }, [targetDocument, initialize]);\n\n  return {\n    rove,\n    initialize,\n    forceUpdate,\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","useFocusedElementChange","findTreeItemRoot","element","parent","parentElement","getAttribute","useRovingTabIndex","currentElementRef","useRef","walkerRef","targetDocument","current","root","contains","treeitemRoot","rove","initialize","useCallback","walker","currentElement","tabbableChild","firstChild","tabIndex","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","nextElement","focusOptions","focus","forceUpdate","body"],"mappings":"AAAA;;;;;+BAoBgBS;;;;;;;iEAlBO,QAAQ;qCACiB,kCAAkC;8BAE1C,0BAA0B;AAElE,MAAML,mBAAmB,CAACC;IACxB,IAAIC,SAASD,QAAQE,aAAa;IAClC,MAAOD,UAAUA,OAAOE,YAAY,CAAC,YAAY,OAAQ;QACvDF,SAASA,OAAOC,aAAa;IAC/B;IACA,OAAOD;AACT;AAOO;IAKL,MAAMI,oBAAoBV,OAAMW,MAAM,CAAqB;IAC3D,MAAMC,YAAYZ,OAAMW,MAAM,CAA2B;IACzD,MAAM,EAAEE,cAAc,EAAE,OAAGX,uCAAAA;QAE3BC,qCAAAA,EAAwBE,CAAAA;QACtB,IAAIA,CAAAA,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASG,YAAY,CAAC,OAAA,MAAY,cAAcI,UAAUE,OAAO,IAAIF,UAAUE,OAAO,CAACC,IAAI,CAACC,QAAQ,CAACX,UAAU;YACjH,MAAMY,eAAeb,iBAAiBC;YACtC,IAAIO,UAAUE,OAAO,CAACC,IAAI,KAAKE,cAAc;gBAC3C;YACF;YACAC,KAAKb;QACP;IACF;IAEA,MAAMc,aAAanB,OAAMoB,WAAW,CAAC,CAACC;QACpCT,UAAUE,OAAO,GAAGO;QACpBA,OAAOC,cAAc,GAAGD,OAAON,IAAI;QACnC,IAAIQ,gBAAgBF,OAAOG,UAAU,CAACnB,CAAAA,UACpCA,QAAQoB,QAAQ,KAAK,IAAIC,WAAWC,aAAa,GAAGD,WAAWE,WAAW;QAE5EP,OAAOC,cAAc,GAAGD,OAAON,IAAI;QACnCQ,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,gBAAAA,gBAAkBF,OAAOG,UAAU;QACnC,IAAI,CAACD,eAAe;YAClB;QACF;QACAA,cAAcE,QAAQ,GAAG;QACzBf,kBAAkBI,OAAO,GAAGS;QAC5B,IAAIM,cAAkC;QACtC,MAAQA,CAAAA,cAAcR,OAAOQ,WAAW,EAAA,CAAC,IAAMA,gBAAgBN,cAAe;YAC5EM,YAAYJ,QAAQ,GAAG,CAAC;QAC1B;IACF,GAAG,EAAE;IACL,MAAMP,OAAOlB,OAAMoB,WAAW,CAAC,CAACS,aAA0BC;QACxD,IAAI,CAACpB,kBAAkBI,OAAO,EAAE;YAC9B;QACF;QACAJ,kBAAkBI,OAAO,CAACW,QAAQ,GAAG,CAAC;QACtCI,YAAYJ,QAAQ,GAAG;QACvBI,YAAYE,KAAK,CAACD;QAClBpB,kBAAkBI,OAAO,GAAGe;IAC9B,GAAG,EAAE;IAEL,MAAMG,cAAchC,OAAMoB,WAAW,CAAC;QACpC,IACGV,CAAAA,kBAAkBI,OAAO,KAAK,QAAQ,EAACD,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBoB,IAAI,CAACjB,QAAQ,CAACN,kBAAkBI,QAAO,CAAA,CAAA,IAC/FF,UAAUE,OAAO,EACjB;YACAK,WAAWP,UAAUE,OAAO;QAC9B;IACF,GAAG;QAACD;QAAgBM;KAAW;IAE/B,OAAO;QACLD;QACAC;QACAa;IACF;AACF"}
+{"version":3,"sources":["../src/hooks/useRovingTabIndexes.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { useFocusedElementChange } from '@fluentui/react-tabster';\n\nconst findTreeItemRoot = (element: HTMLElement) => {\n  let parent = element.parentElement;\n  while (parent && parent.getAttribute('role') !== 'tree') {\n    parent = parent.parentElement;\n  }\n  return parent;\n};\n\n/**\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n *\n * @internal\n */\nexport function useRovingTabIndex(): {\n  rove: (nextElement: HTMLElement, focusOptions?: FocusOptions) => void;\n  initialize: (walker: HTMLElementWalker) => void;\n  forceUpdate: () => void;\n} {\n  const currentElementRef = React.useRef<HTMLElement | null>(null);\n  const walkerRef = React.useRef<HTMLElementWalker | null>(null);\n  const { targetDocument } = useFluent();\n\n  useFocusedElementChange(element => {\n    if (element?.getAttribute('role') === 'treeitem' && walkerRef.current && walkerRef.current.root.contains(element)) {\n      const treeitemRoot = findTreeItemRoot(element);\n      if (walkerRef.current.root !== treeitemRoot) {\n        return;\n      }\n      // eslint-disable-next-line react-hooks/immutability, react-hooks/preserve-manual-memoization\n      rove(element);\n    }\n  });\n\n  const initialize = React.useCallback((walker: HTMLElementWalker) => {\n    walkerRef.current = walker;\n    walker.currentElement = walker.root;\n    let tabbableChild = walker.firstChild(element =>\n      element.tabIndex === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP,\n    );\n    walker.currentElement = walker.root;\n    tabbableChild ??= walker.firstChild();\n    if (!tabbableChild) {\n      return;\n    }\n    tabbableChild.tabIndex = 0;\n    currentElementRef.current = tabbableChild;\n    let nextElement: HTMLElement | null = null;\n    while ((nextElement = walker.nextElement()) && nextElement !== tabbableChild) {\n      nextElement.tabIndex = -1;\n    }\n  }, []);\n  // eslint-disable-next-line react-hooks/preserve-manual-memoization\n  const rove = React.useCallback((nextElement: HTMLElement, focusOptions?: FocusOptions) => {\n    if (!currentElementRef.current) {\n      return;\n    }\n    currentElementRef.current.tabIndex = -1;\n    nextElement.tabIndex = 0;\n    nextElement.focus(focusOptions);\n    currentElementRef.current = nextElement;\n  }, []);\n\n  const forceUpdate = React.useCallback(() => {\n    if (\n      (currentElementRef.current === null || !targetDocument?.body.contains(currentElementRef.current)) &&\n      walkerRef.current\n    ) {\n      initialize(walkerRef.current);\n    }\n  }, [targetDocument, initialize]);\n\n  return {\n    rove,\n    initialize,\n    forceUpdate,\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","useFocusedElementChange","findTreeItemRoot","element","parent","parentElement","getAttribute","useRovingTabIndex","currentElementRef","useRef","walkerRef","targetDocument","current","root","contains","treeitemRoot","rove","initialize","useCallback","walker","currentElement","tabbableChild","firstChild","tabIndex","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","nextElement","focusOptions","focus","forceUpdate","body"],"mappings":"AAAA;;;;;+BAoBgBS;;;;;;;iEAlBO,QAAQ;qCACiB,kCAAkC;8BAE1C,0BAA0B;AAElE,MAAML,mBAAmB,CAACC;IACxB,IAAIC,SAASD,QAAQE,aAAa;IAClC,MAAOD,UAAUA,OAAOE,YAAY,CAAC,YAAY,OAAQ;QACvDF,SAASA,OAAOC,aAAa;IAC/B;IACA,OAAOD;AACT;AAOO;IAKL,MAAMI,oBAAoBV,OAAMW,MAAM,CAAqB;IAC3D,MAAMC,YAAYZ,OAAMW,MAAM,CAA2B;IACzD,MAAM,EAAEE,cAAc,EAAE,OAAGX,uCAAAA;QAE3BC,qCAAAA,EAAwBE,CAAAA;QACtB,IAAIA,CAAAA,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASG,YAAY,CAAC,OAAA,MAAY,cAAcI,UAAUE,OAAO,IAAIF,UAAUE,OAAO,CAACC,IAAI,CAACC,QAAQ,CAACX,UAAU;YACjH,MAAMY,eAAeb,iBAAiBC;YACtC,IAAIO,UAAUE,OAAO,CAACC,IAAI,KAAKE,cAAc;gBAC3C;YACF;YACA,6FAA6F;YAC7FC,KAAKb;QACP;IACF;IAEA,MAAMc,aAAanB,OAAMoB,WAAW,CAAC,CAACC;QACpCT,UAAUE,OAAO,GAAGO;QACpBA,OAAOC,cAAc,GAAGD,OAAON,IAAI;QACnC,IAAIQ,gBAAgBF,OAAOG,UAAU,CAACnB,CAAAA,UACpCA,QAAQoB,QAAQ,KAAK,IAAIC,WAAWC,aAAa,GAAGD,WAAWE,WAAW;QAE5EP,OAAOC,cAAc,GAAGD,OAAON,IAAI;QACnCQ,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,gBAAAA,gBAAkBF,OAAOG,UAAU;QACnC,IAAI,CAACD,eAAe;YAClB;QACF;QACAA,cAAcE,QAAQ,GAAG;QACzBf,kBAAkBI,OAAO,GAAGS;QAC5B,IAAIM,cAAkC;QACtC,MAAQA,CAAAA,cAAcR,OAAOQ,WAAW,EAAA,CAAC,IAAMA,gBAAgBN,cAAe;YAC5EM,YAAYJ,QAAQ,GAAG,CAAC;QAC1B;IACF,GAAG,EAAE;IACL,mEAAmE;IACnE,MAAMP,OAAOlB,OAAMoB,WAAW,CAAC,CAACS,aAA0BC;QACxD,IAAI,CAACpB,kBAAkBI,OAAO,EAAE;YAC9B;QACF;QACAJ,kBAAkBI,OAAO,CAACW,QAAQ,GAAG,CAAC;QACtCI,YAAYJ,QAAQ,GAAG;QACvBI,YAAYE,KAAK,CAACD;QAClBpB,kBAAkBI,OAAO,GAAGe;IAC9B,GAAG,EAAE;IAEL,MAAMG,cAAchC,OAAMoB,WAAW,CAAC;QACpC,IACGV,CAAAA,kBAAkBI,OAAO,KAAK,QAAQ,EAACD,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBoB,IAAI,CAACjB,QAAQ,CAACN,kBAAkBI,QAAO,CAAA,CAAA,IAC/FF,UAAUE,OAAO,EACjB;YACAK,WAAWP,UAAUE,OAAO;QAC9B;IACF,GAAG;QAACD;QAAgBM;KAAW;IAE/B,OAAO;QACLD;QACAC;QACAa;IACF;AACF"}

package/lib-commonjs/hooks/useTreeNavigation.js

@@ -19,7 +19,7 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _TreeItemLayout = require("../TreeItemLayout");
 const _reacttabster = require("@fluentui/react-tabster");
 function useTreeNavigation(navigationMode = 'tree') {
-    'use no memo';
+    'use no memo'; // justified: compiler would optimize useTreeNavigation — manual opt-out to preserve runtime behavior
     const { rove, initialize: initializeRovingTabIndex, forceUpdate: forceUpdateRovingTabIndex } = (0, _useRovingTabIndexes.useRovingTabIndex)();
     const { findFirstFocusable } = (0, _reacttabster.useFocusFinders)();
     const { walkerRef, rootRef: walkerRootRef } = (0, _useHTMLElementWalkerRef.useHTMLElementWalkerRef)();

package/lib-commonjs/hooks/useTreeNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useTreeNavigation.ts"],"sourcesContent":["'use client';\n\nimport type { TreeNavigationData_unstable, TreeNavigationMode } from '../components/Tree/Tree.types';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport type { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\n/***\n * Hook used to manage navigation in the tree.\n *\n * @param navigationMode - the navigation mode of the tree, 'tree' (default) or 'treegrid'\n */\nexport function useTreeNavigation(navigationMode: TreeNavigationMode = 'tree'): {\n  navigate: (data: TreeNavigationData_unstable, focusOptions?: FocusOptions) => HTMLElement | null;\n  treeRef: React.RefCallback<HTMLElement>;\n  forceUpdateRovingTabIndex: () => void;\n} {\n  'use no memo';\n\n  const { rove, initialize: initializeRovingTabIndex, forceUpdate: forceUpdateRovingTabIndex } = useRovingTabIndex();\n  const { findFirstFocusable } = useFocusFinders();\n  const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n\n  const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n    root => {\n      if (root && walkerRef.current) {\n        initializeRovingTabIndex(walkerRef.current);\n      }\n    },\n    [walkerRef, initializeRovingTabIndex],\n  );\n\n  const 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        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.parentElement();\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        return walkerRef.current.firstChild();\n      case treeDataTypes.End:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return lastChildRecursive(walkerRef.current);\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  function navigate(data: TreeNavigationData_unstable, focusOptions?: FocusOptions) {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement, focusOptions);\n    }\n    return nextElement;\n  }\n  return {\n    navigate,\n    treeRef: useMergedRefs(walkerRootRef, rootRefCallback) as React.RefCallback<HTMLElement>,\n    forceUpdateRovingTabIndex,\n  } as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n  let lastElement: HTMLElement | null = null;\n  let nextElement: HTMLElement | null = null;\n  while ((nextElement = walker.lastChild())) {\n    lastElement = nextElement;\n  }\n  return lastElement;\n}\n\nconst queryActions = (target: HTMLElement) =>\n  target.querySelector<HTMLElement>(\n    `:scope > .${treeItemLayoutClassNames.root} > .${treeItemLayoutClassNames.actions}`,\n  );\n"],"names":["nextTypeAheadElement","treeDataTypes","useRovingTabIndex","React","useHTMLElementWalkerRef","useMergedRefs","treeItemLayoutClassNames","useFocusFinders","useTreeNavigation","navigationMode","rove","initialize","initializeRovingTabIndex","forceUpdate","forceUpdateRovingTabIndex","findFirstFocusable","walkerRef","rootRef","walkerRootRef","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","actions","queryActions","contains","ownerDocument","activeElement","parentElement","ArrowRight","focus","firstChild","End","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","focusOptions","treeRef","walker","lastElement","lastChild","querySelector"],"mappings":"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"}
+{"version":3,"sources":["../src/hooks/useTreeNavigation.ts"],"sourcesContent":["'use client';\n\nimport type { TreeNavigationData_unstable, TreeNavigationMode } from '../components/Tree/Tree.types';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport type { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\n/***\n * Hook used to manage navigation in the tree.\n *\n * @param navigationMode - the navigation mode of the tree, 'tree' (default) or 'treegrid'\n */\nexport function useTreeNavigation(navigationMode: TreeNavigationMode = 'tree'): {\n  navigate: (data: TreeNavigationData_unstable, focusOptions?: FocusOptions) => HTMLElement | null;\n  treeRef: React.RefCallback<HTMLElement>;\n  forceUpdateRovingTabIndex: () => void;\n} {\n  'use no memo'; // justified: compiler would optimize useTreeNavigation — manual opt-out to preserve runtime behavior\n\n  const { rove, initialize: initializeRovingTabIndex, forceUpdate: forceUpdateRovingTabIndex } = useRovingTabIndex();\n  const { findFirstFocusable } = useFocusFinders();\n  const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n\n  const rootRefCallback: React.RefCallback<HTMLElement> = React.useCallback(\n    root => {\n      if (root && walkerRef.current) {\n        initializeRovingTabIndex(walkerRef.current);\n      }\n    },\n    [walkerRef, initializeRovingTabIndex],\n  );\n\n  const 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        walkerRef.current.currentElement = data.target;\n        return walkerRef.current.parentElement();\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        return walkerRef.current.firstChild();\n      case treeDataTypes.End:\n        walkerRef.current.currentElement = walkerRef.current.root;\n        return lastChildRecursive(walkerRef.current);\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  function navigate(data: TreeNavigationData_unstable, focusOptions?: FocusOptions) {\n    const nextElement = getNextElement(data);\n    if (nextElement) {\n      rove(nextElement, focusOptions);\n    }\n    return nextElement;\n  }\n  return {\n    navigate,\n    treeRef: useMergedRefs(walkerRootRef, rootRefCallback) as React.RefCallback<HTMLElement>,\n    forceUpdateRovingTabIndex,\n  } as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n  let lastElement: HTMLElement | null = null;\n  let nextElement: HTMLElement | null = null;\n  while ((nextElement = walker.lastChild())) {\n    lastElement = nextElement;\n  }\n  return lastElement;\n}\n\nconst queryActions = (target: HTMLElement) =>\n  target.querySelector<HTMLElement>(\n    `:scope > .${treeItemLayoutClassNames.root} > .${treeItemLayoutClassNames.actions}`,\n  );\n"],"names":["nextTypeAheadElement","treeDataTypes","useRovingTabIndex","React","useHTMLElementWalkerRef","useMergedRefs","treeItemLayoutClassNames","useFocusFinders","useTreeNavigation","navigationMode","rove","initialize","initializeRovingTabIndex","forceUpdate","forceUpdateRovingTabIndex","findFirstFocusable","walkerRef","rootRef","walkerRootRef","rootRefCallback","useCallback","root","current","getNextElement","data","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","actions","queryActions","contains","ownerDocument","activeElement","parentElement","ArrowRight","focus","firstChild","End","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","focusOptions","treeRef","walker","lastElement","lastChild","querySelector"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tree",
-  "version": "9.16.0",
+  "version": "9.16.2",
   "description": "Tree component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -13,20 +13,20 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-aria": "^9.17.11",
-    "@fluentui/react-avatar": "^9.11.1",
-    "@fluentui/react-button": "^9.9.1",
-    "@fluentui/react-checkbox": "^9.6.1",
-    "@fluentui/react-context-selector": "^9.2.16",
+    "@fluentui/react-aria": "^9.17.13",
+    "@fluentui/react-avatar": "^9.11.3",
+    "@fluentui/react-button": "^9.10.0",
+    "@fluentui/react-checkbox": "^9.6.3",
+    "@fluentui/react-context-selector": "^9.2.18",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-motion-components-preview": "^0.15.4",
-    "@fluentui/react-motion": "^9.15.0",
-    "@fluentui/react-radio": "^9.6.2",
+    "@fluentui/react-motion-components-preview": "^0.15.6",
+    "@fluentui/react-motion": "^9.16.1",
+    "@fluentui/react-radio": "^9.6.4",
     "@fluentui/react-shared-contexts": "^9.26.2",
-    "@fluentui/react-tabster": "^9.26.14",
+    "@fluentui/react-tabster": "^9.26.16",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.3",
-    "@fluentui/react-jsx-runtime": "^9.4.2",
+    "@fluentui/react-utilities": "^9.26.5",
+    "@fluentui/react-jsx-runtime": "^9.4.4",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },