@khanacademy/wonder-blocks-accordion 3.1.9 → 3.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -0
- package/dist/es/index.js +5 -415
- package/dist/index.js +5 -417
- package/package.json +5 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-accordion
|
|
2
2
|
|
|
3
|
+
## 3.1.11
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [b9e4946]
|
|
8
|
+
- Updated dependencies [b9e4946]
|
|
9
|
+
- @khanacademy/wonder-blocks-tokens@10.0.0
|
|
10
|
+
- @khanacademy/wonder-blocks-typography@3.2.0
|
|
11
|
+
- @khanacademy/wonder-blocks-clickable@7.0.4
|
|
12
|
+
- @khanacademy/wonder-blocks-core@12.2.1
|
|
13
|
+
- @khanacademy/wonder-blocks-icon@5.1.3
|
|
14
|
+
|
|
15
|
+
## 3.1.10
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- Updated dependencies [2656fd4]
|
|
20
|
+
- Updated dependencies [6018552]
|
|
21
|
+
- Updated dependencies [7bbf311]
|
|
22
|
+
- Updated dependencies [7f79943]
|
|
23
|
+
- @khanacademy/wonder-blocks-tokens@9.0.0
|
|
24
|
+
- @khanacademy/wonder-blocks-clickable@7.0.3
|
|
25
|
+
|
|
3
26
|
## 3.1.9
|
|
4
27
|
|
|
5
28
|
### Patch Changes
|
package/dist/es/index.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
2
|
import * as React from 'react';
|
|
4
3
|
import { useId } from 'react';
|
|
5
4
|
import { StyleSheet } from 'aphrodite';
|
|
@@ -10,421 +9,12 @@ import caretDown from '@phosphor-icons/core/bold/caret-down-bold.svg';
|
|
|
10
9
|
import Clickable from '@khanacademy/wonder-blocks-clickable';
|
|
11
10
|
import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
|
|
12
11
|
|
|
13
|
-
const
|
|
14
|
-
const StyledUl = addStyle("ul");
|
|
15
|
-
const LANDMARK_PROLIFERATION_THRESHOLD = 6;
|
|
16
|
-
const Accordion = React.forwardRef(function Accordion(props, ref) {
|
|
17
|
-
const {
|
|
18
|
-
children,
|
|
19
|
-
id,
|
|
20
|
-
initialExpandedIndex,
|
|
21
|
-
allowMultipleExpanded = true,
|
|
22
|
-
caretPosition,
|
|
23
|
-
cornerKind = "rounded",
|
|
24
|
-
animated,
|
|
25
|
-
style
|
|
26
|
-
} = props,
|
|
27
|
-
ariaProps = _objectWithoutPropertiesLoose(props, _excluded$1);
|
|
28
|
-
const startingArray = Array(children.length).fill(false);
|
|
29
|
-
if (initialExpandedIndex !== undefined) {
|
|
30
|
-
startingArray[initialExpandedIndex] = true;
|
|
31
|
-
}
|
|
32
|
-
const [sectionsOpened, setSectionsOpened] = React.useState(startingArray);
|
|
33
|
-
const childRefs = Array(children.length).fill(null);
|
|
34
|
-
const sectionsAreRegions = children.length <= LANDMARK_PROLIFERATION_THRESHOLD;
|
|
35
|
-
const handleSectionClick = (index, childOnToggle) => {
|
|
36
|
-
const newSectionsOpened = allowMultipleExpanded ? [...sectionsOpened] : Array(children.length).fill(false);
|
|
37
|
-
const newOpenedValueAtIndex = !sectionsOpened[index];
|
|
38
|
-
newSectionsOpened[index] = newOpenedValueAtIndex;
|
|
39
|
-
setSectionsOpened(newSectionsOpened);
|
|
40
|
-
if (childOnToggle) {
|
|
41
|
-
childOnToggle(newOpenedValueAtIndex);
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
const handleKeyDown = event => {
|
|
45
|
-
var _previousChildRef$cur, _nextChildRef$current, _firstChildRef$curren, _lastChildRef$current;
|
|
46
|
-
const currentlyFocusedHeaderIndex = childRefs.findIndex(ref => ref.current === document.activeElement);
|
|
47
|
-
if (currentlyFocusedHeaderIndex === -1) {
|
|
48
|
-
return;
|
|
49
|
-
}
|
|
50
|
-
switch (event.key) {
|
|
51
|
-
case "ArrowUp":
|
|
52
|
-
event.preventDefault();
|
|
53
|
-
const previousSectionIndex = (currentlyFocusedHeaderIndex + children.length - 1) % children.length;
|
|
54
|
-
const previousChildRef = childRefs[previousSectionIndex];
|
|
55
|
-
(_previousChildRef$cur = previousChildRef.current) == null || _previousChildRef$cur.focus();
|
|
56
|
-
break;
|
|
57
|
-
case "ArrowDown":
|
|
58
|
-
event.preventDefault();
|
|
59
|
-
const nextSectionIndex = (currentlyFocusedHeaderIndex + 1) % children.length;
|
|
60
|
-
const nextChildRef = childRefs[nextSectionIndex];
|
|
61
|
-
(_nextChildRef$current = nextChildRef.current) == null || _nextChildRef$current.focus();
|
|
62
|
-
break;
|
|
63
|
-
case "Home":
|
|
64
|
-
event.preventDefault();
|
|
65
|
-
const firstChildRef = childRefs[0];
|
|
66
|
-
(_firstChildRef$curren = firstChildRef.current) == null || _firstChildRef$curren.focus();
|
|
67
|
-
break;
|
|
68
|
-
case "End":
|
|
69
|
-
event.preventDefault();
|
|
70
|
-
const lastChildRef = childRefs[children.length - 1];
|
|
71
|
-
(_lastChildRef$current = lastChildRef.current) == null || _lastChildRef$current.focus();
|
|
72
|
-
break;
|
|
73
|
-
}
|
|
74
|
-
};
|
|
75
|
-
return (React.createElement(StyledUl, _extends({
|
|
76
|
-
style: [styles$2.wrapper, style],
|
|
77
|
-
onKeyDown: handleKeyDown
|
|
78
|
-
}, ariaProps, {
|
|
79
|
-
ref: ref
|
|
80
|
-
}), children.map((child, index) => {
|
|
81
|
-
const {
|
|
82
|
-
caretPosition: childCaretPosition,
|
|
83
|
-
cornerKind: childCornerKind,
|
|
84
|
-
onToggle: childOnToggle,
|
|
85
|
-
animated: childAnimated
|
|
86
|
-
} = child.props;
|
|
87
|
-
const childRef = React.createRef();
|
|
88
|
-
childRefs[index] = childRef;
|
|
89
|
-
const isFirstChild = index === 0;
|
|
90
|
-
const isLastChild = index === children.length - 1;
|
|
91
|
-
return (React.createElement("li", {
|
|
92
|
-
key: index,
|
|
93
|
-
id: id
|
|
94
|
-
}, React.cloneElement(child, {
|
|
95
|
-
animated: childAnimated != null ? childAnimated : animated,
|
|
96
|
-
caretPosition: childCaretPosition != null ? childCaretPosition : caretPosition,
|
|
97
|
-
cornerKind: childCornerKind != null ? childCornerKind : cornerKind,
|
|
98
|
-
expanded: sectionsOpened[index],
|
|
99
|
-
onToggle: () => handleSectionClick(index, childOnToggle),
|
|
100
|
-
isFirstSection: isFirstChild,
|
|
101
|
-
isLastSection: isLastChild,
|
|
102
|
-
isRegion: sectionsAreRegions,
|
|
103
|
-
ref: childRef
|
|
104
|
-
}))
|
|
105
|
-
);
|
|
106
|
-
}))
|
|
107
|
-
);
|
|
108
|
-
});
|
|
109
|
-
const styles$2 = StyleSheet.create({
|
|
110
|
-
wrapper: {
|
|
111
|
-
boxSizing: "border-box",
|
|
112
|
-
listStyle: "none",
|
|
113
|
-
padding: 0,
|
|
114
|
-
width: "100%"
|
|
115
|
-
}
|
|
116
|
-
});
|
|
12
|
+
const StyledUl=addStyle("ul");const LANDMARK_PROLIFERATION_THRESHOLD=6;const Accordion=React.forwardRef(function Accordion(props,ref){const{children,id,initialExpandedIndex,allowMultipleExpanded=true,caretPosition,cornerKind="rounded",animated,style,...ariaProps}=props;const startingArray=Array(children.length).fill(false);if(initialExpandedIndex!==undefined){startingArray[initialExpandedIndex]=true;}const[sectionsOpened,setSectionsOpened]=React.useState(startingArray);const childRefs=Array(children.length).fill(null);const sectionsAreRegions=children.length<=LANDMARK_PROLIFERATION_THRESHOLD;const handleSectionClick=(index,childOnToggle)=>{const newSectionsOpened=allowMultipleExpanded?[...sectionsOpened]:Array(children.length).fill(false);const newOpenedValueAtIndex=!sectionsOpened[index];newSectionsOpened[index]=newOpenedValueAtIndex;setSectionsOpened(newSectionsOpened);if(childOnToggle){childOnToggle(newOpenedValueAtIndex);}};const handleKeyDown=event=>{const currentlyFocusedHeaderIndex=childRefs.findIndex(ref=>ref.current===document.activeElement);if(currentlyFocusedHeaderIndex===-1){return}switch(event.key){case"ArrowUp":event.preventDefault();const previousSectionIndex=(currentlyFocusedHeaderIndex+children.length-1)%children.length;const previousChildRef=childRefs[previousSectionIndex];previousChildRef.current?.focus();break;case"ArrowDown":event.preventDefault();const nextSectionIndex=(currentlyFocusedHeaderIndex+1)%children.length;const nextChildRef=childRefs[nextSectionIndex];nextChildRef.current?.focus();break;case"Home":event.preventDefault();const firstChildRef=childRefs[0];firstChildRef.current?.focus();break;case"End":event.preventDefault();const lastChildRef=childRefs[children.length-1];lastChildRef.current?.focus();break}};return jsx(StyledUl,{style:[styles$2.wrapper,style],onKeyDown:handleKeyDown,...ariaProps,ref:ref,children:children.map((child,index)=>{const{caretPosition:childCaretPosition,cornerKind:childCornerKind,onToggle:childOnToggle,animated:childAnimated}=child.props;const childRef=React.createRef();childRefs[index]=childRef;const isFirstChild=index===0;const isLastChild=index===children.length-1;return jsx("li",{id:id,children:React.cloneElement(child,{animated:childAnimated??animated,caretPosition:childCaretPosition??caretPosition,cornerKind:childCornerKind??cornerKind,expanded:sectionsOpened[index],onToggle:()=>handleSectionClick(index,childOnToggle),isFirstSection:isFirstChild,isLastSection:isLastChild,isRegion:sectionsAreRegions,ref:childRef})},index)})})});const styles$2=StyleSheet.create({wrapper:{boxSizing:"border-box",listStyle:"none",padding:0,width:"100%"}});
|
|
117
13
|
|
|
118
|
-
function getRoundedValuesForHeader(cornerKind,
|
|
119
|
-
switch (cornerKind) {
|
|
120
|
-
case "rounded-per-section":
|
|
121
|
-
return {
|
|
122
|
-
roundedTop: true,
|
|
123
|
-
roundedBottom: !expanded
|
|
124
|
-
};
|
|
125
|
-
case "rounded":
|
|
126
|
-
return {
|
|
127
|
-
roundedTop: isFirstSection,
|
|
128
|
-
roundedBottom: isLastSection && !expanded
|
|
129
|
-
};
|
|
130
|
-
default:
|
|
131
|
-
return {
|
|
132
|
-
roundedTop: false,
|
|
133
|
-
roundedBottom: false
|
|
134
|
-
};
|
|
135
|
-
}
|
|
136
|
-
}
|
|
14
|
+
function getRoundedValuesForHeader(cornerKind,isFirstSection,isLastSection,expanded){switch(cornerKind){case"rounded-per-section":return {roundedTop:true,roundedBottom:!expanded};case"rounded":return {roundedTop:isFirstSection,roundedBottom:isLastSection&&!expanded};default:return {roundedTop:false,roundedBottom:false}}}
|
|
137
15
|
|
|
138
|
-
const AccordionSectionHeader
|
|
139
|
-
const {
|
|
140
|
-
id,
|
|
141
|
-
header,
|
|
142
|
-
caretPosition,
|
|
143
|
-
cornerKind,
|
|
144
|
-
collapsible = true,
|
|
145
|
-
expanded,
|
|
146
|
-
animated,
|
|
147
|
-
onClick,
|
|
148
|
-
sectionContentUniqueId,
|
|
149
|
-
headerStyle,
|
|
150
|
-
tag = "h2",
|
|
151
|
-
testId,
|
|
152
|
-
isFirstSection,
|
|
153
|
-
isLastSection
|
|
154
|
-
} = props;
|
|
155
|
-
const headerIsString = typeof header === "string";
|
|
156
|
-
const {
|
|
157
|
-
roundedTop,
|
|
158
|
-
roundedBottom
|
|
159
|
-
} = getRoundedValuesForHeader(cornerKind, isFirstSection, isLastSection, expanded);
|
|
160
|
-
return React.createElement(HeadingSmall, {
|
|
161
|
-
tag: tag,
|
|
162
|
-
style: styles$1.heading
|
|
163
|
-
}, React.createElement(Clickable, {
|
|
164
|
-
id: id,
|
|
165
|
-
"aria-expanded": expanded,
|
|
166
|
-
"aria-controls": sectionContentUniqueId,
|
|
167
|
-
onClick: onClick,
|
|
168
|
-
disabled: !collapsible,
|
|
169
|
-
testId: testId ? `${testId}-header` : undefined,
|
|
170
|
-
style: [styles$1.headerWrapper, animated && styles$1.headerWrapperWithAnimation, caretPosition === "start" && styles$1.headerWrapperCaretStart, roundedTop && styles$1.roundedTop, roundedBottom && styles$1.roundedBottom, headerStyle, !collapsible && styles$1.disabled],
|
|
171
|
-
ref: ref
|
|
172
|
-
}, () => React.createElement(React.Fragment, null, React.createElement(View, {
|
|
173
|
-
style: [styles$1.headerContent, headerIsString && styles$1.headerString]
|
|
174
|
-
}, headerIsString ? React.createElement(View, {
|
|
175
|
-
style: [caretPosition === "end" ? styles$1.headerStringCaretEnd : styles$1.headerStringCaretStart]
|
|
176
|
-
}, header) : header), collapsible && React.createElement(PhosphorIcon, {
|
|
177
|
-
icon: caretDown,
|
|
178
|
-
color: semanticColor.icon.primary,
|
|
179
|
-
size: "small",
|
|
180
|
-
style: [animated && styles$1.iconWithAnimation, caretPosition === "start" ? styles$1.iconStart : styles$1.iconEnd, expanded && styles$1.iconExpanded],
|
|
181
|
-
testId: testId ? `${testId}-caret-icon` : undefined
|
|
182
|
-
}))));
|
|
183
|
-
});
|
|
184
|
-
const INNER_BORDER_RADIUS = spacing.small_12 - 1;
|
|
185
|
-
const ANIMATION_LENGTH = "300ms";
|
|
186
|
-
const styles$1 = StyleSheet.create({
|
|
187
|
-
heading: {
|
|
188
|
-
minWidth: 0,
|
|
189
|
-
marginTop: 0
|
|
190
|
-
},
|
|
191
|
-
headerWrapper: {
|
|
192
|
-
display: "flex",
|
|
193
|
-
flexDirection: "row",
|
|
194
|
-
alignItems: "center",
|
|
195
|
-
overflow: "hidden",
|
|
196
|
-
minWidth: "auto",
|
|
197
|
-
width: "100%",
|
|
198
|
-
position: "relative",
|
|
199
|
-
zIndex: 1,
|
|
200
|
-
":active": {
|
|
201
|
-
outline: `2px solid ${semanticColor.action.secondary.progressive.press.border}`
|
|
202
|
-
},
|
|
203
|
-
":hover": {
|
|
204
|
-
outline: `2px solid ${semanticColor.action.secondary.progressive.hover.border}`
|
|
205
|
-
},
|
|
206
|
-
":focus-visible": {
|
|
207
|
-
outline: `2px solid ${semanticColor.focus.outer}`
|
|
208
|
-
}
|
|
209
|
-
},
|
|
210
|
-
headerWrapperWithAnimation: {
|
|
211
|
-
transition: `border-radius ${ANIMATION_LENGTH}`
|
|
212
|
-
},
|
|
213
|
-
headerWrapperCaretStart: {
|
|
214
|
-
flexDirection: "row-reverse"
|
|
215
|
-
},
|
|
216
|
-
roundedTop: {
|
|
217
|
-
borderStartStartRadius: INNER_BORDER_RADIUS,
|
|
218
|
-
borderStartEndRadius: INNER_BORDER_RADIUS
|
|
219
|
-
},
|
|
220
|
-
roundedBottom: {
|
|
221
|
-
borderEndStartRadius: INNER_BORDER_RADIUS,
|
|
222
|
-
borderEndEndRadius: INNER_BORDER_RADIUS
|
|
223
|
-
},
|
|
224
|
-
headerContent: {
|
|
225
|
-
flexGrow: 1,
|
|
226
|
-
textAlign: "start"
|
|
227
|
-
},
|
|
228
|
-
headerString: {
|
|
229
|
-
paddingTop: spacing.medium_16,
|
|
230
|
-
paddingBottom: spacing.medium_16
|
|
231
|
-
},
|
|
232
|
-
headerStringCaretEnd: {
|
|
233
|
-
paddingInlineEnd: spacing.small_12,
|
|
234
|
-
paddingInlineStart: spacing.medium_16
|
|
235
|
-
},
|
|
236
|
-
headerStringCaretStart: {
|
|
237
|
-
paddingInlineEnd: spacing.medium_16,
|
|
238
|
-
paddingInlineStart: spacing.small_12
|
|
239
|
-
},
|
|
240
|
-
iconWithAnimation: {
|
|
241
|
-
transition: `transform ${ANIMATION_LENGTH}`
|
|
242
|
-
},
|
|
243
|
-
iconExpanded: {
|
|
244
|
-
transform: "rotate(180deg)"
|
|
245
|
-
},
|
|
246
|
-
iconStart: {
|
|
247
|
-
marginInlineStart: spacing.medium_16
|
|
248
|
-
},
|
|
249
|
-
iconEnd: {
|
|
250
|
-
marginInlineEnd: spacing.medium_16
|
|
251
|
-
},
|
|
252
|
-
disabled: {
|
|
253
|
-
pointerEvents: "none",
|
|
254
|
-
color: "inherit",
|
|
255
|
-
":focus-visible": {
|
|
256
|
-
outline: `2px solid ${semanticColor.focus.outer}`
|
|
257
|
-
}
|
|
258
|
-
}
|
|
259
|
-
});
|
|
16
|
+
const AccordionSectionHeader=React.forwardRef(function AccordionSectionHeader(props,ref){const{id,header,caretPosition,cornerKind,collapsible=true,expanded,animated,onClick,sectionContentUniqueId,headerStyle,tag="h2",testId,isFirstSection,isLastSection}=props;const headerIsString=typeof header==="string";const{roundedTop,roundedBottom}=getRoundedValuesForHeader(cornerKind,isFirstSection,isLastSection,expanded);return jsx(HeadingSmall,{tag:tag,style:styles$1.heading,children:jsx(Clickable,{id:id,"aria-expanded":expanded,"aria-controls":sectionContentUniqueId,onClick:onClick,disabled:!collapsible,testId:testId?`${testId}-header`:undefined,style:[styles$1.headerWrapper,animated&&styles$1.headerWrapperWithAnimation,caretPosition==="start"&&styles$1.headerWrapperCaretStart,roundedTop&&styles$1.roundedTop,roundedBottom&&styles$1.roundedBottom,headerStyle,!collapsible&&styles$1.disabled],ref:ref,children:()=>jsxs(Fragment,{children:[jsx(View,{style:[styles$1.headerContent,headerIsString&&styles$1.headerString],children:headerIsString?jsx(View,{style:[caretPosition==="end"?styles$1.headerStringCaretEnd:styles$1.headerStringCaretStart],children:header}):header}),collapsible&&jsx(PhosphorIcon,{icon:caretDown,color:semanticColor.icon.primary,size:"small",style:[animated&&styles$1.iconWithAnimation,caretPosition==="start"?styles$1.iconStart:styles$1.iconEnd,expanded&&styles$1.iconExpanded],testId:testId?`${testId}-caret-icon`:undefined})]})})})});const INNER_BORDER_RADIUS=spacing.small_12-1;const ANIMATION_LENGTH="300ms";const styles$1=StyleSheet.create({heading:{minWidth:0,marginTop:0},headerWrapper:{display:"flex",flexDirection:"row",alignItems:"center",overflow:"hidden",minWidth:"auto",width:"100%",position:"relative",zIndex:1,":active":{outline:`2px solid ${semanticColor.action.secondary.progressive.press.border}`},":hover":{outline:`2px solid ${semanticColor.action.secondary.progressive.hover.border}`},":focus-visible":{outline:`2px solid ${semanticColor.focus.outer}`}},headerWrapperWithAnimation:{transition:`border-radius ${ANIMATION_LENGTH}`},headerWrapperCaretStart:{flexDirection:"row-reverse"},roundedTop:{borderStartStartRadius:INNER_BORDER_RADIUS,borderStartEndRadius:INNER_BORDER_RADIUS},roundedBottom:{borderEndStartRadius:INNER_BORDER_RADIUS,borderEndEndRadius:INNER_BORDER_RADIUS},headerContent:{flexGrow:1,textAlign:"start"},headerString:{paddingTop:spacing.medium_16,paddingBottom:spacing.medium_16},headerStringCaretEnd:{paddingInlineEnd:spacing.small_12,paddingInlineStart:spacing.medium_16},headerStringCaretStart:{paddingInlineEnd:spacing.medium_16,paddingInlineStart:spacing.small_12},iconWithAnimation:{transition:`transform ${ANIMATION_LENGTH}`},iconExpanded:{transform:"rotate(180deg)"},iconStart:{marginInlineStart:spacing.medium_16},iconEnd:{marginInlineEnd:spacing.medium_16},disabled:{pointerEvents:"none",color:"inherit",":focus-visible":{outline:`2px solid ${semanticColor.focus.outer}`}}});
|
|
260
17
|
|
|
261
|
-
const
|
|
262
|
-
const AccordionSection = React.forwardRef(function AccordionSection(props, ref) {
|
|
263
|
-
const {
|
|
264
|
-
children,
|
|
265
|
-
id,
|
|
266
|
-
header,
|
|
267
|
-
collapsible,
|
|
268
|
-
expanded,
|
|
269
|
-
animated = false,
|
|
270
|
-
onToggle,
|
|
271
|
-
caretPosition = "end",
|
|
272
|
-
cornerKind = "rounded",
|
|
273
|
-
style,
|
|
274
|
-
headerStyle,
|
|
275
|
-
tag,
|
|
276
|
-
testId,
|
|
277
|
-
isFirstSection = true,
|
|
278
|
-
isLastSection = true,
|
|
279
|
-
isRegion = true
|
|
280
|
-
} = props,
|
|
281
|
-
ariaProps = _objectWithoutPropertiesLoose(props, _excluded);
|
|
282
|
-
const [internalExpanded, setInternalExpanded] = React.useState(expanded != null ? expanded : false);
|
|
283
|
-
const controlledMode = expanded !== undefined && onToggle;
|
|
284
|
-
const uniqueSectionId = useId();
|
|
285
|
-
const sectionId = id != null ? id : uniqueSectionId;
|
|
286
|
-
const uniqueHeaderId = useId();
|
|
287
|
-
const headerId = id ? `${id}-header` : uniqueHeaderId;
|
|
288
|
-
const sectionContentUniqueId = useId();
|
|
289
|
-
const sectionStyles = _generateStyles(cornerKind, isFirstSection, isLastSection);
|
|
290
|
-
const handleClick = () => {
|
|
291
|
-
if (controlledMode) {
|
|
292
|
-
onToggle(!expanded);
|
|
293
|
-
} else {
|
|
294
|
-
setInternalExpanded(!internalExpanded);
|
|
295
|
-
if (onToggle) {
|
|
296
|
-
onToggle(!internalExpanded);
|
|
297
|
-
}
|
|
298
|
-
}
|
|
299
|
-
};
|
|
300
|
-
let expandedState;
|
|
301
|
-
if (collapsible === false) {
|
|
302
|
-
expandedState = true;
|
|
303
|
-
} else {
|
|
304
|
-
expandedState = controlledMode ? expanded : internalExpanded;
|
|
305
|
-
}
|
|
306
|
-
return React.createElement(View, _extends({
|
|
307
|
-
id: sectionId,
|
|
308
|
-
style: [styles.wrapper, animated && styles.wrapperWithAnimation, sectionStyles.wrapper, expandedState ? styles.wrapperExpanded : styles.wrapperCollapsed, style],
|
|
309
|
-
testId: testId
|
|
310
|
-
}, ariaProps), React.createElement(AccordionSectionHeader, {
|
|
311
|
-
id: headerId,
|
|
312
|
-
header: header,
|
|
313
|
-
caretPosition: caretPosition,
|
|
314
|
-
cornerKind: cornerKind,
|
|
315
|
-
collapsible: collapsible,
|
|
316
|
-
expanded: expandedState,
|
|
317
|
-
animated: animated,
|
|
318
|
-
onClick: handleClick,
|
|
319
|
-
sectionContentUniqueId: sectionContentUniqueId,
|
|
320
|
-
headerStyle: headerStyle,
|
|
321
|
-
tag: tag,
|
|
322
|
-
testId: testId,
|
|
323
|
-
isFirstSection: isFirstSection,
|
|
324
|
-
isLastSection: isLastSection,
|
|
325
|
-
ref: ref
|
|
326
|
-
}), React.createElement(View, {
|
|
327
|
-
id: sectionContentUniqueId,
|
|
328
|
-
role: isRegion ? "region" : undefined,
|
|
329
|
-
"aria-labelledby": headerId,
|
|
330
|
-
style: [styles.contentWrapper, expandedState ? styles.contentWrapperExpanded : styles.conentWrapperCollapsed, sectionStyles.contentWrapper],
|
|
331
|
-
testId: testId ? `${testId}-content-panel` : undefined
|
|
332
|
-
}, typeof children === "string" ? React.createElement(Body, {
|
|
333
|
-
style: styles.stringContent
|
|
334
|
-
}, children) : children));
|
|
335
|
-
});
|
|
336
|
-
const styles = StyleSheet.create({
|
|
337
|
-
wrapper: {
|
|
338
|
-
display: "grid",
|
|
339
|
-
position: "static",
|
|
340
|
-
boxSizing: "border-box",
|
|
341
|
-
backgroundColor: semanticColor.surface.primary
|
|
342
|
-
},
|
|
343
|
-
wrapperWithAnimation: {
|
|
344
|
-
transition: "grid-template-rows 300ms"
|
|
345
|
-
},
|
|
346
|
-
wrapperCollapsed: {
|
|
347
|
-
gridTemplateRows: "min-content 0fr"
|
|
348
|
-
},
|
|
349
|
-
wrapperExpanded: {
|
|
350
|
-
gridTemplateRows: "min-content 1fr"
|
|
351
|
-
},
|
|
352
|
-
contentWrapper: {
|
|
353
|
-
overflow: "hidden"
|
|
354
|
-
},
|
|
355
|
-
conentWrapperCollapsed: {
|
|
356
|
-
visibility: "hidden"
|
|
357
|
-
},
|
|
358
|
-
contentWrapperExpanded: {
|
|
359
|
-
visibility: "visible"
|
|
360
|
-
},
|
|
361
|
-
stringContent: {
|
|
362
|
-
padding: spacing.medium_16
|
|
363
|
-
}
|
|
364
|
-
});
|
|
365
|
-
const cornerStyles = {};
|
|
366
|
-
const _generateStyles = (cornerKind, isFirstSection, isLastSection) => {
|
|
367
|
-
const sectionType = `${cornerKind}-${isFirstSection.toString()}-${isLastSection.toString()}`;
|
|
368
|
-
if (cornerStyles[sectionType]) {
|
|
369
|
-
return cornerStyles[sectionType];
|
|
370
|
-
}
|
|
371
|
-
let wrapperStyle = Object.freeze({});
|
|
372
|
-
let contentWrapperStyle = Object.freeze({});
|
|
373
|
-
let firstSectionStyle = Object.freeze({});
|
|
374
|
-
let lastSectionStyle = Object.freeze({});
|
|
375
|
-
const borderStyle = `1px solid ${semanticColor.border.primary}`;
|
|
376
|
-
if (cornerKind === "square") {
|
|
377
|
-
wrapperStyle = {
|
|
378
|
-
border: borderStyle,
|
|
379
|
-
borderBottom: "none",
|
|
380
|
-
borderRadius: border.radius.radius_0
|
|
381
|
-
};
|
|
382
|
-
if (isLastSection) {
|
|
383
|
-
lastSectionStyle = {
|
|
384
|
-
borderBottom: borderStyle
|
|
385
|
-
};
|
|
386
|
-
}
|
|
387
|
-
}
|
|
388
|
-
if (cornerKind === "rounded") {
|
|
389
|
-
wrapperStyle = {
|
|
390
|
-
border: borderStyle,
|
|
391
|
-
borderBottom: "none"
|
|
392
|
-
};
|
|
393
|
-
if (isFirstSection) {
|
|
394
|
-
firstSectionStyle = {
|
|
395
|
-
borderStartStartRadius: spacing.small_12,
|
|
396
|
-
borderStartEndRadius: spacing.small_12
|
|
397
|
-
};
|
|
398
|
-
}
|
|
399
|
-
if (isLastSection) {
|
|
400
|
-
lastSectionStyle = {
|
|
401
|
-
borderBottom: borderStyle,
|
|
402
|
-
borderEndStartRadius: spacing.small_12,
|
|
403
|
-
borderEndEndRadius: spacing.small_12
|
|
404
|
-
};
|
|
405
|
-
contentWrapperStyle = {
|
|
406
|
-
borderEndEndRadius: spacing.small_12,
|
|
407
|
-
borderEndStartRadius: spacing.small_12
|
|
408
|
-
};
|
|
409
|
-
}
|
|
410
|
-
}
|
|
411
|
-
if (cornerKind === "rounded-per-section") {
|
|
412
|
-
wrapperStyle = {
|
|
413
|
-
border: borderStyle,
|
|
414
|
-
borderRadius: border.radius.radius_120,
|
|
415
|
-
marginBottom: spacing.medium_16
|
|
416
|
-
};
|
|
417
|
-
contentWrapperStyle = {
|
|
418
|
-
borderEndEndRadius: spacing.small_12,
|
|
419
|
-
borderEndStartRadius: spacing.small_12
|
|
420
|
-
};
|
|
421
|
-
}
|
|
422
|
-
const newStyles = {
|
|
423
|
-
wrapper: _extends({}, wrapperStyle, firstSectionStyle, lastSectionStyle),
|
|
424
|
-
contentWrapper: contentWrapperStyle
|
|
425
|
-
};
|
|
426
|
-
cornerStyles[sectionType] = StyleSheet.create(newStyles);
|
|
427
|
-
return cornerStyles[sectionType];
|
|
428
|
-
};
|
|
18
|
+
const AccordionSection=React.forwardRef(function AccordionSection(props,ref){const{children,id,header,collapsible,expanded,animated=false,onToggle,caretPosition="end",cornerKind="rounded",style,headerStyle,tag,testId,isFirstSection=true,isLastSection=true,isRegion=true,...ariaProps}=props;const[internalExpanded,setInternalExpanded]=React.useState(expanded??false);const controlledMode=expanded!==undefined&&onToggle;const uniqueSectionId=useId();const sectionId=id??uniqueSectionId;const uniqueHeaderId=useId();const headerId=id?`${id}-header`:uniqueHeaderId;const sectionContentUniqueId=useId();const sectionStyles=_generateStyles(cornerKind,isFirstSection,isLastSection);const handleClick=()=>{if(controlledMode){onToggle(!expanded);}else {setInternalExpanded(!internalExpanded);if(onToggle){onToggle(!internalExpanded);}}};let expandedState;if(collapsible===false){expandedState=true;}else {expandedState=controlledMode?expanded:internalExpanded;}return jsxs(View,{id:sectionId,style:[styles.wrapper,animated&&styles.wrapperWithAnimation,sectionStyles.wrapper,expandedState?styles.wrapperExpanded:styles.wrapperCollapsed,style],testId:testId,...ariaProps,children:[jsx(AccordionSectionHeader,{id:headerId,header:header,caretPosition:caretPosition,cornerKind:cornerKind,collapsible:collapsible,expanded:expandedState,animated:animated,onClick:handleClick,sectionContentUniqueId:sectionContentUniqueId,headerStyle:headerStyle,tag:tag,testId:testId,isFirstSection:isFirstSection,isLastSection:isLastSection,ref:ref}),jsx(View,{id:sectionContentUniqueId,role:isRegion?"region":undefined,"aria-labelledby":headerId,style:[styles.contentWrapper,expandedState?styles.contentWrapperExpanded:styles.conentWrapperCollapsed,sectionStyles.contentWrapper],testId:testId?`${testId}-content-panel`:undefined,children:typeof children==="string"?jsx(Body,{style:styles.stringContent,children:children}):children})]})});const styles=StyleSheet.create({wrapper:{display:"grid",position:"static",boxSizing:"border-box",backgroundColor:semanticColor.surface.primary},wrapperWithAnimation:{transition:"grid-template-rows 300ms"},wrapperCollapsed:{gridTemplateRows:"min-content 0fr"},wrapperExpanded:{gridTemplateRows:"min-content 1fr"},contentWrapper:{overflow:"hidden"},conentWrapperCollapsed:{visibility:"hidden"},contentWrapperExpanded:{visibility:"visible"},stringContent:{padding:spacing.medium_16}});const cornerStyles={};const _generateStyles=(cornerKind,isFirstSection,isLastSection)=>{const sectionType=`${cornerKind}-${isFirstSection.toString()}-${isLastSection.toString()}`;if(cornerStyles[sectionType]){return cornerStyles[sectionType]}let wrapperStyle=Object.freeze({});let contentWrapperStyle=Object.freeze({});let firstSectionStyle=Object.freeze({});let lastSectionStyle=Object.freeze({});const borderStyle=`1px solid ${semanticColor.border.primary}`;if(cornerKind==="square"){wrapperStyle={border:borderStyle,borderBottom:"none",borderRadius:border.radius.radius_0};if(isLastSection){lastSectionStyle={borderBottom:borderStyle};}}if(cornerKind==="rounded"){wrapperStyle={border:borderStyle,borderBottom:"none"};if(isFirstSection){firstSectionStyle={borderStartStartRadius:spacing.small_12,borderStartEndRadius:spacing.small_12};}if(isLastSection){lastSectionStyle={borderBottom:borderStyle,borderEndStartRadius:spacing.small_12,borderEndEndRadius:spacing.small_12};contentWrapperStyle={borderEndEndRadius:spacing.small_12,borderEndStartRadius:spacing.small_12};}}if(cornerKind==="rounded-per-section"){wrapperStyle={border:borderStyle,borderRadius:border.radius.radius_120,marginBottom:spacing.medium_16};contentWrapperStyle={borderEndEndRadius:spacing.small_12,borderEndStartRadius:spacing.small_12};}const newStyles={wrapper:{...wrapperStyle,...firstSectionStyle,...lastSectionStyle},contentWrapper:contentWrapperStyle};cornerStyles[sectionType]=StyleSheet.create(newStyles);return cornerStyles[sectionType]};
|
|
429
19
|
|
|
430
20
|
export { Accordion, AccordionSection };
|
package/dist/index.js
CHANGED
|
@@ -2,8 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
6
|
-
var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
6
|
var React = require('react');
|
|
8
7
|
var aphrodite = require('aphrodite');
|
|
9
8
|
var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
|
|
@@ -33,428 +32,17 @@ function _interopNamespace(e) {
|
|
|
33
32
|
return Object.freeze(n);
|
|
34
33
|
}
|
|
35
34
|
|
|
36
|
-
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
|
|
37
|
-
var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
|
|
38
35
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
39
36
|
var caretDown__default = /*#__PURE__*/_interopDefaultLegacy(caretDown);
|
|
40
37
|
var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
|
|
41
38
|
|
|
42
|
-
const
|
|
43
|
-
const StyledUl = wonderBlocksCore.addStyle("ul");
|
|
44
|
-
const LANDMARK_PROLIFERATION_THRESHOLD = 6;
|
|
45
|
-
const Accordion = React__namespace.forwardRef(function Accordion(props, ref) {
|
|
46
|
-
const {
|
|
47
|
-
children,
|
|
48
|
-
id,
|
|
49
|
-
initialExpandedIndex,
|
|
50
|
-
allowMultipleExpanded = true,
|
|
51
|
-
caretPosition,
|
|
52
|
-
cornerKind = "rounded",
|
|
53
|
-
animated,
|
|
54
|
-
style
|
|
55
|
-
} = props,
|
|
56
|
-
ariaProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
|
|
57
|
-
const startingArray = Array(children.length).fill(false);
|
|
58
|
-
if (initialExpandedIndex !== undefined) {
|
|
59
|
-
startingArray[initialExpandedIndex] = true;
|
|
60
|
-
}
|
|
61
|
-
const [sectionsOpened, setSectionsOpened] = React__namespace.useState(startingArray);
|
|
62
|
-
const childRefs = Array(children.length).fill(null);
|
|
63
|
-
const sectionsAreRegions = children.length <= LANDMARK_PROLIFERATION_THRESHOLD;
|
|
64
|
-
const handleSectionClick = (index, childOnToggle) => {
|
|
65
|
-
const newSectionsOpened = allowMultipleExpanded ? [...sectionsOpened] : Array(children.length).fill(false);
|
|
66
|
-
const newOpenedValueAtIndex = !sectionsOpened[index];
|
|
67
|
-
newSectionsOpened[index] = newOpenedValueAtIndex;
|
|
68
|
-
setSectionsOpened(newSectionsOpened);
|
|
69
|
-
if (childOnToggle) {
|
|
70
|
-
childOnToggle(newOpenedValueAtIndex);
|
|
71
|
-
}
|
|
72
|
-
};
|
|
73
|
-
const handleKeyDown = event => {
|
|
74
|
-
var _previousChildRef$cur, _nextChildRef$current, _firstChildRef$curren, _lastChildRef$current;
|
|
75
|
-
const currentlyFocusedHeaderIndex = childRefs.findIndex(ref => ref.current === document.activeElement);
|
|
76
|
-
if (currentlyFocusedHeaderIndex === -1) {
|
|
77
|
-
return;
|
|
78
|
-
}
|
|
79
|
-
switch (event.key) {
|
|
80
|
-
case "ArrowUp":
|
|
81
|
-
event.preventDefault();
|
|
82
|
-
const previousSectionIndex = (currentlyFocusedHeaderIndex + children.length - 1) % children.length;
|
|
83
|
-
const previousChildRef = childRefs[previousSectionIndex];
|
|
84
|
-
(_previousChildRef$cur = previousChildRef.current) == null || _previousChildRef$cur.focus();
|
|
85
|
-
break;
|
|
86
|
-
case "ArrowDown":
|
|
87
|
-
event.preventDefault();
|
|
88
|
-
const nextSectionIndex = (currentlyFocusedHeaderIndex + 1) % children.length;
|
|
89
|
-
const nextChildRef = childRefs[nextSectionIndex];
|
|
90
|
-
(_nextChildRef$current = nextChildRef.current) == null || _nextChildRef$current.focus();
|
|
91
|
-
break;
|
|
92
|
-
case "Home":
|
|
93
|
-
event.preventDefault();
|
|
94
|
-
const firstChildRef = childRefs[0];
|
|
95
|
-
(_firstChildRef$curren = firstChildRef.current) == null || _firstChildRef$curren.focus();
|
|
96
|
-
break;
|
|
97
|
-
case "End":
|
|
98
|
-
event.preventDefault();
|
|
99
|
-
const lastChildRef = childRefs[children.length - 1];
|
|
100
|
-
(_lastChildRef$current = lastChildRef.current) == null || _lastChildRef$current.focus();
|
|
101
|
-
break;
|
|
102
|
-
}
|
|
103
|
-
};
|
|
104
|
-
return (React__namespace.createElement(StyledUl, _extends__default["default"]({
|
|
105
|
-
style: [styles$2.wrapper, style],
|
|
106
|
-
onKeyDown: handleKeyDown
|
|
107
|
-
}, ariaProps, {
|
|
108
|
-
ref: ref
|
|
109
|
-
}), children.map((child, index) => {
|
|
110
|
-
const {
|
|
111
|
-
caretPosition: childCaretPosition,
|
|
112
|
-
cornerKind: childCornerKind,
|
|
113
|
-
onToggle: childOnToggle,
|
|
114
|
-
animated: childAnimated
|
|
115
|
-
} = child.props;
|
|
116
|
-
const childRef = React__namespace.createRef();
|
|
117
|
-
childRefs[index] = childRef;
|
|
118
|
-
const isFirstChild = index === 0;
|
|
119
|
-
const isLastChild = index === children.length - 1;
|
|
120
|
-
return (React__namespace.createElement("li", {
|
|
121
|
-
key: index,
|
|
122
|
-
id: id
|
|
123
|
-
}, React__namespace.cloneElement(child, {
|
|
124
|
-
animated: childAnimated != null ? childAnimated : animated,
|
|
125
|
-
caretPosition: childCaretPosition != null ? childCaretPosition : caretPosition,
|
|
126
|
-
cornerKind: childCornerKind != null ? childCornerKind : cornerKind,
|
|
127
|
-
expanded: sectionsOpened[index],
|
|
128
|
-
onToggle: () => handleSectionClick(index, childOnToggle),
|
|
129
|
-
isFirstSection: isFirstChild,
|
|
130
|
-
isLastSection: isLastChild,
|
|
131
|
-
isRegion: sectionsAreRegions,
|
|
132
|
-
ref: childRef
|
|
133
|
-
}))
|
|
134
|
-
);
|
|
135
|
-
}))
|
|
136
|
-
);
|
|
137
|
-
});
|
|
138
|
-
const styles$2 = aphrodite.StyleSheet.create({
|
|
139
|
-
wrapper: {
|
|
140
|
-
boxSizing: "border-box",
|
|
141
|
-
listStyle: "none",
|
|
142
|
-
padding: 0,
|
|
143
|
-
width: "100%"
|
|
144
|
-
}
|
|
145
|
-
});
|
|
39
|
+
const StyledUl=wonderBlocksCore.addStyle("ul");const LANDMARK_PROLIFERATION_THRESHOLD=6;const Accordion=React__namespace.forwardRef(function Accordion(props,ref){const{children,id,initialExpandedIndex,allowMultipleExpanded=true,caretPosition,cornerKind="rounded",animated,style,...ariaProps}=props;const startingArray=Array(children.length).fill(false);if(initialExpandedIndex!==undefined){startingArray[initialExpandedIndex]=true;}const[sectionsOpened,setSectionsOpened]=React__namespace.useState(startingArray);const childRefs=Array(children.length).fill(null);const sectionsAreRegions=children.length<=LANDMARK_PROLIFERATION_THRESHOLD;const handleSectionClick=(index,childOnToggle)=>{const newSectionsOpened=allowMultipleExpanded?[...sectionsOpened]:Array(children.length).fill(false);const newOpenedValueAtIndex=!sectionsOpened[index];newSectionsOpened[index]=newOpenedValueAtIndex;setSectionsOpened(newSectionsOpened);if(childOnToggle){childOnToggle(newOpenedValueAtIndex);}};const handleKeyDown=event=>{const currentlyFocusedHeaderIndex=childRefs.findIndex(ref=>ref.current===document.activeElement);if(currentlyFocusedHeaderIndex===-1){return}switch(event.key){case"ArrowUp":event.preventDefault();const previousSectionIndex=(currentlyFocusedHeaderIndex+children.length-1)%children.length;const previousChildRef=childRefs[previousSectionIndex];previousChildRef.current?.focus();break;case"ArrowDown":event.preventDefault();const nextSectionIndex=(currentlyFocusedHeaderIndex+1)%children.length;const nextChildRef=childRefs[nextSectionIndex];nextChildRef.current?.focus();break;case"Home":event.preventDefault();const firstChildRef=childRefs[0];firstChildRef.current?.focus();break;case"End":event.preventDefault();const lastChildRef=childRefs[children.length-1];lastChildRef.current?.focus();break}};return jsxRuntime.jsx(StyledUl,{style:[styles$2.wrapper,style],onKeyDown:handleKeyDown,...ariaProps,ref:ref,children:children.map((child,index)=>{const{caretPosition:childCaretPosition,cornerKind:childCornerKind,onToggle:childOnToggle,animated:childAnimated}=child.props;const childRef=React__namespace.createRef();childRefs[index]=childRef;const isFirstChild=index===0;const isLastChild=index===children.length-1;return jsxRuntime.jsx("li",{id:id,children:React__namespace.cloneElement(child,{animated:childAnimated??animated,caretPosition:childCaretPosition??caretPosition,cornerKind:childCornerKind??cornerKind,expanded:sectionsOpened[index],onToggle:()=>handleSectionClick(index,childOnToggle),isFirstSection:isFirstChild,isLastSection:isLastChild,isRegion:sectionsAreRegions,ref:childRef})},index)})})});const styles$2=aphrodite.StyleSheet.create({wrapper:{boxSizing:"border-box",listStyle:"none",padding:0,width:"100%"}});
|
|
146
40
|
|
|
147
|
-
function getRoundedValuesForHeader(cornerKind,
|
|
148
|
-
switch (cornerKind) {
|
|
149
|
-
case "rounded-per-section":
|
|
150
|
-
return {
|
|
151
|
-
roundedTop: true,
|
|
152
|
-
roundedBottom: !expanded
|
|
153
|
-
};
|
|
154
|
-
case "rounded":
|
|
155
|
-
return {
|
|
156
|
-
roundedTop: isFirstSection,
|
|
157
|
-
roundedBottom: isLastSection && !expanded
|
|
158
|
-
};
|
|
159
|
-
default:
|
|
160
|
-
return {
|
|
161
|
-
roundedTop: false,
|
|
162
|
-
roundedBottom: false
|
|
163
|
-
};
|
|
164
|
-
}
|
|
165
|
-
}
|
|
41
|
+
function getRoundedValuesForHeader(cornerKind,isFirstSection,isLastSection,expanded){switch(cornerKind){case"rounded-per-section":return {roundedTop:true,roundedBottom:!expanded};case"rounded":return {roundedTop:isFirstSection,roundedBottom:isLastSection&&!expanded};default:return {roundedTop:false,roundedBottom:false}}}
|
|
166
42
|
|
|
167
|
-
const AccordionSectionHeader
|
|
168
|
-
const {
|
|
169
|
-
id,
|
|
170
|
-
header,
|
|
171
|
-
caretPosition,
|
|
172
|
-
cornerKind,
|
|
173
|
-
collapsible = true,
|
|
174
|
-
expanded,
|
|
175
|
-
animated,
|
|
176
|
-
onClick,
|
|
177
|
-
sectionContentUniqueId,
|
|
178
|
-
headerStyle,
|
|
179
|
-
tag = "h2",
|
|
180
|
-
testId,
|
|
181
|
-
isFirstSection,
|
|
182
|
-
isLastSection
|
|
183
|
-
} = props;
|
|
184
|
-
const headerIsString = typeof header === "string";
|
|
185
|
-
const {
|
|
186
|
-
roundedTop,
|
|
187
|
-
roundedBottom
|
|
188
|
-
} = getRoundedValuesForHeader(cornerKind, isFirstSection, isLastSection, expanded);
|
|
189
|
-
return React__namespace.createElement(wonderBlocksTypography.HeadingSmall, {
|
|
190
|
-
tag: tag,
|
|
191
|
-
style: styles$1.heading
|
|
192
|
-
}, React__namespace.createElement(Clickable__default["default"], {
|
|
193
|
-
id: id,
|
|
194
|
-
"aria-expanded": expanded,
|
|
195
|
-
"aria-controls": sectionContentUniqueId,
|
|
196
|
-
onClick: onClick,
|
|
197
|
-
disabled: !collapsible,
|
|
198
|
-
testId: testId ? `${testId}-header` : undefined,
|
|
199
|
-
style: [styles$1.headerWrapper, animated && styles$1.headerWrapperWithAnimation, caretPosition === "start" && styles$1.headerWrapperCaretStart, roundedTop && styles$1.roundedTop, roundedBottom && styles$1.roundedBottom, headerStyle, !collapsible && styles$1.disabled],
|
|
200
|
-
ref: ref
|
|
201
|
-
}, () => React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksCore.View, {
|
|
202
|
-
style: [styles$1.headerContent, headerIsString && styles$1.headerString]
|
|
203
|
-
}, headerIsString ? React__namespace.createElement(wonderBlocksCore.View, {
|
|
204
|
-
style: [caretPosition === "end" ? styles$1.headerStringCaretEnd : styles$1.headerStringCaretStart]
|
|
205
|
-
}, header) : header), collapsible && React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
|
|
206
|
-
icon: caretDown__default["default"],
|
|
207
|
-
color: wonderBlocksTokens.semanticColor.icon.primary,
|
|
208
|
-
size: "small",
|
|
209
|
-
style: [animated && styles$1.iconWithAnimation, caretPosition === "start" ? styles$1.iconStart : styles$1.iconEnd, expanded && styles$1.iconExpanded],
|
|
210
|
-
testId: testId ? `${testId}-caret-icon` : undefined
|
|
211
|
-
}))));
|
|
212
|
-
});
|
|
213
|
-
const INNER_BORDER_RADIUS = wonderBlocksTokens.spacing.small_12 - 1;
|
|
214
|
-
const ANIMATION_LENGTH = "300ms";
|
|
215
|
-
const styles$1 = aphrodite.StyleSheet.create({
|
|
216
|
-
heading: {
|
|
217
|
-
minWidth: 0,
|
|
218
|
-
marginTop: 0
|
|
219
|
-
},
|
|
220
|
-
headerWrapper: {
|
|
221
|
-
display: "flex",
|
|
222
|
-
flexDirection: "row",
|
|
223
|
-
alignItems: "center",
|
|
224
|
-
overflow: "hidden",
|
|
225
|
-
minWidth: "auto",
|
|
226
|
-
width: "100%",
|
|
227
|
-
position: "relative",
|
|
228
|
-
zIndex: 1,
|
|
229
|
-
":active": {
|
|
230
|
-
outline: `2px solid ${wonderBlocksTokens.semanticColor.action.secondary.progressive.press.border}`
|
|
231
|
-
},
|
|
232
|
-
":hover": {
|
|
233
|
-
outline: `2px solid ${wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.border}`
|
|
234
|
-
},
|
|
235
|
-
":focus-visible": {
|
|
236
|
-
outline: `2px solid ${wonderBlocksTokens.semanticColor.focus.outer}`
|
|
237
|
-
}
|
|
238
|
-
},
|
|
239
|
-
headerWrapperWithAnimation: {
|
|
240
|
-
transition: `border-radius ${ANIMATION_LENGTH}`
|
|
241
|
-
},
|
|
242
|
-
headerWrapperCaretStart: {
|
|
243
|
-
flexDirection: "row-reverse"
|
|
244
|
-
},
|
|
245
|
-
roundedTop: {
|
|
246
|
-
borderStartStartRadius: INNER_BORDER_RADIUS,
|
|
247
|
-
borderStartEndRadius: INNER_BORDER_RADIUS
|
|
248
|
-
},
|
|
249
|
-
roundedBottom: {
|
|
250
|
-
borderEndStartRadius: INNER_BORDER_RADIUS,
|
|
251
|
-
borderEndEndRadius: INNER_BORDER_RADIUS
|
|
252
|
-
},
|
|
253
|
-
headerContent: {
|
|
254
|
-
flexGrow: 1,
|
|
255
|
-
textAlign: "start"
|
|
256
|
-
},
|
|
257
|
-
headerString: {
|
|
258
|
-
paddingTop: wonderBlocksTokens.spacing.medium_16,
|
|
259
|
-
paddingBottom: wonderBlocksTokens.spacing.medium_16
|
|
260
|
-
},
|
|
261
|
-
headerStringCaretEnd: {
|
|
262
|
-
paddingInlineEnd: wonderBlocksTokens.spacing.small_12,
|
|
263
|
-
paddingInlineStart: wonderBlocksTokens.spacing.medium_16
|
|
264
|
-
},
|
|
265
|
-
headerStringCaretStart: {
|
|
266
|
-
paddingInlineEnd: wonderBlocksTokens.spacing.medium_16,
|
|
267
|
-
paddingInlineStart: wonderBlocksTokens.spacing.small_12
|
|
268
|
-
},
|
|
269
|
-
iconWithAnimation: {
|
|
270
|
-
transition: `transform ${ANIMATION_LENGTH}`
|
|
271
|
-
},
|
|
272
|
-
iconExpanded: {
|
|
273
|
-
transform: "rotate(180deg)"
|
|
274
|
-
},
|
|
275
|
-
iconStart: {
|
|
276
|
-
marginInlineStart: wonderBlocksTokens.spacing.medium_16
|
|
277
|
-
},
|
|
278
|
-
iconEnd: {
|
|
279
|
-
marginInlineEnd: wonderBlocksTokens.spacing.medium_16
|
|
280
|
-
},
|
|
281
|
-
disabled: {
|
|
282
|
-
pointerEvents: "none",
|
|
283
|
-
color: "inherit",
|
|
284
|
-
":focus-visible": {
|
|
285
|
-
outline: `2px solid ${wonderBlocksTokens.semanticColor.focus.outer}`
|
|
286
|
-
}
|
|
287
|
-
}
|
|
288
|
-
});
|
|
43
|
+
const AccordionSectionHeader=React__namespace.forwardRef(function AccordionSectionHeader(props,ref){const{id,header,caretPosition,cornerKind,collapsible=true,expanded,animated,onClick,sectionContentUniqueId,headerStyle,tag="h2",testId,isFirstSection,isLastSection}=props;const headerIsString=typeof header==="string";const{roundedTop,roundedBottom}=getRoundedValuesForHeader(cornerKind,isFirstSection,isLastSection,expanded);return jsxRuntime.jsx(wonderBlocksTypography.HeadingSmall,{tag:tag,style:styles$1.heading,children:jsxRuntime.jsx(Clickable__default["default"],{id:id,"aria-expanded":expanded,"aria-controls":sectionContentUniqueId,onClick:onClick,disabled:!collapsible,testId:testId?`${testId}-header`:undefined,style:[styles$1.headerWrapper,animated&&styles$1.headerWrapperWithAnimation,caretPosition==="start"&&styles$1.headerWrapperCaretStart,roundedTop&&styles$1.roundedTop,roundedBottom&&styles$1.roundedBottom,headerStyle,!collapsible&&styles$1.disabled],ref:ref,children:()=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.headerContent,headerIsString&&styles$1.headerString],children:headerIsString?jsxRuntime.jsx(wonderBlocksCore.View,{style:[caretPosition==="end"?styles$1.headerStringCaretEnd:styles$1.headerStringCaretStart],children:header}):header}),collapsible&&jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:caretDown__default["default"],color:wonderBlocksTokens.semanticColor.icon.primary,size:"small",style:[animated&&styles$1.iconWithAnimation,caretPosition==="start"?styles$1.iconStart:styles$1.iconEnd,expanded&&styles$1.iconExpanded],testId:testId?`${testId}-caret-icon`:undefined})]})})})});const INNER_BORDER_RADIUS=wonderBlocksTokens.spacing.small_12-1;const ANIMATION_LENGTH="300ms";const styles$1=aphrodite.StyleSheet.create({heading:{minWidth:0,marginTop:0},headerWrapper:{display:"flex",flexDirection:"row",alignItems:"center",overflow:"hidden",minWidth:"auto",width:"100%",position:"relative",zIndex:1,":active":{outline:`2px solid ${wonderBlocksTokens.semanticColor.action.secondary.progressive.press.border}`},":hover":{outline:`2px solid ${wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.border}`},":focus-visible":{outline:`2px solid ${wonderBlocksTokens.semanticColor.focus.outer}`}},headerWrapperWithAnimation:{transition:`border-radius ${ANIMATION_LENGTH}`},headerWrapperCaretStart:{flexDirection:"row-reverse"},roundedTop:{borderStartStartRadius:INNER_BORDER_RADIUS,borderStartEndRadius:INNER_BORDER_RADIUS},roundedBottom:{borderEndStartRadius:INNER_BORDER_RADIUS,borderEndEndRadius:INNER_BORDER_RADIUS},headerContent:{flexGrow:1,textAlign:"start"},headerString:{paddingTop:wonderBlocksTokens.spacing.medium_16,paddingBottom:wonderBlocksTokens.spacing.medium_16},headerStringCaretEnd:{paddingInlineEnd:wonderBlocksTokens.spacing.small_12,paddingInlineStart:wonderBlocksTokens.spacing.medium_16},headerStringCaretStart:{paddingInlineEnd:wonderBlocksTokens.spacing.medium_16,paddingInlineStart:wonderBlocksTokens.spacing.small_12},iconWithAnimation:{transition:`transform ${ANIMATION_LENGTH}`},iconExpanded:{transform:"rotate(180deg)"},iconStart:{marginInlineStart:wonderBlocksTokens.spacing.medium_16},iconEnd:{marginInlineEnd:wonderBlocksTokens.spacing.medium_16},disabled:{pointerEvents:"none",color:"inherit",":focus-visible":{outline:`2px solid ${wonderBlocksTokens.semanticColor.focus.outer}`}}});
|
|
289
44
|
|
|
290
|
-
const
|
|
291
|
-
const AccordionSection = React__namespace.forwardRef(function AccordionSection(props, ref) {
|
|
292
|
-
const {
|
|
293
|
-
children,
|
|
294
|
-
id,
|
|
295
|
-
header,
|
|
296
|
-
collapsible,
|
|
297
|
-
expanded,
|
|
298
|
-
animated = false,
|
|
299
|
-
onToggle,
|
|
300
|
-
caretPosition = "end",
|
|
301
|
-
cornerKind = "rounded",
|
|
302
|
-
style,
|
|
303
|
-
headerStyle,
|
|
304
|
-
tag,
|
|
305
|
-
testId,
|
|
306
|
-
isFirstSection = true,
|
|
307
|
-
isLastSection = true,
|
|
308
|
-
isRegion = true
|
|
309
|
-
} = props,
|
|
310
|
-
ariaProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
|
|
311
|
-
const [internalExpanded, setInternalExpanded] = React__namespace.useState(expanded != null ? expanded : false);
|
|
312
|
-
const controlledMode = expanded !== undefined && onToggle;
|
|
313
|
-
const uniqueSectionId = React.useId();
|
|
314
|
-
const sectionId = id != null ? id : uniqueSectionId;
|
|
315
|
-
const uniqueHeaderId = React.useId();
|
|
316
|
-
const headerId = id ? `${id}-header` : uniqueHeaderId;
|
|
317
|
-
const sectionContentUniqueId = React.useId();
|
|
318
|
-
const sectionStyles = _generateStyles(cornerKind, isFirstSection, isLastSection);
|
|
319
|
-
const handleClick = () => {
|
|
320
|
-
if (controlledMode) {
|
|
321
|
-
onToggle(!expanded);
|
|
322
|
-
} else {
|
|
323
|
-
setInternalExpanded(!internalExpanded);
|
|
324
|
-
if (onToggle) {
|
|
325
|
-
onToggle(!internalExpanded);
|
|
326
|
-
}
|
|
327
|
-
}
|
|
328
|
-
};
|
|
329
|
-
let expandedState;
|
|
330
|
-
if (collapsible === false) {
|
|
331
|
-
expandedState = true;
|
|
332
|
-
} else {
|
|
333
|
-
expandedState = controlledMode ? expanded : internalExpanded;
|
|
334
|
-
}
|
|
335
|
-
return React__namespace.createElement(wonderBlocksCore.View, _extends__default["default"]({
|
|
336
|
-
id: sectionId,
|
|
337
|
-
style: [styles.wrapper, animated && styles.wrapperWithAnimation, sectionStyles.wrapper, expandedState ? styles.wrapperExpanded : styles.wrapperCollapsed, style],
|
|
338
|
-
testId: testId
|
|
339
|
-
}, ariaProps), React__namespace.createElement(AccordionSectionHeader, {
|
|
340
|
-
id: headerId,
|
|
341
|
-
header: header,
|
|
342
|
-
caretPosition: caretPosition,
|
|
343
|
-
cornerKind: cornerKind,
|
|
344
|
-
collapsible: collapsible,
|
|
345
|
-
expanded: expandedState,
|
|
346
|
-
animated: animated,
|
|
347
|
-
onClick: handleClick,
|
|
348
|
-
sectionContentUniqueId: sectionContentUniqueId,
|
|
349
|
-
headerStyle: headerStyle,
|
|
350
|
-
tag: tag,
|
|
351
|
-
testId: testId,
|
|
352
|
-
isFirstSection: isFirstSection,
|
|
353
|
-
isLastSection: isLastSection,
|
|
354
|
-
ref: ref
|
|
355
|
-
}), React__namespace.createElement(wonderBlocksCore.View, {
|
|
356
|
-
id: sectionContentUniqueId,
|
|
357
|
-
role: isRegion ? "region" : undefined,
|
|
358
|
-
"aria-labelledby": headerId,
|
|
359
|
-
style: [styles.contentWrapper, expandedState ? styles.contentWrapperExpanded : styles.conentWrapperCollapsed, sectionStyles.contentWrapper],
|
|
360
|
-
testId: testId ? `${testId}-content-panel` : undefined
|
|
361
|
-
}, typeof children === "string" ? React__namespace.createElement(wonderBlocksTypography.Body, {
|
|
362
|
-
style: styles.stringContent
|
|
363
|
-
}, children) : children));
|
|
364
|
-
});
|
|
365
|
-
const styles = aphrodite.StyleSheet.create({
|
|
366
|
-
wrapper: {
|
|
367
|
-
display: "grid",
|
|
368
|
-
position: "static",
|
|
369
|
-
boxSizing: "border-box",
|
|
370
|
-
backgroundColor: wonderBlocksTokens.semanticColor.surface.primary
|
|
371
|
-
},
|
|
372
|
-
wrapperWithAnimation: {
|
|
373
|
-
transition: "grid-template-rows 300ms"
|
|
374
|
-
},
|
|
375
|
-
wrapperCollapsed: {
|
|
376
|
-
gridTemplateRows: "min-content 0fr"
|
|
377
|
-
},
|
|
378
|
-
wrapperExpanded: {
|
|
379
|
-
gridTemplateRows: "min-content 1fr"
|
|
380
|
-
},
|
|
381
|
-
contentWrapper: {
|
|
382
|
-
overflow: "hidden"
|
|
383
|
-
},
|
|
384
|
-
conentWrapperCollapsed: {
|
|
385
|
-
visibility: "hidden"
|
|
386
|
-
},
|
|
387
|
-
contentWrapperExpanded: {
|
|
388
|
-
visibility: "visible"
|
|
389
|
-
},
|
|
390
|
-
stringContent: {
|
|
391
|
-
padding: wonderBlocksTokens.spacing.medium_16
|
|
392
|
-
}
|
|
393
|
-
});
|
|
394
|
-
const cornerStyles = {};
|
|
395
|
-
const _generateStyles = (cornerKind, isFirstSection, isLastSection) => {
|
|
396
|
-
const sectionType = `${cornerKind}-${isFirstSection.toString()}-${isLastSection.toString()}`;
|
|
397
|
-
if (cornerStyles[sectionType]) {
|
|
398
|
-
return cornerStyles[sectionType];
|
|
399
|
-
}
|
|
400
|
-
let wrapperStyle = Object.freeze({});
|
|
401
|
-
let contentWrapperStyle = Object.freeze({});
|
|
402
|
-
let firstSectionStyle = Object.freeze({});
|
|
403
|
-
let lastSectionStyle = Object.freeze({});
|
|
404
|
-
const borderStyle = `1px solid ${wonderBlocksTokens.semanticColor.border.primary}`;
|
|
405
|
-
if (cornerKind === "square") {
|
|
406
|
-
wrapperStyle = {
|
|
407
|
-
border: borderStyle,
|
|
408
|
-
borderBottom: "none",
|
|
409
|
-
borderRadius: wonderBlocksTokens.border.radius.radius_0
|
|
410
|
-
};
|
|
411
|
-
if (isLastSection) {
|
|
412
|
-
lastSectionStyle = {
|
|
413
|
-
borderBottom: borderStyle
|
|
414
|
-
};
|
|
415
|
-
}
|
|
416
|
-
}
|
|
417
|
-
if (cornerKind === "rounded") {
|
|
418
|
-
wrapperStyle = {
|
|
419
|
-
border: borderStyle,
|
|
420
|
-
borderBottom: "none"
|
|
421
|
-
};
|
|
422
|
-
if (isFirstSection) {
|
|
423
|
-
firstSectionStyle = {
|
|
424
|
-
borderStartStartRadius: wonderBlocksTokens.spacing.small_12,
|
|
425
|
-
borderStartEndRadius: wonderBlocksTokens.spacing.small_12
|
|
426
|
-
};
|
|
427
|
-
}
|
|
428
|
-
if (isLastSection) {
|
|
429
|
-
lastSectionStyle = {
|
|
430
|
-
borderBottom: borderStyle,
|
|
431
|
-
borderEndStartRadius: wonderBlocksTokens.spacing.small_12,
|
|
432
|
-
borderEndEndRadius: wonderBlocksTokens.spacing.small_12
|
|
433
|
-
};
|
|
434
|
-
contentWrapperStyle = {
|
|
435
|
-
borderEndEndRadius: wonderBlocksTokens.spacing.small_12,
|
|
436
|
-
borderEndStartRadius: wonderBlocksTokens.spacing.small_12
|
|
437
|
-
};
|
|
438
|
-
}
|
|
439
|
-
}
|
|
440
|
-
if (cornerKind === "rounded-per-section") {
|
|
441
|
-
wrapperStyle = {
|
|
442
|
-
border: borderStyle,
|
|
443
|
-
borderRadius: wonderBlocksTokens.border.radius.radius_120,
|
|
444
|
-
marginBottom: wonderBlocksTokens.spacing.medium_16
|
|
445
|
-
};
|
|
446
|
-
contentWrapperStyle = {
|
|
447
|
-
borderEndEndRadius: wonderBlocksTokens.spacing.small_12,
|
|
448
|
-
borderEndStartRadius: wonderBlocksTokens.spacing.small_12
|
|
449
|
-
};
|
|
450
|
-
}
|
|
451
|
-
const newStyles = {
|
|
452
|
-
wrapper: _extends__default["default"]({}, wrapperStyle, firstSectionStyle, lastSectionStyle),
|
|
453
|
-
contentWrapper: contentWrapperStyle
|
|
454
|
-
};
|
|
455
|
-
cornerStyles[sectionType] = aphrodite.StyleSheet.create(newStyles);
|
|
456
|
-
return cornerStyles[sectionType];
|
|
457
|
-
};
|
|
45
|
+
const AccordionSection=React__namespace.forwardRef(function AccordionSection(props,ref){const{children,id,header,collapsible,expanded,animated=false,onToggle,caretPosition="end",cornerKind="rounded",style,headerStyle,tag,testId,isFirstSection=true,isLastSection=true,isRegion=true,...ariaProps}=props;const[internalExpanded,setInternalExpanded]=React__namespace.useState(expanded??false);const controlledMode=expanded!==undefined&&onToggle;const uniqueSectionId=React.useId();const sectionId=id??uniqueSectionId;const uniqueHeaderId=React.useId();const headerId=id?`${id}-header`:uniqueHeaderId;const sectionContentUniqueId=React.useId();const sectionStyles=_generateStyles(cornerKind,isFirstSection,isLastSection);const handleClick=()=>{if(controlledMode){onToggle(!expanded);}else {setInternalExpanded(!internalExpanded);if(onToggle){onToggle(!internalExpanded);}}};let expandedState;if(collapsible===false){expandedState=true;}else {expandedState=controlledMode?expanded:internalExpanded;}return jsxRuntime.jsxs(wonderBlocksCore.View,{id:sectionId,style:[styles.wrapper,animated&&styles.wrapperWithAnimation,sectionStyles.wrapper,expandedState?styles.wrapperExpanded:styles.wrapperCollapsed,style],testId:testId,...ariaProps,children:[jsxRuntime.jsx(AccordionSectionHeader,{id:headerId,header:header,caretPosition:caretPosition,cornerKind:cornerKind,collapsible:collapsible,expanded:expandedState,animated:animated,onClick:handleClick,sectionContentUniqueId:sectionContentUniqueId,headerStyle:headerStyle,tag:tag,testId:testId,isFirstSection:isFirstSection,isLastSection:isLastSection,ref:ref}),jsxRuntime.jsx(wonderBlocksCore.View,{id:sectionContentUniqueId,role:isRegion?"region":undefined,"aria-labelledby":headerId,style:[styles.contentWrapper,expandedState?styles.contentWrapperExpanded:styles.conentWrapperCollapsed,sectionStyles.contentWrapper],testId:testId?`${testId}-content-panel`:undefined,children:typeof children==="string"?jsxRuntime.jsx(wonderBlocksTypography.Body,{style:styles.stringContent,children:children}):children})]})});const styles=aphrodite.StyleSheet.create({wrapper:{display:"grid",position:"static",boxSizing:"border-box",backgroundColor:wonderBlocksTokens.semanticColor.surface.primary},wrapperWithAnimation:{transition:"grid-template-rows 300ms"},wrapperCollapsed:{gridTemplateRows:"min-content 0fr"},wrapperExpanded:{gridTemplateRows:"min-content 1fr"},contentWrapper:{overflow:"hidden"},conentWrapperCollapsed:{visibility:"hidden"},contentWrapperExpanded:{visibility:"visible"},stringContent:{padding:wonderBlocksTokens.spacing.medium_16}});const cornerStyles={};const _generateStyles=(cornerKind,isFirstSection,isLastSection)=>{const sectionType=`${cornerKind}-${isFirstSection.toString()}-${isLastSection.toString()}`;if(cornerStyles[sectionType]){return cornerStyles[sectionType]}let wrapperStyle=Object.freeze({});let contentWrapperStyle=Object.freeze({});let firstSectionStyle=Object.freeze({});let lastSectionStyle=Object.freeze({});const borderStyle=`1px solid ${wonderBlocksTokens.semanticColor.border.primary}`;if(cornerKind==="square"){wrapperStyle={border:borderStyle,borderBottom:"none",borderRadius:wonderBlocksTokens.border.radius.radius_0};if(isLastSection){lastSectionStyle={borderBottom:borderStyle};}}if(cornerKind==="rounded"){wrapperStyle={border:borderStyle,borderBottom:"none"};if(isFirstSection){firstSectionStyle={borderStartStartRadius:wonderBlocksTokens.spacing.small_12,borderStartEndRadius:wonderBlocksTokens.spacing.small_12};}if(isLastSection){lastSectionStyle={borderBottom:borderStyle,borderEndStartRadius:wonderBlocksTokens.spacing.small_12,borderEndEndRadius:wonderBlocksTokens.spacing.small_12};contentWrapperStyle={borderEndEndRadius:wonderBlocksTokens.spacing.small_12,borderEndStartRadius:wonderBlocksTokens.spacing.small_12};}}if(cornerKind==="rounded-per-section"){wrapperStyle={border:borderStyle,borderRadius:wonderBlocksTokens.border.radius.radius_120,marginBottom:wonderBlocksTokens.spacing.medium_16};contentWrapperStyle={borderEndEndRadius:wonderBlocksTokens.spacing.small_12,borderEndStartRadius:wonderBlocksTokens.spacing.small_12};}const newStyles={wrapper:{...wrapperStyle,...firstSectionStyle,...lastSectionStyle},contentWrapper:contentWrapperStyle};cornerStyles[sectionType]=aphrodite.StyleSheet.create(newStyles);return cornerStyles[sectionType]};
|
|
458
46
|
|
|
459
47
|
exports.Accordion = Accordion;
|
|
460
48
|
exports.AccordionSection = AccordionSection;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-accordion",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.11",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"description": "Accordion components for Wonder Blocks.",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -13,12 +13,11 @@
|
|
|
13
13
|
"access": "public"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@
|
|
17
|
-
"@khanacademy/wonder-blocks-clickable": "7.0.2",
|
|
16
|
+
"@khanacademy/wonder-blocks-clickable": "7.0.4",
|
|
18
17
|
"@khanacademy/wonder-blocks-core": "12.2.1",
|
|
19
18
|
"@khanacademy/wonder-blocks-icon": "5.1.3",
|
|
20
|
-
"@khanacademy/wonder-blocks-tokens": "
|
|
21
|
-
"@khanacademy/wonder-blocks-typography": "3.
|
|
19
|
+
"@khanacademy/wonder-blocks-tokens": "10.0.0",
|
|
20
|
+
"@khanacademy/wonder-blocks-typography": "3.2.0"
|
|
22
21
|
},
|
|
23
22
|
"peerDependencies": {
|
|
24
23
|
"@phosphor-icons/core": "^2.0.2",
|
|
@@ -26,7 +25,7 @@
|
|
|
26
25
|
"react": "18.2.0"
|
|
27
26
|
},
|
|
28
27
|
"devDependencies": {
|
|
29
|
-
"@khanacademy/wb-dev-build-settings": "
|
|
28
|
+
"@khanacademy/wb-dev-build-settings": "3.0.0"
|
|
30
29
|
},
|
|
31
30
|
"scripts": {
|
|
32
31
|
"test": "echo \"Error: no test specified\" && exit 1"
|