@fluentui/react-accordion 9.2.0 → 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 (83) hide show
  1. package/CHANGELOG.json +58 -1
  2. package/CHANGELOG.md +18 -2
  3. package/dist/index.d.ts +40 -34
  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/index.js +0 -1
  16. package/lib/components/AccordionHeader/index.js.map +1 -1
  17. package/lib/components/AccordionHeader/renderAccordionHeader.js +2 -2
  18. package/lib/components/AccordionHeader/renderAccordionHeader.js.map +1 -1
  19. package/lib/components/AccordionHeader/useAccordionHeader.js +11 -7
  20. package/lib/components/AccordionHeader/useAccordionHeader.js.map +1 -1
  21. package/lib/components/AccordionHeader/useAccordionHeaderContextValues.js.map +1 -1
  22. package/lib/components/AccordionItem/AccordionItem.types.js +1 -1
  23. package/lib/components/AccordionItem/AccordionItem.types.js.map +1 -1
  24. package/lib/components/AccordionItem/index.js +0 -1
  25. package/lib/components/AccordionItem/index.js.map +1 -1
  26. package/lib/components/AccordionItem/renderAccordionItem.js +2 -2
  27. package/lib/components/AccordionItem/renderAccordionItem.js.map +1 -1
  28. package/lib/components/AccordionItem/useAccordionItem.js +3 -10
  29. package/lib/components/AccordionItem/useAccordionItem.js.map +1 -1
  30. package/lib/components/AccordionItem/useAccordionItemContextValues.js +5 -5
  31. package/lib/components/AccordionItem/useAccordionItemContextValues.js.map +1 -1
  32. package/lib/components/AccordionPanel/useAccordionPanel.js +2 -2
  33. package/lib/components/AccordionPanel/useAccordionPanel.js.map +1 -1
  34. package/lib/{components/Accordion/AccordionContext.js → contexts/accordion.js} +4 -2
  35. package/lib/contexts/accordion.js.map +1 -0
  36. package/lib/contexts/accordionHeader.js +11 -0
  37. package/lib/contexts/accordionHeader.js.map +1 -0
  38. package/lib/{components/AccordionItem/AccordionItemContext.js → contexts/accordionItem.js} +4 -5
  39. package/lib/contexts/accordionItem.js.map +1 -0
  40. package/lib/index.js +6 -3
  41. package/lib/index.js.map +1 -1
  42. package/lib-commonjs/components/Accordion/index.js +0 -1
  43. package/lib-commonjs/components/Accordion/index.js.map +1 -1
  44. package/lib-commonjs/components/Accordion/renderAccordion.js +2 -2
  45. package/lib-commonjs/components/Accordion/renderAccordion.js.map +1 -1
  46. package/lib-commonjs/components/Accordion/useAccordion.js +9 -4
  47. package/lib-commonjs/components/Accordion/useAccordion.js.map +1 -1
  48. package/lib-commonjs/components/Accordion/useAccordionContextValues.js +3 -2
  49. package/lib-commonjs/components/Accordion/useAccordionContextValues.js.map +1 -1
  50. package/lib-commonjs/components/AccordionHeader/index.js +0 -1
  51. package/lib-commonjs/components/AccordionHeader/index.js.map +1 -1
  52. package/lib-commonjs/components/AccordionHeader/renderAccordionHeader.js +2 -2
  53. package/lib-commonjs/components/AccordionHeader/renderAccordionHeader.js.map +1 -1
  54. package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js +12 -8
  55. package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js.map +1 -1
  56. package/lib-commonjs/components/AccordionItem/AccordionItem.types.js +0 -2
  57. package/lib-commonjs/components/AccordionItem/AccordionItem.types.js.map +1 -1
  58. package/lib-commonjs/components/AccordionItem/index.js +0 -1
  59. package/lib-commonjs/components/AccordionItem/index.js.map +1 -1
  60. package/lib-commonjs/components/AccordionItem/renderAccordionItem.js +2 -2
  61. package/lib-commonjs/components/AccordionItem/renderAccordionItem.js.map +1 -1
  62. package/lib-commonjs/components/AccordionItem/useAccordionItem.js +4 -11
  63. package/lib-commonjs/components/AccordionItem/useAccordionItem.js.map +1 -1
  64. package/lib-commonjs/components/AccordionItem/useAccordionItemContextValues.js +5 -5
  65. package/lib-commonjs/components/AccordionItem/useAccordionItemContextValues.js.map +1 -1
  66. package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js +4 -4
  67. package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js.map +1 -1
  68. package/lib-commonjs/{components/Accordion/AccordionContext.js → contexts/accordion.js} +3 -2
  69. package/lib-commonjs/contexts/accordion.js.map +1 -0
  70. package/lib-commonjs/{components/AccordionHeader/AccordionHeaderContext.js → contexts/accordionHeader.js} +4 -5
  71. package/lib-commonjs/contexts/accordionHeader.js.map +1 -0
  72. package/lib-commonjs/{components/AccordionItem/AccordionItemContext.js → contexts/accordionItem.js} +3 -5
  73. package/lib-commonjs/contexts/accordionItem.js.map +1 -0
  74. package/lib-commonjs/index.js +10 -7
  75. package/lib-commonjs/index.js.map +1 -1
  76. package/package.json +8 -8
  77. package/lib/components/Accordion/AccordionContext.js.map +0 -1
  78. package/lib/components/AccordionHeader/AccordionHeaderContext.js +0 -11
  79. package/lib/components/AccordionHeader/AccordionHeaderContext.js.map +0 -1
  80. package/lib/components/AccordionItem/AccordionItemContext.js.map +0 -1
  81. package/lib-commonjs/components/Accordion/AccordionContext.js.map +0 -1
  82. package/lib-commonjs/components/AccordionHeader/AccordionHeaderContext.js.map +0 -1
  83. package/lib-commonjs/components/AccordionItem/AccordionItemContext.js.map +0 -1
