@fluentui/react-tree 9.0.0-beta.28 → 9.0.0-beta.29
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.json +70 -1
- package/CHANGELOG.md +20 -2
- package/dist/index.d.ts +9 -4
- package/lib/components/FlatTree/useFlatTreeNavigation.js +22 -25
- package/lib/components/FlatTree/useFlatTreeNavigation.js.map +1 -1
- package/lib/components/FlatTree/useFlatTreeStyles.styles.js +3 -13
- package/lib/components/FlatTree/useFlatTreeStyles.styles.js.map +1 -1
- package/lib/components/FlatTree/useHeadlessFlatTree.js +30 -13
- package/lib/components/FlatTree/useHeadlessFlatTree.js.map +1 -1
- package/lib/components/Tree/Tree.types.js.map +1 -1
- package/lib/components/Tree/useTree.js +16 -3
- package/lib/components/Tree/useTree.js.map +1 -1
- package/lib/components/Tree/useTreeNavigation.js +7 -14
- package/lib/components/Tree/useTreeNavigation.js.map +1 -1
- package/lib/components/Tree/useTreeStyles.styles.js +4 -10
- package/lib/components/Tree/useTreeStyles.styles.js.map +1 -1
- package/lib/components/TreeItem/useTreeItem.js +12 -5
- package/lib/components/TreeItem/useTreeItem.js.map +1 -1
- package/lib/components/TreeItem/useTreeItemContextValues.js +2 -1
- package/lib/components/TreeItem/useTreeItemContextValues.js.map +1 -1
- package/lib/components/TreeItemLayout/useTreeItemLayout.js +2 -3
- package/lib/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
- package/lib/contexts/treeContext.js.map +1 -1
- package/lib/contexts/treeItemContext.js +4 -2
- package/lib/contexts/treeItemContext.js.map +1 -1
- package/lib/hooks/useRootTree.js +14 -11
- package/lib/hooks/useRootTree.js.map +1 -1
- package/lib/hooks/useRovingTabIndexes.js +8 -28
- package/lib/hooks/useRovingTabIndexes.js.map +1 -1
- package/lib/hooks/useSubtree.js +3 -3
- package/lib/hooks/useSubtree.js.map +1 -1
- package/lib/{hooks/useHTMLElementWalker.js → utils/createHTMLElementWalker.js} +0 -15
- package/lib/utils/createHTMLElementWalker.js.map +1 -0
- package/lib/utils/createHeadlessTree.js +85 -62
- package/lib/utils/createHeadlessTree.js.map +1 -1
- package/lib/utils/nextTypeAheadElement.js.map +1 -1
- package/lib-commonjs/components/FlatTree/useFlatTreeNavigation.js +21 -24
- package/lib-commonjs/components/FlatTree/useFlatTreeNavigation.js.map +1 -1
- package/lib-commonjs/components/FlatTree/useFlatTreeStyles.styles.js +2 -19
- package/lib-commonjs/components/FlatTree/useFlatTreeStyles.styles.js.map +1 -1
- package/lib-commonjs/components/FlatTree/useHeadlessFlatTree.js +29 -12
- package/lib-commonjs/components/FlatTree/useHeadlessFlatTree.js.map +1 -1
- package/lib-commonjs/components/Tree/useTree.js +16 -3
- package/lib-commonjs/components/Tree/useTree.js.map +1 -1
- package/lib-commonjs/components/Tree/useTreeNavigation.js +7 -14
- package/lib-commonjs/components/Tree/useTreeNavigation.js.map +1 -1
- package/lib-commonjs/components/Tree/useTreeStyles.styles.js +3 -15
- package/lib-commonjs/components/Tree/useTreeStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TreeItem/useTreeItem.js +11 -4
- package/lib-commonjs/components/TreeItem/useTreeItem.js.map +1 -1
- package/lib-commonjs/components/TreeItem/useTreeItemContextValues.js +2 -1
- package/lib-commonjs/components/TreeItem/useTreeItemContextValues.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js +2 -3
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
- package/lib-commonjs/contexts/treeItemContext.js +4 -2
- package/lib-commonjs/contexts/treeItemContext.js.map +1 -1
- package/lib-commonjs/hooks/useRootTree.js +11 -8
- package/lib-commonjs/hooks/useRootTree.js.map +1 -1
- package/lib-commonjs/hooks/useRovingTabIndexes.js +8 -28
- package/lib-commonjs/hooks/useRovingTabIndexes.js.map +1 -1
- package/lib-commonjs/hooks/useSubtree.js.map +1 -1
- package/lib-commonjs/{hooks/useHTMLElementWalker.js → utils/createHTMLElementWalker.js} +3 -25
- package/lib-commonjs/utils/createHTMLElementWalker.js.map +1 -0
- package/lib-commonjs/utils/createHeadlessTree.js +86 -63
- package/lib-commonjs/utils/createHeadlessTree.js.map +1 -1
- package/package.json +8 -8
- package/lib/hooks/useHTMLElementWalker.js.map +0 -1
- package/lib-commonjs/hooks/useHTMLElementWalker.js.map +0 -1
|
@@ -1,17 +1,10 @@
|
|
|
1
|
-
import { useMergedRefs } from '@fluentui/react-utilities';
|
|
2
1
|
import { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';
|
|
3
2
|
import { treeDataTypes } from '../../utils/tokens';
|
|
4
3
|
import { treeItemFilter } from '../../utils/treeItemFilter';
|
|
5
4
|
import { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';
|
|
6
|
-
import { useHTMLElementWalkerRef } from '../../hooks/useHTMLElementWalker';
|
|
7
5
|
export function useTreeNavigation() {
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
const getNextElement = (data)=>{
|
|
11
|
-
if (!walkerRef.current) {
|
|
12
|
-
return;
|
|
13
|
-
}
|
|
14
|
-
const treeItemWalker = walkerRef.current;
|
|
6
|
+
const { rove , initialize } = useRovingTabIndex(treeItemFilter);
|
|
7
|
+
const getNextElement = (data, treeItemWalker)=>{
|
|
15
8
|
switch(data.type){
|
|
16
9
|
case treeDataTypes.Click:
|
|
17
10
|
return data.target;
|
|
@@ -38,16 +31,16 @@ export function useTreeNavigation() {
|
|
|
38
31
|
return treeItemWalker.previousElement();
|
|
39
32
|
}
|
|
40
33
|
};
|
|
41
|
-
function navigate(data) {
|
|
42
|
-
const nextElement = getNextElement(data);
|
|
34
|
+
function navigate(data, walker) {
|
|
35
|
+
const nextElement = getNextElement(data, walker);
|
|
43
36
|
if (nextElement) {
|
|
44
37
|
rove(nextElement);
|
|
45
38
|
}
|
|
46
39
|
}
|
|
47
|
-
return
|
|
40
|
+
return {
|
|
48
41
|
navigate,
|
|
49
|
-
|
|
50
|
-
|
|
42
|
+
initialize
|
|
43
|
+
};
|
|
51
44
|
}
|
|
52
45
|
function lastChildRecursive(walker) {
|
|
53
46
|
let lastElement = null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTreeNavigation.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["useTreeNavigation.ts"],"sourcesContent":["import { TreeNavigationData_unstable } from './Tree.types';\nimport { nextTypeAheadElement } from '../../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndexes';\nimport { HTMLElementWalker } from '../../utils/createHTMLElementWalker';\n\nexport function useTreeNavigation() {\n const { rove, initialize } = useRovingTabIndex(treeItemFilter);\n\n const getNextElement = (data: TreeNavigationData_unstable, treeItemWalker: HTMLElementWalker) => {\n switch (data.type) {\n case treeDataTypes.Click:\n return data.target;\n case treeDataTypes.TypeAhead:\n treeItemWalker.currentElement = data.target;\n return nextTypeAheadElement(treeItemWalker, data.event.key);\n case treeDataTypes.ArrowLeft:\n treeItemWalker.currentElement = data.target;\n return treeItemWalker.parentElement();\n case treeDataTypes.ArrowRight:\n treeItemWalker.currentElement = data.target;\n return treeItemWalker.firstChild();\n case treeDataTypes.End:\n treeItemWalker.currentElement = treeItemWalker.root;\n return lastChildRecursive(treeItemWalker);\n case treeDataTypes.Home:\n treeItemWalker.currentElement = treeItemWalker.root;\n return treeItemWalker.firstChild();\n case treeDataTypes.ArrowDown:\n treeItemWalker.currentElement = data.target;\n return treeItemWalker.nextElement();\n case treeDataTypes.ArrowUp:\n treeItemWalker.currentElement = data.target;\n return treeItemWalker.previousElement();\n }\n };\n function navigate(data: TreeNavigationData_unstable, walker: HTMLElementWalker) {\n const nextElement = getNextElement(data, walker);\n if (nextElement) {\n rove(nextElement);\n }\n }\n return { navigate, initialize } 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":["nextTypeAheadElement","treeDataTypes","treeItemFilter","useRovingTabIndex","useTreeNavigation","rove","initialize","getNextElement","data","treeItemWalker","type","Click","target","TypeAhead","currentElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","root","lastChildRecursive","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","walker","lastElement","lastChild"],"mappings":"AACA,SAASA,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,iBAAiB,QAAQ,kCAAkC;AAGpE,OAAO,SAASC,oBAAoB;IAClC,MAAM,EAAEC,KAAI,EAAEC,WAAU,EAAE,GAAGH,kBAAkBD;IAE/C,MAAMK,iBAAiB,CAACC,MAAmCC,iBAAsC;QAC/F,OAAQD,KAAKE,IAAI;YACf,KAAKT,cAAcU,KAAK;gBACtB,OAAOH,KAAKI,MAAM;YACpB,KAAKX,cAAcY,SAAS;gBAC1BJ,eAAeK,cAAc,GAAGN,KAAKI,MAAM;gBAC3C,OAAOZ,qBAAqBS,gBAAgBD,KAAKO,KAAK,CAACC,GAAG;YAC5D,KAAKf,cAAcgB,SAAS;gBAC1BR,eAAeK,cAAc,GAAGN,KAAKI,MAAM;gBAC3C,OAAOH,eAAeS,aAAa;YACrC,KAAKjB,cAAckB,UAAU;gBAC3BV,eAAeK,cAAc,GAAGN,KAAKI,MAAM;gBAC3C,OAAOH,eAAeW,UAAU;YAClC,KAAKnB,cAAcoB,GAAG;gBACpBZ,eAAeK,cAAc,GAAGL,eAAea,IAAI;gBACnD,OAAOC,mBAAmBd;YAC5B,KAAKR,cAAcuB,IAAI;gBACrBf,eAAeK,cAAc,GAAGL,eAAea,IAAI;gBACnD,OAAOb,eAAeW,UAAU;YAClC,KAAKnB,cAAcwB,SAAS;gBAC1BhB,eAAeK,cAAc,GAAGN,KAAKI,MAAM;gBAC3C,OAAOH,eAAeiB,WAAW;YACnC,KAAKzB,cAAc0B,OAAO;gBACxBlB,eAAeK,cAAc,GAAGN,KAAKI,MAAM;gBAC3C,OAAOH,eAAemB,eAAe;QACzC;IACF;IACA,SAASC,SAASrB,IAAiC,EAAEsB,MAAyB,EAAE;QAC9E,MAAMJ,cAAcnB,eAAeC,MAAMsB;QACzC,IAAIJ,aAAa;YACfrB,KAAKqB;QACP,CAAC;IACH;IACA,OAAO;QAAEG;QAAUvB;IAAW;AAChC,CAAC;AAED,SAASiB,mBAAmBO,MAAyB,EAAE;IACrD,IAAIC,cAAkC,IAAI;IAC1C,IAAIL,cAAkC,IAAI;IAC1C,MAAQA,cAAcI,OAAOE,SAAS,GAAK;QACzCD,cAAcL;IAChB;IACA,OAAOK;AACT"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __styles, mergeClasses
|
|
1
|
+
import { __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
export const treeClassNames = {
|
|
4
4
|
root: 'fui-Tree'
|
|
@@ -10,20 +10,14 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
10
10
|
Belr9w4: "f1j0q4x9"
|
|
11
11
|
},
|
|
12
12
|
subtree: {
|
|
13
|
-
|
|
14
|
-
Bnnss6s: "f1neuvcm",
|
|
15
|
-
xawz: "f1s4axba",
|
|
16
|
-
Ijaq50: "f1na4k6z",
|
|
17
|
-
Br312pm: "fwt6ga",
|
|
18
|
-
nk6f5a: "fi45nfw",
|
|
19
|
-
Bw0ie65: "f10ort2y"
|
|
13
|
+
z8tnut: "fclwglc"
|
|
20
14
|
}
|
|
21
15
|
}, {
|
|
22
|
-
d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}", ".
|
|
16
|
+
d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}"]
|
|
23
17
|
});
|
|
24
18
|
export const useTreeStyles_unstable = state => {
|
|
25
19
|
const styles = useStyles();
|
|
26
|
-
const isSubTree = state.level >
|
|
20
|
+
const isSubTree = state.level > 1;
|
|
27
21
|
state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);
|
|
28
22
|
return state;
|
|
29
23
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","tokens","treeClassNames","root","useStyles","mc9l5x","Beiy3e4","Belr9w4","subtree","z8tnut","d","useTreeStyles_unstable","state","styles","isSubTree","level","className"],"sources":["useTreeStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n root: 'fui-Tree'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS\n },\n subtree: {\n paddingTop: tokens.spacingVerticalXXS\n }\n});\nexport const useTreeStyles_unstable = (state)=>{\n const styles = useStyles();\n const isSubTree = state.level > 1;\n state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CASjB,CAAC;AACF,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1B,MAAMU,SAAS,GAAGF,KAAK,CAACG,KAAK,GAAG,CAAC;EACjCH,KAAK,CAACT,IAAI,CAACa,SAAS,GAAGhB,YAAY,CAACE,cAAc,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAEW,SAAS,IAAID,MAAM,CAACL,OAAO,EAAEI,KAAK,CAACT,IAAI,CAACa,SAAS,CAAC;EACxH,OAAOJ,KAAK;AAChB,CAAC"}
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { getNativeElementProps, useId, useMergedRefs } from '@fluentui/react-utilities';
|
|
3
3
|
import { useEventCallback } from '@fluentui/react-utilities';
|
|
4
4
|
import { elementContains } from '@fluentui/react-portal';
|
|
5
|
-
import { useTreeContext_unstable } from '../../contexts/index';
|
|
5
|
+
import { useTreeContext_unstable, useTreeItemContext_unstable } from '../../contexts/index';
|
|
6
6
|
import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
|
|
7
7
|
import { Space } from '@fluentui/keyboard-keys';
|
|
8
8
|
import { treeDataTypes } from '../../utils/tokens';
|
|
@@ -33,9 +33,14 @@ import { treeDataTypes } from '../../utils/tokens';
|
|
|
33
33
|
const subtreeRef = React.useRef(null);
|
|
34
34
|
const selectionRef = React.useRef(null);
|
|
35
35
|
const open = useTreeContext_unstable((ctx)=>ctx.openItems.has(value));
|
|
36
|
-
var _ctx_checkedItems_get;
|
|
37
|
-
const checked = useTreeContext_unstable((ctx)=>(_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false);
|
|
38
36
|
const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);
|
|
37
|
+
const parentChecked = useTreeItemContext_unstable((ctx)=>ctx.checked);
|
|
38
|
+
const checked = useTreeContext_unstable((ctx)=>{
|
|
39
|
+
if (selectionMode === 'multiselect' && typeof parentChecked === 'boolean') {
|
|
40
|
+
return parentChecked;
|
|
41
|
+
}
|
|
42
|
+
return ctx.checkedItems.get(value);
|
|
43
|
+
});
|
|
39
44
|
const handleClick = useEventCallback((event)=>{
|
|
40
45
|
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
41
46
|
if (event.isDefaultPrevented()) {
|
|
@@ -131,13 +136,15 @@ import { treeDataTypes } from '../../utils/tokens';
|
|
|
131
136
|
value,
|
|
132
137
|
itemType,
|
|
133
138
|
type: 'Change',
|
|
134
|
-
target: event.currentTarget
|
|
139
|
+
target: event.currentTarget,
|
|
140
|
+
checked: checked === 'mixed' ? true : !checked
|
|
135
141
|
});
|
|
136
142
|
});
|
|
137
143
|
const isBranch = itemType === 'branch';
|
|
138
144
|
return {
|
|
139
145
|
value,
|
|
140
146
|
open,
|
|
147
|
+
checked,
|
|
141
148
|
subtreeRef,
|
|
142
149
|
layoutRef,
|
|
143
150
|
selectionRef,
|
|
@@ -157,7 +164,7 @@ import { treeDataTypes } from '../../utils/tokens';
|
|
|
157
164
|
role: 'treeitem',
|
|
158
165
|
'aria-level': level,
|
|
159
166
|
[dataTreeItemValueAttrName]: value,
|
|
160
|
-
'aria-checked': selectionMode === 'multiselect' ? checked : undefined,
|
|
167
|
+
'aria-checked': selectionMode === 'multiselect' ? checked === 'mixed' ? undefined : checked !== null && checked !== void 0 ? checked : false : undefined,
|
|
161
168
|
'aria-selected': selectionMode === 'single' ? checked : undefined,
|
|
162
169
|
'aria-expanded': isBranch ? open : undefined,
|
|
163
170
|
onClick: handleClick,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n\n // note, if the value is not externally provided,\n // then selection and expansion will not work properly\n const value = useId('fuiTreeItemValue-', props.value?.toString());\n\n const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n\n const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n\n const [isActionsVisible, setActionsVisible] = React.useState(false);\n const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n const handleActionsRef = (actionsElement: HTMLDivElement | null) => {\n setAsideVisible(actionsElement === null);\n };\n\n const actionsRef = React.useRef<HTMLDivElement>(null);\n const expandIconRef = React.useRef<HTMLDivElement>(null);\n const layoutRef = React.useRef<HTMLDivElement>(null);\n const subtreeRef = React.useRef<HTMLDivElement>(null);\n const selectionRef = React.useRef<HTMLInputElement>(null);\n\n const open = useTreeContext_unstable(ctx => ctx.openItems.has(value));\n const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n onClick?.(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n if (isEventFromActions) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (isEventFromSubtree) {\n return;\n }\n const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target as Node);\n if (isEventFromSelection) {\n return;\n }\n const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n requestTreeResponse({\n event,\n value,\n itemType,\n target: event.currentTarget,\n type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n });\n });\n\n const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n // Ignore keyboard events that do not originate from the current tree item.\n if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n return;\n }\n switch (event.key) {\n case Space:\n if (selectionMode !== 'none') {\n selectionRef.current?.click();\n event.preventDefault();\n }\n return;\n case treeDataTypes.End:\n case treeDataTypes.Home:\n case treeDataTypes.Enter:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.ArrowDown:\n case treeDataTypes.ArrowLeft:\n case treeDataTypes.ArrowRight:\n return requestTreeResponse({ event, target: event.currentTarget, value, itemType, type: event.key });\n }\n const isTypeAheadCharacter =\n event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n if (isTypeAheadCharacter) {\n requestTreeResponse({ event, target: event.currentTarget, value, itemType, type: treeDataTypes.TypeAhead });\n }\n });\n\n const handleActionsVisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n const isTargetFromSubtree = Boolean(\n subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n );\n if (!isTargetFromSubtree) {\n setActionsVisible(true);\n }\n });\n\n const handleActionsInvisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n const isTargetFromSubtree = Boolean(\n subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n );\n const isRelatedTargetFromActions = Boolean(\n actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n );\n if (isRelatedTargetFromActions) {\n return setActionsVisible(true);\n }\n if (!isTargetFromSubtree) {\n return setActionsVisible(false);\n }\n });\n\n const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (isEventFromSubtree) {\n return;\n }\n requestTreeResponse({ event, value, itemType, type: 'Change', target: event.currentTarget });\n });\n\n const isBranch = itemType === 'branch';\n return {\n value,\n open,\n subtreeRef,\n layoutRef,\n selectionRef,\n expandIconRef,\n actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n itemType,\n level,\n components: {\n root: 'div',\n },\n isAsideVisible,\n isActionsVisible,\n root: getNativeElementProps(as, {\n tabIndex: -1,\n ...rest,\n ref,\n role: 'treeitem',\n 'aria-level': level,\n [dataTreeItemValueAttrName]: value,\n 'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n 'aria-selected': selectionMode === 'single' ? checked : undefined,\n 'aria-expanded': isBranch ? open : undefined,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onMouseOver: handleActionsVisible,\n onFocus: handleActionsVisible,\n onMouseOut: handleActionsInvisible,\n onBlur: handleActionsInvisible,\n onChange: handleChange,\n }),\n };\n}\n"],"names":["React","getNativeElementProps","useId","useMergedRefs","useEventCallback","elementContains","useTreeContext_unstable","dataTreeItemValueAttrName","Space","treeDataTypes","useTreeItem_unstable","props","ref","contextLevel","ctx","level","value","toString","onClick","onKeyDown","as","itemType","rest","requestTreeResponse","isActionsVisible","setActionsVisible","useState","isAsideVisible","setAsideVisible","handleActionsRef","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","checked","checkedItems","get","selectionMode","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isEventFromSelection","isFromExpandIcon","currentTarget","type","ExpandIconClick","Click","handleKeyDown","key","click","preventDefault","End","Home","Enter","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","handleChange","isBranch","components","root","tabIndex","role","undefined","onMouseOver","onFocus","onMouseOut","onBlur","onChange"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../../contexts/index';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n\n // note, if the value is not externally provided,\n // then selection and expansion will not work properly\n const value = useId('fuiTreeItemValue-', props.value?.toString());\n\n const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n\n const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n\n const [isActionsVisible, setActionsVisible] = React.useState(false);\n const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n const handleActionsRef = (actionsElement: HTMLDivElement | null) => {\n setAsideVisible(actionsElement === null);\n };\n\n const actionsRef = React.useRef<HTMLDivElement>(null);\n const expandIconRef = React.useRef<HTMLDivElement>(null);\n const layoutRef = React.useRef<HTMLDivElement>(null);\n const subtreeRef = React.useRef<HTMLDivElement>(null);\n const selectionRef = React.useRef<HTMLInputElement>(null);\n\n const open = useTreeContext_unstable(ctx => ctx.openItems.has(value));\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n const parentChecked = useTreeItemContext_unstable(ctx => ctx.checked);\n const checked = useTreeContext_unstable(ctx => {\n if (selectionMode === 'multiselect' && typeof parentChecked === 'boolean') {\n return parentChecked;\n }\n return ctx.checkedItems.get(value);\n });\n\n const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n onClick?.(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n if (isEventFromActions) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (isEventFromSubtree) {\n return;\n }\n const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target as Node);\n if (isEventFromSelection) {\n return;\n }\n const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n requestTreeResponse({\n event,\n value,\n itemType,\n target: event.currentTarget,\n type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n });\n });\n\n const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n // Ignore keyboard events that do not originate from the current tree item.\n if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n return;\n }\n switch (event.key) {\n case Space:\n if (selectionMode !== 'none') {\n selectionRef.current?.click();\n event.preventDefault();\n }\n return;\n case treeDataTypes.End:\n case treeDataTypes.Home:\n case treeDataTypes.Enter:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.ArrowDown:\n case treeDataTypes.ArrowLeft:\n case treeDataTypes.ArrowRight:\n return requestTreeResponse({ event, target: event.currentTarget, value, itemType, type: event.key });\n }\n const isTypeAheadCharacter =\n event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n if (isTypeAheadCharacter) {\n requestTreeResponse({ event, target: event.currentTarget, value, itemType, type: treeDataTypes.TypeAhead });\n }\n });\n\n const handleActionsVisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n const isTargetFromSubtree = Boolean(\n subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n );\n if (!isTargetFromSubtree) {\n setActionsVisible(true);\n }\n });\n\n const handleActionsInvisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n const isTargetFromSubtree = Boolean(\n subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n );\n const isRelatedTargetFromActions = Boolean(\n actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n );\n if (isRelatedTargetFromActions) {\n return setActionsVisible(true);\n }\n if (!isTargetFromSubtree) {\n return setActionsVisible(false);\n }\n });\n\n const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (isEventFromSubtree) {\n return;\n }\n requestTreeResponse({\n event,\n value,\n itemType,\n type: 'Change',\n target: event.currentTarget,\n checked: checked === 'mixed' ? true : !checked,\n });\n });\n\n const isBranch = itemType === 'branch';\n return {\n value,\n open,\n checked,\n subtreeRef,\n layoutRef,\n selectionRef,\n expandIconRef,\n actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n itemType,\n level,\n components: {\n root: 'div',\n },\n isAsideVisible,\n isActionsVisible,\n root: getNativeElementProps(as, {\n tabIndex: -1,\n ...rest,\n ref,\n role: 'treeitem',\n 'aria-level': level,\n [dataTreeItemValueAttrName]: value,\n 'aria-checked':\n selectionMode === 'multiselect' ? (checked === 'mixed' ? undefined : checked ?? false) : undefined,\n 'aria-selected': selectionMode === 'single' ? checked : undefined,\n 'aria-expanded': isBranch ? open : undefined,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onMouseOver: handleActionsVisible,\n onFocus: handleActionsVisible,\n onMouseOut: handleActionsInvisible,\n onBlur: handleActionsInvisible,\n onChange: handleChange,\n }),\n };\n}\n"],"names":["React","getNativeElementProps","useId","useMergedRefs","useEventCallback","elementContains","useTreeContext_unstable","useTreeItemContext_unstable","dataTreeItemValueAttrName","Space","treeDataTypes","useTreeItem_unstable","props","ref","contextLevel","ctx","level","value","toString","onClick","onKeyDown","as","itemType","rest","requestTreeResponse","isActionsVisible","setActionsVisible","useState","isAsideVisible","setAsideVisible","handleActionsRef","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","selectionMode","parentChecked","checked","checkedItems","get","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isEventFromSelection","isFromExpandIcon","currentTarget","type","ExpandIconClick","Click","handleKeyDown","key","click","preventDefault","End","Home","Enter","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","handleChange","isBranch","components","root","tabIndex","role","undefined","onMouseOver","onFocus","onMouseOut","onBlur","onChange"],"mappings":"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"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
export function useTreeItemContextValues_unstable(state) {
|
|
2
|
-
const { value , itemType , layoutRef , subtreeRef , open , expandIconRef , actionsRef , isActionsVisible , isAsideVisible , selectionRef } = state;
|
|
2
|
+
const { value , itemType , layoutRef , subtreeRef , open , expandIconRef , actionsRef , isActionsVisible , isAsideVisible , selectionRef , checked } = state;
|
|
3
3
|
/**
|
|
4
4
|
* This context is created with "@fluentui/react-context-selector",
|
|
5
5
|
* there is no sense to memoize it
|
|
6
6
|
*/ const treeItem = {
|
|
7
7
|
value,
|
|
8
|
+
checked,
|
|
8
9
|
itemType,
|
|
9
10
|
layoutRef,
|
|
10
11
|
subtreeRef,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTreeItemContextValues.ts"],"sourcesContent":["import type { TreeItemContextValues, TreeItemState } from './TreeItem.types';\nimport type { TreeItemContextValue } from '../../contexts';\n\nexport function useTreeItemContextValues_unstable(state: TreeItemState): TreeItemContextValues {\n const {\n value,\n itemType,\n layoutRef,\n subtreeRef,\n open,\n expandIconRef,\n actionsRef,\n isActionsVisible,\n isAsideVisible,\n selectionRef,\n } = state;\n\n /**\n * This context is created with \"@fluentui/react-context-selector\",\n * there is no sense to memoize it\n */\n const treeItem: TreeItemContextValue = {\n value,\n itemType,\n layoutRef,\n subtreeRef,\n open,\n selectionRef,\n isActionsVisible,\n isAsideVisible,\n actionsRef,\n expandIconRef,\n };\n\n return { treeItem };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","expandIconRef","actionsRef","isActionsVisible","isAsideVisible","selectionRef","treeItem"],"mappings":"AAGA,OAAO,SAASA,kCAAkCC,KAAoB,EAAyB;IAC7F,MAAM,EACJC,MAAK,EACLC,SAAQ,EACRC,UAAS,EACTC,WAAU,EACVC,KAAI,EACJC,cAAa,EACbC,WAAU,EACVC,iBAAgB,EAChBC,eAAc,EACdC,aAAY,
|
|
1
|
+
{"version":3,"sources":["useTreeItemContextValues.ts"],"sourcesContent":["import type { TreeItemContextValues, TreeItemState } from './TreeItem.types';\nimport type { TreeItemContextValue } from '../../contexts';\n\nexport function useTreeItemContextValues_unstable(state: TreeItemState): TreeItemContextValues {\n const {\n value,\n itemType,\n layoutRef,\n subtreeRef,\n open,\n expandIconRef,\n actionsRef,\n isActionsVisible,\n isAsideVisible,\n selectionRef,\n checked,\n } = state;\n\n /**\n * This context is created with \"@fluentui/react-context-selector\",\n * there is no sense to memoize it\n */\n const treeItem: TreeItemContextValue = {\n value,\n checked,\n itemType,\n layoutRef,\n subtreeRef,\n open,\n selectionRef,\n isActionsVisible,\n isAsideVisible,\n actionsRef,\n expandIconRef,\n };\n\n return { treeItem };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","itemType","layoutRef","subtreeRef","open","expandIconRef","actionsRef","isActionsVisible","isAsideVisible","selectionRef","checked","treeItem"],"mappings":"AAGA,OAAO,SAASA,kCAAkCC,KAAoB,EAAyB;IAC7F,MAAM,EACJC,MAAK,EACLC,SAAQ,EACRC,UAAS,EACTC,WAAU,EACVC,KAAI,EACJC,cAAa,EACbC,WAAU,EACVC,iBAAgB,EAChBC,eAAc,EACdC,aAAY,EACZC,QAAO,EACR,GAAGX;IAEJ;;;GAGC,GACD,MAAMY,WAAiC;QACrCX;QACAU;QACAT;QACAC;QACAC;QACAC;QACAK;QACAF;QACAC;QACAF;QACAD;IACF;IAEA,OAAO;QAAEM;IAAS;AACpB,CAAC"}
|
|
@@ -31,9 +31,8 @@ import { TreeItemChevron } from '../TreeItemChevron';
|
|
|
31
31
|
const selectionRef = useTreeItemContext_unstable((ctx)=>ctx.selectionRef);
|
|
32
32
|
const expandIconRef = useTreeItemContext_unstable((ctx)=>ctx.expandIconRef);
|
|
33
33
|
const actionsRef = useTreeItemContext_unstable((ctx)=>ctx.actionsRef);
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
const checked = useTreeContext_unstable((ctx)=>(_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false);
|
|
34
|
+
var _ctx_checked;
|
|
35
|
+
const checked = useTreeItemContext_unstable((ctx)=>(_ctx_checked = ctx.checked) !== null && _ctx_checked !== void 0 ? _ctx_checked : false);
|
|
37
36
|
const isBranch = useTreeItemContext_unstable((ctx)=>ctx.itemType === 'branch');
|
|
38
37
|
const expandIcon = resolveShorthand(props.expandIcon, {
|
|
39
38
|
required: isBranch,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\n\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n props: TreeItemLayoutProps,\n ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n const { content, iconAfter, iconBefore, as = 'span' } = props;\n\n const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n const [isActionsVisibleExternal, actionsShorthand]: [boolean | undefined, TreeItemLayoutSlots['actions']] =\n isResolvedShorthand(props.actions)\n ? // .visible prop should not be propagated to the DOM\n [props.actions.visible, { ...props.actions, visible: undefined }]\n : [undefined, props.actions];\n\n const isActionsVisible = useTreeItemContext_unstable(ctx => ctx.isActionsVisible) || isActionsVisibleExternal;\n const isAsideVisible = useTreeItemContext_unstable(ctx => ctx.isAsideVisible);\n const selectionRef = useTreeItemContext_unstable(ctx => ctx.selectionRef);\n const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n const actionsRef = useTreeItemContext_unstable(ctx => ctx.actionsRef);\n const
|
|
1
|
+
{"version":3,"sources":["useTreeItemLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTreeItemContext_unstable, useTreeContext_unstable } from '../../contexts';\nimport type { TreeItemLayoutProps, TreeItemLayoutSlots, TreeItemLayoutState } from './TreeItemLayout.types';\nimport { Checkbox, CheckboxProps } from '@fluentui/react-checkbox';\nimport { Radio, RadioProps } from '@fluentui/react-radio';\nimport { TreeItemChevron } from '../TreeItemChevron';\n\n/**\n * Create the state required to render TreeItemLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemLayoutStyles_unstable,\n * before being passed to renderTreeItemLayout_unstable.\n *\n * @param props - props from this instance of TreeItemLayout\n * @param ref - reference to root HTMLElement of TreeItemLayout\n */\nexport const useTreeItemLayout_unstable = (\n props: TreeItemLayoutProps,\n ref: React.Ref<HTMLElement>,\n): TreeItemLayoutState => {\n const { content, iconAfter, iconBefore, as = 'span' } = props;\n\n const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n\n const [isActionsVisibleExternal, actionsShorthand]: [boolean | undefined, TreeItemLayoutSlots['actions']] =\n isResolvedShorthand(props.actions)\n ? // .visible prop should not be propagated to the DOM\n [props.actions.visible, { ...props.actions, visible: undefined }]\n : [undefined, props.actions];\n\n const isActionsVisible = useTreeItemContext_unstable(ctx => ctx.isActionsVisible) || isActionsVisibleExternal;\n const isAsideVisible = useTreeItemContext_unstable(ctx => ctx.isAsideVisible);\n const selectionRef = useTreeItemContext_unstable(ctx => ctx.selectionRef);\n const expandIconRef = useTreeItemContext_unstable(ctx => ctx.expandIconRef);\n const actionsRef = useTreeItemContext_unstable(ctx => ctx.actionsRef);\n const checked = useTreeItemContext_unstable(ctx => ctx.checked ?? false);\n const isBranch = useTreeItemContext_unstable(ctx => ctx.itemType === 'branch');\n\n const expandIcon = resolveShorthand(props.expandIcon, {\n required: isBranch,\n defaultProps: {\n children: <TreeItemChevron />,\n 'aria-hidden': true,\n },\n });\n\n const expandIconRefs = useMergedRefs(expandIcon?.ref, expandIconRef);\n if (expandIcon) {\n expandIcon.ref = expandIconRefs;\n }\n\n const actions = isActionsVisible ? resolveShorthand(actionsShorthand) : undefined;\n\n const actionsRefs = useMergedRefs(actions?.ref, actionsRef);\n if (actions) {\n actions.ref = actionsRefs;\n }\n\n return {\n components: {\n root: 'div',\n expandIcon: 'div',\n iconBefore: 'div',\n content: 'div',\n iconAfter: 'div',\n actions: 'div',\n aside: 'div',\n // Casting here to a union between checkbox and radio\n selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,\n },\n buttonContextValue: { size: 'small' },\n root: getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }),\n iconBefore: resolveShorthand(iconBefore, { defaultProps: { 'aria-hidden': true } }),\n content: resolveShorthand(content, { required: true }),\n iconAfter: resolveShorthand(iconAfter, { defaultProps: { 'aria-hidden': true } }),\n aside: isAsideVisible ? resolveShorthand(props.aside) : undefined,\n actions,\n expandIcon,\n selector: resolveShorthand(props.selector, {\n required: selectionMode !== 'none',\n defaultProps: {\n checked,\n tabIndex: -1,\n 'aria-hidden': true,\n ref: selectionRef,\n },\n }),\n };\n};\n"],"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useMergedRefs","useTreeItemContext_unstable","useTreeContext_unstable","Checkbox","Radio","TreeItemChevron","useTreeItemLayout_unstable","props","ref","content","iconAfter","iconBefore","as","layoutRef","ctx","selectionMode","isActionsVisibleExternal","actionsShorthand","actions","visible","undefined","isActionsVisible","isAsideVisible","selectionRef","expandIconRef","actionsRef","checked","isBranch","itemType","expandIcon","required","defaultProps","children","expandIconRefs","actionsRefs","components","root","aside","selector","buttonContextValue","size","tabIndex"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType, TreeItemValue } from '../TreeItem';\nimport { SelectionMode } from '@fluentui/react-utilities';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\nimport { TreeCheckedChangeData, TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\n\nexport type TreeContextValue = {\n level: number;\n selectionMode: 'none' | SelectionMode;\n appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n size: 'small' | 'medium';\n openItems: ImmutableSet<TreeItemValue>;\n checkedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>;\n /**\n * requests root Tree component to respond to some tree item event,\n */\n requestTreeResponse(request: TreeItemRequest): void;\n};\n\nexport type TreeItemRequest = { itemType: TreeItemType } & (\n | OmitWithoutExpanding<TreeOpenChangeData, 'open'>\n | TreeNavigationData_unstable\n | OmitWithoutExpanding<TreeCheckedChangeData, '
|
|
1
|
+
{"version":3,"sources":["treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType, TreeItemValue } from '../TreeItem';\nimport { SelectionMode } from '@fluentui/react-utilities';\nimport { ImmutableSet } from '../utils/ImmutableSet';\nimport { ImmutableMap } from '../utils/ImmutableMap';\nimport { TreeCheckedChangeData, TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\n\nexport type TreeContextValue = {\n level: number;\n selectionMode: 'none' | SelectionMode;\n appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n size: 'small' | 'medium';\n openItems: ImmutableSet<TreeItemValue>;\n checkedItems: ImmutableMap<TreeItemValue, 'mixed' | boolean>;\n /**\n * requests root Tree component to respond to some tree item event,\n */\n requestTreeResponse(request: TreeItemRequest): void;\n};\n\nexport type TreeItemRequest = { itemType: TreeItemType } & (\n | OmitWithoutExpanding<TreeOpenChangeData, 'open' | 'openItems'>\n | TreeNavigationData_unstable\n | OmitWithoutExpanding<TreeCheckedChangeData, 'selectionMode' | 'checkedItems'>\n);\n\n// helper type that avoids the expansion of unions while inferring it, should work exactly the same as Omit\ntype OmitWithoutExpanding<P, K extends string | number | symbol> = P extends unknown ? Omit<P, K> : P;\n\nconst defaultContextValue: TreeContextValue = {\n level: 0,\n selectionMode: 'none',\n openItems: ImmutableSet.empty,\n checkedItems: ImmutableMap.empty,\n requestTreeResponse: noop,\n appearance: 'subtle',\n size: 'medium',\n};\n\nfunction noop() {\n /* noop */\n}\n\nexport const TreeContext: Context<TreeContextValue | undefined> = createContext<TreeContextValue | undefined>(\n undefined,\n);\n\nexport const { Provider: TreeProvider } = TreeContext;\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","ImmutableSet","ImmutableMap","defaultContextValue","level","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAG/G,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,YAAY,QAAQ,wBAAwB;AAyBrD,MAAMC,sBAAwC;IAC5CC,OAAO;IACPC,eAAe;IACfC,WAAWL,aAAaM,KAAK;IAC7BC,cAAcN,aAAaK,KAAK;IAChCE,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACR;AAEA,SAASF,OAAO;AACd,QAAQ,GACV;AAEA,OAAO,MAAMG,cAAqDd,cAChEe,WACA;AAEF,OAAO,MAAM,EAAEC,UAAUC,aAAY,EAAE,GAAGH,YAAY;AACtD,OAAO,MAAMI,0BAA0B,CAAIC,WACzClB,mBAAmBa,aAAa,CAACM,MAAMhB,mBAAmB,GAAKe,SAASC,MAAM"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
|
|
3
|
+
import { headlessTreeRootId } from '../utils/createHeadlessTree';
|
|
3
4
|
const defaultContextValue = {
|
|
4
|
-
value:
|
|
5
|
+
value: headlessTreeRootId,
|
|
5
6
|
selectionRef: React.createRef(),
|
|
6
7
|
layoutRef: React.createRef(),
|
|
7
8
|
subtreeRef: React.createRef(),
|
|
@@ -10,7 +11,8 @@ const defaultContextValue = {
|
|
|
10
11
|
isActionsVisible: false,
|
|
11
12
|
isAsideVisible: false,
|
|
12
13
|
itemType: 'leaf',
|
|
13
|
-
open: false
|
|
14
|
+
open: false,
|
|
15
|
+
checked: undefined
|
|
14
16
|
};
|
|
15
17
|
export const TreeItemContext = createContext(undefined);
|
|
16
18
|
export const { Provider: TreeItemProvider } = TreeItemContext;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["treeItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { TreeItemType, TreeItemValue } from '../TreeItem';\n\nexport type TreeItemContextValue = {\n isActionsVisible: boolean;\n isAsideVisible: boolean;\n selectionRef: React.Ref<HTMLInputElement>;\n actionsRef: React.Ref<HTMLDivElement>;\n expandIconRef: React.Ref<HTMLDivElement>;\n layoutRef: React.Ref<HTMLDivElement>;\n subtreeRef: React.Ref<HTMLDivElement>;\n itemType: TreeItemType;\n value: TreeItemValue;\n open: boolean;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n value:
|
|
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 isActionsVisible: boolean;\n isAsideVisible: boolean;\n selectionRef: React.Ref<HTMLInputElement>;\n actionsRef: React.Ref<HTMLDivElement>;\n expandIconRef: React.Ref<HTMLDivElement>;\n layoutRef: React.Ref<HTMLDivElement>;\n subtreeRef: React.Ref<HTMLDivElement>;\n itemType: TreeItemType;\n value: TreeItemValue;\n open: boolean;\n checked?: TreeSelectionValue;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n value: headlessTreeRootId,\n selectionRef: React.createRef(),\n layoutRef: React.createRef(),\n subtreeRef: React.createRef(),\n actionsRef: React.createRef(),\n expandIconRef: React.createRef(),\n isActionsVisible: false,\n isAsideVisible: false,\n itemType: 'leaf',\n open: false,\n checked: undefined,\n};\n\nexport const TreeItemContext: Context<TreeItemContextValue | undefined> = createContext<\n TreeItemContextValue | undefined\n>(undefined);\n\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = <T>(selector: ContextSelector<TreeItemContextValue, T>): T =>\n useContextSelector(TreeItemContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","headlessTreeRootId","defaultContextValue","value","selectionRef","createRef","layoutRef","subtreeRef","actionsRef","expandIconRef","isActionsVisible","isAsideVisible","itemType","open","checked","undefined","TreeItemContext","Provider","TreeItemProvider","useTreeItemContext_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAmCC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAE/G,SAASC,kBAAkB,QAAQ,8BAA8B;AAiBjE,MAAMC,sBAA4C;IAChDC,OAAOF;IACPG,cAAcN,MAAMO,SAAS;IAC7BC,WAAWR,MAAMO,SAAS;IAC1BE,YAAYT,MAAMO,SAAS;IAC3BG,YAAYV,MAAMO,SAAS;IAC3BI,eAAeX,MAAMO,SAAS;IAC9BK,kBAAkB,KAAK;IACvBC,gBAAgB,KAAK;IACrBC,UAAU;IACVC,MAAM,KAAK;IACXC,SAASC;AACX;AAEA,OAAO,MAAMC,kBAA6DjB,cAExEgB,WAAW;AAEb,OAAO,MAAM,EAAEE,UAAUC,iBAAgB,EAAE,GAAGF,gBAAgB;AAC9D,OAAO,MAAMG,8BAA8B,CAAIC,WAC7CpB,mBAAmBgB,iBAAiB,CAACK,MAAMnB,mBAAmB,GAAKkB,SAASC,MAAM"}
|
package/lib/hooks/useRootTree.js
CHANGED
|
@@ -5,10 +5,10 @@ import { createOpenItems } from '../utils/createOpenItems';
|
|
|
5
5
|
import { createCheckedItems } from '../utils/createCheckedItems';
|
|
6
6
|
import { treeDataTypes } from '../utils/tokens';
|
|
7
7
|
/**
|
|
8
|
-
* Create the state required to render the root level
|
|
8
|
+
* Create the state required to render the root level tree.
|
|
9
9
|
*
|
|
10
|
-
* @param props - props from this instance of
|
|
11
|
-
* @param ref - reference to root HTMLElement of
|
|
10
|
+
* @param props - props from this instance of tree
|
|
11
|
+
* @param ref - reference to root HTMLElement of tree
|
|
12
12
|
*/ export function useRootTree(props, ref) {
|
|
13
13
|
warnIfNoProperPropsRootTree(props);
|
|
14
14
|
const { appearance ='subtle' , size ='medium' , selectionMode ='none' } = props;
|
|
@@ -41,7 +41,8 @@ import { treeDataTypes } from '../utils/tokens';
|
|
|
41
41
|
return ReactDOM.unstable_batchedUpdates(()=>{
|
|
42
42
|
requestOpenChange({
|
|
43
43
|
...request,
|
|
44
|
-
open: request.itemType === 'branch' && !openItems.has(request.value)
|
|
44
|
+
open: request.itemType === 'branch' && !openItems.has(request.value),
|
|
45
|
+
openItems: openItems.dangerouslyGetInternalSet_unstable()
|
|
45
46
|
});
|
|
46
47
|
requestNavigation({
|
|
47
48
|
...request,
|
|
@@ -58,7 +59,8 @@ import { treeDataTypes } from '../utils/tokens';
|
|
|
58
59
|
if (!open) {
|
|
59
60
|
return requestOpenChange({
|
|
60
61
|
...request,
|
|
61
|
-
open: true
|
|
62
|
+
open: true,
|
|
63
|
+
openItems: openItems.dangerouslyGetInternalSet_unstable()
|
|
62
64
|
});
|
|
63
65
|
}
|
|
64
66
|
return requestNavigation(request);
|
|
@@ -68,7 +70,8 @@ import { treeDataTypes } from '../utils/tokens';
|
|
|
68
70
|
const open = openItems.has(request.value);
|
|
69
71
|
return requestOpenChange({
|
|
70
72
|
...request,
|
|
71
|
-
open: request.itemType === 'branch' && !open
|
|
73
|
+
open: request.itemType === 'branch' && !open,
|
|
74
|
+
openItems: openItems.dangerouslyGetInternalSet_unstable()
|
|
72
75
|
});
|
|
73
76
|
}
|
|
74
77
|
case treeDataTypes.ArrowLeft:
|
|
@@ -78,7 +81,8 @@ import { treeDataTypes } from '../utils/tokens';
|
|
|
78
81
|
return requestOpenChange({
|
|
79
82
|
...request,
|
|
80
83
|
open: false,
|
|
81
|
-
type: treeDataTypes.ArrowLeft
|
|
84
|
+
type: treeDataTypes.ArrowLeft,
|
|
85
|
+
openItems: openItems.dangerouslyGetInternalSet_unstable()
|
|
82
86
|
});
|
|
83
87
|
}
|
|
84
88
|
return requestNavigation({
|
|
@@ -97,11 +101,10 @@ import { treeDataTypes } from '../utils/tokens';
|
|
|
97
101
|
});
|
|
98
102
|
case treeDataTypes.Change:
|
|
99
103
|
{
|
|
100
|
-
const previousCheckedValue = checkedItems.get(request.value);
|
|
101
104
|
return requestCheckedChange({
|
|
102
105
|
...request,
|
|
103
106
|
selectionMode: selectionMode,
|
|
104
|
-
|
|
107
|
+
checkedItems: checkedItems.dangerouslyGetInternalMap_unstable()
|
|
105
108
|
});
|
|
106
109
|
}
|
|
107
110
|
}
|
|
@@ -120,7 +123,7 @@ import { treeDataTypes } from '../utils/tokens';
|
|
|
120
123
|
requestTreeResponse,
|
|
121
124
|
root: getNativeElementProps('div', {
|
|
122
125
|
ref,
|
|
123
|
-
role: '
|
|
126
|
+
role: 'tree',
|
|
124
127
|
'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,
|
|
125
128
|
...props
|
|
126
129
|
})
|
|
@@ -130,7 +133,7 @@ function warnIfNoProperPropsRootTree(props) {
|
|
|
130
133
|
if (process.env.NODE_ENV === 'development') {
|
|
131
134
|
if (!props['aria-label'] && !props['aria-labelledby']) {
|
|
132
135
|
// eslint-disable-next-line no-console
|
|
133
|
-
console.warn('
|
|
136
|
+
console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');
|
|
134
137
|
}
|
|
135
138
|
}
|
|
136
139
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import { SelectionMode, getNativeElementProps, useEventCallback } from '@fluentui/react-utilities';\nimport type {\n TreeCheckedChangeData,\n TreeNavigationData_unstable,\n TreeOpenChangeData,\n TreeProps,\n TreeState,\n} from '../Tree';\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { TreeItemRequest } from '../contexts/treeContext';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\n\n/**\n * Create the state required to render the root level
|
|
1
|
+
{"version":3,"sources":["useRootTree.ts"],"sourcesContent":["import { SelectionMode, getNativeElementProps, useEventCallback } from '@fluentui/react-utilities';\nimport type {\n TreeCheckedChangeData,\n TreeNavigationData_unstable,\n TreeOpenChangeData,\n TreeProps,\n TreeState,\n} from '../Tree';\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { TreeItemRequest } from '../contexts/treeContext';\nimport { createOpenItems } from '../utils/createOpenItems';\nimport { createCheckedItems } from '../utils/createCheckedItems';\nimport { treeDataTypes } from '../utils/tokens';\n\n/**\n * Create the state required to render the root level 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: Pick<\n TreeProps,\n | 'selectionMode'\n | 'appearance'\n | 'size'\n | 'openItems'\n | 'checkedItems'\n | 'onOpenChange'\n | 'onCheckedChange'\n | 'onNavigation_unstable'\n | 'aria-label'\n | 'aria-labelledby'\n >,\n ref: React.Ref<HTMLElement>,\n): TreeState {\n warnIfNoProperPropsRootTree(props);\n\n const { appearance = 'subtle', size = 'medium', selectionMode = 'none' } = props;\n\n const openItems = React.useMemo(() => createOpenItems(props.openItems), [props.openItems]);\n const checkedItems = React.useMemo(() => createCheckedItems(props.checkedItems), [props.checkedItems]);\n const requestOpenChange = (data: TreeOpenChangeData) => props.onOpenChange?.(data.event, data);\n\n const requestCheckedChange = (data: TreeCheckedChangeData) => props.onCheckedChange?.(data.event, data);\n const requestNavigation = (data: TreeNavigationData_unstable) => {\n props.onNavigation_unstable?.(data.event, data);\n if (data.type === treeDataTypes.ArrowDown || data.type === treeDataTypes.ArrowUp) {\n data.event.preventDefault();\n }\n };\n\n const requestTreeResponse = useEventCallback((request: TreeItemRequest) => {\n switch (request.type) {\n case treeDataTypes.Click:\n case treeDataTypes.ExpandIconClick: {\n return ReactDOM.unstable_batchedUpdates(() => {\n requestOpenChange({\n ...request,\n open: request.itemType === 'branch' && !openItems.has(request.value),\n openItems: openItems.dangerouslyGetInternalSet_unstable(),\n });\n requestNavigation({ ...request, type: treeDataTypes.Click });\n });\n }\n case treeDataTypes.ArrowRight: {\n if (request.itemType === 'leaf') {\n return;\n }\n const open = openItems.has(request.value);\n if (!open) {\n return requestOpenChange({\n ...request,\n open: true,\n openItems: openItems.dangerouslyGetInternalSet_unstable(),\n });\n }\n return requestNavigation(request);\n }\n case treeDataTypes.Enter: {\n const open = openItems.has(request.value);\n return requestOpenChange({\n ...request,\n open: request.itemType === 'branch' && !open,\n openItems: openItems.dangerouslyGetInternalSet_unstable(),\n });\n }\n case treeDataTypes.ArrowLeft: {\n const open = openItems.has(request.value);\n if (open && request.itemType === 'branch') {\n return requestOpenChange({\n ...request,\n open: false,\n type: treeDataTypes.ArrowLeft,\n openItems: openItems.dangerouslyGetInternalSet_unstable(),\n });\n }\n return requestNavigation({ ...request, type: treeDataTypes.ArrowLeft });\n }\n case treeDataTypes.End:\n case treeDataTypes.Home:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.ArrowDown:\n case treeDataTypes.TypeAhead:\n return requestNavigation({ ...request, target: request.event.currentTarget });\n case treeDataTypes.Change: {\n return requestCheckedChange({\n ...request,\n selectionMode: selectionMode as SelectionMode,\n checkedItems: checkedItems.dangerouslyGetInternalMap_unstable(),\n } as TreeCheckedChangeData);\n }\n }\n });\n\n return {\n components: {\n root: 'div',\n },\n selectionMode,\n open: true,\n appearance,\n size,\n level: 1,\n openItems,\n checkedItems,\n requestTreeResponse,\n root: getNativeElementProps('div', {\n ref,\n role: 'tree',\n 'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,\n ...props,\n }),\n };\n}\n\nfunction warnIfNoProperPropsRootTree(props: Pick<TreeProps, 'aria-label' | 'aria-labelledby'>) {\n if (process.env.NODE_ENV === 'development') {\n if (!props['aria-label'] && !props['aria-labelledby']) {\n // eslint-disable-next-line no-console\n console.warn('Tree must have either a `aria-label` or `aria-labelledby` property defined');\n }\n }\n}\n"],"names":["getNativeElementProps","useEventCallback","React","ReactDOM","createOpenItems","createCheckedItems","treeDataTypes","useRootTree","props","ref","warnIfNoProperPropsRootTree","appearance","size","selectionMode","openItems","useMemo","checkedItems","requestOpenChange","data","onOpenChange","event","requestCheckedChange","onCheckedChange","requestNavigation","onNavigation_unstable","type","ArrowDown","ArrowUp","preventDefault","requestTreeResponse","request","Click","ExpandIconClick","unstable_batchedUpdates","open","itemType","has","value","dangerouslyGetInternalSet_unstable","ArrowRight","Enter","ArrowLeft","End","Home","TypeAhead","target","currentTarget","Change","dangerouslyGetInternalMap_unstable","components","root","level","role","undefined","process","env","NODE_ENV","console","warn"],"mappings":"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"}
|
|
@@ -1,31 +1,14 @@
|
|
|
1
|
-
import { useMergedRefs } from '@fluentui/react-utilities';
|
|
2
1
|
import * as React from 'react';
|
|
3
|
-
import { useHTMLElementWalkerRef } from './useHTMLElementWalker';
|
|
4
2
|
/**
|
|
5
3
|
* https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
|
|
6
4
|
*/ export function useRovingTabIndex(filter) {
|
|
7
5
|
const currentElementRef = React.useRef();
|
|
8
|
-
const
|
|
9
|
-
const rootRefCallback = (element)=>{
|
|
10
|
-
if (!element) {
|
|
11
|
-
return;
|
|
12
|
-
}
|
|
13
|
-
reset();
|
|
14
|
-
};
|
|
15
|
-
function reset() {
|
|
16
|
-
if (!walkerRef.current) {
|
|
17
|
-
return;
|
|
18
|
-
}
|
|
19
|
-
const walker = walkerRef.current;
|
|
6
|
+
const initialize = React.useCallback((walker)=>{
|
|
20
7
|
walker.currentElement = walker.root;
|
|
21
8
|
let tabbableChild = walker.firstChild((element)=>element.tabIndex === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP);
|
|
22
9
|
walker.currentElement = walker.root;
|
|
23
10
|
tabbableChild !== null && tabbableChild !== void 0 ? tabbableChild : tabbableChild = walker.firstChild();
|
|
24
11
|
if (!tabbableChild) {
|
|
25
|
-
if (process.env.NODE_ENV === 'development') {
|
|
26
|
-
// eslint-disable-next-line no-console
|
|
27
|
-
console.warn('useRovingTabIndexes: internal error, no tabbable element was found');
|
|
28
|
-
}
|
|
29
12
|
return;
|
|
30
13
|
}
|
|
31
14
|
tabbableChild.tabIndex = 0;
|
|
@@ -34,8 +17,8 @@ import { useHTMLElementWalkerRef } from './useHTMLElementWalker';
|
|
|
34
17
|
while((nextElement = walker.nextElement()) && nextElement !== tabbableChild){
|
|
35
18
|
nextElement.tabIndex = -1;
|
|
36
19
|
}
|
|
37
|
-
}
|
|
38
|
-
|
|
20
|
+
}, []);
|
|
21
|
+
const rove = React.useCallback((nextElement)=>{
|
|
39
22
|
if (!currentElementRef.current) {
|
|
40
23
|
return;
|
|
41
24
|
}
|
|
@@ -43,12 +26,9 @@ import { useHTMLElementWalkerRef } from './useHTMLElementWalker';
|
|
|
43
26
|
nextElement.tabIndex = 0;
|
|
44
27
|
nextElement.focus();
|
|
45
28
|
currentElementRef.current = nextElement;
|
|
46
|
-
}
|
|
47
|
-
return
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
},
|
|
52
|
-
useMergedRefs(rootRef, rootRefCallback)
|
|
53
|
-
];
|
|
29
|
+
}, []);
|
|
30
|
+
return {
|
|
31
|
+
rove,
|
|
32
|
+
initialize
|
|
33
|
+
};
|
|
54
34
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useRovingTabIndexes.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"sources":["useRovingTabIndexes.ts"],"sourcesContent":["import * as React from 'react';\nimport { HTMLElementFilter, HTMLElementWalker } from '../utils/createHTMLElementWalker';\n\n/**\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n */\nexport function useRovingTabIndex(filter?: HTMLElementFilter) {\n const currentElementRef = React.useRef<HTMLElement>();\n\n const initialize = React.useCallback((walker: HTMLElementWalker) => {\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) => {\n if (!currentElementRef.current) {\n return;\n }\n currentElementRef.current.tabIndex = -1;\n nextElement.tabIndex = 0;\n nextElement.focus();\n currentElementRef.current = nextElement;\n }, []);\n\n return {\n rove,\n initialize,\n };\n}\n"],"names":["React","useRovingTabIndex","filter","currentElementRef","useRef","initialize","useCallback","walker","currentElement","root","tabbableChild","firstChild","element","tabIndex","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","current","nextElement","rove","focus"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B;;CAEC,GACD,OAAO,SAASC,kBAAkBC,MAA0B,EAAE;IAC5D,MAAMC,oBAAoBH,MAAMI,MAAM;IAEtC,MAAMC,aAAaL,MAAMM,WAAW,CAAC,CAACC,SAA8B;QAClEA,OAAOC,cAAc,GAAGD,OAAOE,IAAI;QACnC,IAAIC,gBAAgBH,OAAOI,UAAU,CAACC,CAAAA,UACpCA,QAAQC,QAAQ,KAAK,IAAIC,WAAWC,aAAa,GAAGD,WAAWE,WAAW;QAE5ET,OAAOC,cAAc,GAAGD,OAAOE,IAAI;QACnCC,0BAAAA,2BAAAA,gBAAAA,gBAAkBH,OAAOI,UAAU,EAAE;QACrC,IAAI,CAACD,eAAe;YAClB;QACF,CAAC;QACDA,cAAcG,QAAQ,GAAG;QACzBV,kBAAkBc,OAAO,GAAGP;QAC5B,IAAIQ,cAAkC,IAAI;QAC1C,MAAO,AAACA,CAAAA,cAAcX,OAAOW,WAAW,EAAC,KAAMA,gBAAgBR,cAAe;YAC5EQ,YAAYL,QAAQ,GAAG,CAAC;QAC1B;IACF,GAAG,EAAE;IACL,MAAMM,OAAOnB,MAAMM,WAAW,CAAC,CAACY,cAA6B;QAC3D,IAAI,CAACf,kBAAkBc,OAAO,EAAE;YAC9B;QACF,CAAC;QACDd,kBAAkBc,OAAO,CAACJ,QAAQ,GAAG,CAAC;QACtCK,YAAYL,QAAQ,GAAG;QACvBK,YAAYE,KAAK;QACjBjB,kBAAkBc,OAAO,GAAGC;IAC9B,GAAG,EAAE;IAEL,OAAO;QACLC;QACAd;IACF;AACF,CAAC"}
|
package/lib/hooks/useSubtree.js
CHANGED
|
@@ -2,10 +2,10 @@ import * as React from 'react';
|
|
|
2
2
|
import { useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';
|
|
3
3
|
import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
|
|
4
4
|
/**
|
|
5
|
-
* Create the state required to render a sub-level
|
|
5
|
+
* Create the state required to render a sub-level tree.
|
|
6
6
|
*
|
|
7
|
-
* @param props - props from this instance of
|
|
8
|
-
* @param ref - reference to root HTMLElement of
|
|
7
|
+
* @param props - props from this instance of tree
|
|
8
|
+
* @param ref - reference to root HTMLElement of tree
|
|
9
9
|
*/ export function useSubtree(props, ref) {
|
|
10
10
|
const contextAppearance = useTreeContext_unstable((ctx)=>ctx.appearance);
|
|
11
11
|
const contextSize = useTreeContext_unstable((ctx)=>ctx.size);
|