@fluentui/react-accordion 9.0.0-rc.11 → 9.0.0-rc.14
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 +108 -1
- package/CHANGELOG.md +38 -2
- package/dist/index.d.ts +16 -14
- package/lib/components/Accordion/Accordion.types.js.map +1 -1
- package/lib/components/AccordionHeader/AccordionHeader.types.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/useAccordionHeaderStyles.js +2 -2
- package/lib/components/AccordionItem/AccordionItem.types.js.map +1 -1
- package/lib/components/AccordionPanel/AccordionPanel.types.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/useAccordionHeaderStyles.js +2 -2
- package/package.json +9 -9
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,114 @@
|
|
|
2
2
|
"name": "@fluentui/react-accordion",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 21 Jun 2022 17:09:28 GMT",
|
|
6
|
+
"tag": "@fluentui/react-accordion_v9.0.0-rc.14",
|
|
7
|
+
"version": "9.0.0-rc.14",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-accordion",
|
|
13
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.11",
|
|
14
|
+
"commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-accordion",
|
|
19
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.14",
|
|
20
|
+
"commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-accordion",
|
|
25
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.10",
|
|
26
|
+
"commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
|
|
27
|
+
}
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"date": "Tue, 31 May 2022 21:28:34 GMT",
|
|
33
|
+
"tag": "@fluentui/react-accordion_v9.0.0-rc.13",
|
|
34
|
+
"version": "9.0.0-rc.13",
|
|
35
|
+
"comments": {
|
|
36
|
+
"prerelease": [
|
|
37
|
+
{
|
|
38
|
+
"author": "olfedias@microsoft.com",
|
|
39
|
+
"package": "@fluentui/react-accordion",
|
|
40
|
+
"commit": "0a5e9fa77a72eecafdd07034ccdc0b95fd49877c",
|
|
41
|
+
"comment": "chore: Update Griffel to latest version"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
45
|
+
"package": "@fluentui/react-accordion",
|
|
46
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd",
|
|
47
|
+
"comment": "updates import to react-shared-components"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-accordion",
|
|
52
|
+
"comment": "Bump @fluentui/react-aria to v9.0.0-rc.10",
|
|
53
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"author": "beachball",
|
|
57
|
+
"package": "@fluentui/react-accordion",
|
|
58
|
+
"comment": "Bump @fluentui/react-context-selector to v9.0.0-rc.10",
|
|
59
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-accordion",
|
|
64
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.10",
|
|
65
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-accordion",
|
|
70
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.13",
|
|
71
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-accordion",
|
|
76
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
|
|
77
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "beachball",
|
|
81
|
+
"package": "@fluentui/react-accordion",
|
|
82
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8",
|
|
83
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
84
|
+
}
|
|
85
|
+
]
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"date": "Thu, 26 May 2022 21:01:22 GMT",
|
|
90
|
+
"tag": "@fluentui/react-accordion_v9.0.0-rc.12",
|
|
91
|
+
"version": "9.0.0-rc.12",
|
|
92
|
+
"comments": {
|
|
93
|
+
"none": [
|
|
94
|
+
{
|
|
95
|
+
"author": "olfedias@microsoft.com",
|
|
96
|
+
"package": "@fluentui/react-accordion",
|
|
97
|
+
"commit": "70f12f46e904da75c3e1eb2c0270a6aecdc8f913",
|
|
98
|
+
"comment": "cleanup examples & docs"
|
|
99
|
+
}
|
|
100
|
+
],
|
|
101
|
+
"prerelease": [
|
|
102
|
+
{
|
|
103
|
+
"author": "beachball",
|
|
104
|
+
"package": "@fluentui/react-accordion",
|
|
105
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.12",
|
|
106
|
+
"commit": "3cf55ce998048554bf6a550de44403843ea8ede0"
|
|
107
|
+
}
|
|
108
|
+
]
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"date": "Mon, 23 May 2022 18:56:40 GMT",
|
|
6
113
|
"tag": "@fluentui/react-accordion_v9.0.0-rc.11",
|
|
7
114
|
"version": "9.0.0-rc.11",
|
|
8
115
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,48 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-accordion
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 21 Jun 2022 17:09:28 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-rc.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.0.0-rc.14)
|
|
8
|
+
|
|
9
|
+
Tue, 21 Jun 2022 17:09:28 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.0.0-rc.13..@fluentui/react-accordion_v9.0.0-rc.14)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.11 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
|
|
15
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.14 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
|
|
16
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
|
|
17
|
+
|
|
18
|
+
## [9.0.0-rc.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.0.0-rc.13)
|
|
19
|
+
|
|
20
|
+
Tue, 31 May 2022 21:28:34 GMT
|
|
21
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.0.0-rc.12..@fluentui/react-accordion_v9.0.0-rc.13)
|
|
22
|
+
|
|
23
|
+
### Changes
|
|
24
|
+
|
|
25
|
+
- chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
|
|
26
|
+
- updates import to react-shared-components ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by bernardo.sunderhus@gmail.com)
|
|
27
|
+
- Bump @fluentui/react-aria to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
28
|
+
- Bump @fluentui/react-context-selector to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
29
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
30
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.13 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
31
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
32
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
33
|
+
|
|
34
|
+
## [9.0.0-rc.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.0.0-rc.12)
|
|
35
|
+
|
|
36
|
+
Thu, 26 May 2022 21:01:22 GMT
|
|
37
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.0.0-rc.11..@fluentui/react-accordion_v9.0.0-rc.12)
|
|
38
|
+
|
|
39
|
+
### Changes
|
|
40
|
+
|
|
41
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.12 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
|
|
42
|
+
|
|
7
43
|
## [9.0.0-rc.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.0.0-rc.11)
|
|
8
44
|
|
|
9
|
-
Mon, 23 May 2022 18:
|
|
45
|
+
Mon, 23 May 2022 18:56:40 GMT
|
|
10
46
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.0.0-rc.10..@fluentui/react-accordion_v9.0.0-rc.11)
|
|
11
47
|
|
|
12
48
|
### Changes
|
package/dist/index.d.ts
CHANGED
|
@@ -54,15 +54,15 @@ export declare type AccordionHeaderExpandIconPosition = 'start' | 'end';
|
|
|
54
54
|
|
|
55
55
|
export declare type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> & {
|
|
56
56
|
/**
|
|
57
|
-
* The position of the expand icon slot in heading
|
|
57
|
+
* The position of the expand icon slot in heading.
|
|
58
58
|
*/
|
|
59
59
|
expandIconPosition?: AccordionHeaderExpandIconPosition;
|
|
60
60
|
/**
|
|
61
|
-
* Indicates if the AccordionHeader should be rendered inline
|
|
61
|
+
* Indicates if the AccordionHeader should be rendered inline.
|
|
62
62
|
*/
|
|
63
63
|
inline?: boolean;
|
|
64
64
|
/**
|
|
65
|
-
* Size of spacing in the heading
|
|
65
|
+
* Size of spacing in the heading.
|
|
66
66
|
*/
|
|
67
67
|
size?: AccordionHeaderSize;
|
|
68
68
|
};
|
|
@@ -79,11 +79,11 @@ export declare type AccordionHeaderSlots = {
|
|
|
79
79
|
*/
|
|
80
80
|
button: NonNullable<Slot<ARIAButtonSlotProps>>;
|
|
81
81
|
/**
|
|
82
|
-
* Expand icon slot rendered before (or after) children content in heading
|
|
82
|
+
* Expand icon slot rendered before (or after) children content in heading.
|
|
83
83
|
*/
|
|
84
84
|
expandIcon: Slot<'span'>;
|
|
85
85
|
/**
|
|
86
|
-
* Expand icon slot rendered before (or after) children content in heading
|
|
86
|
+
* Expand icon slot rendered before (or after) children content in heading.
|
|
87
87
|
*/
|
|
88
88
|
icon?: Slot<'div'>;
|
|
89
89
|
};
|
|
@@ -110,11 +110,11 @@ export declare type AccordionItemContextValues = {
|
|
|
110
110
|
|
|
111
111
|
export declare type AccordionItemProps = ComponentProps<AccordionItemSlots> & {
|
|
112
112
|
/**
|
|
113
|
-
* Disables opening/closing of panel
|
|
113
|
+
* Disables opening/closing of panel.
|
|
114
114
|
*/
|
|
115
115
|
disabled?: boolean;
|
|
116
116
|
/**
|
|
117
|
-
*
|
|
117
|
+
* Required value that identifies this item inside an Accordion component.
|
|
118
118
|
*/
|
|
119
119
|
value: AccordionItemValue;
|
|
120
120
|
};
|
|
@@ -144,32 +144,34 @@ export declare type AccordionPanelSlots = {
|
|
|
144
144
|
|
|
145
145
|
export declare type AccordionPanelState = ComponentState<AccordionPanelSlots> & {
|
|
146
146
|
/**
|
|
147
|
-
* Internal open state, provided by context
|
|
147
|
+
* Internal open state, provided by context.
|
|
148
148
|
*/
|
|
149
149
|
open: boolean;
|
|
150
150
|
};
|
|
151
151
|
|
|
152
152
|
export declare type AccordionProps = ComponentProps<AccordionSlots> & {
|
|
153
153
|
/**
|
|
154
|
-
* Default value for the uncontrolled state of the panel
|
|
154
|
+
* Default value for the uncontrolled state of the panel.
|
|
155
155
|
*/
|
|
156
156
|
defaultOpenItems?: AccordionItemValue | AccordionItemValue[];
|
|
157
157
|
/**
|
|
158
|
-
* Indicates if Accordion support multiple Panels closed at the same time
|
|
158
|
+
* Indicates if Accordion support multiple Panels closed at the same time.
|
|
159
159
|
*/
|
|
160
160
|
collapsible?: boolean;
|
|
161
161
|
/**
|
|
162
|
-
* Indicates if Accordion support multiple Panels opened at the same time
|
|
162
|
+
* Indicates if Accordion support multiple Panels opened at the same time.
|
|
163
163
|
*/
|
|
164
164
|
multiple?: boolean;
|
|
165
165
|
/**
|
|
166
|
-
* Indicates if keyboard navigation is available and gives two options,
|
|
167
|
-
* linear or circular navigation
|
|
166
|
+
* Indicates if keyboard navigation is available and gives two options, linear or circular navigation.
|
|
168
167
|
*/
|
|
169
168
|
navigation?: 'linear' | 'circular';
|
|
169
|
+
/**
|
|
170
|
+
* Callback to be called when the opened items change.
|
|
171
|
+
*/
|
|
170
172
|
onToggle?: AccordionToggleEventHandler;
|
|
171
173
|
/**
|
|
172
|
-
* Controls the state of the panel
|
|
174
|
+
* Controls the state of the panel.
|
|
173
175
|
*/
|
|
174
176
|
openItems?: AccordionItemValue | AccordionItemValue[];
|
|
175
177
|
};
|
|
@@ -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\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
|
|
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 +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 = 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
|
|
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"]}
|
|
@@ -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":"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","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/"}
|
|
@@ -27,7 +27,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
27
27
|
"fsow6f": "fgusgyc"
|
|
28
28
|
},
|
|
29
29
|
"focusIndicator": {
|
|
30
|
-
"
|
|
30
|
+
"Brovlpu": "ftqa4ok",
|
|
31
31
|
"Bnmjwt4": "flfsvnh",
|
|
32
32
|
"Jopkrh": ["f1781m5e", "flvaaa9"],
|
|
33
33
|
"hhrs2v": "f50u1b5",
|
|
@@ -137,7 +137,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
137
137
|
}
|
|
138
138
|
}, {
|
|
139
139
|
"d": [".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f37px4s{-webkit-appearance:button;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".fgusgyc{text-align:unset;}", "[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .f1pxpxw8:focus:after{content:\"\";}", "[data-keyboard-nav] .f1149fnl:focus:after{position:absolute;}", "[data-keyboard-nav] .fd1orka:focus:after{pointer-events:none;}", "[data-keyboard-nav] .fq7mjg8:focus:after{z-index:1;}", "[data-keyboard-nav] .fmqgchs:focus:after{border-top-style:solid;}", "[data-keyboard-nav] .f1lv6wi8:focus:after{border-right-style:solid;}", "[data-keyboard-nav] .famjx04:focus:after{border-left-style:solid;}", "[data-keyboard-nav] .f1nbyjd2:focus:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f5n18is:focus:after{border-top-width:2px;}", "[data-keyboard-nav] .f13az7yk:focus:after{border-right-width:2px;}", "[data-keyboard-nav] .f14kwzu1:focus:after{border-left-width:2px;}", "[data-keyboard-nav] .fneogx5:focus:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1f0b0sl:focus:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .flsib9d:focus:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .fbewl49:focus:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .fs55jlu:focus:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1f43d5r:focus:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1ib27sc:focus:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f14s7j5v:focus:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f13oqbgc:focus:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1284xzw:focus:after{top:-2px;}", "[data-keyboard-nav] .f14dru39:focus:after{bottom:-2px;}", "[data-keyboard-nav] .fvabyfg:focus:after{left:-2px;}", "[data-keyboard-nav] .f12y1wz2:focus:after{right:-2px;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f2i1086{border-bottom-right-radius:2px;}", ".f1rlsnju{border-bottom-left-radius:2px;}", ".f1stktl2{border-top-right-radius:2px;}", ".f1127022{border-top-left-radius:2px;}", ".fwrgwhw{background-image:none;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f14t3ns0{display:inline-block;}", ".f10pi13n{position:relative;}", ".f1wfwcyy{width:calc(100% - 22px);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".f1ft4266{height:44px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1k6fduh{cursor:pointer;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1d2rq10{height:32px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fez10in{line-height:0;}", ".fe5j1ua{font-size:20px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".flqd7gy{-webkit-flex-basis:0%;-ms-flex-preferred-size:0%;flex-basis:0%;}", ".f9c4gz4{-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;}", ".f1phki43{margin-right:8px;}", ".ff9s3yw{margin-left:8px;}", ".f1oou7ox{margin-left:10px;}", ".f1pxv85q{margin-right:10px;}"],
|
|
140
|
-
"
|
|
140
|
+
"f": [".ftqa4ok:focus{outline-style:none;}"]
|
|
141
141
|
});
|
|
142
142
|
/** Applies style classnames to slots */
|
|
143
143
|
|
|
@@ -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 = 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
|
|
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,"file":"AccordionPanel.types.js","sourceRoot":"../src/","sources":["components/AccordionPanel/AccordionPanel.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AccordionPanelSlots = {\n root: Slot<'div'>;\n};\n\nexport type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;\n\nexport type AccordionPanelState = ComponentState<AccordionPanelSlots> & {\n /**\n * Internal open state, provided by context
|
|
1
|
+
{"version":3,"file":"AccordionPanel.types.js","sourceRoot":"../src/","sources":["components/AccordionPanel/AccordionPanel.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AccordionPanelSlots = {\n root: Slot<'div'>;\n};\n\nexport type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;\n\nexport type AccordionPanelState = ComponentState<AccordionPanelSlots> & {\n /**\n * Internal open state, provided by context.\n */\n open: boolean;\n};\n"]}
|
|
@@ -50,7 +50,7 @@ const useAccordionHeader_unstable = (props, ref) => {
|
|
|
50
50
|
const disabledFocusable = react_context_selector_1.useContextSelector(AccordionContext_1.AccordionContext, ctx => !ctx.collapsible && ctx.openItems.length === 1 && open);
|
|
51
51
|
const {
|
|
52
52
|
dir
|
|
53
|
-
} = react_shared_contexts_1.
|
|
53
|
+
} = react_shared_contexts_1.useFluent_unstable(); // Calculate how to rotate the expand icon [>] (ChevronRightRegular)
|
|
54
54
|
|
|
55
55
|
let expandIconRotation;
|
|
56
56
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/AccordionHeader/useAccordionHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AAEA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;AAEA;;;;AAIG;;;AACI,MAAM,2BAA2B,GAAG,CACzC,KADyC,EAEzC,GAFyC,KAGjB;AACxB,QAAM;AAAE,IAAA,EAAF;AAAM,IAAA,IAAN;AAAY,IAAA,MAAZ;AAAoB,IAAA,UAApB;AAAgC,IAAA,MAAM,GAAG,KAAzC;AAAgD,IAAA,IAAI,GAAG,QAAvD;AAAiE,IAAA,kBAAkB,GAAG;AAAtF,MAAkG,KAAxG;AACA,QAAM;AAAE,IAAA,aAAa,EAAE,sBAAjB;AAAyC,IAAA,QAAzC;AAAmD,IAAA;AAAnD,MAA4D,OAAA,CAAA,gCAAA,EAAlE;AAEA;;;AAGG;;AACH,QAAM,iBAAiB,GAAG,wBAAA,CAAA,kBAAA,CACxB,kBAAA,CAAA,gBADwB,EAExB,GAAG,IAAI,CAAC,GAAG,CAAC,WAAL,IAAoB,GAAG,CAAC,SAAJ,CAAc,MAAd,KAAyB,CAA7C,IAAkD,IAFjC,CAA1B;AAKA,QAAM;AAAE,IAAA;AAAF,MAAU,uBAAA,CAAA,
|
|
1
|
+
{"version":3,"sources":["components/AccordionHeader/useAccordionHeader.tsx"],"names":[],"mappings":"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","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/"}
|
|
@@ -37,7 +37,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
37
37
|
"fsow6f": "fgusgyc"
|
|
38
38
|
},
|
|
39
39
|
"focusIndicator": {
|
|
40
|
-
"
|
|
40
|
+
"Brovlpu": "ftqa4ok",
|
|
41
41
|
"Bnmjwt4": "flfsvnh",
|
|
42
42
|
"Jopkrh": ["f1781m5e", "flvaaa9"],
|
|
43
43
|
"hhrs2v": "f50u1b5",
|
|
@@ -147,7 +147,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
147
147
|
}
|
|
148
148
|
}, {
|
|
149
149
|
"d": [".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f37px4s{-webkit-appearance:button;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".fgusgyc{text-align:unset;}", "[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .f1pxpxw8:focus:after{content:\"\";}", "[data-keyboard-nav] .f1149fnl:focus:after{position:absolute;}", "[data-keyboard-nav] .fd1orka:focus:after{pointer-events:none;}", "[data-keyboard-nav] .fq7mjg8:focus:after{z-index:1;}", "[data-keyboard-nav] .fmqgchs:focus:after{border-top-style:solid;}", "[data-keyboard-nav] .f1lv6wi8:focus:after{border-right-style:solid;}", "[data-keyboard-nav] .famjx04:focus:after{border-left-style:solid;}", "[data-keyboard-nav] .f1nbyjd2:focus:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f5n18is:focus:after{border-top-width:2px;}", "[data-keyboard-nav] .f13az7yk:focus:after{border-right-width:2px;}", "[data-keyboard-nav] .f14kwzu1:focus:after{border-left-width:2px;}", "[data-keyboard-nav] .fneogx5:focus:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1f0b0sl:focus:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .flsib9d:focus:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .fbewl49:focus:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .fs55jlu:focus:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1f43d5r:focus:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1ib27sc:focus:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f14s7j5v:focus:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f13oqbgc:focus:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1284xzw:focus:after{top:-2px;}", "[data-keyboard-nav] .f14dru39:focus:after{bottom:-2px;}", "[data-keyboard-nav] .fvabyfg:focus:after{left:-2px;}", "[data-keyboard-nav] .f12y1wz2:focus:after{right:-2px;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f2i1086{border-bottom-right-radius:2px;}", ".f1rlsnju{border-bottom-left-radius:2px;}", ".f1stktl2{border-top-right-radius:2px;}", ".f1127022{border-top-left-radius:2px;}", ".fwrgwhw{background-image:none;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f14t3ns0{display:inline-block;}", ".f10pi13n{position:relative;}", ".f1wfwcyy{width:calc(100% - 22px);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".f1ft4266{height:44px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1k6fduh{cursor:pointer;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1d2rq10{height:32px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fez10in{line-height:0;}", ".fe5j1ua{font-size:20px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".flqd7gy{-webkit-flex-basis:0%;-ms-flex-preferred-size:0%;flex-basis:0%;}", ".f9c4gz4{-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;}", ".f1phki43{margin-right:8px;}", ".ff9s3yw{margin-left:8px;}", ".f1oou7ox{margin-left:10px;}", ".f1pxv85q{margin-right:10px;}"],
|
|
150
|
-
"
|
|
150
|
+
"f": [".ftqa4ok:focus{outline-style:none;}"]
|
|
151
151
|
});
|
|
152
152
|
/** Applies style classnames to slots */
|
|
153
153
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-accordion",
|
|
3
|
-
"version": "9.0.0-rc.
|
|
3
|
+
"version": "9.0.0-rc.14",
|
|
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": "9.0.0-beta.
|
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.8",
|
|
32
32
|
"@fluentui/scripts": "^1.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-aria": "9.0.0-rc.
|
|
36
|
-
"@fluentui/react-context-selector": "9.0.0-rc.
|
|
37
|
-
"@fluentui/react-shared-contexts": "9.0.0-rc.
|
|
35
|
+
"@fluentui/react-aria": "9.0.0-rc.10",
|
|
36
|
+
"@fluentui/react-context-selector": "9.0.0-rc.10",
|
|
37
|
+
"@fluentui/react-shared-contexts": "9.0.0-rc.11",
|
|
38
38
|
"@fluentui/react-icons": "^2.0.166-rc.3",
|
|
39
|
-
"@griffel/react": "1.0
|
|
40
|
-
"@fluentui/react-tabster": "9.0.0-rc.
|
|
41
|
-
"@fluentui/react-theme": "9.0.0-rc.
|
|
42
|
-
"@fluentui/react-utilities": "9.0.0-rc.
|
|
39
|
+
"@griffel/react": "1.1.0",
|
|
40
|
+
"@fluentui/react-tabster": "9.0.0-rc.14",
|
|
41
|
+
"@fluentui/react-theme": "9.0.0-rc.10",
|
|
42
|
+
"@fluentui/react-utilities": "9.0.0-rc.10",
|
|
43
43
|
"tslib": "^2.1.0"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|