@fluentui/react-accordion 9.1.25 → 9.3.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.
Files changed (79) hide show
  1. package/CHANGELOG.json +86 -2
  2. package/CHANGELOG.md +30 -3
  3. package/dist/index.d.ts +41 -26
  4. package/lib/components/Accordion/Accordion.js.map +1 -1
  5. package/lib/components/Accordion/Accordion.types.js.map +1 -1
  6. package/lib/components/Accordion/index.js +0 -1
  7. package/lib/components/Accordion/index.js.map +1 -1
  8. package/lib/components/Accordion/renderAccordion.js +2 -2
  9. package/lib/components/Accordion/renderAccordion.js.map +1 -1
  10. package/lib/components/Accordion/useAccordion.js +9 -4
  11. package/lib/components/Accordion/useAccordion.js.map +1 -1
  12. package/lib/components/Accordion/useAccordionContextValues.js +3 -2
  13. package/lib/components/Accordion/useAccordionContextValues.js.map +1 -1
  14. package/lib/components/AccordionHeader/AccordionHeader.types.js.map +1 -1
  15. package/lib/components/AccordionHeader/renderAccordionHeader.js +2 -2
  16. package/lib/components/AccordionHeader/renderAccordionHeader.js.map +1 -1
  17. package/lib/components/AccordionHeader/useAccordionHeader.js +11 -7
  18. package/lib/components/AccordionHeader/useAccordionHeader.js.map +1 -1
  19. package/lib/components/AccordionHeader/useAccordionHeaderContextValues.js.map +1 -1
  20. package/lib/components/AccordionItem/AccordionItem.types.js +1 -1
  21. package/lib/components/AccordionItem/AccordionItem.types.js.map +1 -1
  22. package/lib/components/AccordionItem/index.js +0 -1
  23. package/lib/components/AccordionItem/index.js.map +1 -1
  24. package/lib/components/AccordionItem/renderAccordionItem.js +2 -2
  25. package/lib/components/AccordionItem/renderAccordionItem.js.map +1 -1
  26. package/lib/components/AccordionItem/useAccordionItem.js +3 -10
  27. package/lib/components/AccordionItem/useAccordionItem.js.map +1 -1
  28. package/lib/components/AccordionItem/useAccordionItemContextValues.js +5 -5
  29. package/lib/components/AccordionItem/useAccordionItemContextValues.js.map +1 -1
  30. package/lib/components/AccordionPanel/useAccordionPanel.js +2 -2
  31. package/lib/components/AccordionPanel/useAccordionPanel.js.map +1 -1
  32. package/lib/{components/Accordion/AccordionContext.js → contexts/accordion.js} +4 -2
  33. package/lib/contexts/accordion.js.map +1 -0
  34. package/lib/contexts/accordionHeader.js +11 -0
  35. package/lib/contexts/accordionHeader.js.map +1 -0
  36. package/lib/{components/AccordionItem/AccordionItemContext.js → contexts/accordionItem.js} +4 -5
  37. package/lib/contexts/accordionItem.js.map +1 -0
  38. package/lib/index.js +5 -2
  39. package/lib/index.js.map +1 -1
  40. package/lib-commonjs/components/Accordion/index.js +0 -1
  41. package/lib-commonjs/components/Accordion/index.js.map +1 -1
  42. package/lib-commonjs/components/Accordion/renderAccordion.js +2 -2
  43. package/lib-commonjs/components/Accordion/renderAccordion.js.map +1 -1
  44. package/lib-commonjs/components/Accordion/useAccordion.js +9 -4
  45. package/lib-commonjs/components/Accordion/useAccordion.js.map +1 -1
  46. package/lib-commonjs/components/Accordion/useAccordionContextValues.js +3 -2
  47. package/lib-commonjs/components/Accordion/useAccordionContextValues.js.map +1 -1
  48. package/lib-commonjs/components/AccordionHeader/renderAccordionHeader.js +2 -2
  49. package/lib-commonjs/components/AccordionHeader/renderAccordionHeader.js.map +1 -1
  50. package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js +12 -8
  51. package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js.map +1 -1
  52. package/lib-commonjs/components/AccordionItem/AccordionItem.types.js +0 -2
  53. package/lib-commonjs/components/AccordionItem/AccordionItem.types.js.map +1 -1
  54. package/lib-commonjs/components/AccordionItem/index.js +0 -1
  55. package/lib-commonjs/components/AccordionItem/index.js.map +1 -1
  56. package/lib-commonjs/components/AccordionItem/renderAccordionItem.js +2 -2
  57. package/lib-commonjs/components/AccordionItem/renderAccordionItem.js.map +1 -1
  58. package/lib-commonjs/components/AccordionItem/useAccordionItem.js +4 -11
  59. package/lib-commonjs/components/AccordionItem/useAccordionItem.js.map +1 -1
  60. package/lib-commonjs/components/AccordionItem/useAccordionItemContextValues.js +5 -5
  61. package/lib-commonjs/components/AccordionItem/useAccordionItemContextValues.js.map +1 -1
  62. package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js +4 -4
  63. package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js.map +1 -1
  64. package/lib-commonjs/{components/Accordion/AccordionContext.js → contexts/accordion.js} +3 -2
  65. package/lib-commonjs/contexts/accordion.js.map +1 -0
  66. package/lib-commonjs/{components/AccordionHeader/AccordionHeaderContext.js → contexts/accordionHeader.js} +4 -3
  67. package/lib-commonjs/contexts/accordionHeader.js.map +1 -0
  68. package/lib-commonjs/{components/AccordionItem/AccordionItemContext.js → contexts/accordionItem.js} +3 -5
  69. package/lib-commonjs/contexts/accordionItem.js.map +1 -0
  70. package/lib-commonjs/index.js +10 -5
  71. package/lib-commonjs/index.js.map +1 -1
  72. package/package.json +8 -8
  73. package/lib/components/Accordion/AccordionContext.js.map +0 -1
  74. package/lib/components/AccordionHeader/AccordionHeaderContext.js +0 -10
  75. package/lib/components/AccordionHeader/AccordionHeaderContext.js.map +0 -1
  76. package/lib/components/AccordionItem/AccordionItemContext.js.map +0 -1
  77. package/lib-commonjs/components/Accordion/AccordionContext.js.map +0 -1
  78. package/lib-commonjs/components/AccordionHeader/AccordionHeaderContext.js.map +0 -1
  79. package/lib-commonjs/components/AccordionItem/AccordionItemContext.js.map +0 -1
package/CHANGELOG.json CHANGED
@@ -2,7 +2,91 @@
2
2
  "name": "@fluentui/react-accordion",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 25 Jul 2023 13:26:19 GMT",
