@fluentui/react-tree 9.4.39 → 9.4.41
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 +37 -2
- package/lib/components/TreeItem/useTreeItem.js +3 -3
- package/lib/components/TreeItem/useTreeItem.js.map +1 -1
- package/lib/hooks/useRovingTabIndexes.js +9 -0
- package/lib/hooks/useRovingTabIndexes.js.map +1 -1
- package/lib-commonjs/components/TreeItem/useTreeItem.js +3 -3
- package/lib-commonjs/components/TreeItem/useTreeItem.js.map +1 -1
- package/lib-commonjs/hooks/useRovingTabIndexes.js +9 -0
- package/lib-commonjs/hooks/useRovingTabIndexes.js.map +1 -1
- package/package.json +12 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,47 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tree
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 06 May 2024 12:48:54 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.4.41](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.4.41)
|
|
8
|
+
|
|
9
|
+
Mon, 06 May 2024 12:48:54 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.4.40..@fluentui/react-tree_v9.4.41)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-aria to v9.11.1 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
|
|
15
|
+
- Bump @fluentui/react-avatar to v9.6.24 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
|
|
16
|
+
- Bump @fluentui/react-button to v9.3.78 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
|
|
17
|
+
- Bump @fluentui/react-checkbox to v9.2.23 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
|
|
18
|
+
- Bump @fluentui/react-context-selector to v9.1.59 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
|
|
19
|
+
- Bump @fluentui/react-radio to v9.2.18 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
|
|
20
|
+
- Bump @fluentui/react-shared-contexts to v9.18.0 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
|
|
21
|
+
- Bump @fluentui/react-tabster to v9.21.1 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
|
|
22
|
+
- Bump @fluentui/react-utilities to v9.18.8 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
|
|
23
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.37 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
|
|
24
|
+
|
|
25
|
+
## [9.4.40](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.4.40)
|
|
26
|
+
|
|
27
|
+
Thu, 02 May 2024 11:36:43 GMT
|
|
28
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.4.39..@fluentui/react-tree_v9.4.40)
|
|
29
|
+
|
|
30
|
+
### Patches
|
|
31
|
+
|
|
32
|
+
- chore: updates roving tab indexes to ensure Tree is focusable ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by bernardo.sunderhus@gmail.com)
|
|
33
|
+
- fix: Apply aria-selected prop to aria-selected instead of aria-expanded. ([PR #31117](https://github.com/microsoft/fluentui/pull/31117) by estebanmu@microsoft.com)
|
|
34
|
+
- chore: upgrade @fluentui/react-icons to 2.0.237. ([PR #31139](https://github.com/microsoft/fluentui/pull/31139) by ololubek@microsoft.com)
|
|
35
|
+
- Bump @fluentui/react-aria to v9.11.0 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
|
|
36
|
+
- Bump @fluentui/react-avatar to v9.6.23 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
|
|
37
|
+
- Bump @fluentui/react-button to v9.3.77 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
|
|
38
|
+
- Bump @fluentui/react-checkbox to v9.2.22 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
|
|
39
|
+
- Bump @fluentui/react-radio to v9.2.17 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
|
|
40
|
+
- Bump @fluentui/react-tabster to v9.21.0 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
|
|
41
|
+
|
|
7
42
|
## [9.4.39](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.4.39)
|
|
8
43
|
|
|
9
|
-
Tue, 23 Apr 2024 08:
|
|
44
|
+
Tue, 23 Apr 2024 08:17:49 GMT
|
|
10
45
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.4.38..@fluentui/react-tree_v9.4.39)
|
|
11
46
|
|
|
12
47
|
### Patches
|
|
@@ -29,7 +29,7 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
|
|
|
29
29
|
const internalValue = useId('fuiTreeItemValue-');
|
|
30
30
|
var _props_value;
|
|
31
31
|
const value = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : internalValue;
|
|
32
|
-
const { onClick, onKeyDown, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, 'aria-selected': ariaSelected, ...rest } = props;
|
|
32
|
+
const { onClick, onKeyDown, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, 'aria-selected': ariaSelected, 'aria-expanded': ariaExpanded, ...rest } = props;
|
|
33
33
|
const actionsRef = React.useRef(null);
|
|
34
34
|
const expandIconRef = React.useRef(null);
|
|
35
35
|
const layoutRef = React.useRef(null);
|
|
@@ -227,8 +227,8 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
|
|
|
227
227
|
'aria-level': level,
|
|
228
228
|
'aria-checked': selectionMode === 'multiselect' ? checked : undefined,
|
|
229
229
|
// Casting: when selectionMode is 'single', checked is a boolean
|
|
230
|
-
'aria-selected': selectionMode === 'single' ? !!checked : undefined,
|
|
231
|
-
'aria-expanded':
|
|
230
|
+
'aria-selected': ariaSelected !== undefined ? ariaSelected : selectionMode === 'single' ? !!checked : undefined,
|
|
231
|
+
'aria-expanded': ariaExpanded !== undefined ? ariaExpanded : itemType === 'branch' ? open : undefined,
|
|
232
232
|
onClick: handleClick,
|
|
233
233
|
onKeyDown: handleKeyDown,
|
|
234
234
|
onChange: handleChange
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport {\n getIntrinsicElementProps,\n useId,\n useEventCallback,\n slot,\n elementContains,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TreeItemProps, TreeItemState, TreeItemValue } from './TreeItem.types';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\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 treeType = useTreeContext_unstable(ctx => ctx.treeType);\n if (treeType === 'flat') {\n warnIfNoProperPropsFlatTreeItem(props);\n }\n const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n const { level: contextLevel } = useSubtreeContext_unstable();\n const parentValue = useTreeItemContext_unstable(ctx => props.parentValue ?? ctx.value);\n\n // note, if the value is not externally provided,\n // then selection and expansion will not work properly\n const internalValue = useId('fuiTreeItemValue-');\n const value: TreeItemValue = props.value ?? internalValue;\n\n const {\n onClick,\n onKeyDown,\n onChange,\n as = 'div',\n itemType = 'leaf',\n 'aria-level': level = contextLevel,\n 'aria-selected': ariaSelected,\n ...rest\n } = props;\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 const treeItemRef = React.useRef<HTMLDivElement>(null);\n\n const open = useTreeContext_unstable(ctx => props.open ?? ctx.openItems.has(value));\n const getNextOpen = () => (itemType === 'branch' ? !open : open);\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\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 isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n\n ReactDOM.unstable_batchedUpdates(() => {\n const data = {\n event,\n value,\n open: getNextOpen(),\n target: event.currentTarget,\n type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n } as const;\n props.onOpenChange?.(event, data);\n requestTreeResponse({\n ...data,\n itemType,\n requestType: 'open',\n });\n requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: 'navigate',\n type: treeDataTypes.Click,\n });\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 // Prevents the page from scrolling down when the spacebar is pressed\n event.preventDefault();\n }\n return;\n case treeDataTypes.Enter: {\n return event.currentTarget.click();\n }\n case treeDataTypes.End:\n case treeDataTypes.Home:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.ArrowDown:\n return requestTreeResponse({\n requestType: 'navigate',\n event,\n value,\n itemType,\n parentValue,\n type: event.key,\n target: event.currentTarget,\n });\n case treeDataTypes.ArrowLeft: {\n // do not navigate to parent if the item is on the top level\n if (level === 1 && !open) {\n return;\n }\n const data = {\n value,\n event,\n open: getNextOpen(),\n type: event.key,\n target: event.currentTarget,\n } as const;\n if (open) {\n props.onOpenChange?.(event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: open ? 'open' : 'navigate',\n });\n }\n case treeDataTypes.ArrowRight:\n // do not navigate or open if the item is a leaf\n if (itemType === 'leaf') {\n return;\n }\n const data = {\n value,\n event,\n open: getNextOpen(),\n type: event.key,\n target: event.currentTarget,\n } as const;\n if (!open) {\n props.onOpenChange?.(event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: open ? 'navigate' : 'open',\n });\n }\n const isTypeAheadCharacter =\n event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n if (isTypeAheadCharacter) {\n requestTreeResponse({\n requestType: 'navigate',\n event,\n target: event.currentTarget,\n value,\n itemType,\n type: treeDataTypes.TypeAhead,\n parentValue,\n });\n }\n });\n\n const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event);\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 requestType: 'selection',\n event,\n value,\n itemType,\n type: 'Change',\n target: event.currentTarget,\n checked: checked === 'mixed' ? true : !checked,\n });\n });\n\n return {\n value,\n open,\n checked,\n subtreeRef,\n layoutRef,\n selectionRef,\n expandIconRef,\n treeItemRef,\n actionsRef,\n itemType,\n level,\n components: {\n root: 'div',\n },\n // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false\n isAsideVisible: false,\n // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false\n isActionsVisible: false,\n root: slot.always(\n getIntrinsicElementProps(as, {\n tabIndex: -1,\n [dataTreeItemValueAttrName]: value,\n ...rest,\n ref: useMergedRefs(ref, treeItemRef),\n role: 'treeitem',\n 'aria-level': level,\n 'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n // Casting: when selectionMode is 'single', checked is a boolean\n 'aria-selected': selectionMode === 'single' ? !!checked : undefined,\n 'aria-expanded': ariaSelected !== undefined ? ariaSelected : itemType === 'branch' ? open : undefined,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onChange: handleChange,\n } as const),\n { elementType: 'div' },\n ),\n };\n}\n\nfunction warnIfNoProperPropsFlatTreeItem(\n props: Pick<TreeItemProps, 'aria-setsize' | 'aria-posinset' | 'aria-level' | 'parentValue'>,\n) {\n if (process.env.NODE_ENV !== 'production') {\n if (\n props['aria-posinset'] === undefined ||\n props['aria-setsize'] === undefined ||\n props['aria-level'] === undefined ||\n (props.parentValue === undefined && props['aria-level'] !== 1)\n ) {\n // eslint-disable-next-line no-console\n console.error(/** #__DE-INDENT__ */ `\n @fluentui/react-tree [${useTreeItem_unstable.name}]:\n A flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\n and \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n - \"aria-posinset\": the position of this treeitem in the current level of the tree.\n - \"aria-setsize\": the number of siblings in this level of the tree.\n - \"aria-level\": the current level of the treeitem.\n - \"parentValue\": the \"value\" property of the parent item of this item.\n `);\n }\n }\n}\n"],"names":["React","ReactDOM","getIntrinsicElementProps","useId","useEventCallback","slot","elementContains","useMergedRefs","Space","treeDataTypes","useTreeContext_unstable","useSubtreeContext_unstable","useTreeItemContext_unstable","dataTreeItemValueAttrName","useTreeItem_unstable","props","ref","treeType","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","parentValue","value","internalValue","onClick","onKeyDown","onChange","as","itemType","ariaSelected","rest","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","treeItemRef","open","openItems","has","getNextOpen","selectionMode","checked","checkedItems","get","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","unstable_batchedUpdates","data","currentTarget","type","ExpandIconClick","Click","onOpenChange","requestType","handleKeyDown","key","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleChange","components","root","isAsideVisible","isActionsVisible","always","tabIndex","role","undefined","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,YAAYC,cAAc,YAAY;AACtC,SACEC,wBAAwB,EACxBC,KAAK,EACLC,gBAAgB,EAChBC,IAAI,EACJC,eAAe,EACfC,aAAa,QACR,4BAA4B;AAEnC,SAASC,KAAK,QAAQ,0BAA0B;AAChD,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,uBAAuB,EAAEC,0BAA0B,EAAEC,2BAA2B,QAAQ,iBAAiB;AAClH,SAASC,yBAAyB,QAAQ,0CAA0C;AAEpF;;;;;;;;CAQC,GACD,OAAO,SAASC,qBAAqBC,KAAoB,EAAEC,GAA8B;IACvF,MAAMC,WAAWP,wBAAwBQ,CAAAA,MAAOA,IAAID,QAAQ;IAC5D,IAAIA,aAAa,QAAQ;QACvBE,gCAAgCJ;IAClC;IACA,MAAMK,sBAAsBV,wBAAwBQ,CAAAA,MAAOA,IAAIE,mBAAmB;IAClF,MAAM,EAAEC,OAAOC,YAAY,EAAE,GAAGX;IAChC,MAAMY,cAAcX,4BAA4BM,CAAAA;YAAOH;eAAAA,CAAAA,qBAAAA,MAAMQ,WAAW,cAAjBR,gCAAAA,qBAAqBG,IAAIM,KAAK;IAAD;IAEpF,iDAAiD;IACjD,sDAAsD;IACtD,MAAMC,gBAAgBtB,MAAM;QACCY;IAA7B,MAAMS,QAAuBT,CAAAA,eAAAA,MAAMS,KAAK,cAAXT,0BAAAA,eAAeU;IAE5C,MAAM,EACJC,OAAO,EACPC,SAAS,EACTC,QAAQ,EACRC,KAAK,KAAK,EACVC,WAAW,MAAM,EACjB,cAAcT,QAAQC,YAAY,EAClC,iBAAiBS,YAAY,EAC7B,GAAGC,MACJ,GAAGjB;IAEJ,MAAMkB,aAAajC,MAAMkC,MAAM,CAAiB;IAChD,MAAMC,gBAAgBnC,MAAMkC,MAAM,CAAiB;IACnD,MAAME,YAAYpC,MAAMkC,MAAM,CAAiB;IAC/C,MAAMG,aAAarC,MAAMkC,MAAM,CAAiB;IAChD,MAAMI,eAAetC,MAAMkC,MAAM,CAAmB;IACpD,MAAMK,cAAcvC,MAAMkC,MAAM,CAAiB;IAEjD,MAAMM,OAAO9B,wBAAwBQ,CAAAA;YAAOH;eAAAA,CAAAA,cAAAA,MAAMyB,IAAI,cAAVzB,yBAAAA,cAAcG,IAAIuB,SAAS,CAACC,GAAG,CAAClB;IAAK;IACjF,MAAMmB,cAAc,IAAOb,aAAa,WAAW,CAACU,OAAOA;IAC3D,MAAMI,gBAAgBlC,wBAAwBQ,CAAAA,MAAOA,IAAI0B,aAAa;IACtE,MAAMC,UAAUnC,wBAAwBQ,CAAAA;YAAOA;eAAAA,CAAAA,wBAAAA,IAAI4B,YAAY,CAACC,GAAG,CAACvB,oBAArBN,mCAAAA,wBAA+B;IAAI;IAElF,MAAM8B,cAAc5C,iBAAiB,CAAC6C;QACpCvB,oBAAAA,8BAAAA,QAAUuB;QACV,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QACA,MAAMC,qBAAqBlB,WAAWmB,OAAO,IAAI9C,gBAAgB2B,WAAWmB,OAAO,EAAEH,MAAMI,MAAM;QACjG,IAAIF,oBAAoB;YACtB;QACF;QACA,MAAMG,qBAAqBjB,WAAWe,OAAO,IAAI9C,gBAAgB+B,WAAWe,OAAO,EAAEH,MAAMI,MAAM;QACjG,IAAIC,oBAAoB;YACtB;QACF;QACA,MAAMC,uBAAuBjB,aAAac,OAAO,IAAI9C,gBAAgBgC,aAAac,OAAO,EAAEH,MAAMI,MAAM;QACvG,IAAIE,sBAAsB;YACxB;QACF;QACA,MAAMC,wBAAwBrB,cAAciB,OAAO,IAAI9C,gBAAgB6B,cAAciB,OAAO,EAAEH,MAAMI,MAAM;QAE1GpD,SAASwD,uBAAuB,CAAC;gBAQ/B1C;YAPA,MAAM2C,OAAO;gBACXT;gBACAzB;gBACAgB,MAAMG;gBACNU,QAAQJ,MAAMU,aAAa;gBAC3BC,MAAMJ,wBAAwB/C,cAAcoD,eAAe,GAAGpD,cAAcqD,KAAK;YACnF;aACA/C,sBAAAA,MAAMgD,YAAY,cAAlBhD,0CAAAA,yBAAAA,OAAqBkC,OAAOS;YAC5BtC,oBAAoB;gBAClB,GAAGsC,IAAI;gBACP5B;gBACAkC,aAAa;YACf;YACA5C,oBAAoB;gBAClB,GAAGsC,IAAI;gBACP5B;gBACAP;gBACAyC,aAAa;gBACbJ,MAAMnD,cAAcqD,KAAK;YAC3B;QACF;IACF;IAEA,MAAMG,gBAAgB7D,iBAAiB,CAAC6C;QACtCtB,sBAAAA,gCAAAA,UAAYsB;QACZ,2EAA2E;QAC3E,IAAIA,MAAMC,kBAAkB,MAAMD,MAAMU,aAAa,KAAKV,MAAMI,MAAM,EAAE;YACtE;QACF;QACA,OAAQJ,MAAMiB,GAAG;YACf,KAAK1D;gBACH,IAAIoC,kBAAkB,QAAQ;wBAC5BN;qBAAAA,wBAAAA,aAAac,OAAO,cAApBd,4CAAAA,sBAAsB6B,KAAK;oBAC3B,qEAAqE;oBACrElB,MAAMmB,cAAc;gBACtB;gBACA;YACF,KAAK3D,cAAc4D,KAAK;gBAAE;oBACxB,OAAOpB,MAAMU,aAAa,CAACQ,KAAK;gBAClC;YACA,KAAK1D,cAAc6D,GAAG;YACtB,KAAK7D,cAAc8D,IAAI;YACvB,KAAK9D,cAAc+D,OAAO;YAC1B,KAAK/D,cAAcgE,SAAS;gBAC1B,OAAOrD,oBAAoB;oBACzB4C,aAAa;oBACbf;oBACAzB;oBACAM;oBACAP;oBACAqC,MAAMX,MAAMiB,GAAG;oBACfb,QAAQJ,MAAMU,aAAa;gBAC7B;YACF,KAAKlD,cAAciE,SAAS;gBAAE;oBAC5B,4DAA4D;oBAC5D,IAAIrD,UAAU,KAAK,CAACmB,MAAM;wBACxB;oBACF;oBACA,MAAMkB,OAAO;wBACXlC;wBACAyB;wBACAT,MAAMG;wBACNiB,MAAMX,MAAMiB,GAAG;wBACfb,QAAQJ,MAAMU,aAAa;oBAC7B;oBACA,IAAInB,MAAM;4BACRzB;yBAAAA,sBAAAA,MAAMgD,YAAY,cAAlBhD,0CAAAA,yBAAAA,OAAqBkC,OAAOS;oBAC9B;oBACA,OAAOtC,oBAAoB;wBACzB,GAAGsC,IAAI;wBACP5B;wBACAP;wBACAyC,aAAaxB,OAAO,SAAS;oBAC/B;gBACF;YACA,KAAK/B,cAAckE,UAAU;gBAC3B,gDAAgD;gBAChD,IAAI7C,aAAa,QAAQ;oBACvB;gBACF;gBACA,MAAM4B,OAAO;oBACXlC;oBACAyB;oBACAT,MAAMG;oBACNiB,MAAMX,MAAMiB,GAAG;oBACfb,QAAQJ,MAAMU,aAAa;gBAC7B;gBACA,IAAI,CAACnB,MAAM;wBACTzB;qBAAAA,uBAAAA,MAAMgD,YAAY,cAAlBhD,2CAAAA,0BAAAA,OAAqBkC,OAAOS;gBAC9B;gBACA,OAAOtC,oBAAoB;oBACzB,GAAGsC,IAAI;oBACP5B;oBACAP;oBACAyC,aAAaxB,OAAO,aAAa;gBACnC;QACJ;QACA,MAAMoC,uBACJ3B,MAAMiB,GAAG,CAACW,MAAM,KAAK,KAAK5B,MAAMiB,GAAG,CAACY,KAAK,CAAC,SAAS,CAAC7B,MAAM8B,MAAM,IAAI,CAAC9B,MAAM+B,OAAO,IAAI,CAAC/B,MAAMgC,OAAO;QACtG,IAAIL,sBAAsB;YACxBxD,oBAAoB;gBAClB4C,aAAa;gBACbf;gBACAI,QAAQJ,MAAMU,aAAa;gBAC3BnC;gBACAM;gBACA8B,MAAMnD,cAAcyE,SAAS;gBAC7B3D;YACF;QACF;IACF;IAEA,MAAM4D,eAAe/E,iBAAiB,CAAC6C;QACrCrB,qBAAAA,+BAAAA,SAAWqB;QACX,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QACA,MAAMI,qBAAqBjB,WAAWe,OAAO,IAAI9C,gBAAgB+B,WAAWe,OAAO,EAAEH,MAAMI,MAAM;QACjG,IAAIC,oBAAoB;YACtB;QACF;QACAlC,oBAAoB;YAClB4C,aAAa;YACbf;YACAzB;YACAM;YACA8B,MAAM;YACNP,QAAQJ,MAAMU,aAAa;YAC3Bd,SAASA,YAAY,UAAU,OAAO,CAACA;QACzC;IACF;IAEA,OAAO;QACLrB;QACAgB;QACAK;QACAR;QACAD;QACAE;QACAH;QACAI;QACAN;QACAH;QACAT;QACA+D,YAAY;YACVC,MAAM;QACR;QACA,4HAA4H;QAC5HC,gBAAgB;QAChB,4HAA4H;QAC5HC,kBAAkB;QAClBF,MAAMhF,KAAKmF,MAAM,CACftF,yBAAyB2B,IAAI;YAC3B4D,UAAU,CAAC;YACX,CAAC5E,0BAA0B,EAAEW;YAC7B,GAAGQ,IAAI;YACPhB,KAAKT,cAAcS,KAAKuB;YACxBmD,MAAM;YACN,cAAcrE;YACd,gBAAgBuB,kBAAkB,gBAAgBC,UAAU8C;YAC5D,gEAAgE;YAChE,iBAAiB/C,kBAAkB,WAAW,CAAC,CAACC,UAAU8C;YAC1D,iBAAiB5D,iBAAiB4D,YAAY5D,eAAeD,aAAa,WAAWU,OAAOmD;YAC5FjE,SAASsB;YACTrB,WAAWsC;YACXrC,UAAUuD;QACZ,IACA;YAAES,aAAa;QAAM;IAEzB;AACF;AAEA,SAASzE,gCACPJ,KAA2F;IAE3F,IAAI8E,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IACEhF,KAAK,CAAC,gBAAgB,KAAK4E,aAC3B5E,KAAK,CAAC,eAAe,KAAK4E,aAC1B5E,KAAK,CAAC,aAAa,KAAK4E,aACvB5E,MAAMQ,WAAW,KAAKoE,aAAa5E,KAAK,CAAC,aAAa,KAAK,GAC5D;YACA,sCAAsC;YACtCiF,QAAQC,KAAK,CAAuB,CAAC,sBACb,EAAEnF,qBAAqBoF,IAAI,CAAC;;;;;;;sEAQpD,CAAC;QACH;IACF;AACF"}
|
|
1
|
+
{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport {\n getIntrinsicElementProps,\n useId,\n useEventCallback,\n slot,\n elementContains,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TreeItemProps, TreeItemState, TreeItemValue } from './TreeItem.types';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\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 treeType = useTreeContext_unstable(ctx => ctx.treeType);\n if (treeType === 'flat') {\n warnIfNoProperPropsFlatTreeItem(props);\n }\n const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n const { level: contextLevel } = useSubtreeContext_unstable();\n const parentValue = useTreeItemContext_unstable(ctx => props.parentValue ?? ctx.value);\n\n // note, if the value is not externally provided,\n // then selection and expansion will not work properly\n const internalValue = useId('fuiTreeItemValue-');\n const value: TreeItemValue = props.value ?? internalValue;\n\n const {\n onClick,\n onKeyDown,\n onChange,\n as = 'div',\n itemType = 'leaf',\n 'aria-level': level = contextLevel,\n 'aria-selected': ariaSelected,\n 'aria-expanded': ariaExpanded,\n ...rest\n } = props;\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 const treeItemRef = React.useRef<HTMLDivElement>(null);\n\n const open = useTreeContext_unstable(ctx => props.open ?? ctx.openItems.has(value));\n const getNextOpen = () => (itemType === 'branch' ? !open : open);\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\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 isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n\n ReactDOM.unstable_batchedUpdates(() => {\n const data = {\n event,\n value,\n open: getNextOpen(),\n target: event.currentTarget,\n type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n } as const;\n props.onOpenChange?.(event, data);\n requestTreeResponse({\n ...data,\n itemType,\n requestType: 'open',\n });\n requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: 'navigate',\n type: treeDataTypes.Click,\n });\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 // Prevents the page from scrolling down when the spacebar is pressed\n event.preventDefault();\n }\n return;\n case treeDataTypes.Enter: {\n return event.currentTarget.click();\n }\n case treeDataTypes.End:\n case treeDataTypes.Home:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.ArrowDown:\n return requestTreeResponse({\n requestType: 'navigate',\n event,\n value,\n itemType,\n parentValue,\n type: event.key,\n target: event.currentTarget,\n });\n case treeDataTypes.ArrowLeft: {\n // do not navigate to parent if the item is on the top level\n if (level === 1 && !open) {\n return;\n }\n const data = {\n value,\n event,\n open: getNextOpen(),\n type: event.key,\n target: event.currentTarget,\n } as const;\n if (open) {\n props.onOpenChange?.(event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: open ? 'open' : 'navigate',\n });\n }\n case treeDataTypes.ArrowRight:\n // do not navigate or open if the item is a leaf\n if (itemType === 'leaf') {\n return;\n }\n const data = {\n value,\n event,\n open: getNextOpen(),\n type: event.key,\n target: event.currentTarget,\n } as const;\n if (!open) {\n props.onOpenChange?.(event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: open ? 'navigate' : 'open',\n });\n }\n const isTypeAheadCharacter =\n event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n if (isTypeAheadCharacter) {\n requestTreeResponse({\n requestType: 'navigate',\n event,\n target: event.currentTarget,\n value,\n itemType,\n type: treeDataTypes.TypeAhead,\n parentValue,\n });\n }\n });\n\n const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event);\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 requestType: 'selection',\n event,\n value,\n itemType,\n type: 'Change',\n target: event.currentTarget,\n checked: checked === 'mixed' ? true : !checked,\n });\n });\n\n return {\n value,\n open,\n checked,\n subtreeRef,\n layoutRef,\n selectionRef,\n expandIconRef,\n treeItemRef,\n actionsRef,\n itemType,\n level,\n components: {\n root: 'div',\n },\n // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false\n isAsideVisible: false,\n // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false\n isActionsVisible: false,\n root: slot.always(\n getIntrinsicElementProps(as, {\n tabIndex: -1,\n [dataTreeItemValueAttrName]: value,\n ...rest,\n ref: useMergedRefs(ref, treeItemRef),\n role: 'treeitem',\n 'aria-level': level,\n 'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n // Casting: when selectionMode is 'single', checked is a boolean\n 'aria-selected': ariaSelected !== undefined ? ariaSelected : selectionMode === 'single' ? !!checked : undefined,\n 'aria-expanded': ariaExpanded !== undefined ? ariaExpanded : itemType === 'branch' ? open : undefined,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onChange: handleChange,\n } as const),\n { elementType: 'div' },\n ),\n };\n}\n\nfunction warnIfNoProperPropsFlatTreeItem(\n props: Pick<TreeItemProps, 'aria-setsize' | 'aria-posinset' | 'aria-level' | 'parentValue'>,\n) {\n if (process.env.NODE_ENV !== 'production') {\n if (\n props['aria-posinset'] === undefined ||\n props['aria-setsize'] === undefined ||\n props['aria-level'] === undefined ||\n (props.parentValue === undefined && props['aria-level'] !== 1)\n ) {\n // eslint-disable-next-line no-console\n console.error(/** #__DE-INDENT__ */ `\n @fluentui/react-tree [${useTreeItem_unstable.name}]:\n A flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\n and \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n - \"aria-posinset\": the position of this treeitem in the current level of the tree.\n - \"aria-setsize\": the number of siblings in this level of the tree.\n - \"aria-level\": the current level of the treeitem.\n - \"parentValue\": the \"value\" property of the parent item of this item.\n `);\n }\n }\n}\n"],"names":["React","ReactDOM","getIntrinsicElementProps","useId","useEventCallback","slot","elementContains","useMergedRefs","Space","treeDataTypes","useTreeContext_unstable","useSubtreeContext_unstable","useTreeItemContext_unstable","dataTreeItemValueAttrName","useTreeItem_unstable","props","ref","treeType","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","parentValue","value","internalValue","onClick","onKeyDown","onChange","as","itemType","ariaSelected","ariaExpanded","rest","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","treeItemRef","open","openItems","has","getNextOpen","selectionMode","checked","checkedItems","get","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","unstable_batchedUpdates","data","currentTarget","type","ExpandIconClick","Click","onOpenChange","requestType","handleKeyDown","key","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleChange","components","root","isAsideVisible","isActionsVisible","always","tabIndex","role","undefined","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"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"}
|
|
@@ -1,9 +1,18 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { useFocusedElementChange } from '@fluentui/react-tabster';
|
|
3
|
+
import { elementContains } from '@fluentui/react-utilities';
|
|
2
4
|
/**
|
|
3
5
|
* https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
|
|
4
6
|
*/ export function useRovingTabIndex() {
|
|
5
7
|
const currentElementRef = React.useRef();
|
|
8
|
+
const walkerRef = React.useRef(null);
|
|
9
|
+
useFocusedElementChange((element)=>{
|
|
10
|
+
if ((element === null || element === void 0 ? void 0 : element.getAttribute('role')) === 'treeitem' && walkerRef.current && elementContains(walkerRef.current.root, element)) {
|
|
11
|
+
rove(element);
|
|
12
|
+
}
|
|
13
|
+
});
|
|
6
14
|
const initialize = React.useCallback((walker)=>{
|
|
15
|
+
walkerRef.current = walker;
|
|
7
16
|
walker.currentElement = walker.root;
|
|
8
17
|
let tabbableChild = walker.firstChild((element)=>element.tabIndex === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP);
|
|
9
18
|
walker.currentElement = walker.root;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useRovingTabIndexes.ts"],"sourcesContent":["import * as React from 'react';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\n\n/**\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n */\nexport function useRovingTabIndex() {\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","currentElementRef","useRef","
|
|
1
|
+
{"version":3,"sources":["useRovingTabIndexes.ts"],"sourcesContent":["import * as React from 'react';\nimport { HTMLElementWalker } from '../utils/createHTMLElementWalker';\nimport { useFocusedElementChange } from '@fluentui/react-tabster';\nimport { elementContains } from '@fluentui/react-utilities';\n\n/**\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n */\nexport function useRovingTabIndex() {\n const currentElementRef = React.useRef<HTMLElement>();\n const walkerRef = React.useRef<HTMLElementWalker | null>(null);\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) => {\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","useFocusedElementChange","elementContains","useRovingTabIndex","currentElementRef","useRef","walkerRef","element","getAttribute","current","root","rove","initialize","useCallback","walker","currentElement","tabbableChild","firstChild","tabIndex","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","nextElement","focus"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,eAAe,QAAQ,4BAA4B;AAE5D;;CAEC,GACD,OAAO,SAASC;IACd,MAAMC,oBAAoBJ,MAAMK,MAAM;IACtC,MAAMC,YAAYN,MAAMK,MAAM,CAA2B;IACzDJ,wBAAwBM,CAAAA;QACtB,IACEA,CAAAA,oBAAAA,8BAAAA,QAASC,YAAY,CAAC,aAAY,cAClCF,UAAUG,OAAO,IACjBP,gBAAgBI,UAAUG,OAAO,CAACC,IAAI,EAAEH,UACxC;YACAI,KAAKJ;QACP;IACF;IAEA,MAAMK,aAAaZ,MAAMa,WAAW,CAAC,CAACC;QACpCR,UAAUG,OAAO,GAAGK;QACpBA,OAAOC,cAAc,GAAGD,OAAOJ,IAAI;QACnC,IAAIM,gBAAgBF,OAAOG,UAAU,CAACV,CAAAA,UACpCA,QAAQW,QAAQ,KAAK,IAAIC,WAAWC,aAAa,GAAGD,WAAWE,WAAW;QAE5EP,OAAOC,cAAc,GAAGD,OAAOJ,IAAI;QACnCM,0BAAAA,2BAAAA,gBAAAA,gBAAkBF,OAAOG,UAAU;QACnC,IAAI,CAACD,eAAe;YAClB;QACF;QACAA,cAAcE,QAAQ,GAAG;QACzBd,kBAAkBK,OAAO,GAAGO;QAC5B,IAAIM,cAAkC;QACtC,MAAO,AAACA,CAAAA,cAAcR,OAAOQ,WAAW,EAAC,KAAMA,gBAAgBN,cAAe;YAC5EM,YAAYJ,QAAQ,GAAG,CAAC;QAC1B;IACF,GAAG,EAAE;IACL,MAAMP,OAAOX,MAAMa,WAAW,CAAC,CAACS;QAC9B,IAAI,CAAClB,kBAAkBK,OAAO,EAAE;YAC9B;QACF;QACAL,kBAAkBK,OAAO,CAACS,QAAQ,GAAG,CAAC;QACtCI,YAAYJ,QAAQ,GAAG;QACvBI,YAAYC,KAAK;QACjBnB,kBAAkBK,OAAO,GAAGa;IAC9B,GAAG,EAAE;IAEL,OAAO;QACLX;QACAC;IACF;AACF"}
|
|
@@ -32,7 +32,7 @@ function useTreeItem_unstable(props, ref) {
|
|
|
32
32
|
const internalValue = (0, _reactutilities.useId)('fuiTreeItemValue-');
|
|
33
33
|
var _props_value;
|
|
34
34
|
const value = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : internalValue;
|
|
35
|
-
const { onClick, onKeyDown, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, 'aria-selected': ariaSelected, ...rest } = props;
|
|
35
|
+
const { onClick, onKeyDown, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, 'aria-selected': ariaSelected, 'aria-expanded': ariaExpanded, ...rest } = props;
|
|
36
36
|
const actionsRef = _react.useRef(null);
|
|
37
37
|
const expandIconRef = _react.useRef(null);
|
|
38
38
|
const layoutRef = _react.useRef(null);
|
|
@@ -230,8 +230,8 @@ function useTreeItem_unstable(props, ref) {
|
|
|
230
230
|
'aria-level': level,
|
|
231
231
|
'aria-checked': selectionMode === 'multiselect' ? checked : undefined,
|
|
232
232
|
// Casting: when selectionMode is 'single', checked is a boolean
|
|
233
|
-
'aria-selected': selectionMode === 'single' ? !!checked : undefined,
|
|
234
|
-
'aria-expanded':
|
|
233
|
+
'aria-selected': ariaSelected !== undefined ? ariaSelected : selectionMode === 'single' ? !!checked : undefined,
|
|
234
|
+
'aria-expanded': ariaExpanded !== undefined ? ariaExpanded : itemType === 'branch' ? open : undefined,
|
|
235
235
|
onClick: handleClick,
|
|
236
236
|
onKeyDown: handleKeyDown,
|
|
237
237
|
onChange: handleChange
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getIntrinsicElementProps, useId, useEventCallback, slot, elementContains, useMergedRefs } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\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 */ export function useTreeItem_unstable(props, ref) {\n const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);\n if (treeType === 'flat') {\n warnIfNoProperPropsFlatTreeItem(props);\n }\n const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);\n const { level: contextLevel } = useSubtreeContext_unstable();\n const parentValue = useTreeItemContext_unstable((ctx)=>{\n var _props_parentValue;\n return (_props_parentValue = props.parentValue) !== null && _props_parentValue !== void 0 ? _props_parentValue : ctx.value;\n });\n // note, if the value is not externally provided,\n // then selection and expansion will not work properly\n const internalValue = useId('fuiTreeItemValue-');\n var _props_value;\n const value = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : internalValue;\n const { onClick, onKeyDown, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, 'aria-selected': ariaSelected, ...rest } = props;\n const actionsRef = React.useRef(null);\n const expandIconRef = React.useRef(null);\n const layoutRef = React.useRef(null);\n const subtreeRef = React.useRef(null);\n const selectionRef = React.useRef(null);\n const treeItemRef = React.useRef(null);\n const open = useTreeContext_unstable((ctx)=>{\n var _props_open;\n return (_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value);\n });\n const getNextOpen = ()=>itemType === 'branch' ? !open : open;\n const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n const checked = useTreeContext_unstable((ctx)=>{\n var _ctx_checkedItems_get;\n return (_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false;\n });\n const handleClick = useEventCallback((event)=>{\n onClick === null || onClick === void 0 ? void 0 : onClick(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target);\n if (isEventFromActions) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n if (isEventFromSubtree) {\n return;\n }\n const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target);\n if (isEventFromSelection) {\n return;\n }\n const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);\n ReactDOM.unstable_batchedUpdates(()=>{\n var _props_onOpenChange;\n const data = {\n event,\n value,\n open: getNextOpen(),\n target: event.currentTarget,\n type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click\n };\n (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n requestTreeResponse({\n ...data,\n itemType,\n requestType: 'open'\n });\n requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: 'navigate',\n type: treeDataTypes.Click\n });\n });\n });\n const handleKeyDown = useEventCallback((event)=>{\n onKeyDown === null || onKeyDown === void 0 ? void 0 : 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 var _selectionRef_current;\n (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();\n // Prevents the page from scrolling down when the spacebar is pressed\n event.preventDefault();\n }\n return;\n case treeDataTypes.Enter:\n {\n return event.currentTarget.click();\n }\n case treeDataTypes.End:\n case treeDataTypes.Home:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.ArrowDown:\n return requestTreeResponse({\n requestType: 'navigate',\n event,\n value,\n itemType,\n parentValue,\n type: event.key,\n target: event.currentTarget\n });\n case treeDataTypes.ArrowLeft:\n {\n // do not navigate to parent if the item is on the top level\n if (level === 1 && !open) {\n return;\n }\n const data = {\n value,\n event,\n open: getNextOpen(),\n type: event.key,\n target: event.currentTarget\n };\n if (open) {\n var _props_onOpenChange;\n (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: open ? 'open' : 'navigate'\n });\n }\n case treeDataTypes.ArrowRight:\n // do not navigate or open if the item is a leaf\n if (itemType === 'leaf') {\n return;\n }\n const data = {\n value,\n event,\n open: getNextOpen(),\n type: event.key,\n target: event.currentTarget\n };\n if (!open) {\n var _props_onOpenChange1;\n (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: open ? 'navigate' : 'open'\n });\n }\n const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n if (isTypeAheadCharacter) {\n requestTreeResponse({\n requestType: 'navigate',\n event,\n target: event.currentTarget,\n value,\n itemType,\n type: treeDataTypes.TypeAhead,\n parentValue\n });\n }\n });\n const handleChange = useEventCallback((event)=>{\n onChange === null || onChange === void 0 ? void 0 : onChange(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n if (isEventFromSubtree) {\n return;\n }\n requestTreeResponse({\n requestType: 'selection',\n event,\n value,\n itemType,\n type: 'Change',\n target: event.currentTarget,\n checked: checked === 'mixed' ? true : !checked\n });\n });\n return {\n value,\n open,\n checked,\n subtreeRef,\n layoutRef,\n selectionRef,\n expandIconRef,\n treeItemRef,\n actionsRef,\n itemType,\n level,\n components: {\n root: 'div'\n },\n // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false\n isAsideVisible: false,\n // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false\n isActionsVisible: false,\n root: slot.always(getIntrinsicElementProps(as, {\n tabIndex: -1,\n [dataTreeItemValueAttrName]: value,\n ...rest,\n ref: useMergedRefs(ref, treeItemRef),\n role: 'treeitem',\n 'aria-level': level,\n 'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n // Casting: when selectionMode is 'single', checked is a boolean\n 'aria-selected': selectionMode === 'single' ? !!checked : undefined,\n 'aria-expanded': ariaSelected !== undefined ? ariaSelected : itemType === 'branch' ? open : undefined,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onChange: handleChange\n }), {\n elementType: 'div'\n })\n };\n}\nfunction warnIfNoProperPropsFlatTreeItem(props) {\n if (process.env.NODE_ENV !== 'production') {\n if (props['aria-posinset'] === undefined || props['aria-setsize'] === undefined || props['aria-level'] === undefined || props.parentValue === undefined && props['aria-level'] !== 1) {\n // eslint-disable-next-line no-console\n console.error(`@fluentui/react-tree [${useTreeItem_unstable.name}]:\nA flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\nand \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n- \"aria-posinset\": the position of this treeitem in the current level of the tree.\n- \"aria-setsize\": the number of siblings in this level of the tree.\n- \"aria-level\": the current level of the treeitem.\n- \"parentValue\": the \"value\" property of the parent item of this item.`);\n }\n }\n}\n"],"names":["useTreeItem_unstable","props","ref","treeType","useTreeContext_unstable","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","useSubtreeContext_unstable","parentValue","useTreeItemContext_unstable","_props_parentValue","value","internalValue","useId","_props_value","onClick","onKeyDown","onChange","as","itemType","ariaSelected","rest","actionsRef","React","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","treeItemRef","open","_props_open","openItems","has","getNextOpen","selectionMode","checked","_ctx_checkedItems_get","checkedItems","get","handleClick","useEventCallback","event","isDefaultPrevented","isEventFromActions","current","elementContains","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","ReactDOM","unstable_batchedUpdates","_props_onOpenChange","data","currentTarget","type","treeDataTypes","ExpandIconClick","Click","onOpenChange","call","requestType","handleKeyDown","key","Space","_selectionRef_current","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","_props_onOpenChange1","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleChange","components","root","isAsideVisible","isActionsVisible","slot","always","getIntrinsicElementProps","tabIndex","dataTreeItemValueAttrName","useMergedRefs","role","undefined","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getIntrinsicElementProps, useId, useEventCallback, slot, elementContains, useMergedRefs } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\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 */ export function useTreeItem_unstable(props, ref) {\n const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);\n if (treeType === 'flat') {\n warnIfNoProperPropsFlatTreeItem(props);\n }\n const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);\n const { level: contextLevel } = useSubtreeContext_unstable();\n const parentValue = useTreeItemContext_unstable((ctx)=>{\n var _props_parentValue;\n return (_props_parentValue = props.parentValue) !== null && _props_parentValue !== void 0 ? _props_parentValue : ctx.value;\n });\n // note, if the value is not externally provided,\n // then selection and expansion will not work properly\n const internalValue = useId('fuiTreeItemValue-');\n var _props_value;\n const value = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : internalValue;\n const { onClick, onKeyDown, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, 'aria-selected': ariaSelected, 'aria-expanded': ariaExpanded, ...rest } = props;\n const actionsRef = React.useRef(null);\n const expandIconRef = React.useRef(null);\n const layoutRef = React.useRef(null);\n const subtreeRef = React.useRef(null);\n const selectionRef = React.useRef(null);\n const treeItemRef = React.useRef(null);\n const open = useTreeContext_unstable((ctx)=>{\n var _props_open;\n return (_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value);\n });\n const getNextOpen = ()=>itemType === 'branch' ? !open : open;\n const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n const checked = useTreeContext_unstable((ctx)=>{\n var _ctx_checkedItems_get;\n return (_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false;\n });\n const handleClick = useEventCallback((event)=>{\n onClick === null || onClick === void 0 ? void 0 : onClick(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target);\n if (isEventFromActions) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n if (isEventFromSubtree) {\n return;\n }\n const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target);\n if (isEventFromSelection) {\n return;\n }\n const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);\n ReactDOM.unstable_batchedUpdates(()=>{\n var _props_onOpenChange;\n const data = {\n event,\n value,\n open: getNextOpen(),\n target: event.currentTarget,\n type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click\n };\n (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n requestTreeResponse({\n ...data,\n itemType,\n requestType: 'open'\n });\n requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: 'navigate',\n type: treeDataTypes.Click\n });\n });\n });\n const handleKeyDown = useEventCallback((event)=>{\n onKeyDown === null || onKeyDown === void 0 ? void 0 : 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 var _selectionRef_current;\n (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();\n // Prevents the page from scrolling down when the spacebar is pressed\n event.preventDefault();\n }\n return;\n case treeDataTypes.Enter:\n {\n return event.currentTarget.click();\n }\n case treeDataTypes.End:\n case treeDataTypes.Home:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.ArrowDown:\n return requestTreeResponse({\n requestType: 'navigate',\n event,\n value,\n itemType,\n parentValue,\n type: event.key,\n target: event.currentTarget\n });\n case treeDataTypes.ArrowLeft:\n {\n // do not navigate to parent if the item is on the top level\n if (level === 1 && !open) {\n return;\n }\n const data = {\n value,\n event,\n open: getNextOpen(),\n type: event.key,\n target: event.currentTarget\n };\n if (open) {\n var _props_onOpenChange;\n (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: open ? 'open' : 'navigate'\n });\n }\n case treeDataTypes.ArrowRight:\n // do not navigate or open if the item is a leaf\n if (itemType === 'leaf') {\n return;\n }\n const data = {\n value,\n event,\n open: getNextOpen(),\n type: event.key,\n target: event.currentTarget\n };\n if (!open) {\n var _props_onOpenChange1;\n (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: open ? 'navigate' : 'open'\n });\n }\n const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n if (isTypeAheadCharacter) {\n requestTreeResponse({\n requestType: 'navigate',\n event,\n target: event.currentTarget,\n value,\n itemType,\n type: treeDataTypes.TypeAhead,\n parentValue\n });\n }\n });\n const handleChange = useEventCallback((event)=>{\n onChange === null || onChange === void 0 ? void 0 : onChange(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n if (isEventFromSubtree) {\n return;\n }\n requestTreeResponse({\n requestType: 'selection',\n event,\n value,\n itemType,\n type: 'Change',\n target: event.currentTarget,\n checked: checked === 'mixed' ? true : !checked\n });\n });\n return {\n value,\n open,\n checked,\n subtreeRef,\n layoutRef,\n selectionRef,\n expandIconRef,\n treeItemRef,\n actionsRef,\n itemType,\n level,\n components: {\n root: 'div'\n },\n // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false\n isAsideVisible: false,\n // FIXME: this property is not necessary anymore, but as removing it would be a breaking change, we need to keep it as false\n isActionsVisible: false,\n root: slot.always(getIntrinsicElementProps(as, {\n tabIndex: -1,\n [dataTreeItemValueAttrName]: value,\n ...rest,\n ref: useMergedRefs(ref, treeItemRef),\n role: 'treeitem',\n 'aria-level': level,\n 'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n // Casting: when selectionMode is 'single', checked is a boolean\n 'aria-selected': ariaSelected !== undefined ? ariaSelected : selectionMode === 'single' ? !!checked : undefined,\n 'aria-expanded': ariaExpanded !== undefined ? ariaExpanded : itemType === 'branch' ? open : undefined,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onChange: handleChange\n }), {\n elementType: 'div'\n })\n };\n}\nfunction warnIfNoProperPropsFlatTreeItem(props) {\n if (process.env.NODE_ENV !== 'production') {\n if (props['aria-posinset'] === undefined || props['aria-setsize'] === undefined || props['aria-level'] === undefined || props.parentValue === undefined && props['aria-level'] !== 1) {\n // eslint-disable-next-line no-console\n console.error(`@fluentui/react-tree [${useTreeItem_unstable.name}]:\nA flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\nand \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n- \"aria-posinset\": the position of this treeitem in the current level of the tree.\n- \"aria-setsize\": the number of siblings in this level of the tree.\n- \"aria-level\": the current level of the treeitem.\n- \"parentValue\": the \"value\" property of the parent item of this item.`);\n }\n }\n}\n"],"names":["useTreeItem_unstable","props","ref","treeType","useTreeContext_unstable","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","useSubtreeContext_unstable","parentValue","useTreeItemContext_unstable","_props_parentValue","value","internalValue","useId","_props_value","onClick","onKeyDown","onChange","as","itemType","ariaSelected","ariaExpanded","rest","actionsRef","React","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","treeItemRef","open","_props_open","openItems","has","getNextOpen","selectionMode","checked","_ctx_checkedItems_get","checkedItems","get","handleClick","useEventCallback","event","isDefaultPrevented","isEventFromActions","current","elementContains","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","ReactDOM","unstable_batchedUpdates","_props_onOpenChange","data","currentTarget","type","treeDataTypes","ExpandIconClick","Click","onOpenChange","call","requestType","handleKeyDown","key","Space","_selectionRef_current","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","_props_onOpenChange1","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleChange","components","root","isAsideVisible","isActionsVisible","slot","always","getIntrinsicElementProps","tabIndex","dataTreeItemValueAttrName","useMergedRefs","role","undefined","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"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"}
|
|
@@ -10,9 +10,18 @@ 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 _reacttabster = require("@fluentui/react-tabster");
|
|
14
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
|
13
15
|
function useRovingTabIndex() {
|
|
14
16
|
const currentElementRef = _react.useRef();
|
|
17
|
+
const walkerRef = _react.useRef(null);
|
|
18
|
+
(0, _reacttabster.useFocusedElementChange)((element)=>{
|
|
19
|
+
if ((element === null || element === void 0 ? void 0 : element.getAttribute('role')) === 'treeitem' && walkerRef.current && (0, _reactutilities.elementContains)(walkerRef.current.root, element)) {
|
|
20
|
+
rove(element);
|
|
21
|
+
}
|
|
22
|
+
});
|
|
15
23
|
const initialize = _react.useCallback((walker)=>{
|
|
24
|
+
walkerRef.current = walker;
|
|
16
25
|
walker.currentElement = walker.root;
|
|
17
26
|
let tabbableChild = walker.firstChild((element)=>element.tabIndex === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP);
|
|
18
27
|
walker.currentElement = walker.root;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useRovingTabIndexes.js"],"sourcesContent":["import * as React from 'react';\n/**\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n */ export function useRovingTabIndex() {\n const currentElementRef = React.useRef();\n const initialize = React.useCallback((walker)=>{\n walker.currentElement = walker.root;\n let tabbableChild = walker.firstChild((element)=>element.tabIndex === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP);\n walker.currentElement = walker.root;\n tabbableChild !== null && tabbableChild !== void 0 ? tabbableChild : tabbableChild = walker.firstChild();\n if (!tabbableChild) {\n return;\n }\n tabbableChild.tabIndex = 0;\n currentElementRef.current = tabbableChild;\n let nextElement = null;\n while((nextElement = walker.nextElement()) && nextElement !== tabbableChild){\n nextElement.tabIndex = -1;\n }\n }, []);\n const rove = React.useCallback((nextElement)=>{\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 return {\n rove,\n initialize\n };\n}\n"],"names":["useRovingTabIndex","currentElementRef","React","useRef","
|
|
1
|
+
{"version":3,"sources":["useRovingTabIndexes.js"],"sourcesContent":["import * as React from 'react';\nimport { useFocusedElementChange } from '@fluentui/react-tabster';\nimport { elementContains } from '@fluentui/react-utilities';\n/**\n * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n */ export function useRovingTabIndex() {\n const currentElementRef = React.useRef();\n const walkerRef = React.useRef(null);\n useFocusedElementChange((element)=>{\n if ((element === null || element === void 0 ? void 0 : element.getAttribute('role')) === 'treeitem' && walkerRef.current && elementContains(walkerRef.current.root, element)) {\n rove(element);\n }\n });\n const initialize = React.useCallback((walker)=>{\n walkerRef.current = walker;\n walker.currentElement = walker.root;\n let tabbableChild = walker.firstChild((element)=>element.tabIndex === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP);\n walker.currentElement = walker.root;\n tabbableChild !== null && tabbableChild !== void 0 ? tabbableChild : tabbableChild = walker.firstChild();\n if (!tabbableChild) {\n return;\n }\n tabbableChild.tabIndex = 0;\n currentElementRef.current = tabbableChild;\n let nextElement = null;\n while((nextElement = walker.nextElement()) && nextElement !== tabbableChild){\n nextElement.tabIndex = -1;\n }\n }, []);\n const rove = React.useCallback((nextElement)=>{\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 return {\n rove,\n initialize\n };\n}\n"],"names":["useRovingTabIndex","currentElementRef","React","useRef","walkerRef","useFocusedElementChange","element","getAttribute","current","elementContains","root","rove","initialize","useCallback","walker","currentElement","tabbableChild","firstChild","tabIndex","NodeFilter","FILTER_ACCEPT","FILTER_SKIP","nextElement","focus"],"mappings":";;;;+BAKoBA;;;eAAAA;;;;iEALG;8BACiB;gCACR;AAGrB,SAASA;IAChB,MAAMC,oBAAoBC,OAAMC,MAAM;IACtC,MAAMC,YAAYF,OAAMC,MAAM,CAAC;IAC/BE,IAAAA,qCAAuB,EAAC,CAACC;QACrB,IAAI,AAACA,CAAAA,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQC,YAAY,CAAC,OAAM,MAAO,cAAcH,UAAUI,OAAO,IAAIC,IAAAA,+BAAe,EAACL,UAAUI,OAAO,CAACE,IAAI,EAAEJ,UAAU;YAC1KK,KAAKL;QACT;IACJ;IACA,MAAMM,aAAaV,OAAMW,WAAW,CAAC,CAACC;QAClCV,UAAUI,OAAO,GAAGM;QACpBA,OAAOC,cAAc,GAAGD,OAAOJ,IAAI;QACnC,IAAIM,gBAAgBF,OAAOG,UAAU,CAAC,CAACX,UAAUA,QAAQY,QAAQ,KAAK,IAAIC,WAAWC,aAAa,GAAGD,WAAWE,WAAW;QAC3HP,OAAOC,cAAc,GAAGD,OAAOJ,IAAI;QACnCM,kBAAkB,QAAQA,kBAAkB,KAAK,IAAIA,gBAAgBA,gBAAgBF,OAAOG,UAAU;QACtG,IAAI,CAACD,eAAe;YAChB;QACJ;QACAA,cAAcE,QAAQ,GAAG;QACzBjB,kBAAkBO,OAAO,GAAGQ;QAC5B,IAAIM,cAAc;QAClB,MAAM,AAACA,CAAAA,cAAcR,OAAOQ,WAAW,EAAC,KAAMA,gBAAgBN,cAAc;YACxEM,YAAYJ,QAAQ,GAAG,CAAC;QAC5B;IACJ,GAAG,EAAE;IACL,MAAMP,OAAOT,OAAMW,WAAW,CAAC,CAACS;QAC5B,IAAI,CAACrB,kBAAkBO,OAAO,EAAE;YAC5B;QACJ;QACAP,kBAAkBO,OAAO,CAACU,QAAQ,GAAG,CAAC;QACtCI,YAAYJ,QAAQ,GAAG;QACvBI,YAAYC,KAAK;QACjBtB,kBAAkBO,OAAO,GAAGc;IAChC,GAAG,EAAE;IACL,OAAO;QACHX;QACAC;IACJ;AACJ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-tree",
|
|
3
|
-
"version": "9.4.
|
|
3
|
+
"version": "9.4.41",
|
|
4
4
|
"description": "Tree component for Fluent UI React",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -37,18 +37,18 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@fluentui/keyboard-keys": "^9.0.7",
|
|
40
|
-
"@fluentui/react-aria": "^9.
|
|
41
|
-
"@fluentui/react-avatar": "^9.6.
|
|
42
|
-
"@fluentui/react-button": "^9.3.
|
|
43
|
-
"@fluentui/react-checkbox": "^9.2.
|
|
44
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
45
|
-
"@fluentui/react-icons": "^2.0.
|
|
46
|
-
"@fluentui/react-radio": "^9.2.
|
|
47
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
48
|
-
"@fluentui/react-tabster": "^9.
|
|
40
|
+
"@fluentui/react-aria": "^9.11.1",
|
|
41
|
+
"@fluentui/react-avatar": "^9.6.24",
|
|
42
|
+
"@fluentui/react-button": "^9.3.78",
|
|
43
|
+
"@fluentui/react-checkbox": "^9.2.23",
|
|
44
|
+
"@fluentui/react-context-selector": "^9.1.59",
|
|
45
|
+
"@fluentui/react-icons": "^2.0.237",
|
|
46
|
+
"@fluentui/react-radio": "^9.2.18",
|
|
47
|
+
"@fluentui/react-shared-contexts": "^9.18.0",
|
|
48
|
+
"@fluentui/react-tabster": "^9.21.1",
|
|
49
49
|
"@fluentui/react-theme": "^9.1.19",
|
|
50
|
-
"@fluentui/react-utilities": "^9.18.
|
|
51
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
50
|
+
"@fluentui/react-utilities": "^9.18.8",
|
|
51
|
+
"@fluentui/react-jsx-runtime": "^9.0.37",
|
|
52
52
|
"@griffel/react": "^1.5.14",
|
|
53
53
|
"@swc/helpers": "^0.5.1"
|
|
54
54
|
},
|