@fluentui/react-accordion 0.0.0-nightly-20220517-0418.1 → 0.0.0-nightly-20220518-0420.1
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 +25 -17
- package/CHANGELOG.md +11 -11
- package/dist/index.d.ts +49 -58
- package/lib/components/Accordion/Accordion.types.d.ts +20 -23
- package/lib/components/Accordion/Accordion.types.js.map +1 -1
- package/lib/components/Accordion/useAccordion.js +4 -10
- package/lib/components/Accordion/useAccordion.js.map +1 -1
- package/lib/components/AccordionHeader/AccordionHeader.types.d.ts +9 -13
- package/lib/components/AccordionHeader/AccordionHeader.types.js.map +1 -1
- package/lib/components/AccordionItem/AccordionItem.types.d.ts +5 -7
- package/lib/components/AccordionItem/AccordionItem.types.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItem.js +0 -1
- package/lib/components/AccordionItem/useAccordionItem.js.map +1 -1
- package/lib-commonjs/components/Accordion/Accordion.types.d.ts +20 -23
- package/lib-commonjs/components/Accordion/useAccordion.js +4 -10
- package/lib-commonjs/components/Accordion/useAccordion.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.types.d.ts +9 -13
- package/lib-commonjs/components/AccordionItem/AccordionItem.types.d.ts +5 -7
- package/lib-commonjs/components/AccordionItem/useAccordionItem.js +0 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItem.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-accordion",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-accordion_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Wed, 18 May 2022 04:34:28 GMT",
|
|
6
|
+
"tag": "@fluentui/react-accordion_v0.0.0-nightly-20220518-0420.1",
|
|
7
|
+
"version": "0.0.0-nightly-20220518-0420.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,44 +16,52 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-accordion",
|
|
19
|
-
"comment": "Bump @fluentui/react-aria to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-aria to v0.0.0-nightly-20220518-0420.1",
|
|
20
|
+
"commit": "c740a24cded647abf63433112cb9a07ed03d161a"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-accordion",
|
|
25
|
-
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20220518-0420.1",
|
|
26
|
+
"commit": "c740a24cded647abf63433112cb9a07ed03d161a"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-accordion",
|
|
31
|
-
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20220518-0420.1",
|
|
32
|
+
"commit": "c740a24cded647abf63433112cb9a07ed03d161a"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-accordion",
|
|
37
|
-
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220518-0420.1",
|
|
38
|
+
"commit": "c740a24cded647abf63433112cb9a07ed03d161a"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-accordion",
|
|
43
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220518-0420.1",
|
|
44
|
+
"commit": "c740a24cded647abf63433112cb9a07ed03d161a"
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
"author": "beachball",
|
|
48
48
|
"package": "@fluentui/react-accordion",
|
|
49
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
50
|
-
"commit": "
|
|
49
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220518-0420.1",
|
|
50
|
+
"commit": "c740a24cded647abf63433112cb9a07ed03d161a"
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
"author": "beachball",
|
|
54
54
|
"package": "@fluentui/react-accordion",
|
|
55
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
56
|
-
"commit": "
|
|
55
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220518-0420.1",
|
|
56
|
+
"commit": "c740a24cded647abf63433112cb9a07ed03d161a"
|
|
57
|
+
}
|
|
58
|
+
],
|
|
59
|
+
"none": [
|
|
60
|
+
{
|
|
61
|
+
"author": "sarah.higley@microsoft.com",
|
|
62
|
+
"package": "@fluentui/react-accordion",
|
|
63
|
+
"commit": "49a9c0d36d09f92f64e2167aff2276d525150816",
|
|
64
|
+
"comment": "remove commons types from accordion, remove unused state props"
|
|
57
65
|
}
|
|
58
66
|
]
|
|
59
67
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-accordion
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 18 May 2022 04:34:28 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20220518-0420.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v0.0.0-nightly-20220518-0420.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.0.0-rc.9..@fluentui/react-accordion_v0.0.0-nightly-
|
|
9
|
+
Wed, 18 May 2022 04:34:28 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.0.0-rc.9..@fluentui/react-accordion_v0.0.0-nightly-20220518-0420.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-aria to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-aria to v0.0.0-nightly-20220518-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/c740a24cded647abf63433112cb9a07ed03d161a) by beachball)
|
|
16
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20220518-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/c740a24cded647abf63433112cb9a07ed03d161a) by beachball)
|
|
17
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20220518-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/c740a24cded647abf63433112cb9a07ed03d161a) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20220518-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/c740a24cded647abf63433112cb9a07ed03d161a) by beachball)
|
|
19
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20220518-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/c740a24cded647abf63433112cb9a07ed03d161a) by beachball)
|
|
20
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20220518-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/c740a24cded647abf63433112cb9a07ed03d161a) by beachball)
|
|
21
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220518-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/c740a24cded647abf63433112cb9a07ed03d161a) by beachball)
|
|
22
22
|
|
|
23
23
|
## [9.0.0-rc.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.0.0-rc.9)
|
|
24
24
|
|
package/dist/index.d.ts
CHANGED
|
@@ -19,25 +19,9 @@ export declare const accordionClassName = "fui-Accordion";
|
|
|
19
19
|
|
|
20
20
|
export declare const accordionClassNames: SlotClassNames<AccordionSlots>;
|
|
21
21
|
|
|
22
|
-
declare type AccordionCommons = {
|
|
23
|
-
/**
|
|
24
|
-
* Indicates if keyboard navigation is available and gives two options,
|
|
25
|
-
* linear or circular navigation
|
|
26
|
-
*/
|
|
27
|
-
navigation?: 'linear' | 'circular';
|
|
28
|
-
/**
|
|
29
|
-
* Indicates if Accordion support multiple Panels opened at the same time
|
|
30
|
-
*/
|
|
31
|
-
multiple: boolean;
|
|
32
|
-
/**
|
|
33
|
-
* Indicates if Accordion support multiple Panels closed at the same time
|
|
34
|
-
*/
|
|
35
|
-
collapsible: boolean;
|
|
36
|
-
};
|
|
37
|
-
|
|
38
22
|
export declare const AccordionContext: Context<AccordionContextValue>;
|
|
39
23
|
|
|
40
|
-
export declare type AccordionContextValue =
|
|
24
|
+
export declare type AccordionContextValue = Required<Pick<AccordionProps, 'collapsible'>> & Pick<AccordionProps, 'navigation'> & {
|
|
41
25
|
/**
|
|
42
26
|
* The list of opened panels by index
|
|
43
27
|
*/
|
|
@@ -66,26 +50,9 @@ export declare const accordionHeaderClassName = "fui-AccordionHeader";
|
|
|
66
50
|
|
|
67
51
|
export declare const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots>;
|
|
68
52
|
|
|
69
|
-
declare type
|
|
70
|
-
/**
|
|
71
|
-
* Size of spacing in the heading
|
|
72
|
-
*/
|
|
73
|
-
size: AccordionHeaderSize;
|
|
74
|
-
/**
|
|
75
|
-
* The position of the expand icon slot in heading
|
|
76
|
-
*/
|
|
77
|
-
expandIconPosition: AccordionHeaderExpandIconPosition;
|
|
78
|
-
/**
|
|
79
|
-
* Indicates if the AccordionHeader should be rendered inline
|
|
80
|
-
*/
|
|
81
|
-
inline: boolean;
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
export declare type AccordionHeaderContextValue = {
|
|
53
|
+
export declare type AccordionHeaderContextValue = Required<Pick<AccordionHeaderProps, 'expandIconPosition' | 'size'>> & {
|
|
85
54
|
disabled: boolean;
|
|
86
55
|
open: boolean;
|
|
87
|
-
expandIconPosition: AccordionHeaderExpandIconPosition;
|
|
88
|
-
size: AccordionHeaderSize;
|
|
89
56
|
};
|
|
90
57
|
|
|
91
58
|
export declare type AccordionHeaderContextValues = {
|
|
@@ -94,7 +61,20 @@ export declare type AccordionHeaderContextValues = {
|
|
|
94
61
|
|
|
95
62
|
export declare type AccordionHeaderExpandIconPosition = 'start' | 'end';
|
|
96
63
|
|
|
97
|
-
export declare type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> &
|
|
64
|
+
export declare type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> & {
|
|
65
|
+
/**
|
|
66
|
+
* The position of the expand icon slot in heading
|
|
67
|
+
*/
|
|
68
|
+
expandIconPosition?: AccordionHeaderExpandIconPosition;
|
|
69
|
+
/**
|
|
70
|
+
* Indicates if the AccordionHeader should be rendered inline
|
|
71
|
+
*/
|
|
72
|
+
inline?: boolean;
|
|
73
|
+
/**
|
|
74
|
+
* Size of spacing in the heading
|
|
75
|
+
*/
|
|
76
|
+
size?: AccordionHeaderSize;
|
|
77
|
+
};
|
|
98
78
|
|
|
99
79
|
export declare type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';
|
|
100
80
|
|
|
@@ -117,7 +97,7 @@ export declare type AccordionHeaderSlots = {
|
|
|
117
97
|
icon?: Slot<'div'>;
|
|
118
98
|
};
|
|
119
99
|
|
|
120
|
-
export declare type AccordionHeaderState = ComponentState<AccordionHeaderSlots> &
|
|
100
|
+
export declare type AccordionHeaderState = ComponentState<AccordionHeaderSlots> & Required<Pick<AccordionHeaderProps, 'inline'>> & AccordionHeaderContextValue;
|
|
121
101
|
|
|
122
102
|
export declare type AccordionIndex = number | number[];
|
|
123
103
|
|
|
@@ -133,35 +113,33 @@ export declare const accordionItemClassName = "fui-AccordionItem";
|
|
|
133
113
|
|
|
134
114
|
export declare const accordionItemClassNames: SlotClassNames<AccordionItemSlots>;
|
|
135
115
|
|
|
136
|
-
declare type AccordionItemCommons = {
|
|
137
|
-
/**
|
|
138
|
-
* Disables opening/closing of panel
|
|
139
|
-
*/
|
|
140
|
-
disabled: boolean;
|
|
141
|
-
/**
|
|
142
|
-
* required value that identifies this item inside an Accordion component
|
|
143
|
-
*/
|
|
144
|
-
value: AccordionItemValue;
|
|
145
|
-
};
|
|
146
|
-
|
|
147
116
|
export declare const AccordionItemContext: React_2.Context<AccordionItemContextValue>;
|
|
148
117
|
|
|
149
|
-
export declare type AccordionItemContextValue =
|
|
150
|
-
open: boolean;
|
|
118
|
+
export declare type AccordionItemContextValue = Required<Pick<AccordionItemProps, 'disabled'>> & {
|
|
151
119
|
onHeaderClick(ev: React_2.MouseEvent | React_2.KeyboardEvent): void;
|
|
120
|
+
open: boolean;
|
|
152
121
|
};
|
|
153
122
|
|
|
154
123
|
export declare type AccordionItemContextValues = {
|
|
155
124
|
accordionItem: AccordionItemContextValue;
|
|
156
125
|
};
|
|
157
126
|
|
|
158
|
-
export declare type AccordionItemProps = ComponentProps<AccordionItemSlots> &
|
|
127
|
+
export declare type AccordionItemProps = ComponentProps<AccordionItemSlots> & {
|
|
128
|
+
/**
|
|
129
|
+
* Disables opening/closing of panel
|
|
130
|
+
*/
|
|
131
|
+
disabled?: boolean;
|
|
132
|
+
/**
|
|
133
|
+
* required value that identifies this item inside an Accordion component
|
|
134
|
+
*/
|
|
135
|
+
value: AccordionItemValue;
|
|
136
|
+
};
|
|
159
137
|
|
|
160
138
|
export declare type AccordionItemSlots = {
|
|
161
139
|
root: Slot<'div'>;
|
|
162
140
|
};
|
|
163
141
|
|
|
164
|
-
export declare type AccordionItemState = ComponentState<AccordionItemSlots> &
|
|
142
|
+
export declare type AccordionItemState = ComponentState<AccordionItemSlots> & AccordionItemContextValue;
|
|
165
143
|
|
|
166
144
|
export declare type AccordionItemValue = unknown;
|
|
167
145
|
|
|
@@ -190,23 +168,36 @@ export declare type AccordionPanelState = ComponentState<AccordionPanelSlots> &
|
|
|
190
168
|
open: boolean;
|
|
191
169
|
};
|
|
192
170
|
|
|
193
|
-
export declare type AccordionProps = ComponentProps<AccordionSlots> &
|
|
194
|
-
/**
|
|
195
|
-
* Controls the state of the panel
|
|
196
|
-
*/
|
|
197
|
-
openItems?: AccordionItemValue | AccordionItemValue[];
|
|
171
|
+
export declare type AccordionProps = ComponentProps<AccordionSlots> & {
|
|
198
172
|
/**
|
|
199
173
|
* Default value for the uncontrolled state of the panel
|
|
200
174
|
*/
|
|
201
175
|
defaultOpenItems?: AccordionItemValue | AccordionItemValue[];
|
|
176
|
+
/**
|
|
177
|
+
* Indicates if Accordion support multiple Panels closed at the same time
|
|
178
|
+
*/
|
|
179
|
+
collapsible?: boolean;
|
|
180
|
+
/**
|
|
181
|
+
* Indicates if Accordion support multiple Panels opened at the same time
|
|
182
|
+
*/
|
|
183
|
+
multiple?: boolean;
|
|
184
|
+
/**
|
|
185
|
+
* Indicates if keyboard navigation is available and gives two options,
|
|
186
|
+
* linear or circular navigation
|
|
187
|
+
*/
|
|
188
|
+
navigation?: 'linear' | 'circular';
|
|
202
189
|
onToggle?: AccordionToggleEventHandler;
|
|
190
|
+
/**
|
|
191
|
+
* Controls the state of the panel
|
|
192
|
+
*/
|
|
193
|
+
openItems?: AccordionItemValue | AccordionItemValue[];
|
|
203
194
|
};
|
|
204
195
|
|
|
205
196
|
export declare type AccordionSlots = {
|
|
206
197
|
root: Slot<'div'>;
|
|
207
198
|
};
|
|
208
199
|
|
|
209
|
-
export declare type AccordionState = ComponentState<AccordionSlots> &
|
|
200
|
+
export declare type AccordionState = ComponentState<AccordionSlots> & AccordionContextValue;
|
|
210
201
|
|
|
211
202
|
export declare type AccordionToggleData = {
|
|
212
203
|
value: AccordionItemValue;
|
|
@@ -4,22 +4,7 @@ import type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';
|
|
|
4
4
|
export declare type AccordionIndex = number | number[];
|
|
5
5
|
export declare type AccordionToggleEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;
|
|
6
6
|
export declare type AccordionToggleEventHandler = (event: AccordionToggleEvent, data: AccordionToggleData) => void;
|
|
7
|
-
declare type
|
|
8
|
-
/**
|
|
9
|
-
* Indicates if keyboard navigation is available and gives two options,
|
|
10
|
-
* linear or circular navigation
|
|
11
|
-
*/
|
|
12
|
-
navigation?: 'linear' | 'circular';
|
|
13
|
-
/**
|
|
14
|
-
* Indicates if Accordion support multiple Panels opened at the same time
|
|
15
|
-
*/
|
|
16
|
-
multiple: boolean;
|
|
17
|
-
/**
|
|
18
|
-
* Indicates if Accordion support multiple Panels closed at the same time
|
|
19
|
-
*/
|
|
20
|
-
collapsible: boolean;
|
|
21
|
-
};
|
|
22
|
-
export declare type AccordionContextValue = Omit<AccordionCommons, 'multiple'> & {
|
|
7
|
+
export declare type AccordionContextValue = Required<Pick<AccordionProps, 'collapsible'>> & Pick<AccordionProps, 'navigation'> & {
|
|
23
8
|
/**
|
|
24
9
|
* The list of opened panels by index
|
|
25
10
|
*/
|
|
@@ -39,16 +24,28 @@ export declare type AccordionSlots = {
|
|
|
39
24
|
export declare type AccordionToggleData = {
|
|
40
25
|
value: AccordionItemValue;
|
|
41
26
|
};
|
|
42
|
-
export declare type AccordionProps = ComponentProps<AccordionSlots> &
|
|
43
|
-
/**
|
|
44
|
-
* Controls the state of the panel
|
|
45
|
-
*/
|
|
46
|
-
openItems?: AccordionItemValue | AccordionItemValue[];
|
|
27
|
+
export declare type AccordionProps = ComponentProps<AccordionSlots> & {
|
|
47
28
|
/**
|
|
48
29
|
* Default value for the uncontrolled state of the panel
|
|
49
30
|
*/
|
|
50
31
|
defaultOpenItems?: AccordionItemValue | AccordionItemValue[];
|
|
32
|
+
/**
|
|
33
|
+
* Indicates if Accordion support multiple Panels closed at the same time
|
|
34
|
+
*/
|
|
35
|
+
collapsible?: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* Indicates if Accordion support multiple Panels opened at the same time
|
|
38
|
+
*/
|
|
39
|
+
multiple?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Indicates if keyboard navigation is available and gives two options,
|
|
42
|
+
* linear or circular navigation
|
|
43
|
+
*/
|
|
44
|
+
navigation?: 'linear' | 'circular';
|
|
51
45
|
onToggle?: AccordionToggleEventHandler;
|
|
46
|
+
/**
|
|
47
|
+
* Controls the state of the panel
|
|
48
|
+
*/
|
|
49
|
+
openItems?: AccordionItemValue | AccordionItemValue[];
|
|
52
50
|
};
|
|
53
|
-
export declare type AccordionState = ComponentState<AccordionSlots> &
|
|
54
|
-
export {};
|
|
51
|
+
export declare type AccordionState = ComponentState<AccordionSlots> & AccordionContextValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.types.js","sourceRoot":"../src/","sources":["components/Accordion/Accordion.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\n\nexport type AccordionIndex = number | number[];\n\nexport type AccordionToggleEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;\n\nexport type AccordionToggleEventHandler = (event: AccordionToggleEvent, data: AccordionToggleData) => void;\n\
|
|
1
|
+
{"version":3,"file":"Accordion.types.js","sourceRoot":"../src/","sources":["components/Accordion/Accordion.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\n\nexport type AccordionIndex = number | number[];\n\nexport type AccordionToggleEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;\n\nexport type AccordionToggleEventHandler = (event: AccordionToggleEvent, data: AccordionToggleData) => void;\n\nexport type AccordionContextValue = Required<Pick<AccordionProps, 'collapsible'>> &\n Pick<AccordionProps, 'navigation'> & {\n /**\n * The list of opened panels by index\n */\n openItems: AccordionItemValue[];\n /**\n * Callback used by AccordionItem to request a change on it's own opened state\n * Should be used to toggle AccordionItem\n */\n requestToggle: (event: AccordionToggleEvent, data: AccordionToggleData) => void;\n };\n\nexport type AccordionContextValues = {\n accordion: AccordionContextValue;\n};\n\nexport type AccordionSlots = {\n root: Slot<'div'>;\n};\n\nexport type AccordionToggleData = {\n value: AccordionItemValue;\n};\n\nexport type AccordionProps = ComponentProps<AccordionSlots> & {\n /**\n * Default value for the uncontrolled state of the panel\n */\n defaultOpenItems?: AccordionItemValue | AccordionItemValue[];\n\n /**\n * Indicates if Accordion support multiple Panels closed at the same time\n */\n collapsible?: boolean;\n\n /**\n * Indicates if Accordion support multiple Panels opened at the same time\n */\n multiple?: boolean;\n\n /**\n * Indicates if keyboard navigation is available and gives two options,\n * linear or circular navigation\n */\n navigation?: 'linear' | 'circular';\n\n onToggle?: AccordionToggleEventHandler;\n\n /**\n * Controls the state of the panel\n */\n openItems?: AccordionItemValue | AccordionItemValue[];\n};\n\nexport type AccordionState = ComponentState<AccordionSlots> & AccordionContextValue;\n"]}
|
|
@@ -30,13 +30,9 @@ export const useAccordion_unstable = (props, ref) => {
|
|
|
30
30
|
});
|
|
31
31
|
const requestToggle = useEventCallback((event, data) => {
|
|
32
32
|
onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, data);
|
|
33
|
-
setOpenItems(previousOpenItems => updateOpenItems(data.value, previousOpenItems,
|
|
34
|
-
collapsible,
|
|
35
|
-
multiple
|
|
36
|
-
}));
|
|
33
|
+
setOpenItems(previousOpenItems => updateOpenItems(data.value, previousOpenItems, multiple, collapsible));
|
|
37
34
|
});
|
|
38
35
|
return {
|
|
39
|
-
multiple,
|
|
40
36
|
collapsible,
|
|
41
37
|
navigation,
|
|
42
38
|
openItems,
|
|
@@ -72,14 +68,12 @@ function initializeUncontrolledOpenItems({
|
|
|
72
68
|
* Updates the list of open indexes based on an index that changes
|
|
73
69
|
* @param value - the index that will change
|
|
74
70
|
* @param previousOpenItems - list of current open indexes
|
|
75
|
-
* @param
|
|
71
|
+
* @param multiple - if Accordion support multiple Panels opened at the same time
|
|
72
|
+
* @param collapsible - if Accordion support multiple Panels closed at the same time
|
|
76
73
|
*/
|
|
77
74
|
|
|
78
75
|
|
|
79
|
-
function updateOpenItems(value, previousOpenItems, {
|
|
80
|
-
multiple,
|
|
81
|
-
collapsible
|
|
82
|
-
}) {
|
|
76
|
+
function updateOpenItems(value, previousOpenItems, multiple, collapsible) {
|
|
83
77
|
if (multiple) {
|
|
84
78
|
if (previousOpenItems.includes(value)) {
|
|
85
79
|
if (previousOpenItems.length > 1 || collapsible) {
|
|
@@ -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,UAD0B;AAEnD,IAAA,QAAQ,EAAE;AAFyC,GAAD,CAApD;AAKA,QAAM,aAAa,GAAG,gBAAgB,CAAC,CAAC,KAAD,EAA8B,IAA9B,KAA2D;AAChG,IAAA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,KAAH,EAAU,IAAV,CAAR;AACA,IAAA,YAAY,CAAC,iBAAiB,
|
|
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 => updateOpenItems(data.value, previousOpenItems, multiple, collapsible));\n });\n\n return {\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 multiple - if Accordion support multiple Panels opened at the same time\n * @param collapsible - if Accordion support multiple Panels closed at the same time\n */\nfunction updateOpenItems(\n value: AccordionItemValue,\n previousOpenItems: AccordionItemValue[],\n multiple: boolean,\n collapsible: boolean,\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/"}
|
|
@@ -2,11 +2,9 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utili
|
|
|
2
2
|
import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
|
|
3
3
|
export declare type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';
|
|
4
4
|
export declare type AccordionHeaderExpandIconPosition = 'start' | 'end';
|
|
5
|
-
export declare type AccordionHeaderContextValue = {
|
|
5
|
+
export declare type AccordionHeaderContextValue = Required<Pick<AccordionHeaderProps, 'expandIconPosition' | 'size'>> & {
|
|
6
6
|
disabled: boolean;
|
|
7
7
|
open: boolean;
|
|
8
|
-
expandIconPosition: AccordionHeaderExpandIconPosition;
|
|
9
|
-
size: AccordionHeaderSize;
|
|
10
8
|
};
|
|
11
9
|
export declare type AccordionHeaderContextValues = {
|
|
12
10
|
accordionHeader: AccordionHeaderContextValue;
|
|
@@ -29,20 +27,18 @@ export declare type AccordionHeaderSlots = {
|
|
|
29
27
|
*/
|
|
30
28
|
icon?: Slot<'div'>;
|
|
31
29
|
};
|
|
32
|
-
declare type
|
|
33
|
-
/**
|
|
34
|
-
* Size of spacing in the heading
|
|
35
|
-
*/
|
|
36
|
-
size: AccordionHeaderSize;
|
|
30
|
+
export declare type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> & {
|
|
37
31
|
/**
|
|
38
32
|
* The position of the expand icon slot in heading
|
|
39
33
|
*/
|
|
40
|
-
expandIconPosition
|
|
34
|
+
expandIconPosition?: AccordionHeaderExpandIconPosition;
|
|
41
35
|
/**
|
|
42
36
|
* Indicates if the AccordionHeader should be rendered inline
|
|
43
37
|
*/
|
|
44
|
-
inline
|
|
38
|
+
inline?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Size of spacing in the heading
|
|
41
|
+
*/
|
|
42
|
+
size?: AccordionHeaderSize;
|
|
45
43
|
};
|
|
46
|
-
export declare type
|
|
47
|
-
export declare type AccordionHeaderState = ComponentState<AccordionHeaderSlots> & AccordionHeaderCommons & AccordionHeaderContextValue;
|
|
48
|
-
export {};
|
|
44
|
+
export declare type AccordionHeaderState = ComponentState<AccordionHeaderSlots> & Required<Pick<AccordionHeaderProps, 'inline'>> & AccordionHeaderContextValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHeader.types.js","sourceRoot":"../src/","sources":["components/AccordionHeader/AccordionHeader.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\n\nexport type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';\nexport type AccordionHeaderExpandIconPosition = 'start' | 'end';\n\nexport type AccordionHeaderContextValue = {\n disabled: boolean;\n open: boolean;\n
|
|
1
|
+
{"version":3,"file":"AccordionHeader.types.js","sourceRoot":"../src/","sources":["components/AccordionHeader/AccordionHeader.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\n\nexport type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';\nexport type AccordionHeaderExpandIconPosition = 'start' | 'end';\n\nexport type AccordionHeaderContextValue = Required<Pick<AccordionHeaderProps, 'expandIconPosition' | 'size'>> & {\n disabled: boolean;\n open: boolean;\n};\n\nexport type AccordionHeaderContextValues = {\n accordionHeader: AccordionHeaderContextValue;\n};\n\nexport type AccordionHeaderSlots = {\n /**\n * The element wrapping the button. By default this is a div, but can be a heading.\n */\n root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;\n /**\n * The component to be used as button in heading\n */\n button: NonNullable<Slot<ARIAButtonSlotProps>>;\n /**\n * Expand icon slot rendered before (or after) children content in heading\n */\n expandIcon: Slot<'span'>;\n /**\n * Expand icon slot rendered before (or after) children content in heading\n */\n icon?: Slot<'div'>;\n};\n\nexport type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> & {\n /**\n * The position of the expand icon slot in heading\n */\n expandIconPosition?: AccordionHeaderExpandIconPosition;\n\n /**\n * Indicates if the AccordionHeader should be rendered inline\n */\n inline?: boolean;\n\n /**\n * Size of spacing in the heading\n */\n size?: AccordionHeaderSize;\n};\n\nexport type AccordionHeaderState = ComponentState<AccordionHeaderSlots> &\n Required<Pick<AccordionHeaderProps, 'inline'>> &\n AccordionHeaderContextValue;\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
3
|
-
export declare type AccordionItemContextValue =
|
|
4
|
-
open: boolean;
|
|
3
|
+
export declare type AccordionItemContextValue = Required<Pick<AccordionItemProps, 'disabled'>> & {
|
|
5
4
|
onHeaderClick(ev: React.MouseEvent | React.KeyboardEvent): void;
|
|
5
|
+
open: boolean;
|
|
6
6
|
};
|
|
7
7
|
export declare type AccordionItemContextValues = {
|
|
8
8
|
accordionItem: AccordionItemContextValue;
|
|
@@ -10,17 +10,15 @@ export declare type AccordionItemContextValues = {
|
|
|
10
10
|
export declare type AccordionItemSlots = {
|
|
11
11
|
root: Slot<'div'>;
|
|
12
12
|
};
|
|
13
|
-
declare type
|
|
13
|
+
export declare type AccordionItemProps = ComponentProps<AccordionItemSlots> & {
|
|
14
14
|
/**
|
|
15
15
|
* Disables opening/closing of panel
|
|
16
16
|
*/
|
|
17
|
-
disabled
|
|
17
|
+
disabled?: boolean;
|
|
18
18
|
/**
|
|
19
19
|
* required value that identifies this item inside an Accordion component
|
|
20
20
|
*/
|
|
21
21
|
value: AccordionItemValue;
|
|
22
22
|
};
|
|
23
|
-
export declare type AccordionItemProps = ComponentProps<AccordionItemSlots> & Partial<AccordionItemCommons> & Pick<AccordionItemCommons, 'value'>;
|
|
24
23
|
export declare type AccordionItemValue = unknown;
|
|
25
|
-
export declare type AccordionItemState = ComponentState<AccordionItemSlots> &
|
|
26
|
-
export {};
|
|
24
|
+
export declare type AccordionItemState = ComponentState<AccordionItemSlots> & AccordionItemContextValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionItem.types.js","sourceRoot":"../src/","sources":["components/AccordionItem/AccordionItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AccordionItemContextValue =
|
|
1
|
+
{"version":3,"file":"AccordionItem.types.js","sourceRoot":"../src/","sources":["components/AccordionItem/AccordionItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AccordionItemContextValue = Required<Pick<AccordionItemProps, 'disabled'>> & {\n onHeaderClick(ev: React.MouseEvent | React.KeyboardEvent): void;\n open: boolean;\n};\n\nexport type AccordionItemContextValues = {\n accordionItem: AccordionItemContextValue;\n};\n\nexport type AccordionItemSlots = {\n root: Slot<'div'>;\n};\n\nexport type AccordionItemProps = ComponentProps<AccordionItemSlots> & {\n /**\n * Disables opening/closing of panel\n */\n disabled?: boolean;\n /**\n * required value that identifies this item inside an Accordion component\n */\n value: AccordionItemValue;\n};\n\nexport type AccordionItemValue = unknown;\n\nexport type AccordionItemState = ComponentState<AccordionItemSlots> & AccordionItemContextValue;\n"]}
|
|
@@ -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,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,
|
|
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,QAFK;AAGL,IAAA,aAAa,EAAE,sBAHV;AAIL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KAJP;AAOL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GAAG,EAAE,GAD4B;AAEjC,SAAG;AAF8B,KAAR;AAPtB,GAAP;AAYD,CAzBM","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 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/"}
|
|
@@ -4,22 +4,7 @@ import type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';
|
|
|
4
4
|
export declare type AccordionIndex = number | number[];
|
|
5
5
|
export declare type AccordionToggleEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;
|
|
6
6
|
export declare type AccordionToggleEventHandler = (event: AccordionToggleEvent, data: AccordionToggleData) => void;
|
|
7
|
-
declare type
|
|
8
|
-
/**
|
|
9
|
-
* Indicates if keyboard navigation is available and gives two options,
|
|
10
|
-
* linear or circular navigation
|
|
11
|
-
*/
|
|
12
|
-
navigation?: 'linear' | 'circular';
|
|
13
|
-
/**
|
|
14
|
-
* Indicates if Accordion support multiple Panels opened at the same time
|
|
15
|
-
*/
|
|
16
|
-
multiple: boolean;
|
|
17
|
-
/**
|
|
18
|
-
* Indicates if Accordion support multiple Panels closed at the same time
|
|
19
|
-
*/
|
|
20
|
-
collapsible: boolean;
|
|
21
|
-
};
|
|
22
|
-
export declare type AccordionContextValue = Omit<AccordionCommons, 'multiple'> & {
|
|
7
|
+
export declare type AccordionContextValue = Required<Pick<AccordionProps, 'collapsible'>> & Pick<AccordionProps, 'navigation'> & {
|
|
23
8
|
/**
|
|
24
9
|
* The list of opened panels by index
|
|
25
10
|
*/
|
|
@@ -39,16 +24,28 @@ export declare type AccordionSlots = {
|
|
|
39
24
|
export declare type AccordionToggleData = {
|
|
40
25
|
value: AccordionItemValue;
|
|
41
26
|
};
|
|
42
|
-
export declare type AccordionProps = ComponentProps<AccordionSlots> &
|
|
43
|
-
/**
|
|
44
|
-
* Controls the state of the panel
|
|
45
|
-
*/
|
|
46
|
-
openItems?: AccordionItemValue | AccordionItemValue[];
|
|
27
|
+
export declare type AccordionProps = ComponentProps<AccordionSlots> & {
|
|
47
28
|
/**
|
|
48
29
|
* Default value for the uncontrolled state of the panel
|
|
49
30
|
*/
|
|
50
31
|
defaultOpenItems?: AccordionItemValue | AccordionItemValue[];
|
|
32
|
+
/**
|
|
33
|
+
* Indicates if Accordion support multiple Panels closed at the same time
|
|
34
|
+
*/
|
|
35
|
+
collapsible?: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* Indicates if Accordion support multiple Panels opened at the same time
|
|
38
|
+
*/
|
|
39
|
+
multiple?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Indicates if keyboard navigation is available and gives two options,
|
|
42
|
+
* linear or circular navigation
|
|
43
|
+
*/
|
|
44
|
+
navigation?: 'linear' | 'circular';
|
|
51
45
|
onToggle?: AccordionToggleEventHandler;
|
|
46
|
+
/**
|
|
47
|
+
* Controls the state of the panel
|
|
48
|
+
*/
|
|
49
|
+
openItems?: AccordionItemValue | AccordionItemValue[];
|
|
52
50
|
};
|
|
53
|
-
export declare type AccordionState = ComponentState<AccordionSlots> &
|
|
54
|
-
export {};
|
|
51
|
+
export declare type AccordionState = ComponentState<AccordionSlots> & AccordionContextValue;
|
|
@@ -40,13 +40,9 @@ const useAccordion_unstable = (props, ref) => {
|
|
|
40
40
|
});
|
|
41
41
|
const requestToggle = react_utilities_1.useEventCallback((event, data) => {
|
|
42
42
|
onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, data);
|
|
43
|
-
setOpenItems(previousOpenItems => updateOpenItems(data.value, previousOpenItems,
|
|
44
|
-
collapsible,
|
|
45
|
-
multiple
|
|
46
|
-
}));
|
|
43
|
+
setOpenItems(previousOpenItems => updateOpenItems(data.value, previousOpenItems, multiple, collapsible));
|
|
47
44
|
});
|
|
48
45
|
return {
|
|
49
|
-
multiple,
|
|
50
46
|
collapsible,
|
|
51
47
|
navigation,
|
|
52
48
|
openItems,
|
|
@@ -84,14 +80,12 @@ function initializeUncontrolledOpenItems({
|
|
|
84
80
|
* Updates the list of open indexes based on an index that changes
|
|
85
81
|
* @param value - the index that will change
|
|
86
82
|
* @param previousOpenItems - list of current open indexes
|
|
87
|
-
* @param
|
|
83
|
+
* @param multiple - if Accordion support multiple Panels opened at the same time
|
|
84
|
+
* @param collapsible - if Accordion support multiple Panels closed at the same time
|
|
88
85
|
*/
|
|
89
86
|
|
|
90
87
|
|
|
91
|
-
function updateOpenItems(value, previousOpenItems, {
|
|
92
|
-
multiple,
|
|
93
|
-
collapsible
|
|
94
|
-
}) {
|
|
88
|
+
function updateOpenItems(value, previousOpenItems, multiple, collapsible) {
|
|
95
89
|
if (multiple) {
|
|
96
90
|
if (previousOpenItems.includes(value)) {
|
|
97
91
|
if (previousOpenItems.length > 1 || collapsible) {
|
|
@@ -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,UAD0B;AAEnD,IAAA,QAAQ,EAAE;AAFyC,GAAxB,CAA7B;AAKA,QAAM,aAAa,GAAG,iBAAA,CAAA,gBAAA,CAAiB,CAAC,KAAD,EAA8B,IAA9B,KAA2D;AAChG,IAAA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,KAAH,EAAU,IAAV,CAAR;AACA,IAAA,YAAY,CAAC,iBAAiB,
|
|
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 => updateOpenItems(data.value, previousOpenItems, multiple, collapsible));\n });\n\n return {\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 multiple - if Accordion support multiple Panels opened at the same time\n * @param collapsible - if Accordion support multiple Panels closed at the same time\n */\nfunction updateOpenItems(\n value: AccordionItemValue,\n previousOpenItems: AccordionItemValue[],\n multiple: boolean,\n collapsible: boolean,\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/"}
|
|
@@ -2,11 +2,9 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utili
|
|
|
2
2
|
import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
|
|
3
3
|
export declare type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';
|
|
4
4
|
export declare type AccordionHeaderExpandIconPosition = 'start' | 'end';
|
|
5
|
-
export declare type AccordionHeaderContextValue = {
|
|
5
|
+
export declare type AccordionHeaderContextValue = Required<Pick<AccordionHeaderProps, 'expandIconPosition' | 'size'>> & {
|
|
6
6
|
disabled: boolean;
|
|
7
7
|
open: boolean;
|
|
8
|
-
expandIconPosition: AccordionHeaderExpandIconPosition;
|
|
9
|
-
size: AccordionHeaderSize;
|
|
10
8
|
};
|
|
11
9
|
export declare type AccordionHeaderContextValues = {
|
|
12
10
|
accordionHeader: AccordionHeaderContextValue;
|
|
@@ -29,20 +27,18 @@ export declare type AccordionHeaderSlots = {
|
|
|
29
27
|
*/
|
|
30
28
|
icon?: Slot<'div'>;
|
|
31
29
|
};
|
|
32
|
-
declare type
|
|
33
|
-
/**
|
|
34
|
-
* Size of spacing in the heading
|
|
35
|
-
*/
|
|
36
|
-
size: AccordionHeaderSize;
|
|
30
|
+
export declare type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> & {
|
|
37
31
|
/**
|
|
38
32
|
* The position of the expand icon slot in heading
|
|
39
33
|
*/
|
|
40
|
-
expandIconPosition
|
|
34
|
+
expandIconPosition?: AccordionHeaderExpandIconPosition;
|
|
41
35
|
/**
|
|
42
36
|
* Indicates if the AccordionHeader should be rendered inline
|
|
43
37
|
*/
|
|
44
|
-
inline
|
|
38
|
+
inline?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Size of spacing in the heading
|
|
41
|
+
*/
|
|
42
|
+
size?: AccordionHeaderSize;
|
|
45
43
|
};
|
|
46
|
-
export declare type
|
|
47
|
-
export declare type AccordionHeaderState = ComponentState<AccordionHeaderSlots> & AccordionHeaderCommons & AccordionHeaderContextValue;
|
|
48
|
-
export {};
|
|
44
|
+
export declare type AccordionHeaderState = ComponentState<AccordionHeaderSlots> & Required<Pick<AccordionHeaderProps, 'inline'>> & AccordionHeaderContextValue;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
3
|
-
export declare type AccordionItemContextValue =
|
|
4
|
-
open: boolean;
|
|
3
|
+
export declare type AccordionItemContextValue = Required<Pick<AccordionItemProps, 'disabled'>> & {
|
|
5
4
|
onHeaderClick(ev: React.MouseEvent | React.KeyboardEvent): void;
|
|
5
|
+
open: boolean;
|
|
6
6
|
};
|
|
7
7
|
export declare type AccordionItemContextValues = {
|
|
8
8
|
accordionItem: AccordionItemContextValue;
|
|
@@ -10,17 +10,15 @@ export declare type AccordionItemContextValues = {
|
|
|
10
10
|
export declare type AccordionItemSlots = {
|
|
11
11
|
root: Slot<'div'>;
|
|
12
12
|
};
|
|
13
|
-
declare type
|
|
13
|
+
export declare type AccordionItemProps = ComponentProps<AccordionItemSlots> & {
|
|
14
14
|
/**
|
|
15
15
|
* Disables opening/closing of panel
|
|
16
16
|
*/
|
|
17
|
-
disabled
|
|
17
|
+
disabled?: boolean;
|
|
18
18
|
/**
|
|
19
19
|
* required value that identifies this item inside an Accordion component
|
|
20
20
|
*/
|
|
21
21
|
value: AccordionItemValue;
|
|
22
22
|
};
|
|
23
|
-
export declare type AccordionItemProps = ComponentProps<AccordionItemSlots> & Partial<AccordionItemCommons> & Pick<AccordionItemCommons, 'value'>;
|
|
24
23
|
export declare type AccordionItemValue = unknown;
|
|
25
|
-
export declare type AccordionItemState = ComponentState<AccordionItemSlots> &
|
|
26
|
-
export {};
|
|
24
|
+
export declare type AccordionItemState = ComponentState<AccordionItemSlots> & AccordionItemContextValue;
|
|
@@ -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,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,
|
|
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,QAFK;AAGL,IAAA,aAAa,EAAE,sBAHV;AAIL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KAJP;AAOL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GAAG,EAAE,GAD4B;AAEjC,SAAG;AAF8B,KAA7B;AAPD,GAAP;AAYD,CAzBM;;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 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/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-accordion",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20220518-0420.1",
|
|
4
4
|
"description": "Fluent UI accordion component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,18 +28,18 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
31
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20220518-0420.1",
|
|
32
32
|
"@fluentui/scripts": "^1.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-aria": "0.0.0-nightly-
|
|
36
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
35
|
+
"@fluentui/react-aria": "0.0.0-nightly-20220518-0420.1",
|
|
36
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20220518-0420.1",
|
|
37
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20220518-0420.1",
|
|
38
38
|
"@fluentui/react-icons": "^2.0.166-rc.3",
|
|
39
39
|
"@griffel/react": "1.0.4",
|
|
40
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
|
41
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
42
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
40
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20220518-0420.1",
|
|
41
|
+
"@fluentui/react-theme": "0.0.0-nightly-20220518-0420.1",
|
|
42
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20220518-0420.1",
|
|
43
43
|
"tslib": "^2.1.0"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|