@fluentui/react-tree 9.7.2 → 9.7.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +31 -2
- package/lib/FlatTree.js.map +1 -1
- package/lib/FlatTreeItem.js.map +1 -1
- package/lib/Tree.js.map +1 -1
- package/lib/TreeItem.js.map +1 -1
- package/lib/TreeItemLayout.js.map +1 -1
- package/lib/TreeItemPersonaLayout.js.map +1 -1
- package/lib/components/FlatTree/FlatTree.js.map +1 -1
- package/lib/components/FlatTree/FlatTree.types.js.map +1 -1
- package/lib/components/FlatTree/index.js.map +1 -1
- package/lib/components/FlatTree/renderFlatTree.js.map +1 -1
- package/lib/components/FlatTree/useFlatControllableCheckedItems.js +1 -1
- package/lib/components/FlatTree/useFlatControllableCheckedItems.js.map +1 -1
- package/lib/components/FlatTree/useFlatTree.js.map +1 -1
- package/lib/components/FlatTree/useFlatTreeContextValues.js.map +1 -1
- package/lib/components/FlatTree/useHeadlessFlatTree.js.map +1 -1
- package/lib/components/FlatTreeItem/FlatTreeItem.js.map +1 -1
- package/lib/components/FlatTreeItem/FlatTreeItem.types.js +3 -1
- package/lib/components/FlatTreeItem/FlatTreeItem.types.js.map +1 -1
- package/lib/components/FlatTreeItem/index.js.map +1 -1
- package/lib/components/Tree/Tree.js.map +1 -1
- package/lib/components/Tree/Tree.types.js +3 -1
- package/lib/components/Tree/Tree.types.js.map +1 -1
- package/lib/components/Tree/index.js.map +1 -1
- package/lib/components/Tree/renderTree.js.map +1 -1
- package/lib/components/Tree/useNestedControllableCheckedItems.js.map +1 -1
- package/lib/components/Tree/useTree.js.map +1 -1
- package/lib/components/Tree/useTreeContextValues.js.map +1 -1
- package/lib/components/TreeItem/TreeItem.js.map +1 -1
- package/lib/components/TreeItem/TreeItem.types.js.map +1 -1
- package/lib/components/TreeItem/index.js.map +1 -1
- package/lib/components/TreeItem/renderTreeItem.js.map +1 -1
- package/lib/components/TreeItem/useTreeItem.js.map +1 -1
- package/lib/components/TreeItem/useTreeItemContextValues.js.map +1 -1
- package/lib/components/TreeItemChevron.js.map +1 -1
- package/lib/components/TreeItemLayout/TreeItemLayout.js.map +1 -1
- package/lib/components/TreeItemLayout/TreeItemLayout.types.js +3 -1
- package/lib/components/TreeItemLayout/TreeItemLayout.types.js.map +1 -1
- package/lib/components/TreeItemLayout/index.js.map +1 -1
- package/lib/components/TreeItemLayout/renderTreeItemLayout.js.map +1 -1
- package/lib/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js +3 -1
- package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/index.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js.map +1 -1
- package/lib/components/TreeProvider.js.map +1 -1
- package/lib/contexts/index.js.map +1 -1
- package/lib/contexts/subtreeContext.js.map +1 -1
- package/lib/contexts/treeContext.js.map +1 -1
- package/lib/contexts/treeItemContext.js.map +1 -1
- package/lib/hooks/useControllableOpenItems.js.map +1 -1
- package/lib/hooks/useFlatTreeNavigation.js.map +1 -1
- package/lib/hooks/useHTMLElementWalkerRef.js.map +1 -1
- package/lib/hooks/useRootTree.js.map +1 -1
- package/lib/hooks/useRovingTabIndexes.js +3 -1
- package/lib/hooks/useRovingTabIndexes.js.map +1 -1
- package/lib/hooks/useSubtree.js.map +1 -1
- package/lib/hooks/useTreeNavigation.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/ImmutableMap.js.map +1 -1
- package/lib/utils/ImmutableSet.js.map +1 -1
- package/lib/utils/assert.js.map +1 -1
- package/lib/utils/createCheckedItems.js.map +1 -1
- package/lib/utils/createHTMLElementWalker.js.map +1 -1
- package/lib/utils/createHeadlessTree.js.map +1 -1
- package/lib/utils/createOpenItems.js.map +1 -1
- package/lib/utils/flattenTree.js.map +1 -1
- package/lib/utils/getTreeItemValueFromElement.js.map +1 -1
- package/lib/utils/nextTypeAheadElement.js.map +1 -1
- package/lib/utils/normalizeOpenItems.js.map +1 -1
- package/lib/utils/tokens.js.map +1 -1
- package/lib/utils/treeItemFilter.js.map +1 -1
- package/lib-commonjs/FlatTree.js.map +1 -1
- package/lib-commonjs/FlatTreeItem.js.map +1 -1
- package/lib-commonjs/Tree.js.map +1 -1
- package/lib-commonjs/TreeItem.js.map +1 -1
- package/lib-commonjs/TreeItemLayout.js.map +1 -1
- package/lib-commonjs/TreeItemPersonaLayout.js.map +1 -1
- package/lib-commonjs/components/FlatTree/FlatTree.js.map +1 -1
- package/lib-commonjs/components/FlatTree/FlatTree.types.js.map +1 -1
- package/lib-commonjs/components/FlatTree/index.js.map +1 -1
- package/lib-commonjs/components/FlatTree/renderFlatTree.js.map +1 -1
- package/lib-commonjs/components/FlatTree/useFlatControllableCheckedItems.js +4 -4
- package/lib-commonjs/components/FlatTree/useFlatControllableCheckedItems.js.map +1 -1
- package/lib-commonjs/components/FlatTree/useFlatTree.js.map +1 -1
- package/lib-commonjs/components/FlatTree/useFlatTreeContextValues.js.map +1 -1
- package/lib-commonjs/components/FlatTree/useFlatTreeStyles.styles.js.map +1 -1
- package/lib-commonjs/components/FlatTree/useHeadlessFlatTree.js.map +1 -1
- package/lib-commonjs/components/FlatTreeItem/FlatTreeItem.js.map +1 -1
- package/lib-commonjs/components/FlatTreeItem/FlatTreeItem.types.js +3 -1
- package/lib-commonjs/components/FlatTreeItem/FlatTreeItem.types.js.map +1 -1
- package/lib-commonjs/components/FlatTreeItem/index.js.map +1 -1
- package/lib-commonjs/components/Tree/Tree.js.map +1 -1
- package/lib-commonjs/components/Tree/Tree.types.js +3 -1
- package/lib-commonjs/components/Tree/Tree.types.js.map +1 -1
- package/lib-commonjs/components/Tree/index.js.map +1 -1
- package/lib-commonjs/components/Tree/renderTree.js.map +1 -1
- package/lib-commonjs/components/Tree/useNestedControllableCheckedItems.js +3 -3
- package/lib-commonjs/components/Tree/useNestedControllableCheckedItems.js.map +1 -1
- package/lib-commonjs/components/Tree/useTree.js.map +1 -1
- package/lib-commonjs/components/Tree/useTreeContextValues.js.map +1 -1
- package/lib-commonjs/components/Tree/useTreeStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TreeItem/TreeItem.js.map +1 -1
- package/lib-commonjs/components/TreeItem/TreeItem.types.js.map +1 -1
- package/lib-commonjs/components/TreeItem/index.js.map +1 -1
- package/lib-commonjs/components/TreeItem/renderTreeItem.js.map +1 -1
- package/lib-commonjs/components/TreeItem/useTreeItem.js.map +1 -1
- package/lib-commonjs/components/TreeItem/useTreeItemContextValues.js.map +1 -1
- package/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TreeItemChevron.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.types.js +3 -1
- package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.types.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/index.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/renderTreeItemLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js +3 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/index.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TreeProvider.js.map +1 -1
- package/lib-commonjs/contexts/index.js.map +1 -1
- package/lib-commonjs/contexts/subtreeContext.js.map +1 -1
- package/lib-commonjs/contexts/treeContext.js.map +1 -1
- package/lib-commonjs/contexts/treeItemContext.js.map +1 -1
- package/lib-commonjs/hooks/useControllableOpenItems.js +3 -3
- package/lib-commonjs/hooks/useControllableOpenItems.js.map +1 -1
- package/lib-commonjs/hooks/useFlatTreeNavigation.js.map +1 -1
- package/lib-commonjs/hooks/useHTMLElementWalkerRef.js.map +1 -1
- package/lib-commonjs/hooks/useRootTree.js.map +1 -1
- package/lib-commonjs/hooks/useRovingTabIndexes.js +3 -1
- package/lib-commonjs/hooks/useRovingTabIndexes.js.map +1 -1
- package/lib-commonjs/hooks/useSubtree.js.map +1 -1
- package/lib-commonjs/hooks/useTreeNavigation.js.map +1 -1
- package/lib-commonjs/index.js +65 -65
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/ImmutableMap.js.map +1 -1
- package/lib-commonjs/utils/ImmutableSet.js.map +1 -1
- package/lib-commonjs/utils/assert.js.map +1 -1
- package/lib-commonjs/utils/createCheckedItems.js.map +1 -1
- package/lib-commonjs/utils/createHTMLElementWalker.js.map +1 -1
- package/lib-commonjs/utils/createHeadlessTree.js.map +1 -1
- package/lib-commonjs/utils/createOpenItems.js.map +1 -1
- package/lib-commonjs/utils/flattenTree.js.map +1 -1
- package/lib-commonjs/utils/getTreeItemValueFromElement.js.map +1 -1
- package/lib-commonjs/utils/nextTypeAheadElement.js.map +1 -1
- package/lib-commonjs/utils/normalizeOpenItems.js.map +1 -1
- package/lib-commonjs/utils/tokens.js +3 -3
- package/lib-commonjs/utils/tokens.js.map +1 -1
- package/lib-commonjs/utils/treeItemFilter.js.map +1 -1
- package/package.json +11 -11
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderTreeItemPersonaLayout.
|
|
1
|
+
{"version":3,"sources":["renderTreeItemPersonaLayout.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type {\n TreeItemPersonaLayoutState,\n TreeItemPersonaLayoutContextValues,\n TreeItemPersonaLayoutSlots,\n} from './TreeItemPersonaLayout.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (\n state: TreeItemPersonaLayoutState,\n contextValues: TreeItemPersonaLayoutContextValues,\n) => {\n assertSlots<TreeItemPersonaLayoutSlots>(state);\n\n return (\n <state.root>\n {state.expandIcon && <state.expandIcon />}\n {state.selector && <state.selector />}\n <AvatarContextProvider value={contextValues.avatar}>\n <state.media />\n </AvatarContextProvider>\n <state.main />\n {state.description && <state.description />}\n <ButtonContextProvider value={state.buttonContextValue}>\n {state.actions && <state.actions />}\n {state.aside && <state.aside />}\n </ButtonContextProvider>\n </state.root>\n );\n};\n"],"names":["renderTreeItemPersonaLayout_unstable","state","contextValues","assertSlots","_jsxs","root","expandIcon","_jsx","selector","AvatarContextProvider","value","avatar","media","main","description","ButtonContextProvider","buttonContextValue","actions","aside"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;4BAbb;gCAC4B;6BAMU;6BACA;AAK/B,MAAMA,uCAAuC,CAClDC,OACAC;IAEAC,IAAAA,2BAAAA,EAAwCF;IAExC,OAAA,WAAA,GACEG,IAAAA,gBAAA,EAACH,MAAMI,IAAI,EAAA;;YACRJ,MAAMK,UAAU,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACN,MAAMK,UAAU,EAAA,CAAA;YACrCL,MAAMO,QAAQ,IAAA,WAAA,GAAID,IAAAA,eAAA,EAACN,MAAMO,QAAQ,EAAA,CAAA;0BAClCD,IAAAA,eAAA,EAACE,kCAAAA,EAAAA;gBAAsBC,OAAOR,cAAcS,MAAM;0BAChD,WAAA,GAAAJ,IAAAA,eAAA,EAACN,MAAMW,KAAK,EAAA,CAAA;;0BAEdL,IAAAA,eAAA,EAACN,MAAMY,IAAI,EAAA,CAAA;YACVZ,MAAMa,WAAW,IAAA,WAAA,GAAIP,IAAAA,eAAA,EAACN,MAAMa,WAAW,EAAA,CAAA;0BACxCV,IAAAA,gBAAA,EAACW,kCAAAA,EAAAA;gBAAsBL,OAAOT,MAAMe,kBAAkB;;oBACnDf,MAAMgB,OAAO,IAAA,WAAA,GAAIV,IAAAA,eAAA,EAACN,MAAMgB,OAAO,EAAA,CAAA;oBAC/BhB,MAAMiB,KAAK,IAAA,WAAA,GAAIX,IAAAA,eAAA,EAACN,MAAMiB,KAAK,EAAA,CAAA;;;;;AAIpC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTreeItemPersonaLayout.
|
|
1
|
+
{"version":3,"sources":["useTreeItemPersonaLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { slot } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n props: TreeItemPersonaLayoutProps,\n ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n const { media, children, main, description } = props;\n\n const treeItemLayoutState = useTreeItemLayout_unstable(\n {\n ...props,\n iconBefore: null,\n iconAfter: null,\n },\n ref,\n );\n\n const size = useTreeContext_unstable(ctx => ctx.size);\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n return {\n ...treeItemLayoutState,\n components: {\n expandIcon: 'div',\n main: 'div',\n description: 'div',\n root: 'div',\n media: 'div',\n aside: 'div',\n actions: 'div',\n // Casting here to a union between checkbox and radio\n selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\n },\n avatarSize: treeAvatarSize[size],\n main: slot.always(main, { defaultProps: { children }, elementType: 'div' }),\n media: slot.always(media, { elementType: 'div' }),\n description: slot.optional(description, { elementType: 'div' }),\n };\n};\n"],"names":["useTreeItemPersonaLayout_unstable","props","ref","media","children","main","description","treeItemLayoutState","useTreeItemLayout_unstable","iconBefore","iconAfter","size","useTreeContext_unstable","ctx","selectionMode","components","expandIcon","root","aside","actions","selector","Checkbox","Radio","avatarSize","treeAvatarSize","slot","always","defaultProps","elementType","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkBaA;;;eAAAA;;;;iEAlBU;gCAEF;0BACmB;wBACT;mCACY;+BACH;4BACN;AAW3B,MAAMA,oCAAoC,CAC/CC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGL;IAE/C,MAAMM,sBAAsBC,IAAAA,6CAAAA,EAC1B;QACE,GAAGP,KAAK;QACRQ,YAAY;QACZC,WAAW;IACb,GACAR;IAGF,MAAMS,OAAOC,IAAAA,iCAAAA,EAAwBC,CAAAA,MAAOA,IAAIF,IAAI;IACpD,MAAMG,gBAAgBF,IAAAA,iCAAAA,EAAwBC,CAAAA,MAAOA,IAAIC,aAAa;IAEtE,OAAO;QACL,GAAGP,mBAAmB;QACtBQ,YAAY;YACVC,YAAY;YACZX,MAAM;YACNC,aAAa;YACbW,MAAM;YACNd,OAAO;YACPe,OAAO;YACPC,SAAS;YACT,qDAAqD;YACrDC,UAAWN,kBAAkB,gBAAgBO,uBAAAA,GAAWC,iBAAAA;QAC1D;QACAC,YAAYC,sBAAc,CAACb,KAAK;QAChCN,MAAMoB,oBAAAA,CAAKC,MAAM,CAACrB,MAAM;YAAEsB,cAAc;gBAAEvB;YAAS;YAAGwB,aAAa;QAAM;QACzEzB,OAAOsB,oBAAAA,CAAKC,MAAM,CAACvB,OAAO;YAAEyB,aAAa;QAAM;QAC/CtB,aAAamB,oBAAAA,CAAKI,QAAQ,CAACvB,aAAa;YAAEsB,aAAa;QAAM;IAC/D;AACF"}
|
package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTreeItemPersonaLayoutContextValues.
|
|
1
|
+
{"version":3,"sources":["useTreeItemPersonaLayoutContextValues.ts"],"sourcesContent":["import type { AvatarContextValue } from '@fluentui/react-avatar';\nimport * as React from 'react';\nimport type { TreeItemPersonaLayoutState, TreeItemPersonaLayoutContextValues } from './TreeItemPersonaLayout.types';\n\nexport function useTreeItemPersonaLayoutContextValues_unstable(\n state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutContextValues {\n const { avatarSize } = state;\n\n const avatar = React.useMemo<AvatarContextValue>(() => ({ size: avatarSize }), [avatarSize]);\n\n return { avatar };\n}\n"],"names":["useTreeItemPersonaLayoutContextValues_unstable","state","avatarSize","avatar","React","useMemo","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIgBA;;;eAAAA;;;;iEAHO;AAGhB,SAASA,+CACdC,KAAiC;IAEjC,MAAM,EAAEC,UAAU,EAAE,GAAGD;IAEvB,MAAME,SAASC,OAAMC,OAAO,CAAqB,IAAO,CAAA;YAAEC,MAAMJ;QAAW,CAAA,GAAI;QAACA;KAAW;IAE3F,OAAO;QAAEC;IAAO;AAClB"}
|
package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTreeItemPersonaLayoutStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemPersonaLayoutClassNames = {\n root: 'fui-TreeItemPersonaLayout',\n media: 'fui-TreeItemPersonaLayout__media',\n description: 'fui-TreeItemPersonaLayout__description',\n 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 = /*#__PURE__*/__resetStyles(\"r1r98egg\", null, [\".r1r98egg{display:grid;grid-template-rows:1fr auto;grid-template-columns:auto auto 1fr auto;grid-template-areas:\\\"expandIcon media main aside\\\" \\\"expandIcon media description aside\\\";align-items:center;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}\", \".r1r98egg:active{color:var(--colorNeutralForeground2Pressed);background-color:var(--colorSubtleBackgroundPressed);}\", \".r1r98egg:active .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}\", \".r1r98egg:hover{color:var(--colorNeutralForeground2Hover);background-color:var(--colorSubtleBackgroundHover);}\", \".r1r98egg:hover .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}\"]);\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n leaf: {\n uwmqm3: [\"f1k1erfc\", \"faevyjx\"]\n },\n branch: {\n uwmqm3: [\"fo100m9\", \"f6yw3pu\"]\n }\n}, {\n d: [\".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}\", \".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}\", \".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}\", \".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}\"]\n});\n/**\n * Styles for the expand icon slot\n */\nconst useMediaBaseStyles = /*#__PURE__*/__resetStyles(\"rkcde6g\", \"r1e986zr\", [\".rkcde6g{display:flex;align-items:center;width:32px;height:32px;grid-area:media;padding:0 var(--spacingHorizontalXS) 0 var(--spacingHorizontalXXS);}\", \".r1e986zr{display:flex;align-items:center;width:32px;height:32px;grid-area:media;padding:0 var(--spacingHorizontalXXS) 0 var(--spacingHorizontalXS);}\"]);\nconst useMainBaseStyles = /*#__PURE__*/__resetStyles(\"r1qjtz99\", \"rob5fcp\", [\".r1qjtz99{grid-area:main;padding:var(--spacingVerticalMNudge) var(--spacingHorizontalXS) var(--spacingVerticalMNudge) var(--spacingHorizontalS);}\", \".rob5fcp{grid-area:main;padding:var(--spacingVerticalMNudge) var(--spacingHorizontalS) var(--spacingVerticalMNudge) var(--spacingHorizontalXS);}\"]);\nconst useMainStyles = /*#__PURE__*/__styles({\n withDescription: {\n Byoj8tv: 0,\n uwmqm3: 0,\n z189sj: 0,\n z8tnut: 0,\n B0ocmuz: [\"f1625emv\", \"f5y9hxg\"]\n }\n}, {\n d: [[\".f1625emv{padding:var(--spacingVerticalMNudge) var(--spacingHorizontalXS) 0 var(--spacingHorizontalS);}\", {\n p: -1\n }], [\".f5y9hxg{padding:var(--spacingVerticalMNudge) var(--spacingHorizontalS) 0 var(--spacingHorizontalXS);}\", {\n p: -1\n }]]\n});\nconst useDescriptionBaseStyles = /*#__PURE__*/__resetStyles(\"r1bnsn1b\", \"r13x7gq\", [\".r1bnsn1b{grid-area:description;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);padding:0 var(--spacingHorizontalXS) var(--spacingVerticalMNudge) var(--spacingHorizontalS);}\", \".r13x7gq{grid-area:description;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);padding:0 var(--spacingHorizontalS) var(--spacingVerticalMNudge) var(--spacingHorizontalXS);}\"]);\n/**\n * Styles for the action icon slot\n */\nconst useActionsBaseStyles = /*#__PURE__*/__resetStyles(\"rzvs2in\", \"r17h8a29\", [\".rzvs2in{display:flex;margin-left:auto;position:relative;z-index:1;grid-area:aside;padding:0 var(--spacingHorizontalS);}\", \".r17h8a29{display:flex;margin-right:auto;position:relative;z-index:1;grid-area:aside;padding:0 var(--spacingHorizontalS);}\"]);\n/**\n * Styles for the action icon slot\n */\nconst useAsideBaseStyles = /*#__PURE__*/__resetStyles(\"r1825u21\", \"rezy0yk\", [\".r1825u21{display:flex;margin-left:auto;align-items:center;z-index:0;grid-area:aside;padding:0 var(--spacingHorizontalM);gap:var(--spacingHorizontalXS);}\", \".rezy0yk{display:flex;margin-right:auto;align-items:center;z-index:0;grid-area:aside;padding:0 var(--spacingHorizontalM);gap:var(--spacingHorizontalXS);}\"]);\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconBaseStyles = /*#__PURE__*/__resetStyles(\"rn61xvs\", null, [\".rn61xvs{display:flex;align-items:center;justify-content:center;min-width:24px;box-sizing:border-box;color:var(--colorNeutralForeground3);grid-area:expandIcon;flex:0 0 auto;padding:var(--spacingVerticalXS) 0;}\"]);\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */\nexport const useTreeItemPersonaLayoutStyles_unstable = state => {\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 const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootBaseStyles, rootStyles[itemType], state.root.className);\n state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);\n if (state.main) {\n state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainBaseStyles, state.description && mainStyles.withDescription, state.main.className);\n }\n if (state.description) {\n state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionBaseStyles, state.description.className);\n }\n if (state.actions) {\n state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsBaseStyles, state.actions.className);\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(treeItemPersonaLayoutClassNames.expandIcon, expandIconBaseStyles, state.expandIcon.className);\n }\n if (state.selector) {\n state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);\n }\n return state;\n};\n//# sourceMappingURL=useTreeItemPersonaLayoutStyles.styles.js.map"],"names":["treeItemPersonaLayoutClassNames","useTreeItemPersonaLayoutStyles_unstable","root","media","description","main","expandIcon","aside","actions","selector","useRootBaseStyles","__resetStyles","useRootStyles","__styles","leaf","uwmqm3","branch","d","useMediaBaseStyles","useMainBaseStyles","useMainStyles","withDescription","Byoj8tv","z189sj","z8tnut","B0ocmuz","p","useDescriptionBaseStyles","useActionsBaseStyles","useAsideBaseStyles","useExpandIconBaseStyles","state","rootBaseStyles","rootStyles","mediaBaseStyles","descriptionBaseStyles","actionsBaseStyles","asideBaseStyles","expandIconBaseStyles","mainBaseStyles","mainStyles","itemType","useTreeItemContext_unstable","ctx","className","mergeClasses"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useTreeItemPersonaLayoutStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemPersonaLayoutClassNames = {\n root: 'fui-TreeItemPersonaLayout',\n media: 'fui-TreeItemPersonaLayout__media',\n description: 'fui-TreeItemPersonaLayout__description',\n 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});\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 'use no memo';\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 itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootBaseStyles, rootStyles[itemType], state.root.className);\n state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);\n if (state.main) {\n state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainBaseStyles, state.description && mainStyles.withDescription, state.main.className);\n }\n if (state.description) {\n state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionBaseStyles, state.description.className);\n }\n if (state.actions) {\n state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsBaseStyles, state.actions.className);\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(treeItemPersonaLayoutClassNames.expandIcon, expandIconBaseStyles, state.expandIcon.className);\n }\n if (state.selector) {\n state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);\n }\n return state;\n};\n"],"names":["treeItemPersonaLayoutClassNames","useTreeItemPersonaLayoutStyles_unstable","root","media","description","main","expandIcon","aside","actions","selector","useRootBaseStyles","__resetStyles","useRootStyles","__styles","leaf","uwmqm3","branch","d","useMediaBaseStyles","useMainBaseStyles","useMainStyles","withDescription","Byoj8tv","z189sj","z8tnut","B0ocmuz","p","useDescriptionBaseStyles","useActionsBaseStyles","useAsideBaseStyles","useExpandIconBaseStyles","state","rootBaseStyles","rootStyles","mediaBaseStyles","descriptionBaseStyles","actionsBaseStyles","asideBaseStyles","expandIconBaseStyles","mainBaseStyles","mainStyles","itemType","useTreeItemContext_unstable","ctx","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["TreeProvider.
|
|
1
|
+
{"version":3,"sources":["TreeProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SubtreeContext, SubtreeContextValue, TreeContextValue, TreeContext } from '../contexts';\n\n/**\n * @internal\n */\nconst rootSubtreeContextValue: SubtreeContextValue = {\n level: 1,\n contextType: 'subtree',\n};\n\nexport const TreeProvider = (props: React.ProviderProps<TreeContextValue | SubtreeContextValue>) => {\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"],"names":["TreeProvider","rootSubtreeContextValue","level","contextType","props","value","React","createElement","SubtreeContext","Provider","children","TreeContext","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;0BAC4D;AAEnF;;CAEC,GACD,MAAMC,0BAA+C;IACnDC,OAAO;IACPC,aAAa;AACf;AAEO,MAAMH,eAAe,CAACI;IAC3B,IAAIA,MAAMC,KAAK,CAACF,WAAW,KAAK,WAAW;QACzC,OAAA,WAAA,GAAOG,OAAAC,aAAA,CAACC,wBAAAA,CAAeC,QAAQ,EAAA;YAACJ,OAAOD,MAAMC,KAAK;WAAGD,MAAMM,QAAQ;IACrE;IACA,OAAA,WAAA,GACEJ,OAAAC,aAAA,CAACI,qBAAAA,CAAYF,QAAQ,EAAA;QAACJ,OAAOD,MAAMC,KAAK;qBACtCC,OAAAC,aAAA,CAACC,wBAAAA,CAAeC,QAAQ,EAAA;QAACJ,OAAOJ;OAA0BG,MAAMM,QAAQ;AAG9E;AAEAV,aAAaY,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './treeContext';\nexport * from './subtreeContext';\nexport * from './treeItemContext';\n"],"names":[],"rangeMappings":";;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["subtreeContext.
|
|
1
|
+
{"version":3,"sources":["subtreeContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type SubtreeContextValue = {\n contextType: 'subtree';\n level: number;\n};\n\n/**\n * @internal\n */\nconst defaultSubTreeContextValue: SubtreeContextValue = {\n level: 0,\n contextType: 'subtree',\n};\n\n/**\n * @internal\n */\nexport const SubtreeContext: React.Context<SubtreeContextValue> = React.createContext<SubtreeContextValue | undefined>(\n undefined,\n) as React.Context<SubtreeContextValue>;\n\nexport const useSubtreeContext_unstable = () => {\n return React.useContext(SubtreeContext) ?? defaultSubTreeContextValue;\n};\n"],"names":["SubtreeContext","useSubtreeContext_unstable","defaultSubTreeContextValue","level","contextType","React","createContext","undefined","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAkBaA,cAAAA;eAAAA;;IAIAC,0BAAAA;eAAAA;;;;iEAtBU;AAOvB;;CAEC,GACD,MAAMC,6BAAkD;IACtDC,OAAO;IACPC,aAAa;AACf;AAKO,MAAMJ,+BAAqDK,OAAMC,aAAa,CACnFC;AAGK,MAAMN,6BAA6B;QACjCI;IAAP,OAAOA,CAAAA,oBAAAA,OAAMG,UAAU,CAACR,eAAAA,MAAAA,QAAjBK,sBAAAA,KAAAA,IAAAA,oBAAoCH;AAC7C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["treeContext.
|
|
1
|
+
{"version":3,"sources":["treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType, TreeItemValue } from '../TreeItem';\nimport type { SelectionMode, DistributiveOmit } from '@fluentui/react-utilities';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\nimport { TreeCheckedChangeData, TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\n\nexport type TreeContextValue = {\n 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};\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 appearance: 'subtle',\n size: 'medium',\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":["TreeContext","useTreeContext_unstable","defaultTreeContextValue","level","contextType","treeType","selectionMode","openItems","ImmutableSet","empty","checkedItems","ImmutableMap","requestTreeResponse","noop","appearance","size","createContext","undefined","selector","useContextSelector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAkDaA,WAAAA;eAAAA;;IAIAC,uBAAAA;eAAAA;;;sCAtD+D;8BAG/C;8BACA;AAwB7B;;CAEC,GACD,MAAMC,0BAA4C;IAChDC,OAAO;IACPC,aAAa;IACbC,UAAU;IACVC,eAAe;IACfC,WAAWC,0BAAAA,CAAaC,KAAK;IAC7BC,cAAcC,0BAAAA,CAAaF,KAAK;IAChCG,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACR;AAEA,SAASF;AACP,QAAQ,GACV;AAKO,MAAMb,cAAyCgB,IAAAA,mCAAAA,EACpDC;AAGK,MAAMhB,0BAA0B,CAAIiB,WACzCC,IAAAA,wCAAAA,EAAmBnB,aAAa,CAACoB,MAAMlB,uBAAuB,GAAKgB,SAASE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["treeItemContext.
|
|
1
|
+
{"version":3,"sources":["treeItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { TreeItemType, TreeItemValue } from '../TreeItem';\nimport { headlessTreeRootId } from '../utils/createHeadlessTree';\nimport { 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>;\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\nexport const TreeItemContext: Context<TreeItemContextValue | undefined> = createContext<\n TreeItemContextValue | undefined\n>(undefined);\n\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = <T>(selector: ContextSelector<TreeItemContextValue, T>): T =>\n useContextSelector(TreeItemContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["TreeItemContext","TreeItemProvider","useTreeItemContext_unstable","defaultContextValue","value","headlessTreeRootId","selectionRef","React","createRef","layoutRef","treeItemRef","subtreeRef","actionsRef","expandIconRef","isActionsVisible","isAsideVisible","itemType","open","checked","createContext","undefined","Provider","selector","useContextSelector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA8CaA,eAAAA;eAAAA;;IAIYC,gBAAgB;eAAhBA;;IACZC,2BAAAA;eAAAA;;;;iEAnDU;sCACqD;oCAEzC;AA4BnC,MAAMC,sBAA4C;IAChDC,OAAOC,sCAAAA;IACPC,4BAAcC,OAAMC,SAAS;IAC7BC,yBAAWF,OAAMC,SAAS;IAC1BE,2BAAaH,OAAMC,SAAS;IAC5BG,0BAAYJ,OAAMC,SAAS;IAC3BI,0BAAYL,OAAMC,SAAS;IAC3BK,6BAAeN,OAAMC,SAAS;IAC9BM,kBAAkB;IAClBC,gBAAgB;IAChBC,UAAU;IACVC,MAAM;IACNC,SAAS;AACX;AAEO,MAAMlB,kBAA6DmB,IAAAA,mCAAAA,EAExEC;AAEK,MAAM,EAAEC,UAAUpB,gBAAgB,EAAE,GAAGD;AACvC,MAAME,8BAA8B,CAAIoB,WAC7CC,IAAAA,wCAAAA,EAAmBvB,iBAAiB,CAACwB,MAAMrB,mBAAmB,GAAKmB,SAASE"}
|
|
@@ -9,11 +9,11 @@ function _export(target, all) {
|
|
|
9
9
|
});
|
|
10
10
|
}
|
|
11
11
|
_export(exports, {
|
|
12
|
-
useControllableOpenItems: function() {
|
|
13
|
-
return useControllableOpenItems;
|
|
14
|
-
},
|
|
15
12
|
createNextOpenItems: function() {
|
|
16
13
|
return createNextOpenItems;
|
|
14
|
+
},
|
|
15
|
+
useControllableOpenItems: function() {
|
|
16
|
+
return useControllableOpenItems;
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
19
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useControllableOpenItems.
|
|
1
|
+
{"version":3,"sources":["useControllableOpenItems.ts"],"sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport type { TreeItemValue } from '../components/TreeItem/TreeItem.types';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { TreeOpenChangeData, TreeProps } from '../Tree';\n\n/**\n * @internal\n */\nexport function useControllableOpenItems(props: Pick<TreeProps, 'openItems' | 'defaultOpenItems'>) {\n return useControllableState({\n state: React.useMemo(() => props.openItems && createOpenItems(props.openItems), [props.openItems]),\n defaultState: props.defaultOpenItems && (() => createOpenItems(props.defaultOpenItems)),\n initialState: ImmutableSet.empty,\n });\n}\n\n/**\n * @internal\n */\nexport function createNextOpenItems(\n data: Pick<TreeOpenChangeData, 'value' | 'open'>,\n previousOpenItems: ImmutableSet<TreeItemValue>,\n): ImmutableSet<TreeItemValue> {\n if (data.value === null) {\n return previousOpenItems;\n }\n const previousOpenItemsHasId = previousOpenItems.has(data.value);\n if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {\n return previousOpenItems;\n }\n const nextOpenItems = ImmutableSet.create(previousOpenItems);\n return data.open ? nextOpenItems.add(data.value) : nextOpenItems.delete(data.value);\n}\n"],"names":["createNextOpenItems","useControllableOpenItems","props","useControllableState","state","React","useMemo","openItems","createOpenItems","defaultState","defaultOpenItems","initialState","ImmutableSet","empty","data","previousOpenItems","value","previousOpenItemsHasId","has","open","nextOpenItems","create","add","delete"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAqBgBA,mBAAAA;eAAAA;;IAXAC,wBAAAA;eAAAA;;;;gCAVqB;iEACd;8BACM;iCAEG;AAMzB,SAASA,yBAAyBC,KAAwD;IAC/F,OAAOC,IAAAA,oCAAAA,EAAqB;QAC1BC,OAAOC,OAAMC,OAAO,CAAC,IAAMJ,MAAMK,SAAS,IAAIC,IAAAA,gCAAAA,EAAgBN,MAAMK,SAAS,GAAG;YAACL,MAAMK,SAAS;SAAC;QACjGE,cAAcP,MAAMQ,gBAAgB,IAAK,CAAA,IAAMF,IAAAA,gCAAAA,EAAgBN,MAAMQ,gBAAgB,CAAA;QACrFC,cAAcC,0BAAAA,CAAaC,KAAK;IAClC;AACF;AAKO,SAASb,oBACdc,IAAgD,EAChDC,iBAA8C;IAE9C,IAAID,KAAKE,KAAK,KAAK,MAAM;QACvB,OAAOD;IACT;IACA,MAAME,yBAAyBF,kBAAkBG,GAAG,CAACJ,KAAKE,KAAK;IAC/D,IAAIF,KAAKK,IAAI,GAAGF,yBAAyB,CAACA,wBAAwB;QAChE,OAAOF;IACT;IACA,MAAMK,gBAAgBR,0BAAAA,CAAaS,MAAM,CAACN;IAC1C,OAAOD,KAAKK,IAAI,GAAGC,cAAcE,GAAG,CAACR,KAAKE,KAAK,IAAII,cAAcG,MAAM,CAACT,KAAKE,KAAK;AACpF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useFlatTreeNavigation.
|
|
1
|
+
{"version":3,"sources":["useFlatTreeNavigation.ts"],"sourcesContent":["import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../Tree';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { TreeItemValue } from '../TreeItem';\nimport { dataTreeItemValueAttrName } from '../utils/getTreeItemValueFromElement';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\n\nexport function useFlatTreeNavigation() {\n 'use no memo';\n\n const { walkerRef, rootRef: walkerRootRef } = useHTMLElementWalkerRef();\n const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();\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 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 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 { navigate, rootRef: useMergedRefs<HTMLDivElement>(walkerRootRef, rootRefCallback) } 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"],"names":["useFlatTreeNavigation","walkerRef","rootRef","walkerRootRef","useHTMLElementWalkerRef","rove","initialize","initializeRovingTabIndex","useRovingTabIndex","rootRefCallback","React","useCallback","root","current","getNextElement","data","type","treeDataTypes","Click","target","TypeAhead","currentElement","nextTypeAheadElement","event","key","ArrowLeft","nextElement","parentElement","parentValue","process","env","NODE_ENV","console","warn","ArrowRight","firstChild","ariaLevel","Number","getAttribute","End","lastChild","Home","ArrowDown","ArrowUp","previousElement","navigate","useEventCallback","useMergedRefs","treeWalker","nextElementAriaPosInSet","nextElementAriaLevel","targetAriaLevel","undefined","querySelector","dataTreeItemValueAttrName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useHTMLElementWalkerRef.
|
|
1
|
+
{"version":3,"sources":["useHTMLElementWalkerRef.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { HTMLElementWalker, createHTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../utils/treeItemFilter';\n\nexport function useHTMLElementWalkerRef() {\n const { targetDocument } = useFluent_unstable();\n\n const walkerRef = React.useRef<HTMLElementWalker>();\n\n const rootRef: React.Ref<HTMLElement> = React.useCallback(\n root => {\n walkerRef.current =\n targetDocument && root ? createHTMLElementWalker(root, targetDocument, treeItemFilter) : undefined;\n },\n [targetDocument],\n );\n return { walkerRef, rootRef } as const;\n}\n"],"names":["useHTMLElementWalkerRef","targetDocument","useFluent_unstable","walkerRef","React","useRef","rootRef","useCallback","root","current","createHTMLElementWalker","treeItemFilter","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKgBA;;;eAAAA;;;;iEALO;qCACY;yCACwB;gCAC5B;AAExB,SAASA;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAAA;IAE3B,MAAMC,YAAYC,OAAMC,MAAM;IAE9B,MAAMC,UAAkCF,OAAMG,WAAW,CACvDC,CAAAA;QACEL,UAAUM,OAAO,GACfR,kBAAkBO,OAAOE,IAAAA,gDAAAA,EAAwBF,MAAMP,gBAAgBU,8BAAAA,IAAkBC;IAC7F,GACA;QAACX;KAAe;IAElB,OAAO;QAAEE;QAAWG;IAAQ;AAC9B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useRootTree.
|
|
1
|
+
{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TreeCheckedChangeData, TreeProps, TreeState } from '../Tree';\nimport * as React from 'react';\nimport { TreeContextValue, TreeItemRequest } from '../contexts/treeContext';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { createNextOpenItems } from './useControllableOpenItems';\n\n/**\n * Create the state required to render the root level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useRootTree(\n props: TreeProps,\n ref: React.Ref<HTMLElement>,\n): Omit<TreeState & TreeContextValue, 'treeType'> {\n warnIfNoProperPropsRootTree(props);\n\n const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n\n const openItems = React.useMemo(() => createOpenItems(props.openItems), [props.openItems]);\n const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n\n const requestOpenChange = (request: Extract<TreeItemRequest, { requestType: 'open' }>) => {\n props.onOpenChange?.(request.event, {\n ...request,\n openItems: createNextOpenItems(request, openItems).dangerouslyGetInternalSet_unstable(),\n });\n };\n\n const requestCheckedChange = (request: Extract<TreeItemRequest, { requestType: 'selection' }>) => {\n if (selectionMode === 'none') {\n return;\n }\n props.onCheckedChange?.(request.event, {\n ...request,\n selectionMode,\n checkedItems: checkedItems.dangerouslyGetInternalMap_unstable(),\n // Casting is required here due to selection | multiselection spreading the union problem\n } as TreeCheckedChangeData);\n };\n\n const requestNavigation = (request: Extract<TreeItemRequest, { requestType: 'navigate' }>) => {\n let isScrollPrevented = false;\n props.onNavigation?.(request.event, {\n ...request,\n preventScroll: () => {\n isScrollPrevented = true;\n },\n isScrollPrevented: () => isScrollPrevented,\n });\n switch (request.type) {\n case treeDataTypes.ArrowDown:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.Home:\n case treeDataTypes.End:\n // stop the default behavior of the event\n // which is to scroll the page\n request.event.preventDefault();\n }\n };\n\n const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n switch (request.requestType) {\n case 'navigate':\n return requestNavigation(request);\n case 'open':\n return requestOpenChange(request);\n case 'selection':\n return requestCheckedChange(request);\n }\n });\n\n return {\n components: { root: 'div' },\n contextType: 'root',\n selectionMode,\n open: true,\n appearance,\n size,\n level: 1,\n openItems,\n checkedItems,\n requestTreeResponse,\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n role: 'tree',\n 'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n if (process.env.NODE_ENV === 'development') {\n if (!props['aria-label'] && !props['aria-labelledby']) {\n // eslint-disable-next-line no-console\n console.warn(/* #__DE-INDENT__ */ `\n @fluentui/react-tree [useRootTree]:\n Tree must have either a \\`aria-label\\` or \\`aria-labelledby\\` property defined\n `);\n }\n }\n}\n"],"names":["useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","React","useMemo","createOpenItems","checkedItems","createCheckedItems","requestOpenChange","request","onOpenChange","event","createNextOpenItems","dangerouslyGetInternalSet_unstable","requestCheckedChange","onCheckedChange","dangerouslyGetInternalMap_unstable","requestNavigation","isScrollPrevented","onNavigation","preventScroll","type","treeDataTypes","ArrowDown","ArrowUp","Home","End","preventDefault","requestTreeResponse","useEventCallback","requestType","components","root","contextType","open","level","slot","always","getIntrinsicElementProps","role","undefined","elementType","process","env","NODE_ENV","console","warn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -10,13 +10,15 @@ Object.defineProperty(exports, "useRovingTabIndex", {
|
|
|
10
10
|
});
|
|
11
11
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
|
+
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
13
14
|
const _reacttabster = require("@fluentui/react-tabster");
|
|
14
15
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
16
|
function useRovingTabIndex() {
|
|
16
17
|
const currentElementRef = _react.useRef(null);
|
|
17
18
|
const walkerRef = _react.useRef(null);
|
|
19
|
+
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
18
20
|
_react.useEffect(()=>{
|
|
19
|
-
if (currentElementRef.current === null && walkerRef.current) {
|
|
21
|
+
if ((currentElementRef.current === null || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body.contains(currentElementRef.current))) && walkerRef.current) {
|
|
20
22
|
initialize(walkerRef.current);
|
|
21
23
|
}
|
|
22
24
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useRovingTabIndexes.
|
|
1
|
+
{"version":3,"sources":["useRovingTabIndexes.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { useFocusedElementChange } from '@fluentui/react-tabster';\nimport { elementContains } from '@fluentui/react-utilities';\n\n/**\n * @internal\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n */\nexport function useRovingTabIndex() {\n const currentElementRef = React.useRef<HTMLElement | null>(null);\n const walkerRef = React.useRef<HTMLElementWalker | null>(null);\n const { targetDocument } = useFluent();\n\n React.useEffect(() => {\n if (\n (currentElementRef.current === null || !targetDocument?.body.contains(currentElementRef.current)) &&\n walkerRef.current\n ) {\n initialize(walkerRef.current);\n }\n });\n\n useFocusedElementChange(element => {\n if (\n element?.getAttribute('role') === 'treeitem' &&\n walkerRef.current &&\n elementContains(walkerRef.current.root, element)\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 return {\n rove,\n initialize,\n };\n}\n"],"names":["useRovingTabIndex","currentElementRef","React","useRef","walkerRef","targetDocument","useFluent","useEffect","current","body","contains","initialize","useFocusedElementChange","element","getAttribute","elementContains","root","rove","useCallback","walker","currentElement","tabbableChild","firstChild","tabIndex","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","nextElement","focusOptions","focus"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUgBA;;;eAAAA;;;;iEAVO;qCACyB;8BAER;gCACR;AAMzB,SAASA;IACd,MAAMC,oBAAoBC,OAAMC,MAAM,CAAqB;IAC3D,MAAMC,YAAYF,OAAMC,MAAM,CAA2B;IACzD,MAAM,EAAEE,cAAc,EAAE,GAAGC,IAAAA,uCAAAA;IAE3BJ,OAAMK,SAAS,CAAC;QACd,IACE,AAACN,CAAAA,kBAAkBO,OAAO,KAAK,QAAQ,CAACH,CAAAA,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBI,IAAI,CAACC,QAAQ,CAACT,kBAAkBO,OAAO,CAAA,CAAA,KAC/FJ,UAAUI,OAAO,EACjB;YACAG,WAAWP,UAAUI,OAAO;QAC9B;IACF;IAEAI,IAAAA,qCAAAA,EAAwBC,CAAAA;QACtB,IACEA,CAAAA,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASC,YAAY,CAAC,OAAA,MAAY,cAClCV,UAAUI,OAAO,IACjBO,IAAAA,+BAAAA,EAAgBX,UAAUI,OAAO,CAACQ,IAAI,EAAEH,UACxC;YACAI,KAAKJ;QACP;IACF;IAEA,MAAMF,aAAaT,OAAMgB,WAAW,CAAC,CAACC;QACpCf,UAAUI,OAAO,GAAGW;QACpBA,OAAOC,cAAc,GAAGD,OAAOH,IAAI;QACnC,IAAIK,gBAAgBF,OAAOG,UAAU,CAACT,CAAAA,UACpCA,QAAQU,QAAQ,KAAK,IAAIC,WAAWC,aAAa,GAAGD,WAAWE,WAAW;QAE5EP,OAAOC,cAAc,GAAGD,OAAOH,IAAI;QACnCK,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,gBAAAA,gBAAkBF,OAAOG,UAAU;QACnC,IAAI,CAACD,eAAe;YAClB;QACF;QACAA,cAAcE,QAAQ,GAAG;QACzBtB,kBAAkBO,OAAO,GAAGa;QAC5B,IAAIM,cAAkC;QACtC,MAAO,AAACA,CAAAA,cAAcR,OAAOQ,WAAW,EAAA,KAAOA,gBAAgBN,cAAe;YAC5EM,YAAYJ,QAAQ,GAAG,CAAC;QAC1B;IACF,GAAG,EAAE;IACL,MAAMN,OAAOf,OAAMgB,WAAW,CAAC,CAACS,aAA0BC;QACxD,IAAI,CAAC3B,kBAAkBO,OAAO,EAAE;YAC9B;QACF;QACAP,kBAAkBO,OAAO,CAACe,QAAQ,GAAG,CAAC;QACtCI,YAAYJ,QAAQ,GAAG;QACvBI,YAAYE,KAAK,CAACD;QAClB3B,kBAAkBO,OAAO,GAAGmB;IAC9B,GAAG,EAAE;IAEL,OAAO;QACLV;QACAN;IACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSubtree.
|
|
1
|
+
{"version":3,"sources":["useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { SubtreeContextValue, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useSubtree(\n props: TreeProps,\n ref: React.Ref<HTMLElement>,\n): Omit<TreeState & SubtreeContextValue, 'treeType'> {\n const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n\n const { level: parentLevel } = useSubtreeContext_unstable();\n\n const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n return {\n contextType: 'subtree',\n open,\n components: {\n root: 'div',\n },\n level: parentLevel + 1,\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, subtreeRef) as React.Ref<HTMLDivElement>,\n role: 'group',\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n}\n"],"names":["useSubtree","props","ref","subtreeRef","useTreeItemContext_unstable","ctx","level","parentLevel","useSubtreeContext_unstable","open","contextType","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWgBA;;;eAAAA;;;;iEAXO;uBAEsE;gCAC/B;AAQvD,SAASA,WACdC,KAAgB,EAChBC,GAA2B;IAE3B,MAAMC,aAAaC,IAAAA,kCAAAA,EAA4BC,CAAAA,MAAOA,IAAIF,UAAU;IAEpE,MAAM,EAAEG,OAAOC,WAAW,EAAE,GAAGC,IAAAA,iCAAAA;IAE/B,MAAMC,OAAOL,IAAAA,kCAAAA,EAA4BC,CAAAA,MAAOA,IAAII,IAAI;IAExD,OAAO;QACLC,aAAa;QACbD;QACAE,YAAY;YACVC,MAAM;QACR;QACAN,OAAOC,cAAc;QACrBK,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5Fb,KAAKc,IAAAA,6BAAAA,EAAcd,KAAKC;YACxBc,MAAM;YACN,GAAGhB,KAAK;QACV,IACA;YAAEiB,aAAa;QAAM;IAEzB;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTreeNavigation.
|
|
1
|
+
{"version":3,"sources":["useTreeNavigation.ts"],"sourcesContent":["import { TreeNavigationData_unstable } from '../components/Tree/Tree.types';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport * as React from 'react';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalkerRef';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\n/**\n * @internal\n */\nexport function useTreeNavigation() {\n 'use no memo';\n\n const { rove, initialize: initializeRovingTabIndex } = useRovingTabIndex();\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 walkerRef.current.currentElement = data.target;\n return walkerRef.current.parentElement();\n case treeDataTypes.ArrowRight:\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 }\n return {\n navigate,\n treeRef: useMergedRefs(walkerRootRef, rootRefCallback) as React.RefCallback<HTMLElement>,\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"],"names":["useTreeNavigation","rove","initialize","initializeRovingTabIndex","useRovingTabIndex","walkerRef","rootRef","walkerRootRef","useHTMLElementWalkerRef","rootRefCallback","React","useCallback","root","current","getNextElement","data","type","treeDataTypes","Click","target","TypeAhead","currentElement","nextTypeAheadElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","focusOptions","treeRef","useMergedRefs","walker","lastElement","lastChild"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYgBA;;;eAAAA;;;;sCAXqB;wBACP;qCACI;iEAEX;yCACiB;gCACV;AAKvB,SAASA;IACd;IAEA,MAAM,EAAEC,IAAI,EAAEC,YAAYC,wBAAwB,EAAE,GAAGC,IAAAA,sCAAAA;IACvD,MAAM,EAAEC,SAAS,EAAEC,SAASC,aAAa,EAAE,GAAGC,IAAAA,gDAAAA;IAE9C,MAAMC,kBAAkDC,OAAMC,WAAW,CACvEC,CAAAA;QACE,IAAIA,QAAQP,UAAUQ,OAAO,EAAE;YAC7BV,yBAAyBE,UAAUQ,OAAO;QAC5C;IACF,GACA;QAACR;QAAWF;KAAyB;IAGvC,MAAMW,iBAAiB,CAACC;QACtB,IAAI,CAACV,UAAUQ,OAAO,EAAE;YACtB,OAAO;QACT;QACA,OAAQE,KAAKC,IAAI;YACf,KAAKC,qBAAAA,CAAcC,KAAK;gBACtB,OAAOH,KAAKI,MAAM;YACpB,KAAKF,qBAAAA,CAAcG,SAAS;gBAC1Bf,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOG,IAAAA,0CAAAA,EAAqBjB,UAAUQ,OAAO,EAAEE,KAAKQ,KAAK,CAACC,GAAG;YAC/D,KAAKP,qBAAAA,CAAcQ,SAAS;gBAC1BpB,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACa,aAAa;YACxC,KAAKT,qBAAAA,CAAcU,UAAU;gBAC3BtB,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACe,UAAU;YACrC,KAAKX,qBAAAA,CAAcY,GAAG;gBACpBxB,UAAUQ,OAAO,CAACQ,cAAc,GAAGhB,UAAUQ,OAAO,CAACD,IAAI;gBACzD,OAAOkB,mBAAmBzB,UAAUQ,OAAO;YAC7C,KAAKI,qBAAAA,CAAcc,IAAI;gBACrB1B,UAAUQ,OAAO,CAACQ,cAAc,GAAGhB,UAAUQ,OAAO,CAACD,IAAI;gBACzD,OAAOP,UAAUQ,OAAO,CAACe,UAAU;YACrC,KAAKX,qBAAAA,CAAce,SAAS;gBAC1B3B,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACoB,WAAW;YACtC,KAAKhB,qBAAAA,CAAciB,OAAO;gBACxB7B,UAAUQ,OAAO,CAACQ,cAAc,GAAGN,KAAKI,MAAM;gBAC9C,OAAOd,UAAUQ,OAAO,CAACsB,eAAe;QAC5C;IACF;IACA,SAASC,SAASrB,IAAiC,EAAEsB,YAA2B;QAC9E,MAAMJ,cAAcnB,eAAeC;QACnC,IAAIkB,aAAa;YACfhC,KAAKgC,aAAaI;QACpB;IACF;IACA,OAAO;QACLD;QACAE,SAASC,IAAAA,6BAAAA,EAAchC,eAAeE;IACxC;AACF;AAEA,SAASqB,mBAAmBU,MAAyB;IACnD,IAAIC,cAAkC;IACtC,IAAIR,cAAkC;IACtC,MAAQA,cAAcO,OAAOE,SAAS,GAAK;QACzCD,cAAcR;IAChB;IACA,OAAOQ;AACT"}
|