@contentful/f36-accordion 4.0.1-beta.2550 → 4.0.1-beta.2595

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 (7) hide show
  1. package/dist/main.js +78 -104
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +61 -87
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +20 -4
  6. package/dist/types.d.ts.map +1 -1
  7. package/package.json +7 -6
package/dist/main.js CHANGED
@@ -1,9 +1,11 @@
1
+ var $9pthv$reactjsxruntime = require("react/jsx-runtime");
1
2
  var $9pthv$react = require("react");
2
3
  var $9pthv$contentfulf36core = require("@contentful/f36-core");
3
4
  var $9pthv$emotion = require("emotion");
4
5
  var $9pthv$contentfulf36tokens = require("@contentful/f36-tokens");
5
6
  var $9pthv$contentfulf36typography = require("@contentful/f36-typography");
6
7
  var $9pthv$contentfulf36icons = require("@contentful/f36-icons");
8
+ var $9pthv$contentfulf36collapse = require("@contentful/f36-collapse");
7
9
 
8
10
  function $parcel$export(e, n, v, s) {
9
11
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
@@ -21,6 +23,7 @@ $parcel$export(module.exports, "AccordionPanel", () => $dc0312cfa0956395$export$
21
23
 
22
24
 
23
25
 
26
+
24
27
  const $b2e2219a9d74caf2$export$af90c4d6702a6ca7 = ({ className: className })=>({
25
28
  accordion: $9pthv$emotion.cx(/*#__PURE__*/ $9pthv$emotion.css({
26
29
  boxSizing: 'border-box',
@@ -28,7 +31,7 @@ const $b2e2219a9d74caf2$export$af90c4d6702a6ca7 = ({ className: className })=>(
28
31
  margin: '0',
29
32
  listStyle: 'none',
30
33
  '&:first-child': {
31
- borderTop: `1px solid ${$parcel$interopDefault($9pthv$contentfulf36tokens).gray300}`
34
+ borderTop: `1px solid ${($parcel$interopDefault($9pthv$contentfulf36tokens)).gray300}`
32
35
  }
33
36
  }), className)
34
37
  })
@@ -39,20 +42,23 @@ const $6b1aad2dfaf9ce0d$var$_Accordion = ({ align: align = 'end' , children: chi
39
42
  const styles = $b2e2219a9d74caf2$export$af90c4d6702a6ca7({
40
43
  className: className
41
44
  });
42
- return(/*#__PURE__*/ $parcel$interopDefault($9pthv$react).createElement($9pthv$contentfulf36core.Box, {
45
+ return(/*#__PURE__*/ $9pthv$reactjsxruntime.jsx($9pthv$contentfulf36core.Box, {
43
46
  as: "ul",
44
47
  className: styles.accordion,
45
48
  testId: testId,
46
49
  ...otherProps,
47
- ref: ref
48
- }, $parcel$interopDefault($9pthv$react).Children.map(children, (child)=>{
49
- if (/*#__PURE__*/ $parcel$interopDefault($9pthv$react).isValidElement(child)) return(/*#__PURE__*/ $parcel$interopDefault($9pthv$react).cloneElement(child, {
50
- align: align
51
- }));
52
- return child;
53
- })));
50
+ ref: ref,
51
+ children: ($parcel$interopDefault($9pthv$react)).Children.map(children, (child)=>{
52
+ if (/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).isValidElement(child)) return(/*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).cloneElement(child, {
53
+ align: align
54
+ }));
55
+ return child;
56
+ })
57
+ }));
54
58
  };
55
- const $6b1aad2dfaf9ce0d$export$a766cd26d0d69044 = /*#__PURE__*/ $parcel$interopDefault($9pthv$react).forwardRef($6b1aad2dfaf9ce0d$var$_Accordion);
59
+ const $6b1aad2dfaf9ce0d$export$a766cd26d0d69044 = /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).forwardRef($6b1aad2dfaf9ce0d$var$_Accordion);
60
+
61
+
56
62
 
57
63
 
58
64
 
@@ -68,23 +74,23 @@ const $cc0727a9cc62031c$var$getHeaderStyles = ({ align: align })=>$9pthv$emotio
68
74
  flexDirection: 'row',
69
75
  alignItems: 'center',
70
76
  border: '0',
71
- padding: $parcel$interopDefault($9pthv$contentfulf36tokens).spacingM,
77
+ padding: ($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingM,
72
78
  backgroundColor: 'transparent',
73
- fontFamily: $parcel$interopDefault($9pthv$contentfulf36tokens).fontStackPrimary,
74
- fontSize: $parcel$interopDefault($9pthv$contentfulf36tokens).fontSizeL,
75
- fontWeight: $parcel$interopDefault($9pthv$contentfulf36tokens).fontWeightDemiBold,
76
- lineHeight: $parcel$interopDefault($9pthv$contentfulf36tokens).lineHeightL,
77
- color: $parcel$interopDefault($9pthv$contentfulf36tokens).gray800,
79
+ fontFamily: ($parcel$interopDefault($9pthv$contentfulf36tokens)).fontStackPrimary,
80
+ fontSize: ($parcel$interopDefault($9pthv$contentfulf36tokens)).fontSizeL,
81
+ fontWeight: ($parcel$interopDefault($9pthv$contentfulf36tokens)).fontWeightDemiBold,
82
+ lineHeight: ($parcel$interopDefault($9pthv$contentfulf36tokens)).lineHeightL,
83
+ color: ($parcel$interopDefault($9pthv$contentfulf36tokens)).gray800,
78
84
  width: '100%',
79
85
  minWidth: '9px',
80
86
  cursor: 'pointer',
81
- transition: `background-color ${$parcel$interopDefault($9pthv$contentfulf36tokens).transitionDurationDefault} ${$parcel$interopDefault($9pthv$contentfulf36tokens).transitionEasingDefault}`,
87
+ transition: `background-color ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionDurationDefault} ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionEasingDefault}`,
82
88
  '&:hover': {
83
- backgroundColor: $parcel$interopDefault($9pthv$contentfulf36tokens).gray100
89
+ backgroundColor: ($parcel$interopDefault($9pthv$contentfulf36tokens)).gray100
84
90
  },
85
91
  '&:focus': {
86
92
  outline: 'none',
87
- backgroundColor: $parcel$interopDefault($9pthv$contentfulf36tokens).gray100
93
+ backgroundColor: ($parcel$interopDefault($9pthv$contentfulf36tokens)).gray100
88
94
  }
89
95
  }), align === 'end' && /*#__PURE__*/ $9pthv$emotion.css({
90
96
  name: "1tvf3d0",
@@ -93,11 +99,11 @@ const $cc0727a9cc62031c$var$getHeaderStyles = ({ align: align })=>$9pthv$emotio
93
99
  ;
94
100
  const $cc0727a9cc62031c$var$getIconStyles = ({ align: align , isExpanded: isExpanded })=>$9pthv$emotion.cx(/*#__PURE__*/ $9pthv$emotion.css({
95
101
  transform: 'rotate(0deg)',
96
- transition: `transform ${$parcel$interopDefault($9pthv$contentfulf36tokens).transitionDurationDefault} ${$parcel$interopDefault($9pthv$contentfulf36tokens).transitionEasingDefault}`
102
+ transition: `transform ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionDurationDefault} ${($parcel$interopDefault($9pthv$contentfulf36tokens)).transitionEasingDefault}`
97
103
  }), align === 'end' && /*#__PURE__*/ $9pthv$emotion.css({
98
- marginLeft: $parcel$interopDefault($9pthv$contentfulf36tokens).spacingM
104
+ marginLeft: ($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingM
99
105
  }), align === 'start' && /*#__PURE__*/ $9pthv$emotion.css({
100
- marginRight: $parcel$interopDefault($9pthv$contentfulf36tokens).spacingM
106
+ marginRight: ($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingM
101
107
  }), isExpanded && /*#__PURE__*/ $9pthv$emotion.css({
102
108
  name: "4ky835",
103
109
  styles: "transform:rotate(180deg);"
@@ -115,22 +121,27 @@ const $a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41 = ({ children: children , onClic
115
121
  align: align,
116
122
  isExpanded: isExpanded
117
123
  });
118
- return(/*#__PURE__*/ $parcel$interopDefault($9pthv$react).createElement($9pthv$contentfulf36typography.Subheading, {
124
+ return(/*#__PURE__*/ $9pthv$reactjsxruntime.jsx($9pthv$contentfulf36typography.Subheading, {
119
125
  ...rest,
120
126
  testId: testId,
121
127
  marginBottom: "none",
122
- as: element
123
- }, /*#__PURE__*/ $parcel$interopDefault($9pthv$react).createElement("button", {
124
- type: "button",
125
- "aria-expanded": isExpanded,
126
- "aria-controls": `accordion-panel--${ariaId}`,
127
- id: `accordion--${ariaId}`,
128
- className: styles.accordionHeader,
129
- onClick: onClick
130
- }, /*#__PURE__*/ $parcel$interopDefault($9pthv$react).createElement($9pthv$contentfulf36icons.ChevronDownTrimmedIcon, {
131
- className: styles.accordionHeaderIcon,
132
- variant: "secondary"
133
- }), children)));
128
+ as: element,
129
+ children: /*#__PURE__*/ $9pthv$reactjsxruntime.jsxs("button", {
130
+ type: "button",
131
+ "aria-expanded": isExpanded,
132
+ "aria-controls": `accordion-panel--${ariaId}`,
133
+ id: `accordion--${ariaId}`,
134
+ className: styles.accordionHeader,
135
+ onClick: onClick,
136
+ children: [
137
+ /*#__PURE__*/ $9pthv$reactjsxruntime.jsx($9pthv$contentfulf36icons.ChevronDownTrimmedIcon, {
138
+ className: styles.accordionHeaderIcon,
139
+ variant: "secondary"
140
+ }),
141
+ children
142
+ ]
143
+ })
144
+ }));
134
145
  };
135
146
 
136
147
 
@@ -141,69 +152,26 @@ const $a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41 = ({ children: children , onClic
141
152
 
142
153
  const $1911a31b860eeb50$export$2db50514b4b2c1ee = ()=>{
143
154
  return {
144
- accordionPanel: /*#__PURE__*/ $9pthv$emotion.css({
145
- boxSizing: 'border-box',
146
- overflow: 'hidden',
147
- height: '0',
148
- transition: `height ${$parcel$interopDefault($9pthv$contentfulf36tokens).transitionDurationDefault} ${$parcel$interopDefault($9pthv$contentfulf36tokens).transitionEasingDefault}, padding ${$parcel$interopDefault($9pthv$contentfulf36tokens).transitionDurationDefault} ${$parcel$interopDefault($9pthv$contentfulf36tokens).transitionEasingDefault}`
149
- }),
150
155
  accordionPanelContent: /*#__PURE__*/ $9pthv$emotion.css({
151
156
  width: '100%',
152
- padding: `${$parcel$interopDefault($9pthv$contentfulf36tokens).spacingXs} ${$parcel$interopDefault($9pthv$contentfulf36tokens).spacingM} ${$parcel$interopDefault($9pthv$contentfulf36tokens).spacingM}`
157
+ padding: `${($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingXs} ${($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingM} ${($parcel$interopDefault($9pthv$contentfulf36tokens)).spacingM}`
153
158
  })
154
159
  };
155
160
  };
156
161
 
157
162
 
158
- const $dc0312cfa0956395$export$7cad6f17fd6e117b = ({ children: children , isExpanded: isExpanded = false , ariaId: ariaId , testId: testId = 'cf-ui-accordion-panel' , ...rest })=>{
163
+ const $dc0312cfa0956395$export$7cad6f17fd6e117b = ({ children: children , isExpanded: isExpanded = false , ariaId: ariaId , testId: testId = 'cf-ui-accordion-panel' , ...otherProps })=>{
159
164
  const styles = $1911a31b860eeb50$export$2db50514b4b2c1ee();
160
- const panelEl = $9pthv$react.useRef(null);
161
- const getPanelContentHeight = ()=>{
162
- const { current: current } = panelEl;
163
- if (!current) // to keep the function return type as string only and
164
- // not overcomplicate things with non-nullable checks
165
- return '0px';
166
- return `${current.scrollHeight / parseInt($parcel$interopDefault($9pthv$contentfulf36tokens).fontBaseDefault, 10)}rem`; // converting height pixels into rem
167
- };
168
- $9pthv$react.useLayoutEffect(()=>{
169
- const { current: current } = panelEl;
170
- const handleTransitionEnd = ()=>{
171
- if (current) current.style.height = 'auto';
172
- };
173
- if (current) {
174
- if (isExpanded) {
175
- current.addEventListener('transitionend', handleTransitionEnd);
176
- requestAnimationFrame(function() {
177
- current.style.height = '0px';
178
- requestAnimationFrame(function() {
179
- current.style.height = getPanelContentHeight();
180
- });
181
- });
182
- } else requestAnimationFrame(function() {
183
- current.style.height = getPanelContentHeight();
184
- requestAnimationFrame(function() {
185
- current.style.height = '0px';
186
- });
187
- });
188
- }
189
- return ()=>{
190
- if (current) current.removeEventListener('transitionend', handleTransitionEnd);
191
- };
192
- }, [
193
- isExpanded
194
- ]);
195
- return(/*#__PURE__*/ $parcel$interopDefault($9pthv$react).createElement($9pthv$contentfulf36core.Box, {
196
- ...rest,
197
- testId: testId,
198
- id: `accordion-panel--${ariaId}`,
199
- role: "region",
165
+ return(/*#__PURE__*/ $9pthv$reactjsxruntime.jsx($9pthv$contentfulf36collapse.Collapse, {
166
+ "data-test-id": testId,
200
167
  "aria-labelledby": `accordion--${ariaId}`,
201
- "aria-hidden": !isExpanded,
202
- className: styles.accordionPanel,
203
- ref: panelEl
204
- }, /*#__PURE__*/ $parcel$interopDefault($9pthv$react).createElement("div", {
205
- className: styles.accordionPanelContent
206
- }, children)));
168
+ isExpanded: isExpanded,
169
+ ...otherProps,
170
+ children: /*#__PURE__*/ $9pthv$reactjsxruntime.jsx("div", {
171
+ className: styles.accordionPanelContent,
172
+ children: children
173
+ })
174
+ }));
207
175
  };
208
176
 
209
177
 
@@ -214,9 +182,9 @@ const $b70a2de4b5faa5c1$export$c4864364a487dfa = ({ className: className })=>({
214
182
  accordionItem: $9pthv$emotion.cx(/*#__PURE__*/ $9pthv$emotion.css({
215
183
  padding: '0',
216
184
  margin: '0',
217
- borderBottom: `1px solid ${$parcel$interopDefault($9pthv$contentfulf36tokens).colorElementMid}`,
185
+ borderBottom: `1px solid ${($parcel$interopDefault($9pthv$contentfulf36tokens)).colorElementMid}`,
218
186
  '&:first-child': {
219
- borderTop: `1px solid ${$parcel$interopDefault($9pthv$contentfulf36tokens).colorElementMid}`
187
+ borderTop: `1px solid ${($parcel$interopDefault($9pthv$contentfulf36tokens)).colorElementMid}`
220
188
  }
221
189
  }), className)
222
190
  })
@@ -234,24 +202,30 @@ const $b9a3851e41efa019$var$_AccordionItem = ({ title: title = 'Accordion Title'
234
202
  if (isExpanded && onCollapse) onCollapse();
235
203
  setIsExpanded(!isExpanded);
236
204
  };
237
- return(/*#__PURE__*/ $parcel$interopDefault($9pthv$react).createElement($9pthv$contentfulf36core.Box, {
205
+ return(/*#__PURE__*/ $9pthv$reactjsxruntime.jsxs($9pthv$contentfulf36core.Box, {
238
206
  as: "li",
239
207
  className: styles.accordionItem,
240
208
  testId: `${testId}-${id}`,
241
209
  ...otherProps,
242
- ref: ref
243
- }, /*#__PURE__*/ $parcel$interopDefault($9pthv$react).createElement($a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41, {
244
- onClick: handleOnClick,
245
- isExpanded: isExpanded,
246
- element: titleElement,
247
- ariaId: id,
248
- align: align
249
- }, title), /*#__PURE__*/ $parcel$interopDefault($9pthv$react).createElement($dc0312cfa0956395$export$7cad6f17fd6e117b, {
250
- ariaId: id,
251
- isExpanded: isExpanded
252
- }, children)));
210
+ ref: ref,
211
+ children: [
212
+ /*#__PURE__*/ $9pthv$reactjsxruntime.jsx($a14b9c8d0b0cbe0b$export$5e3e5deaaf81ee41, {
213
+ onClick: handleOnClick,
214
+ isExpanded: isExpanded,
215
+ element: titleElement,
216
+ ariaId: id,
217
+ align: align,
218
+ children: title
219
+ }),
220
+ /*#__PURE__*/ $9pthv$reactjsxruntime.jsx($dc0312cfa0956395$export$7cad6f17fd6e117b, {
221
+ ariaId: id,
222
+ isExpanded: isExpanded,
223
+ children: children
224
+ })
225
+ ]
226
+ }));
253
227
  };
254
- const $b9a3851e41efa019$export$d99097c13d4dac9f = /*#__PURE__*/ $parcel$interopDefault($9pthv$react).forwardRef($b9a3851e41efa019$var$_AccordionItem);
228
+ const $b9a3851e41efa019$export$d99097c13d4dac9f = /*#__PURE__*/ ($parcel$interopDefault($9pthv$react)).forwardRef($b9a3851e41efa019$var$_AccordionItem);
255
229
 
256
230
 
257
231
  const $485e20d95dcb1fa7$export$a766cd26d0d69044 = $6b1aad2dfaf9ce0d$export$a766cd26d0d69044;
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;;;;;AGGO,KAAA,CAAMc,yCAAkB,IAAI,CAAnC,YAAqCK,SAAAA,EAAa,CAAhB,IAA4C,CAA5B;QAChDO,SAAS,EAAE,iBAAA,CAAA,EACT,AADS,SACT,AADS,EACT,CAAA,kBAAA,CAAI,CADNA;YAEIQ,SAAS,EAAE,CADT;YAEFC,OAAO,EAAE,CAFP;YAGFC,MAAM,EAAE,CAHN;YAIFC,SAAS,EAAE,CAJT;YAKF,CAAA,gBAAiB,CAAjB;gBACEC,SAAS,GAAG,UAAA,EAAYL,kDAAM,CAACM,OAAQ;YADxB,CAAA;QALf,CAAJ,GASApB,SAVS;IADiE,CAA5C;;;;ADelC,KAAA,CAAMD,gCAAU,IACd,CADF,QAEIH,KAAK,GAAG,CADV,iBAEEC,QAFF,cAGEG,SAHF,WAIEC,MAAM,GAAG,CAJX,sBAKKC,UAAH,CACCpB,CAPc,EAQjBqB,GARiB,GASd,CARH;IASA,KAAA,CAAMG,MAAM,GAAGX,yCAAkB,CAAC,CAAlC;mBAAoCK,SAAAA;IAAF,CAAD;IACjC,MAAA,kEACG,4BAAD;QACE,EAAA,EAAG,CADL;QAEE,SAAA,EAAWM,MAAM,CAACC,SAAR;QACV,MAAA,EAAQN,MAAD;WACHC,UAAJ;QACA,GAAA,EAAKC,GAAD;OAEHX,oCAAK,CAACgB,QAAN,CAAeC,GAAf,CAAmBZ,QAAnB,GAA8Ba,KAAD,GAAW,CAA/C;QACQ,EAAA,gBAAIlB,oCAAK,CAACmB,cAAN,CAAqBD,KAArB,GACF,MAAA,eAAOlB,oCAAK,CAACoB,YAAN,CAAmBF,KAAnB,EAA0B,CAAjC;mBACEd,KAAAA;QAD+B,CAA1B;QAIT,MAAA,CAAOc,KAAP;IACD,CAPA;AAUN,CA7BD;AA+BO,KAAA,CAAM7B,yCAAS,iBAAGW,oCAAK,CAACqB,UAAN,CAAiBd,gCAAjB;;;;;;;;;;;AIzCzB,KAAA,CAAMiD,qCAAe,IAAI,CAAzB,QAA2BpD,KAAAA,EAASmD,CAAZ,GACtB,iBAAA,CAAA,EACE,AADF,SACE,AADF,EACE,CAAA,kBAAA,CAAI,CAFiB;QAGnBE,OAAO,EAAE,CADP;QAEFC,aAAa,EAAE,CAFb;QAGFC,UAAU,EAAE,CAHV;QAIFC,MAAM,EAAE,CAJN;QAKFpC,OAAO,EAAEF,kDAAM,CAACuC,QALd;QAMFC,eAAe,EAAE,CANf;QAOFC,UAAU,EAAEzC,kDAAM,CAAC0C,gBAPjB;QAQFC,QAAQ,EAAE3C,kDAAM,CAAC4C,SARf;QASFC,UAAU,EAAE7C,kDAAM,CAAC8C,kBATjB;QAUFC,UAAU,EAAE/C,kDAAM,CAACgD,WAVjB;QAWFC,KAAK,EAAEjD,kDAAM,CAACkD,OAXZ;QAYFC,KAAK,EAAE,CAZL;QAaFC,QAAQ,EAAE,CAbR;QAcFC,MAAM,EAAE,CAdN;QAeFC,UAAU,GAAG,iBAAA,EAAmBtD,kDAAM,CAACuD,yBAA0B,CAAA,CAAA,EAAGvD,kDAAM,CAACwD,uBAAwB;QACnG,CAAA,UAAW,CAAX;YACEhB,eAAe,EAAExC,kDAAM,CAACyD,OAAxBjB;QADS,CAhBT;QAmBF,CAAA,UAAW,CAAX;YACEkB,OAAO,EAAE,CADA;YAETlB,eAAe,EAAExC,kDAAM,CAACyD,OAAxBjB;QAFS,CAAA;IAnBT,CAAJ,GAwBA1D,KAAK,KAAK,CAAV,QAAA,EACE,AADF,SACE,AADF,EACE,CAAA,kBAzBE,CAAA,CAAA;QAyBF,IAAA,EAAA,CAAA;QAAA,MAAA,EAAA,CAAA;IAAA,CAAA;;AAMN,KAAA,CAAM6E,mCAAa,IAAI,CAAvB,QAAyB7E,KAAF,eAASqC,UAAAA,EAAcc,CAAxB,GACpB,iBAAA,CAAA,EACE,AADF,SACE,AADF,EACE,CAAA,kBAAA,CAAI,CAFe;QAGjB2B,SAAS,EAAE,CADT;QAEFN,UAAU,GAAG,UAAA,EAAYtD,kDAAM,CAACuD,yBAA0B,CAAA,CAAA,EAAGvD,kDAAM,CAACwD,uBAAwB;IAF1F,CAAJ,GAIA1E,KAAK,KAAK,CAAV,QAAA,EAAmB,AAAnB,SAAmB,AAAnB,EAAmB,CAAA,kBAAA,CAAI,CAJnB;QAIqB+E,UAAU,EAAE7D,kDAAM,CAACuC,QAAnBsB;IAAF,CAAJ,GACnB/E,KAAK,KAAK,CAAV,UAAA,EAAqB,AAArB,SAAqB,AAArB,EAAqB,CAAA,kBAAA,CAAI,CADF;QACIgF,WAAW,EAAE9D,kDAAM,CAACuC,QAApBuB;IAAF,CAAJ,GACrB3C,UAAU,IAAA,EACR,AADQ,SACR,AADQ,EACR,CAAA,kBAFuB,CAAA,CAAA;QAEvB,IAAA,EAAA,CAAA;QAAA,MAAA,EAAA,CAAA;IAAA,CAAA;;AAKC,KAAA,CAAMM,yCAAwB,IAAIsC,KAAD,IAAwB,CAAhE;QACEhC,eAAe,EAAEG,qCAAe,CAAC6B,KAAD;QAChC/B,mBAAmB,EAAE2B,mCAAa,CAACI,KAAD;IAF4B,CAAxB;;;;ADpBjC,KAAA,CAAM9F,yCAAe,IAAI,CAAhC,WACEc,QAD8B,YAE9B2C,OAF8B,eAG9BP,UAAU,GAAG,KAHiB,WAI9BS,MAJ8B,YAK9BC,OAAO,GAAG,CALoB,aAM9B/C,KAAK,GAAG,CANsB,eAO9BK,MAAM,GAAG,CAPqB,6BAQ3B2C,IAAH,CACC5D,CAT4B,GASH,CATI;IAU9B,KAAA,CAAMsB,MAAM,GAAGiC,yCAAwB,CAAC,CAAxC;eAA0C3C,KAAF;oBAASqC,UAAAA;IAAT,CAAD;IAEvC,MAAA,kEACG,yCAAD;WAAgBW,IAAJ;QAAU,MAAA,EAAQ3C,MAAD;QAAS,YAAA,EAAa,CAAnD;QAA0D,EAAA,EAAI0C,OAAD;wEAC1D,CAAD;QACE,IAAA,EAAK,CADP;QAEE,CAAA,gBAAeV,UAAD;QACd,CAAA,iBAAgB,iBAAA,EAAmBS,MAAO;QAC1C,EAAA,GAAK,WAAA,EAAaA,MAAO;QACzB,SAAA,EAAWpC,MAAM,CAACuC,eAAR;QACV,OAAA,EAASL,OAAD;wEAEP,gDAAD;QACE,SAAA,EAAWlC,MAAM,CAACwC,mBAAR;QACV,OAAA,EAAQ,CAFV;QAICjD,QAAD;AAIP,CA9BM;;;;;;;;AGhCA,KAAA,CAAMoF,yCAAuB,OAAS,CAA7C;IACE,MAAA,CAAO,CAAP;QACEc,cAAc,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,kBAAA,CAAI,CAApBA;YACEhF,SAAS,EAAE,CADO;YAElBkF,QAAQ,EAAE,CAFQ;YAGlBN,MAAM,EAAE,CAHU;YAIlBvB,UAAU,GAAG,OAAA,EAAStD,kDAAM,CAACuD,yBAA0B,CAAA,CAAA,EAAGvD,kDAAM,CAACwD,uBAAwB,CAAA,UAAA,EAAYxD,kDAAM,CAACuD,yBAA0B,CAAA,CAAA,EAAGvD,kDAAM,CAACwD,uBAAwB;QAJtJ,CAAJ;QAMhB0B,qBAAqB,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,kBAAA,CAAI,CAA3BA;YACE/B,KAAK,EAAE,CADkB;YAEzBjD,OAAO,KAAKF,kDAAM,CAACoF,SAAU,CAAA,CAAA,EAAGpF,kDAAM,CAACuC,QAAS,CAAA,CAAA,EAAGvC,kDAAM,CAACuC,QAAS;QAF1C,CAAJ;IAPlB,CAAP;AAYD,CAbM;;;ADmBA,KAAA,CAAMlE,yCAAc,IAA6B,CAAxD,WACEU,QADsD,eAEtDoC,UAAU,GAAG,KAFyC,WAGtDS,MAHsD,WAItDzC,MAAM,GAAG,CAJ6C,4BAKnD2C,IAAH,CACCxD,CANoD,GAM5B,CAN6B;IAOtD,KAAA,CAAMkB,MAAM,GAAG2E,yCAAuB;IACtC,KAAA,CAAMC,OAAO,GAAGF,mBAAM,CAAiB,IAAjB;IAEtB,KAAA,CAAMI,qBAAqB,OAAS,CAApC;QACE,KAAA,CAAM,CAAN,UAAQC,OAAAA,EAAF,CAAA,GAAcH,OAApB;QAEA,EAAA,GAAKG,OAAL,EACE,EAAA,AAAA,oDAAA;QACA,EAAA,AAAA,mDAAA;QACA,MAAA,CAAO,CAAP;QAGF,MAAA,IAAUA,OAAO,CAACC,YAAR,GAAuBC,QAAQ,CAACzE,kDAAM,CAAC0E,eAAR,EAAyB,EAAzB,EAA6B,GAAA,EAAM,CAA5E,AAA4E,EAA5E,AAA4E,kCAA5E;IACD,CAVD;IAYAT,4BAAe,KAAO,CAAtBA;QACE,KAAA,CAAM,CAAN,UAAQM,OAAAA,EAAF,CAAA,GAAcH,OAApB;QAEA,KAAA,CAAMO,mBAAmB,OAAS,CAAlC;YACE,EAAA,EAAIJ,OAAJ,EACEA,OAAO,CAACK,KAAR,CAAcC,MAAd,GAAuB,CAAvB;QAEH,CAJD;QAMA,EAAA,EAAIN,OAAJ;YACE,EAAA,EAAIpD,UAAJ,EAAgB,CAAhB;gBACEoD,OAAO,CAACO,gBAAR,CAAyB,CAAzB,gBAA0CH,mBAA1C;gBAEAI,qBAAqB,CAAC,QAAA,GAAY,CAAlCA;oBACER,OAAO,CAACK,KAAR,CAAcC,MAAd,GAAuB,CAAvB;oBAEAE,qBAAqB,CAAC,QAAA,GAAY,CAAlCA;wBACER,OAAO,CAACK,KAAR,CAAcC,MAAd,GAAuBP,qBAAqB;oBAC7C,CAFoB;gBAGtB,CANoB;YAOtB,CAVD,MAWES,qBAAqB,CAAC,QAAA,GAAY,CAAlCA;gBACER,OAAO,CAACK,KAAR,CAAcC,MAAd,GAAuBP,qBAAqB;gBAE5CS,qBAAqB,CAAC,QAAA,GAAY,CAAlCA;oBACER,OAAO,CAACK,KAAR,CAAcC,MAAd,GAAuB,CAAvB;gBACD,CAFoB;YAGtB,CANoB;;QAUzB,MAAA,KAAa,CAAb;YACE,EAAA,EAAIN,OAAJ,EACEA,OAAO,CAACS,mBAAR,CAA4B,CAA5B,gBAA6CL,mBAA7C;QAEH,CAJD;IAKD,CApCc,EAoCZ,CAACxD;QAAAA,UAAD;IAAA,CApCY;IAsCf,MAAA,kEACG,4BAAD;WACMW,IAAJ;QACA,MAAA,EAAQ3C,MAAD;QACP,EAAA,GAAK,iBAAA,EAAmByC,MAAO;QAC/B,IAAA,EAAK,CAJP;QAKE,CAAA,mBAAkB,WAAA,EAAaA,MAAO;QACtC,CAAA,eAAcT,UAAF;QACZ,SAAA,EAAW3B,MAAM,CAACyF,cAAR;QACV,GAAA,EAAKb,OAAD;wEAEH,CAAD;QAAK,SAAA,EAAW5E,MAAM,CAAC0F,qBAAR;OAAgCnG,QAAD;AAGnD,CA1EM;;;;;;AEnBA,KAAA,CAAM2B,wCAAsB,IAAI,CAAvC,YACExB,SAAAA,EACC,CAFmC,IAI/B,CAFJ;QAGDoC,aAAa,EAAE,iBAAA,CAAA,EACb,AADa,SACb,AADa,EACb,CAAA,kBAAA,CAAI,CADNA;YAEIpB,OAAO,EAAE,CADP;YAEFC,MAAM,EAAE,CAFN;YAGFkF,YAAY,GAAG,UAAA,EAAYrF,kDAAM,CAACsF,eAAgB;YAClD,CAAA,gBAAiB,CAAjB;gBACEjF,SAAS,GAAG,UAAA,EAAYL,kDAAM,CAACsF,eAAgB;YADhC,CAAA;QAJf,CAAJ,GAQApG,SATa;IADV,CAJ+B;;;;ALkCtC,KAAA,CAAM8B,oCAAc,IAClB,CADF,QAEIL,KAAK,GAAG,CADV,iCAEEC,YAAY,GAAG,CAFjB,cAGEzB,MAAM,GAAG,CAHX,kCAIE0B,QAJF,eAKEE,UALF,aAMEhC,QANF,UAOED,KAAK,GAAG,CAPV,kBAQEI,SARF,MASKE,UAAH,CACChB,CAXkB,EAYrBiB,GAZqB,GAalB,CAZH;IAaA,KAAA,CAAMG,MAAM,GAAGkB,wCAAsB,CAAC,CAAtC;mBAAwCxB,SAAAA;IAAF,CAAD;IACrC,KAAA,CAAMgC,EAAE,GAAGT,8BAAK;IAChB,KAAA,EAAOU,UAAD,EAAaC,aAAb,IAA8Bb,qBAAQ,CAAC,KAAD;IAE5C,KAAA,CAAMc,aAAa,OAAS,CAA5B;QACE,EAAA,GAAKF,UAAD,IAAeN,QAAnB,EACEA,QAAQ;QAEV,EAAA,EAAIM,UAAU,IAAIJ,UAAlB,EACEA,UAAU;QAGZK,aAAa,EAAED,UAAF;IACd,CATD;IAWA,MAAA,kEACG,4BAAD;QACE,EAAA,EAAG,CADL;QAEE,SAAA,EAAW3B,MAAM,CAAC8B,aAAR;QACV,MAAA,KAAWnC,MAAO,CAAA,CAAA,EAAG+B,EAAG;WACpB9B,UAAJ;QACA,GAAA,EAAKC,GAAD;wEAEH,yCAAD;QACE,OAAA,EAASgC,aAAD;QACR,UAAA,EAAYF,UAAD;QACX,OAAA,EAASP,YAAD;QACR,MAAA,EAAQM,EAAD;QACP,KAAA,EAAOpC,KAAD;OAEL6B,KAAD,oEAGD,yCAAD;QAAgB,MAAA,EAAQO,EAAD;QAAK,UAAA,EAAYC,UAAD;OACpCpC,QAAD;AAIP,CApDD;AAsDO,KAAA,CAAMZ,yCAAa,iBAAGO,oCAAK,CAACqB,UAAN,CAAiBiB,oCAAjB;;;AHpFtB,KAAA,CAAMjD,yCAAS,GAAGQ,yCAAiB;AAC1CR,yCAAS,CAACU,IAAV,GAAiBN,yCAAjB","sources":["packages/components/accordion/src/index.ts","packages/components/accordion/src/CompoundAccordion.tsx","packages/components/accordion/src/Accordion.tsx","packages/components/accordion/src/Accordion.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.styles.ts"],"sourcesContent":["export { Accordion } from './CompoundAccordion';\nexport type { AccordionProps } from './Accordion';\nexport { AccordionHeader } from './AccordionHeader/AccordionHeader';\nexport type { AccordionHeaderProps } from './AccordionHeader/AccordionHeader';\nexport { AccordionItem } from './AccordionItem/AccordionItem';\nexport type { AccordionItemProps } from './AccordionItem/AccordionItem';\nexport { AccordionPanel } from './AccordionPanel/AccordionPanel';\nexport type { AccordionPanelProps } from './AccordionPanel/AccordionPanel';\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n","import React from 'react';\nimport { Box } from '@contentful/f36-core';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n /**\n * Specify the alignment of the chevron inside the accordion header\n * @default end\n */\n align?: 'start' | 'end';\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n}\n\nconst _Accordion = (\n {\n align = 'end',\n children,\n className,\n testId = 'cf-ui-accordion',\n ...otherProps\n }: AccordionProps,\n ref: React.Ref<HTMLUListElement>,\n) => {\n const styles = getAccordionStyles({ className });\n return (\n <Box\n as=\"ul\"\n className={styles.accordion}\n testId={testId}\n {...otherProps}\n ref={ref}\n >\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n align,\n });\n }\n return child;\n })}\n </Box>\n );\n};\n\nexport const Accordion = React.forwardRef(_Accordion);\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n accordion: cx(\n css({\n boxSizing: 'border-box',\n padding: '0',\n margin: '0',\n listStyle: 'none',\n '&:first-child': {\n borderTop: `1px solid ${tokens.gray300}`,\n },\n }),\n className,\n ),\n});\n","import React, { useState } from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { useId, Box } from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n /**\n * The accordion title\n */\n title?: React.ReactNode;\n /**\n * The heading element that will be used by the AccordionHeader\n */\n titleElement?: HeadingElement;\n /**\n * The children of the AccordionItem are in fact the content of the accordion\n */\n children?: React.ReactNode;\n /**\n * A function to be called when the accordion item is opened\n */\n onExpand?: Function;\n /**\n * A function to be called when the accordion item is closed\n */\n onCollapse?: Function;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n}\n\nconst _AccordionItem = (\n {\n title = 'Accordion Title',\n titleElement = 'h2',\n testId = 'cf-ui-accordion-item',\n onExpand,\n onCollapse,\n children,\n align = 'end',\n className,\n ...otherProps\n }: AccordionItemProps,\n ref: React.Ref<HTMLLIElement>,\n) => {\n const styles = getAccordionItemStyles({ className });\n const id = useId();\n const [isExpanded, setIsExpanded] = useState(false);\n\n const handleOnClick = () => {\n if (!isExpanded && onExpand) {\n onExpand();\n }\n if (isExpanded && onCollapse) {\n onCollapse();\n }\n\n setIsExpanded(!isExpanded);\n };\n\n return (\n <Box\n as=\"li\"\n className={styles.accordionItem}\n testId={`${testId}-${id}`}\n {...otherProps}\n ref={ref}\n >\n <AccordionHeader\n onClick={handleOnClick}\n isExpanded={isExpanded}\n element={titleElement}\n ariaId={id}\n align={align}\n >\n {title}\n </AccordionHeader>\n\n <AccordionPanel ariaId={id} isExpanded={isExpanded}>\n {children}\n </AccordionPanel>\n </Box>\n );\n};\n\nexport const AccordionItem = React.forwardRef(_AccordionItem);\n","import React from 'react';\nimport { Subheading } from '@contentful/f36-typography';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { ChevronDownTrimmedIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\n\nexport interface AccordionHeaderProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * The function that will be called once the user clicks on the accordion title\n */\n onClick: VoidFunction;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n /**\n * The heading element that will be used by the Subheading component\n */\n element?: HeadingElement;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n}\n\nexport const AccordionHeader = ({\n children,\n onClick,\n isExpanded = false,\n ariaId,\n element = 'h2',\n align = 'end',\n testId = 'cf-ui-accordion-header',\n ...rest\n}: AccordionHeaderProps) => {\n const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n return (\n <Subheading {...rest} testId={testId} marginBottom=\"none\" as={element}>\n <button\n type=\"button\"\n aria-expanded={isExpanded}\n aria-controls={`accordion-panel--${ariaId}`}\n id={`accordion--${ariaId}`}\n className={styles.accordionHeader}\n onClick={onClick}\n >\n <ChevronDownTrimmedIcon\n className={styles.accordionHeaderIcon}\n variant=\"secondary\"\n />\n {children}\n </button>\n </Subheading>\n );\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n align: 'start' | 'end';\n isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n cx(\n css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n border: '0',\n padding: tokens.spacingM,\n backgroundColor: 'transparent',\n fontFamily: tokens.fontStackPrimary,\n fontSize: tokens.fontSizeL,\n fontWeight: tokens.fontWeightDemiBold,\n lineHeight: tokens.lineHeightL,\n color: tokens.gray800,\n width: '100%',\n minWidth: '9px',\n cursor: 'pointer',\n transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n '&:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:focus': {\n outline: 'none',\n backgroundColor: tokens.gray100,\n },\n }),\n align === 'end' &&\n css({\n flexDirection: 'row-reverse',\n justifyContent: 'space-between',\n }),\n );\n\nconst getIconStyles = ({ align, isExpanded }: StyleProps) =>\n cx(\n css({\n transform: 'rotate(0deg)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n align === 'end' && css({ marginLeft: tokens.spacingM }),\n align === 'start' && css({ marginRight: tokens.spacingM }),\n isExpanded &&\n css({\n transform: 'rotate(180deg)',\n }),\n );\n\nexport const getAccordionHeaderStyles = (props: StyleProps) => ({\n accordionHeader: getHeaderStyles(props),\n accordionHeaderIcon: getIconStyles(props),\n});\n","import React, { FC, useLayoutEffect, useRef } from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport type { CommonProps } from '@contentful/f36-core';\nimport { Box } from '@contentful/f36-core';\n\nimport { getAccordionPanelStyles } from './AccordionPanel.styles';\n\nexport interface AccordionPanelProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n}\n\nexport const AccordionPanel: FC<AccordionPanelProps> = ({\n children,\n isExpanded = false,\n ariaId,\n testId = 'cf-ui-accordion-panel',\n ...rest\n}: AccordionPanelProps) => {\n const styles = getAccordionPanelStyles();\n const panelEl = useRef<HTMLDivElement>(null);\n\n const getPanelContentHeight = () => {\n const { current } = panelEl;\n\n if (!current) {\n // to keep the function return type as string only and\n // not overcomplicate things with non-nullable checks\n return '0px';\n }\n\n return `${current.scrollHeight / parseInt(tokens.fontBaseDefault, 10)}rem`; // converting height pixels into rem\n };\n\n useLayoutEffect(() => {\n const { current } = panelEl;\n\n const handleTransitionEnd = () => {\n if (current) {\n current.style.height = 'auto';\n }\n };\n\n if (current) {\n if (isExpanded) {\n current.addEventListener('transitionend', handleTransitionEnd);\n\n requestAnimationFrame(function () {\n current.style.height = '0px';\n\n requestAnimationFrame(function () {\n current.style.height = getPanelContentHeight();\n });\n });\n } else {\n requestAnimationFrame(function () {\n current.style.height = getPanelContentHeight();\n\n requestAnimationFrame(function () {\n current.style.height = '0px';\n });\n });\n }\n }\n\n return () => {\n if (current) {\n current.removeEventListener('transitionend', handleTransitionEnd);\n }\n };\n }, [isExpanded]);\n\n return (\n <Box\n {...rest}\n testId={testId}\n id={`accordion-panel--${ariaId}`}\n role=\"region\"\n aria-labelledby={`accordion--${ariaId}`}\n aria-hidden={!isExpanded}\n className={styles.accordionPanel}\n ref={panelEl}\n >\n <div className={styles.accordionPanelContent}>{children}</div>\n </Box>\n );\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n return {\n accordionPanel: css({\n boxSizing: 'border-box',\n overflow: 'hidden',\n height: '0',\n transition: `height ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}, padding ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n accordionPanelContent: css({\n width: '100%',\n padding: `${tokens.spacingXs} ${tokens.spacingM} ${tokens.spacingM}`,\n }),\n };\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionItemStyles = ({\n className,\n}: {\n className?: string;\n}) => ({\n accordionItem: cx(\n css({\n padding: '0',\n margin: '0',\n borderBottom: `1px solid ${tokens.colorElementMid}`,\n '&:first-child': {\n borderTop: `1px solid ${tokens.colorElementMid}`,\n },\n }),\n className,\n ),\n});\n"],"names":["Accordion","AccordionProps","AccordionHeader","AccordionHeaderProps","AccordionItem","AccordionItemProps","AccordionPanel","AccordionPanelProps","OriginalAccordion","CompoundAccordion","Item","React","Box","CommonProps","getAccordionStyles","align","children","ReactNode","_Accordion","className","testId","otherProps","ref","Ref","HTMLUListElement","styles","accordion","Children","map","child","isValidElement","cloneElement","forwardRef","tokens","boxSizing","padding","margin","listStyle","borderTop","gray300","useState","HeadingElement","useId","getAccordionItemStyles","title","titleElement","onExpand","Function","onCollapse","_AccordionItem","HTMLLIElement","id","isExpanded","setIsExpanded","handleOnClick","accordionItem","Subheading","ChevronDownTrimmedIcon","getAccordionHeaderStyles","onClick","VoidFunction","ariaId","element","rest","accordionHeader","accordionHeaderIcon","StyleProps","getHeaderStyles","display","flexDirection","alignItems","border","spacingM","backgroundColor","fontFamily","fontStackPrimary","fontSize","fontSizeL","fontWeight","fontWeightDemiBold","lineHeight","lineHeightL","color","gray800","width","minWidth","cursor","transition","transitionDurationDefault","transitionEasingDefault","gray100","outline","getIconStyles","transform","marginLeft","marginRight","props","FC","useLayoutEffect","useRef","getAccordionPanelStyles","panelEl","HTMLDivElement","getPanelContentHeight","current","scrollHeight","parseInt","fontBaseDefault","handleTransitionEnd","style","height","addEventListener","requestAnimationFrame","removeEventListener","accordionPanel","accordionPanelContent","overflow","spacingXs","borderBottom","colorElementMid"],"version":3,"file":"main.js.map"}
1
+ {"mappings":"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","sources":["packages/components/accordion/src/index.ts","packages/components/accordion/src/CompoundAccordion.tsx","packages/components/accordion/src/Accordion.tsx","packages/components/accordion/src/Accordion.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.styles.ts"],"sourcesContent":["export { Accordion } from './CompoundAccordion';\nexport type { AccordionProps } from './Accordion';\nexport { AccordionHeader } from './AccordionHeader/AccordionHeader';\nexport type { AccordionHeaderProps } from './AccordionHeader/AccordionHeader';\nexport { AccordionItem } from './AccordionItem/AccordionItem';\nexport type { AccordionItemProps } from './AccordionItem/AccordionItem';\nexport { AccordionPanel } from './AccordionPanel/AccordionPanel';\nexport type { AccordionPanelProps } from './AccordionPanel/AccordionPanel';\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n","import React from 'react';\nimport { Box } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n /**\n * Specify the alignment of the chevron inside the accordion header\n * @default end\n */\n align?: 'start' | 'end';\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n}\n\nconst _Accordion = (\n {\n align = 'end',\n children,\n className,\n testId = 'cf-ui-accordion',\n ...otherProps\n }: ExpandProps<AccordionProps>,\n ref: React.Ref<HTMLUListElement>,\n) => {\n const styles = getAccordionStyles({ className });\n return (\n <Box\n as=\"ul\"\n className={styles.accordion}\n testId={testId}\n {...otherProps}\n ref={ref}\n >\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n align,\n });\n }\n return child;\n })}\n </Box>\n );\n};\n\nexport const Accordion = React.forwardRef(_Accordion);\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n accordion: cx(\n css({\n boxSizing: 'border-box',\n padding: '0',\n margin: '0',\n listStyle: 'none',\n '&:first-child': {\n borderTop: `1px solid ${tokens.gray300}`,\n },\n }),\n className,\n ),\n});\n","import React, { useState } from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { useId, Box } from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n /**\n * The accordion title\n */\n title?: React.ReactNode;\n /**\n * The heading element that will be used by the AccordionHeader\n */\n titleElement?: HeadingElement;\n /**\n * The children of the AccordionItem are in fact the content of the accordion\n */\n children?: React.ReactNode;\n /**\n * A function to be called when the accordion item is opened\n */\n onExpand?: Function;\n /**\n * A function to be called when the accordion item is closed\n */\n onCollapse?: Function;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n}\n\nconst _AccordionItem = (\n {\n title = 'Accordion Title',\n titleElement = 'h2',\n testId = 'cf-ui-accordion-item',\n onExpand,\n onCollapse,\n children,\n align = 'end',\n className,\n ...otherProps\n }: ExpandProps<AccordionItemProps>,\n ref: React.Ref<HTMLLIElement>,\n) => {\n const styles = getAccordionItemStyles({ className });\n const id = useId();\n const [isExpanded, setIsExpanded] = useState(false);\n\n const handleOnClick = () => {\n if (!isExpanded && onExpand) {\n onExpand();\n }\n if (isExpanded && onCollapse) {\n onCollapse();\n }\n\n setIsExpanded(!isExpanded);\n };\n\n return (\n <Box\n as=\"li\"\n className={styles.accordionItem}\n testId={`${testId}-${id}`}\n {...otherProps}\n ref={ref}\n >\n <AccordionHeader\n onClick={handleOnClick}\n isExpanded={isExpanded}\n element={titleElement}\n ariaId={id}\n align={align}\n >\n {title}\n </AccordionHeader>\n\n <AccordionPanel ariaId={id} isExpanded={isExpanded}>\n {children}\n </AccordionPanel>\n </Box>\n );\n};\n\nexport const AccordionItem = React.forwardRef(_AccordionItem);\n","import React from 'react';\nimport { Subheading } from '@contentful/f36-typography';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { ChevronDownTrimmedIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\n\nexport interface AccordionHeaderProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * The function that will be called once the user clicks on the accordion title\n */\n onClick: VoidFunction;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n /**\n * The heading element that will be used by the Subheading component\n */\n element?: HeadingElement;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n}\n\nexport const AccordionHeader = ({\n children,\n onClick,\n isExpanded = false,\n ariaId,\n element = 'h2',\n align = 'end',\n testId = 'cf-ui-accordion-header',\n ...rest\n}: AccordionHeaderProps) => {\n const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n return (\n <Subheading {...rest} testId={testId} marginBottom=\"none\" as={element}>\n <button\n type=\"button\"\n aria-expanded={isExpanded}\n aria-controls={`accordion-panel--${ariaId}`}\n id={`accordion--${ariaId}`}\n className={styles.accordionHeader}\n onClick={onClick}\n >\n <ChevronDownTrimmedIcon\n className={styles.accordionHeaderIcon}\n variant=\"secondary\"\n />\n {children}\n </button>\n </Subheading>\n );\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n align: 'start' | 'end';\n isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n cx(\n css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n border: '0',\n padding: tokens.spacingM,\n backgroundColor: 'transparent',\n fontFamily: tokens.fontStackPrimary,\n fontSize: tokens.fontSizeL,\n fontWeight: tokens.fontWeightDemiBold,\n lineHeight: tokens.lineHeightL,\n color: tokens.gray800,\n width: '100%',\n minWidth: '9px',\n cursor: 'pointer',\n transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n '&:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:focus': {\n outline: 'none',\n backgroundColor: tokens.gray100,\n },\n }),\n align === 'end' &&\n css({\n flexDirection: 'row-reverse',\n justifyContent: 'space-between',\n }),\n );\n\nconst getIconStyles = ({ align, isExpanded }: StyleProps) =>\n cx(\n css({\n transform: 'rotate(0deg)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n align === 'end' && css({ marginLeft: tokens.spacingM }),\n align === 'start' && css({ marginRight: tokens.spacingM }),\n isExpanded &&\n css({\n transform: 'rotate(180deg)',\n }),\n );\n\nexport const getAccordionHeaderStyles = (props: StyleProps) => ({\n accordionHeader: getHeaderStyles(props),\n accordionHeaderIcon: getIconStyles(props),\n});\n","import React, { FC } from 'react';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Collapse } from '@contentful/f36-collapse';\n\nimport { getAccordionPanelStyles } from './AccordionPanel.styles';\n\nexport interface AccordionPanelProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n}\n\nexport const AccordionPanel: FC<ExpandProps<AccordionPanelProps>> = ({\n children,\n isExpanded = false,\n ariaId,\n testId = 'cf-ui-accordion-panel',\n ...otherProps\n}: AccordionPanelProps) => {\n const styles = getAccordionPanelStyles();\n\n return (\n <Collapse\n data-test-id={testId}\n aria-labelledby={`accordion--${ariaId}`}\n isExpanded={isExpanded}\n {...otherProps}\n >\n <div className={styles.accordionPanelContent}>{children}</div>\n </Collapse>\n );\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n return {\n accordionPanelContent: css({\n width: '100%',\n padding: `${tokens.spacingXs} ${tokens.spacingM} ${tokens.spacingM}`,\n }),\n };\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionItemStyles = ({\n className,\n}: {\n className?: string;\n}) => ({\n accordionItem: cx(\n css({\n padding: '0',\n margin: '0',\n borderBottom: `1px solid ${tokens.colorElementMid}`,\n '&:first-child': {\n borderTop: `1px solid ${tokens.colorElementMid}`,\n },\n }),\n className,\n ),\n});\n"],"names":["Accordion","AccordionProps","AccordionHeader","AccordionHeaderProps","AccordionItem","AccordionItemProps","AccordionPanel","AccordionPanelProps","OriginalAccordion","CompoundAccordion","Item","React","Box","CommonProps","ExpandProps","getAccordionStyles","align","children","ReactNode","_Accordion","className","testId","otherProps","ref","Ref","HTMLUListElement","styles","accordion","Children","map","child","isValidElement","cloneElement","forwardRef","tokens","boxSizing","padding","margin","listStyle","borderTop","gray300","useState","HeadingElement","useId","getAccordionItemStyles","title","titleElement","onExpand","Function","onCollapse","_AccordionItem","HTMLLIElement","id","isExpanded","setIsExpanded","handleOnClick","accordionItem","Subheading","ChevronDownTrimmedIcon","getAccordionHeaderStyles","onClick","VoidFunction","ariaId","element","rest","accordionHeader","accordionHeaderIcon","StyleProps","getHeaderStyles","display","flexDirection","alignItems","border","spacingM","backgroundColor","fontFamily","fontStackPrimary","fontSize","fontSizeL","fontWeight","fontWeightDemiBold","lineHeight","lineHeightL","color","gray800","width","minWidth","cursor","transition","transitionDurationDefault","transitionEasingDefault","gray100","outline","getIconStyles","transform","marginLeft","marginRight","props","FC","Collapse","getAccordionPanelStyles","accordionPanelContent","spacingXs","borderBottom","colorElementMid"],"version":3,"file":"main.js.map"}
package/dist/module.js CHANGED
@@ -1,9 +1,12 @@
1
- import $jACei$react, {useState as $jACei$useState, useRef as $jACei$useRef, useLayoutEffect as $jACei$useLayoutEffect} from "react";
1
+ import {jsx as $jACei$jsx, jsxs as $jACei$jsxs} from "react/jsx-runtime";
2
+ import $jACei$react, {useState as $jACei$useState} from "react";
2
3
  import {Box as $jACei$Box, useId as $jACei$useId} from "@contentful/f36-core";
3
4
  import {cx as $jACei$cx, css as $jACei$css} from "emotion";
4
5
  import $jACei$contentfulf36tokens from "@contentful/f36-tokens";
5
6
  import {Subheading as $jACei$Subheading} from "@contentful/f36-typography";
6
7
  import {ChevronDownTrimmedIcon as $jACei$ChevronDownTrimmedIcon} from "@contentful/f36-icons";
8
+ import {Collapse as $jACei$Collapse} from "@contentful/f36-collapse";
9
+
7
10
 
8
11
 
9
12
 
@@ -28,18 +31,19 @@ const $a517c4a963657a24$var$_Accordion = ({ align: align = 'end' , children: chi
28
31
  const styles = $d678e0ec669f4067$export$af90c4d6702a6ca7({
29
32
  className: className
30
33
  });
31
- return(/*#__PURE__*/ $jACei$react.createElement($jACei$Box, {
34
+ return(/*#__PURE__*/ $jACei$jsx($jACei$Box, {
32
35
  as: "ul",
33
36
  className: styles.accordion,
34
37
  testId: testId,
35
38
  ...otherProps,
36
- ref: ref
37
- }, $jACei$react.Children.map(children, (child)=>{
38
- if (/*#__PURE__*/ $jACei$react.isValidElement(child)) return(/*#__PURE__*/ $jACei$react.cloneElement(child, {
39
- align: align
40
- }));
41
- return child;
42
- })));
39
+ ref: ref,
40
+ children: $jACei$react.Children.map(children, (child)=>{
41
+ if (/*#__PURE__*/ $jACei$react.isValidElement(child)) return(/*#__PURE__*/ $jACei$react.cloneElement(child, {
42
+ align: align
43
+ }));
44
+ return child;
45
+ })
46
+ }));
43
47
  };
44
48
  const $a517c4a963657a24$export$a766cd26d0d69044 = /*#__PURE__*/ $jACei$react.forwardRef($a517c4a963657a24$var$_Accordion);
45
49
 
@@ -52,6 +56,8 @@ const $a517c4a963657a24$export$a766cd26d0d69044 = /*#__PURE__*/ $jACei$react.for
52
56
 
53
57
 
54
58
 
59
+
60
+
55
61
  const $d95c2a37e890ef38$var$getHeaderStyles = ({ align: align })=>$jACei$cx(/*#__PURE__*/ $jACei$css({
56
62
  display: 'flex',
57
63
  flexDirection: 'row',
@@ -104,22 +110,27 @@ const $01f1d19e673d71a7$export$5e3e5deaaf81ee41 = ({ children: children , onClic
104
110
  align: align,
105
111
  isExpanded: isExpanded
106
112
  });
107
- return(/*#__PURE__*/ $jACei$react.createElement($jACei$Subheading, {
113
+ return(/*#__PURE__*/ $jACei$jsx($jACei$Subheading, {
108
114
  ...rest,
109
115
  testId: testId,
110
116
  marginBottom: "none",
111
- as: element
112
- }, /*#__PURE__*/ $jACei$react.createElement("button", {
113
- type: "button",
114
- "aria-expanded": isExpanded,
115
- "aria-controls": `accordion-panel--${ariaId}`,
116
- id: `accordion--${ariaId}`,
117
- className: styles.accordionHeader,
118
- onClick: onClick
119
- }, /*#__PURE__*/ $jACei$react.createElement($jACei$ChevronDownTrimmedIcon, {
120
- className: styles.accordionHeaderIcon,
121
- variant: "secondary"
122
- }), children)));
117
+ as: element,
118
+ children: /*#__PURE__*/ $jACei$jsxs("button", {
119
+ type: "button",
120
+ "aria-expanded": isExpanded,
121
+ "aria-controls": `accordion-panel--${ariaId}`,
122
+ id: `accordion--${ariaId}`,
123
+ className: styles.accordionHeader,
124
+ onClick: onClick,
125
+ children: [
126
+ /*#__PURE__*/ $jACei$jsx($jACei$ChevronDownTrimmedIcon, {
127
+ className: styles.accordionHeaderIcon,
128
+ variant: "secondary"
129
+ }),
130
+ children
131
+ ]
132
+ })
133
+ }));
123
134
  };
124
135
 
125
136
 
@@ -130,12 +141,6 @@ const $01f1d19e673d71a7$export$5e3e5deaaf81ee41 = ({ children: children , onClic
130
141
 
131
142
  const $3ba27b87c168e14d$export$2db50514b4b2c1ee = ()=>{
132
143
  return {
133
- accordionPanel: /*#__PURE__*/ $jACei$css({
134
- boxSizing: 'border-box',
135
- overflow: 'hidden',
136
- height: '0',
137
- transition: `height ${$jACei$contentfulf36tokens.transitionDurationDefault} ${$jACei$contentfulf36tokens.transitionEasingDefault}, padding ${$jACei$contentfulf36tokens.transitionDurationDefault} ${$jACei$contentfulf36tokens.transitionEasingDefault}`
138
- }),
139
144
  accordionPanelContent: /*#__PURE__*/ $jACei$css({
140
145
  width: '100%',
141
146
  padding: `${$jACei$contentfulf36tokens.spacingXs} ${$jACei$contentfulf36tokens.spacingM} ${$jACei$contentfulf36tokens.spacingM}`
@@ -144,55 +149,18 @@ const $3ba27b87c168e14d$export$2db50514b4b2c1ee = ()=>{
144
149
  };
145
150
 
146
151
 
147
- const $0c5bba33d6cffbcc$export$7cad6f17fd6e117b = ({ children: children , isExpanded: isExpanded = false , ariaId: ariaId , testId: testId = 'cf-ui-accordion-panel' , ...rest })=>{
152
+ const $0c5bba33d6cffbcc$export$7cad6f17fd6e117b = ({ children: children , isExpanded: isExpanded = false , ariaId: ariaId , testId: testId = 'cf-ui-accordion-panel' , ...otherProps })=>{
148
153
  const styles = $3ba27b87c168e14d$export$2db50514b4b2c1ee();
149
- const panelEl = $jACei$useRef(null);
150
- const getPanelContentHeight = ()=>{
151
- const { current: current } = panelEl;
152
- if (!current) // to keep the function return type as string only and
153
- // not overcomplicate things with non-nullable checks
154
- return '0px';
155
- return `${current.scrollHeight / parseInt($jACei$contentfulf36tokens.fontBaseDefault, 10)}rem`; // converting height pixels into rem
156
- };
157
- $jACei$useLayoutEffect(()=>{
158
- const { current: current } = panelEl;
159
- const handleTransitionEnd = ()=>{
160
- if (current) current.style.height = 'auto';
161
- };
162
- if (current) {
163
- if (isExpanded) {
164
- current.addEventListener('transitionend', handleTransitionEnd);
165
- requestAnimationFrame(function() {
166
- current.style.height = '0px';
167
- requestAnimationFrame(function() {
168
- current.style.height = getPanelContentHeight();
169
- });
170
- });
171
- } else requestAnimationFrame(function() {
172
- current.style.height = getPanelContentHeight();
173
- requestAnimationFrame(function() {
174
- current.style.height = '0px';
175
- });
176
- });
177
- }
178
- return ()=>{
179
- if (current) current.removeEventListener('transitionend', handleTransitionEnd);
180
- };
181
- }, [
182
- isExpanded
183
- ]);
184
- return(/*#__PURE__*/ $jACei$react.createElement($jACei$Box, {
185
- ...rest,
186
- testId: testId,
187
- id: `accordion-panel--${ariaId}`,
188
- role: "region",
154
+ return(/*#__PURE__*/ $jACei$jsx($jACei$Collapse, {
155
+ "data-test-id": testId,
189
156
  "aria-labelledby": `accordion--${ariaId}`,
190
- "aria-hidden": !isExpanded,
191
- className: styles.accordionPanel,
192
- ref: panelEl
193
- }, /*#__PURE__*/ $jACei$react.createElement("div", {
194
- className: styles.accordionPanelContent
195
- }, children)));
157
+ isExpanded: isExpanded,
158
+ ...otherProps,
159
+ children: /*#__PURE__*/ $jACei$jsx("div", {
160
+ className: styles.accordionPanelContent,
161
+ children: children
162
+ })
163
+ }));
196
164
  };
197
165
 
198
166
 
@@ -223,22 +191,28 @@ const $b6120c67649da348$var$_AccordionItem = ({ title: title = 'Accordion Title'
223
191
  if (isExpanded && onCollapse) onCollapse();
224
192
  setIsExpanded(!isExpanded);
225
193
  };
226
- return(/*#__PURE__*/ $jACei$react.createElement($jACei$Box, {
194
+ return(/*#__PURE__*/ $jACei$jsxs($jACei$Box, {
227
195
  as: "li",
228
196
  className: styles.accordionItem,
229
197
  testId: `${testId}-${id}`,
230
198
  ...otherProps,
231
- ref: ref
232
- }, /*#__PURE__*/ $jACei$react.createElement($01f1d19e673d71a7$export$5e3e5deaaf81ee41, {
233
- onClick: handleOnClick,
234
- isExpanded: isExpanded,
235
- element: titleElement,
236
- ariaId: id,
237
- align: align
238
- }, title), /*#__PURE__*/ $jACei$react.createElement($0c5bba33d6cffbcc$export$7cad6f17fd6e117b, {
239
- ariaId: id,
240
- isExpanded: isExpanded
241
- }, children)));
199
+ ref: ref,
200
+ children: [
201
+ /*#__PURE__*/ $jACei$jsx($01f1d19e673d71a7$export$5e3e5deaaf81ee41, {
202
+ onClick: handleOnClick,
203
+ isExpanded: isExpanded,
204
+ element: titleElement,
205
+ ariaId: id,
206
+ align: align,
207
+ children: title
208
+ }),
209
+ /*#__PURE__*/ $jACei$jsx($0c5bba33d6cffbcc$export$7cad6f17fd6e117b, {
210
+ ariaId: id,
211
+ isExpanded: isExpanded,
212
+ children: children
213
+ })
214
+ ]
215
+ }));
242
216
  };
243
217
  const $b6120c67649da348$export$d99097c13d4dac9f = /*#__PURE__*/ $jACei$react.forwardRef($b6120c67649da348$var$_AccordionItem);
244
218
 
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/components/accordion/src/index.ts","packages/components/accordion/src/CompoundAccordion.tsx","packages/components/accordion/src/Accordion.tsx","packages/components/accordion/src/Accordion.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.styles.ts"],"sourcesContent":["export { Accordion } from './CompoundAccordion';\nexport type { AccordionProps } from './Accordion';\nexport { AccordionHeader } from './AccordionHeader/AccordionHeader';\nexport type { AccordionHeaderProps } from './AccordionHeader/AccordionHeader';\nexport { AccordionItem } from './AccordionItem/AccordionItem';\nexport type { AccordionItemProps } from './AccordionItem/AccordionItem';\nexport { AccordionPanel } from './AccordionPanel/AccordionPanel';\nexport type { AccordionPanelProps } from './AccordionPanel/AccordionPanel';\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n","import React from 'react';\nimport { Box } from '@contentful/f36-core';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n /**\n * Specify the alignment of the chevron inside the accordion header\n * @default end\n */\n align?: 'start' | 'end';\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n}\n\nconst _Accordion = (\n {\n align = 'end',\n children,\n className,\n testId = 'cf-ui-accordion',\n ...otherProps\n }: AccordionProps,\n ref: React.Ref<HTMLUListElement>,\n) => {\n const styles = getAccordionStyles({ className });\n return (\n <Box\n as=\"ul\"\n className={styles.accordion}\n testId={testId}\n {...otherProps}\n ref={ref}\n >\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n align,\n });\n }\n return child;\n })}\n </Box>\n );\n};\n\nexport const Accordion = React.forwardRef(_Accordion);\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n accordion: cx(\n css({\n boxSizing: 'border-box',\n padding: '0',\n margin: '0',\n listStyle: 'none',\n '&:first-child': {\n borderTop: `1px solid ${tokens.gray300}`,\n },\n }),\n className,\n ),\n});\n","import React, { useState } from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { useId, Box } from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n /**\n * The accordion title\n */\n title?: React.ReactNode;\n /**\n * The heading element that will be used by the AccordionHeader\n */\n titleElement?: HeadingElement;\n /**\n * The children of the AccordionItem are in fact the content of the accordion\n */\n children?: React.ReactNode;\n /**\n * A function to be called when the accordion item is opened\n */\n onExpand?: Function;\n /**\n * A function to be called when the accordion item is closed\n */\n onCollapse?: Function;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n}\n\nconst _AccordionItem = (\n {\n title = 'Accordion Title',\n titleElement = 'h2',\n testId = 'cf-ui-accordion-item',\n onExpand,\n onCollapse,\n children,\n align = 'end',\n className,\n ...otherProps\n }: AccordionItemProps,\n ref: React.Ref<HTMLLIElement>,\n) => {\n const styles = getAccordionItemStyles({ className });\n const id = useId();\n const [isExpanded, setIsExpanded] = useState(false);\n\n const handleOnClick = () => {\n if (!isExpanded && onExpand) {\n onExpand();\n }\n if (isExpanded && onCollapse) {\n onCollapse();\n }\n\n setIsExpanded(!isExpanded);\n };\n\n return (\n <Box\n as=\"li\"\n className={styles.accordionItem}\n testId={`${testId}-${id}`}\n {...otherProps}\n ref={ref}\n >\n <AccordionHeader\n onClick={handleOnClick}\n isExpanded={isExpanded}\n element={titleElement}\n ariaId={id}\n align={align}\n >\n {title}\n </AccordionHeader>\n\n <AccordionPanel ariaId={id} isExpanded={isExpanded}>\n {children}\n </AccordionPanel>\n </Box>\n );\n};\n\nexport const AccordionItem = React.forwardRef(_AccordionItem);\n","import React from 'react';\nimport { Subheading } from '@contentful/f36-typography';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { ChevronDownTrimmedIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\n\nexport interface AccordionHeaderProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * The function that will be called once the user clicks on the accordion title\n */\n onClick: VoidFunction;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n /**\n * The heading element that will be used by the Subheading component\n */\n element?: HeadingElement;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n}\n\nexport const AccordionHeader = ({\n children,\n onClick,\n isExpanded = false,\n ariaId,\n element = 'h2',\n align = 'end',\n testId = 'cf-ui-accordion-header',\n ...rest\n}: AccordionHeaderProps) => {\n const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n return (\n <Subheading {...rest} testId={testId} marginBottom=\"none\" as={element}>\n <button\n type=\"button\"\n aria-expanded={isExpanded}\n aria-controls={`accordion-panel--${ariaId}`}\n id={`accordion--${ariaId}`}\n className={styles.accordionHeader}\n onClick={onClick}\n >\n <ChevronDownTrimmedIcon\n className={styles.accordionHeaderIcon}\n variant=\"secondary\"\n />\n {children}\n </button>\n </Subheading>\n );\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n align: 'start' | 'end';\n isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n cx(\n css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n border: '0',\n padding: tokens.spacingM,\n backgroundColor: 'transparent',\n fontFamily: tokens.fontStackPrimary,\n fontSize: tokens.fontSizeL,\n fontWeight: tokens.fontWeightDemiBold,\n lineHeight: tokens.lineHeightL,\n color: tokens.gray800,\n width: '100%',\n minWidth: '9px',\n cursor: 'pointer',\n transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n '&:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:focus': {\n outline: 'none',\n backgroundColor: tokens.gray100,\n },\n }),\n align === 'end' &&\n css({\n flexDirection: 'row-reverse',\n justifyContent: 'space-between',\n }),\n );\n\nconst getIconStyles = ({ align, isExpanded }: StyleProps) =>\n cx(\n css({\n transform: 'rotate(0deg)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n align === 'end' && css({ marginLeft: tokens.spacingM }),\n align === 'start' && css({ marginRight: tokens.spacingM }),\n isExpanded &&\n css({\n transform: 'rotate(180deg)',\n }),\n );\n\nexport const getAccordionHeaderStyles = (props: StyleProps) => ({\n accordionHeader: getHeaderStyles(props),\n accordionHeaderIcon: getIconStyles(props),\n});\n","import React, { FC, useLayoutEffect, useRef } from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport type { CommonProps } from '@contentful/f36-core';\nimport { Box } from '@contentful/f36-core';\n\nimport { getAccordionPanelStyles } from './AccordionPanel.styles';\n\nexport interface AccordionPanelProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n}\n\nexport const AccordionPanel: FC<AccordionPanelProps> = ({\n children,\n isExpanded = false,\n ariaId,\n testId = 'cf-ui-accordion-panel',\n ...rest\n}: AccordionPanelProps) => {\n const styles = getAccordionPanelStyles();\n const panelEl = useRef<HTMLDivElement>(null);\n\n const getPanelContentHeight = () => {\n const { current } = panelEl;\n\n if (!current) {\n // to keep the function return type as string only and\n // not overcomplicate things with non-nullable checks\n return '0px';\n }\n\n return `${current.scrollHeight / parseInt(tokens.fontBaseDefault, 10)}rem`; // converting height pixels into rem\n };\n\n useLayoutEffect(() => {\n const { current } = panelEl;\n\n const handleTransitionEnd = () => {\n if (current) {\n current.style.height = 'auto';\n }\n };\n\n if (current) {\n if (isExpanded) {\n current.addEventListener('transitionend', handleTransitionEnd);\n\n requestAnimationFrame(function () {\n current.style.height = '0px';\n\n requestAnimationFrame(function () {\n current.style.height = getPanelContentHeight();\n });\n });\n } else {\n requestAnimationFrame(function () {\n current.style.height = getPanelContentHeight();\n\n requestAnimationFrame(function () {\n current.style.height = '0px';\n });\n });\n }\n }\n\n return () => {\n if (current) {\n current.removeEventListener('transitionend', handleTransitionEnd);\n }\n };\n }, [isExpanded]);\n\n return (\n <Box\n {...rest}\n testId={testId}\n id={`accordion-panel--${ariaId}`}\n role=\"region\"\n aria-labelledby={`accordion--${ariaId}`}\n aria-hidden={!isExpanded}\n className={styles.accordionPanel}\n ref={panelEl}\n >\n <div className={styles.accordionPanelContent}>{children}</div>\n </Box>\n );\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n return {\n accordionPanel: css({\n boxSizing: 'border-box',\n overflow: 'hidden',\n height: '0',\n transition: `height ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}, padding ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n accordionPanelContent: css({\n width: '100%',\n padding: `${tokens.spacingXs} ${tokens.spacingM} ${tokens.spacingM}`,\n }),\n };\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionItemStyles = ({\n className,\n}: {\n className?: string;\n}) => ({\n accordionItem: cx(\n css({\n padding: '0',\n margin: '0',\n borderBottom: `1px solid ${tokens.colorElementMid}`,\n '&:first-child': {\n borderTop: `1px solid ${tokens.colorElementMid}`,\n },\n }),\n className,\n ),\n});\n"],"names":["Accordion","AccordionProps","AccordionHeader","AccordionHeaderProps","AccordionItem","AccordionItemProps","AccordionPanel","AccordionPanelProps","OriginalAccordion","CompoundAccordion","Item","React","Box","CommonProps","getAccordionStyles","align","children","ReactNode","_Accordion","className","testId","otherProps","ref","Ref","HTMLUListElement","styles","accordion","Children","map","child","isValidElement","cloneElement","forwardRef","tokens","boxSizing","padding","margin","listStyle","borderTop","gray300","useState","HeadingElement","useId","getAccordionItemStyles","title","titleElement","onExpand","Function","onCollapse","_AccordionItem","HTMLLIElement","id","isExpanded","setIsExpanded","handleOnClick","accordionItem","Subheading","ChevronDownTrimmedIcon","getAccordionHeaderStyles","onClick","VoidFunction","ariaId","element","rest","accordionHeader","accordionHeaderIcon","StyleProps","getHeaderStyles","display","flexDirection","alignItems","border","spacingM","backgroundColor","fontFamily","fontStackPrimary","fontSize","fontSizeL","fontWeight","fontWeightDemiBold","lineHeight","lineHeightL","color","gray800","width","minWidth","cursor","transition","transitionDurationDefault","transitionEasingDefault","gray100","outline","getIconStyles","transform","marginLeft","marginRight","props","FC","useLayoutEffect","useRef","getAccordionPanelStyles","panelEl","HTMLDivElement","getPanelContentHeight","current","scrollHeight","parseInt","fontBaseDefault","handleTransitionEnd","style","height","addEventListener","requestAnimationFrame","removeEventListener","accordionPanel","accordionPanelContent","overflow","spacingXs","borderBottom","colorElementMid"],"version":3,"file":"module.js.map"}
1
+ {"mappings":"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","sources":["packages/components/accordion/src/index.ts","packages/components/accordion/src/CompoundAccordion.tsx","packages/components/accordion/src/Accordion.tsx","packages/components/accordion/src/Accordion.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/AccordionItem/AccordionItem.styles.ts"],"sourcesContent":["export { Accordion } from './CompoundAccordion';\nexport type { AccordionProps } from './Accordion';\nexport { AccordionHeader } from './AccordionHeader/AccordionHeader';\nexport type { AccordionHeaderProps } from './AccordionHeader/AccordionHeader';\nexport { AccordionItem } from './AccordionItem/AccordionItem';\nexport type { AccordionItemProps } from './AccordionItem/AccordionItem';\nexport { AccordionPanel } from './AccordionPanel/AccordionPanel';\nexport type { AccordionPanelProps } from './AccordionPanel/AccordionPanel';\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n","import React from 'react';\nimport { Box } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n /**\n * Specify the alignment of the chevron inside the accordion header\n * @default end\n */\n align?: 'start' | 'end';\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n}\n\nconst _Accordion = (\n {\n align = 'end',\n children,\n className,\n testId = 'cf-ui-accordion',\n ...otherProps\n }: ExpandProps<AccordionProps>,\n ref: React.Ref<HTMLUListElement>,\n) => {\n const styles = getAccordionStyles({ className });\n return (\n <Box\n as=\"ul\"\n className={styles.accordion}\n testId={testId}\n {...otherProps}\n ref={ref}\n >\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n align,\n });\n }\n return child;\n })}\n </Box>\n );\n};\n\nexport const Accordion = React.forwardRef(_Accordion);\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n accordion: cx(\n css({\n boxSizing: 'border-box',\n padding: '0',\n margin: '0',\n listStyle: 'none',\n '&:first-child': {\n borderTop: `1px solid ${tokens.gray300}`,\n },\n }),\n className,\n ),\n});\n","import React, { useState } from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { useId, Box } from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n /**\n * The accordion title\n */\n title?: React.ReactNode;\n /**\n * The heading element that will be used by the AccordionHeader\n */\n titleElement?: HeadingElement;\n /**\n * The children of the AccordionItem are in fact the content of the accordion\n */\n children?: React.ReactNode;\n /**\n * A function to be called when the accordion item is opened\n */\n onExpand?: Function;\n /**\n * A function to be called when the accordion item is closed\n */\n onCollapse?: Function;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n}\n\nconst _AccordionItem = (\n {\n title = 'Accordion Title',\n titleElement = 'h2',\n testId = 'cf-ui-accordion-item',\n onExpand,\n onCollapse,\n children,\n align = 'end',\n className,\n ...otherProps\n }: ExpandProps<AccordionItemProps>,\n ref: React.Ref<HTMLLIElement>,\n) => {\n const styles = getAccordionItemStyles({ className });\n const id = useId();\n const [isExpanded, setIsExpanded] = useState(false);\n\n const handleOnClick = () => {\n if (!isExpanded && onExpand) {\n onExpand();\n }\n if (isExpanded && onCollapse) {\n onCollapse();\n }\n\n setIsExpanded(!isExpanded);\n };\n\n return (\n <Box\n as=\"li\"\n className={styles.accordionItem}\n testId={`${testId}-${id}`}\n {...otherProps}\n ref={ref}\n >\n <AccordionHeader\n onClick={handleOnClick}\n isExpanded={isExpanded}\n element={titleElement}\n ariaId={id}\n align={align}\n >\n {title}\n </AccordionHeader>\n\n <AccordionPanel ariaId={id} isExpanded={isExpanded}>\n {children}\n </AccordionPanel>\n </Box>\n );\n};\n\nexport const AccordionItem = React.forwardRef(_AccordionItem);\n","import React from 'react';\nimport { Subheading } from '@contentful/f36-typography';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport { ChevronDownTrimmedIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\n\nexport interface AccordionHeaderProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * The function that will be called once the user clicks on the accordion title\n */\n onClick: VoidFunction;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n /**\n * The heading element that will be used by the Subheading component\n */\n element?: HeadingElement;\n /**\n * Specify the alignment of the chevron inside the accordion header\n */\n align?: 'start' | 'end';\n}\n\nexport const AccordionHeader = ({\n children,\n onClick,\n isExpanded = false,\n ariaId,\n element = 'h2',\n align = 'end',\n testId = 'cf-ui-accordion-header',\n ...rest\n}: AccordionHeaderProps) => {\n const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n return (\n <Subheading {...rest} testId={testId} marginBottom=\"none\" as={element}>\n <button\n type=\"button\"\n aria-expanded={isExpanded}\n aria-controls={`accordion-panel--${ariaId}`}\n id={`accordion--${ariaId}`}\n className={styles.accordionHeader}\n onClick={onClick}\n >\n <ChevronDownTrimmedIcon\n className={styles.accordionHeaderIcon}\n variant=\"secondary\"\n />\n {children}\n </button>\n </Subheading>\n );\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n align: 'start' | 'end';\n isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n cx(\n css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n border: '0',\n padding: tokens.spacingM,\n backgroundColor: 'transparent',\n fontFamily: tokens.fontStackPrimary,\n fontSize: tokens.fontSizeL,\n fontWeight: tokens.fontWeightDemiBold,\n lineHeight: tokens.lineHeightL,\n color: tokens.gray800,\n width: '100%',\n minWidth: '9px',\n cursor: 'pointer',\n transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n '&:hover': {\n backgroundColor: tokens.gray100,\n },\n '&:focus': {\n outline: 'none',\n backgroundColor: tokens.gray100,\n },\n }),\n align === 'end' &&\n css({\n flexDirection: 'row-reverse',\n justifyContent: 'space-between',\n }),\n );\n\nconst getIconStyles = ({ align, isExpanded }: StyleProps) =>\n cx(\n css({\n transform: 'rotate(0deg)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n align === 'end' && css({ marginLeft: tokens.spacingM }),\n align === 'start' && css({ marginRight: tokens.spacingM }),\n isExpanded &&\n css({\n transform: 'rotate(180deg)',\n }),\n );\n\nexport const getAccordionHeaderStyles = (props: StyleProps) => ({\n accordionHeader: getHeaderStyles(props),\n accordionHeaderIcon: getIconStyles(props),\n});\n","import React, { FC } from 'react';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Collapse } from '@contentful/f36-collapse';\n\nimport { getAccordionPanelStyles } from './AccordionPanel.styles';\n\nexport interface AccordionPanelProps extends CommonProps {\n /**\n * Child nodes to be rendered in the component\n */\n children?: React.ReactNode;\n /**\n * A boolean that tells if the accordion should be expanded or collapsed\n */\n isExpanded: boolean;\n /**\n * An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n}\n\nexport const AccordionPanel: FC<ExpandProps<AccordionPanelProps>> = ({\n children,\n isExpanded = false,\n ariaId,\n testId = 'cf-ui-accordion-panel',\n ...otherProps\n}: AccordionPanelProps) => {\n const styles = getAccordionPanelStyles();\n\n return (\n <Collapse\n data-test-id={testId}\n aria-labelledby={`accordion--${ariaId}`}\n isExpanded={isExpanded}\n {...otherProps}\n >\n <div className={styles.accordionPanelContent}>{children}</div>\n </Collapse>\n );\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n return {\n accordionPanelContent: css({\n width: '100%',\n padding: `${tokens.spacingXs} ${tokens.spacingM} ${tokens.spacingM}`,\n }),\n };\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionItemStyles = ({\n className,\n}: {\n className?: string;\n}) => ({\n accordionItem: cx(\n css({\n padding: '0',\n margin: '0',\n borderBottom: `1px solid ${tokens.colorElementMid}`,\n '&:first-child': {\n borderTop: `1px solid ${tokens.colorElementMid}`,\n },\n }),\n className,\n ),\n});\n"],"names":["Accordion","AccordionProps","AccordionHeader","AccordionHeaderProps","AccordionItem","AccordionItemProps","AccordionPanel","AccordionPanelProps","OriginalAccordion","CompoundAccordion","Item","React","Box","CommonProps","ExpandProps","getAccordionStyles","align","children","ReactNode","_Accordion","className","testId","otherProps","ref","Ref","HTMLUListElement","styles","accordion","Children","map","child","isValidElement","cloneElement","forwardRef","tokens","boxSizing","padding","margin","listStyle","borderTop","gray300","useState","HeadingElement","useId","getAccordionItemStyles","title","titleElement","onExpand","Function","onCollapse","_AccordionItem","HTMLLIElement","id","isExpanded","setIsExpanded","handleOnClick","accordionItem","Subheading","ChevronDownTrimmedIcon","getAccordionHeaderStyles","onClick","VoidFunction","ariaId","element","rest","accordionHeader","accordionHeaderIcon","StyleProps","getHeaderStyles","display","flexDirection","alignItems","border","spacingM","backgroundColor","fontFamily","fontStackPrimary","fontSize","fontSizeL","fontWeight","fontWeightDemiBold","lineHeight","lineHeightL","color","gray800","width","minWidth","cursor","transition","transitionDurationDefault","transitionEasingDefault","gray100","outline","getIconStyles","transform","marginLeft","marginRight","props","FC","Collapse","getAccordionPanelStyles","accordionPanelContent","spacingXs","borderBottom","colorElementMid"],"version":3,"file":"module.js.map"}
package/dist/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { FC } from "react";
2
- import { CommonProps } from "@contentful/f36-core";
2
+ import { CommonProps, ExpandProps } from "@contentful/f36-core";
3
3
  import { HeadingElement } from "@contentful/f36-typography";
4
4
  export interface AccordionProps extends CommonProps {
5
5
  /**
@@ -12,7 +12,13 @@ export interface AccordionProps extends CommonProps {
12
12
  */
13
13
  children?: React.ReactNode;
14
14
  }
15
- declare const _Accordion1: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLUListElement>>;
15
+ declare const _Accordion1: React.ForwardRefExoticComponent<{
16
+ align?: 'start' | 'end';
17
+ children?: React.ReactNode;
18
+ className?: string;
19
+ testId?: string;
20
+ style?: React.CSSProperties;
21
+ } & React.RefAttributes<HTMLUListElement>>;
16
22
  export interface AccordionHeaderProps extends CommonProps {
17
23
  /**
18
24
  * Child nodes to be rendered in the component
@@ -54,7 +60,7 @@ export interface AccordionPanelProps extends CommonProps {
54
60
  */
55
61
  ariaId: string;
56
62
  }
57
- export const AccordionPanel: FC<AccordionPanelProps>;
63
+ export const AccordionPanel: FC<ExpandProps<AccordionPanelProps>>;
58
64
  export interface AccordionItemProps extends CommonProps {
59
65
  /**
60
66
  * The accordion title
@@ -81,7 +87,17 @@ export interface AccordionItemProps extends CommonProps {
81
87
  */
82
88
  align?: 'start' | 'end';
83
89
  }
84
- export const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLLIElement>>;
90
+ export const AccordionItem: React.ForwardRefExoticComponent<{
91
+ title?: React.ReactNode;
92
+ titleElement?: HeadingElement;
93
+ children?: React.ReactNode;
94
+ onExpand?: Function;
95
+ onCollapse?: Function;
96
+ align?: 'start' | 'end';
97
+ className?: string;
98
+ testId?: string;
99
+ style?: React.CSSProperties;
100
+ } & React.RefAttributes<HTMLLIElement>>;
85
101
  type CompoundAccordion = typeof _Accordion1 & {
86
102
  Item: typeof AccordionItem;
87
103
  };
package/dist/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;ACMA,+BAAgC,SAAQ,WAAW;IACjD;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;CAC5B;AAiCD,QAAO,MAAM,oGAAwC,CAAC;AEzCtD,qCAAsC,SAAQ,WAAW;IACvD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B;;OAEG;IACH,OAAO,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACzB;AAED,OAAO,MAAM,8FASV,oBAAoB,gBAqBtB,CAAC;AE1DF,oCAAqC,SAAQ,WAAW;IACtD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,OAAO,MAAM,gBAAgB,GAAG,mBAAmB,CA0ElD,CAAC;AEtFF,mCAAoC,SAAQ,WAAW;IACrD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACzB;AAwDD,OAAO,MAAM,uGAAgD,CAAC;ACxF9D,yBAAyB,kBAAwB,GAAG;IAClD,IAAI,EAAE,oBAAoB,CAAC;CAC5B,CAAC;AAEF,OAAO,MAAM,4BAAkD,CAAC","sources":["packages/components/accordion/src/src/Accordion.styles.ts","packages/components/accordion/src/src/Accordion.tsx","packages/components/accordion/src/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/src/AccordionItem/AccordionItem.styles.ts","packages/components/accordion/src/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/src/CompoundAccordion.tsx","packages/components/accordion/src/src/index.ts","packages/components/accordion/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,"export { Accordion } from './CompoundAccordion';\nexport type { AccordionProps } from './Accordion';\nexport { AccordionHeader } from './AccordionHeader/AccordionHeader';\nexport type { AccordionHeaderProps } from './AccordionHeader/AccordionHeader';\nexport { AccordionItem } from './AccordionItem/AccordionItem';\nexport type { AccordionItemProps } from './AccordionItem/AccordionItem';\nexport { AccordionPanel } from './AccordionPanel/AccordionPanel';\nexport type { AccordionPanelProps } from './AccordionPanel/AccordionPanel';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
1
+ {"mappings":";;;ACMA,+BAAgC,SAAQ,WAAW;IACjD;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;CAC5B;AAiCD,QAAO,MAAM;YAtCH,OAAO,GAAG,KAAK;eAIZ,MAAM,SAAS;;;;0CAkCyB,CAAC;AEzCtD,qCAAsC,SAAQ,WAAW;IACvD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B;;OAEG;IACH,OAAO,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACzB;AAED,OAAO,MAAM,8FASV,oBAAoB,gBAqBtB,CAAC;AE3DF,oCAAqC,SAAQ,WAAW;IACtD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,OAAO,MAAM,gBAAgB,GAAG,YAAY,mBAAmB,CAAC,CAmB/D,CAAC;AE9BF,mCAAoC,SAAQ,WAAW;IACrD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACzB;AAwDD,OAAO,MAAM;YA7EH,MAAM,SAAS;mBAIR,cAAc;eAIlB,MAAM,SAAS;eAIf,QAAQ;iBAIN,QAAQ;YAIb,OAAO,GAAG,KAAK;;;;uCAyDoC,CAAC;ACxF9D,yBAAyB,kBAAwB,GAAG;IAClD,IAAI,EAAE,oBAAoB,CAAC;CAC5B,CAAC;AAEF,OAAO,MAAM,4BAAkD,CAAC","sources":["packages/components/accordion/src/src/Accordion.styles.ts","packages/components/accordion/src/src/Accordion.tsx","packages/components/accordion/src/src/AccordionHeader/AccordionHeader.styles.ts","packages/components/accordion/src/src/AccordionHeader/AccordionHeader.tsx","packages/components/accordion/src/src/AccordionPanel/AccordionPanel.styles.ts","packages/components/accordion/src/src/AccordionPanel/AccordionPanel.tsx","packages/components/accordion/src/src/AccordionItem/AccordionItem.styles.ts","packages/components/accordion/src/src/AccordionItem/AccordionItem.tsx","packages/components/accordion/src/src/CompoundAccordion.tsx","packages/components/accordion/src/src/index.ts","packages/components/accordion/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,"export { Accordion } from './CompoundAccordion';\nexport type { AccordionProps } from './Accordion';\nexport { AccordionHeader } from './AccordionHeader/AccordionHeader';\nexport type { AccordionHeaderProps } from './AccordionHeader/AccordionHeader';\nexport { AccordionItem } from './AccordionItem/AccordionItem';\nexport type { AccordionItemProps } from './AccordionItem/AccordionItem';\nexport { AccordionPanel } from './AccordionPanel/AccordionPanel';\nexport type { AccordionPanelProps } from './AccordionPanel/AccordionPanel';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@contentful/f36-accordion",
3
- "version": "4.0.1-beta.2550+0e77ffa0",
3
+ "version": "4.0.1-beta.2595+7499852fef",
4
4
  "description": "Forma 36: Accordion React Component",
5
5
  "license": "MIT",
6
6
  "files": [
@@ -21,10 +21,11 @@
21
21
  },
22
22
  "dependencies": {
23
23
  "@babel/runtime": "^7.6.2",
24
- "@contentful/f36-core": "4.0.1-beta.2550+0e77ffa0",
25
- "@contentful/f36-icons": "4.0.1-beta.2550+0e77ffa0",
26
- "@contentful/f36-tokens": "4.0.1-beta.2550+0e77ffa0",
27
- "@contentful/f36-typography": "4.0.1-beta.2550+0e77ffa0",
24
+ "@contentful/f36-collapse": "4.0.1-beta.2595+7499852fef",
25
+ "@contentful/f36-core": "4.0.1-beta.2595+7499852fef",
26
+ "@contentful/f36-icons": "4.0.1-beta.2595+7499852fef",
27
+ "@contentful/f36-tokens": "4.0.1-beta.2595+7499852fef",
28
+ "@contentful/f36-typography": "4.0.1-beta.2595+7499852fef",
28
29
  "emotion": "^10.0.17"
29
30
  },
30
31
  "peerDependencies": {
@@ -33,5 +34,5 @@
33
34
  "publishConfig": {
34
35
  "access": "public"
35
36
  },
36
- "gitHead": "0e77ffa0d99923466080494c6b87ccf0d0d48c56"
37
+ "gitHead": "7499852fef1921bc0636f4d544fde90ae91cb05c"
37
38
  }