@fluentui/react-accordion 9.0.0-rc.1 → 9.0.0-rc.12

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 (168) hide show
  1. package/CHANGELOG.json +513 -1
  2. package/CHANGELOG.md +238 -95
  3. package/Spec.md +36 -4
  4. package/dist/{react-accordion.d.ts → index.d.ts} +69 -69
  5. package/{lib → dist}/tsdoc-metadata.json +0 -0
  6. package/lib/Accordion.js.map +1 -1
  7. package/lib/AccordionHeader.js.map +1 -1
  8. package/lib/AccordionItem.js.map +1 -1
  9. package/lib/AccordionPanel.js.map +1 -1
  10. package/lib/components/Accordion/Accordion.js.map +1 -1
  11. package/lib/components/Accordion/Accordion.types.js.map +1 -1
  12. package/lib/components/Accordion/AccordionContext.js +3 -2
  13. package/lib/components/Accordion/AccordionContext.js.map +1 -1
  14. package/lib/components/Accordion/index.js.map +1 -1
  15. package/lib/components/Accordion/renderAccordion.js.map +1 -1
  16. package/lib/components/Accordion/useAccordion.js +14 -24
  17. package/lib/components/Accordion/useAccordion.js.map +1 -1
  18. package/lib/components/Accordion/useAccordionContextValues.js +2 -2
  19. package/lib/components/Accordion/useAccordionContextValues.js.map +1 -1
  20. package/lib/components/Accordion/useAccordionStyles.js +4 -2
  21. package/lib/components/Accordion/useAccordionStyles.js.map +1 -1
  22. package/lib/components/AccordionHeader/AccordionHeader.js.map +1 -1
  23. package/lib/components/AccordionHeader/AccordionHeader.types.js.map +1 -1
  24. package/lib/components/AccordionHeader/AccordionHeaderContext.js.map +1 -1
  25. package/lib/components/AccordionHeader/index.js.map +1 -1
  26. package/lib/components/AccordionHeader/renderAccordionHeader.js.map +1 -1
  27. package/lib/components/AccordionHeader/useAccordionHeader.js.map +1 -1
  28. package/lib/components/AccordionHeader/useAccordionHeaderContextValues.js.map +1 -1
  29. package/lib/components/AccordionHeader/useAccordionHeaderStyles.js +33 -14
  30. package/lib/components/AccordionHeader/useAccordionHeaderStyles.js.map +1 -1
  31. package/lib/components/AccordionItem/AccordionItem.js.map +1 -1
  32. package/lib/components/AccordionItem/AccordionItem.types.js.map +1 -1
  33. package/lib/components/AccordionItem/AccordionItemContext.js +1 -0
  34. package/lib/components/AccordionItem/AccordionItemContext.js.map +1 -1
  35. package/lib/components/AccordionItem/index.js.map +1 -1
  36. package/lib/components/AccordionItem/renderAccordionItem.js.map +1 -1
  37. package/lib/components/AccordionItem/useAccordionItem.js +0 -7
  38. package/lib/components/AccordionItem/useAccordionItem.js.map +1 -1
  39. package/lib/components/AccordionItem/useAccordionItemContextValues.js.map +1 -1
  40. package/lib/components/AccordionItem/useAccordionItemStyles.js +4 -2
  41. package/lib/components/AccordionItem/useAccordionItemStyles.js.map +1 -1
  42. package/lib/components/AccordionPanel/AccordionPanel.js.map +1 -1
  43. package/lib/components/AccordionPanel/AccordionPanel.types.js.map +1 -1
  44. package/lib/components/AccordionPanel/index.js.map +1 -1
  45. package/lib/components/AccordionPanel/renderAccordionPanel.js.map +1 -1
  46. package/lib/components/AccordionPanel/useAccordionPanel.js +11 -1
  47. package/lib/components/AccordionPanel/useAccordionPanel.js.map +1 -1
  48. package/lib/components/AccordionPanel/useAccordionPanelStyles.js +4 -2
  49. package/lib/components/AccordionPanel/useAccordionPanelStyles.js.map +1 -1
  50. package/lib/index.js +4 -4
  51. package/lib/index.js.map +1 -1
  52. package/lib-commonjs/Accordion.js.map +1 -1
  53. package/lib-commonjs/AccordionHeader.js.map +1 -1
  54. package/lib-commonjs/AccordionItem.js.map +1 -1
  55. package/lib-commonjs/AccordionPanel.js.map +1 -1
  56. package/lib-commonjs/components/Accordion/Accordion.js.map +1 -1
  57. package/lib-commonjs/components/Accordion/Accordion.types.js.map +1 -1
  58. package/lib-commonjs/components/Accordion/AccordionContext.js +6 -2
  59. package/lib-commonjs/components/Accordion/AccordionContext.js.map +1 -1
  60. package/lib-commonjs/components/Accordion/index.js.map +1 -1
  61. package/lib-commonjs/components/Accordion/renderAccordion.js.map +1 -1
  62. package/lib-commonjs/components/Accordion/useAccordion.js +15 -24
  63. package/lib-commonjs/components/Accordion/useAccordion.js.map +1 -1
  64. package/lib-commonjs/components/Accordion/useAccordionContextValues.js +2 -2
  65. package/lib-commonjs/components/Accordion/useAccordionContextValues.js.map +1 -1
  66. package/lib-commonjs/components/Accordion/useAccordionStyles.js +5 -3
  67. package/lib-commonjs/components/Accordion/useAccordionStyles.js.map +1 -1
  68. package/lib-commonjs/components/AccordionHeader/AccordionHeader.js.map +1 -1
  69. package/lib-commonjs/components/AccordionHeader/AccordionHeader.types.js.map +1 -1
  70. package/lib-commonjs/components/AccordionHeader/AccordionHeaderContext.js.map +1 -1
  71. package/lib-commonjs/components/AccordionHeader/index.js.map +1 -1
  72. package/lib-commonjs/components/AccordionHeader/renderAccordionHeader.js.map +1 -1
  73. package/lib-commonjs/components/AccordionHeader/useAccordionHeader.js.map +1 -1
  74. package/lib-commonjs/components/AccordionHeader/useAccordionHeaderContextValues.js.map +1 -1
  75. package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.js +34 -15
  76. package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.js.map +1 -1
  77. package/lib-commonjs/components/AccordionItem/AccordionItem.js.map +1 -1
  78. package/lib-commonjs/components/AccordionItem/AccordionItem.types.js.map +1 -1
  79. package/lib-commonjs/components/AccordionItem/AccordionItemContext.js +2 -1
  80. package/lib-commonjs/components/AccordionItem/AccordionItemContext.js.map +1 -1
  81. package/lib-commonjs/components/AccordionItem/index.js.map +1 -1
  82. package/lib-commonjs/components/AccordionItem/renderAccordionItem.js.map +1 -1
  83. package/lib-commonjs/components/AccordionItem/useAccordionItem.js +0 -8
  84. package/lib-commonjs/components/AccordionItem/useAccordionItem.js.map +1 -1
  85. package/lib-commonjs/components/AccordionItem/useAccordionItemContextValues.js.map +1 -1
  86. package/lib-commonjs/components/AccordionItem/useAccordionItemStyles.js +5 -3
  87. package/lib-commonjs/components/AccordionItem/useAccordionItemStyles.js.map +1 -1
  88. package/lib-commonjs/components/AccordionPanel/AccordionPanel.js.map +1 -1
  89. package/lib-commonjs/components/AccordionPanel/AccordionPanel.types.js.map +1 -1
  90. package/lib-commonjs/components/AccordionPanel/index.js.map +1 -1
  91. package/lib-commonjs/components/AccordionPanel/renderAccordionPanel.js.map +1 -1
  92. package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js +14 -1
  93. package/lib-commonjs/components/AccordionPanel/useAccordionPanel.js.map +1 -1
  94. package/lib-commonjs/components/AccordionPanel/useAccordionPanelStyles.js +5 -3
  95. package/lib-commonjs/components/AccordionPanel/useAccordionPanelStyles.js.map +1 -1
  96. package/lib-commonjs/index.js +170 -5
  97. package/lib-commonjs/index.js.map +1 -1
  98. package/package.json +21 -23
  99. package/lib/Accordion.d.ts +0 -1
  100. package/lib/AccordionHeader.d.ts +0 -1
  101. package/lib/AccordionItem.d.ts +0 -1
  102. package/lib/AccordionPanel.d.ts +0 -1
  103. package/lib/components/Accordion/Accordion.d.ts +0 -6
  104. package/lib/components/Accordion/Accordion.types.d.ts +0 -53
  105. package/lib/components/Accordion/AccordionContext.d.ts +0 -3
  106. package/lib/components/Accordion/index.d.ts +0 -7
  107. package/lib/components/Accordion/renderAccordion.d.ts +0 -5
  108. package/lib/components/Accordion/useAccordion.d.ts +0 -8
  109. package/lib/components/Accordion/useAccordionContextValues.d.ts +0 -2
  110. package/lib/components/Accordion/useAccordionStyles.d.ts +0 -3
  111. package/lib/components/AccordionHeader/AccordionHeader.d.ts +0 -7
  112. package/lib/components/AccordionHeader/AccordionHeader.types.d.ts +0 -48
  113. package/lib/components/AccordionHeader/AccordionHeaderContext.d.ts +0 -4
  114. package/lib/components/AccordionHeader/index.d.ts +0 -6
  115. package/lib/components/AccordionHeader/renderAccordionHeader.d.ts +0 -5
  116. package/lib/components/AccordionHeader/useAccordionHeader.d.ts +0 -8
  117. package/lib/components/AccordionHeader/useAccordionHeaderContextValues.d.ts +0 -2
  118. package/lib/components/AccordionHeader/useAccordionHeaderStyles.d.ts +0 -4
  119. package/lib/components/AccordionItem/AccordionItem.d.ts +0 -6
  120. package/lib/components/AccordionItem/AccordionItem.types.d.ts +0 -26
  121. package/lib/components/AccordionItem/AccordionItemContext.d.ts +0 -4
  122. package/lib/components/AccordionItem/index.d.ts +0 -7
  123. package/lib/components/AccordionItem/renderAccordionItem.d.ts +0 -5
  124. package/lib/components/AccordionItem/useAccordionItem.d.ts +0 -8
  125. package/lib/components/AccordionItem/useAccordionItemContextValues.d.ts +0 -2
  126. package/lib/components/AccordionItem/useAccordionItemStyles.d.ts +0 -3
  127. package/lib/components/AccordionPanel/AccordionPanel.d.ts +0 -6
  128. package/lib/components/AccordionPanel/AccordionPanel.types.d.ts +0 -11
  129. package/lib/components/AccordionPanel/index.d.ts +0 -5
  130. package/lib/components/AccordionPanel/renderAccordionPanel.d.ts +0 -5
  131. package/lib/components/AccordionPanel/useAccordionPanel.d.ts +0 -8
  132. package/lib/components/AccordionPanel/useAccordionPanelStyles.d.ts +0 -4
  133. package/lib/index.d.ts +0 -4
  134. package/lib-commonjs/Accordion.d.ts +0 -1
  135. package/lib-commonjs/AccordionHeader.d.ts +0 -1
  136. package/lib-commonjs/AccordionItem.d.ts +0 -1
  137. package/lib-commonjs/AccordionPanel.d.ts +0 -1
  138. package/lib-commonjs/components/Accordion/Accordion.d.ts +0 -6
  139. package/lib-commonjs/components/Accordion/Accordion.types.d.ts +0 -53
  140. package/lib-commonjs/components/Accordion/AccordionContext.d.ts +0 -3
  141. package/lib-commonjs/components/Accordion/index.d.ts +0 -7
  142. package/lib-commonjs/components/Accordion/renderAccordion.d.ts +0 -5
  143. package/lib-commonjs/components/Accordion/useAccordion.d.ts +0 -8
  144. package/lib-commonjs/components/Accordion/useAccordionContextValues.d.ts +0 -2
  145. package/lib-commonjs/components/Accordion/useAccordionStyles.d.ts +0 -3
  146. package/lib-commonjs/components/AccordionHeader/AccordionHeader.d.ts +0 -7
  147. package/lib-commonjs/components/AccordionHeader/AccordionHeader.types.d.ts +0 -48
  148. package/lib-commonjs/components/AccordionHeader/AccordionHeaderContext.d.ts +0 -4
  149. package/lib-commonjs/components/AccordionHeader/index.d.ts +0 -6
  150. package/lib-commonjs/components/AccordionHeader/renderAccordionHeader.d.ts +0 -5
  151. package/lib-commonjs/components/AccordionHeader/useAccordionHeader.d.ts +0 -8
  152. package/lib-commonjs/components/AccordionHeader/useAccordionHeaderContextValues.d.ts +0 -2
  153. package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.d.ts +0 -4
  154. package/lib-commonjs/components/AccordionItem/AccordionItem.d.ts +0 -6
  155. package/lib-commonjs/components/AccordionItem/AccordionItem.types.d.ts +0 -26
  156. package/lib-commonjs/components/AccordionItem/AccordionItemContext.d.ts +0 -4
  157. package/lib-commonjs/components/AccordionItem/index.d.ts +0 -7
  158. package/lib-commonjs/components/AccordionItem/renderAccordionItem.d.ts +0 -5
  159. package/lib-commonjs/components/AccordionItem/useAccordionItem.d.ts +0 -8
  160. package/lib-commonjs/components/AccordionItem/useAccordionItemContextValues.d.ts +0 -2
  161. package/lib-commonjs/components/AccordionItem/useAccordionItemStyles.d.ts +0 -3
  162. package/lib-commonjs/components/AccordionPanel/AccordionPanel.d.ts +0 -6
  163. package/lib-commonjs/components/AccordionPanel/AccordionPanel.types.d.ts +0 -11
  164. package/lib-commonjs/components/AccordionPanel/index.d.ts +0 -5
  165. package/lib-commonjs/components/AccordionPanel/renderAccordionPanel.d.ts +0 -5
  166. package/lib-commonjs/components/AccordionPanel/useAccordionPanel.d.ts +0 -8
  167. package/lib-commonjs/components/AccordionPanel/useAccordionPanelStyles.d.ts +0 -4
  168. package/lib-commonjs/index.d.ts +0 -4