5
+ "date": "Fri, 04 Aug 2023 08:48:21 GMT",
6
+ "tag": "@fluentui/react-accordion_v9.3.0",
7
+ "version": "9.3.0",
8
+ "comments": {
9
+ "minor": [
10
+ {
11
+ "author": "bernardo.sunderhus@gmail.com",
12
+ "package": "@fluentui/react-accordion",
13
+ "commit": "192666b54cb365f4c958f46c3e097b597ebd94fc",
14
+ "comment": "feat: make AccordionItemValue generic"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-accordion",
19
+ "comment": "Bump @fluentui/react-aria to v9.3.28",
20
+ "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-accordion",
25
+ "comment": "Bump @fluentui/react-context-selector to v9.1.27",
26
+ "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-accordion",
31
+ "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.13",
32
+ "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-accordion",
37
+ "comment": "Bump @fluentui/react-shared-contexts to v9.7.1",
38
+ "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-accordion",
43
+ "comment": "Bump @fluentui/react-tabster to v9.12.0",
44
+ "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui/react-accordion",
49
+ "comment": "Bump @fluentui/react-theme to v9.1.10",
50
+ "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
51
+ },
52
+ {
53
+ "author": "beachball",
54
+ "package": "@fluentui/react-accordion",
55
+ "comment": "Bump @fluentui/react-utilities to v9.11.0",
56
+ "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
57
+ }
58
+ ]
59
+ }
60
+ },
61
+ {
62
+ "date": "Tue, 01 Aug 2023 10:17:19 GMT",
63
+ "tag": "@fluentui/react-accordion_v9.2.0",
64
+ "version": "9.2.0",
65
+ "comments": {
66
+ "minor": [
67
+ {
68
+ "author": "jirivyhnalek@microsoft.com",
69
+ "package": "@fluentui/react-accordion",
70
+ "commit": "0c693a82d2d6e3c52012d53fdd40af42397fc5cf",
71
+ "comment": "Accordion - export AccordionHeaderContextProvider"
72
+ },
73
+ {
74
+ "author": "beachball",
75
+ "package": "@fluentui/react-accordion",
76
+ "comment": "Bump @fluentui/react-shared-contexts to v9.7.0",
77
+ "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
78
+ },
79
+ {
80
+ "author": "beachball",
81
+ "package": "@fluentui/react-accordion",
82
+ "comment": "Bump @fluentui/react-tabster to v9.11.1",
83
+ "commit": "412d815f88863bde8bb16abc8fd9c4140a37f1f5"
84
+ }
85
+ ]
86
+ }
87
+ },
88
+ {
89
+ "date": "Tue, 25 Jul 2023 13:29:16 GMT",
6
90
  "tag": "@fluentui/react-accordion_v9.1.25",
7
91
  "version": "9.1.25",
8
92
  "comments": {
@@ -17,7 +101,7 @@
17
101
  "author": "beachball",
18
102
  "package": "@fluentui/react-accordion",
19
103
  "comment": "Bump @fluentui/react-tabster to v9.11.0",
20
- "commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
104
+ "commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
21
105
  }
22
106
  ]
23
107
  }
package/CHANGELOG.md CHANGED
@@ -1,18 +1,45 @@
1
1
  # Change Log - @fluentui/react-accordion
2
2
 
