@fluentui/react-accordion 0.0.0-nightly-20220516-0419.1 → 0.0.0-nightly-20220519-0420.1

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 (86) hide show
  1. package/CHANGELOG.json +37 -17
  2. package/CHANGELOG.md +113 -112
  3. package/dist/index.d.ts +49 -58
  4. package/{lib → dist}/tsdoc-metadata.json +0 -0
  5. package/lib/components/Accordion/Accordion.types.js.map +1 -1
  6. package/lib/components/Accordion/useAccordion.js +4 -10
  7. package/lib/components/Accordion/useAccordion.js.map +1 -1
  8. package/lib/components/AccordionHeader/AccordionHeader.types.js.map +1 -1
  9. package/lib/components/AccordionItem/AccordionItem.types.js.map +1 -1
  10. package/lib/components/AccordionItem/useAccordionItem.js +0 -1
  11. package/lib/components/AccordionItem/useAccordionItem.js.map +1 -1
  12. package/lib-commonjs/components/Accordion/useAccordion.js +4 -10
  13. package/lib-commonjs/components/Accordion/useAccordion.js.map +1 -1
  14. package/lib-commonjs/components/AccordionItem/useAccordionItem.js +0 -1
  15. package/lib-commonjs/components/AccordionItem/useAccordionItem.js.map +1 -1
  16. package/package.json +11 -11
  17. package/lib/Accordion.d.ts +0 -1
  18. package/lib/AccordionHeader.d.ts +0 -1
  19. package/lib/AccordionItem.d.ts +0 -1
  20. package/lib/AccordionPanel.d.ts +0 -1
  21. package/lib/components/Accordion/Accordion.d.ts +0 -6
  22. package/lib/components/Accordion/Accordion.types.d.ts +0 -54
  23. package/lib/components/Accordion/AccordionContext.d.ts +0 -3
  24. package/lib/components/Accordion/index.d.ts +0 -7
  25. package/lib/components/Accordion/renderAccordion.d.ts +0 -5
  26. package/lib/components/Accordion/useAccordion.d.ts +0 -8
  27. package/lib/components/Accordion/useAccordionContextValues.d.ts +0 -2
  28. package/lib/components/Accordion/useAccordionStyles.d.ts +0 -8
  29. package/lib/components/AccordionHeader/AccordionHeader.d.ts +0 -7
  30. package/lib/components/AccordionHeader/AccordionHeader.types.d.ts +0 -48
  31. package/lib/components/AccordionHeader/AccordionHeaderContext.d.ts +0 -4
  32. package/lib/components/AccordionHeader/index.d.ts +0 -6
  33. package/lib/components/AccordionHeader/renderAccordionHeader.d.ts +0 -5
  34. package/lib/components/AccordionHeader/useAccordionHeader.d.ts +0 -8
  35. package/lib/components/AccordionHeader/useAccordionHeaderContextValues.d.ts +0 -2
  36. package/lib/components/AccordionHeader/useAccordionHeaderStyles.d.ts +0 -9
  37. package/lib/components/AccordionItem/AccordionItem.d.ts +0 -6
  38. package/lib/components/AccordionItem/AccordionItem.types.d.ts +0 -26
  39. package/lib/components/AccordionItem/AccordionItemContext.d.ts +0 -4
  40. package/lib/components/AccordionItem/index.d.ts +0 -7
  41. package/lib/components/AccordionItem/renderAccordionItem.d.ts +0 -5
  42. package/lib/components/AccordionItem/useAccordionItem.d.ts +0 -8
  43. package/lib/components/AccordionItem/useAccordionItemContextValues.d.ts +0 -2
  44. package/lib/components/AccordionItem/useAccordionItemStyles.d.ts +0 -8
  45. package/lib/components/AccordionPanel/AccordionPanel.d.ts +0 -6
  46. package/lib/components/AccordionPanel/AccordionPanel.types.d.ts +0 -11
  47. package/lib/components/AccordionPanel/index.d.ts +0 -5
  48. package/lib/components/AccordionPanel/renderAccordionPanel.d.ts +0 -5
  49. package/lib/components/AccordionPanel/useAccordionPanel.d.ts +0 -8
  50. package/lib/components/AccordionPanel/useAccordionPanelStyles.d.ts +0 -9
  51. package/lib/index.d.ts +0 -8
  52. package/lib-commonjs/Accordion.d.ts +0 -1
  53. package/lib-commonjs/AccordionHeader.d.ts +0 -1
  54. package/lib-commonjs/AccordionItem.d.ts +0 -1
  55. package/lib-commonjs/AccordionPanel.d.ts +0 -1
  56. package/lib-commonjs/components/Accordion/Accordion.d.ts +0 -6
  57. package/lib-commonjs/components/Accordion/Accordion.types.d.ts +0 -54
  58. package/lib-commonjs/components/Accordion/AccordionContext.d.ts +0 -3
  59. package/lib-commonjs/components/Accordion/index.d.ts +0 -7
  60. package/lib-commonjs/components/Accordion/renderAccordion.d.ts +0 -5
  61. package/lib-commonjs/components/Accordion/useAccordion.d.ts +0 -8
  62. package/lib-commonjs/components/Accordion/useAccordionContextValues.d.ts +0 -2
  63. package/lib-commonjs/components/Accordion/useAccordionStyles.d.ts +0 -8
  64. package/lib-commonjs/components/AccordionHeader/AccordionHeader.d.ts +0 -7
  65. package/lib-commonjs/components/AccordionHeader/AccordionHeader.types.d.ts +0 -48
  66. package/lib-commonjs/components/AccordionHeader/AccordionHeaderContext.d.ts +0 -4
  67. package/lib-commonjs/components/AccordionHeader/index.d.ts +0 -6
  68. package/lib-commonjs/components/AccordionHeader/renderAccordionHeader.d.ts +0 -5
  69. package/lib-commonjs/components/AccordionHeader/useAccordionHeader.d.ts +0 -8
  70. package/lib-commonjs/components/AccordionHeader/useAccordionHeaderContextValues.d.ts +0 -2
  71. package/lib-commonjs/components/AccordionHeader/useAccordionHeaderStyles.d.ts +0 -9
  72. package/lib-commonjs/components/AccordionItem/AccordionItem.d.ts +0 -6
  73. package/lib-commonjs/components/AccordionItem/AccordionItem.types.d.ts +0 -26
  74. package/lib-commonjs/components/AccordionItem/AccordionItemContext.d.ts +0 -4
  75. package/lib-commonjs/components/AccordionItem/index.d.ts +0 -7
  76. package/lib-commonjs/components/AccordionItem/renderAccordionItem.d.ts +0 -5
  77. package/lib-commonjs/components/AccordionItem/useAccordionItem.d.ts +0 -8
  78. package/lib-commonjs/components/AccordionItem/useAccordionItemContextValues.d.ts +0 -2
  79. package/lib-commonjs/components/AccordionItem/useAccordionItemStyles.d.ts +0 -8
  80. package/lib-commonjs/components/AccordionPanel/AccordionPanel.d.ts +0 -6
  81. package/lib-commonjs/components/AccordionPanel/AccordionPanel.types.d.ts +0 -11
  82. package/lib-commonjs/components/AccordionPanel/index.d.ts +0 -5
  83. package/lib-commonjs/components/AccordionPanel/renderAccordionPanel.d.ts +0 -5
  84. package/lib-commonjs/components/AccordionPanel/useAccordionPanel.d.ts +0 -8
  85. package/lib-commonjs/components/AccordionPanel/useAccordionPanelStyles.d.ts +0 -9
  86. package/lib-commonjs/index.d.ts +0 -8
