@fluentui/react-accordion 9.0.0-rc.6 → 9.0.0-rc.7
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 +29 -8
- package/CHANGELOG.md +19 -9
- package/lib/components/Accordion/useAccordion.js +2 -1
- package/lib/components/Accordion/useAccordion.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItem.js +1 -5
- package/lib/components/AccordionItem/useAccordionItem.js.map +1 -1
- package/lib/components/AccordionPanel/useAccordionPanel.js +11 -1
- package/lib/components/AccordionPanel/useAccordionPanel.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordion.js +2 -1
- package/lib-commonjs/components/Accordion/useAccordion.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItem.js +1 -6
- package/lib-commonjs/components/AccordionItem/useAccordionItem.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js +14 -1
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,28 @@
|
|
|
2
2
|
"name": "@fluentui/react-accordion",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 25 Apr 2022 09:31:17 GMT",
|
|
6
|
+
"tag": "@fluentui/react-accordion_v9.0.0-rc.7",
|
|
7
|
+
"version": "9.0.0-rc.7",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "marata@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-accordion",
|
|
13
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d",
|
|
14
|
+
"comment": "Adjusting accordion keyboard navigation."
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-accordion",
|
|
19
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.7",
|
|
20
|
+
"commit": "02ca1d3c198452c1693067f5f18bd01b2ed5d6e6"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Tue, 19 Apr 2022 19:17:06 GMT",
|
|
6
27
|
"tag": "@fluentui/react-accordion_v9.0.0-rc.6",
|
|
7
28
|
"version": "9.0.0-rc.6",
|
|
8
29
|
"comments": {
|
|
@@ -49,43 +70,43 @@
|
|
|
49
70
|
"author": "beachball",
|
|
50
71
|
"package": "@fluentui/react-accordion",
|
|
51
72
|
"comment": "Bump @fluentui/react-aria to v9.0.0-rc.6",
|
|
52
|
-
"commit": "
|
|
73
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
53
74
|
},
|
|
54
75
|
{
|
|
55
76
|
"author": "beachball",
|
|
56
77
|
"package": "@fluentui/react-accordion",
|
|
57
78
|
"comment": "Bump @fluentui/react-context-selector to v9.0.0-rc.6",
|
|
58
|
-
"commit": "
|
|
79
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
59
80
|
},
|
|
60
81
|
{
|
|
61
82
|
"author": "beachball",
|
|
62
83
|
"package": "@fluentui/react-accordion",
|
|
63
84
|
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.5",
|
|
64
|
-
"commit": "
|
|
85
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
65
86
|
},
|
|
66
87
|
{
|
|
67
88
|
"author": "beachball",
|
|
68
89
|
"package": "@fluentui/react-accordion",
|
|
69
90
|
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.6",
|
|
70
|
-
"commit": "
|
|
91
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
71
92
|
},
|
|
72
93
|
{
|
|
73
94
|
"author": "beachball",
|
|
74
95
|
"package": "@fluentui/react-accordion",
|
|
75
96
|
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
|
|
76
|
-
"commit": "
|
|
97
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
77
98
|
},
|
|
78
99
|
{
|
|
79
100
|
"author": "beachball",
|
|
80
101
|
"package": "@fluentui/react-accordion",
|
|
81
102
|
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
|
|
82
|
-
"commit": "
|
|
103
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
83
104
|
},
|
|
84
105
|
{
|
|
85
106
|
"author": "beachball",
|
|
86
107
|
"package": "@fluentui/react-accordion",
|
|
87
108
|
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4",
|
|
88
|
-
"commit": "
|
|
109
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
89
110
|
}
|
|
90
111
|
]
|
|
91
112
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-accordion
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 25 Apr 2022 09:31:17 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-rc.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.0.0-rc.7)
|
|
8
|
+
|
|
9
|
+
Mon, 25 Apr 2022 09:31:17 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.0.0-rc.6..@fluentui/react-accordion_v9.0.0-rc.7)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Adjusting accordion keyboard navigation. ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by marata@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.7 ([PR #22601](https://github.com/microsoft/fluentui/pull/22601) by beachball)
|
|
16
|
+
|
|
7
17
|
## [9.0.0-rc.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.0.0-rc.6)
|
|
8
18
|
|
|
9
|
-
Tue, 19 Apr 2022 19:
|
|
19
|
+
Tue, 19 Apr 2022 19:17:06 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.0.0-rc.5..@fluentui/react-accordion_v9.0.0-rc.6)
|
|
11
21
|
|
|
12
22
|
### Changes
|
|
@@ -15,13 +25,13 @@ Tue, 19 Apr 2022 19:14:16 GMT
|
|
|
15
25
|
- add missing dependencies ([PR #21924](https://github.com/microsoft/fluentui/pull/21924) by martinhochel@microsoft.com)
|
|
16
26
|
- update react-icons version to ^2.0.166-rc.3 from ^2.0.159-beta.10 ([PR #22512](https://github.com/microsoft/fluentui/pull/22512) by seanmonahan@microsoft.com)
|
|
17
27
|
- chore: Update Griffel to latest version ([PR #21976](https://github.com/microsoft/fluentui/pull/21976) by olfedias@microsoft.com)
|
|
18
|
-
- Bump @fluentui/react-aria to v9.0.0-rc.6 ([PR #
|
|
19
|
-
- Bump @fluentui/react-context-selector to v9.0.0-rc.6 ([PR #
|
|
20
|
-
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.5 ([PR #
|
|
21
|
-
- Bump @fluentui/react-tabster to v9.0.0-rc.6 ([PR #
|
|
22
|
-
- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #
|
|
23
|
-
- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #
|
|
24
|
-
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #
|
|
28
|
+
- Bump @fluentui/react-aria to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
29
|
+
- Bump @fluentui/react-context-selector to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
30
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.5 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
31
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
32
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
33
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
34
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
25
35
|
|
|
26
36
|
## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.0.0-rc.5)
|
|
27
37
|
|
|
@@ -25,7 +25,8 @@ export const useAccordion_unstable = (props, ref) => {
|
|
|
25
25
|
initialState: []
|
|
26
26
|
});
|
|
27
27
|
const arrowNavigationProps = useArrowNavigationGroup({
|
|
28
|
-
circular: navigation === 'circular'
|
|
28
|
+
circular: navigation === 'circular',
|
|
29
|
+
tabbable: true
|
|
29
30
|
});
|
|
30
31
|
const requestToggle = useEventCallback((event, data) => {
|
|
31
32
|
onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, data);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Accordion/useAccordion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,oBAAhC,EAAsD,gBAAtD,QAA8E,2BAA9E;AAGA,SAAS,uBAAT,QAAwC,yBAAxC;AAEA;;;;AAIG;;AACH,OAAO,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAwB,GAAxB,KAAuE;AAC1G,QAAM;AACJ,IAAA,SAAS,EAAE,mBADP;AAEJ,IAAA,gBAFI;AAGJ,IAAA,QAAQ,GAAG,KAHP;AAIJ,IAAA,WAAW,GAAG,KAJV;AAKJ,IAAA,QALI;AAMJ,IAAA;AANI,MAOF,KAPJ;AAQA,QAAM,CAAC,SAAD,EAAY,YAAZ,IAA4B,oBAAoB,CAAC;AACrD,IAAA,KAAK,EAAE,KAAK,CAAC,OAAN,CAAc,MAAM,eAAe,CAAC,mBAAD,CAAnC,EAA0D,CAAC,mBAAD,CAA1D,CAD8C;AAErD,IAAA,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAAE,MAAA,gBAAF;AAAoB,MAAA;AAApB,KAAD,CAFE;AAGrD,IAAA,YAAY,EAAE;AAHuC,GAAD,CAAtD;AAMA,QAAM,oBAAoB,GAAG,uBAAuB,CAAC;AACnD,IAAA,QAAQ,EAAE,UAAU,KAAK;
|
|
1
|
+
{"version":3,"sources":["components/Accordion/useAccordion.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { AccordionProps, AccordionState, AccordionToggleData, AccordionToggleEvent } from './Accordion.types';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Returns the props and state required to render the component\n * @param props - Accordion properties\n * @param ref - reference to root HTMLElement of Accordion\n */\nexport const useAccordion_unstable = (props: AccordionProps, ref: React.Ref<HTMLElement>): AccordionState => {\n const {\n openItems: controlledOpenItems,\n defaultOpenItems,\n multiple = false,\n collapsible = false,\n onToggle,\n navigation,\n } = props;\n const [openItems, setOpenItems] = useControllableState({\n state: React.useMemo(() => normalizeValues(controlledOpenItems), [controlledOpenItems]),\n defaultState: () => initializeUncontrolledOpenItems({ defaultOpenItems, multiple }),\n initialState: [],\n });\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: navigation === 'circular',\n tabbable: true,\n });\n\n const requestToggle = useEventCallback((event: AccordionToggleEvent, data: AccordionToggleData) => {\n onToggle?.(event, data);\n setOpenItems(previousOpenItems =>\n updateOpenItems(data.value, previousOpenItems, {\n collapsible,\n multiple,\n }),\n );\n });\n\n return {\n multiple,\n collapsible,\n navigation,\n openItems,\n requestToggle,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ...props,\n ...(navigation ? arrowNavigationProps : {}),\n ref,\n }),\n };\n};\n\n/**\n * Initial value for the uncontrolled case of the list of open indexes\n */\nfunction initializeUncontrolledOpenItems({\n defaultOpenItems,\n multiple,\n}: Pick<AccordionProps, 'defaultOpenItems' | 'multiple'>): AccordionItemValue[] {\n if (defaultOpenItems !== undefined) {\n if (Array.isArray(defaultOpenItems)) {\n return multiple ? defaultOpenItems : [defaultOpenItems[0]];\n }\n return [defaultOpenItems];\n }\n return [];\n}\n\n/**\n * Updates the list of open indexes based on an index that changes\n * @param value - the index that will change\n * @param previousOpenItems - list of current open indexes\n * @param param2 - {multiple, collapsible}\n */\nfunction updateOpenItems(\n value: AccordionItemValue,\n previousOpenItems: AccordionItemValue[],\n { multiple, collapsible }: Pick<AccordionState, 'multiple' | 'collapsible'>,\n) {\n if (multiple) {\n if (previousOpenItems.includes(value)) {\n if (previousOpenItems.length > 1 || collapsible) {\n return previousOpenItems.filter(i => i !== value);\n }\n } else {\n return [...previousOpenItems, value].sort();\n }\n } else {\n return previousOpenItems[0] === value && collapsible ? [] : [value];\n }\n return previousOpenItems;\n}\n\n/**\n * Normalizes Accordion index into an array of indexes\n */\nfunction normalizeValues(index?: AccordionItemValue | AccordionItemValue[]): AccordionItemValue[] | undefined {\n if (index === undefined) {\n return undefined;\n }\n return Array.isArray(index) ? index : [index];\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { getNativeElementProps } from '@fluentui/react-utilities';
|
|
3
|
-
import { useFocusableGroup } from '@fluentui/react-tabster';
|
|
4
3
|
import { useContextSelector } from '@fluentui/react-context-selector';
|
|
5
4
|
import { AccordionContext } from '../Accordion/AccordionContext';
|
|
6
5
|
/**
|
|
@@ -14,8 +13,6 @@ export const useAccordionItem_unstable = (props, ref) => {
|
|
|
14
13
|
value,
|
|
15
14
|
disabled = false
|
|
16
15
|
} = props;
|
|
17
|
-
const navigation = useContextSelector(AccordionContext, ctx => ctx.navigation);
|
|
18
|
-
const focusableProps = useFocusableGroup();
|
|
19
16
|
const requestToggle = useContextSelector(AccordionContext, ctx => ctx.requestToggle);
|
|
20
17
|
const open = useContextSelector(AccordionContext, ctx => ctx.openItems.includes(value));
|
|
21
18
|
const onAccordionHeaderClick = React.useCallback(ev => requestToggle(ev, {
|
|
@@ -31,8 +28,7 @@ export const useAccordionItem_unstable = (props, ref) => {
|
|
|
31
28
|
},
|
|
32
29
|
root: getNativeElementProps('div', {
|
|
33
30
|
ref: ref,
|
|
34
|
-
...props
|
|
35
|
-
...(navigation && focusableProps)
|
|
31
|
+
...props
|
|
36
32
|
})
|
|
37
33
|
};
|
|
38
34
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AccordionItem/useAccordionItem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,
|
|
1
|
+
{"version":3,"sources":["components/AccordionItem/useAccordionItem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,kBAAT,QAAmC,kCAAnC;AACA,SAAS,gBAAT,QAAiC,+BAAjC;AAIA;;;;AAIG;;AACH,OAAO,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;AACtB,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA,QAAQ,GAAG;AAApB,MAA8B,KAApC;AAEA,QAAM,aAAa,GAAG,kBAAkB,CAAC,gBAAD,EAAmB,GAAG,IAAI,GAAG,CAAC,aAA9B,CAAxC;AACA,QAAM,IAAI,GAAG,kBAAkB,CAAC,gBAAD,EAAmB,GAAG,IAAI,GAAG,CAAC,SAAJ,CAAc,QAAd,CAAuB,KAAvB,CAA1B,CAA/B;AACA,QAAM,sBAAsB,GAAG,KAAK,CAAC,WAAN,CAAmB,EAAD,IAA8B,aAAa,CAAC,EAAD,EAAK;AAAE,IAAA;AAAF,GAAL,CAA7D,EAA8E,CAC3G,aAD2G,EAE3G,KAF2G,CAA9E,CAA/B;AAKA,SAAO;AACL,IAAA,IADK;AAEL,IAAA,KAFK;AAGL,IAAA,QAHK;AAIL,IAAA,aAAa,EAAE,sBAJV;AAKL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KALP;AAQL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GAAG,EAAE,GAD4B;AAEjC,SAAG;AAF8B,KAAR;AARtB,GAAP;AAaD,CA1BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { AccordionContext } from '../Accordion/AccordionContext';\nimport type { AccordionItemProps, AccordionItemState } from './AccordionItem.types';\nimport type { AccordionToggleEvent } from '../Accordion/Accordion.types';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionItem properties\n * @param ref - reference to root HTMLElement of AccordionItem\n */\nexport const useAccordionItem_unstable = (\n props: AccordionItemProps,\n ref: React.Ref<HTMLElement>,\n): AccordionItemState => {\n const { value, disabled = false } = props;\n\n const requestToggle = useContextSelector(AccordionContext, ctx => ctx.requestToggle);\n const open = useContextSelector(AccordionContext, ctx => ctx.openItems.includes(value));\n const onAccordionHeaderClick = React.useCallback((ev: AccordionToggleEvent) => requestToggle(ev, { value }), [\n requestToggle,\n value,\n ]);\n\n return {\n open,\n value,\n disabled,\n onHeaderClick: onAccordionHeaderClick,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: ref,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { getNativeElementProps } from '@fluentui/react-utilities';
|
|
2
|
+
import { useTabsterAttributes } from '@fluentui/react-tabster';
|
|
2
3
|
import { useAccordionItemContext_unstable } from '../AccordionItem/index';
|
|
4
|
+
import { useContextSelector } from '@fluentui/react-context-selector';
|
|
5
|
+
import { AccordionContext } from '../Accordion/AccordionContext';
|
|
3
6
|
/**
|
|
4
7
|
* Returns the props and state required to render the component
|
|
5
8
|
* @param props - AccordionPanel properties
|
|
@@ -10,6 +13,12 @@ export const useAccordionPanel_unstable = (props, ref) => {
|
|
|
10
13
|
const {
|
|
11
14
|
open
|
|
12
15
|
} = useAccordionItemContext_unstable();
|
|
16
|
+
const focusableProps = useTabsterAttributes({
|
|
17
|
+
focusable: {
|
|
18
|
+
excludeFromMover: true
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
const navigation = useContextSelector(AccordionContext, ctx => ctx.navigation);
|
|
13
22
|
return {
|
|
14
23
|
open,
|
|
15
24
|
components: {
|
|
@@ -17,7 +26,8 @@ export const useAccordionPanel_unstable = (props, ref) => {
|
|
|
17
26
|
},
|
|
18
27
|
root: getNativeElementProps('div', {
|
|
19
28
|
ref,
|
|
20
|
-
...props
|
|
29
|
+
...props,
|
|
30
|
+
...(navigation && focusableProps)
|
|
21
31
|
})
|
|
22
32
|
};
|
|
23
33
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AccordionPanel/useAccordionPanel.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,gCAAT,QAAiD,wBAAjD;AAGA;;;;AAIG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;AACvB,QAAM;AAAE,IAAA;AAAF,MAAW,gCAAgC,EAAjD;AACA,SAAO;AACL,IAAA,IADK;AAEL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KAFP;AAKL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;
|
|
1
|
+
{"version":3,"sources":["components/AccordionPanel/useAccordionPanel.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,oBAAT,QAAqC,yBAArC;AACA,SAAS,gCAAT,QAAiD,wBAAjD;AACA,SAAS,kBAAT,QAAmC,kCAAnC;AACA,SAAS,gBAAT,QAAiC,+BAAjC;AAGA;;;;AAIG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;AACvB,QAAM;AAAE,IAAA;AAAF,MAAW,gCAAgC,EAAjD;AACA,QAAM,cAAc,GAAG,oBAAoB,CAAC;AAAE,IAAA,SAAS,EAAE;AAAE,MAAA,gBAAgB,EAAE;AAApB;AAAb,GAAD,CAA3C;AACA,QAAM,UAAU,GAAG,kBAAkB,CAAC,gBAAD,EAAmB,GAAG,IAAI,GAAG,CAAC,UAA9B,CAArC;AAEA,SAAO;AACL,IAAA,IADK;AAEL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KAFP;AAKL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG,KAF8B;AAGjC,UAAI,UAAU,IAAI,cAAlB;AAHiC,KAAR;AALtB,GAAP;AAWD,CAnBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport { useAccordionItemContext_unstable } from '../AccordionItem/index';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { AccordionContext } from '../Accordion/AccordionContext';\nimport type { AccordionPanelProps, AccordionPanelState } from './AccordionPanel.types';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionPanel properties\n * @param ref - reference to root HTMLElement of AccordionPanel\n */\nexport const useAccordionPanel_unstable = (\n props: AccordionPanelProps,\n ref: React.Ref<HTMLElement>,\n): AccordionPanelState => {\n const { open } = useAccordionItemContext_unstable();\n const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });\n const navigation = useContextSelector(AccordionContext, ctx => ctx.navigation);\n\n return {\n open,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref,\n ...props,\n ...(navigation && focusableProps),\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -35,7 +35,8 @@ const useAccordion_unstable = (props, ref) => {
|
|
|
35
35
|
initialState: []
|
|
36
36
|
});
|
|
37
37
|
const arrowNavigationProps = react_tabster_1.useArrowNavigationGroup({
|
|
38
|
-
circular: navigation === 'circular'
|
|
38
|
+
circular: navigation === 'circular',
|
|
39
|
+
tabbable: true
|
|
39
40
|
});
|
|
40
41
|
const requestToggle = react_utilities_1.useEventCallback((event, data) => {
|
|
41
42
|
onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, data);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Accordion/useAccordion.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;AAIG;;;AACI,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAwB,GAAxB,KAAuE;AAC1G,QAAM;AACJ,IAAA,SAAS,EAAE,mBADP;AAEJ,IAAA,gBAFI;AAGJ,IAAA,QAAQ,GAAG,KAHP;AAIJ,IAAA,WAAW,GAAG,KAJV;AAKJ,IAAA,QALI;AAMJ,IAAA;AANI,MAOF,KAPJ;AAQA,QAAM,CAAC,SAAD,EAAY,YAAZ,IAA4B,iBAAA,CAAA,oBAAA,CAAqB;AACrD,IAAA,KAAK,EAAE,KAAK,CAAC,OAAN,CAAc,MAAM,eAAe,CAAC,mBAAD,CAAnC,EAA0D,CAAC,mBAAD,CAA1D,CAD8C;AAErD,IAAA,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAAE,MAAA,gBAAF;AAAoB,MAAA;AAApB,KAAD,CAFE;AAGrD,IAAA,YAAY,EAAE;AAHuC,GAArB,CAAlC;AAMA,QAAM,oBAAoB,GAAG,eAAA,CAAA,uBAAA,CAAwB;AACnD,IAAA,QAAQ,EAAE,UAAU,KAAK;
|
|
1
|
+
{"version":3,"sources":["components/Accordion/useAccordion.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { AccordionProps, AccordionState, AccordionToggleData, AccordionToggleEvent } from './Accordion.types';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Returns the props and state required to render the component\n * @param props - Accordion properties\n * @param ref - reference to root HTMLElement of Accordion\n */\nexport const useAccordion_unstable = (props: AccordionProps, ref: React.Ref<HTMLElement>): AccordionState => {\n const {\n openItems: controlledOpenItems,\n defaultOpenItems,\n multiple = false,\n collapsible = false,\n onToggle,\n navigation,\n } = props;\n const [openItems, setOpenItems] = useControllableState({\n state: React.useMemo(() => normalizeValues(controlledOpenItems), [controlledOpenItems]),\n defaultState: () => initializeUncontrolledOpenItems({ defaultOpenItems, multiple }),\n initialState: [],\n });\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: navigation === 'circular',\n tabbable: true,\n });\n\n const requestToggle = useEventCallback((event: AccordionToggleEvent, data: AccordionToggleData) => {\n onToggle?.(event, data);\n setOpenItems(previousOpenItems =>\n updateOpenItems(data.value, previousOpenItems, {\n collapsible,\n multiple,\n }),\n );\n });\n\n return {\n multiple,\n collapsible,\n navigation,\n openItems,\n requestToggle,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ...props,\n ...(navigation ? arrowNavigationProps : {}),\n ref,\n }),\n };\n};\n\n/**\n * Initial value for the uncontrolled case of the list of open indexes\n */\nfunction initializeUncontrolledOpenItems({\n defaultOpenItems,\n multiple,\n}: Pick<AccordionProps, 'defaultOpenItems' | 'multiple'>): AccordionItemValue[] {\n if (defaultOpenItems !== undefined) {\n if (Array.isArray(defaultOpenItems)) {\n return multiple ? defaultOpenItems : [defaultOpenItems[0]];\n }\n return [defaultOpenItems];\n }\n return [];\n}\n\n/**\n * Updates the list of open indexes based on an index that changes\n * @param value - the index that will change\n * @param previousOpenItems - list of current open indexes\n * @param param2 - {multiple, collapsible}\n */\nfunction updateOpenItems(\n value: AccordionItemValue,\n previousOpenItems: AccordionItemValue[],\n { multiple, collapsible }: Pick<AccordionState, 'multiple' | 'collapsible'>,\n) {\n if (multiple) {\n if (previousOpenItems.includes(value)) {\n if (previousOpenItems.length > 1 || collapsible) {\n return previousOpenItems.filter(i => i !== value);\n }\n } else {\n return [...previousOpenItems, value].sort();\n }\n } else {\n return previousOpenItems[0] === value && collapsible ? [] : [value];\n }\n return previousOpenItems;\n}\n\n/**\n * Normalizes Accordion index into an array of indexes\n */\nfunction normalizeValues(index?: AccordionItemValue | AccordionItemValue[]): AccordionItemValue[] | undefined {\n if (index === undefined) {\n return undefined;\n }\n return Array.isArray(index) ? index : [index];\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -9,8 +9,6 @@ const React = /*#__PURE__*/require("react");
|
|
|
9
9
|
|
|
10
10
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
11
|
|
|
12
|
-
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
13
|
-
|
|
14
12
|
const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
|
|
15
13
|
|
|
16
14
|
const AccordionContext_1 = /*#__PURE__*/require("../Accordion/AccordionContext");
|
|
@@ -26,8 +24,6 @@ const useAccordionItem_unstable = (props, ref) => {
|
|
|
26
24
|
value,
|
|
27
25
|
disabled = false
|
|
28
26
|
} = props;
|
|
29
|
-
const navigation = react_context_selector_1.useContextSelector(AccordionContext_1.AccordionContext, ctx => ctx.navigation);
|
|
30
|
-
const focusableProps = react_tabster_1.useFocusableGroup();
|
|
31
27
|
const requestToggle = react_context_selector_1.useContextSelector(AccordionContext_1.AccordionContext, ctx => ctx.requestToggle);
|
|
32
28
|
const open = react_context_selector_1.useContextSelector(AccordionContext_1.AccordionContext, ctx => ctx.openItems.includes(value));
|
|
33
29
|
const onAccordionHeaderClick = React.useCallback(ev => requestToggle(ev, {
|
|
@@ -43,8 +39,7 @@ const useAccordionItem_unstable = (props, ref) => {
|
|
|
43
39
|
},
|
|
44
40
|
root: react_utilities_1.getNativeElementProps('div', {
|
|
45
41
|
ref: ref,
|
|
46
|
-
...props
|
|
47
|
-
...(navigation && focusableProps)
|
|
42
|
+
...props
|
|
48
43
|
})
|
|
49
44
|
};
|
|
50
45
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AccordionItem/useAccordionItem.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,
|
|
1
|
+
{"version":3,"sources":["components/AccordionItem/useAccordionItem.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;AAIA;;;;AAIG;;;AACI,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;AACtB,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA,QAAQ,GAAG;AAApB,MAA8B,KAApC;AAEA,QAAM,aAAa,GAAG,wBAAA,CAAA,kBAAA,CAAmB,kBAAA,CAAA,gBAAnB,EAAqC,GAAG,IAAI,GAAG,CAAC,aAAhD,CAAtB;AACA,QAAM,IAAI,GAAG,wBAAA,CAAA,kBAAA,CAAmB,kBAAA,CAAA,gBAAnB,EAAqC,GAAG,IAAI,GAAG,CAAC,SAAJ,CAAc,QAAd,CAAuB,KAAvB,CAA5C,CAAb;AACA,QAAM,sBAAsB,GAAG,KAAK,CAAC,WAAN,CAAmB,EAAD,IAA8B,aAAa,CAAC,EAAD,EAAK;AAAE,IAAA;AAAF,GAAL,CAA7D,EAA8E,CAC3G,aAD2G,EAE3G,KAF2G,CAA9E,CAA/B;AAKA,SAAO;AACL,IAAA,IADK;AAEL,IAAA,KAFK;AAGL,IAAA,QAHK;AAIL,IAAA,aAAa,EAAE,sBAJV;AAKL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KALP;AAQL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GAAG,EAAE,GAD4B;AAEjC,SAAG;AAF8B,KAA7B;AARD,GAAP;AAaD,CA1BM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { AccordionContext } from '../Accordion/AccordionContext';\nimport type { AccordionItemProps, AccordionItemState } from './AccordionItem.types';\nimport type { AccordionToggleEvent } from '../Accordion/Accordion.types';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionItem properties\n * @param ref - reference to root HTMLElement of AccordionItem\n */\nexport const useAccordionItem_unstable = (\n props: AccordionItemProps,\n ref: React.Ref<HTMLElement>,\n): AccordionItemState => {\n const { value, disabled = false } = props;\n\n const requestToggle = useContextSelector(AccordionContext, ctx => ctx.requestToggle);\n const open = useContextSelector(AccordionContext, ctx => ctx.openItems.includes(value));\n const onAccordionHeaderClick = React.useCallback((ev: AccordionToggleEvent) => requestToggle(ev, { value }), [\n requestToggle,\n value,\n ]);\n\n return {\n open,\n value,\n disabled,\n onHeaderClick: onAccordionHeaderClick,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: ref,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -7,7 +7,13 @@ exports.useAccordionPanel_unstable = void 0;
|
|
|
7
7
|
|
|
8
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
9
|
|
|
10
|
+
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
11
|
+
|
|
10
12
|
const index_1 = /*#__PURE__*/require("../AccordionItem/index");
|
|
13
|
+
|
|
14
|
+
const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
|
|
15
|
+
|
|
16
|
+
const AccordionContext_1 = /*#__PURE__*/require("../Accordion/AccordionContext");
|
|
11
17
|
/**
|
|
12
18
|
* Returns the props and state required to render the component
|
|
13
19
|
* @param props - AccordionPanel properties
|
|
@@ -19,6 +25,12 @@ const useAccordionPanel_unstable = (props, ref) => {
|
|
|
19
25
|
const {
|
|
20
26
|
open
|
|
21
27
|
} = index_1.useAccordionItemContext_unstable();
|
|
28
|
+
const focusableProps = react_tabster_1.useTabsterAttributes({
|
|
29
|
+
focusable: {
|
|
30
|
+
excludeFromMover: true
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
const navigation = react_context_selector_1.useContextSelector(AccordionContext_1.AccordionContext, ctx => ctx.navigation);
|
|
22
34
|
return {
|
|
23
35
|
open,
|
|
24
36
|
components: {
|
|
@@ -26,7 +38,8 @@ const useAccordionPanel_unstable = (props, ref) => {
|
|
|
26
38
|
},
|
|
27
39
|
root: react_utilities_1.getNativeElementProps('div', {
|
|
28
40
|
ref,
|
|
29
|
-
...props
|
|
41
|
+
...props,
|
|
42
|
+
...(navigation && focusableProps)
|
|
30
43
|
})
|
|
31
44
|
};
|
|
32
45
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AccordionPanel/useAccordionPanel.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;AACvB,QAAM;AAAE,IAAA;AAAF,MAAW,OAAA,CAAA,gCAAA,EAAjB;AACA,SAAO;AACL,IAAA,IADK;AAEL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KAFP;AAKL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GADiC;AAEjC,SAAG;
|
|
1
|
+
{"version":3,"sources":["components/AccordionPanel/useAccordionPanel.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;AACvB,QAAM;AAAE,IAAA;AAAF,MAAW,OAAA,CAAA,gCAAA,EAAjB;AACA,QAAM,cAAc,GAAG,eAAA,CAAA,oBAAA,CAAqB;AAAE,IAAA,SAAS,EAAE;AAAE,MAAA,gBAAgB,EAAE;AAApB;AAAb,GAArB,CAAvB;AACA,QAAM,UAAU,GAAG,wBAAA,CAAA,kBAAA,CAAmB,kBAAA,CAAA,gBAAnB,EAAqC,GAAG,IAAI,GAAG,CAAC,UAAhD,CAAnB;AAEA,SAAO;AACL,IAAA,IADK;AAEL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KAFP;AAKL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GADiC;AAEjC,SAAG,KAF8B;AAGjC,UAAI,UAAU,IAAI,cAAlB;AAHiC,KAA7B;AALD,GAAP;AAWD,CAnBM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport { useAccordionItemContext_unstable } from '../AccordionItem/index';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { AccordionContext } from '../Accordion/AccordionContext';\nimport type { AccordionPanelProps, AccordionPanelState } from './AccordionPanel.types';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionPanel properties\n * @param ref - reference to root HTMLElement of AccordionPanel\n */\nexport const useAccordionPanel_unstable = (\n props: AccordionPanelProps,\n ref: React.Ref<HTMLElement>,\n): AccordionPanelState => {\n const { open } = useAccordionItemContext_unstable();\n const focusableProps = useTabsterAttributes({ focusable: { excludeFromMover: true } });\n const navigation = useContextSelector(AccordionContext, ctx => ctx.navigation);\n\n return {\n open,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref,\n ...props,\n ...(navigation && focusableProps),\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-accordion",
|
|
3
|
-
"version": "9.0.0-rc.
|
|
3
|
+
"version": "9.0.0-rc.7",
|
|
4
4
|
"description": "Fluent UI accordion component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"@fluentui/react-shared-contexts": "9.0.0-rc.5",
|
|
38
38
|
"@fluentui/react-icons": "^2.0.166-rc.3",
|
|
39
39
|
"@griffel/react": "1.0.3",
|
|
40
|
-
"@fluentui/react-tabster": "9.0.0-rc.
|
|
40
|
+
"@fluentui/react-tabster": "9.0.0-rc.7",
|
|
41
41
|
"@fluentui/react-theme": "9.0.0-rc.5",
|
|
42
42
|
"@fluentui/react-utilities": "9.0.0-rc.6",
|
|
43
43
|
"tslib": "^2.1.0"
|