3
- This log was last generated on Tue, 25 Jul 2023 13:26:19 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 04 Aug 2023 08:48:21 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.3.0)
8
+
9
+ Fri, 04 Aug 2023 08:48:21 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.2.0..@fluentui/react-accordion_v9.3.0)
11
+
12
+ ### Minor changes
13
+
14
+ - feat: make AccordionItemValue generic ([PR #28665](https://github.com/microsoft/fluentui/pull/28665) by bernardo.sunderhus@gmail.com)
15
+ - Bump @fluentui/react-aria to v9.3.28 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
16
+ - Bump @fluentui/react-context-selector to v9.1.27 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
17
+ - Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.13 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
18
+ - Bump @fluentui/react-shared-contexts to v9.7.1 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
19
+ - Bump @fluentui/react-tabster to v9.12.0 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
20
+ - Bump @fluentui/react-theme to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
21
+ - Bump @fluentui/react-utilities to v9.11.0 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
22
+
23
+ ## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.2.0)
24
+
25
+ Tue, 01 Aug 2023 10:17:19 GMT
26
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.1.25..@fluentui/react-accordion_v9.2.0)
27
+
28
+ ### Minor changes
29
+
30
+ - Accordion - export AccordionHeaderContextProvider ([PR #28542](https://github.com/microsoft/fluentui/pull/28542) by jirivyhnalek@microsoft.com)
31
+ - Bump @fluentui/react-shared-contexts to v9.7.0 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
32
+ - Bump @fluentui/react-tabster to v9.11.1 ([PR #28689](https://github.com/microsoft/fluentui/pull/28689) by beachball)
33
+
7
34
  ## [9.1.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.1.25)
8
35
 
9
- Tue, 25 Jul 2023 13:26:19 GMT
36
+ Tue, 25 Jul 2023 13:29:16 GMT
10
37
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.1.24..@fluentui/react-accordion_v9.1.25)
11
38
 
12
39
  ### Patches
13
40
 
14
41
  - chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
15
- - Bump @fluentui/react-tabster to v9.11.0 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
42
+ - Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
16
43
 
17
44
  ## [9.1.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.1.24)
18
45
 
package/dist/index.d.ts CHANGED
@@ -15,11 +15,11 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
15
15
  /**
16
16
  * Define a styled Accordion, using the `useAccordion_unstable` and `useAccordionStyles_unstable` hooks.
17
17
  */
18
- export declare const Accordion: ForwardRefComponent<AccordionProps>;
18
+ export declare const Accordion: ForwardRefComponent<AccordionProps> & (<TItem>(props: AccordionProps<TItem>) => JSX.Element);
19
19
 
20
20
  export declare const accordionClassNames: SlotClassNames<AccordionSlots>;
21
21
 
22
- export declare type AccordionContextValue = Required<Pick<AccordionProps, 'collapsible'>> & Pick<AccordionProps, 'navigation'> & {
22
+ export declare type AccordionContextValue<Value = AccordionItemValue> = {
23
23
  /**
24
24
  * The list of opened panels by index
25
25
  */
@@ -28,7 +28,10 @@ export declare type AccordionContextValue = Required<Pick<AccordionProps, 'colla
28
28
  * Callback used by AccordionItem to request a change on it's own opened state
29
29
  * Should be used to toggle AccordionItem
30
30
  */
31
- requestToggle: (event: AccordionToggleEvent, data: AccordionToggleData) => void;
31
+ requestToggle: (data: AccordionRequestToggleData<Value>) => void;
32
+ collapsible: boolean;
33
+ multiple: boolean;
34
+ navigation: 'linear' | 'circular' | undefined;
32
35
  };
33
36
 
34
37
  export declare type AccordionContextValues = {
@@ -43,9 +46,11 @@ export declare const AccordionHeader: ForwardRefComponent<AccordionHeaderProps>;
43
46
 
44
47
  export declare const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots>;
45
48
 
46
- export declare type AccordionHeaderContextValue = Required<Pick<AccordionHeaderProps, 'expandIconPosition' | 'size'>> & {
49
+ export declare type AccordionHeaderContextValue = {
47
50
  disabled: boolean;
48
51
  open: boolean;
52
+ expandIconPosition: AccordionHeaderExpandIconPosition;
53
+ size: AccordionHeaderSize;
49
54
  };
50
55
 
51
56
  export declare type AccordionHeaderContextValues = {
@@ -69,6 +74,8 @@ export declare type AccordionHeaderProps = ComponentProps<Partial<AccordionHeade
69
74
  size?: AccordionHeaderSize;
70
75
  };
71
76
 
77
+ export declare const AccordionHeaderProvider: React_2.Provider<AccordionHeaderContextValue>;
78
+
72
79
  export declare type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';
73
80
 
74
81
  export declare type AccordionHeaderSlots = {
@@ -101,16 +108,17 @@ export declare const AccordionItem: ForwardRefComponent<AccordionItemProps>;
101
108
 
102
109
  export declare const accordionItemClassNames: SlotClassNames<AccordionItemSlots>;
103
110
 
104
- export declare type AccordionItemContextValue = Required<Pick<AccordionItemProps, 'disabled'>> & {
105
- onHeaderClick(ev: React_2.MouseEvent | React_2.KeyboardEvent): void;
111
+ export declare type AccordionItemContextValue<Value = AccordionItemValue> = {
106
112
  open: boolean;
113
+ disabled: boolean;
114
+ value: Value;
107
115
  };
108
116
 
109
- export declare type AccordionItemContextValues = {
110
- accordionItem: AccordionItemContextValue;
117
+ export declare type AccordionItemContextValues<Value = AccordionItemValue> = {
118
+ accordionItem: AccordionItemContextValue<Value>;
111
119
  };
112
120
 
113
- export declare type AccordionItemProps = ComponentProps<AccordionItemSlots> & {
121
+ export declare type AccordionItemProps<Value = AccordionItemValue> = ComponentProps<AccordionItemSlots> & {
114
122
  /**
115
123
  * Disables opening/closing of panel.
116
124
  */
@@ -118,16 +126,16 @@ export declare type AccordionItemProps = ComponentProps<AccordionItemSlots> & {
118
126
  /**
119
127
  * Required value that identifies this item inside an Accordion component.
120
128
  */
121
- value: AccordionItemValue;
129
+ value: Value;
122
130
  };
123
131
 
124
- export declare const AccordionItemProvider: React_2.Provider<AccordionItemContextValue>;
132
+ export declare const AccordionItemProvider: React_2.Provider<AccordionItemContextValue<unknown>>;
125
133
 
126
134
  export declare type AccordionItemSlots = {
127
135
  root: NonNullable<Slot<'div'>>;
128
136
  };
129
137
 
130
- export declare type AccordionItemState = ComponentState<AccordionItemSlots> & AccordionItemContextValue;
138
+ export declare type AccordionItemState<Value = AccordionItemValue> = ComponentState<AccordionItemSlots> & AccordionItemContextValue<Value>;
131
139
 
132
140
  export declare type AccordionItemValue = unknown;
133
141
 
@@ -151,11 +159,11 @@ export declare type AccordionPanelState = ComponentState<AccordionPanelSlots> &
151
159
  open: boolean;
152
160
  };
153
161
 
154
- export declare type AccordionProps = ComponentProps<AccordionSlots> & {
162
+ export declare type AccordionProps<Value = AccordionItemValue> = ComponentProps<AccordionSlots> & {
155
163
  /**
156
164
  * Default value for the uncontrolled state of the panel.
157
165
  */
158
- defaultOpenItems?: AccordionItemValue | AccordionItemValue[];
166
+ defaultOpenItems?: Value | Value[];
159
167
  /**
160
168
  * Indicates if Accordion support multiple Panels closed at the same time.
161
169
  */
@@ -171,28 +179,33 @@ export declare type AccordionProps = ComponentProps<AccordionSlots> & {
171
179
  /**
172
180
  * Callback to be called when the opened items change.
173
181
  */
174
- onToggle?: AccordionToggleEventHandler;
182
+ onToggle?: AccordionToggleEventHandler<Value>;
175
183
  /**
176
184
  * Controls the state of the panel.
177
185
  */
178
- openItems?: AccordionItemValue | AccordionItemValue[];
186
+ openItems?: Value | Value[];
179
187
  };
180
188
 
181
- export declare const AccordionProvider: Provider<AccordionContextValue> & FC<ProviderProps<AccordionContextValue>>;
189
+ export declare const AccordionProvider: Provider<AccordionContextValue<unknown>> & FC<ProviderProps<AccordionContextValue<unknown>>>;
190
+
191
+ declare type AccordionRequestToggleData<Value = AccordionItemValue> = {
192
+ event: AccordionToggleEvent;
193
+ } & Pick<AccordionToggleData<Value>, 'value'>;
182
194
 
183
195
  export declare type AccordionSlots = {
184
196
  root: NonNullable<Slot<'div'>>;
185
197
  };
186
198
 
187
- export declare type AccordionState = ComponentState<AccordionSlots> & AccordionContextValue;
199
+ export declare type AccordionState<Value = AccordionItemValue> = ComponentState<AccordionSlots> & AccordionContextValue<Value>;
188
200
 
189
- export declare type AccordionToggleData = {
190
- value: AccordionItemValue;
201
+ export declare type AccordionToggleData<Value = AccordionItemValue> = {
202
+ value: Value;
203
+ openItems: Value[];
191
204
  };
192
205
 
193
206
  export declare type AccordionToggleEvent<E = HTMLElement> = React_2.MouseEvent<E> | React_2.KeyboardEvent<E>;
194
207
 
195
- export declare type AccordionToggleEventHandler = (event: AccordionToggleEvent, data: AccordionToggleData) => void;
208
+ export declare type AccordionToggleEventHandler<Value = AccordionItemValue> = (event: AccordionToggleEvent, data: AccordionToggleData<Value>) => void;
196
209
 
197
210
  /**
198
211
  * Function that renders the final JSX of the component
@@ -219,9 +232,9 @@ export declare const renderAccordionPanel_unstable: (state: AccordionPanelState)
219
232
  * @param props - Accordion properties
220
233
  * @param ref - reference to root HTMLElement of Accordion
221
234
  */
222
- export declare const useAccordion_unstable: (props: AccordionProps, ref: React_2.Ref<HTMLElement>) => AccordionState;
235
+ export declare const useAccordion_unstable: <Value = unknown>(props: AccordionProps<Value>, ref: React_2.Ref<HTMLElement>) => AccordionState<Value>;
223
236
 
224
- export declare const useAccordionContext_unstable: <T>(selector: ContextSelector<AccordionContextValue, T>) => T;
237
+ export declare const useAccordionContext_unstable: <T>(selector: ContextSelector<AccordionContextValue<unknown>, T>) => T;
225
238
 
226
239
  export declare function useAccordionContextValues_unstable(state: AccordionState): AccordionContextValues;
227
240
 
@@ -232,6 +245,8 @@ export declare function useAccordionContextValues_unstable(state: AccordionState
232
245
  */
233
246
  export declare const useAccordionHeader_unstable: (props: AccordionHeaderProps, ref: React_2.Ref<HTMLElement>) => AccordionHeaderState;
234
247
 
248
+ export declare const useAccordionHeaderContext_unstable: () => AccordionHeaderContextValue;
249
+
235
250
  export declare function useAccordionHeaderContextValues_unstable(state: AccordionHeaderState): AccordionHeaderContextValues;
236
251
 
237
252
  /** Applies style classnames to slots */
@@ -244,11 +259,11 @@ export declare const useAccordionHeaderStyles_unstable: (state: AccordionHeaderS
244
259
  */
245
260
  export declare const useAccordionItem_unstable: (props: AccordionItemProps, ref: React_2.Ref<HTMLElement>) => AccordionItemState;
246
261
 
247
- export declare const useAccordionItemContext_unstable: () => AccordionItemContextValue;
262
+ export declare const useAccordionItemContext_unstable: () => AccordionItemContextValue<unknown>;
248
263
 
249
264
  export declare function useAccordionItemContextValues_unstable(state: AccordionItemState): AccordionItemContextValues;
250
265
 
251
- export declare const useAccordionItemStyles_unstable: (state: AccordionItemState) => AccordionItemState;
266
+ export declare const useAccordionItemStyles_unstable: (state: AccordionItemState) => AccordionItemState<unknown>;
252
267
 
253
268
  /**
254
269
  * Returns the props and state required to render the component
@@ -260,6 +275,6 @@ export declare const useAccordionPanel_unstable: (props: AccordionPanelProps, re
260
275
  /** Applies style classnames to slots */
261
276
  export declare const useAccordionPanelStyles_unstable: (state: AccordionPanelState) => AccordionPanelState;
262
277
 
263
- export declare const useAccordionStyles_unstable: (state: AccordionState) => AccordionState;
278
+ export declare const useAccordionStyles_unstable: (state: AccordionState) => AccordionState<unknown>;
264
279
 
265
280
  export { }
@@ -1 +1 @@
1
- {"version":3,"sources":["Accordion.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAccordion_unstable } from './renderAccordion';\nimport { useAccordion_unstable } from './useAccordion';\nimport { useAccordionContextValues_unstable } from './useAccordionContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAccordionStyles_unstable } from './useAccordionStyles.styles';\nimport type { AccordionProps } from './Accordion.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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 useCustomStyleHook_unstable('useAccordionStyles_unstable')(state);\n\n return renderAccordion_unstable(state, contextValues);\n },\n);\n\nAccordion.displayName = 'Accordion';\n"],"names":["React","renderAccordion_unstable","useAccordion_unstable","useAccordionContextValues_unstable","useCustomStyleHook_unstable","useAccordionStyles_unstable","Accordion","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,2BAA2B,QAAQ,8BAA8B;AAI1E;;CAEC,GACD,OAAO,MAAMC,0BAAiDN,MAAMO,UAAU,CAC5E,CAACC,OAAOC,MAAQ;IACd,MAAMC,QAAQR,sBAAsBM,OAAOC;IAC3C,MAAME,gBAAgBR,mCAAmCO;IAEzDL,4BAA4BK;IAE5BN,4BAA4B,+BAA+BM;IAE3D,OAAOT,yBAAyBS,OAAOC;AACzC,GACA;AAEFL,UAAUM,WAAW,GAAG"}
1
+ {"version":3,"sources":["Accordion.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAccordion_unstable } from './renderAccordion';\nimport { useAccordion_unstable } from './useAccordion';\nimport { useAccordionContextValues_unstable } from './useAccordionContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAccordionStyles_unstable } from './useAccordionStyles.styles';\nimport type { AccordionProps } from './Accordion.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Accordion, using the `useAccordion_unstable` and `useAccordionStyles_unstable` hooks.\n */\nexport const Accordion: ForwardRefComponent<AccordionProps> & (<TItem>(props: AccordionProps<TItem>) => JSX.Element) =\n React.forwardRef<HTMLDivElement, AccordionProps>((props, ref) => {\n const state = useAccordion_unstable(props, ref);\n const contextValues = useAccordionContextValues_unstable(state);\n\n useAccordionStyles_unstable(state);\n\n useCustomStyleHook_unstable('useAccordionStyles_unstable')(state);\n\n return renderAccordion_unstable(state, contextValues);\n }) as ForwardRefComponent<AccordionProps> & (<TItem>(props: AccordionProps<TItem>) => JSX.Element);\n\nAccordion.displayName = 'Accordion';\n"],"names":["React","renderAccordion_unstable","useAccordion_unstable","useAccordionContextValues_unstable","useCustomStyleHook_unstable","useAccordionStyles_unstable","Accordion","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,2BAA2B,QAAQ,8BAA8B;AAI1E;;CAEC,GACD,OAAO,MAAMC,0BACXN,MAAMO,UAAU,CAAiC,CAACC,OAAOC,MAAQ;IAC/D,MAAMC,QAAQR,sBAAsBM,OAAOC;IAC3C,MAAME,gBAAgBR,mCAAmCO;IAEzDL,4BAA4BK;IAE5BN,4BAA4B,+BAA+BM;IAE3D,OAAOT,yBAAyBS,OAAOC;AACzC,GAAmG;AAErGL,UAAUM,WAAW,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["Accordion.types.ts"],"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: NonNullable<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"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
1
+ {"version":3,"sources":["Accordion.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { AccordionContextValue } from '../../contexts/accordion';\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<Value = AccordionItemValue> = (\n event: AccordionToggleEvent,\n data: AccordionToggleData<Value>,\n) => void;\n\nexport type AccordionContextValues = {\n accordion: AccordionContextValue;\n};\n\nexport type AccordionSlots = {\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type AccordionToggleData<Value = AccordionItemValue> = {\n value: Value;\n openItems: Value[];\n};\n\nexport type AccordionProps<Value = AccordionItemValue> = ComponentProps<AccordionSlots> & {\n /**\n * Default value for the uncontrolled state of the panel.\n */\n defaultOpenItems?: Value | Value[];\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<Value>;\n\n /**\n * Controls the state of the panel.\n */\n openItems?: Value | Value[];\n};\n\nexport type AccordionState<Value = AccordionItemValue> = ComponentState<AccordionSlots> & AccordionContextValue<Value>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
@@ -4,4 +4,3 @@ export * from './renderAccordion';
4
4
  export * from './useAccordion';
5
5
  export * from './useAccordionStyles.styles';
6
6
  export * from './useAccordionContextValues';
7
- export * from './AccordionContext';
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Accordion';\nexport * from './Accordion.types';\nexport * from './renderAccordion';\nexport * from './useAccordion';\nexport * from './useAccordionStyles.styles';\nexport * from './useAccordionContextValues';\nexport * from './AccordionContext';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,iBAAiB;AAC/B,cAAc,8BAA8B;AAC5C,cAAc,8BAA8B;AAC5C,cAAc,qBAAqB"}
1
+ {"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Accordion';\nexport * from './Accordion.types';\nexport * from './renderAccordion';\nexport * from './useAccordion';\nexport * from './useAccordionStyles.styles';\nexport * from './useAccordionContextValues';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,iBAAiB;AAC/B,cAAc,8BAA8B;AAC5C,cAAc,8BAA8B"}
@@ -1,11 +1,11 @@
1
1
  /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
2
2
  import { getSlotsNext } from '@fluentui/react-utilities';
3
- import { AccordionContext } from './AccordionContext';
3
+ import { AccordionProvider } from '../../contexts/accordion';
4
4
  /**
5
5
  * Function that renders the final JSX of the component
6
6
  */ export const renderAccordion_unstable = (state, contextValues)=>{
7
7
  const { slots , slotProps } = getSlotsNext(state);
8
- return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(AccordionContext.Provider, {
8
+ return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(AccordionProvider, {
9
9
  value: contextValues.accordion
10
10
  }, slotProps.root.children));
11
11
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["renderAccordion.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } 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 } = getSlotsNext<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"],"names":["createElement","getSlotsNext","AccordionContext","renderAccordion_unstable","state","contextValues","slots","slotProps","root","Provider","value","accordion","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,gBAAgB,QAAQ,qBAAqB;AAGtD;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAAuBC,gBAA0C;IACxG,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAA6BG;IAE1D,qBACE,AAhBJ,cAgBKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,gBAC5B,AAjBN,cAiBON,iBAAiBO,QAAQ;QAACC,OAAOL,cAAcM,SAAS;OAAGJ,UAAUC,IAAI,CAACI,QAAQ;AAGzF,EAAE"}
1
+ {"version":3,"sources":["renderAccordion.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\n\nimport type { AccordionState, AccordionSlots, AccordionContextValues } from './Accordion.types';\nimport { AccordionProvider } from '../../contexts/accordion';\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 } = getSlotsNext<AccordionSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <AccordionProvider value={contextValues.accordion}>{slotProps.root.children}</AccordionProvider>\n </slots.root>\n );\n};\n"],"names":["createElement","getSlotsNext","AccordionProvider","renderAccordion_unstable","state","contextValues","slots","slotProps","root","value","accordion","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD,SAASC,iBAAiB,QAAQ,2BAA2B;AAE7D;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAAuBC,gBAA0C;IACxG,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAA6BG;IAE1D,qBACE,AAhBJ,cAgBKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,gBAC5B,AAjBN,cAiBON;QAAkBO,OAAOJ,cAAcK,SAAS;OAAGH,UAAUC,IAAI,CAACG,QAAQ;AAGjF,EAAE"}
@@ -21,12 +21,17 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
21
21
  circular: navigation === 'circular',
22
22
  tabbable: true
23
23
  });
24
- const requestToggle = useEventCallback((event, data)=>{
25
- onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, data);
26
- setOpenItems((previousOpenItems)=>updateOpenItems(data.value, previousOpenItems, multiple, collapsible));
24
+ const requestToggle = useEventCallback((data)=>{
25
+ const nextOpenItems = updateOpenItems(data.value, openItems, multiple, collapsible);
26
+ onToggle === null || onToggle === void 0 ? void 0 : onToggle(data.event, {
27
+ value: data.value,
28
+ openItems: nextOpenItems
29
+ });
30
+ setOpenItems(nextOpenItems);
27
31
  });
28
32
  return {
29
33
  collapsible,
34
+ multiple,
30
35
  navigation,
31
36
  openItems,
32
37
  requestToggle,
@@ -35,7 +40,7 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
35
40
  },
36
41
  root: getNativeElementProps('div', {
37
42
  ...props,
38
- ...navigation ? arrowNavigationProps : {},
43
+ ...navigation ? arrowNavigationProps : undefined,
39
44
  ref
40
45
  })
41
46
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["useAccordion.ts"],"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"],"names":["React","getNativeElementProps","useControllableState","useEventCallback","useArrowNavigationGroup","useAccordion_unstable","props","ref","openItems","controlledOpenItems","defaultOpenItems","multiple","collapsible","onToggle","navigation","setOpenItems","state","useMemo","normalizeValues","defaultState","initializeUncontrolledOpenItems","initialState","arrowNavigationProps","circular","tabbable","requestToggle","event","data","previousOpenItems","updateOpenItems","value","components","root","undefined","Array","isArray","includes","length","filter","i","sort","index"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAG1G,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE;;;;CAIC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC,MAAgD;IAC3G,MAAM,EACJC,WAAWC,oBAAmB,EAC9BC,iBAAgB,EAChBC,UAAW,KAAK,CAAA,EAChBC,aAAc,KAAK,CAAA,EACnBC,SAAQ,EACRC,WAAU,EACX,GAAGR;IACJ,MAAM,CAACE,WAAWO,aAAa,GAAGb,qBAAqB;QACrDc,OAAOhB,MAAMiB,OAAO,CAAC,IAAMC,gBAAgBT,sBAAsB;YAACA;SAAoB;QACtFU,cAAc,IAAMC,gCAAgC;gBAAEV;gBAAkBC;YAAS;QACjFU,cAAc,EAAE;IAClB;IAEA,MAAMC,uBAAuBlB,wBAAwB;QACnDmB,UAAUT,eAAe;QACzBU,UAAU,IAAI;IAChB;IAEA,MAAMC,gBAAgBtB,iBAAiB,CAACuB,OAA6BC,OAA8B;QACjGd,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAWa,OAAOC;QAClBZ,aAAaa,CAAAA,oBAAqBC,gBAAgBF,KAAKG,KAAK,EAAEF,mBAAmBjB,UAAUC;IAC7F;IAEA,OAAO;QACLA;QACAE;QACAN;QACAiB;QACAM,YAAY;YACVC,MAAM;QACR;QACAA,MAAM/B,sBAAsB,OAAO;YACjC,GAAGK,KAAK;YACR,GAAIQ,aAAaQ,uBAAuB,CAAC,CAAC;YAC1Cf;QACF;IACF;AACF,EAAE;AAEF;;CAEC,GACD,SAASa,gCAAgC,EACvCV,iBAAgB,EAChBC,SAAQ,EAC8C,EAAwB;IAC9E,IAAID,qBAAqBuB,WAAW;QAClC,IAAIC,MAAMC,OAAO,CAACzB,mBAAmB;YACnC,OAAOC,WAAWD,mBAAmB;gBAACA,gBAAgB,CAAC,EAAE;aAAC;QAC5D,CAAC;QACD,OAAO;YAACA;SAAiB;IAC3B,CAAC;IACD,OAAO,EAAE;AACX;AAEA;;;;;;CAMC,GACD,SAASmB,gBACPC,KAAyB,EACzBF,iBAAuC,EACvCjB,QAAiB,EACjBC,WAAoB,EACpB;IACA,IAAID,UAAU;QACZ,IAAIiB,kBAAkBQ,QAAQ,CAACN,QAAQ;YACrC,IAAIF,kBAAkBS,MAAM,GAAG,KAAKzB,aAAa;gBAC/C,OAAOgB,kBAAkBU,MAAM,CAACC,CAAAA,IAAKA,MAAMT;YAC7C,CAAC;QACH,OAAO;YACL,OAAO;mBAAIF;gBAAmBE;aAAM,CAACU,IAAI;QAC3C,CAAC;IACH,OAAO;QACL,OAAOZ,iBAAiB,CAAC,EAAE,KAAKE,SAASlB,cAAc,EAAE,GAAG;YAACkB;SAAM;IACrE,CAAC;IACD,OAAOF;AACT;AAEA;;CAEC,GACD,SAASV,gBAAgBuB,KAAiD,EAAoC;IAC5G,IAAIA,UAAUR,WAAW;QACvB,OAAOA;IACT,CAAC;IACD,OAAOC,MAAMC,OAAO,CAACM,SAASA,QAAQ;QAACA;KAAM;AAC/C"}
1
+ {"version":3,"sources":["useAccordion.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { AccordionProps, AccordionState } from './Accordion.types';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { AccordionRequestToggleData } from '../../contexts/accordion';\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 = <Value = AccordionItemValue>(\n props: AccordionProps<Value>,\n ref: React.Ref<HTMLElement>,\n): AccordionState<Value> => {\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((data: AccordionRequestToggleData<Value>) => {\n const nextOpenItems = updateOpenItems(data.value, openItems, multiple, collapsible);\n onToggle?.(data.event, { value: data.value, openItems: nextOpenItems });\n setOpenItems(nextOpenItems);\n });\n\n return {\n collapsible,\n multiple,\n navigation,\n openItems,\n requestToggle,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ...props,\n ...(navigation ? arrowNavigationProps : undefined),\n ref,\n }),\n };\n};\n\n/**\n * Initial value for the uncontrolled case of the list of open indexes\n */\nfunction initializeUncontrolledOpenItems<Value = AccordionItemValue>({\n defaultOpenItems,\n multiple,\n}: Pick<AccordionProps<Value>, 'defaultOpenItems' | 'multiple'>): Value[] {\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<Value = AccordionItemValue>(\n value: Value,\n previousOpenItems: Value[],\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<Value = AccordionItemValue>(index?: Value | Value[]): Value[] | undefined {\n if (index === undefined) {\n return undefined;\n }\n return Array.isArray(index) ? index : [index];\n}\n"],"names":["React","getNativeElementProps","useControllableState","useEventCallback","useArrowNavigationGroup","useAccordion_unstable","props","ref","openItems","controlledOpenItems","defaultOpenItems","multiple","collapsible","onToggle","navigation","setOpenItems","state","useMemo","normalizeValues","defaultState","initializeUncontrolledOpenItems","initialState","arrowNavigationProps","circular","tabbable","requestToggle","data","nextOpenItems","updateOpenItems","value","event","components","root","undefined","Array","isArray","previousOpenItems","includes","length","filter","i","sort","index"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAG1G,SAASC,uBAAuB,QAAQ,0BAA0B;AAGlE;;;;CAIC,GACD,OAAO,MAAMC,wBAAwB,CACnCC,OACAC,MAC0B;IAC1B,MAAM,EACJC,WAAWC,oBAAmB,EAC9BC,iBAAgB,EAChBC,UAAW,KAAK,CAAA,EAChBC,aAAc,KAAK,CAAA,EACnBC,SAAQ,EACRC,WAAU,EACX,GAAGR;IACJ,MAAM,CAACE,WAAWO,aAAa,GAAGb,qBAAqB;QACrDc,OAAOhB,MAAMiB,OAAO,CAAC,IAAMC,gBAAgBT,sBAAsB;YAACA;SAAoB;QACtFU,cAAc,IAAMC,gCAAgC;gBAAEV;gBAAkBC;YAAS;QACjFU,cAAc,EAAE;IAClB;IAEA,MAAMC,uBAAuBlB,wBAAwB;QACnDmB,UAAUT,eAAe;QACzBU,UAAU,IAAI;IAChB;IAEA,MAAMC,gBAAgBtB,iBAAiB,CAACuB,OAA4C;QAClF,MAAMC,gBAAgBC,gBAAgBF,KAAKG,KAAK,EAAErB,WAAWG,UAAUC;QACvEC,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAWa,KAAKI,KAAK,EAAE;YAAED,OAAOH,KAAKG,KAAK;YAAErB,WAAWmB;QAAc;QACrEZ,aAAaY;IACf;IAEA,OAAO;QACLf;QACAD;QACAG;QACAN;QACAiB;QACAM,YAAY;YACVC,MAAM;QACR;QACAA,MAAM/B,sBAAsB,OAAO;YACjC,GAAGK,KAAK;YACR,GAAIQ,aAAaQ,uBAAuBW,SAAS;YACjD1B;QACF;IACF;AACF,EAAE;AAEF;;CAEC,GACD,SAASa,gCAA4D,EACnEV,iBAAgB,EAChBC,SAAQ,EACqD,EAAW;IACxE,IAAID,qBAAqBuB,WAAW;QAClC,IAAIC,MAAMC,OAAO,CAACzB,mBAAmB;YACnC,OAAOC,WAAWD,mBAAmB;gBAACA,gBAAgB,CAAC,EAAE;aAAC;QAC5D,CAAC;QACD,OAAO;YAACA;SAAiB;IAC3B,CAAC;IACD,OAAO,EAAE;AACX;AAEA;;;;;;CAMC,GACD,SAASkB,gBACPC,KAAY,EACZO,iBAA0B,EAC1BzB,QAAiB,EACjBC,WAAoB,EACpB;IACA,IAAID,UAAU;QACZ,IAAIyB,kBAAkBC,QAAQ,CAACR,QAAQ;YACrC,IAAIO,kBAAkBE,MAAM,GAAG,KAAK1B,aAAa;gBAC/C,OAAOwB,kBAAkBG,MAAM,CAACC,CAAAA,IAAKA,MAAMX;YAC7C,CAAC;QACH,OAAO;YACL,OAAO;mBAAIO;gBAAmBP;aAAM,CAACY,IAAI;QAC3C,CAAC;IACH,OAAO;QACL,OAAOL,iBAAiB,CAAC,EAAE,KAAKP,SAASjB,cAAc,EAAE,GAAG;YAACiB;SAAM;IACrE,CAAC;IACD,OAAOO;AACT;AAEA;;CAEC,GACD,SAASlB,gBAA4CwB,KAAuB,EAAuB;IACjG,IAAIA,UAAUT,WAAW;QACvB,OAAOA;IACT,CAAC;IACD,OAAOC,MAAMC,OAAO,CAACO,SAASA,QAAQ;QAACA;KAAM;AAC/C"}
@@ -1,11 +1,12 @@
1
1
  export function useAccordionContextValues_unstable(state) {
2
- const { navigation , openItems , requestToggle , collapsible } = state;
2
+ const { navigation , openItems , requestToggle , multiple , collapsible } = state;
3
3
  // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
4
4
  const accordion = {
5
5
  navigation,
6
6
  openItems,
7
7
  requestToggle,
8
- collapsible
8
+ collapsible,
9
+ multiple
9
10
  };
10
11
  return {
11
12
  accordion
@@ -1 +1 @@
1
- {"version":3,"sources":["useAccordionContextValues.ts"],"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"],"names":["useAccordionContextValues_unstable","state","navigation","openItems","requestToggle","collapsible","accordion"],"mappings":"AAEA,OAAO,SAASA,mCAAmCC,KAAqB,EAA0B;IAChG,MAAM,EAAEC,WAAU,EAAEC,UAAS,EAAEC,cAAa,EAAEC,YAAW,EAAE,GAAGJ;IAE9D,mGAAmG;IACnG,MAAMK,YAAmC;QACvCJ;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAU;AACrB,CAAC"}
1
+ {"version":3,"sources":["useAccordionContextValues.ts"],"sourcesContent":["import type { AccordionContextValue } from '../../contexts/accordion';\nimport type { AccordionContextValues, AccordionState } from './Accordion.types';\n\nexport function useAccordionContextValues_unstable(state: AccordionState): AccordionContextValues {\n const { navigation, openItems, requestToggle, multiple, 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 multiple,\n };\n\n return { accordion };\n}\n"],"names":["useAccordionContextValues_unstable","state","navigation","openItems","requestToggle","multiple","collapsible","accordion"],"mappings":"AAGA,OAAO,SAASA,mCAAmCC,KAAqB,EAA0B;IAChG,MAAM,EAAEC,WAAU,EAAEC,UAAS,EAAEC,cAAa,EAAEC,SAAQ,EAAEC,YAAW,EAAE,GAAGL;IAExE,mGAAmG;IACnG,MAAMM,YAAmC;QACvCL;QACAC;QACAC;QACAE;QACAD;IACF;IAEA,OAAO;QAAEE;IAAU;AACrB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"sources":["AccordionHeader.types.ts"],"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: NonNullable<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<'a'>>>;\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"],"names":[],"mappings":"AAAA,WAqD8B"}
1
+ {"version":3,"sources":["AccordionHeader.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { AccordionHeaderContextValue } from '../../contexts/accordionHeader';\n\nexport type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';\nexport type AccordionHeaderExpandIconPosition = 'start' | 'end';\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: NonNullable<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<'a'>>>;\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"],"names":[],"mappings":"AAAA,WAiD8B"}
@@ -1,11 +1,11 @@
1
1
  /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
2
2
  import { getSlotsNext } from '@fluentui/react-utilities';
3
- import { AccordionHeaderContext } from './AccordionHeaderContext';
3
+ import { AccordionHeaderProvider } from '../../contexts/accordionHeader';
4
4
  /**
5
5
  * Function that renders the final JSX of the component
6
6
  */ export const renderAccordionHeader_unstable = (state, contextValues)=>{
7
7
  const { slots , slotProps } = getSlotsNext(state);
8
- return /*#__PURE__*/ createElement(AccordionHeaderContext.Provider, {
8
+ return /*#__PURE__*/ createElement(AccordionHeaderProvider, {
9
9
  value: contextValues.accordionHeader
10
10
  }, /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(slots.button, slotProps.button, state.expandIconPosition === 'start' && slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), slots.icon && /*#__PURE__*/ createElement(slots.icon, slotProps.icon), slotProps.root.children, state.expandIconPosition === 'end' && slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon))));
11
11
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["renderAccordionHeader.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } 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 } = getSlotsNext<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 && <slots.expandIcon {...slotProps.expandIcon} />}\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slotProps.root.children}\n {state.expandIconPosition === 'end' && slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n </slots.button>\n </slots.root>\n </AccordionHeaderContext.Provider>\n );\n};\n"],"names":["createElement","getSlotsNext","AccordionHeaderContext","renderAccordionHeader_unstable","state","contextValues","slots","slotProps","Provider","value","accordionHeader","root","button","expandIconPosition","expandIcon","icon","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,sBAAsB,QAAQ,2BAA2B;AAGlE;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC,gBACG;IACH,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAAmCG;IAEhE,qBACE,AAlBJ,cAkBKF,uBAAuBM,QAAQ;QAACC,OAAOJ,cAAcK,eAAe;qBACnE,AAnBN,cAmBOJ,MAAMK,IAAI,EAAKJ,UAAUI,IAAI,gBAC5B,AApBR,cAoBSL,MAAMM,MAAM,EAAKL,UAAUK,MAAM,EAC/BR,MAAMS,kBAAkB,KAAK,WAAWP,MAAMQ,UAAU,kBAAI,AArBvE,cAqBwER,MAAMQ,UAAU,EAAKP,UAAUO,UAAU,GACtGR,MAAMS,IAAI,kBAAI,AAtBzB,cAsB0BT,MAAMS,IAAI,EAAKR,UAAUQ,IAAI,GAC5CR,UAAUI,IAAI,CAACK,QAAQ,EACvBZ,MAAMS,kBAAkB,KAAK,SAASP,MAAMQ,UAAU,kBAAI,AAxBrE,cAwBsER,MAAMQ,UAAU,EAAKP,UAAUO,UAAU;AAK/G,EAAE"}
1
+ {"version":3,"sources":["renderAccordionHeader.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { AccordionHeaderState, AccordionHeaderSlots, AccordionHeaderContextValues } from './AccordionHeader.types';\nimport { AccordionHeaderProvider } from '../../contexts/accordionHeader';\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 } = getSlotsNext<AccordionHeaderSlots>(state);\n\n return (\n <AccordionHeaderProvider value={contextValues.accordionHeader}>\n <slots.root {...slotProps.root}>\n <slots.button {...slotProps.button}>\n {state.expandIconPosition === 'start' && slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slotProps.root.children}\n {state.expandIconPosition === 'end' && slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n </slots.button>\n </slots.root>\n </AccordionHeaderProvider>\n );\n};\n"],"names":["createElement","getSlotsNext","AccordionHeaderProvider","renderAccordionHeader_unstable","state","contextValues","slots","slotProps","value","accordionHeader","root","button","expandIconPosition","expandIcon","icon","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,uBAAuB,QAAQ,iCAAiC;AAEzE;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC,gBACG;IACH,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAAmCG;IAEhE,qBACE,AAlBJ,cAkBKF;QAAwBM,OAAOH,cAAcI,eAAe;qBAC3D,AAnBN,cAmBOH,MAAMI,IAAI,EAAKH,UAAUG,IAAI,gBAC5B,AApBR,cAoBSJ,MAAMK,MAAM,EAAKJ,UAAUI,MAAM,EAC/BP,MAAMQ,kBAAkB,KAAK,WAAWN,MAAMO,UAAU,kBAAI,AArBvE,cAqBwEP,MAAMO,UAAU,EAAKN,UAAUM,UAAU,GACtGP,MAAMQ,IAAI,kBAAI,AAtBzB,cAsB0BR,MAAMQ,IAAI,EAAKP,UAAUO,IAAI,GAC5CP,UAAUG,IAAI,CAACK,QAAQ,EACvBX,MAAMQ,kBAAkB,KAAK,SAASN,MAAMO,UAAU,kBAAI,AAxBrE,cAwBsEP,MAAMO,UAAU,EAAKN,UAAUM,UAAU;AAK/G,EAAE"}
@@ -1,17 +1,18 @@
1
1
  import * as React from 'react';
2
2
  import { getNativeElementProps, isResolvedShorthand, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';
3
- import { useAccordionItemContext_unstable } from '../AccordionItem/index';
4
3
  import { useARIAButtonShorthand } from '@fluentui/react-aria';
5
- import { useAccordionContext_unstable } from '../Accordion/AccordionContext';
4
+ import { useAccordionContext_unstable } from '../../contexts/accordion';
6
5
  import { ChevronRightRegular } from '@fluentui/react-icons';
7
6
  import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
7
+ import { useAccordionItemContext_unstable } from '../../contexts/accordionItem';
8
8
  /**
9
9
  * Returns the props and state required to render the component
10
10
  * @param props - AccordionHeader properties
11
11
  * @param ref - reference to root HTMLElement of AccordionHeader
12
12
  */ export const useAccordionHeader_unstable = (props, ref)=>{
13
13
  const { as , icon , button , expandIcon , inline =false , size ='medium' , expandIconPosition ='start' } = props;
14
- const { onHeaderClick: onAccordionHeaderClick , disabled , open } = useAccordionItemContext_unstable();
14
+ const { value , disabled , open } = useAccordionItemContext_unstable();
15
+ const requestToggle = useAccordionContext_unstable((ctx)=>ctx.requestToggle);
15
16
  /**
16
17
  * force disabled state on button if accordion isn't collapsible
17
18
  * and this is the only item opened
@@ -64,13 +65,16 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
64
65
  type: 'button'
65
66
  }
66
67
  }),
67
- onClick: useEventCallback((ev)=>{
68
+ onClick: useEventCallback((event)=>{
68
69
  if (isResolvedShorthand(button)) {
69
70
  var _button_onClick;
70
- (_button_onClick = button.onClick) === null || _button_onClick === void 0 ? void 0 : _button_onClick.call(button, ev);
71
+ (_button_onClick = button.onClick) === null || _button_onClick === void 0 ? void 0 : _button_onClick.call(button, event);
71
72
  }
72
- if (!ev.defaultPrevented) {
73
- onAccordionHeaderClick(ev);
73
+ if (!event.defaultPrevented) {
74
+ requestToggle({
75
+ value,
76
+ event
77
+ });
74
78
  }
75
79
  })
76
80
  }, {
@@ -1 +1 @@
1
- {"version":3,"sources":["useAccordionHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getNativeElementProps,\n isResolvedShorthand,\n resolveShorthand,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useAccordionItemContext_unstable } from '../AccordionItem/index';\nimport { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';\nimport type { AccordionHeaderProps, AccordionHeaderState } from './AccordionHeader.types';\nimport { useAccordionContext_unstable } 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 = useAccordionContext_unstable(ctx => !ctx.collapsible && ctx.openItems.length === 1 && open);\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 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 style={{ transform: `rotate(${expandIconRotation}deg)` }} />,\n 'aria-hidden': true,\n },\n }),\n button: resolveShorthand<ARIAButtonSlotProps<'a'>>(\n {\n ...useARIAButtonShorthand(button, {\n required: true,\n defaultProps: {\n disabled,\n disabledFocusable,\n 'aria-expanded': open,\n type: 'button',\n },\n }),\n onClick: useEventCallback(ev => {\n if (isResolvedShorthand(button)) {\n button.onClick?.(ev);\n }\n if (!ev.defaultPrevented) {\n onAccordionHeaderClick(ev);\n }\n }),\n },\n { required: true },\n ),\n };\n};\n"],"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useEventCallback","useAccordionItemContext_unstable","useARIAButtonShorthand","useAccordionContext_unstable","ChevronRightRegular","useFluent_unstable","useFluent","useAccordionHeader_unstable","props","ref","as","icon","button","expandIcon","inline","size","expandIconPosition","onHeaderClick","onAccordionHeaderClick","disabled","open","disabledFocusable","ctx","collapsible","openItems","length","dir","expandIconRotation","components","root","required","defaultProps","children","style","transform","type","onClick","ev","defaultPrevented"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,qBAAqB,EACrBC,mBAAmB,EACnBC,gBAAgB,EAChBC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,gCAAgC,QAAQ,yBAAyB;AAC1E,SAA8BC,sBAAsB,QAAQ,uBAAuB;AAEnF,SAASC,4BAA4B,QAAQ,gCAAgC;AAC7E,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;CAIC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC,MACyB;IACzB,MAAM,EAAEC,GAAE,EAAEC,KAAI,EAAEC,OAAM,EAAEC,WAAU,EAAEC,QAAS,KAAK,CAAA,EAAEC,MAAO,SAAQ,EAAEC,oBAAqB,QAAO,EAAE,GAAGR;IACxG,MAAM,EAAES,eAAeC,uBAAsB,EAAEC,SAAQ,EAAEC,KAAI,EAAE,GAAGnB;IAElE;;;GAGC,GACD,MAAMoB,oBAAoBlB,6BAA6BmB,CAAAA,MAAO,CAACA,IAAIC,WAAW,IAAID,IAAIE,SAAS,CAACC,MAAM,KAAK,KAAKL;IAEhH,MAAM,EAAEM,IAAG,EAAE,GAAGpB;IAEhB,oEAAoE;IACpE,IAAIqB;IACJ,IAAIX,uBAAuB,OAAO;QAChC,8FAA8F;QAC9FW,qBAAqBP,OAAO,CAAC,KAAK,EAAE;IACtC,OAAO;QACL,mGAAmG;QACnGO,qBAAqBP,OAAO,KAAKM,QAAQ,QAAQ,IAAI,GAAG;IAC1D,CAAC;IAED,OAAO;QACLP;QACAC;QACAL;QACAD;QACAE;QACAY,YAAY;YACVC,MAAM;YACNjB,QAAQ;YACRC,YAAY;YACZF,MAAM;QACR;QACAkB,MAAMhC,sBAAsBa,MAAM,OAAO;YACvCD;YACA,GAAGD,KAAK;QACV;QACAG,MAAMZ,iBAAiBY;QACvBE,YAAYd,iBAAiBc,YAAY;YACvCiB,UAAU,IAAI;YACdC,cAAc;gBACZC,wBAAU,oBAAC5B;oBAAoB6B,OAAO;wBAAEC,WAAW,CAAC,OAAO,EAAEP,mBAAmB,IAAI,CAAC;oBAAC;;gBACtF,eAAe,IAAI;YACrB;QACF;QACAf,QAAQb,iBACN;YACE,GAAGG,uBAAuBU,QAAQ;gBAChCkB,UAAU,IAAI;gBACdC,cAAc;oBACZZ;oBACAE;oBACA,iBAAiBD;oBACjBe,MAAM;gBACR;YACF,EAAE;YACFC,SAASpC,iBAAiBqC,CAAAA,KAAM;gBAC9B,IAAIvC,oBAAoBc,SAAS;wBAC/BA;oBAAAA,CAAAA,kBAAAA,OAAOwB,OAAO,cAAdxB,6BAAAA,KAAAA,IAAAA,gBAAAA,KAAAA,QAAiByB;gBACnB,CAAC;gBACD,IAAI,CAACA,GAAGC,gBAAgB,EAAE;oBACxBpB,uBAAuBmB;gBACzB,CAAC;YACH;QACF,GACA;YAAEP,UAAU,IAAI;QAAC;IAErB;AACF,EAAE"}
1
+ {"version":3,"sources":["useAccordionHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getNativeElementProps,\n isResolvedShorthand,\n resolveShorthand,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';\nimport type { AccordionHeaderProps, AccordionHeaderState } from './AccordionHeader.types';\nimport { useAccordionContext_unstable } from '../../contexts/accordion';\nimport { ChevronRightRegular } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useAccordionItemContext_unstable } from '../../contexts/accordionItem';\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 { value, disabled, open } = useAccordionItemContext_unstable();\n const requestToggle = useAccordionContext_unstable(ctx => ctx.requestToggle);\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 = useAccordionContext_unstable(ctx => !ctx.collapsible && ctx.openItems.length === 1 && open);\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 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 style={{ transform: `rotate(${expandIconRotation}deg)` }} />,\n 'aria-hidden': true,\n },\n }),\n button: resolveShorthand<ARIAButtonSlotProps<'a'>>(\n {\n ...useARIAButtonShorthand(button, {\n required: true,\n defaultProps: {\n disabled,\n disabledFocusable,\n 'aria-expanded': open,\n type: 'button',\n },\n }),\n onClick: useEventCallback(event => {\n if (isResolvedShorthand(button)) {\n button.onClick?.(event);\n }\n if (!event.defaultPrevented) {\n requestToggle({ value, event });\n }\n }),\n },\n { required: true },\n ),\n };\n};\n"],"names":["React","getNativeElementProps","isResolvedShorthand","resolveShorthand","useEventCallback","useARIAButtonShorthand","useAccordionContext_unstable","ChevronRightRegular","useFluent_unstable","useFluent","useAccordionItemContext_unstable","useAccordionHeader_unstable","props","ref","as","icon","button","expandIcon","inline","size","expandIconPosition","value","disabled","open","requestToggle","ctx","disabledFocusable","collapsible","openItems","length","dir","expandIconRotation","components","root","required","defaultProps","children","style","transform","type","onClick","event","defaultPrevented"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,qBAAqB,EACrBC,mBAAmB,EACnBC,gBAAgB,EAChBC,gBAAgB,QACX,4BAA4B;AACnC,SAA8BC,sBAAsB,QAAQ,uBAAuB;AAEnF,SAASC,4BAA4B,QAAQ,2BAA2B;AACxE,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,gCAAgC,QAAQ,+BAA+B;AAEhF;;;;CAIC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC,MACyB;IACzB,MAAM,EAAEC,GAAE,EAAEC,KAAI,EAAEC,OAAM,EAAEC,WAAU,EAAEC,QAAS,KAAK,CAAA,EAAEC,MAAO,SAAQ,EAAEC,oBAAqB,QAAO,EAAE,GAAGR;IACxG,MAAM,EAAES,MAAK,EAAEC,SAAQ,EAAEC,KAAI,EAAE,GAAGb;IAClC,MAAMc,gBAAgBlB,6BAA6BmB,CAAAA,MAAOA,IAAID,aAAa;IAE3E;;;GAGC,GACD,MAAME,oBAAoBpB,6BAA6BmB,CAAAA,MAAO,CAACA,IAAIE,WAAW,IAAIF,IAAIG,SAAS,CAACC,MAAM,KAAK,KAAKN;IAEhH,MAAM,EAAEO,IAAG,EAAE,GAAGrB;IAEhB,oEAAoE;IACpE,IAAIsB;IACJ,IAAIX,uBAAuB,OAAO;QAChC,8FAA8F;QAC9FW,qBAAqBR,OAAO,CAAC,KAAK,EAAE;IACtC,OAAO;QACL,mGAAmG;QACnGQ,qBAAqBR,OAAO,KAAKO,QAAQ,QAAQ,IAAI,GAAG;IAC1D,CAAC;IAED,OAAO;QACLR;QACAC;QACAJ;QACAD;QACAE;QACAY,YAAY;YACVC,MAAM;YACNjB,QAAQ;YACRC,YAAY;YACZF,MAAM;QACR;QACAkB,MAAMhC,sBAAsBa,MAAM,OAAO;YACvCD;YACA,GAAGD,KAAK;QACV;QACAG,MAAMZ,iBAAiBY;QACvBE,YAAYd,iBAAiBc,YAAY;YACvCiB,UAAU,IAAI;YACdC,cAAc;gBACZC,wBAAU,oBAAC7B;oBAAoB8B,OAAO;wBAAEC,WAAW,CAAC,OAAO,EAAEP,mBAAmB,IAAI,CAAC;oBAAC;;gBACtF,eAAe,IAAI;YACrB;QACF;QACAf,QAAQb,iBACN;YACE,GAAGE,uBAAuBW,QAAQ;gBAChCkB,UAAU,IAAI;gBACdC,cAAc;oBACZb;oBACAI;oBACA,iBAAiBH;oBACjBgB,MAAM;gBACR;YACF,EAAE;YACFC,SAASpC,iBAAiBqC,CAAAA,QAAS;gBACjC,IAAIvC,oBAAoBc,SAAS;wBAC/BA;oBAAAA,CAAAA,kBAAAA,OAAOwB,OAAO,cAAdxB,6BAAAA,KAAAA,IAAAA,gBAAAA,KAAAA,QAAiByB;gBACnB,CAAC;gBACD,IAAI,CAACA,MAAMC,gBAAgB,EAAE;oBAC3BlB,cAAc;wBAAEH;wBAAOoB;oBAAM;gBAC/B,CAAC;YACH;QACF,GACA;YAAEP,UAAU,IAAI;QAAC;IAErB;AACF,EAAE"}