package/dist/index.d.ts CHANGED
@@ -19,25 +19,9 @@ export declare const accordionClassName = "fui-Accordion";
19
19
 
20
20
  export declare const accordionClassNames: SlotClassNames<AccordionSlots>;
21
21
 
22
- declare type AccordionCommons = {
23
- /**
24
- * Indicates if keyboard navigation is available and gives two options,
25
- * linear or circular navigation
26
- */
27
- navigation?: 'linear' | 'circular';
28
- /**
29
- * Indicates if Accordion support multiple Panels opened at the same time
30
- */
31
- multiple: boolean;
32
- /**
33
- * Indicates if Accordion support multiple Panels closed at the same time
34
- */
35
- collapsible: boolean;
36
- };
37
-
38
22
  export declare const AccordionContext: Context<AccordionContextValue>;
39
23
 
40
- export declare type AccordionContextValue = Omit<AccordionCommons, 'multiple'> & {
24
+ export declare type AccordionContextValue = Required<Pick<AccordionProps, 'collapsible'>> & Pick<AccordionProps, 'navigation'> & {
41
25
  /**
42
26
  * The list of opened panels by index
43
27
  */
@@ -66,26 +50,9 @@ export declare const accordionHeaderClassName = "fui-AccordionHeader";
66
50
 
67
51
  export declare const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots>;
68
52
 
69
- declare type AccordionHeaderCommons = {
70
- /**
71
- * Size of spacing in the heading
72
- */
73
- size: AccordionHeaderSize;
74
- /**
75
- * The position of the expand icon slot in heading
76
- */
77
- expandIconPosition: AccordionHeaderExpandIconPosition;
78
- /**
79
- * Indicates if the AccordionHeader should be rendered inline
80
- */
81
- inline: boolean;
82
- };
83
-
84
- export declare type AccordionHeaderContextValue = {
53
+ export declare type AccordionHeaderContextValue = Required<Pick<AccordionHeaderProps, 'expandIconPosition' | 'size'>> & {
85
54
  disabled: boolean;
86
55
  open: boolean;
87
- expandIconPosition: AccordionHeaderExpandIconPosition;
88
- size: AccordionHeaderSize;
89
56
  };
90
57
 
91
58
  export declare type AccordionHeaderContextValues = {
@@ -94,7 +61,20 @@ export declare type AccordionHeaderContextValues = {
94
61
 
95
62
  export declare type AccordionHeaderExpandIconPosition = 'start' | 'end';
96
63
 
97
- export declare type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> & Partial<AccordionHeaderCommons>;
64
+ export declare type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> & {
65
+ /**
66
+ * The position of the expand icon slot in heading
67
+ */
68
+ expandIconPosition?: AccordionHeaderExpandIconPosition;
69
+ /**
70
+ * Indicates if the AccordionHeader should be rendered inline
71
+ */
72
+ inline?: boolean;
73
+ /**
74
+ * Size of spacing in the heading
75
+ */
76
+ size?: AccordionHeaderSize;
77
+ };
98
78
 
99
79
  export declare type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';
100
80
 
@@ -117,7 +97,7 @@ export declare type AccordionHeaderSlots = {
117
97
  icon?: Slot<'div'>;
118
98
  };
119
99
 
120
- export declare type AccordionHeaderState = ComponentState<AccordionHeaderSlots> & AccordionHeaderCommons & AccordionHeaderContextValue;
100
+ export declare type AccordionHeaderState = ComponentState<AccordionHeaderSlots> & Required<Pick<AccordionHeaderProps, 'inline'>> & AccordionHeaderContextValue;
121
101
 
122
102
  export declare type AccordionIndex = number | number[];
123
103
 
@@ -133,35 +113,33 @@ export declare const accordionItemClassName = "fui-AccordionItem";
133
113
 
134
114
  export declare const accordionItemClassNames: SlotClassNames<AccordionItemSlots>;
135
115
 
136
- declare type AccordionItemCommons = {
137
- /**
138
- * Disables opening/closing of panel
139
- */
140
- disabled: boolean;
141
- /**
142
- * required value that identifies this item inside an Accordion component
143
- */
144
- value: AccordionItemValue;
145
- };
146
-
147
116
  export declare const AccordionItemContext: React_2.Context<AccordionItemContextValue>;
148
117
 
149
- export declare type AccordionItemContextValue = Omit<AccordionItemCommons, 'value'> & {
150
- open: boolean;
118
+ export declare type AccordionItemContextValue = Required<Pick<AccordionItemProps, 'disabled'>> & {
151
119
  onHeaderClick(ev: React_2.MouseEvent | React_2.KeyboardEvent): void;
120
+ open: boolean;
152
121
  };
153
122
 
154
123
  export declare type AccordionItemContextValues = {
155
124
  accordionItem: AccordionItemContextValue;
156
125
  };
157
126
 
158
- export declare type AccordionItemProps = ComponentProps<AccordionItemSlots> & Partial<AccordionItemCommons> & Pick<AccordionItemCommons, 'value'>;
127
+ export declare type AccordionItemProps = ComponentProps<AccordionItemSlots> & {
128
+ /**
129
+ * Disables opening/closing of panel
130
+ */
131
+ disabled?: boolean;
132
+ /**
133
+ * required value that identifies this item inside an Accordion component
134
+ */
135
+ value: AccordionItemValue;
136
+ };
159
137
 
160
138
  export declare type AccordionItemSlots = {
161
139
  root: Slot<'div'>;
162
140
  };
163
141
 
164
- export declare type AccordionItemState = ComponentState<AccordionItemSlots> & AccordionItemCommons & AccordionItemContextValue;
142
+ export declare type AccordionItemState = ComponentState<AccordionItemSlots> & AccordionItemContextValue;
165
143
 
166
144
  export declare type AccordionItemValue = unknown;
167
145
 
@@ -190,23 +168,36 @@ export declare type AccordionPanelState = ComponentState<AccordionPanelSlots> &
190
168
  open: boolean;
191
169
  };
192
170
 
193
- export declare type AccordionProps = ComponentProps<AccordionSlots> & Partial<AccordionCommons> & {
194
- /**
195
- * Controls the state of the panel
196
- */
197
- openItems?: AccordionItemValue | AccordionItemValue[];
171
+ export declare type AccordionProps = ComponentProps<AccordionSlots> & {
198
172
  /**
199
173
  * Default value for the uncontrolled state of the panel
200
174
  */
201
175
  defaultOpenItems?: AccordionItemValue | AccordionItemValue[];
176
+ /**
177
+ * Indicates if Accordion support multiple Panels closed at the same time
178
+ */
179
+ collapsible?: boolean;
180
+ /**
181
+ * Indicates if Accordion support multiple Panels opened at the same time
182
+ */
183
+ multiple?: boolean;
184
+ /**
185
+ * Indicates if keyboard navigation is available and gives two options,
186
+ * linear or circular navigation
187
+ */
188
+ navigation?: 'linear' | 'circular';
202
189
  onToggle?: AccordionToggleEventHandler;
190
+ /**
191
+ * Controls the state of the panel
192
+ */
193
+ openItems?: AccordionItemValue | AccordionItemValue[];
203
194
  };
204
195
 
205
196
  export declare type AccordionSlots = {
206
197
  root: Slot<'div'>;
207
198
  };
208
199
 
209
- export declare type AccordionState = ComponentState<AccordionSlots> & AccordionCommons & AccordionContextValue;
200
+ export declare type AccordionState = ComponentState<AccordionSlots> & AccordionContextValue;
210
201
 
211
202
  export declare type AccordionToggleData = {
212
203
  value: AccordionItemValue;
File without changes
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.types.js","sourceRoot":"../src/","sources":["components/Accordion/Accordion.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\n\nexport type AccordionIndex = number | number[];\n\nexport type AccordionToggleEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;\n\nexport type AccordionToggleEventHandler = (event: AccordionToggleEvent, data: AccordionToggleData) => void;\n\ntype AccordionCommons = {\n /**\n * Indicates if keyboard navigation is available and gives two options,\n * linear or circular navigation\n */\n navigation?: 'linear' | 'circular';\n /**\n * Indicates if Accordion support multiple Panels opened at the same time\n */\n multiple: boolean;\n /**\n * Indicates if Accordion support multiple Panels closed at the same time\n */\n collapsible: boolean;\n};\n\nexport type AccordionContextValue = Omit<AccordionCommons, 'multiple'> & {\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 Partial<AccordionCommons> & {\n /**\n * Controls the state of the panel\n */\n openItems?: AccordionItemValue | AccordionItemValue[];\n /**\n * Default value for the uncontrolled state of the panel\n */\n defaultOpenItems?: AccordionItemValue | AccordionItemValue[];\n onToggle?: AccordionToggleEventHandler;\n };\n\nexport type AccordionState = ComponentState<AccordionSlots> & AccordionCommons & AccordionContextValue;\n"]}
1
+ {"version":3,"file":"Accordion.types.js","sourceRoot":"../src/","sources":["components/Accordion/Accordion.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';\n\nexport type AccordionIndex = number | number[];\n\nexport type AccordionToggleEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;\n\nexport type AccordionToggleEventHandler = (event: AccordionToggleEvent, data: AccordionToggleData) => void;\n\nexport type AccordionContextValue = Required<Pick<AccordionProps, 'collapsible'>> &\n Pick<AccordionProps, 'navigation'> & {\n /**\n * The list of opened panels by index\n */\n openItems: AccordionItemValue[];\n /**\n * Callback used by AccordionItem to request a change on it's own opened state\n * Should be used to toggle AccordionItem\n */\n requestToggle: (event: AccordionToggleEvent, data: AccordionToggleData) => void;\n };\n\nexport type AccordionContextValues = {\n accordion: AccordionContextValue;\n};\n\nexport type AccordionSlots = {\n root: Slot<'div'>;\n};\n\nexport type AccordionToggleData = {\n value: AccordionItemValue;\n};\n\nexport type AccordionProps = ComponentProps<AccordionSlots> & {\n /**\n * Default value for the uncontrolled state of the panel\n */\n defaultOpenItems?: AccordionItemValue | AccordionItemValue[];\n\n /**\n * Indicates if Accordion support multiple Panels closed at the same time\n */\n collapsible?: boolean;\n\n /**\n * Indicates if Accordion support multiple Panels opened at the same time\n */\n multiple?: boolean;\n\n /**\n * Indicates if keyboard navigation is available and gives two options,\n * linear or circular navigation\n */\n navigation?: 'linear' | 'circular';\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"]}
@@ -30,13 +30,9 @@ export const useAccordion_unstable = (props, ref) => {
30
30
  });
31
31
  const requestToggle = useEventCallback((event, data) => {
32
32
  onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, data);
33
- setOpenItems(previousOpenItems => updateOpenItems(data.value, previousOpenItems, {
34
- collapsible,
35
- multiple
36
- }));
33
+ setOpenItems(previousOpenItems => updateOpenItems(data.value, previousOpenItems, multiple, collapsible));
37
34
  });
38
35
  return {
39
- multiple,
40
36
  collapsible,
41
37
  navigation,
42
38
  openItems,
@@ -72,14 +68,12 @@ function initializeUncontrolledOpenItems({
72
68
  * Updates the list of open indexes based on an index that changes
73
69
  * @param value - the index that will change
74
70
  * @param previousOpenItems - list of current open indexes
75
- * @param 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
76
73
  */
77
74
 
78
75
 
79
- function updateOpenItems(value, previousOpenItems, {
80
- multiple,
81
- collapsible
82
- }) {
76
+ function updateOpenItems(value, previousOpenItems, multiple, collapsible) {
83
77
  if (multiple) {
84
78
  if (previousOpenItems.includes(value)) {
85
79
  if (previousOpenItems.length > 1 || collapsible) {
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Accordion/useAccordion.ts"],"names":[],"mappings":"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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 =>\n updateOpenItems(data.value, previousOpenItems, {\n collapsible,\n multiple,\n }),\n );\n });\n\n return {\n multiple,\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 param2 - {multiple, collapsible}\n */\nfunction updateOpenItems(\n value: AccordionItemValue,\n previousOpenItems: AccordionItemValue[],\n { multiple, collapsible }: Pick<AccordionState, 'multiple' | 'collapsible'>,\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
+ {"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 +1 @@
1
- {"version":3,"file":"AccordionHeader.types.js","sourceRoot":"../src/","sources":["components/AccordionHeader/AccordionHeader.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\n\nexport type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';\nexport type AccordionHeaderExpandIconPosition = 'start' | 'end';\n\nexport type AccordionHeaderContextValue = {\n disabled: boolean;\n open: boolean;\n expandIconPosition: AccordionHeaderExpandIconPosition;\n size: AccordionHeaderSize;\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\ntype AccordionHeaderCommons = {\n /**\n * Size of spacing in the heading\n */\n size: AccordionHeaderSize;\n /**\n * The position of the expand icon slot in heading\n */\n expandIconPosition: AccordionHeaderExpandIconPosition;\n /**\n * Indicates if the AccordionHeader should be rendered inline\n */\n inline: boolean;\n};\n\nexport type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> & Partial<AccordionHeaderCommons>;\n\nexport type AccordionHeaderState = ComponentState<AccordionHeaderSlots> &\n AccordionHeaderCommons &\n AccordionHeaderContextValue;\n"]}
1
+ {"version":3,"file":"AccordionHeader.types.js","sourceRoot":"../src/","sources":["components/AccordionHeader/AccordionHeader.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\n\nexport type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';\nexport type AccordionHeaderExpandIconPosition = 'start' | 'end';\n\nexport type AccordionHeaderContextValue = Required<Pick<AccordionHeaderProps, 'expandIconPosition' | 'size'>> & {\n disabled: boolean;\n open: boolean;\n};\n\nexport type AccordionHeaderContextValues = {\n accordionHeader: AccordionHeaderContextValue;\n};\n\nexport type AccordionHeaderSlots = {\n /**\n * The element wrapping the button. By default this is a div, but can be a heading.\n */\n root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;\n /**\n * The component to be used as button in heading\n */\n button: NonNullable<Slot<ARIAButtonSlotProps>>;\n /**\n * Expand icon slot rendered before (or after) children content in heading\n */\n expandIcon: Slot<'span'>;\n /**\n * Expand icon slot rendered before (or after) children content in heading\n */\n icon?: Slot<'div'>;\n};\n\nexport type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> & {\n /**\n * The position of the expand icon slot in heading\n */\n expandIconPosition?: AccordionHeaderExpandIconPosition;\n\n /**\n * Indicates if the AccordionHeader should be rendered inline\n */\n inline?: boolean;\n\n /**\n * Size of spacing in the heading\n */\n size?: AccordionHeaderSize;\n};\n\nexport type AccordionHeaderState = ComponentState<AccordionHeaderSlots> &\n Required<Pick<AccordionHeaderProps, 'inline'>> &\n AccordionHeaderContextValue;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"AccordionItem.types.js","sourceRoot":"../src/","sources":["components/AccordionItem/AccordionItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AccordionItemContextValue = Omit<AccordionItemCommons, 'value'> & {\n open: boolean;\n onHeaderClick(ev: React.MouseEvent | React.KeyboardEvent): void;\n};\n\nexport type AccordionItemContextValues = {\n accordionItem: AccordionItemContextValue;\n};\n\nexport type AccordionItemSlots = {\n root: Slot<'div'>;\n};\n\ntype AccordionItemCommons = {\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 AccordionItemProps = ComponentProps<AccordionItemSlots> &\n Partial<AccordionItemCommons> &\n Pick<AccordionItemCommons, 'value'>;\n\nexport type AccordionItemValue = unknown;\n\nexport type AccordionItemState = ComponentState<AccordionItemSlots> & AccordionItemCommons & AccordionItemContextValue;\n"]}
1
+ {"version":3,"file":"AccordionItem.types.js","sourceRoot":"../src/","sources":["components/AccordionItem/AccordionItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AccordionItemContextValue = Required<Pick<AccordionItemProps, 'disabled'>> & {\n onHeaderClick(ev: React.MouseEvent | React.KeyboardEvent): void;\n open: boolean;\n};\n\nexport type AccordionItemContextValues = {\n accordionItem: AccordionItemContextValue;\n};\n\nexport type AccordionItemSlots = {\n root: Slot<'div'>;\n};\n\nexport type AccordionItemProps = ComponentProps<AccordionItemSlots> & {\n /**\n * Disables opening/closing of panel\n */\n disabled?: boolean;\n /**\n * required value that identifies this item inside an Accordion component\n */\n value: AccordionItemValue;\n};\n\nexport type AccordionItemValue = unknown;\n\nexport type AccordionItemState = ComponentState<AccordionItemSlots> & AccordionItemContextValue;\n"]}
@@ -20,7 +20,6 @@ export const useAccordionItem_unstable = (props, ref) => {
20
20
  }), [requestToggle, value]);
21
21
  return {
22
22
  open,
23
- value,
24
23
  disabled,
25
24
  onHeaderClick: onAccordionHeaderClick,
26
25
  components: {
@@ -1 +1 @@
1
- {"version":3,"sources":["components/AccordionItem/useAccordionItem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,kBAAT,QAAmC,kCAAnC;AACA,SAAS,gBAAT,QAAiC,+BAAjC;AAIA;;;;AAIG;;AACH,OAAO,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;AACtB,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA,QAAQ,GAAG;AAApB,MAA8B,KAApC;AAEA,QAAM,aAAa,GAAG,kBAAkB,CAAC,gBAAD,EAAmB,GAAG,IAAI,GAAG,CAAC,aAA9B,CAAxC;AACA,QAAM,IAAI,GAAG,kBAAkB,CAAC,gBAAD,EAAmB,GAAG,IAAI,GAAG,CAAC,SAAJ,CAAc,QAAd,CAAuB,KAAvB,CAA1B,CAA/B;AACA,QAAM,sBAAsB,GAAG,KAAK,CAAC,WAAN,CAAmB,EAAD,IAA8B,aAAa,CAAC,EAAD,EAAK;AAAE,IAAA;AAAF,GAAL,CAA7D,EAA8E,CAC3G,aAD2G,EAE3G,KAF2G,CAA9E,CAA/B;AAKA,SAAO;AACL,IAAA,IADK;AAEL,IAAA,KAFK;AAGL,IAAA,QAHK;AAIL,IAAA,aAAa,EAAE,sBAJV;AAKL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KALP;AAQL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GAAG,EAAE,GAD4B;AAEjC,SAAG;AAF8B,KAAR;AARtB,GAAP;AAaD,CA1BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { AccordionContext } from '../Accordion/AccordionContext';\nimport type { AccordionItemProps, AccordionItemState } from './AccordionItem.types';\nimport type { AccordionToggleEvent } from '../Accordion/Accordion.types';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionItem properties\n * @param ref - reference to root HTMLElement of AccordionItem\n */\nexport const useAccordionItem_unstable = (\n props: AccordionItemProps,\n ref: React.Ref<HTMLElement>,\n): AccordionItemState => {\n const { value, disabled = false } = props;\n\n const requestToggle = useContextSelector(AccordionContext, ctx => ctx.requestToggle);\n const open = useContextSelector(AccordionContext, ctx => ctx.openItems.includes(value));\n const onAccordionHeaderClick = React.useCallback((ev: AccordionToggleEvent) => requestToggle(ev, { value }), [\n requestToggle,\n value,\n ]);\n\n return {\n open,\n value,\n disabled,\n onHeaderClick: onAccordionHeaderClick,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: ref,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/AccordionItem/useAccordionItem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,kBAAT,QAAmC,kCAAnC;AACA,SAAS,gBAAT,QAAiC,+BAAjC;AAIA;;;;AAIG;;AACH,OAAO,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;AACtB,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA,QAAQ,GAAG;AAApB,MAA8B,KAApC;AAEA,QAAM,aAAa,GAAG,kBAAkB,CAAC,gBAAD,EAAmB,GAAG,IAAI,GAAG,CAAC,aAA9B,CAAxC;AACA,QAAM,IAAI,GAAG,kBAAkB,CAAC,gBAAD,EAAmB,GAAG,IAAI,GAAG,CAAC,SAAJ,CAAc,QAAd,CAAuB,KAAvB,CAA1B,CAA/B;AACA,QAAM,sBAAsB,GAAG,KAAK,CAAC,WAAN,CAAmB,EAAD,IAA8B,aAAa,CAAC,EAAD,EAAK;AAAE,IAAA;AAAF,GAAL,CAA7D,EAA8E,CAC3G,aAD2G,EAE3G,KAF2G,CAA9E,CAA/B;AAKA,SAAO;AACL,IAAA,IADK;AAEL,IAAA,QAFK;AAGL,IAAA,aAAa,EAAE,sBAHV;AAIL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KAJP;AAOL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GAAG,EAAE,GAD4B;AAEjC,SAAG;AAF8B,KAAR;AAPtB,GAAP;AAYD,CAzBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { AccordionContext } from '../Accordion/AccordionContext';\nimport type { AccordionItemProps, AccordionItemState } from './AccordionItem.types';\nimport type { AccordionToggleEvent } from '../Accordion/Accordion.types';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionItem properties\n * @param ref - reference to root HTMLElement of AccordionItem\n */\nexport const useAccordionItem_unstable = (\n props: AccordionItemProps,\n ref: React.Ref<HTMLElement>,\n): AccordionItemState => {\n const { value, disabled = false } = props;\n\n const requestToggle = useContextSelector(AccordionContext, ctx => ctx.requestToggle);\n const open = useContextSelector(AccordionContext, ctx => ctx.openItems.includes(value));\n const onAccordionHeaderClick = React.useCallback((ev: AccordionToggleEvent) => requestToggle(ev, { value }), [\n requestToggle,\n value,\n ]);\n\n return {\n open,\n disabled,\n onHeaderClick: onAccordionHeaderClick,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: ref,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
@@ -40,13 +40,9 @@ const useAccordion_unstable = (props, ref) => {
40
40
  });
41
41
  const requestToggle = react_utilities_1.useEventCallback((event, data) => {
42
42
  onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, data);
43
- setOpenItems(previousOpenItems => updateOpenItems(data.value, previousOpenItems, {
44
- collapsible,
45
- multiple
46
- }));
43
+ setOpenItems(previousOpenItems => updateOpenItems(data.value, previousOpenItems, multiple, collapsible));
47
44
  });
48
45
  return {
49
- multiple,
50
46
  collapsible,
51
47
  navigation,
52
48
  openItems,
@@ -84,14 +80,12 @@ function initializeUncontrolledOpenItems({
84
80
  * Updates the list of open indexes based on an index that changes
85
81
  * @param value - the index that will change
86
82
  * @param previousOpenItems - list of current open indexes
87
- * @param param2 - {multiple, collapsible}
83
+ * @param multiple - if Accordion support multiple Panels opened at the same time
84
+ * @param collapsible - if Accordion support multiple Panels closed at the same time
88
85
  */
89
86
 
90
87
 
91
- function updateOpenItems(value, previousOpenItems, {
92
- multiple,
93
- collapsible
94
- }) {
88
+ function updateOpenItems(value, previousOpenItems, multiple, collapsible) {
95
89
  if (multiple) {
96
90
  if (previousOpenItems.includes(value)) {
97
91
  if (previousOpenItems.length > 1 || collapsible) {
@@ -1 +1 @@
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 =>\n updateOpenItems(data.value, previousOpenItems, {\n collapsible,\n multiple,\n }),\n );\n });\n\n return {\n multiple,\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 param2 - {multiple, collapsible}\n */\nfunction updateOpenItems(\n value: AccordionItemValue,\n previousOpenItems: AccordionItemValue[],\n { multiple, collapsible }: Pick<AccordionState, 'multiple' | 'collapsible'>,\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
+ {"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/"}
@@ -31,7 +31,6 @@ const useAccordionItem_unstable = (props, ref) => {
31
31
  }), [requestToggle, value]);
32
32
  return {
33
33
  open,
34
- value,
35
34
  disabled,
36
35
  onHeaderClick: onAccordionHeaderClick,
37
36
  components: {
@@ -1 +1 @@
1
- {"version":3,"sources":["components/AccordionItem/useAccordionItem.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;AAIA;;;;AAIG;;;AACI,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;AACtB,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA,QAAQ,GAAG;AAApB,MAA8B,KAApC;AAEA,QAAM,aAAa,GAAG,wBAAA,CAAA,kBAAA,CAAmB,kBAAA,CAAA,gBAAnB,EAAqC,GAAG,IAAI,GAAG,CAAC,aAAhD,CAAtB;AACA,QAAM,IAAI,GAAG,wBAAA,CAAA,kBAAA,CAAmB,kBAAA,CAAA,gBAAnB,EAAqC,GAAG,IAAI,GAAG,CAAC,SAAJ,CAAc,QAAd,CAAuB,KAAvB,CAA5C,CAAb;AACA,QAAM,sBAAsB,GAAG,KAAK,CAAC,WAAN,CAAmB,EAAD,IAA8B,aAAa,CAAC,EAAD,EAAK;AAAE,IAAA;AAAF,GAAL,CAA7D,EAA8E,CAC3G,aAD2G,EAE3G,KAF2G,CAA9E,CAA/B;AAKA,SAAO;AACL,IAAA,IADK;AAEL,IAAA,KAFK;AAGL,IAAA,QAHK;AAIL,IAAA,aAAa,EAAE,sBAJV;AAKL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KALP;AAQL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GAAG,EAAE,GAD4B;AAEjC,SAAG;AAF8B,KAA7B;AARD,GAAP;AAaD,CA1BM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { AccordionContext } from '../Accordion/AccordionContext';\nimport type { AccordionItemProps, AccordionItemState } from './AccordionItem.types';\nimport type { AccordionToggleEvent } from '../Accordion/Accordion.types';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionItem properties\n * @param ref - reference to root HTMLElement of AccordionItem\n */\nexport const useAccordionItem_unstable = (\n props: AccordionItemProps,\n ref: React.Ref<HTMLElement>,\n): AccordionItemState => {\n const { value, disabled = false } = props;\n\n const requestToggle = useContextSelector(AccordionContext, ctx => ctx.requestToggle);\n const open = useContextSelector(AccordionContext, ctx => ctx.openItems.includes(value));\n const onAccordionHeaderClick = React.useCallback((ev: AccordionToggleEvent) => requestToggle(ev, { value }), [\n requestToggle,\n value,\n ]);\n\n return {\n open,\n value,\n disabled,\n onHeaderClick: onAccordionHeaderClick,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: ref,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/AccordionItem/useAccordionItem.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;AAIA;;;;AAIG;;;AACI,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;AACtB,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA,QAAQ,GAAG;AAApB,MAA8B,KAApC;AAEA,QAAM,aAAa,GAAG,wBAAA,CAAA,kBAAA,CAAmB,kBAAA,CAAA,gBAAnB,EAAqC,GAAG,IAAI,GAAG,CAAC,aAAhD,CAAtB;AACA,QAAM,IAAI,GAAG,wBAAA,CAAA,kBAAA,CAAmB,kBAAA,CAAA,gBAAnB,EAAqC,GAAG,IAAI,GAAG,CAAC,SAAJ,CAAc,QAAd,CAAuB,KAAvB,CAA5C,CAAb;AACA,QAAM,sBAAsB,GAAG,KAAK,CAAC,WAAN,CAAmB,EAAD,IAA8B,aAAa,CAAC,EAAD,EAAK;AAAE,IAAA;AAAF,GAAL,CAA7D,EAA8E,CAC3G,aAD2G,EAE3G,KAF2G,CAA9E,CAA/B;AAKA,SAAO;AACL,IAAA,IADK;AAEL,IAAA,QAFK;AAGL,IAAA,aAAa,EAAE,sBAHV;AAIL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KAJP;AAOL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GAAG,EAAE,GAD4B;AAEjC,SAAG;AAF8B,KAA7B;AAPD,GAAP;AAYD,CAzBM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { AccordionContext } from '../Accordion/AccordionContext';\nimport type { AccordionItemProps, AccordionItemState } from './AccordionItem.types';\nimport type { AccordionToggleEvent } from '../Accordion/Accordion.types';\n\n/**\n * Returns the props and state required to render the component\n * @param props - AccordionItem properties\n * @param ref - reference to root HTMLElement of AccordionItem\n */\nexport const useAccordionItem_unstable = (\n props: AccordionItemProps,\n ref: React.Ref<HTMLElement>,\n): AccordionItemState => {\n const { value, disabled = false } = props;\n\n const requestToggle = useContextSelector(AccordionContext, ctx => ctx.requestToggle);\n const open = useContextSelector(AccordionContext, ctx => ctx.openItems.includes(value));\n const onAccordionHeaderClick = React.useCallback((ev: AccordionToggleEvent) => requestToggle(ev, { value }), [\n requestToggle,\n value,\n ]);\n\n return {\n open,\n disabled,\n onHeaderClick: onAccordionHeaderClick,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: ref,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@fluentui/react-accordion",
3
- "version": "0.0.0-nightly-20220516-0419.1",
3
+ "version": "0.0.0-nightly-20220519-0420.1",
4
4
  "description": "Fluent UI accordion component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
7
- "typings": "lib/index.d.ts",
7
+ "typings": "dist/index.d.ts",
8
8
  "sideEffects": false,
9
9
  "repository": {
10
10
  "type": "git",
@@ -21,25 +21,25 @@
21
21
  "start": "yarn storybook",
22
22
  "test": "jest --passWithNoTests",
23
23
  "docs": "api-extractor run --config=config/api-extractor.local.json --local",
24
- "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-accordion/src && yarn docs",
25
- "storybook": "node ../../scripts/storybook/runner",
24
+ "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-accordion/src && yarn docs",
25
+ "storybook": "node ../../../scripts/storybook/runner",
26
26
  "type-check": "tsc -b tsconfig.json"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@fluentui/eslint-plugin": "*",
30
30
  "@fluentui/react-conformance": "*",
31
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220516-0419.1",
31
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220519-0420.1",
32
32
  "@fluentui/scripts": "^1.0.0"
33
33
  },
34
34
  "dependencies": {
35
- "@fluentui/react-aria": "0.0.0-nightly-20220516-0419.1",
36
- "@fluentui/react-context-selector": "0.0.0-nightly-20220516-0419.1",
37
- "@fluentui/react-shared-contexts": "0.0.0-nightly-20220516-0419.1",
35
+ "@fluentui/react-aria": "0.0.0-nightly-20220519-0420.1",
36
+ "@fluentui/react-context-selector": "0.0.0-nightly-20220519-0420.1",
37
+ "@fluentui/react-shared-contexts": "0.0.0-nightly-20220519-0420.1",
38
38
  "@fluentui/react-icons": "^2.0.166-rc.3",
39
39
  "@griffel/react": "1.0.4",
40
- "@fluentui/react-tabster": "0.0.0-nightly-20220516-0419.1",
41
- "@fluentui/react-theme": "0.0.0-nightly-20220516-0419.1",
42
- "@fluentui/react-utilities": "0.0.0-nightly-20220516-0419.1",
40
+ "@fluentui/react-tabster": "0.0.0-nightly-20220519-0420.1",
41
+ "@fluentui/react-theme": "0.0.0-nightly-20220519-0420.1",
42
+ "@fluentui/react-utilities": "0.0.0-nightly-20220519-0420.1",
43
43
  "tslib": "^2.1.0"
44
44
  },
45
45
  "peerDependencies": {
@@ -1 +0,0 @@
1
- export * from './components/Accordion/index';
@@ -1 +0,0 @@
1
- export * from './components/AccordionHeader/index';
@@ -1 +0,0 @@
1
- export * from './components/AccordionItem/index';
@@ -1 +0,0 @@
1
- export * from './components/AccordionPanel/index';
@@ -1,6 +0,0 @@
1
- import type { AccordionProps } from './Accordion.types';
2
- import type { ForwardRefComponent } from '@fluentui/react-utilities';
3
- /**
4
- * Define a styled Accordion, using the `useAccordion_unstable` and `useAccordionStyles_unstable` hooks.
5
- */
6
- export declare const Accordion: ForwardRefComponent<AccordionProps>;
@@ -1,54 +0,0 @@
1
- import * as React from 'react';
2
- import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
3
- import type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';
4
- export declare type AccordionIndex = number | number[];
5
- export declare type AccordionToggleEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;
6
- export declare type AccordionToggleEventHandler = (event: AccordionToggleEvent, data: AccordionToggleData) => void;
7
- declare type AccordionCommons = {
8
- /**
9
- * Indicates if keyboard navigation is available and gives two options,
10
- * linear or circular navigation
11
- */
12
- navigation?: 'linear' | 'circular';
13
- /**
14
- * Indicates if Accordion support multiple Panels opened at the same time
15
- */
16
- multiple: boolean;
17
- /**
18
- * Indicates if Accordion support multiple Panels closed at the same time
19
- */
20
- collapsible: boolean;
21
- };
22
- export declare type AccordionContextValue = Omit<AccordionCommons, 'multiple'> & {
23
- /**
24
- * The list of opened panels by index
25
- */
26
- openItems: AccordionItemValue[];
27
- /**
28
- * Callback used by AccordionItem to request a change on it's own opened state
29
- * Should be used to toggle AccordionItem
30
- */
31
- requestToggle: (event: AccordionToggleEvent, data: AccordionToggleData) => void;
32
- };
33
- export declare type AccordionContextValues = {
34
- accordion: AccordionContextValue;
35
- };
36
- export declare type AccordionSlots = {
37
- root: Slot<'div'>;
38
- };
39
- export declare type AccordionToggleData = {
40
- value: AccordionItemValue;
41
- };
42
- export declare type AccordionProps = ComponentProps<AccordionSlots> & Partial<AccordionCommons> & {
43
- /**
44
- * Controls the state of the panel
45
- */
46
- openItems?: AccordionItemValue | AccordionItemValue[];
47
- /**
48
- * Default value for the uncontrolled state of the panel
49
- */
50
- defaultOpenItems?: AccordionItemValue | AccordionItemValue[];
51
- onToggle?: AccordionToggleEventHandler;
52
- };
53
- export declare type AccordionState = ComponentState<AccordionSlots> & AccordionCommons & AccordionContextValue;
54
- export {};
@@ -1,3 +0,0 @@
1
- import type { Context } from '@fluentui/react-context-selector';
2
- import type { AccordionContextValue } from './Accordion.types';
3
- export declare const AccordionContext: Context<AccordionContextValue>;
@@ -1,7 +0,0 @@
1
- export * from './Accordion';
2
- export * from './Accordion.types';
3
- export * from './renderAccordion';
4
- export * from './useAccordion';
5
- export * from './useAccordionStyles';
6
- export * from './useAccordionContextValues';
7
- export * from './AccordionContext';
@@ -1,5 +0,0 @@
1
- import type { AccordionState, AccordionContextValues } from './Accordion.types';
2
- /**
3
- * Function that renders the final JSX of the component
4
- */
5
- export declare const renderAccordion_unstable: (state: AccordionState, contextValues: AccordionContextValues) => JSX.Element;
@@ -1,8 +0,0 @@
1
- import * as React from 'react';
2
- import type { AccordionProps, AccordionState } from './Accordion.types';
3
- /**
4
- * Returns the props and state required to render the component
5
- * @param props - Accordion properties
6
- * @param ref - reference to root HTMLElement of Accordion
7
- */
8
- export declare const useAccordion_unstable: (props: AccordionProps, ref: React.Ref<HTMLElement>) => AccordionState;
@@ -1,2 +0,0 @@
1
- import type { AccordionContextValues, AccordionState } from './Accordion.types';
2
- export declare function useAccordionContextValues_unstable(state: AccordionState): AccordionContextValues;
@@ -1,8 +0,0 @@
1
- import type { SlotClassNames } from '@fluentui/react-utilities';
2
- import type { AccordionSlots, AccordionState } from './Accordion.types';
3
- /**
4
- * @deprecated Use `accordionClassNames.root` instead.
5
- */
6
- export declare const accordionClassName = "fui-Accordion";
7
- export declare const accordionClassNames: SlotClassNames<AccordionSlots>;
8
- export declare const useAccordionStyles_unstable: (state: AccordionState) => AccordionState;
@@ -1,7 +0,0 @@
1
- import type { AccordionHeaderProps } from './AccordionHeader.types';
2
- import type { ForwardRefComponent } from '@fluentui/react-utilities';
3
- /**
4
- * Define a styled AccordionHeader, using the `useAccordionHeader_unstable` and `useAccordionHeaderStyles_unstable`
5
- * hooks.
6
- */
7
- export declare const AccordionHeader: ForwardRefComponent<AccordionHeaderProps>;
@@ -1,48 +0,0 @@
1
- import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
2
- import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
3
- export declare type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';
4
- export declare type AccordionHeaderExpandIconPosition = 'start' | 'end';
5
- export declare type AccordionHeaderContextValue = {
6
- disabled: boolean;
7
- open: boolean;
8
- expandIconPosition: AccordionHeaderExpandIconPosition;
9
- size: AccordionHeaderSize;
10
- };
11
- export declare type AccordionHeaderContextValues = {
12
- accordionHeader: AccordionHeaderContextValue;
13
- };
14
- export declare type AccordionHeaderSlots = {
15
- /**
16
- * The element wrapping the button. By default this is a div, but can be a heading.
17
- */
18
- root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
19
- /**
20
- * The component to be used as button in heading
21
- */
22
- button: NonNullable<Slot<ARIAButtonSlotProps>>;
23
- /**
24
- * Expand icon slot rendered before (or after) children content in heading
25
- */
26
- expandIcon: Slot<'span'>;
27
- /**
28
- * Expand icon slot rendered before (or after) children content in heading
29
- */
30
- icon?: Slot<'div'>;
31
- };
32
- declare type AccordionHeaderCommons = {
33
- /**
34
- * Size of spacing in the heading
35
- */
36
- size: AccordionHeaderSize;
37
- /**
38
- * The position of the expand icon slot in heading
39
- */
40
- expandIconPosition: AccordionHeaderExpandIconPosition;
41
- /**
42
- * Indicates if the AccordionHeader should be rendered inline
43
- */
44
- inline: boolean;
45
- };
46
- export declare type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>> & Partial<AccordionHeaderCommons>;
47
- export declare type AccordionHeaderState = ComponentState<AccordionHeaderSlots> & AccordionHeaderCommons & AccordionHeaderContextValue;
48
- export {};