@fluentui/react-accordion 9.0.0-rc.7 → 9.0.0
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 +441 -1
- package/CHANGELOG.md +223 -100
- package/dist/{react-accordion.d.ts → index.d.ts} +66 -86
- package/{lib → dist}/tsdoc-metadata.json +0 -0
- package/lib/components/Accordion/Accordion.js.map +1 -1
- package/lib/components/Accordion/Accordion.types.js.map +1 -1
- package/lib/components/Accordion/AccordionContext.js +3 -1
- package/lib/components/Accordion/AccordionContext.js.map +1 -1
- package/lib/components/Accordion/renderAccordion.js.map +1 -1
- package/lib/components/Accordion/useAccordion.js +4 -10
- package/lib/components/Accordion/useAccordion.js.map +1 -1
- package/lib/components/Accordion/useAccordionContextValues.js.map +1 -1
- package/lib/components/Accordion/useAccordionStyles.js +0 -5
- package/lib/components/Accordion/useAccordionStyles.js.map +1 -1
- package/lib/components/AccordionHeader/AccordionHeader.js.map +1 -1
- package/lib/components/AccordionHeader/AccordionHeader.types.js.map +1 -1
- package/lib/components/AccordionHeader/AccordionHeaderContext.js.map +1 -1
- package/lib/components/AccordionHeader/renderAccordionHeader.js.map +1 -1
- package/lib/components/AccordionHeader/useAccordionHeader.js +1 -1
- package/lib/components/AccordionHeader/useAccordionHeader.js.map +1 -1
- package/lib/components/AccordionHeader/useAccordionHeaderContextValues.js.map +1 -1
- package/lib/components/AccordionHeader/useAccordionHeaderStyles.js +65 -54
- package/lib/components/AccordionHeader/useAccordionHeaderStyles.js.map +1 -1
- package/lib/components/AccordionItem/AccordionItem.js.map +1 -1
- package/lib/components/AccordionItem/AccordionItem.types.js.map +1 -1
- package/lib/components/AccordionItem/AccordionItemContext.js +1 -0
- package/lib/components/AccordionItem/AccordionItemContext.js.map +1 -1
- package/lib/components/AccordionItem/renderAccordionItem.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItem.js +0 -1
- package/lib/components/AccordionItem/useAccordionItem.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItemContextValues.js.map +1 -1
- package/lib/components/AccordionItem/useAccordionItemStyles.js +0 -5
- package/lib/components/AccordionItem/useAccordionItemStyles.js.map +1 -1
- package/lib/components/AccordionPanel/AccordionPanel.js.map +1 -1
- package/lib/components/AccordionPanel/AccordionPanel.types.js.map +1 -1
- package/lib/components/AccordionPanel/renderAccordionPanel.js.map +1 -1
- package/lib/components/AccordionPanel/useAccordionPanel.js.map +1 -1
- package/lib/components/AccordionPanel/useAccordionPanelStyles.js +7 -9
- package/lib/components/AccordionPanel/useAccordionPanelStyles.js.map +1 -1
- package/lib/index.js +4 -4
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Accordion/Accordion.js.map +1 -1
- package/lib-commonjs/components/Accordion/AccordionContext.js +6 -1
- package/lib-commonjs/components/Accordion/AccordionContext.js.map +1 -1
- package/lib-commonjs/components/Accordion/renderAccordion.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordion.js +4 -10
- package/lib-commonjs/components/Accordion/useAccordion.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordionContextValues.js.map +1 -1
- package/lib-commonjs/components/Accordion/useAccordionStyles.js +1 -6
- package/lib-commonjs/components/Accordion/useAccordionStyles.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/AccordionHeaderContext.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/renderAccordionHeader.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderContextValues.js.map +1 -1
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.js +65 -54
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/AccordionItem.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/AccordionItemContext.js +2 -1
- package/lib-commonjs/components/AccordionItem/AccordionItemContext.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/renderAccordionItem.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItem.js +0 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItem.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItemContextValues.js.map +1 -1
- package/lib-commonjs/components/AccordionItem/useAccordionItemStyles.js +1 -6
- package/lib-commonjs/components/AccordionItem/useAccordionItemStyles.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/renderAccordionPanel.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js.map +1 -1
- package/lib-commonjs/components/AccordionPanel/useAccordionPanelStyles.js +7 -8
- package/lib-commonjs/components/AccordionPanel/useAccordionPanelStyles.js.map +1 -1
- package/lib-commonjs/index.js +170 -5
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +16 -17
- package/lib/Accordion.d.ts +0 -1
- package/lib/AccordionHeader.d.ts +0 -1
- package/lib/AccordionItem.d.ts +0 -1
- package/lib/AccordionPanel.d.ts +0 -1
- package/lib/components/Accordion/Accordion.d.ts +0 -6
- package/lib/components/Accordion/Accordion.types.d.ts +0 -54
- package/lib/components/Accordion/AccordionContext.d.ts +0 -3
- package/lib/components/Accordion/index.d.ts +0 -7
- package/lib/components/Accordion/renderAccordion.d.ts +0 -5
- package/lib/components/Accordion/useAccordion.d.ts +0 -8
- package/lib/components/Accordion/useAccordionContextValues.d.ts +0 -2
- package/lib/components/Accordion/useAccordionStyles.d.ts +0 -8
- package/lib/components/AccordionHeader/AccordionHeader.d.ts +0 -7
- package/lib/components/AccordionHeader/AccordionHeader.types.d.ts +0 -48
- package/lib/components/AccordionHeader/AccordionHeaderContext.d.ts +0 -4
- package/lib/components/AccordionHeader/index.d.ts +0 -6
- package/lib/components/AccordionHeader/renderAccordionHeader.d.ts +0 -5
- package/lib/components/AccordionHeader/useAccordionHeader.d.ts +0 -8
- package/lib/components/AccordionHeader/useAccordionHeaderContextValues.d.ts +0 -2
- package/lib/components/AccordionHeader/useAccordionHeaderStyles.d.ts +0 -9
- package/lib/components/AccordionItem/AccordionItem.d.ts +0 -6
- package/lib/components/AccordionItem/AccordionItem.types.d.ts +0 -26
- package/lib/components/AccordionItem/AccordionItemContext.d.ts +0 -4
- package/lib/components/AccordionItem/index.d.ts +0 -7
- package/lib/components/AccordionItem/renderAccordionItem.d.ts +0 -5
- package/lib/components/AccordionItem/useAccordionItem.d.ts +0 -8
- package/lib/components/AccordionItem/useAccordionItemContextValues.d.ts +0 -2
- package/lib/components/AccordionItem/useAccordionItemStyles.d.ts +0 -8
- package/lib/components/AccordionPanel/AccordionPanel.d.ts +0 -6
- package/lib/components/AccordionPanel/AccordionPanel.types.d.ts +0 -11
- package/lib/components/AccordionPanel/index.d.ts +0 -5
- package/lib/components/AccordionPanel/renderAccordionPanel.d.ts +0 -5
- package/lib/components/AccordionPanel/useAccordionPanel.d.ts +0 -8
- package/lib/components/AccordionPanel/useAccordionPanelStyles.d.ts +0 -9
- package/lib/index.d.ts +0 -4
- package/lib-commonjs/Accordion.d.ts +0 -1
- package/lib-commonjs/AccordionHeader.d.ts +0 -1
- package/lib-commonjs/AccordionItem.d.ts +0 -1
- package/lib-commonjs/AccordionPanel.d.ts +0 -1
- package/lib-commonjs/components/Accordion/Accordion.d.ts +0 -6
- package/lib-commonjs/components/Accordion/Accordion.types.d.ts +0 -54
- package/lib-commonjs/components/Accordion/AccordionContext.d.ts +0 -3
- package/lib-commonjs/components/Accordion/index.d.ts +0 -7
- package/lib-commonjs/components/Accordion/renderAccordion.d.ts +0 -5
- package/lib-commonjs/components/Accordion/useAccordion.d.ts +0 -8
- package/lib-commonjs/components/Accordion/useAccordionContextValues.d.ts +0 -2
- package/lib-commonjs/components/Accordion/useAccordionStyles.d.ts +0 -8
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.d.ts +0 -7
- package/lib-commonjs/components/AccordionHeader/AccordionHeader.types.d.ts +0 -48
- package/lib-commonjs/components/AccordionHeader/AccordionHeaderContext.d.ts +0 -4
- package/lib-commonjs/components/AccordionHeader/index.d.ts +0 -6
- package/lib-commonjs/components/AccordionHeader/renderAccordionHeader.d.ts +0 -5
- package/lib-commonjs/components/AccordionHeader/useAccordionHeader.d.ts +0 -8
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderContextValues.d.ts +0 -2
- package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.d.ts +0 -9
- package/lib-commonjs/components/AccordionItem/AccordionItem.d.ts +0 -6
- package/lib-commonjs/components/AccordionItem/AccordionItem.types.d.ts +0 -26
- package/lib-commonjs/components/AccordionItem/AccordionItemContext.d.ts +0 -4
- package/lib-commonjs/components/AccordionItem/index.d.ts +0 -7
- package/lib-commonjs/components/AccordionItem/renderAccordionItem.d.ts +0 -5
- package/lib-commonjs/components/AccordionItem/useAccordionItem.d.ts +0 -8
- package/lib-commonjs/components/AccordionItem/useAccordionItemContextValues.d.ts +0 -2
- package/lib-commonjs/components/AccordionItem/useAccordionItemStyles.d.ts +0 -8
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.d.ts +0 -6
- package/lib-commonjs/components/AccordionPanel/AccordionPanel.types.d.ts +0 -11
- package/lib-commonjs/components/AccordionPanel/index.d.ts +0 -5
- package/lib-commonjs/components/AccordionPanel/renderAccordionPanel.d.ts +0 -5
- package/lib-commonjs/components/AccordionPanel/useAccordionPanel.d.ts +0 -8
- package/lib-commonjs/components/AccordionPanel/useAccordionPanelStyles.d.ts +0 -9
- package/lib-commonjs/index.d.ts +0 -4
|
@@ -1,8 +1,13 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
|
|
1
3
|
import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
|
|
2
4
|
import type { ComponentProps } from '@fluentui/react-utilities';
|
|
3
5
|
import type { ComponentState } from '@fluentui/react-utilities';
|
|
4
|
-
import
|
|
6
|
+
import { ContextSelector } from '@fluentui/react-context-selector';
|
|
7
|
+
import { FC } from 'react';
|
|
5
8
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
9
|
+
import { Provider } from 'react';
|
|
10
|
+
import { ProviderProps } from 'react';
|
|
6
11
|
import * as React_2 from 'react';
|
|
7
12
|
import type { Slot } from '@fluentui/react-utilities';
|
|
8
13
|
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
@@ -12,32 +17,9 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
|
12
17
|
*/
|
|
13
18
|
export declare const Accordion: ForwardRefComponent<AccordionProps>;
|
|
14
19
|
|
|
15
|
-
/**
|
|
16
|
-
* @deprecated Use `accordionClassNames.root` instead.
|
|
17
|
-
*/
|
|
18
|
-
export declare const accordionClassName = "fui-Accordion";
|
|
19
|
-
|
|
20
20
|
export declare const accordionClassNames: SlotClassNames<AccordionSlots>;
|
|
21
21
|
|
|
22
|
-
declare type
|
|
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
|
-
export declare const AccordionContext: Context<AccordionContextValue>;
|
|
39
|
-
|
|
40
|
-
export declare type AccordionContextValue = Omit<AccordionCommons, 'multiple'> & {
|
|
22
|
+
export declare type AccordionContextValue = Required<Pick<AccordionProps, 'collapsible'>> & Pick<AccordionProps, 'navigation'> & {
|
|
41
23
|
/**
|
|
42
24
|
* The list of opened panels by index
|
|
43
25
|
*/
|
|
@@ -59,33 +41,11 @@ export declare type AccordionContextValues = {
|
|
|
59
41
|
*/
|
|
60
42
|
export declare const AccordionHeader: ForwardRefComponent<AccordionHeaderProps>;
|
|
61
43
|
|
|
62
|
-
/**
|
|
63
|
-
* @deprecated Use `accordionHeaderClassNames.root` instead.
|
|
64
|
-
*/
|
|
65
|
-
export declare const accordionHeaderClassName = "fui-AccordionHeader";
|
|
66
|
-
|
|
67
44
|
export declare const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots>;
|
|
68
45
|
|
|
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 = {
|
|
46
|
+
export declare type AccordionHeaderContextValue = Required<Pick<AccordionHeaderProps, 'expandIconPosition' | 'size'>> & {
|
|
85
47
|
disabled: boolean;
|
|
86
48
|
open: boolean;
|
|
87
|
-
expandIconPosition: AccordionHeaderExpandIconPosition;
|
|
88
|
-
size: AccordionHeaderSize;
|
|
89
49
|
};
|
|
90
50
|
|
|
91
51
|
export declare type AccordionHeaderContextValues = {
|
|
@@ -94,7 +54,20 @@ export declare type AccordionHeaderContextValues = {
|
|
|
94
54
|
|
|
95
55
|
export declare type AccordionHeaderExpandIconPosition = 'start' | 'end';
|
|
96
56
|
|
|
97
|
-
export declare type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> &
|
|
57
|
+
export declare type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> & {
|
|
58
|
+
/**
|
|
59
|
+
* The position of the expand icon slot in heading.
|
|
60
|
+
*/
|
|
61
|
+
expandIconPosition?: AccordionHeaderExpandIconPosition;
|
|
62
|
+
/**
|
|
63
|
+
* Indicates if the AccordionHeader should be rendered inline.
|
|
64
|
+
*/
|
|
65
|
+
inline?: boolean;
|
|
66
|
+
/**
|
|
67
|
+
* Size of spacing in the heading.
|
|
68
|
+
*/
|
|
69
|
+
size?: AccordionHeaderSize;
|
|
70
|
+
};
|
|
98
71
|
|
|
99
72
|
export declare type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';
|
|
100
73
|
|
|
@@ -108,16 +81,16 @@ export declare type AccordionHeaderSlots = {
|
|
|
108
81
|
*/
|
|
109
82
|
button: NonNullable<Slot<ARIAButtonSlotProps>>;
|
|
110
83
|
/**
|
|
111
|
-
* Expand icon slot rendered before (or after) children content in heading
|
|
84
|
+
* Expand icon slot rendered before (or after) children content in heading.
|
|
112
85
|
*/
|
|
113
86
|
expandIcon: Slot<'span'>;
|
|
114
87
|
/**
|
|
115
|
-
* Expand icon slot rendered before (or after) children content in heading
|
|
88
|
+
* Expand icon slot rendered before (or after) children content in heading.
|
|
116
89
|
*/
|
|
117
90
|
icon?: Slot<'div'>;
|
|
118
91
|
};
|
|
119
92
|
|
|
120
|
-
export declare type AccordionHeaderState = ComponentState<AccordionHeaderSlots> &
|
|
93
|
+
export declare type AccordionHeaderState = ComponentState<AccordionHeaderSlots> & Required<Pick<AccordionHeaderProps, 'inline'>> & AccordionHeaderContextValue;
|
|
121
94
|
|
|
122
95
|
export declare type AccordionIndex = number | number[];
|
|
123
96
|
|
|
@@ -126,42 +99,35 @@ export declare type AccordionIndex = number | number[];
|
|
|
126
99
|
*/
|
|
127
100
|
export declare const AccordionItem: ForwardRefComponent<AccordionItemProps>;
|
|
128
101
|
|
|
129
|
-
/**
|
|
130
|
-
* @deprecated Use `accordionItemClassNames.root` instead.
|
|
131
|
-
*/
|
|
132
|
-
export declare const accordionItemClassName = "fui-AccordionItem";
|
|
133
|
-
|
|
134
102
|
export declare const accordionItemClassNames: SlotClassNames<AccordionItemSlots>;
|
|
135
103
|
|
|
136
|
-
declare type
|
|
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
|
-
export declare const AccordionItemContext: React_2.Context<AccordionItemContextValue>;
|
|
148
|
-
|
|
149
|
-
export declare type AccordionItemContextValue = Omit<AccordionItemCommons, 'value'> & {
|
|
150
|
-
open: boolean;
|
|
104
|
+
export declare type AccordionItemContextValue = Required<Pick<AccordionItemProps, 'disabled'>> & {
|
|
151
105
|
onHeaderClick(ev: React_2.MouseEvent | React_2.KeyboardEvent): void;
|
|
106
|
+
open: boolean;
|
|
152
107
|
};
|
|
153
108
|
|
|
154
109
|
export declare type AccordionItemContextValues = {
|
|
155
110
|
accordionItem: AccordionItemContextValue;
|
|
156
111
|
};
|
|
157
112
|
|
|
158
|
-
export declare type AccordionItemProps = ComponentProps<AccordionItemSlots> &
|
|
113
|
+
export declare type AccordionItemProps = ComponentProps<AccordionItemSlots> & {
|
|
114
|
+
/**
|
|
115
|
+
* Disables opening/closing of panel.
|
|
116
|
+
*/
|
|
117
|
+
disabled?: boolean;
|
|
118
|
+
/**
|
|
119
|
+
* Required value that identifies this item inside an Accordion component.
|
|
120
|
+
*/
|
|
121
|
+
value: AccordionItemValue;
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
export declare const AccordionItemProvider: React_2.Provider<AccordionItemContextValue>;
|
|
159
125
|
|
|
160
126
|
export declare type AccordionItemSlots = {
|
|
161
127
|
root: Slot<'div'>;
|
|
162
128
|
};
|
|
163
129
|
|
|
164
|
-
export declare type AccordionItemState = ComponentState<AccordionItemSlots> &
|
|
130
|
+
export declare type AccordionItemState = ComponentState<AccordionItemSlots> & AccordionItemContextValue;
|
|
165
131
|
|
|
166
132
|
export declare type AccordionItemValue = unknown;
|
|
167
133
|
|
|
@@ -170,11 +136,6 @@ export declare type AccordionItemValue = unknown;
|
|
|
170
136
|
*/
|
|
171
137
|
export declare const AccordionPanel: ForwardRefComponent<AccordionPanelProps>;
|
|
172
138
|
|
|
173
|
-
/**
|
|
174
|
-
* @deprecated Use `accordionPanelClassNames.root` instead.
|
|
175
|
-
*/
|
|
176
|
-
export declare const accordionPanelClassName = "fui-AccordionPanel";
|
|
177
|
-
|
|
178
139
|
export declare const accordionPanelClassNames: SlotClassNames<AccordionPanelSlots>;
|
|
179
140
|
|
|
180
141
|
export declare type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;
|
|
@@ -185,28 +146,45 @@ export declare type AccordionPanelSlots = {
|
|
|
185
146
|
|
|
186
147
|
export declare type AccordionPanelState = ComponentState<AccordionPanelSlots> & {
|
|
187
148
|
/**
|
|
188
|
-
* Internal open state, provided by context
|
|
149
|
+
* Internal open state, provided by context.
|
|
189
150
|
*/
|
|
190
151
|
open: boolean;
|
|
191
152
|
};
|
|
192
153
|
|
|
193
|
-
export declare type AccordionProps = ComponentProps<AccordionSlots> &
|
|
154
|
+
export declare type AccordionProps = ComponentProps<AccordionSlots> & {
|
|
194
155
|
/**
|
|
195
|
-
*
|
|
156
|
+
* Default value for the uncontrolled state of the panel.
|
|
196
157
|
*/
|
|
197
|
-
|
|
158
|
+
defaultOpenItems?: AccordionItemValue | AccordionItemValue[];
|
|
198
159
|
/**
|
|
199
|
-
*
|
|
160
|
+
* Indicates if Accordion support multiple Panels closed at the same time.
|
|
161
|
+
*/
|
|
162
|
+
collapsible?: boolean;
|
|
163
|
+
/**
|
|
164
|
+
* Indicates if Accordion support multiple Panels opened at the same time.
|
|
165
|
+
*/
|
|
166
|
+
multiple?: boolean;
|
|
167
|
+
/**
|
|
168
|
+
* Indicates if keyboard navigation is available and gives two options, linear or circular navigation.
|
|
169
|
+
*/
|
|
170
|
+
navigation?: 'linear' | 'circular';
|
|
171
|
+
/**
|
|
172
|
+
* Callback to be called when the opened items change.
|
|
200
173
|
*/
|
|
201
|
-
defaultOpenItems?: AccordionItemValue | AccordionItemValue[];
|
|
202
174
|
onToggle?: AccordionToggleEventHandler;
|
|
175
|
+
/**
|
|
176
|
+
* Controls the state of the panel.
|
|
177
|
+
*/
|
|
178
|
+
openItems?: AccordionItemValue | AccordionItemValue[];
|
|
203
179
|
};
|
|
204
180
|
|
|
181
|
+
export declare const AccordionProvider: Provider<AccordionContextValue> & FC<ProviderProps<AccordionContextValue>>;
|
|
182
|
+
|
|
205
183
|
export declare type AccordionSlots = {
|
|
206
184
|
root: Slot<'div'>;
|
|
207
185
|
};
|
|
208
186
|
|
|
209
|
-
export declare type AccordionState = ComponentState<AccordionSlots> &
|
|
187
|
+
export declare type AccordionState = ComponentState<AccordionSlots> & AccordionContextValue;
|
|
210
188
|
|
|
211
189
|
export declare type AccordionToggleData = {
|
|
212
190
|
value: AccordionItemValue;
|
|
@@ -243,6 +221,8 @@ export declare const renderAccordionPanel_unstable: (state: AccordionPanelState)
|
|
|
243
221
|
*/
|
|
244
222
|
export declare const useAccordion_unstable: (props: AccordionProps, ref: React_2.Ref<HTMLElement>) => AccordionState;
|
|
245
223
|
|
|
224
|
+
export declare const useAccordionContext_unstable: <T>(selector: ContextSelector<AccordionContextValue, T>) => T;
|
|
225
|
+
|
|
246
226
|
export declare function useAccordionContextValues_unstable(state: AccordionState): AccordionContextValues;
|
|
247
227
|
|
|
248
228
|
/**
|
|
File without changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,kCAAT,QAAmD,6BAAnD;AAGA,SAAS,2BAAT,QAA4C,sBAA5C;AAEA;;AAEG;;AACH,OAAO,MAAM,SAAS,gBAAwC,KAAK,CAAC,UAAN,CAC5D,CAAC,KAAD,EAAQ,GAAR,KAAe;
|
|
1
|
+
{"version":3,"sources":["components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,kCAAT,QAAmD,6BAAnD;AAGA,SAAS,2BAAT,QAA4C,sBAA5C;AAEA;;AAEG;;AACH,OAAO,MAAM,SAAS,gBAAwC,KAAK,CAAC,UAAN,CAC5D,CAAC,KAAD,EAAQ,GAAR,KAAe;EACb,MAAM,KAAK,GAAG,qBAAqB,CAAC,KAAD,EAAQ,GAAR,CAAnC;EACA,MAAM,aAAa,GAAG,kCAAkC,CAAC,KAAD,CAAxD;EAEA,2BAA2B,CAAC,KAAD,CAA3B;EAEA,OAAO,wBAAwB,CAAC,KAAD,EAAQ,aAAR,CAA/B;AACD,CAR2D,CAAvD;AAWP,SAAS,CAAC,WAAV,GAAwB,WAAxB","sourcesContent":["import * as React from 'react';\nimport { renderAccordion_unstable } from './renderAccordion';\nimport { useAccordion_unstable } from './useAccordion';\nimport { useAccordionContextValues_unstable } from './useAccordionContextValues';\nimport type { AccordionProps } from './Accordion.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useAccordionStyles_unstable } from './useAccordionStyles';\n\n/**\n * Define a styled Accordion, using the `useAccordion_unstable` and `useAccordionStyles_unstable` hooks.\n */\nexport const Accordion: ForwardRefComponent<AccordionProps> = React.forwardRef<HTMLDivElement, AccordionProps>(\n (props, ref) => {\n const state = useAccordion_unstable(props, ref);\n const contextValues = useAccordionContextValues_unstable(state);\n\n useAccordionStyles_unstable(state);\n\n return renderAccordion_unstable(state, contextValues);\n },\n);\n\nAccordion.displayName = 'Accordion';\n"],"sourceRoot":"../src/"}
|
|
@@ -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, linear or circular navigation.\n */\n navigation?: 'linear' | 'circular';\n\n /**\n * Callback to be called when the opened items change.\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"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createContext } from '@fluentui/react-context-selector';
|
|
1
|
+
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
|
|
2
2
|
export const AccordionContext = /*#__PURE__*/createContext({
|
|
3
3
|
openItems: [],
|
|
4
4
|
collapsible: false,
|
|
@@ -8,4 +8,6 @@ export const AccordionContext = /*#__PURE__*/createContext({
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
});
|
|
11
|
+
export const AccordionProvider = AccordionContext.Provider;
|
|
12
|
+
export const useAccordionContext_unstable = selector => useContextSelector(AccordionContext, selector);
|
|
11
13
|
//# sourceMappingURL=AccordionContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Accordion/AccordionContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,
|
|
1
|
+
{"version":3,"sources":["components/Accordion/AccordionContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,EAAyC,kBAAzC,QAAmE,kCAAnE;AAIA,OAAO,MAAM,gBAAgB,gBAAmC,aAAa,CAAwB;EACnG,SAAS,EAAE,EADwF;EAEnG,WAAW,EAAE,KAFsF;;EAGnG,aAAa,GAAA;IACX;EACD;;AALkG,CAAxB,CAAtE;AAQP,OAAO,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,QAA3C;AACP,OAAO,MAAM,4BAA4B,GAAO,QAAJ,IAC1C,kBAAkB,CAAC,gBAAD,EAAmB,QAAnB,CADb","sourcesContent":["import { createContext, ContextSelector, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { AccordionContextValue } from './Accordion.types';\n\nexport const AccordionContext: Context<AccordionContextValue> = createContext<AccordionContextValue>({\n openItems: [],\n collapsible: false,\n requestToggle() {\n /* noop */\n },\n});\n\nexport const AccordionProvider = AccordionContext.Provider;\nexport const useAccordionContext_unstable = <T>(selector: ContextSelector<AccordionContextValue, T>): T =>\n useContextSelector(AccordionContext, selector);\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Accordion/renderAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,gBAAT,QAAiC,oBAAjC;AAGA;;AAEG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAAwB,aAAxB,KAAiE;
|
|
1
|
+
{"version":3,"sources":["components/Accordion/renderAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,gBAAT,QAAiC,oBAAjC;AAGA;;AAEG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAAwB,aAAxB,KAAiE;EACvG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAiB,KAAjB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,gBAAgB,CAAC,QAAlB,EAA0B;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAA1B,EAA4D,SAAS,CAAC,IAAV,CAAe,QAA3E,CADF,CADF;AAKD,CARM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\n\nimport { AccordionContext } from './AccordionContext';\nimport type { AccordionState, AccordionSlots, AccordionContextValues } from './Accordion.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderAccordion_unstable = (state: AccordionState, contextValues: AccordionContextValues) => {\n const { slots, slotProps } = getSlots<AccordionSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <AccordionContext.Provider value={contextValues.accordion}>{slotProps.root.children}</AccordionContext.Provider>\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -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;
|
|
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;EAC1G,MAAM;IACJ,SAAS,EAAE,mBADP;IAEJ,gBAFI;IAGJ,QAAQ,GAAG,KAHP;IAIJ,WAAW,GAAG,KAJV;IAKJ,QALI;IAMJ;EANI,IAOF,KAPJ;EAQA,MAAM,CAAC,SAAD,EAAY,YAAZ,IAA4B,oBAAoB,CAAC;IACrD,KAAK,EAAE,KAAK,CAAC,OAAN,CAAc,MAAM,eAAe,CAAC,mBAAD,CAAnC,EAA0D,CAAC,mBAAD,CAA1D,CAD8C;IAErD,YAAY,EAAE,MAAM,+BAA+B,CAAC;MAAE,gBAAF;MAAoB;IAApB,CAAD,CAFE;IAGrD,YAAY,EAAE;EAHuC,CAAD,CAAtD;EAMA,MAAM,oBAAoB,GAAG,uBAAuB,CAAC;IACnD,QAAQ,EAAE,UAAU,KAAK,UAD0B;IAEnD,QAAQ,EAAE;EAFyC,CAAD,CAApD;EAKA,MAAM,aAAa,GAAG,gBAAgB,CAAC,CAAC,KAAD,EAA8B,IAA9B,KAA2D;IAChG,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,KAAH,EAAU,IAAV,CAAR;IACA,YAAY,CAAC,iBAAiB,IAAI,eAAe,CAAC,IAAI,CAAC,KAAN,EAAa,iBAAb,EAAgC,QAAhC,EAA0C,WAA1C,CAArC,CAAZ;EACD,CAHqC,CAAtC;EAKA,OAAO;IACL,WADK;IAEL,UAFK;IAGL,SAHK;IAIL,aAJK;IAKL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CALP;IAQL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ,EACjC,GAAG,KAD8B;MAEjC,IAAI,UAAU,GAAG,oBAAH,GAA0B,EAAxC,CAFiC;MAGjC;IAHiC,CAAR;EARtB,CAAP;AAcD,CAvCM;AAyCP;;AAEG;;AACH,SAAS,+BAAT,CAAyC;EACvC,gBADuC;EAEvC;AAFuC,CAAzC,EAGwD;EACtD,IAAI,gBAAgB,KAAK,SAAzB,EAAoC;IAClC,IAAI,KAAK,CAAC,OAAN,CAAc,gBAAd,CAAJ,EAAqC;MACnC,OAAO,QAAQ,GAAG,gBAAH,GAAsB,CAAC,gBAAgB,CAAC,CAAD,CAAjB,CAArC;IACD;;IACD,OAAO,CAAC,gBAAD,CAAP;EACD;;EACD,OAAO,EAAP;AACD;AAED;;;;;;AAMG;;;AACH,SAAS,eAAT,CACE,KADF,EAEE,iBAFF,EAGE,QAHF,EAIE,WAJF,EAIsB;EAEpB,IAAI,QAAJ,EAAc;IACZ,IAAI,iBAAiB,CAAC,QAAlB,CAA2B,KAA3B,CAAJ,EAAuC;MACrC,IAAI,iBAAiB,CAAC,MAAlB,GAA2B,CAA3B,IAAgC,WAApC,EAAiD;QAC/C,OAAO,iBAAiB,CAAC,MAAlB,CAAyB,CAAC,IAAI,CAAC,KAAK,KAApC,CAAP;MACD;IACF,CAJD,MAIO;MACL,OAAO,CAAC,GAAG,iBAAJ,EAAuB,KAAvB,EAA8B,IAA9B,EAAP;IACD;EACF,CARD,MAQO;IACL,OAAO,iBAAiB,CAAC,CAAD,CAAjB,KAAyB,KAAzB,IAAkC,WAAlC,GAAgD,EAAhD,GAAqD,CAAC,KAAD,CAA5D;EACD;;EACD,OAAO,iBAAP;AACD;AAED;;AAEG;;;AACH,SAAS,eAAT,CAAyB,KAAzB,EAA0E;EACxE,IAAI,KAAK,KAAK,SAAd,EAAyB;IACvB,OAAO,SAAP;EACD;;EACD,OAAO,KAAK,CAAC,OAAN,CAAc,KAAd,IAAuB,KAAvB,GAA+B,CAAC,KAAD,CAAtC;AACD","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/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Accordion/useAccordionContextValues.ts"],"names":[],"mappings":"AAEA,OAAM,SAAU,kCAAV,CAA6C,KAA7C,EAAkE;
|
|
1
|
+
{"version":3,"sources":["components/Accordion/useAccordionContextValues.ts"],"names":[],"mappings":"AAEA,OAAM,SAAU,kCAAV,CAA6C,KAA7C,EAAkE;EACtE,MAAM;IAAE,UAAF;IAAc,SAAd;IAAyB,aAAzB;IAAwC;EAAxC,IAAwD,KAA9D,CADsE,CAGtE;;EACA,MAAM,SAAS,GAA0B;IACvC,UADuC;IAEvC,SAFuC;IAGvC,aAHuC;IAIvC;EAJuC,CAAzC;EAOA,OAAO;IAAE;EAAF,CAAP;AACD","sourcesContent":["import type { AccordionContextValue, AccordionContextValues, AccordionState } from './Accordion.types';\n\nexport function useAccordionContextValues_unstable(state: AccordionState): AccordionContextValues {\n const { navigation, openItems, requestToggle, collapsible } = state;\n\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const accordion: AccordionContextValue = {\n navigation,\n openItems,\n requestToggle,\n collapsible,\n };\n\n return { accordion };\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Accordion/useAccordionStyles.ts"],"names":[],"mappings":"AACA,SAAS,YAAT,QAA6B,gBAA7B;AAGA
|
|
1
|
+
{"version":3,"sources":["components/Accordion/useAccordionStyles.ts"],"names":[],"mappings":"AACA,SAAS,YAAT,QAA6B,gBAA7B;AAGA,OAAO,MAAM,mBAAmB,GAAmC;EACjE,IAAI,EAAE;AAD2D,CAA5D;AAIP,OAAO,MAAM,2BAA2B,GAAI,KAAD,IAA0B;EACnE,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,mBAAmB,CAAC,IAArB,EAA2B,KAAK,CAAC,IAAN,CAAW,SAAtC,CAAnC;EAEA,OAAO,KAAP;AACD,CAJM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { AccordionSlots, AccordionState } from './Accordion.types';\n\nexport const accordionClassNames: SlotClassNames<AccordionSlots> = {\n root: 'fui-Accordion',\n};\n\nexport const useAccordionStyles_unstable = (state: AccordionState) => {\n state.root.className = mergeClasses(accordionClassNames.root, state.root.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AccordionHeader/AccordionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,QAA4C,sBAA5C;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AACA,SAAS,iCAAT,QAAkD,4BAAlD;AACA,SAAS,wCAAT,QAAyD,mCAAzD;AAIA;;;AAGG;;AACH,OAAO,MAAM,eAAe,gBAA8C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;
|
|
1
|
+
{"version":3,"sources":["components/AccordionHeader/AccordionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,QAA4C,sBAA5C;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AACA,SAAS,iCAAT,QAAkD,4BAAlD;AACA,SAAS,wCAAT,QAAyD,mCAAzD;AAIA;;;AAGG;;AACH,OAAO,MAAM,eAAe,gBAA8C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxG,MAAM,KAAK,GAAG,2BAA2B,CAAC,KAAD,EAAQ,GAAR,CAAzC;EACA,MAAM,aAAa,GAAG,wCAAwC,CAAC,KAAD,CAA9D;EAEA,iCAAiC,CAAC,KAAD,CAAjC;EAEA,OAAO,8BAA8B,CAAC,KAAD,EAAQ,aAAR,CAArC;AACD,CAPyE,CAAnE;AASP,eAAe,CAAC,WAAhB,GAA8B,iBAA9B","sourcesContent":["import * as React from 'react';\nimport { useAccordionHeader_unstable } from './useAccordionHeader';\nimport { renderAccordionHeader_unstable } from './renderAccordionHeader';\nimport { useAccordionHeaderStyles_unstable } from './useAccordionHeaderStyles';\nimport { useAccordionHeaderContextValues_unstable } from './useAccordionHeaderContextValues';\nimport type { AccordionHeaderProps } from './AccordionHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled AccordionHeader, using the `useAccordionHeader_unstable` and `useAccordionHeaderStyles_unstable`\n * hooks.\n */\nexport const AccordionHeader: ForwardRefComponent<AccordionHeaderProps> = React.forwardRef((props, ref) => {\n const state = useAccordionHeader_unstable(props, ref);\n const contextValues = useAccordionHeaderContextValues_unstable(state);\n\n useAccordionHeaderStyles_unstable(state);\n\n return renderAccordionHeader_unstable(state, contextValues);\n});\n\nAccordionHeader.displayName = 'AccordionHeader';\n"],"sourceRoot":"../src/"}
|
|
@@ -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 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AccordionHeader/AccordionHeaderContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,OAAO,MAAM,sBAAsB,gBAAG,KAAK,CAAC,aAAN,CAAiD;
|
|
1
|
+
{"version":3,"sources":["components/AccordionHeader/AccordionHeaderContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,OAAO,MAAM,sBAAsB,gBAAG,KAAK,CAAC,aAAN,CAAiD;EACrF,IAAI,EAAE,KAD+E;EAErF,QAAQ,EAAE,KAF2E;EAGrF,IAAI,EAAE,QAH+E;EAIrF,kBAAkB,EAAE;AAJiE,CAAjD,CAA/B;AAOP,OAAO,MAAM,yBAAyB,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,sBAAjB,CAAxC","sourcesContent":["import * as React from 'react';\nimport type { AccordionHeaderContextValue } from './AccordionHeader.types';\n\nexport const AccordionHeaderContext = React.createContext<AccordionHeaderContextValue>({\n open: false,\n disabled: false,\n size: 'medium',\n expandIconPosition: 'start',\n});\n\nexport const useAccordionHeaderContext = () => React.useContext(AccordionHeaderContext);\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AccordionHeader/renderAccordionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,sBAAT,QAAuC,0BAAvC;AAGA;;AAEG;;AACH,OAAO,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,aAF4C,KAG1C;
|
|
1
|
+
{"version":3,"sources":["components/AccordionHeader/renderAccordionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,sBAAT,QAAuC,0BAAvC;AAGA;;AAEG;;AACH,OAAO,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,aAF4C,KAG1C;EACF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAuB,KAAvB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,sBAAsB,CAAC,QAAxB,EAAgC;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAhC,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,EACG,KAAK,CAAC,kBAAN,KAA6B,OAA7B,iBAAwC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAjB,CAD3C,EAEG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAFjB,EAGG,SAAS,CAAC,IAAV,CAAe,QAHlB,EAIG,KAAK,CAAC,kBAAN,KAA6B,KAA7B,iBAAsC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAjB,CAJzC,CADF,CADF,CADF;AAYD,CAlBM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { AccordionHeaderContext } from './AccordionHeaderContext';\nimport type { AccordionHeaderState, AccordionHeaderSlots, AccordionHeaderContextValues } from './AccordionHeader.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderAccordionHeader_unstable = (\n state: AccordionHeaderState,\n contextValues: AccordionHeaderContextValues,\n) => {\n const { slots, slotProps } = getSlots<AccordionHeaderSlots>(state);\n\n return (\n <AccordionHeaderContext.Provider value={contextValues.accordionHeader}>\n <slots.root {...slotProps.root}>\n <slots.button {...slotProps.button}>\n {state.expandIconPosition === 'start' && <slots.expandIcon {...slotProps.expandIcon} />}\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slotProps.root.children}\n {state.expandIconPosition === 'end' && <slots.expandIcon {...slotProps.expandIcon} />}\n </slots.button>\n </slots.root>\n </AccordionHeaderContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -5,7 +5,7 @@ import { useARIAButton } from '@fluentui/react-aria';
|
|
|
5
5
|
import { useContextSelector } from '@fluentui/react-context-selector';
|
|
6
6
|
import { AccordionContext } from '../Accordion/AccordionContext';
|
|
7
7
|
import { ChevronRightRegular } from '@fluentui/react-icons';
|
|
8
|
-
import { useFluent } from '@fluentui/react-shared-contexts';
|
|
8
|
+
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
9
9
|
/**
|
|
10
10
|
* Returns the props and state required to render the component
|
|
11
11
|
* @param props - AccordionHeader properties
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AccordionHeader/useAccordionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,gBAAlD,QAA0E,2BAA1E;AACA,SAAS,gCAAT,QAAiD,wBAAjD;AACA,SAAS,aAAT,QAA8B,sBAA9B;AAEA,SAAS,kBAAT,QAAmC,kCAAnC;AACA,SAAS,gBAAT,QAAiC,+BAAjC;AACA,SAAS,mBAAT,QAAoC,uBAApC;AACA,SAAS,
|
|
1
|
+
{"version":3,"sources":["components/AccordionHeader/useAccordionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,gBAAlD,QAA0E,2BAA1E;AACA,SAAS,gCAAT,QAAiD,wBAAjD;AACA,SAAS,aAAT,QAA8B,sBAA9B;AAEA,SAAS,kBAAT,QAAmC,kCAAnC;AACA,SAAS,gBAAT,QAAiC,+BAAjC;AACA,SAAS,mBAAT,QAAoC,uBAApC;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AAEA;;;;AAIG;;AACH,OAAO,MAAM,2BAA2B,GAAG,CACzC,KADyC,EAEzC,GAFyC,KAGjB;EACxB,MAAM;IAAE,EAAF;IAAM,IAAN;IAAY,MAAZ;IAAoB,UAApB;IAAgC,MAAM,GAAG,KAAzC;IAAgD,IAAI,GAAG,QAAvD;IAAiE,kBAAkB,GAAG;EAAtF,IAAkG,KAAxG;EACA,MAAM;IAAE,aAAa,EAAE,sBAAjB;IAAyC,QAAzC;IAAmD;EAAnD,IAA4D,gCAAgC,EAAlG;EAEA;;;AAGG;;EACH,MAAM,iBAAiB,GAAG,kBAAkB,CAC1C,gBAD0C,EAE1C,GAAG,IAAI,CAAC,GAAG,CAAC,WAAL,IAAoB,GAAG,CAAC,SAAJ,CAAc,MAAd,KAAyB,CAA7C,IAAkD,IAFf,CAA5C;EAKA,MAAM;IAAE;EAAF,IAAU,SAAS,EAAzB,CAbwB,CAexB;;EACA,IAAI,kBAAJ;;EACA,IAAI,kBAAkB,KAAK,KAA3B,EAAkC;IAChC;IACA,kBAAkB,GAAG,IAAI,GAAG,CAAC,EAAJ,GAAS,EAAlC;EACD,CAHD,MAGO;IACL;IACA,kBAAkB,GAAG,IAAI,GAAG,EAAH,GAAQ,GAAG,KAAK,KAAR,GAAgB,CAAhB,GAAoB,GAArD;EACD;;EAED,MAAM,eAAe,GAAG,aAAa,CAAC,MAAD,EAAS;IAC5C,QAAQ,EAAE,IADkC;IAE5C,YAAY,EAAE;MACZ,QADY;MAEZ,iBAFY;MAGZ,iBAAiB;IAHL;EAF8B,CAAT,CAArC;EASA,OAAO;IACL,QADK;IAEL,IAFK;IAGL,IAHK;IAIL,MAJK;IAKL,kBALK;IAML,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,MAAM,EAAE,QAFE;MAGV,UAAU,EAAE,MAHF;MAIV,IAAI,EAAE;IAJI,CANP;IAYL,IAAI,EAAE,qBAAqB,CAAC,EAAE,IAAI,KAAP,EAAc;MACvC,GADuC;MAEvC,GAAG;IAFoC,CAAd,CAZtB;IAgBL,IAAI,EAAE,gBAAgB,CAAC,IAAD,CAhBjB;IAiBL,UAAU,EAAE,gBAAgB,CAAC,UAAD,EAAa;MACvC,QAAQ,EAAE,IAD6B;MAEvC,YAAY,EAAE;QACZ,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,mBAAD,EAAoB;UAAC,SAAS,EAAE,UAAU,kBAAkB;QAAxC,CAApB,CADE;QAEZ,eAAe;MAFH;IAFyB,CAAb,CAjBvB;IAwBL,MAAM,EAAE,EACN,GAAG,eADG;MAEN,OAAO,EAAE,gBAAgB,CACtB,EAAD,IAAmG;;;QACjG,CAAA,EAAA,GAAA,eAAe,CAAC,OAAhB,MAAuB,IAAvB,IAAuB,EAAA,KAAA,KAAA,CAAvB,GAAuB,KAAA,CAAvB,GAAuB,EAAA,CAAA,IAAA,CAAvB,eAAuB,EAAG,EAAH,CAAvB;;QACA,IAAI,CAAC,EAAE,CAAC,gBAAR,EAA0B;UACxB,sBAAsB,CAAC,EAAD,CAAtB;QACD;MACF,CANsB;IAFnB;EAxBH,CAAP;AAoCD,CAzEM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';\nimport { useAccordionItemContext_unstable } from '../AccordionItem/index';\nimport { useARIAButton } from '@fluentui/react-aria';\nimport type { AccordionHeaderProps, AccordionHeaderState } from './AccordionHeader.types';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { AccordionContext } from '../Accordion/AccordionContext';\nimport { ChevronRightRegular } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionHeader properties\n * @param ref - reference to root HTMLElement of AccordionHeader\n */\nexport const useAccordionHeader_unstable = (\n props: AccordionHeaderProps,\n ref: React.Ref<HTMLElement>,\n): AccordionHeaderState => {\n const { as, icon, button, expandIcon, inline = false, size = 'medium', expandIconPosition = 'start' } = props;\n const { onHeaderClick: onAccordionHeaderClick, disabled, open } = useAccordionItemContext_unstable();\n\n /**\n * force disabled state on button if accordion isn't collapsible\n * and this is the only item opened\n */\n const disabledFocusable = useContextSelector(\n AccordionContext,\n ctx => !ctx.collapsible && ctx.openItems.length === 1 && open,\n );\n\n const { dir } = useFluent();\n\n // Calculate how to rotate the expand icon [>] (ChevronRightRegular)\n let expandIconRotation: 0 | 90 | -90 | 180;\n if (expandIconPosition === 'end') {\n // If expand icon is at the end, the chevron points up [^] when open, and down [v] when closed\n expandIconRotation = open ? -90 : 90;\n } else {\n // Otherwise, the chevron points down [v] when open, and right [>] (or left [<] in RTL) when closed\n expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n }\n\n const buttonShorthand = useARIAButton(button, {\n required: true,\n defaultProps: {\n disabled,\n disabledFocusable,\n 'aria-expanded': open,\n },\n });\n\n return {\n disabled,\n open,\n size,\n inline,\n expandIconPosition,\n components: {\n root: 'div',\n button: 'button',\n expandIcon: 'span',\n icon: 'div',\n },\n root: getNativeElementProps(as || 'div', {\n ref,\n ...props,\n }),\n icon: resolveShorthand(icon),\n expandIcon: resolveShorthand(expandIcon, {\n required: true,\n defaultProps: {\n children: <ChevronRightRegular transform={`rotate(${expandIconRotation})`} />,\n 'aria-hidden': true,\n },\n }),\n button: {\n ...buttonShorthand,\n onClick: useEventCallback(\n (ev: React.MouseEvent<HTMLButtonElement & HTMLDivElement & HTMLSpanElement & HTMLAnchorElement>) => {\n buttonShorthand.onClick?.(ev);\n if (!ev.defaultPrevented) {\n onAccordionHeaderClick(ev);\n }\n },\n ),\n },\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AccordionHeader/useAccordionHeaderContextValues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAOA,OAAM,SAAU,wCAAV,CAAmD,KAAnD,EAA8E;
|
|
1
|
+
{"version":3,"sources":["components/AccordionHeader/useAccordionHeaderContextValues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAOA,OAAM,SAAU,wCAAV,CAAmD,KAAnD,EAA8E;EAClF,MAAM;IAAE,QAAF;IAAY,kBAAZ;IAAgC,IAAhC;IAAsC;EAAtC,IAA+C,KAArD;EAEA,MAAM,eAAe,GAAG,KAAK,CAAC,OAAN,CACtB,OAAO;IACL,QADK;IAEL,kBAFK;IAGL,IAHK;IAIL;EAJK,CAAP,CADsB,EAOtB,CAAC,QAAD,EAAW,kBAAX,EAA+B,IAA/B,EAAqC,IAArC,CAPsB,CAAxB;EAUA,OAAO;IAAE;EAAF,CAAP;AACD","sourcesContent":["import * as React from 'react';\nimport type {\n AccordionHeaderContextValue,\n AccordionHeaderState,\n AccordionHeaderContextValues,\n} from './AccordionHeader.types';\n\nexport function useAccordionHeaderContextValues_unstable(state: AccordionHeaderState): AccordionHeaderContextValues {\n const { disabled, expandIconPosition, open, size } = state;\n\n const accordionHeader = React.useMemo<AccordionHeaderContextValue>(\n () => ({\n disabled,\n expandIconPosition,\n open,\n size,\n }),\n [disabled, expandIconPosition, open, size],\n );\n\n return { accordionHeader };\n}\n"],"sourceRoot":"../src/"}
|