package/CHANGELOG.json CHANGED
@@ -2,7 +2,64 @@
2
2
  "name": "@fluentui/react-accordion",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 01 Aug 2023 10:14:27 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",
6
63
  "tag": "@fluentui/react-accordion_v9.2.0",
7
64
  "version": "9.2.0",
8
65
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,28 @@
1
1
  # Change Log - @fluentui/react-accordion
2
2
 
3
- This log was last generated on Tue, 01 Aug 2023 10:14:27 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
+
7
23
  ## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.2.0)
8
24
 
9
- Tue, 01 Aug 2023 10:14:27 GMT
25
+ Tue, 01 Aug 2023 10:17:19 GMT
10
26
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.1.25..@fluentui/react-accordion_v9.2.0)
11
27
 
12
28
  ### Minor changes
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,11 +46,11 @@ export declare const AccordionHeader: ForwardRefComponent<AccordionHeaderProps>;
43
46
 
44
47
  export declare const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots>;
45
48
 
46
- export declare const AccordionHeaderContextProvider: React_2.Provider<AccordionHeaderContextValue | undefined>;
47
-
48
- export declare type AccordionHeaderContextValue = Required<Pick<AccordionHeaderProps, 'expandIconPosition' | 'size'>> & {
49
+ export declare type AccordionHeaderContextValue = {
49
50
  disabled: boolean;
50
51
  open: boolean;
52
+ expandIconPosition: AccordionHeaderExpandIconPosition;
53
+ size: AccordionHeaderSize;
51
54
  };
52
55
 
53
56
  export declare type AccordionHeaderContextValues = {
@@ -71,6 +74,8 @@ export declare type AccordionHeaderProps = ComponentProps<Partial<AccordionHeade
71
74
  size?: AccordionHeaderSize;
72
75
  };
73
76
 
77
+ export declare const AccordionHeaderProvider: React_2.Provider<AccordionHeaderContextValue>;
78
+
74
79
  export declare type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';
75
80
 
76
81
  export declare type AccordionHeaderSlots = {
@@ -103,16 +108,17 @@ export declare const AccordionItem: ForwardRefComponent<AccordionItemProps>;
103
108
 
104
109
  export declare const accordionItemClassNames: SlotClassNames<AccordionItemSlots>;
105
110
 
106
- export declare type AccordionItemContextValue = Required<Pick<AccordionItemProps, 'disabled'>> & {
107
- onHeaderClick(ev: React_2.MouseEvent | React_2.KeyboardEvent): void;
111
+ export declare type AccordionItemContextValue<Value = AccordionItemValue> = {
108
112
  open: boolean;
113
+ disabled: boolean;
114
+ value: Value;
109
115
  };
110
116
 
111
- export declare type AccordionItemContextValues = {
112
- accordionItem: AccordionItemContextValue;
117
+ export declare type AccordionItemContextValues<Value = AccordionItemValue> = {
118
+ accordionItem: AccordionItemContextValue<Value>;
113
119
  };
114
120
 
115
- export declare type AccordionItemProps = ComponentProps<AccordionItemSlots> & {
121
+ export declare type AccordionItemProps<Value = AccordionItemValue> = ComponentProps<AccordionItemSlots> & {
116
122
  /**
117
123
  * Disables opening/closing of panel.
118
124
  */
@@ -120,16 +126,16 @@ export declare type AccordionItemProps = ComponentProps<AccordionItemSlots> & {
120
126
  /**
121
127
  * Required value that identifies this item inside an Accordion component.
122
128
  */
123
- value: AccordionItemValue;
129
+ value: Value;
124
130
  };
125
131
 
126
- export declare const AccordionItemProvider: React_2.Provider<AccordionItemContextValue>;
132
+ export declare const AccordionItemProvider: React_2.Provider<AccordionItemContextValue<unknown>>;
127
133
 
128
134
  export declare type AccordionItemSlots = {
129
135
  root: NonNullable<Slot<'div'>>;
130
136
  };
131
137
 
132
- export declare type AccordionItemState = ComponentState<AccordionItemSlots> & AccordionItemContextValue;
138
+ export declare type AccordionItemState<Value = AccordionItemValue> = ComponentState<AccordionItemSlots> & AccordionItemContextValue<Value>;
133
139
 
134
140
  export declare type AccordionItemValue = unknown;
135
141
 
@@ -153,11 +159,11 @@ export declare type AccordionPanelState = ComponentState<AccordionPanelSlots> &
153
159
  open: boolean;
154
160
  };
155
161
 
156
- export declare type AccordionProps = ComponentProps<AccordionSlots> & {
162
+ export declare type AccordionProps<Value = AccordionItemValue> = ComponentProps<AccordionSlots> & {
157
163
  /**
158
164
  * Default value for the uncontrolled state of the panel.
159
165
  */
160
- defaultOpenItems?: AccordionItemValue | AccordionItemValue[];
166
+ defaultOpenItems?: Value | Value[];
161
167
  /**
162
168
  * Indicates if Accordion support multiple Panels closed at the same time.
163
169
  */
@@ -173,28 +179,33 @@ export declare type AccordionProps = ComponentProps<AccordionSlots> & {
173
179
  /**
174
180
  * Callback to be called when the opened items change.
175
181
  */
176
- onToggle?: AccordionToggleEventHandler;
182
+ onToggle?: AccordionToggleEventHandler<Value>;
177
183
  /**
178
184
  * Controls the state of the panel.
179
185
  */
180
- openItems?: AccordionItemValue | AccordionItemValue[];
186
+ openItems?: Value | Value[];
181
187
  };
182
188
 
183
- 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'>;
184
194
 
185
195
  export declare type AccordionSlots = {
186
196
  root: NonNullable<Slot<'div'>>;
187
197
  };
188
198
 
189
- export declare type AccordionState = ComponentState<AccordionSlots> & AccordionContextValue;
199
+ export declare type AccordionState<Value = AccordionItemValue> = ComponentState<AccordionSlots> & AccordionContextValue<Value>;
190
200
 
191
- export declare type AccordionToggleData = {
192
- value: AccordionItemValue;
201
+ export declare type AccordionToggleData<Value = AccordionItemValue> = {
202
+ value: Value;
203
+ openItems: Value[];
193
204
  };
194
205
 
195
206
  export declare type AccordionToggleEvent<E = HTMLElement> = React_2.MouseEvent<E> | React_2.KeyboardEvent<E>;
196
207
 
197
- export declare type AccordionToggleEventHandler = (event: AccordionToggleEvent, data: AccordionToggleData) => void;
208
+ export declare type AccordionToggleEventHandler<Value = AccordionItemValue> = (event: AccordionToggleEvent, data: AccordionToggleData<Value>) => void;
198
209
 
199
210
  /**
200
211
  * Function that renders the final JSX of the component
@@ -221,9 +232,9 @@ export declare const renderAccordionPanel_unstable: (state: AccordionPanelState)
221
232
  * @param props - Accordion properties
222
233
  * @param ref - reference to root HTMLElement of Accordion
223
234
  */
224
- 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>;
225
236
 
226
- export declare const useAccordionContext_unstable: <T>(selector: ContextSelector<AccordionContextValue, T>) => T;
237
+ export declare const useAccordionContext_unstable: <T>(selector: ContextSelector<AccordionContextValue<unknown>, T>) => T;
227
238
 
228
239
  export declare function useAccordionContextValues_unstable(state: AccordionState): AccordionContextValues;
229
240
 
@@ -234,12 +245,7 @@ export declare function useAccordionContextValues_unstable(state: AccordionState
234
245
  */
235
246
  export declare const useAccordionHeader_unstable: (props: AccordionHeaderProps, ref: React_2.Ref<HTMLElement>) => AccordionHeaderState;
236
247
 
237
- export declare const useAccordionHeaderContext_unstable: () => {
238
- open: boolean;
239
- disabled: boolean;
240
- size: string;
241
- expandIconPosition: string;
242
- };
248
+ export declare const useAccordionHeaderContext_unstable: () => AccordionHeaderContextValue;
243
249
 
244
250
  export declare function useAccordionHeaderContextValues_unstable(state: AccordionHeaderState): AccordionHeaderContextValues;
245
251
 
@@ -253,11 +259,11 @@ export declare const useAccordionHeaderStyles_unstable: (state: AccordionHeaderS
253
259
  */
254
260
  export declare const useAccordionItem_unstable: (props: AccordionItemProps, ref: React_2.Ref<HTMLElement>) => AccordionItemState;
255
261
 
256
- export declare const useAccordionItemContext_unstable: () => AccordionItemContextValue;
262
+ export declare const useAccordionItemContext_unstable: () => AccordionItemContextValue<unknown>;
257
263
 
258
264
  export declare function useAccordionItemContextValues_unstable(state: AccordionItemState): AccordionItemContextValues;
259
265
 
260
- export declare const useAccordionItemStyles_unstable: (state: AccordionItemState) => AccordionItemState;
266
+ export declare const useAccordionItemStyles_unstable: (state: AccordionItemState) => AccordionItemState<unknown>;
261
267
 
262
268
  /**
263
269
  * Returns the props and state required to render the component
@@ -269,6 +275,6 @@ export declare const useAccordionPanel_unstable: (props: AccordionPanelProps, re
269
275
  /** Applies style classnames to slots */
270
276
  export declare const useAccordionPanelStyles_unstable: (state: AccordionPanelState) => AccordionPanelState;
271
277
 
272
- export declare const useAccordionStyles_unstable: (state: AccordionState) => AccordionState;
278
+ export declare const useAccordionStyles_unstable: (state: AccordionState) => AccordionState<unknown>;
273
279
 
274
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"}
@@ -4,4 +4,3 @@ export * from './renderAccordionHeader';
4
4
  export * from './useAccordionHeader';
5
5
  export * from './useAccordionHeaderContextValues';
6
6
  export * from './useAccordionHeaderStyles.styles';
7
- export * from './AccordionHeaderContext';
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"sourcesContent":["export * from './AccordionHeader';\nexport * from './AccordionHeader.types';\nexport * from './renderAccordionHeader';\nexport * from './useAccordionHeader';\nexport * from './useAccordionHeaderContextValues';\nexport * from './useAccordionHeaderStyles.styles';\nexport * from './AccordionHeaderContext';\n"],"names":[],"mappings":"AAAA,cAAc,oBAAoB;AAClC,cAAc,0BAA0B;AACxC,cAAc,0BAA0B;AACxC,cAAc,uBAAuB;AACrC,cAAc,oCAAoC;AAClD,cAAc,oCAAoC;AAClD,cAAc,2BAA2B"}
1
+ {"version":3,"sources":["index.ts"],"sourcesContent":["export * from './AccordionHeader';\nexport * from './AccordionHeader.types';\nexport * from './renderAccordionHeader';\nexport * from './useAccordionHeader';\nexport * from './useAccordionHeaderContextValues';\nexport * from './useAccordionHeaderStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,oBAAoB;AAClC,cAAc,0BAA0B;AACxC,cAAc,0BAA0B;AACxC,cAAc,uBAAuB;AACrC,cAAc,oCAAoC;AAClD,cAAc,oCAAoC"}
@@ -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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useAccordionHeaderContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type {\n AccordionHeaderContextValue,\n AccordionHeaderState,\n AccordionHeaderContextValues,\n} from './AccordionHeader.types';\n\nexport function useAccordionHeaderContextValues_unstable(state: AccordionHeaderState): AccordionHeaderContextValues {\n const { disabled, expandIconPosition, open, size } = state;\n\n const accordionHeader = React.useMemo<AccordionHeaderContextValue>(\n () => ({\n disabled,\n expandIconPosition,\n open,\n size,\n }),\n [disabled, expandIconPosition, open, size],\n );\n\n return { accordionHeader };\n}\n"],"names":["React","useAccordionHeaderContextValues_unstable","state","disabled","expandIconPosition","open","size","accordionHeader","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,OAAO,SAASC,yCAAyCC,KAA2B,EAAgC;IAClH,MAAM,EAAEC,SAAQ,EAAEC,mBAAkB,EAAEC,KAAI,EAAEC,KAAI,EAAE,GAAGJ;IAErD,MAAMK,kBAAkBP,MAAMQ,OAAO,CACnC,IAAO,CAAA;YACLL;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACH;QAAUC;QAAoBC;QAAMC;KAAK;IAG5C,OAAO;QAAEC;IAAgB;AAC3B,CAAC"}
1
+ {"version":3,"sources":["useAccordionHeaderContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AccordionHeaderState, AccordionHeaderContextValues } from './AccordionHeader.types';\nimport type { AccordionHeaderContextValue } from '../../contexts/accordionHeader';\n\nexport function useAccordionHeaderContextValues_unstable(state: AccordionHeaderState): AccordionHeaderContextValues {\n const { disabled, expandIconPosition, open, size } = state;\n\n const accordionHeader = React.useMemo<AccordionHeaderContextValue>(\n () => ({\n disabled,\n expandIconPosition,\n open,\n size,\n }),\n [disabled, expandIconPosition, open, size],\n );\n\n return { accordionHeader };\n}\n"],"names":["React","useAccordionHeaderContextValues_unstable","state","disabled","expandIconPosition","open","size","accordionHeader","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,yCAAyCC,KAA2B,EAAgC;IAClH,MAAM,EAAEC,SAAQ,EAAEC,mBAAkB,EAAEC,KAAI,EAAEC,KAAI,EAAE,GAAGJ;IAErD,MAAMK,kBAAkBP,MAAMQ,OAAO,CACnC,IAAO,CAAA;YACLL;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACH;QAAUC;QAAoBC;QAAMC;KAAK;IAG5C,OAAO;QAAEC;IAAgB;AAC3B,CAAC"}
@@ -1 +1 @@
1
- import * as React from 'react';
1
+ export { };
@@ -1 +1 @@
1
- {"version":3,"sources":["AccordionItem.types.ts"],"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: NonNullable<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"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
1
+ {"version":3,"sources":["AccordionItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { AccordionItemContextValue } from '../../contexts/accordionItem';\n\nexport type AccordionItemContextValues<Value = AccordionItemValue> = {\n accordionItem: AccordionItemContextValue<Value>;\n};\n\nexport type AccordionItemSlots = {\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type AccordionItemProps<Value = AccordionItemValue> = 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: Value;\n};\n\nexport type AccordionItemValue = unknown;\n\nexport type AccordionItemState<Value = AccordionItemValue> = ComponentState<AccordionItemSlots> &\n AccordionItemContextValue<Value>;\n"],"names":[],"mappings":"AAAA,WAyBmC"}