@sproutsocial/seeds-react-accordion 0.4.2 → 0.4.6
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/.turbo/turbo-build.log +11 -11
- package/CHANGELOG.md +40 -0
- package/dist/esm/index.js +79 -205
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +2 -5
- package/dist/index.d.ts +2 -5
- package/dist/index.js +83 -209
- package/dist/index.js.map +1 -1
- package/package.json +7 -6
- package/src/AccordionTrigger.tsx +31 -82
- package/src/AccordionTypes.ts +1 -5
- package/src/styles.ts +26 -72
package/dist/index.js
CHANGED
|
@@ -47,6 +47,7 @@ var React = require("react");
|
|
|
47
47
|
var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
|
|
48
48
|
var import_seeds_react_icon = require("@sproutsocial/seeds-react-icon");
|
|
49
49
|
var import_seeds_react_menu = require("@sproutsocial/seeds-react-menu");
|
|
50
|
+
var import_seeds_react_content_header = require("@sproutsocial/seeds-react-content-header");
|
|
50
51
|
|
|
51
52
|
// src/Accordion.tsx
|
|
52
53
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -102,53 +103,11 @@ var Accordion = ({
|
|
|
102
103
|
var RadixAccordion3 = require("@radix-ui/react-accordion");
|
|
103
104
|
|
|
104
105
|
// src/styles.ts
|
|
105
|
-
var
|
|
106
|
-
var import_styled_components2 = __toESM(require("styled-components"));
|
|
106
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
107
107
|
var RadixAccordion2 = __toESM(require("@radix-ui/react-accordion"));
|
|
108
|
-
var import_styled_system = require("styled-system");
|
|
109
108
|
var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
var import_styled_components = require("styled-components");
|
|
113
|
-
var import_seeds_react_theme = require("@sproutsocial/seeds-react-theme");
|
|
114
|
-
var visuallyHidden = import_styled_components.css`
|
|
115
|
-
position: absolute;
|
|
116
|
-
width: 1px;
|
|
117
|
-
height: 1px;
|
|
118
|
-
padding: 0;
|
|
119
|
-
margin: -1px;
|
|
120
|
-
overflow: hidden;
|
|
121
|
-
clip: rect(0 0 0 0);
|
|
122
|
-
border: 0;
|
|
123
|
-
`;
|
|
124
|
-
var focusRing = import_styled_components.css`
|
|
125
|
-
box-shadow: 0 0 0 1px ${import_seeds_react_theme.theme.colors.button.primary.background.base},
|
|
126
|
-
0 0px 0px 4px
|
|
127
|
-
color-mix(
|
|
128
|
-
in srgb,
|
|
129
|
-
${import_seeds_react_theme.theme.colors.button.primary.background.base},
|
|
130
|
-
transparent 70%
|
|
131
|
-
);
|
|
132
|
-
outline: none;
|
|
133
|
-
|
|
134
|
-
&::-moz-focus-inner {
|
|
135
|
-
border: 0;
|
|
136
|
-
}
|
|
137
|
-
`;
|
|
138
|
-
var pill = import_styled_components.css`
|
|
139
|
-
min-width: ${import_seeds_react_theme.theme.space[600]};
|
|
140
|
-
min-height: ${import_seeds_react_theme.theme.space[600]};
|
|
141
|
-
padding: ${import_seeds_react_theme.theme.space[300]};
|
|
142
|
-
border-radius: ${import_seeds_react_theme.theme.radii.pill};
|
|
143
|
-
`;
|
|
144
|
-
var disabled = import_styled_components.css`
|
|
145
|
-
opacity: 0.4;
|
|
146
|
-
pointer-events: none;
|
|
147
|
-
`;
|
|
148
|
-
|
|
149
|
-
// src/styles.ts
|
|
150
|
-
var StyledAccordionItem = (0, import_styled_components2.default)(RadixAccordion2.Item)``;
|
|
151
|
-
var animations = import_styled_components2.css`
|
|
109
|
+
var StyledAccordionItem = (0, import_styled_components.default)(RadixAccordion2.Item)``;
|
|
110
|
+
var animations = import_styled_components.css`
|
|
152
111
|
@keyframes slideDown {
|
|
153
112
|
from {
|
|
154
113
|
height: 0;
|
|
@@ -167,43 +126,7 @@ var animations = import_styled_components2.css`
|
|
|
167
126
|
}
|
|
168
127
|
}
|
|
169
128
|
`;
|
|
170
|
-
var
|
|
171
|
-
RadixAccordion2.Trigger
|
|
172
|
-
)`
|
|
173
|
-
padding: 0;
|
|
174
|
-
width: 100%;
|
|
175
|
-
display: flex;
|
|
176
|
-
align-items: center;
|
|
177
|
-
justify-content: space-between;
|
|
178
|
-
cursor: pointer;
|
|
179
|
-
outline: none;
|
|
180
|
-
border: none;
|
|
181
|
-
background: transparent;
|
|
182
|
-
color: ${({ theme: theme2 }) => theme2.colors.text.body};
|
|
183
|
-
${({ theme: theme2 }) => theme2.typography[200]};
|
|
184
|
-
|
|
185
|
-
.triggerIcon {
|
|
186
|
-
transition: transform 300ms ease-in-out;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
&[data-state="open"] {
|
|
190
|
-
.triggerIcon {
|
|
191
|
-
transform: rotate(-180deg);
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
&[data-styled] {
|
|
196
|
-
padding: ${({ theme: theme2 }) => theme2.space[400]};
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
&:focus {
|
|
200
|
-
${focusRing}
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
${import_seeds_react_system_props2.COMMON}
|
|
204
|
-
${import_seeds_react_system_props2.TYPOGRAPHY}
|
|
205
|
-
`;
|
|
206
|
-
var StyledRadixAccordionContent = (0, import_styled_components2.default)(
|
|
129
|
+
var StyledRadixAccordionContent = (0, import_styled_components.default)(
|
|
207
130
|
RadixAccordion2.Content
|
|
208
131
|
)`
|
|
209
132
|
${animations}
|
|
@@ -219,42 +142,32 @@ var StyledRadixAccordionContent = (0, import_styled_components2.default)(
|
|
|
219
142
|
}
|
|
220
143
|
|
|
221
144
|
&[data-styled="true"] {
|
|
222
|
-
border-left: ${({ theme
|
|
223
|
-
border-right: ${({ theme
|
|
224
|
-
background: ${({ theme
|
|
145
|
+
border-left: ${({ theme }) => `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
|
|
146
|
+
border-right: ${({ theme }) => `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
|
|
147
|
+
background: ${({ theme }) => theme.colors.container.background.base};
|
|
225
148
|
}
|
|
226
149
|
|
|
227
150
|
.accordion-item:last-child[data-state="open"] &[data-styled="true"],
|
|
228
151
|
.accordion-item:last-child[data-state="closed"] &[data-styled="true"] {
|
|
229
|
-
border-bottom: ${({ theme
|
|
230
|
-
border-bottom-left-radius: ${({ theme
|
|
231
|
-
border-bottom-right-radius: ${({ theme
|
|
152
|
+
border-bottom: ${({ theme }) => `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
|
|
153
|
+
border-bottom-left-radius: ${({ theme }) => theme.radii.outer};
|
|
154
|
+
border-bottom-right-radius: ${({ theme }) => theme.radii.outer};
|
|
232
155
|
}
|
|
233
156
|
`;
|
|
234
|
-
var
|
|
235
|
-
|
|
236
|
-
align-items: center;
|
|
237
|
-
justify-content: space-between;
|
|
238
|
-
width: 100%;
|
|
239
|
-
`;
|
|
240
|
-
var FlexCenter = import_styled_components2.default.div`
|
|
241
|
-
display: flex;
|
|
242
|
-
align-items: center;
|
|
243
|
-
`;
|
|
244
|
-
var ContentContainer = import_styled_components2.default.div`
|
|
245
|
-
color: ${({ theme: theme2 }) => theme2.colors.text.body};
|
|
157
|
+
var ContentContainer = import_styled_components.default.div`
|
|
158
|
+
color: ${({ theme }) => theme.colors.text.body};
|
|
246
159
|
background: transparent;
|
|
247
|
-
font-family: ${({ theme
|
|
160
|
+
font-family: ${({ theme }) => theme.fontFamily};
|
|
248
161
|
|
|
249
162
|
&[data-styled="true"] {
|
|
250
|
-
padding: ${({ theme
|
|
251
|
-
${({ theme
|
|
163
|
+
padding: ${({ theme }) => theme.space[400]};
|
|
164
|
+
${({ theme }) => theme.typography[200]};
|
|
252
165
|
}
|
|
253
166
|
|
|
254
167
|
.accordion-item:last-child[data-state="open"] &[data-styled="true"],
|
|
255
168
|
.accordion-item:last-child[data-state="closed"] &[data-styled="true"] {
|
|
256
|
-
border-bottom-left-radius: ${({ theme
|
|
257
|
-
border-bottom-right-radius: ${({ theme
|
|
169
|
+
border-bottom-left-radius: ${({ theme }) => theme.radii.outer};
|
|
170
|
+
border-bottom-right-radius: ${({ theme }) => theme.radii.outer};
|
|
258
171
|
}
|
|
259
172
|
|
|
260
173
|
${import_seeds_react_system_props2.COMMON}
|
|
@@ -263,40 +176,66 @@ var ContentContainer = import_styled_components2.default.div`
|
|
|
263
176
|
${import_seeds_react_system_props2.LAYOUT}
|
|
264
177
|
${import_seeds_react_system_props2.FLEXBOX}
|
|
265
178
|
`;
|
|
266
|
-
var TriggerContainer =
|
|
179
|
+
var TriggerContainer = import_styled_components.default.div`
|
|
267
180
|
display: flex;
|
|
268
181
|
align-items: center;
|
|
269
|
-
color: ${({ theme
|
|
182
|
+
color: ${({ theme }) => theme.colors.text.body};
|
|
183
|
+
${({ theme }) => theme.typography[200]};
|
|
184
|
+
|
|
185
|
+
/* Override Text.Headline styles to match original accordion trigger typography */
|
|
186
|
+
h1,
|
|
187
|
+
h2,
|
|
188
|
+
h3,
|
|
189
|
+
h4,
|
|
190
|
+
h5,
|
|
191
|
+
h6 {
|
|
192
|
+
font-size: inherit;
|
|
193
|
+
font-weight: normal;
|
|
194
|
+
line-height: inherit;
|
|
195
|
+
color: inherit;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
&[data-styled="true"] {
|
|
199
|
+
h1,
|
|
200
|
+
h2,
|
|
201
|
+
h3,
|
|
202
|
+
h4,
|
|
203
|
+
h5,
|
|
204
|
+
h6 {
|
|
205
|
+
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
206
|
+
color: ${({ theme }) => theme.colors.text.headline};
|
|
207
|
+
}
|
|
208
|
+
}
|
|
270
209
|
|
|
271
|
-
${({ $styled, theme
|
|
272
|
-
border-top: ${
|
|
273
|
-
border-left: ${
|
|
274
|
-
border-right: ${
|
|
275
|
-
background: ${
|
|
210
|
+
${({ $styled, theme }) => $styled && `
|
|
211
|
+
border-top: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};
|
|
212
|
+
border-left: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};
|
|
213
|
+
border-right: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};
|
|
214
|
+
background: ${theme.colors.container.background.base};
|
|
276
215
|
`}
|
|
277
216
|
|
|
278
217
|
.accordion-item[data-state="open"] &[data-styled="true"] {
|
|
279
|
-
border-bottom: ${({ theme
|
|
218
|
+
border-bottom: ${({ theme }) => `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
|
|
280
219
|
}
|
|
281
220
|
|
|
282
221
|
.accordion-item[data-state="closed"] &[data-styled="true"] {
|
|
283
222
|
transition: border-bottom-color 0s ease-in-out 0.3s;
|
|
284
|
-
border-bottom: ${({ theme
|
|
223
|
+
border-bottom: ${({ theme }) => `${theme.borderWidths[500]} solid transparent`};
|
|
285
224
|
}
|
|
286
225
|
|
|
287
226
|
.accordion-item:first-child &[data-styled="true"] {
|
|
288
|
-
border-top-left-radius: ${({ theme
|
|
289
|
-
border-top-right-radius: ${({ theme
|
|
227
|
+
border-top-left-radius: ${({ theme }) => theme.radii.outer};
|
|
228
|
+
border-top-right-radius: ${({ theme }) => theme.radii.outer};
|
|
290
229
|
}
|
|
291
230
|
|
|
292
231
|
.accordion-item:last-child &[data-styled="true"] {
|
|
293
|
-
border-bottom: ${({ theme
|
|
232
|
+
border-bottom: ${({ theme }) => `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
|
|
294
233
|
}
|
|
295
234
|
|
|
296
235
|
.accordion-item:last-child[data-state="closed"] &[data-styled="true"] {
|
|
297
236
|
transition: border-radius 0s linear 0.3s;
|
|
298
|
-
border-bottom-left-radius: ${({ theme
|
|
299
|
-
border-bottom-right-radius: ${({ theme
|
|
237
|
+
border-bottom-left-radius: ${({ theme }) => theme.radii.outer};
|
|
238
|
+
border-bottom-right-radius: ${({ theme }) => theme.radii.outer};
|
|
300
239
|
}
|
|
301
240
|
|
|
302
241
|
${import_seeds_react_system_props2.COMMON}
|
|
@@ -304,22 +243,6 @@ var TriggerContainer = import_styled_components2.default.div`
|
|
|
304
243
|
${import_seeds_react_system_props2.LAYOUT}
|
|
305
244
|
${import_seeds_react_system_props2.FLEXBOX}
|
|
306
245
|
`;
|
|
307
|
-
var TitleStyles = import_styled_components2.default.h4.attrs((props) => ({
|
|
308
|
-
as: props.as || "h4"
|
|
309
|
-
}))`
|
|
310
|
-
margin: 0;
|
|
311
|
-
font-weight: normal;
|
|
312
|
-
|
|
313
|
-
&[data-styled="true"] {
|
|
314
|
-
font-size: ${({ theme: theme2 }) => theme2.fontSizes[200]};
|
|
315
|
-
font-weight: ${({ theme: theme2 }) => theme2.fontWeights.semibold};
|
|
316
|
-
color: ${({ theme: theme2 }) => theme2.colors.text.headline};
|
|
317
|
-
}
|
|
318
|
-
|
|
319
|
-
${import_seeds_react_system_props2.COMMON}
|
|
320
|
-
${import_seeds_react_system_props2.TYPOGRAPHY}
|
|
321
|
-
${import_styled_system.fontSize}
|
|
322
|
-
`;
|
|
323
246
|
|
|
324
247
|
// src/AccordionItem.tsx
|
|
325
248
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
@@ -344,8 +267,13 @@ var import_seeds_react_button = require("@sproutsocial/seeds-react-button");
|
|
|
344
267
|
var import_seeds_react_icon3 = require("@sproutsocial/seeds-react-icon");
|
|
345
268
|
var import_seeds_react_menu2 = require("@sproutsocial/seeds-react-menu");
|
|
346
269
|
var import_react3 = require("react");
|
|
270
|
+
var import_seeds_react_content_header2 = require("@sproutsocial/seeds-react-content-header");
|
|
271
|
+
var RadixAccordion4 = __toESM(require("@radix-ui/react-accordion"));
|
|
347
272
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
348
273
|
var MAX_RELATED_ACTIONS = 2;
|
|
274
|
+
var AccordionTriggerWrapper = ({
|
|
275
|
+
children
|
|
276
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RadixAccordion4.Trigger, { asChild: true, children });
|
|
349
277
|
var AccordionTrigger = ({
|
|
350
278
|
children,
|
|
351
279
|
leftSlot,
|
|
@@ -375,40 +303,13 @@ var AccordionTrigger = ({
|
|
|
375
303
|
px,
|
|
376
304
|
py,
|
|
377
305
|
fontFamily,
|
|
378
|
-
fontSize
|
|
306
|
+
fontSize,
|
|
379
307
|
fontStyle,
|
|
380
308
|
fontWeight,
|
|
381
309
|
lineHeight,
|
|
382
310
|
textAlign,
|
|
383
311
|
...triggerProps
|
|
384
312
|
} = rest;
|
|
385
|
-
const spacingProps = {
|
|
386
|
-
padding,
|
|
387
|
-
paddingBottom,
|
|
388
|
-
paddingTop,
|
|
389
|
-
paddingX,
|
|
390
|
-
paddingY,
|
|
391
|
-
paddingLeft,
|
|
392
|
-
paddingRight,
|
|
393
|
-
p,
|
|
394
|
-
pb,
|
|
395
|
-
pt,
|
|
396
|
-
pr,
|
|
397
|
-
pl,
|
|
398
|
-
px,
|
|
399
|
-
py
|
|
400
|
-
};
|
|
401
|
-
const typographyProps = Object.fromEntries(
|
|
402
|
-
Object.entries({
|
|
403
|
-
color,
|
|
404
|
-
fontFamily,
|
|
405
|
-
fontSize: fontSize2,
|
|
406
|
-
fontStyle,
|
|
407
|
-
fontWeight,
|
|
408
|
-
lineHeight,
|
|
409
|
-
textAlign
|
|
410
|
-
}).filter(([_, value]) => value != null)
|
|
411
|
-
);
|
|
412
313
|
const shouldRenderActionsBlock = Boolean(overflowMenu || validatedActions);
|
|
413
314
|
const renderedOverflowMenu = overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
414
315
|
import_seeds_react_menu2.ActionMenu,
|
|
@@ -459,7 +360,11 @@ var AccordionTrigger = ({
|
|
|
459
360
|
},
|
|
460
361
|
`${action.iconName}-${index}`
|
|
461
362
|
)) });
|
|
462
|
-
|
|
363
|
+
const renderedActions = shouldRenderActionsBlock ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_seeds_react_box.Box, { mr: 300, display: "flex", children: [
|
|
364
|
+
renderedOverflowMenu,
|
|
365
|
+
renderedRelatedActions
|
|
366
|
+
] }) : void 0;
|
|
367
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
463
368
|
TriggerContainer,
|
|
464
369
|
{
|
|
465
370
|
"data-styled": styled2,
|
|
@@ -467,51 +372,20 @@ var AccordionTrigger = ({
|
|
|
467
372
|
"data-qa-trigger": "HERE",
|
|
468
373
|
color,
|
|
469
374
|
...triggerProps,
|
|
470
|
-
children:
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
"data-styled": styled2,
|
|
485
|
-
...typographyProps,
|
|
486
|
-
children: title
|
|
487
|
-
}
|
|
488
|
-
),
|
|
489
|
-
rightSlot
|
|
490
|
-
] }),
|
|
491
|
-
triggerIcon
|
|
492
|
-
] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(StyledAccordionArea, { children: [
|
|
493
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(FlexCenter, { children: [
|
|
494
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_box.Box, { mr: 300, children: triggerIcon }),
|
|
495
|
-
leftSlot,
|
|
496
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
497
|
-
TitleStyles,
|
|
498
|
-
{
|
|
499
|
-
as: headingLevel,
|
|
500
|
-
"data-styled": styled2,
|
|
501
|
-
...typographyProps,
|
|
502
|
-
children: title
|
|
503
|
-
}
|
|
504
|
-
)
|
|
505
|
-
] }),
|
|
506
|
-
rightSlot
|
|
507
|
-
] })
|
|
508
|
-
}
|
|
509
|
-
),
|
|
510
|
-
shouldRenderActionsBlock && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_seeds_react_box.Box, { mr: 300, display: "flex", children: [
|
|
511
|
-
renderedOverflowMenu,
|
|
512
|
-
renderedRelatedActions
|
|
513
|
-
] })
|
|
514
|
-
]
|
|
375
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
376
|
+
import_seeds_react_content_header2.CollapsibleContentHeader,
|
|
377
|
+
{
|
|
378
|
+
title,
|
|
379
|
+
headingLevel,
|
|
380
|
+
leftSlot,
|
|
381
|
+
rightSlot,
|
|
382
|
+
headerActions: renderedActions,
|
|
383
|
+
trigger: AccordionTriggerWrapper,
|
|
384
|
+
triggerPosition,
|
|
385
|
+
triggerIcon,
|
|
386
|
+
bordered: false
|
|
387
|
+
}
|
|
388
|
+
)
|
|
515
389
|
}
|
|
516
390
|
);
|
|
517
391
|
};
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Accordion.tsx","../src/AccordionTypes.ts","../src/AccordionItem.tsx","../src/styles.ts","../../seeds-react-mixins/src/index.ts","../src/AccordionContent.tsx","../src/AccordionTrigger.tsx"],"sourcesContent":["import { Accordion } from \"./Accordion\";\nimport { AccordionItem } from \"./AccordionItem\";\nimport { AccordionContent } from \"./AccordionContent\";\nimport { AccordionTrigger } from \"./AccordionTrigger\";\n\nexport { Accordion, AccordionItem, AccordionContent, AccordionTrigger };\nexport * from \"./AccordionTypes\";\n","import React, { createContext, type ReactElement } from \"react\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeAccordionProps } from \"./AccordionTypes\";\n\nexport const AccordionContext = createContext<{\n triggerIcon: ReactElement | null;\n triggerPosition: string;\n styled: boolean;\n}>({\n triggerIcon: null,\n triggerPosition: \"\",\n styled: false,\n});\n\nexport const Accordion = ({\n children,\n collapsible,\n defaultValue = [\"item-0\"],\n triggerPosition = \"right\",\n triggerIcon = <Icon className=\"triggerIcon\" name=\"chevron-down-outline\" />,\n type = \"multiple\",\n styled = true,\n value,\n onValueChange,\n}: TypeAccordionProps) => {\n const contextValue = {\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n };\n\n if (type === \"single\") {\n // Determine if controlled or uncontrolled\n const isControlled = value !== undefined;\n\n return (\n <RadixAccordion.Root\n type=\"single\"\n value={\n isControlled ? (Array.isArray(value) ? value[0] : value) : undefined\n }\n defaultValue={\n !isControlled && defaultValue\n ? Array.isArray(defaultValue)\n ? defaultValue[0]\n : defaultValue\n : undefined\n }\n onValueChange={onValueChange as ((value: string) => void) | undefined}\n collapsible={collapsible}\n >\n <AccordionContext.Provider value={contextValue}>\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n }\n\n // Multiple mode\n const isControlled = value !== undefined;\n\n return (\n <RadixAccordion.Root\n type=\"multiple\"\n value={\n isControlled ? (Array.isArray(value) ? value : [value]) : undefined\n }\n defaultValue={\n !isControlled && defaultValue\n ? Array.isArray(defaultValue)\n ? defaultValue\n : [defaultValue]\n : undefined\n }\n onValueChange={onValueChange as ((value: string[]) => void) | undefined}\n >\n <AccordionContext.Provider value={contextValue}>\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n};\n","import * as React from \"react\";\nimport {\n type TypeSystemCommonProps,\n type TypeBorderSystemProps,\n type TypeFlexboxSystemProps,\n type TypeLayoutSystemProps,\n type TypeStyledComponentsCommonProps,\n type TypeSystemTypographyProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { type TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeMenuItemProps } from \"@sproutsocial/seeds-react-menu\";\n\nexport interface TypeAccordionSystemProps\n extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeBorderSystemProps,\n TypeFlexboxSystemProps,\n TypeLayoutSystemProps,\n TypeSystemTypographyProps {}\n\nexport interface TypeAccordionProps {\n children?: React.ReactNode;\n collapsible?: boolean;\n defaultValue?: string | string[];\n triggerIcon?: React.ReactNode;\n triggerPosition?: \"left\" | \"right\";\n type?: \"single\" | \"multiple\";\n styled?: boolean;\n /** Controlled value for open accordion items (single mode: string, multiple mode: string[]) */\n value?: string | string[];\n /** Callback fired when accordion items change (single mode: string, multiple mode: string[]) */\n onValueChange?: (value: string | string[]) => void;\n}\n\nexport interface TypeRelatedAction {\n iconName: TypeIconName;\n onClick: () => void;\n \"aria-label\": string;\n}\n\nexport interface TypeOverflowMenuItem extends TypeMenuItemProps {\n iconName?: TypeIconName;\n}\n\nexport interface TypeOverflowMenuConfig {\n /** Menu items to be rendered in the overflow menu */\n items: TypeOverflowMenuItem[];\n /** Aria label for the overflow menu trigger button. Defaults to \"More actions\" */\n \"aria-label\"?: string;\n}\n\nexport interface TypeAccordionItemProps {\n children: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n value: string;\n}\n\n/**\n * Type for valid heading levels\n */\nexport type TypeHeadingLevel = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\n/**\n * Props for AccordionTrigger component\n *\n * @example\n * ```tsx\n * <AccordionTrigger\n * title=\"My Accordion Title\"\n * headingLevel=\"h2\"\n * />\n * ```\n */\nexport interface TypeAccordionTriggerProps extends TypeAccordionSystemProps {\n title: string;\n leftSlot?: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n rightSlot?: React.ReactNode;\n /** The semantic heading level for the accordion title. Defaults to \"h4\" */\n headingLevel?: TypeHeadingLevel;\n}\n","import * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { type TypeAccordionItemProps } from \"./AccordionTypes\";\nimport { StyledAccordionItem } from \"./styles\";\n\nexport const AccordionItem = ({ children, value }: TypeAccordionItemProps) => {\n return (\n <StyledAccordionItem className=\"accordion-item\" value={value}>\n {children}\n </StyledAccordionItem>\n );\n};\n","import * as React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { fontSize } from \"styled-system\";\nimport {\n BORDER,\n COMMON,\n FLEXBOX,\n LAYOUT,\n TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\n\ninterface StyledAccordionProps extends TypeAccordionSystemProps {\n $styled?: boolean;\n}\n\nexport const StyledAccordionItem = styled(RadixAccordion.Item)``;\n\nconst animations = css`\n @keyframes slideDown {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n }\n\n @keyframes slideUp {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n`;\n\nexport const StyledRadixAccordionTrigger = styled(\n RadixAccordion.Trigger as React.ComponentType<\n Omit<React.ComponentPropsWithoutRef<typeof RadixAccordion.Trigger>, \"color\">\n >\n)<StyledAccordionProps>`\n padding: 0;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n outline: none;\n border: none;\n background: transparent;\n color: ${({ theme }) => theme.colors.text.body};\n ${({ theme }) => theme.typography[200]};\n\n .triggerIcon {\n transition: transform 300ms ease-in-out;\n }\n\n &[data-state=\"open\"] {\n .triggerIcon {\n transform: rotate(-180deg);\n }\n }\n\n &[data-styled] {\n padding: ${({ theme }) => theme.space[400]};\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n`;\n\nexport const StyledRadixAccordionContent = styled(\n RadixAccordion.Content\n)<StyledAccordionProps>`\n ${animations}\n\n overflow: hidden;\n\n &[data-state=\"open\"] {\n animation: slideDown 300ms ease-in-out;\n }\n\n &[data-state=\"closed\"] {\n animation: slideUp 300ms ease-in-out;\n }\n\n &[data-styled=\"true\"] {\n border-left: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-right: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n background: ${({ theme }) => theme.colors.container.background.base};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n`;\n\nexport const StyledAccordionArea = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n`;\nexport const FlexCenter = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const ContentContainer = styled.div<StyledAccordionProps>`\n color: ${({ theme }) => theme.colors.text.body};\n background: transparent;\n font-family: ${({ theme }) => theme.fontFamily};\n\n &[data-styled=\"true\"] {\n padding: ${({ theme }) => theme.space[400]};\n ${({ theme }) => theme.typography[200]};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TriggerContainer = styled.div<StyledAccordionProps>`\n display: flex;\n align-items: center;\n color: ${({ theme }) => theme.colors.text.body};\n\n ${({ $styled, theme }) =>\n $styled &&\n `\n border-top: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-left: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-right: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n background: ${theme.colors.container.background.base};\n `}\n\n .accordion-item[data-state=\"open\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-bottom-color 0s ease-in-out 0.3s;\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid transparent`};\n }\n\n .accordion-item:first-child &[data-styled=\"true\"] {\n border-top-left-radius: ${({ theme }) => theme.radii.outer};\n border-top-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n .accordion-item:last-child &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-radius 0s linear 0.3s;\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TitleStyles = styled.h4.attrs<\n StyledAccordionProps & { as?: string }\n>((props) => ({\n as: props.as || \"h4\",\n}))<StyledAccordionProps>`\n margin: 0;\n font-weight: normal;\n\n &[data-styled=\"true\"] {\n font-size: ${({ theme }) => theme.fontSizes[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.text.headline};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${fontSize}\n`;\n","import { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nexport const svgToDataURL = (svgStr: string) => {\n const encoded = encodeURIComponent(svgStr)\n .replace(/'/g, \"%27\")\n .replace(/\"/g, \"%22\");\n\n const header = \"data:image/svg+xml,\";\n const dataUrl = header + encoded;\n\n return dataUrl;\n};\n\nexport const visuallyHidden = css`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n border: 0;\n`;\n\nexport const focusRing = css`\n box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},\n 0 0px 0px 4px\n color-mix(\n in srgb,\n ${theme.colors.button.primary.background.base},\n transparent 70%\n );\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n`;\n\nexport const pill = css`\n min-width: ${theme.space[600]};\n min-height: ${theme.space[600]};\n padding: ${theme.space[300]};\n border-radius: ${theme.radii.pill};\n`;\n\nexport const disabled = css`\n opacity: 0.4;\n pointer-events: none;\n`;\n","import { StyledRadixAccordionContent, ContentContainer } from \"./styles\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\nimport { AccordionContext } from \"./Accordion\";\nimport { useContext } from \"react\";\n\ninterface TypeAccordionContentProps extends TypeAccordionSystemProps {\n children?: React.ReactNode;\n}\n\nexport const AccordionContent = ({\n children,\n ...rest\n}: TypeAccordionContentProps) => {\n const { styled } = useContext(AccordionContext);\n\n return (\n <StyledRadixAccordionContent data-styled={styled}>\n <ContentContainer data-styled={styled} {...rest}>\n {children}\n </ContentContainer>\n </StyledRadixAccordionContent>\n );\n};\n","import { StyledRadixAccordionTrigger, TitleStyles } from \"./styles\";\nimport {\n type TypeAccordionTriggerProps,\n type TypeRelatedAction,\n type TypeOverflowMenuConfig,\n} from \"./AccordionTypes\";\nimport { FlexCenter, StyledAccordionArea, TriggerContainer } from \"./styles\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Button } from \"@sproutsocial/seeds-react-button\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport {\n ActionMenu,\n MenuContent,\n MenuItem,\n MenuGroup,\n MenuToggleButton,\n} from \"@sproutsocial/seeds-react-menu\";\nimport { useContext } from \"react\";\nimport { AccordionContext } from \"./Accordion\";\n\nconst MAX_RELATED_ACTIONS = 2;\n\nexport const AccordionTrigger = ({\n children,\n leftSlot,\n relatedActions,\n overflowMenu,\n rightSlot,\n title,\n headingLevel = \"h4\",\n ...rest\n}: TypeAccordionTriggerProps) => {\n const { triggerIcon, triggerPosition, styled } = useContext(AccordionContext);\n\n // Validate and limit related actions\n const validatedActions = relatedActions?.slice(0, MAX_RELATED_ACTIONS);\n\n // Extract system props to distribute to appropriate container\n const {\n color,\n padding,\n paddingBottom,\n paddingTop,\n paddingX,\n paddingY,\n paddingLeft,\n paddingRight,\n p,\n pb,\n pt,\n pr,\n pl,\n px,\n py,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n ...triggerProps\n } = rest;\n\n const spacingProps = {\n padding,\n paddingBottom,\n paddingTop,\n paddingX,\n paddingY,\n paddingLeft,\n paddingRight,\n p,\n pb,\n pt,\n pr,\n pl,\n px,\n py,\n };\n\n // When you destructure color from rest, it might be null, which is incompatible with what the styled component expects. We need to filter out null or undefined values from typographyProps before spreading them.\n\n const typographyProps = Object.fromEntries(\n Object.entries({\n color,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n }).filter(([_, value]) => value != null)\n );\n\n const shouldRenderActionsBlock = Boolean(overflowMenu || validatedActions);\n\n // Render overflow menu from config\n const renderedOverflowMenu = overflowMenu && (\n <ActionMenu\n menuToggleElement={\n <MenuToggleButton\n aria-label={overflowMenu[\"aria-label\"]}\n appearance=\"unstyled\"\n color={color}\n >\n <Icon name=\"ellipsis-horizontal-outline\" aria-hidden=\"true\" />\n </MenuToggleButton>\n }\n >\n <MenuContent>\n <MenuGroup id=\"overflow-actions\">\n {overflowMenu.items.map((item, index) => {\n const { iconName, id, onClick, children, ...menuItemProps } = item;\n return (\n <MenuItem\n key={id || `overflow-item-${index}`}\n id={id || `overflow-item-${index}`}\n onClick={onClick}\n {...menuItemProps}\n >\n {iconName ? (\n <Box\n display=\"flex\"\n alignItems=\"center\"\n gap=\"300\"\n color={color}\n >\n <Icon name={iconName} />\n {children}\n </Box>\n ) : (\n children\n )}\n </MenuItem>\n );\n })}\n </MenuGroup>\n </MenuContent>\n </ActionMenu>\n );\n\n // Render related actions from config\n const renderedRelatedActions = validatedActions &&\n validatedActions.length > 0 && (\n <Box display=\"flex\">\n {validatedActions.map((action, index) => (\n <Button\n key={`${action.iconName}-${index}`}\n onClick={action.onClick}\n aria-label={action[\"aria-label\"]}\n color={color}\n >\n <Icon name={action.iconName} aria-hidden=\"true\" />\n </Button>\n ))}\n </Box>\n );\n\n return (\n <TriggerContainer\n data-styled={styled}\n $styled={styled}\n data-qa-trigger=\"HERE\"\n color={color}\n {...triggerProps}\n >\n <StyledRadixAccordionTrigger\n data-styled={styled}\n color={color}\n {...spacingProps}\n >\n {triggerPosition === \"right\" ? (\n <StyledAccordionArea>\n <FlexCenter>\n {leftSlot}\n <TitleStyles\n as={headingLevel}\n data-styled={styled}\n {...typographyProps}\n >\n {title}\n </TitleStyles>\n {rightSlot}\n </FlexCenter>\n {triggerIcon}\n </StyledAccordionArea>\n ) : (\n <StyledAccordionArea>\n <FlexCenter>\n <Box mr={300}>{triggerIcon}</Box>\n {leftSlot}\n <TitleStyles\n as={headingLevel}\n data-styled={styled}\n {...typographyProps}\n >\n {title}\n </TitleStyles>\n </FlexCenter>\n {rightSlot}\n </StyledAccordionArea>\n )}\n </StyledRadixAccordionTrigger>\n {shouldRenderActionsBlock && (\n <Box mr={300} display=\"flex\">\n {renderedOverflowMenu}\n {renderedRelatedActions}\n </Box>\n )}\n </TriggerContainer>\n );\n};\n"],"mappings":"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","names":["import_seeds_react_icon","styled","React","isControlled","RadixAccordion","React","import_styled_components","RadixAccordion","import_seeds_react_system_props","styled","theme","import_jsx_runtime","import_react","import_jsx_runtime","styled","import_seeds_react_icon","import_seeds_react_menu","import_react","import_jsx_runtime","styled","fontSize","children"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Accordion.tsx","../src/AccordionTypes.ts","../src/AccordionItem.tsx","../src/styles.ts","../src/AccordionContent.tsx","../src/AccordionTrigger.tsx"],"sourcesContent":["import { Accordion } from \"./Accordion\";\nimport { AccordionItem } from \"./AccordionItem\";\nimport { AccordionContent } from \"./AccordionContent\";\nimport { AccordionTrigger } from \"./AccordionTrigger\";\n\nexport { Accordion, AccordionItem, AccordionContent, AccordionTrigger };\nexport * from \"./AccordionTypes\";\n","import React, { createContext, type ReactElement } from \"react\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeAccordionProps } from \"./AccordionTypes\";\n\nexport const AccordionContext = createContext<{\n triggerIcon: ReactElement | null;\n triggerPosition: string;\n styled: boolean;\n}>({\n triggerIcon: null,\n triggerPosition: \"\",\n styled: false,\n});\n\nexport const Accordion = ({\n children,\n collapsible,\n defaultValue = [\"item-0\"],\n triggerPosition = \"right\",\n triggerIcon = <Icon className=\"triggerIcon\" name=\"chevron-down-outline\" />,\n type = \"multiple\",\n styled = true,\n value,\n onValueChange,\n}: TypeAccordionProps) => {\n const contextValue = {\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n };\n\n if (type === \"single\") {\n // Determine if controlled or uncontrolled\n const isControlled = value !== undefined;\n\n return (\n <RadixAccordion.Root\n type=\"single\"\n value={\n isControlled ? (Array.isArray(value) ? value[0] : value) : undefined\n }\n defaultValue={\n !isControlled && defaultValue\n ? Array.isArray(defaultValue)\n ? defaultValue[0]\n : defaultValue\n : undefined\n }\n onValueChange={onValueChange as ((value: string) => void) | undefined}\n collapsible={collapsible}\n >\n <AccordionContext.Provider value={contextValue}>\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n }\n\n // Multiple mode\n const isControlled = value !== undefined;\n\n return (\n <RadixAccordion.Root\n type=\"multiple\"\n value={\n isControlled ? (Array.isArray(value) ? value : [value]) : undefined\n }\n defaultValue={\n !isControlled && defaultValue\n ? Array.isArray(defaultValue)\n ? defaultValue\n : [defaultValue]\n : undefined\n }\n onValueChange={onValueChange as ((value: string[]) => void) | undefined}\n >\n <AccordionContext.Provider value={contextValue}>\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n};\n","import * as React from \"react\";\nimport {\n type TypeSystemCommonProps,\n type TypeBorderSystemProps,\n type TypeFlexboxSystemProps,\n type TypeLayoutSystemProps,\n type TypeStyledComponentsCommonProps,\n type TypeSystemTypographyProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { type TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeMenuItemProps } from \"@sproutsocial/seeds-react-menu\";\nimport { type TypeHeadingLevel } from \"@sproutsocial/seeds-react-content-header\";\n\nexport interface TypeAccordionSystemProps\n extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeBorderSystemProps,\n TypeFlexboxSystemProps,\n TypeLayoutSystemProps,\n TypeSystemTypographyProps {}\n\nexport interface TypeAccordionProps {\n children?: React.ReactNode;\n collapsible?: boolean;\n defaultValue?: string | string[];\n triggerIcon?: React.ReactNode;\n triggerPosition?: \"left\" | \"right\";\n type?: \"single\" | \"multiple\";\n styled?: boolean;\n /** Controlled value for open accordion items (single mode: string, multiple mode: string[]) */\n value?: string | string[];\n /** Callback fired when accordion items change (single mode: string, multiple mode: string[]) */\n onValueChange?: (value: string | string[]) => void;\n}\n\nexport interface TypeRelatedAction {\n iconName: TypeIconName;\n onClick: () => void;\n \"aria-label\": string;\n}\n\nexport interface TypeOverflowMenuItem extends TypeMenuItemProps {\n iconName?: TypeIconName;\n}\n\nexport interface TypeOverflowMenuConfig {\n /** Menu items to be rendered in the overflow menu */\n items: TypeOverflowMenuItem[];\n /** Aria label for the overflow menu trigger button. Defaults to \"More actions\" */\n \"aria-label\"?: string;\n}\n\nexport interface TypeAccordionItemProps {\n children: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n value: string;\n}\n\n/**\n * Props for AccordionTrigger component\n *\n * @example\n * ```tsx\n * <AccordionTrigger\n * title=\"My Accordion Title\"\n * headingLevel=\"h2\"\n * />\n * ```\n */\nexport interface TypeAccordionTriggerProps extends TypeAccordionSystemProps {\n title: string;\n leftSlot?: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n rightSlot?: React.ReactNode;\n /** The semantic heading level for the accordion title. Defaults to \"h4\" */\n headingLevel?: TypeHeadingLevel;\n}\n","import * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { type TypeAccordionItemProps } from \"./AccordionTypes\";\nimport { StyledAccordionItem } from \"./styles\";\n\nexport const AccordionItem = ({ children, value }: TypeAccordionItemProps) => {\n return (\n <StyledAccordionItem className=\"accordion-item\" value={value}>\n {children}\n </StyledAccordionItem>\n );\n};\n","import styled, { css } from \"styled-components\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport {\n BORDER,\n COMMON,\n FLEXBOX,\n LAYOUT,\n TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\n\ninterface StyledAccordionProps extends TypeAccordionSystemProps {\n $styled?: boolean;\n}\n\nexport const StyledAccordionItem = styled(RadixAccordion.Item)``;\n\nconst animations = css`\n @keyframes slideDown {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n }\n\n @keyframes slideUp {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n`;\n\nexport const StyledRadixAccordionContent = styled(\n RadixAccordion.Content\n)<StyledAccordionProps>`\n ${animations}\n\n overflow: hidden;\n\n &[data-state=\"open\"] {\n animation: slideDown 300ms ease-in-out;\n }\n\n &[data-state=\"closed\"] {\n animation: slideUp 300ms ease-in-out;\n }\n\n &[data-styled=\"true\"] {\n border-left: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-right: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n background: ${({ theme }) => theme.colors.container.background.base};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n`;\n\nexport const ContentContainer = styled.div<StyledAccordionProps>`\n color: ${({ theme }) => theme.colors.text.body};\n background: transparent;\n font-family: ${({ theme }) => theme.fontFamily};\n\n &[data-styled=\"true\"] {\n padding: ${({ theme }) => theme.space[400]};\n ${({ theme }) => theme.typography[200]};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TriggerContainer = styled.div<StyledAccordionProps>`\n display: flex;\n align-items: center;\n color: ${({ theme }) => theme.colors.text.body};\n ${({ theme }) => theme.typography[200]};\n\n /* Override Text.Headline styles to match original accordion trigger typography */\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: normal;\n line-height: inherit;\n color: inherit;\n }\n\n &[data-styled=\"true\"] {\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.text.headline};\n }\n }\n\n ${({ $styled, theme }) =>\n $styled &&\n `\n border-top: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-left: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-right: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n background: ${theme.colors.container.background.base};\n `}\n\n .accordion-item[data-state=\"open\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-bottom-color 0s ease-in-out 0.3s;\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid transparent`};\n }\n\n .accordion-item:first-child &[data-styled=\"true\"] {\n border-top-left-radius: ${({ theme }) => theme.radii.outer};\n border-top-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n .accordion-item:last-child &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-radius 0s linear 0.3s;\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n","import { StyledRadixAccordionContent, ContentContainer } from \"./styles\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\nimport { AccordionContext } from \"./Accordion\";\nimport { useContext } from \"react\";\n\ninterface TypeAccordionContentProps extends TypeAccordionSystemProps {\n children?: React.ReactNode;\n}\n\nexport const AccordionContent = ({\n children,\n ...rest\n}: TypeAccordionContentProps) => {\n const { styled } = useContext(AccordionContext);\n\n return (\n <StyledRadixAccordionContent data-styled={styled}>\n <ContentContainer data-styled={styled} {...rest}>\n {children}\n </ContentContainer>\n </StyledRadixAccordionContent>\n );\n};\n","import { TriggerContainer } from \"./styles\";\nimport { type TypeAccordionTriggerProps } from \"./AccordionTypes\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Button } from \"@sproutsocial/seeds-react-button\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport {\n ActionMenu,\n MenuContent,\n MenuItem,\n MenuGroup,\n MenuToggleButton,\n} from \"@sproutsocial/seeds-react-menu\";\nimport React, { useContext } from \"react\";\nimport { AccordionContext } from \"./Accordion\";\nimport { CollapsibleContentHeader } from \"@sproutsocial/seeds-react-content-header\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\n\nconst MAX_RELATED_ACTIONS = 2;\n\n// Wrapper to adapt RadixAccordion.Trigger to the ContentHeader trigger interface\nconst AccordionTriggerWrapper = ({\n children,\n}: {\n children: React.ReactElement;\n}) => <RadixAccordion.Trigger asChild>{children}</RadixAccordion.Trigger>;\n\nexport const AccordionTrigger = ({\n children,\n leftSlot,\n relatedActions,\n overflowMenu,\n rightSlot,\n title,\n headingLevel = \"h4\",\n ...rest\n}: TypeAccordionTriggerProps) => {\n const { triggerIcon, triggerPosition, styled } = useContext(AccordionContext);\n\n // Validate and limit related actions\n const validatedActions = relatedActions?.slice(0, MAX_RELATED_ACTIONS);\n\n // Extract system props to distribute to appropriate container\n const {\n color,\n padding,\n paddingBottom,\n paddingTop,\n paddingX,\n paddingY,\n paddingLeft,\n paddingRight,\n p,\n pb,\n pt,\n pr,\n pl,\n px,\n py,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n ...triggerProps\n } = rest;\n\n const shouldRenderActionsBlock = Boolean(overflowMenu || validatedActions);\n\n // Render overflow menu from config\n const renderedOverflowMenu = overflowMenu && (\n <ActionMenu\n menuToggleElement={\n <MenuToggleButton\n aria-label={overflowMenu[\"aria-label\"]}\n appearance=\"unstyled\"\n color={color}\n >\n <Icon name=\"ellipsis-horizontal-outline\" aria-hidden=\"true\" />\n </MenuToggleButton>\n }\n >\n <MenuContent>\n <MenuGroup id=\"overflow-actions\">\n {overflowMenu.items.map((item, index) => {\n const { iconName, id, onClick, children, ...menuItemProps } = item;\n return (\n <MenuItem\n key={id || `overflow-item-${index}`}\n id={id || `overflow-item-${index}`}\n onClick={onClick}\n {...menuItemProps}\n >\n {iconName ? (\n <Box\n display=\"flex\"\n alignItems=\"center\"\n gap=\"300\"\n color={color}\n >\n <Icon name={iconName} />\n {children}\n </Box>\n ) : (\n children\n )}\n </MenuItem>\n );\n })}\n </MenuGroup>\n </MenuContent>\n </ActionMenu>\n );\n\n // Render related actions from config\n const renderedRelatedActions = validatedActions &&\n validatedActions.length > 0 && (\n <Box display=\"flex\">\n {validatedActions.map((action, index) => (\n <Button\n key={`${action.iconName}-${index}`}\n onClick={action.onClick}\n aria-label={action[\"aria-label\"]}\n color={color}\n >\n <Icon name={action.iconName} aria-hidden=\"true\" />\n </Button>\n ))}\n </Box>\n );\n\n // Compose actions into a single ReactNode for ContentHeader\n const renderedActions = shouldRenderActionsBlock ? (\n <Box mr={300} display=\"flex\">\n {renderedOverflowMenu}\n {renderedRelatedActions}\n </Box>\n ) : undefined;\n\n return (\n <TriggerContainer\n data-styled={styled}\n $styled={styled}\n data-qa-trigger=\"HERE\"\n color={color}\n {...triggerProps}\n >\n <CollapsibleContentHeader\n title={title}\n headingLevel={headingLevel}\n leftSlot={leftSlot}\n rightSlot={rightSlot}\n headerActions={renderedActions}\n trigger={AccordionTriggerWrapper}\n triggerPosition={triggerPosition as \"left\" | \"right\"}\n triggerIcon={triggerIcon}\n bordered={false}\n />\n </TriggerContainer>\n );\n};\n"],"mappings":"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","names":["import_seeds_react_icon","styled","React","isControlled","RadixAccordion","RadixAccordion","import_seeds_react_system_props","styled","import_jsx_runtime","import_react","import_jsx_runtime","styled","import_seeds_react_icon","import_seeds_react_menu","import_react","import_seeds_react_content_header","RadixAccordion","import_jsx_runtime","styled","children"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-accordion",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.6",
|
|
4
4
|
"description": "Seeds React Accordion",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -19,12 +19,13 @@
|
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@radix-ui/react-accordion": "^1.2.12",
|
|
22
|
-
"@sproutsocial/seeds-react-theme": "^3.
|
|
22
|
+
"@sproutsocial/seeds-react-theme": "^3.6.0",
|
|
23
23
|
"@sproutsocial/seeds-react-system-props": "^3.0.1",
|
|
24
|
-
"@sproutsocial/seeds-react-box": "^1.1.
|
|
25
|
-
"@sproutsocial/seeds-react-
|
|
26
|
-
"@sproutsocial/seeds-react-
|
|
27
|
-
"@sproutsocial/seeds-react-
|
|
24
|
+
"@sproutsocial/seeds-react-box": "^1.1.14",
|
|
25
|
+
"@sproutsocial/seeds-react-content-header": "^0.2.1",
|
|
26
|
+
"@sproutsocial/seeds-react-button": "^1.4.0",
|
|
27
|
+
"@sproutsocial/seeds-react-icon": "^2.2.5",
|
|
28
|
+
"@sproutsocial/seeds-react-menu": "^1.9.2",
|
|
28
29
|
"styled-system": "^5.1.5"
|
|
29
30
|
},
|
|
30
31
|
"devDependencies": {
|