package/Spec.md CHANGED
@@ -37,9 +37,10 @@ The root level component serves context and common API between all children.
37
37
  export type AccordionProps = ComponentProps &
38
38
  React.HTMLAttributes<HTMLElement> & {
39
39
  /**
40
- * Indicates if keyboard navigation is available
40
+ * Indicates if keyboard navigation is available and gives two options,
41
+ * linear or circular navigation
41
42
  */
42
- navigable?: boolean;
43
+ navigation?: 'linear' | 'circular';
43
44
  /**
44
45
  * Indicates if Accordion support multiple Panels opened at the same time
45
46
  */
@@ -410,6 +411,37 @@ As a general rule, once the accordion is closed the focus should return to the h
410
411
  | Keyboard | Home | Moves Focus | Moves focus to the first panel heading |
411
412
  | Keyboard | End | Moves Focus | Moves focus to the last panel heading |
412
413
 
413
- ## Accessibiltiy
414
+ ## Accessibility
414
415
 
415
- Accessibility behaviour is built into the spec as much as possible. This section addresses specific issues that don't fit well with the standard definition of the component.
416
+ Accessibility behavior is built into the spec as much as possible. This section addresses specific issues that don't fit well with the standard definition of the component.
417
+
418
+ ### No heading level on `AccordionHeader` by default
419
+
420
+ As described on [WAI-ARIA Roles, States, and Properties](https://www.w3.org/TR/wai-aria-practices/#wai-aria-roles-states-and-properties) documentation for accordion:
421
+
422
+ > Each accordion header button is wrapped in an element with role heading that has a value set for aria-level that is appropriate for the information architecture of the page.
423
+
424
+ Every `AccordionHeader` should have as its root a semantic heading element: `h1`, `h2`, `h3`, `h4`, `h5` or `h6`. Alternatively `role="heading"` and a proper `aria-level` attribute. This behavior is not implemented by default on `AccordionHeader` as it's impossible to predict which heading level will be required by the user. Requiring manual addition of such ARIA requirement.
425
+
426
+ ```tsx
427
+ {/* No heading level by default */}
428
+ <AccordionHeader>This is a header</AccordionHeader>
429
+ {/* Generated html */}
430
+ <div>
431
+ <button>This is a header</button>
432
+ </div>
433
+
434
+ {/* as semantic heading */}
435
+ <AccordionHeader as="h4">This is a header</AccordionHeader>
436
+ {/* Generated html */}
437
+ <h4>
438
+ <button>This is a header</button>
439
+ </h4>
440
+
441
+ {/* if no semantic heading can be used */}
442
+ <AccordionHeader role="heading" aria-level="4">This is a header</AccordionHeader>
443
+ {/* Generated html */}
444
+ <div role="heading" aria-level="4">
445
+ <button>This is a header</button>
446
+ </h4>
447
+ ```
@@ -1,36 +1,23 @@
1
1
  import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
2
2
  import type { ComponentProps } from '@fluentui/react-utilities';
3
3
  import type { ComponentState } from '@fluentui/react-utilities';
4
- import type { Context } from '@fluentui/react-context-selector';
4
+ import { ContextSelector } from '@fluentui/react-context-selector';
5
+ import { FC } from 'react';
5
6
  import type { ForwardRefComponent } from '@fluentui/react-utilities';
7
+ import { Provider } from 'react';
8
+ import { ProviderProps } from 'react';
6
9
  import * as React_2 from 'react';
7
10
  import type { Slot } from '@fluentui/react-utilities';
11
+ import type { SlotClassNames } from '@fluentui/react-utilities';
8
12
 
9
13
  /**
10
14
  * Define a styled Accordion, using the `useAccordion_unstable` and `useAccordionStyles_unstable` hooks.
11
15
  */
12
16
  export declare const Accordion: ForwardRefComponent<AccordionProps>;
13
17
 
14
- export declare const accordionClassName = "fui-Accordion";
18
+ export declare const accordionClassNames: SlotClassNames<AccordionSlots>;
15
19
 
16
- declare type AccordionCommons = {
17
- /**
18
- * Indicates if keyboard navigation is available
19
- */
20
- navigable: boolean;
21
- /**
22
- * Indicates if Accordion support multiple Panels opened at the same time
23
- */
24
- multiple: boolean;
25
- /**
26
- * Indicates if Accordion support multiple Panels closed at the same time
27
- */
28
- collapsible: boolean;
29
- };
30
-
31
- export declare const AccordionContext: Context<AccordionContextValue>;
32
-
33
- export declare type AccordionContextValue = Omit<AccordionCommons, 'multiple'> & {
20
+ export declare type AccordionContextValue = Required<Pick<AccordionProps, 'collapsible'>> & Pick<AccordionProps, 'navigation'> & {
34
21
  /**
35
22
  * The list of opened panels by index
36
23
  */
@@ -52,28 +39,11 @@ export declare type AccordionContextValues = {
52
39
  */
53
40
  export declare const AccordionHeader: ForwardRefComponent<AccordionHeaderProps>;
54
41
 
55
- export declare const accordionHeaderClassName = "fui-AccordionHeader";
56
-
57
- declare type AccordionHeaderCommons = {
58
- /**
59
- * Size of spacing in the heading
60
- */
61
- size: AccordionHeaderSize;
62
- /**
63
- * The position of the expand icon slot in heading
64
- */
65
- expandIconPosition: AccordionHeaderExpandIconPosition;
66
- /**
67
- * Indicates if the AccordionHeader should be rendered inline
68
- */
69
- inline: boolean;
70
- };
42
+ export declare const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots>;
71
43
 
72
- export declare type AccordionHeaderContextValue = {
44
+ export declare type AccordionHeaderContextValue = Required<Pick<AccordionHeaderProps, 'expandIconPosition' | 'size'>> & {
73
45
  disabled: boolean;
74
46
  open: boolean;
75
- expandIconPosition: AccordionHeaderExpandIconPosition;
76
- size: AccordionHeaderSize;
77
47
  };
78
48
 
79
49
  export declare type AccordionHeaderContextValues = {
@@ -82,7 +52,20 @@ export declare type AccordionHeaderContextValues = {
82
52
 
83
53
  export declare type AccordionHeaderExpandIconPosition = 'start' | 'end';
84
54
 
85
- export declare type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> & Partial<AccordionHeaderCommons>;
55
+ export declare type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> & {
56
+ /**
57
+ * The position of the expand icon slot in heading.
58
+ */
59
+ expandIconPosition?: AccordionHeaderExpandIconPosition;
60
+ /**
61
+ * Indicates if the AccordionHeader should be rendered inline.
62
+ */
63
+ inline?: boolean;
64
+ /**
65
+ * Size of spacing in the heading.
66
+ */
67
+ size?: AccordionHeaderSize;
68
+ };
86
69
 
87
70
  export declare type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';
88
71
 
@@ -96,16 +79,16 @@ export declare type AccordionHeaderSlots = {
96
79
  */
97
80
  button: NonNullable<Slot<ARIAButtonSlotProps>>;
98
81
  /**
99
- * Expand icon slot rendered before (or after) children content in heading
82
+ * Expand icon slot rendered before (or after) children content in heading.
100
83
  */
101
84
  expandIcon: Slot<'span'>;
102
85
  /**
103
- * Expand icon slot rendered before (or after) children content in heading
86
+ * Expand icon slot rendered before (or after) children content in heading.
104
87
  */
105
88
  icon?: Slot<'div'>;
106
89
  };
107
90
 
108
- export declare type AccordionHeaderState = ComponentState<AccordionHeaderSlots> & AccordionHeaderCommons & AccordionHeaderContextValue;
91
+ export declare type AccordionHeaderState = ComponentState<AccordionHeaderSlots> & Required<Pick<AccordionHeaderProps, 'inline'>> & AccordionHeaderContextValue;
109
92
 
110
93
  export declare type AccordionIndex = number | number[];
111
94
 
@@ -114,37 +97,35 @@ export declare type AccordionIndex = number | number[];
114
97
  */
115
98
  export declare const AccordionItem: ForwardRefComponent<AccordionItemProps>;
116
99
 
117
- export declare const accordionItemClassName = "fui-AccordionItem";
118
-
119
- declare type AccordionItemCommons = {
120
- /**
121
- * Disables opening/closing of panel
122
- */
123
- disabled: boolean;
124
- /**
125
- * required value that identifies this item inside an Accordion component
126
- */
127
- value: AccordionItemValue;
128
- };
129
-
130
- export declare const AccordionItemContext: React_2.Context<AccordionItemContextValue>;
100
+ export declare const accordionItemClassNames: SlotClassNames<AccordionItemSlots>;
131
101
 
132
- export declare type AccordionItemContextValue = Omit<AccordionItemCommons, 'value'> & {
133
- open: boolean;
102
+ export declare type AccordionItemContextValue = Required<Pick<AccordionItemProps, 'disabled'>> & {
134
103
  onHeaderClick(ev: React_2.MouseEvent | React_2.KeyboardEvent): void;
104
+ open: boolean;
135
105
  };
136
106
 
137
107
  export declare type AccordionItemContextValues = {
138
108
  accordionItem: AccordionItemContextValue;
139
109
  };
140
110
 
141
- export declare type AccordionItemProps = ComponentProps<AccordionItemSlots> & Partial<AccordionItemCommons> & Pick<AccordionItemCommons, 'value'>;
111
+ export declare type AccordionItemProps = ComponentProps<AccordionItemSlots> & {
112
+ /**
113
+ * Disables opening/closing of panel.
114
+ */
115
+ disabled?: boolean;
116
+ /**
117
+ * Required value that identifies this item inside an Accordion component.
118
+ */
119
+ value: AccordionItemValue;
120
+ };
121
+
122
+ export declare const AccordionItemProvider: React_2.Provider<AccordionItemContextValue>;
142
123
 
143
124
  export declare type AccordionItemSlots = {
144
125
  root: Slot<'div'>;
145
126
  };
146
127
 
147
- export declare type AccordionItemState = ComponentState<AccordionItemSlots> & AccordionItemCommons & AccordionItemContextValue;
128
+ export declare type AccordionItemState = ComponentState<AccordionItemSlots> & AccordionItemContextValue;
148
129
 
149
130
  export declare type AccordionItemValue = unknown;
150
131
 
@@ -153,7 +134,7 @@ export declare type AccordionItemValue = unknown;
153
134
  */
154
135
  export declare const AccordionPanel: ForwardRefComponent<AccordionPanelProps>;
155
136
 
156
- export declare const accordionPanelClassName = "fui-AccordionPanel";
137
+ export declare const accordionPanelClassNames: SlotClassNames<AccordionPanelSlots>;
157
138
 
158
139
  export declare type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;
159
140
 
@@ -163,28 +144,45 @@ export declare type AccordionPanelSlots = {
163
144
 
164
145
  export declare type AccordionPanelState = ComponentState<AccordionPanelSlots> & {
165
146
  /**
166
- * Internal open state, provided by context
147
+ * Internal open state, provided by context.
167
148
  */
168
149
  open: boolean;
169
150
  };
170
151
 
171
- export declare type AccordionProps = ComponentProps<AccordionSlots> & Partial<AccordionCommons> & {
152
+ export declare type AccordionProps = ComponentProps<AccordionSlots> & {
172
153
  /**
173
- * Controls the state of the panel
154
+ * Default value for the uncontrolled state of the panel.
174
155
  */
175
- openItems?: AccordionItemValue | AccordionItemValue[];
156
+ defaultOpenItems?: AccordionItemValue | AccordionItemValue[];
176
157
  /**
177
- * Default value for the uncontrolled state of the panel
158
+ * Indicates if Accordion support multiple Panels closed at the same time.
159
+ */
160
+ collapsible?: boolean;
161
+ /**
162
+ * Indicates if Accordion support multiple Panels opened at the same time.
163
+ */
164
+ multiple?: boolean;
165
+ /**
166
+ * Indicates if keyboard navigation is available and gives two options, linear or circular navigation.
167
+ */
168
+ navigation?: 'linear' | 'circular';
169
+ /**
170
+ * Callback to be called when the opened items change.
178
171
  */
179
- defaultOpenItems?: AccordionItemValue | AccordionItemValue[];
180
172
  onToggle?: AccordionToggleEventHandler;
173
+ /**
174
+ * Controls the state of the panel.
175
+ */
176
+ openItems?: AccordionItemValue | AccordionItemValue[];
181
177
  };
182
178
 
179
+ export declare const AccordionProvider: Provider<AccordionContextValue> & FC<ProviderProps<AccordionContextValue>>;
180
+
183
181
  export declare type AccordionSlots = {
184
182
  root: Slot<'div'>;
185
183
  };
186
184
 
187
- export declare type AccordionState = ComponentState<AccordionSlots> & AccordionCommons & AccordionContextValue;
185
+ export declare type AccordionState = ComponentState<AccordionSlots> & AccordionContextValue;
188
186
 
189
187
  export declare type AccordionToggleData = {
190
188
  value: AccordionItemValue;
@@ -221,6 +219,8 @@ export declare const renderAccordionPanel_unstable: (state: AccordionPanelState)
221
219
  */
222
220
  export declare const useAccordion_unstable: (props: AccordionProps, ref: React_2.Ref<HTMLElement>) => AccordionState;
223
221
 
222
+ export declare const useAccordionContext_unstable: <T>(selector: ContextSelector<AccordionContextValue, T>) => T;
223
+
224
224
  export declare function useAccordionContextValues_unstable(state: AccordionState): AccordionContextValues;
225
225
 
226
226
  /**
File without changes
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../src/Accordion.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}
1
+ {"version":3,"file":"Accordion.js","sourceRoot":"../src/","sources":["Accordion.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC","sourcesContent":["export * from './components/Accordion/index';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"AccordionHeader.js","sourceRoot":"","sources":["../src/AccordionHeader.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC"}
1
+ {"version":3,"file":"AccordionHeader.js","sourceRoot":"../src/","sources":["AccordionHeader.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC","sourcesContent":["export * from './components/AccordionHeader/index';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../src/AccordionItem.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC"}
1
+ {"version":3,"file":"AccordionItem.js","sourceRoot":"../src/","sources":["AccordionItem.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/AccordionItem/index';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"AccordionPanel.js","sourceRoot":"","sources":["../src/AccordionPanel.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC"}
1
+ {"version":3,"file":"AccordionPanel.js","sourceRoot":"../src/","sources":["AccordionPanel.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC","sourcesContent":["export * from './components/AccordionPanel/index';\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,kCAAT,QAAmD,6BAAnD;AAGA,SAAS,2BAAT,QAA4C,sBAA5C;AAEA;;AAEG;;AACH,OAAO,MAAM,SAAS,gBAAwC,KAAK,CAAC,UAAN,CAC5D,CAAC,KAAD,EAAQ,GAAR,KAAe;AACb,QAAM,KAAK,GAAG,qBAAqB,CAAC,KAAD,EAAQ,GAAR,CAAnC;AACA,QAAM,aAAa,GAAG,kCAAkC,CAAC,KAAD,CAAxD;AAEA,EAAA,2BAA2B,CAAC,KAAD,CAA3B;AAEA,SAAO,wBAAwB,CAAC,KAAD,EAAQ,aAAR,CAA/B;AACD,CAR2D,CAAvD;AAWP,SAAS,CAAC,WAAV,GAAwB,WAAxB","sourceRoot":""}
1
+ {"version":3,"sources":["components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,kCAAT,QAAmD,6BAAnD;AAGA,SAAS,2BAAT,QAA4C,sBAA5C;AAEA;;AAEG;;AACH,OAAO,MAAM,SAAS,gBAAwC,KAAK,CAAC,UAAN,CAC5D,CAAC,KAAD,EAAQ,GAAR,KAAe;AACb,QAAM,KAAK,GAAG,qBAAqB,CAAC,KAAD,EAAQ,GAAR,CAAnC;AACA,QAAM,aAAa,GAAG,kCAAkC,CAAC,KAAD,CAAxD;AAEA,EAAA,2BAA2B,CAAC,KAAD,CAA3B;AAEA,SAAO,wBAAwB,CAAC,KAAD,EAAQ,aAAR,CAA/B;AACD,CAR2D,CAAvD;AAWP,SAAS,CAAC,WAAV,GAAwB,WAAxB","sourcesContent":["import * as React from 'react';\nimport { renderAccordion_unstable } from './renderAccordion';\nimport { useAccordion_unstable } from './useAccordion';\nimport { useAccordionContextValues_unstable } from './useAccordionContextValues';\nimport type { AccordionProps } from './Accordion.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useAccordionStyles_unstable } from './useAccordionStyles';\n\n/**\n * Define a styled Accordion, using the `useAccordion_unstable` and `useAccordionStyles_unstable` hooks.\n */\nexport const Accordion: ForwardRefComponent<AccordionProps> = React.forwardRef<HTMLDivElement, AccordionProps>(\n (props, ref) => {\n const state = useAccordion_unstable(props, ref);\n const contextValues = useAccordionContextValues_unstable(state);\n\n useAccordionStyles_unstable(state);\n\n return renderAccordion_unstable(state, contextValues);\n },\n);\n\nAccordion.displayName = 'Accordion';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.types.js","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.types.ts"],"names":[],"mappings":""}
1
+ {"version":3,"file":"Accordion.types.js","sourceRoot":"../src/","sources":["components/Accordion/Accordion.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\n\nexport type AccordionIndex = number | number[];\n\nexport type AccordionToggleEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;\n\nexport type AccordionToggleEventHandler = (event: AccordionToggleEvent, data: AccordionToggleData) => void;\n\nexport type AccordionContextValue = Required<Pick<AccordionProps, 'collapsible'>> &\n Pick<AccordionProps, 'navigation'> & {\n /**\n * The list of opened panels by index\n */\n openItems: AccordionItemValue[];\n /**\n * Callback used by AccordionItem to request a change on it's own opened state\n * Should be used to toggle AccordionItem\n */\n requestToggle: (event: AccordionToggleEvent, data: AccordionToggleData) => void;\n };\n\nexport type AccordionContextValues = {\n accordion: AccordionContextValue;\n};\n\nexport type AccordionSlots = {\n root: Slot<'div'>;\n};\n\nexport type AccordionToggleData = {\n value: AccordionItemValue;\n};\n\nexport type AccordionProps = ComponentProps<AccordionSlots> & {\n /**\n * Default value for the uncontrolled state of the panel.\n */\n defaultOpenItems?: AccordionItemValue | AccordionItemValue[];\n\n /**\n * Indicates if Accordion support multiple Panels closed at the same time.\n */\n collapsible?: boolean;\n\n /**\n * Indicates if Accordion support multiple Panels opened at the same time.\n */\n multiple?: boolean;\n\n /**\n * Indicates if keyboard navigation is available and gives two options, linear or circular navigation.\n */\n navigation?: 'linear' | 'circular';\n\n /**\n * Callback to be called when the opened items change.\n */\n onToggle?: AccordionToggleEventHandler;\n\n /**\n * Controls the state of the panel.\n */\n openItems?: AccordionItemValue | AccordionItemValue[];\n};\n\nexport type AccordionState = ComponentState<AccordionSlots> & AccordionContextValue;\n"]}
@@ -1,7 +1,6 @@
1
- import { createContext } from '@fluentui/react-context-selector';
1
+ import { createContext, useContextSelector } from '@fluentui/react-context-selector';
2
2
  export const AccordionContext = /*#__PURE__*/createContext({
3
3
  openItems: [],
4
- navigable: false,
5
4
  collapsible: false,
6
5
 
7
6
  requestToggle() {
@@ -9,4 +8,6 @@ export const AccordionContext = /*#__PURE__*/createContext({
9
8
  }
10
9
 
11
10
  });
11
+ export const AccordionProvider = AccordionContext.Provider;
12
+ export const useAccordionContext_unstable = selector => useContextSelector(AccordionContext, selector);
12
13
  //# sourceMappingURL=AccordionContext.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Accordion/AccordionContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B;AAIA,OAAO,MAAM,gBAAgB,gBAAmC,aAAa,CAAwB;AACnG,EAAA,SAAS,EAAE,EADwF;AAEnG,EAAA,SAAS,EAAE,KAFwF;AAGnG,EAAA,WAAW,EAAE,KAHsF;;AAInG,EAAA,aAAa,GAAA;AACX;AACD;;AANkG,CAAxB,CAAtE","sourceRoot":""}
1
+ {"version":3,"sources":["components/Accordion/AccordionContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,EAAyC,kBAAzC,QAAmE,kCAAnE;AAIA,OAAO,MAAM,gBAAgB,gBAAmC,aAAa,CAAwB;AACnG,EAAA,SAAS,EAAE,EADwF;AAEnG,EAAA,WAAW,EAAE,KAFsF;;AAGnG,EAAA,aAAa,GAAA;AACX;AACD;;AALkG,CAAxB,CAAtE;AAQP,OAAO,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,QAA3C;AACP,OAAO,MAAM,4BAA4B,GAAO,QAAJ,IAC1C,kBAAkB,CAAC,gBAAD,EAAmB,QAAnB,CADb","sourcesContent":["import { createContext, ContextSelector, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { AccordionContextValue } from './Accordion.types';\n\nexport const AccordionContext: Context<AccordionContextValue> = createContext<AccordionContextValue>({\n openItems: [],\n collapsible: false,\n requestToggle() {\n /* noop */\n },\n});\n\nexport const AccordionProvider = AccordionContext.Provider;\nexport const useAccordionContext_unstable = <T>(selector: ContextSelector<AccordionContextValue, T>): T =>\n useContextSelector(AccordionContext, selector);\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oBAAoB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './Accordion';\nexport * from './Accordion.types';\nexport * from './renderAccordion';\nexport * from './useAccordion';\nexport * from './useAccordionStyles';\nexport * from './useAccordionContextValues';\nexport * from './AccordionContext';\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Accordion/renderAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,gBAAT,QAAiC,oBAAjC;AAGA;;AAEG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAAwB,aAAxB,KAAiE;AACvG,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAiB,KAAjB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,gBAAgB,CAAC,QAAlB,EAA0B;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAA1B,EAA4D,SAAS,CAAC,IAAV,CAAe,QAA3E,CADF,CADF;AAKD,CARM","sourceRoot":""}
1
+ {"version":3,"sources":["components/Accordion/renderAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,gBAAT,QAAiC,oBAAjC;AAGA;;AAEG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAAwB,aAAxB,KAAiE;AACvG,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAiB,KAAjB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,gBAAgB,CAAC,QAAlB,EAA0B;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAA1B,EAA4D,SAAS,CAAC,IAAV,CAAe,QAA3E,CADF,CADF;AAKD,CARM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\n\nimport { AccordionContext } from './AccordionContext';\nimport type { AccordionState, AccordionSlots, AccordionContextValues } from './Accordion.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderAccordion_unstable = (state: AccordionState, contextValues: AccordionContextValues) => {\n const { slots, slotProps } = getSlots<AccordionSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <AccordionContext.Provider value={contextValues.accordion}>{slotProps.root.children}</AccordionContext.Provider>\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
@@ -1,5 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { getNativeElementProps, useControllableState, useEventCallback } from '@fluentui/react-utilities';
3
+ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
3
4
  /**
4
5
  * Returns the props and state required to render the component
5
6
  * @param props - Accordion properties
@@ -13,36 +14,34 @@ export const useAccordion_unstable = (props, ref) => {
13
14
  multiple = false,
14
15
  collapsible = false,
15
16
  onToggle,
16
- navigable = false
17
+ navigation
17
18
  } = props;
18
19
  const [openItems, setOpenItems] = useControllableState({
19
20
  state: React.useMemo(() => normalizeValues(controlledOpenItems), [controlledOpenItems]),
20
21
  defaultState: () => initializeUncontrolledOpenItems({
21
- collapsible,
22
22
  defaultOpenItems,
23
23
  multiple
24
24
  }),
25
25
  initialState: []
26
26
  });
27
+ const arrowNavigationProps = useArrowNavigationGroup({
28
+ circular: navigation === 'circular',
29
+ tabbable: true
30
+ });
27
31
  const requestToggle = useEventCallback((event, data) => {
28
32
  onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, data);
29
- setOpenItems(previousOpenItems => {
30
- return updateOpenItems(data.value, previousOpenItems, {
31
- collapsible,
32
- multiple
33
- });
34
- });
33
+ setOpenItems(previousOpenItems => updateOpenItems(data.value, previousOpenItems, multiple, collapsible));
35
34
  });
36
35
  return {
37
- multiple,
38
36
  collapsible,
39
- navigable,
37
+ navigation,
40
38
  openItems,
41
39
  requestToggle,
42
40
  components: {
43
41
  root: 'div'
44
42
  },
45
43
  root: getNativeElementProps('div', { ...props,
44
+ ...(navigation ? arrowNavigationProps : {}),
46
45
  ref
47
46
  })
48
47
  };
@@ -53,8 +52,7 @@ export const useAccordion_unstable = (props, ref) => {
53
52
 
54
53
  function initializeUncontrolledOpenItems({
55
54
  defaultOpenItems,
56
- multiple,
57
- collapsible
55
+ multiple
58
56
  }) {
59
57
  if (defaultOpenItems !== undefined) {
60
58
  if (Array.isArray(defaultOpenItems)) {
@@ -63,27 +61,19 @@ function initializeUncontrolledOpenItems({
63
61
 
64
62
  return [defaultOpenItems];
65
63
  }
66
- /**
67
- * TODO: since the dropping of descendants API due to performance issues,
68
- * the default behavior of Accordion has been compromised and [0] makes no sense
69
- * indexes are not used anymore to ensure the position of the element which should be opened by default
70
- */
71
-
72
64
 
73
- return collapsible ? [] : [0];
65
+ return [];
74
66
  }
75
67
  /**
76
68
  * Updates the list of open indexes based on an index that changes
77
69
  * @param value - the index that will change
78
70
  * @param previousOpenItems - list of current open indexes
79
- * @param param2 - {multiple, collapsible}
71
+ * @param multiple - if Accordion support multiple Panels opened at the same time
72
+ * @param collapsible - if Accordion support multiple Panels closed at the same time
80
73
  */
81
74
 
82
75
 
83
- function updateOpenItems(value, previousOpenItems, {
84
- multiple,
85
- collapsible
86
- }) {
76
+ function updateOpenItems(value, previousOpenItems, multiple, collapsible) {
87
77
  if (multiple) {
88
78
  if (previousOpenItems.includes(value)) {
89
79
  if (previousOpenItems.length > 1 || collapsible) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Accordion/useAccordion.ts"],"names":[],"mappings":"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","sourceRoot":""}
1
+ {"version":3,"sources":["components/Accordion/useAccordion.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { AccordionProps, AccordionState, AccordionToggleData, AccordionToggleEvent } from './Accordion.types';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Returns the props and state required to render the component\n * @param props - Accordion properties\n * @param ref - reference to root HTMLElement of Accordion\n */\nexport const useAccordion_unstable = (props: AccordionProps, ref: React.Ref<HTMLElement>): AccordionState => {\n const {\n openItems: controlledOpenItems,\n defaultOpenItems,\n multiple = false,\n collapsible = false,\n onToggle,\n navigation,\n } = props;\n const [openItems, setOpenItems] = useControllableState({\n state: React.useMemo(() => normalizeValues(controlledOpenItems), [controlledOpenItems]),\n defaultState: () => initializeUncontrolledOpenItems({ defaultOpenItems, multiple }),\n initialState: [],\n });\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: navigation === 'circular',\n tabbable: true,\n });\n\n const requestToggle = useEventCallback((event: AccordionToggleEvent, data: AccordionToggleData) => {\n onToggle?.(event, data);\n setOpenItems(previousOpenItems => updateOpenItems(data.value, previousOpenItems, multiple, collapsible));\n });\n\n return {\n collapsible,\n navigation,\n openItems,\n requestToggle,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ...props,\n ...(navigation ? arrowNavigationProps : {}),\n ref,\n }),\n };\n};\n\n/**\n * Initial value for the uncontrolled case of the list of open indexes\n */\nfunction initializeUncontrolledOpenItems({\n defaultOpenItems,\n multiple,\n}: Pick<AccordionProps, 'defaultOpenItems' | 'multiple'>): AccordionItemValue[] {\n if (defaultOpenItems !== undefined) {\n if (Array.isArray(defaultOpenItems)) {\n return multiple ? defaultOpenItems : [defaultOpenItems[0]];\n }\n return [defaultOpenItems];\n }\n return [];\n}\n\n/**\n * Updates the list of open indexes based on an index that changes\n * @param value - the index that will change\n * @param previousOpenItems - list of current open indexes\n * @param multiple - if Accordion support multiple Panels opened at the same time\n * @param collapsible - if Accordion support multiple Panels closed at the same time\n */\nfunction updateOpenItems(\n value: AccordionItemValue,\n previousOpenItems: AccordionItemValue[],\n multiple: boolean,\n collapsible: boolean,\n) {\n if (multiple) {\n if (previousOpenItems.includes(value)) {\n if (previousOpenItems.length > 1 || collapsible) {\n return previousOpenItems.filter(i => i !== value);\n }\n } else {\n return [...previousOpenItems, value].sort();\n }\n } else {\n return previousOpenItems[0] === value && collapsible ? [] : [value];\n }\n return previousOpenItems;\n}\n\n/**\n * Normalizes Accordion index into an array of indexes\n */\nfunction normalizeValues(index?: AccordionItemValue | AccordionItemValue[]): AccordionItemValue[] | undefined {\n if (index === undefined) {\n return undefined;\n }\n return Array.isArray(index) ? index : [index];\n}\n"],"sourceRoot":"../src/"}
@@ -1,13 +1,13 @@
1
1
  export function useAccordionContextValues_unstable(state) {
2
2
  const {
3
- navigable,
3
+ navigation,
4
4
  openItems,
5
5
  requestToggle,
6
6
  collapsible
7
7
  } = state; // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
8
8
 
9
9
  const accordion = {
10
- navigable,
10
+ navigation,
11
11
  openItems,
12
12
  requestToggle,
13
13
  collapsible
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Accordion/useAccordionContextValues.ts"],"names":[],"mappings":"AAEA,OAAM,SAAU,kCAAV,CAA6C,KAA7C,EAAkE;AACtE,QAAM;AAAE,IAAA,SAAF;AAAa,IAAA,SAAb;AAAwB,IAAA,aAAxB;AAAuC,IAAA;AAAvC,MAAuD,KAA7D,CADsE,CAGtE;;AACA,QAAM,SAAS,GAA0B;AACvC,IAAA,SADuC;AAEvC,IAAA,SAFuC;AAGvC,IAAA,aAHuC;AAIvC,IAAA;AAJuC,GAAzC;AAOA,SAAO;AAAE,IAAA;AAAF,GAAP;AACD","sourceRoot":""}
1
+ {"version":3,"sources":["components/Accordion/useAccordionContextValues.ts"],"names":[],"mappings":"AAEA,OAAM,SAAU,kCAAV,CAA6C,KAA7C,EAAkE;AACtE,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,SAAd;AAAyB,IAAA,aAAzB;AAAwC,IAAA;AAAxC,MAAwD,KAA9D,CADsE,CAGtE;;AACA,QAAM,SAAS,GAA0B;AACvC,IAAA,UADuC;AAEvC,IAAA,SAFuC;AAGvC,IAAA,aAHuC;AAIvC,IAAA;AAJuC,GAAzC;AAOA,SAAO;AAAE,IAAA;AAAF,GAAP;AACD","sourcesContent":["import type { AccordionContextValue, AccordionContextValues, AccordionState } from './Accordion.types';\n\nexport function useAccordionContextValues_unstable(state: AccordionState): AccordionContextValues {\n const { navigation, openItems, requestToggle, collapsible } = state;\n\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const accordion: AccordionContextValue = {\n navigation,\n openItems,\n requestToggle,\n collapsible,\n };\n\n return { accordion };\n}\n"],"sourceRoot":"../src/"}
@@ -1,7 +1,9 @@
1
1
  import { mergeClasses } from '@griffel/react';
2
- export const accordionClassName = 'fui-Accordion';
2
+ export const accordionClassNames = {
3
+ root: 'fui-Accordion'
4
+ };
3
5
  export const useAccordionStyles_unstable = state => {
4
- state.root.className = mergeClasses(accordionClassName, state.root.className);
6
+ state.root.className = mergeClasses(accordionClassNames.root, state.root.className);
5
7
  return state;
6
8
  };
7
9
  //# sourceMappingURL=useAccordionStyles.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Accordion/useAccordionStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,QAA6B,gBAA7B;AAGA,OAAO,MAAM,kBAAkB,GAAG,eAA3B;AAEP,OAAO,MAAM,2BAA2B,GAAI,KAAD,IAA0B;AACnE,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,kBAAD,EAAqB,KAAK,CAAC,IAAN,CAAW,SAAhC,CAAnC;AAEA,SAAO,KAAP;AACD,CAJM","sourceRoot":""}
1
+ {"version":3,"sources":["components/Accordion/useAccordionStyles.ts"],"names":[],"mappings":"AACA,SAAS,YAAT,QAA6B,gBAA7B;AAGA,OAAO,MAAM,mBAAmB,GAAmC;AACjE,EAAA,IAAI,EAAE;AAD2D,CAA5D;AAIP,OAAO,MAAM,2BAA2B,GAAI,KAAD,IAA0B;AACnE,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,mBAAmB,CAAC,IAArB,EAA2B,KAAK,CAAC,IAAN,CAAW,SAAtC,CAAnC;AAEA,SAAO,KAAP;AACD,CAJM","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { AccordionSlots, AccordionState } from './Accordion.types';\n\nexport const accordionClassNames: SlotClassNames<AccordionSlots> = {\n root: 'fui-Accordion',\n};\n\nexport const useAccordionStyles_unstable = (state: AccordionState) => {\n state.root.className = mergeClasses(accordionClassNames.root, state.root.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/AccordionHeader/AccordionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,QAA4C,sBAA5C;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AACA,SAAS,iCAAT,QAAkD,4BAAlD;AACA,SAAS,wCAAT,QAAyD,mCAAzD;AAIA;;;AAGG;;AACH,OAAO,MAAM,eAAe,gBAA8C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACxG,QAAM,KAAK,GAAG,2BAA2B,CAAC,KAAD,EAAQ,GAAR,CAAzC;AACA,QAAM,aAAa,GAAG,wCAAwC,CAAC,KAAD,CAA9D;AAEA,EAAA,iCAAiC,CAAC,KAAD,CAAjC;AAEA,SAAO,8BAA8B,CAAC,KAAD,EAAQ,aAAR,CAArC;AACD,CAPyE,CAAnE;AASP,eAAe,CAAC,WAAhB,GAA8B,iBAA9B","sourceRoot":""}
1
+ {"version":3,"sources":["components/AccordionHeader/AccordionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,QAA4C,sBAA5C;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AACA,SAAS,iCAAT,QAAkD,4BAAlD;AACA,SAAS,wCAAT,QAAyD,mCAAzD;AAIA;;;AAGG;;AACH,OAAO,MAAM,eAAe,gBAA8C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACxG,QAAM,KAAK,GAAG,2BAA2B,CAAC,KAAD,EAAQ,GAAR,CAAzC;AACA,QAAM,aAAa,GAAG,wCAAwC,CAAC,KAAD,CAA9D;AAEA,EAAA,iCAAiC,CAAC,KAAD,CAAjC;AAEA,SAAO,8BAA8B,CAAC,KAAD,EAAQ,aAAR,CAArC;AACD,CAPyE,CAAnE;AASP,eAAe,CAAC,WAAhB,GAA8B,iBAA9B","sourcesContent":["import * as React from 'react';\nimport { useAccordionHeader_unstable } from './useAccordionHeader';\nimport { renderAccordionHeader_unstable } from './renderAccordionHeader';\nimport { useAccordionHeaderStyles_unstable } from './useAccordionHeaderStyles';\nimport { useAccordionHeaderContextValues_unstable } from './useAccordionHeaderContextValues';\nimport type { AccordionHeaderProps } from './AccordionHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled AccordionHeader, using the `useAccordionHeader_unstable` and `useAccordionHeaderStyles_unstable`\n * hooks.\n */\nexport const AccordionHeader: ForwardRefComponent<AccordionHeaderProps> = React.forwardRef((props, ref) => {\n const state = useAccordionHeader_unstable(props, ref);\n const contextValues = useAccordionHeaderContextValues_unstable(state);\n\n useAccordionHeaderStyles_unstable(state);\n\n return renderAccordionHeader_unstable(state, contextValues);\n});\n\nAccordionHeader.displayName = 'AccordionHeader';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"file":"AccordionHeader.types.js","sourceRoot":"","sources":["../../../src/components/AccordionHeader/AccordionHeader.types.ts"],"names":[],"mappings":""}
1
+ {"version":3,"file":"AccordionHeader.types.js","sourceRoot":"../src/","sources":["components/AccordionHeader/AccordionHeader.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\n\nexport type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';\nexport type AccordionHeaderExpandIconPosition = 'start' | 'end';\n\nexport type AccordionHeaderContextValue = Required<Pick<AccordionHeaderProps, 'expandIconPosition' | 'size'>> & {\n disabled: boolean;\n open: boolean;\n};\n\nexport type AccordionHeaderContextValues = {\n accordionHeader: AccordionHeaderContextValue;\n};\n\nexport type AccordionHeaderSlots = {\n /**\n * The element wrapping the button. By default this is a div, but can be a heading.\n */\n root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;\n /**\n * The component to be used as button in heading\n */\n button: NonNullable<Slot<ARIAButtonSlotProps>>;\n /**\n * Expand icon slot rendered before (or after) children content in heading.\n */\n expandIcon: Slot<'span'>;\n /**\n * Expand icon slot rendered before (or after) children content in heading.\n */\n icon?: Slot<'div'>;\n};\n\nexport type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> & {\n /**\n * The position of the expand icon slot in heading.\n */\n expandIconPosition?: AccordionHeaderExpandIconPosition;\n\n /**\n * Indicates if the AccordionHeader should be rendered inline.\n */\n inline?: boolean;\n\n /**\n * Size of spacing in the heading.\n */\n size?: AccordionHeaderSize;\n};\n\nexport type AccordionHeaderState = ComponentState<AccordionHeaderSlots> &\n Required<Pick<AccordionHeaderProps, 'inline'>> &\n AccordionHeaderContextValue;\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/AccordionHeader/AccordionHeaderContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,OAAO,MAAM,sBAAsB,gBAAG,KAAK,CAAC,aAAN,CAAiD;AACrF,EAAA,IAAI,EAAE,KAD+E;AAErF,EAAA,QAAQ,EAAE,KAF2E;AAGrF,EAAA,IAAI,EAAE,QAH+E;AAIrF,EAAA,kBAAkB,EAAE;AAJiE,CAAjD,CAA/B;AAOP,OAAO,MAAM,yBAAyB,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,sBAAjB,CAAxC","sourceRoot":""}
1
+ {"version":3,"sources":["components/AccordionHeader/AccordionHeaderContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,OAAO,MAAM,sBAAsB,gBAAG,KAAK,CAAC,aAAN,CAAiD;AACrF,EAAA,IAAI,EAAE,KAD+E;AAErF,EAAA,QAAQ,EAAE,KAF2E;AAGrF,EAAA,IAAI,EAAE,QAH+E;AAIrF,EAAA,kBAAkB,EAAE;AAJiE,CAAjD,CAA/B;AAOP,OAAO,MAAM,yBAAyB,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,sBAAjB,CAAxC","sourcesContent":["import * as React from 'react';\nimport type { AccordionHeaderContextValue } from './AccordionHeader.types';\n\nexport const AccordionHeaderContext = React.createContext<AccordionHeaderContextValue>({\n open: false,\n disabled: false,\n size: 'medium',\n expandIconPosition: 'start',\n});\n\nexport const useAccordionHeaderContext = () => React.useContext(AccordionHeaderContext);\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AccordionHeader/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mCAAmC,CAAC;AAClD,cAAc,4BAA4B,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/AccordionHeader/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mCAAmC,CAAC;AAClD,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './AccordionHeader';\nexport * from './AccordionHeader.types';\nexport * from './renderAccordionHeader';\nexport * from './useAccordionHeader';\nexport * from './useAccordionHeaderContextValues';\nexport * from './useAccordionHeaderStyles';\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/AccordionHeader/renderAccordionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,sBAAT,QAAuC,0BAAvC;AAGA;;AAEG;;AACH,OAAO,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,aAF4C,KAG1C;AACF,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAuB,KAAvB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,sBAAsB,CAAC,QAAxB,EAAgC;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAhC,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,EACG,KAAK,CAAC,kBAAN,KAA6B,OAA7B,iBAAwC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAjB,CAD3C,EAEG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFjB,EAGG,SAAS,CAAC,IAAV,CAAe,QAHlB,EAIG,KAAK,CAAC,kBAAN,KAA6B,KAA7B,iBAAsC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAjB,CAJzC,CADF,CADF,CADF;AAYD,CAlBM","sourceRoot":""}
1
+ {"version":3,"sources":["components/AccordionHeader/renderAccordionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,sBAAT,QAAuC,0BAAvC;AAGA;;AAEG;;AACH,OAAO,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,aAF4C,KAG1C;AACF,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAuB,KAAvB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,sBAAsB,CAAC,QAAxB,EAAgC;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAhC,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,EACG,KAAK,CAAC,kBAAN,KAA6B,OAA7B,iBAAwC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAjB,CAD3C,EAEG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFjB,EAGG,SAAS,CAAC,IAAV,CAAe,QAHlB,EAIG,KAAK,CAAC,kBAAN,KAA6B,KAA7B,iBAAsC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAjB,CAJzC,CADF,CADF,CADF;AAYD,CAlBM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { AccordionHeaderContext } from './AccordionHeaderContext';\nimport type { AccordionHeaderState, AccordionHeaderSlots, AccordionHeaderContextValues } from './AccordionHeader.types';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderAccordionHeader_unstable = (\n state: AccordionHeaderState,\n contextValues: AccordionHeaderContextValues,\n) => {\n const { slots, slotProps } = getSlots<AccordionHeaderSlots>(state);\n\n return (\n <AccordionHeaderContext.Provider value={contextValues.accordionHeader}>\n <slots.root {...slotProps.root}>\n <slots.button {...slotProps.button}>\n {state.expandIconPosition === 'start' && <slots.expandIcon {...slotProps.expandIcon} />}\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slotProps.root.children}\n {state.expandIconPosition === 'end' && <slots.expandIcon {...slotProps.expandIcon} />}\n </slots.button>\n </slots.root>\n </AccordionHeaderContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/AccordionHeader/useAccordionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,gBAAlD,QAA0E,2BAA1E;AACA,SAAS,gCAAT,QAAiD,wBAAjD;AACA,SAAS,aAAT,QAA8B,sBAA9B;AAEA,SAAS,kBAAT,QAAmC,kCAAnC;AACA,SAAS,gBAAT,QAAiC,+BAAjC;AACA,SAAS,mBAAT,QAAoC,uBAApC;AACA,SAAS,SAAT,QAA0B,iCAA1B;AAEA;;;;AAIG;;AACH,OAAO,MAAM,2BAA2B,GAAG,CACzC,KADyC,EAEzC,GAFyC,KAGjB;AACxB,QAAM;AAAE,IAAA,EAAF;AAAM,IAAA,IAAN;AAAY,IAAA,MAAZ;AAAoB,IAAA,UAApB;AAAgC,IAAA,MAAM,GAAG,KAAzC;AAAgD,IAAA,IAAI,GAAG,QAAvD;AAAiE,IAAA,kBAAkB,GAAG;AAAtF,MAAkG,KAAxG;AACA,QAAM;AAAE,IAAA,aAAa,EAAE,sBAAjB;AAAyC,IAAA,QAAzC;AAAmD,IAAA;AAAnD,MAA4D,gCAAgC,EAAlG;AAEA;;;AAGG;;AACH,QAAM,iBAAiB,GAAG,kBAAkB,CAC1C,gBAD0C,EAE1C,GAAG,IAAI,CAAC,GAAG,CAAC,WAAL,IAAoB,GAAG,CAAC,SAAJ,CAAc,MAAd,KAAyB,CAA7C,IAAkD,IAFf,CAA5C;AAKA,QAAM;AAAE,IAAA;AAAF,MAAU,SAAS,EAAzB,CAbwB,CAexB;;AACA,MAAI,kBAAJ;;AACA,MAAI,kBAAkB,KAAK,KAA3B,EAAkC;AAChC;AACA,IAAA,kBAAkB,GAAG,IAAI,GAAG,CAAC,EAAJ,GAAS,EAAlC;AACD,GAHD,MAGO;AACL;AACA,IAAA,kBAAkB,GAAG,IAAI,GAAG,EAAH,GAAQ,GAAG,KAAK,KAAR,GAAgB,CAAhB,GAAoB,GAArD;AACD;;AAED,QAAM,eAAe,GAAG,aAAa,CAAC,MAAD,EAAS;AAC5C,IAAA,QAAQ,EAAE,IADkC;AAE5C,IAAA,YAAY,EAAE;AACZ,MAAA,QADY;AAEZ,MAAA,iBAFY;AAGZ,uBAAiB;AAHL;AAF8B,GAAT,CAArC;AASA,SAAO;AACL,IAAA,QADK;AAEL,IAAA,IAFK;AAGL,IAAA,IAHK;AAIL,IAAA,MAJK;AAKL,IAAA,kBALK;AAML,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,MAAM,EAAE,QAFE;AAGV,MAAA,UAAU,EAAE,MAHF;AAIV,MAAA,IAAI,EAAE;AAJI,KANP;AAYL,IAAA,IAAI,EAAE,qBAAqB,CAAC,EAAE,IAAI,KAAP,EAAc;AACvC,MAAA,GADuC;AAEvC,SAAG;AAFoC,KAAd,CAZtB;AAgBL,IAAA,IAAI,EAAE,gBAAgB,CAAC,IAAD,CAhBjB;AAiBL,IAAA,UAAU,EAAE,gBAAgB,CAAC,UAAD,EAAa;AACvC,MAAA,QAAQ,EAAE,IAD6B;AAEvC,MAAA,YAAY,EAAE;AACZ,QAAA,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,mBAAD,EAAoB;AAAC,UAAA,SAAS,EAAE,UAAU,kBAAkB;AAAxC,SAApB,CADE;AAEZ,uBAAe;AAFH;AAFyB,KAAb,CAjBvB;AAwBL,IAAA,MAAM,EAAE,EACN,GAAG,eADG;AAEN,MAAA,OAAO,EAAE,gBAAgB,CACtB,EAAD,IAAmG;;;AACjG,SAAA,EAAA,GAAA,eAAe,CAAC,OAAhB,MAAuB,IAAvB,IAAuB,EAAA,KAAA,KAAA,CAAvB,GAAuB,KAAA,CAAvB,GAAuB,EAAA,CAAA,IAAA,CAAvB,eAAuB,EAAG,EAAH,CAAvB;;AACA,YAAI,CAAC,EAAE,CAAC,gBAAR,EAA0B;AACxB,UAAA,sBAAsB,CAAC,EAAD,CAAtB;AACD;AACF,OANsB;AAFnB;AAxBH,GAAP;AAoCD,CAzEM","sourceRoot":""}
1
+ {"version":3,"sources":["components/AccordionHeader/useAccordionHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';\nimport { useAccordionItemContext_unstable } from '../AccordionItem/index';\nimport { useARIAButton } from '@fluentui/react-aria';\nimport type { AccordionHeaderProps, AccordionHeaderState } from './AccordionHeader.types';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { AccordionContext } from '../Accordion/AccordionContext';\nimport { ChevronRightRegular } from '@fluentui/react-icons';\nimport { useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionHeader properties\n * @param ref - reference to root HTMLElement of AccordionHeader\n */\nexport const useAccordionHeader_unstable = (\n props: AccordionHeaderProps,\n ref: React.Ref<HTMLElement>,\n): AccordionHeaderState => {\n const { as, icon, button, expandIcon, inline = false, size = 'medium', expandIconPosition = 'start' } = props;\n const { onHeaderClick: onAccordionHeaderClick, disabled, open } = useAccordionItemContext_unstable();\n\n /**\n * force disabled state on button if accordion isn't collapsible\n * and this is the only item opened\n */\n const disabledFocusable = useContextSelector(\n AccordionContext,\n ctx => !ctx.collapsible && ctx.openItems.length === 1 && open,\n );\n\n const { dir } = useFluent();\n\n // Calculate how to rotate the expand icon [>] (ChevronRightRegular)\n let expandIconRotation: 0 | 90 | -90 | 180;\n if (expandIconPosition === 'end') {\n // If expand icon is at the end, the chevron points up [^] when open, and down [v] when closed\n expandIconRotation = open ? -90 : 90;\n } else {\n // Otherwise, the chevron points down [v] when open, and right [>] (or left [<] in RTL) when closed\n expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n }\n\n const buttonShorthand = useARIAButton(button, {\n required: true,\n defaultProps: {\n disabled,\n disabledFocusable,\n 'aria-expanded': open,\n },\n });\n\n return {\n disabled,\n open,\n size,\n inline,\n expandIconPosition,\n components: {\n root: 'div',\n button: 'button',\n expandIcon: 'span',\n icon: 'div',\n },\n root: getNativeElementProps(as || 'div', {\n ref,\n ...props,\n }),\n icon: resolveShorthand(icon),\n expandIcon: resolveShorthand(expandIcon, {\n required: true,\n defaultProps: {\n children: <ChevronRightRegular transform={`rotate(${expandIconRotation})`} />,\n 'aria-hidden': true,\n },\n }),\n button: {\n ...buttonShorthand,\n onClick: useEventCallback(\n (ev: React.MouseEvent<HTMLButtonElement & HTMLDivElement & HTMLSpanElement & HTMLAnchorElement>) => {\n buttonShorthand.onClick?.(ev);\n if (!ev.defaultPrevented) {\n onAccordionHeaderClick(ev);\n }\n },\n ),\n },\n };\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/AccordionHeader/useAccordionHeaderContextValues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAOA,OAAM,SAAU,wCAAV,CAAmD,KAAnD,EAA8E;AAClF,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,kBAAZ;AAAgC,IAAA,IAAhC;AAAsC,IAAA;AAAtC,MAA+C,KAArD;AAEA,QAAM,eAAe,GAAG,KAAK,CAAC,OAAN,CACtB,OAAO;AACL,IAAA,QADK;AAEL,IAAA,kBAFK;AAGL,IAAA,IAHK;AAIL,IAAA;AAJK,GAAP,CADsB,EAOtB,CAAC,QAAD,EAAW,kBAAX,EAA+B,IAA/B,EAAqC,IAArC,CAPsB,CAAxB;AAUA,SAAO;AAAE,IAAA;AAAF,GAAP;AACD","sourceRoot":""}
1
+ {"version":3,"sources":["components/AccordionHeader/useAccordionHeaderContextValues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAOA,OAAM,SAAU,wCAAV,CAAmD,KAAnD,EAA8E;AAClF,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,kBAAZ;AAAgC,IAAA,IAAhC;AAAsC,IAAA;AAAtC,MAA+C,KAArD;AAEA,QAAM,eAAe,GAAG,KAAK,CAAC,OAAN,CACtB,OAAO;AACL,IAAA,QADK;AAEL,IAAA,kBAFK;AAGL,IAAA,IAHK;AAIL,IAAA;AAJK,GAAP,CADsB,EAOtB,CAAC,QAAD,EAAW,kBAAX,EAA+B,IAA/B,EAAqC,IAArC,CAPsB,CAAxB;AAUA,SAAO;AAAE,IAAA;AAAF,GAAP;AACD","sourcesContent":["import * as React from 'react';\nimport type {\n AccordionHeaderContextValue,\n AccordionHeaderState,\n AccordionHeaderContextValues,\n} from './AccordionHeader.types';\n\nexport function useAccordionHeaderContextValues_unstable(state: AccordionHeaderState): AccordionHeaderContextValues {\n const { disabled, expandIconPosition, open, size } = state;\n\n const accordionHeader = React.useMemo<AccordionHeaderContextValue>(\n () => ({\n disabled,\n expandIconPosition,\n open,\n size,\n }),\n [disabled, expandIconPosition, open, size],\n );\n\n return { accordionHeader };\n}\n"],"sourceRoot":"../src/"}