@sproutsocial/seeds-react-accordion 0.4.2 → 0.4.7
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 +48 -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/.turbo/turbo-build.log
CHANGED
|
@@ -3,19 +3,19 @@ $ tsup --dts
|
|
|
3
3
|
[34mCLI[39m Building entry: src/index.ts
|
|
4
4
|
[34mCLI[39m Using tsconfig: tsconfig.json
|
|
5
5
|
[34mCLI[39m tsup v8.5.0
|
|
6
|
-
[34mCLI[39m Using tsup config: /home/runner/
|
|
6
|
+
[34mCLI[39m Using tsup config: /home/runner/_work/seeds/seeds/seeds-react/seeds-react-accordion/tsup.config.ts
|
|
7
7
|
[34mCLI[39m Target: es2022
|
|
8
8
|
[34mCLI[39m Cleaning output folder
|
|
9
9
|
[34mCJS[39m Build start
|
|
10
10
|
[34mESM[39m Build start
|
|
11
|
-
[
|
|
12
|
-
[
|
|
13
|
-
[
|
|
14
|
-
[
|
|
15
|
-
[
|
|
16
|
-
[
|
|
11
|
+
[32mCJS[39m [1mdist/index.js [22m[32m14.06 KB[39m
|
|
12
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m21.85 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 19ms
|
|
14
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m10.74 KB[39m
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m21.45 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 19ms
|
|
17
17
|
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
|
19
|
-
[32mDTS[39m [1mdist/index.d.ts [22m[32m3.
|
|
20
|
-
[32mDTS[39m [1mdist/index.d.mts [22m[32m3.
|
|
21
|
-
Done in
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 1863ms
|
|
19
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m3.36 KB[39m
|
|
20
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m3.36 KB[39m
|
|
21
|
+
Done in 2.58s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,53 @@
|
|
|
1
1
|
# @sproutsocial/seeds-react-accordion
|
|
2
2
|
|
|
3
|
+
## 0.4.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [1432504]
|
|
8
|
+
- Updated dependencies [c29d7d4]
|
|
9
|
+
- @sproutsocial/seeds-react-menu@1.10.0
|
|
10
|
+
|
|
11
|
+
## 0.4.6
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies [7d54d67]
|
|
16
|
+
- @sproutsocial/seeds-react-button@1.4.0
|
|
17
|
+
- @sproutsocial/seeds-react-menu@1.9.2
|
|
18
|
+
|
|
19
|
+
## 0.4.5
|
|
20
|
+
|
|
21
|
+
### Patch Changes
|
|
22
|
+
|
|
23
|
+
- Updated dependencies [17d4f12]
|
|
24
|
+
- Updated dependencies [b3d31ac]
|
|
25
|
+
- Updated dependencies [c281089]
|
|
26
|
+
- @sproutsocial/seeds-react-theme@3.6.0
|
|
27
|
+
- @sproutsocial/seeds-react-menu@1.9.1
|
|
28
|
+
- @sproutsocial/seeds-react-box@1.1.14
|
|
29
|
+
- @sproutsocial/seeds-react-icon@2.2.5
|
|
30
|
+
- @sproutsocial/seeds-react-content-header@0.2.1
|
|
31
|
+
- @sproutsocial/seeds-react-button@1.3.20
|
|
32
|
+
|
|
33
|
+
## 0.4.4
|
|
34
|
+
|
|
35
|
+
### Patch Changes
|
|
36
|
+
|
|
37
|
+
- Updated dependencies [2194620]
|
|
38
|
+
- @sproutsocial/seeds-react-menu@1.9.0
|
|
39
|
+
|
|
40
|
+
## 0.4.3
|
|
41
|
+
|
|
42
|
+
### Patch Changes
|
|
43
|
+
|
|
44
|
+
- 5bb63e1: AccordionTrigger now delegates to CollapsibleContentHeader for its layout, reducing duplicated code.
|
|
45
|
+
- Updated dependencies [5bb63e1]
|
|
46
|
+
- Updated dependencies [fe24df3]
|
|
47
|
+
- @sproutsocial/seeds-react-content-header@0.2.0
|
|
48
|
+
- @sproutsocial/seeds-react-menu@1.8.7
|
|
49
|
+
- @sproutsocial/seeds-react-button@1.3.19
|
|
50
|
+
|
|
3
51
|
## 0.4.2
|
|
4
52
|
|
|
5
53
|
### Patch Changes
|
package/dist/esm/index.js
CHANGED
|
@@ -8,6 +8,7 @@ import "react";
|
|
|
8
8
|
import "@sproutsocial/seeds-react-system-props";
|
|
9
9
|
import "@sproutsocial/seeds-react-icon";
|
|
10
10
|
import "@sproutsocial/seeds-react-menu";
|
|
11
|
+
import "@sproutsocial/seeds-react-content-header";
|
|
11
12
|
|
|
12
13
|
// src/Accordion.tsx
|
|
13
14
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -63,10 +64,8 @@ var Accordion = ({
|
|
|
63
64
|
import "@radix-ui/react-accordion";
|
|
64
65
|
|
|
65
66
|
// src/styles.ts
|
|
66
|
-
import "
|
|
67
|
-
import styled, { css as css2 } from "styled-components";
|
|
67
|
+
import styled, { css } from "styled-components";
|
|
68
68
|
import * as RadixAccordion2 from "@radix-ui/react-accordion";
|
|
69
|
-
import { fontSize } from "styled-system";
|
|
70
69
|
import {
|
|
71
70
|
BORDER,
|
|
72
71
|
COMMON,
|
|
@@ -74,48 +73,8 @@ import {
|
|
|
74
73
|
LAYOUT,
|
|
75
74
|
TYPOGRAPHY
|
|
76
75
|
} from "@sproutsocial/seeds-react-system-props";
|
|
77
|
-
|
|
78
|
-
// ../seeds-react-mixins/dist/esm/index.js
|
|
79
|
-
import { css } from "styled-components";
|
|
80
|
-
import { theme } from "@sproutsocial/seeds-react-theme";
|
|
81
|
-
var visuallyHidden = css`
|
|
82
|
-
position: absolute;
|
|
83
|
-
width: 1px;
|
|
84
|
-
height: 1px;
|
|
85
|
-
padding: 0;
|
|
86
|
-
margin: -1px;
|
|
87
|
-
overflow: hidden;
|
|
88
|
-
clip: rect(0 0 0 0);
|
|
89
|
-
border: 0;
|
|
90
|
-
`;
|
|
91
|
-
var focusRing = css`
|
|
92
|
-
box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},
|
|
93
|
-
0 0px 0px 4px
|
|
94
|
-
color-mix(
|
|
95
|
-
in srgb,
|
|
96
|
-
${theme.colors.button.primary.background.base},
|
|
97
|
-
transparent 70%
|
|
98
|
-
);
|
|
99
|
-
outline: none;
|
|
100
|
-
|
|
101
|
-
&::-moz-focus-inner {
|
|
102
|
-
border: 0;
|
|
103
|
-
}
|
|
104
|
-
`;
|
|
105
|
-
var pill = css`
|
|
106
|
-
min-width: ${theme.space[600]};
|
|
107
|
-
min-height: ${theme.space[600]};
|
|
108
|
-
padding: ${theme.space[300]};
|
|
109
|
-
border-radius: ${theme.radii.pill};
|
|
110
|
-
`;
|
|
111
|
-
var disabled = css`
|
|
112
|
-
opacity: 0.4;
|
|
113
|
-
pointer-events: none;
|
|
114
|
-
`;
|
|
115
|
-
|
|
116
|
-
// src/styles.ts
|
|
117
76
|
var StyledAccordionItem = styled(RadixAccordion2.Item)``;
|
|
118
|
-
var animations =
|
|
77
|
+
var animations = css`
|
|
119
78
|
@keyframes slideDown {
|
|
120
79
|
from {
|
|
121
80
|
height: 0;
|
|
@@ -134,42 +93,6 @@ var animations = css2`
|
|
|
134
93
|
}
|
|
135
94
|
}
|
|
136
95
|
`;
|
|
137
|
-
var StyledRadixAccordionTrigger = styled(
|
|
138
|
-
RadixAccordion2.Trigger
|
|
139
|
-
)`
|
|
140
|
-
padding: 0;
|
|
141
|
-
width: 100%;
|
|
142
|
-
display: flex;
|
|
143
|
-
align-items: center;
|
|
144
|
-
justify-content: space-between;
|
|
145
|
-
cursor: pointer;
|
|
146
|
-
outline: none;
|
|
147
|
-
border: none;
|
|
148
|
-
background: transparent;
|
|
149
|
-
color: ${({ theme: theme2 }) => theme2.colors.text.body};
|
|
150
|
-
${({ theme: theme2 }) => theme2.typography[200]};
|
|
151
|
-
|
|
152
|
-
.triggerIcon {
|
|
153
|
-
transition: transform 300ms ease-in-out;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
&[data-state="open"] {
|
|
157
|
-
.triggerIcon {
|
|
158
|
-
transform: rotate(-180deg);
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
&[data-styled] {
|
|
163
|
-
padding: ${({ theme: theme2 }) => theme2.space[400]};
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
&:focus {
|
|
167
|
-
${focusRing}
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
${COMMON}
|
|
171
|
-
${TYPOGRAPHY}
|
|
172
|
-
`;
|
|
173
96
|
var StyledRadixAccordionContent = styled(
|
|
174
97
|
RadixAccordion2.Content
|
|
175
98
|
)`
|
|
@@ -186,42 +109,32 @@ var StyledRadixAccordionContent = styled(
|
|
|
186
109
|
}
|
|
187
110
|
|
|
188
111
|
&[data-styled="true"] {
|
|
189
|
-
border-left: ${({ theme
|
|
190
|
-
border-right: ${({ theme
|
|
191
|
-
background: ${({ theme
|
|
112
|
+
border-left: ${({ theme }) => `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
|
|
113
|
+
border-right: ${({ theme }) => `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
|
|
114
|
+
background: ${({ theme }) => theme.colors.container.background.base};
|
|
192
115
|
}
|
|
193
116
|
|
|
194
117
|
.accordion-item:last-child[data-state="open"] &[data-styled="true"],
|
|
195
118
|
.accordion-item:last-child[data-state="closed"] &[data-styled="true"] {
|
|
196
|
-
border-bottom: ${({ theme
|
|
197
|
-
border-bottom-left-radius: ${({ theme
|
|
198
|
-
border-bottom-right-radius: ${({ theme
|
|
119
|
+
border-bottom: ${({ theme }) => `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
|
|
120
|
+
border-bottom-left-radius: ${({ theme }) => theme.radii.outer};
|
|
121
|
+
border-bottom-right-radius: ${({ theme }) => theme.radii.outer};
|
|
199
122
|
}
|
|
200
123
|
`;
|
|
201
|
-
var StyledAccordionArea = styled.div`
|
|
202
|
-
display: flex;
|
|
203
|
-
align-items: center;
|
|
204
|
-
justify-content: space-between;
|
|
205
|
-
width: 100%;
|
|
206
|
-
`;
|
|
207
|
-
var FlexCenter = styled.div`
|
|
208
|
-
display: flex;
|
|
209
|
-
align-items: center;
|
|
210
|
-
`;
|
|
211
124
|
var ContentContainer = styled.div`
|
|
212
|
-
color: ${({ theme
|
|
125
|
+
color: ${({ theme }) => theme.colors.text.body};
|
|
213
126
|
background: transparent;
|
|
214
|
-
font-family: ${({ theme
|
|
127
|
+
font-family: ${({ theme }) => theme.fontFamily};
|
|
215
128
|
|
|
216
129
|
&[data-styled="true"] {
|
|
217
|
-
padding: ${({ theme
|
|
218
|
-
${({ theme
|
|
130
|
+
padding: ${({ theme }) => theme.space[400]};
|
|
131
|
+
${({ theme }) => theme.typography[200]};
|
|
219
132
|
}
|
|
220
133
|
|
|
221
134
|
.accordion-item:last-child[data-state="open"] &[data-styled="true"],
|
|
222
135
|
.accordion-item:last-child[data-state="closed"] &[data-styled="true"] {
|
|
223
|
-
border-bottom-left-radius: ${({ theme
|
|
224
|
-
border-bottom-right-radius: ${({ theme
|
|
136
|
+
border-bottom-left-radius: ${({ theme }) => theme.radii.outer};
|
|
137
|
+
border-bottom-right-radius: ${({ theme }) => theme.radii.outer};
|
|
225
138
|
}
|
|
226
139
|
|
|
227
140
|
${COMMON}
|
|
@@ -233,37 +146,63 @@ var ContentContainer = styled.div`
|
|
|
233
146
|
var TriggerContainer = styled.div`
|
|
234
147
|
display: flex;
|
|
235
148
|
align-items: center;
|
|
236
|
-
color: ${({ theme
|
|
149
|
+
color: ${({ theme }) => theme.colors.text.body};
|
|
150
|
+
${({ theme }) => theme.typography[200]};
|
|
151
|
+
|
|
152
|
+
/* Override Text.Headline styles to match original accordion trigger typography */
|
|
153
|
+
h1,
|
|
154
|
+
h2,
|
|
155
|
+
h3,
|
|
156
|
+
h4,
|
|
157
|
+
h5,
|
|
158
|
+
h6 {
|
|
159
|
+
font-size: inherit;
|
|
160
|
+
font-weight: normal;
|
|
161
|
+
line-height: inherit;
|
|
162
|
+
color: inherit;
|
|
163
|
+
}
|
|
237
164
|
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
165
|
+
&[data-styled="true"] {
|
|
166
|
+
h1,
|
|
167
|
+
h2,
|
|
168
|
+
h3,
|
|
169
|
+
h4,
|
|
170
|
+
h5,
|
|
171
|
+
h6 {
|
|
172
|
+
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
173
|
+
color: ${({ theme }) => theme.colors.text.headline};
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
${({ $styled, theme }) => $styled && `
|
|
178
|
+
border-top: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};
|
|
179
|
+
border-left: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};
|
|
180
|
+
border-right: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};
|
|
181
|
+
background: ${theme.colors.container.background.base};
|
|
243
182
|
`}
|
|
244
183
|
|
|
245
184
|
.accordion-item[data-state="open"] &[data-styled="true"] {
|
|
246
|
-
border-bottom: ${({ theme
|
|
185
|
+
border-bottom: ${({ theme }) => `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
|
|
247
186
|
}
|
|
248
187
|
|
|
249
188
|
.accordion-item[data-state="closed"] &[data-styled="true"] {
|
|
250
189
|
transition: border-bottom-color 0s ease-in-out 0.3s;
|
|
251
|
-
border-bottom: ${({ theme
|
|
190
|
+
border-bottom: ${({ theme }) => `${theme.borderWidths[500]} solid transparent`};
|
|
252
191
|
}
|
|
253
192
|
|
|
254
193
|
.accordion-item:first-child &[data-styled="true"] {
|
|
255
|
-
border-top-left-radius: ${({ theme
|
|
256
|
-
border-top-right-radius: ${({ theme
|
|
194
|
+
border-top-left-radius: ${({ theme }) => theme.radii.outer};
|
|
195
|
+
border-top-right-radius: ${({ theme }) => theme.radii.outer};
|
|
257
196
|
}
|
|
258
197
|
|
|
259
198
|
.accordion-item:last-child &[data-styled="true"] {
|
|
260
|
-
border-bottom: ${({ theme
|
|
199
|
+
border-bottom: ${({ theme }) => `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
|
|
261
200
|
}
|
|
262
201
|
|
|
263
202
|
.accordion-item:last-child[data-state="closed"] &[data-styled="true"] {
|
|
264
203
|
transition: border-radius 0s linear 0.3s;
|
|
265
|
-
border-bottom-left-radius: ${({ theme
|
|
266
|
-
border-bottom-right-radius: ${({ theme
|
|
204
|
+
border-bottom-left-radius: ${({ theme }) => theme.radii.outer};
|
|
205
|
+
border-bottom-right-radius: ${({ theme }) => theme.radii.outer};
|
|
267
206
|
}
|
|
268
207
|
|
|
269
208
|
${COMMON}
|
|
@@ -271,22 +210,6 @@ var TriggerContainer = styled.div`
|
|
|
271
210
|
${LAYOUT}
|
|
272
211
|
${FLEXBOX}
|
|
273
212
|
`;
|
|
274
|
-
var TitleStyles = styled.h4.attrs((props) => ({
|
|
275
|
-
as: props.as || "h4"
|
|
276
|
-
}))`
|
|
277
|
-
margin: 0;
|
|
278
|
-
font-weight: normal;
|
|
279
|
-
|
|
280
|
-
&[data-styled="true"] {
|
|
281
|
-
font-size: ${({ theme: theme2 }) => theme2.fontSizes[200]};
|
|
282
|
-
font-weight: ${({ theme: theme2 }) => theme2.fontWeights.semibold};
|
|
283
|
-
color: ${({ theme: theme2 }) => theme2.colors.text.headline};
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
${COMMON}
|
|
287
|
-
${TYPOGRAPHY}
|
|
288
|
-
${fontSize}
|
|
289
|
-
`;
|
|
290
213
|
|
|
291
214
|
// src/AccordionItem.tsx
|
|
292
215
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
@@ -317,8 +240,13 @@ import {
|
|
|
317
240
|
MenuToggleButton
|
|
318
241
|
} from "@sproutsocial/seeds-react-menu";
|
|
319
242
|
import { useContext as useContext2 } from "react";
|
|
243
|
+
import { CollapsibleContentHeader } from "@sproutsocial/seeds-react-content-header";
|
|
244
|
+
import * as RadixAccordion4 from "@radix-ui/react-accordion";
|
|
320
245
|
import { jsx as jsx4, jsxs } from "react/jsx-runtime";
|
|
321
246
|
var MAX_RELATED_ACTIONS = 2;
|
|
247
|
+
var AccordionTriggerWrapper = ({
|
|
248
|
+
children
|
|
249
|
+
}) => /* @__PURE__ */ jsx4(RadixAccordion4.Trigger, { asChild: true, children });
|
|
322
250
|
var AccordionTrigger = ({
|
|
323
251
|
children,
|
|
324
252
|
leftSlot,
|
|
@@ -348,40 +276,13 @@ var AccordionTrigger = ({
|
|
|
348
276
|
px,
|
|
349
277
|
py,
|
|
350
278
|
fontFamily,
|
|
351
|
-
fontSize
|
|
279
|
+
fontSize,
|
|
352
280
|
fontStyle,
|
|
353
281
|
fontWeight,
|
|
354
282
|
lineHeight,
|
|
355
283
|
textAlign,
|
|
356
284
|
...triggerProps
|
|
357
285
|
} = rest;
|
|
358
|
-
const spacingProps = {
|
|
359
|
-
padding,
|
|
360
|
-
paddingBottom,
|
|
361
|
-
paddingTop,
|
|
362
|
-
paddingX,
|
|
363
|
-
paddingY,
|
|
364
|
-
paddingLeft,
|
|
365
|
-
paddingRight,
|
|
366
|
-
p,
|
|
367
|
-
pb,
|
|
368
|
-
pt,
|
|
369
|
-
pr,
|
|
370
|
-
pl,
|
|
371
|
-
px,
|
|
372
|
-
py
|
|
373
|
-
};
|
|
374
|
-
const typographyProps = Object.fromEntries(
|
|
375
|
-
Object.entries({
|
|
376
|
-
color,
|
|
377
|
-
fontFamily,
|
|
378
|
-
fontSize: fontSize2,
|
|
379
|
-
fontStyle,
|
|
380
|
-
fontWeight,
|
|
381
|
-
lineHeight,
|
|
382
|
-
textAlign
|
|
383
|
-
}).filter(([_, value]) => value != null)
|
|
384
|
-
);
|
|
385
286
|
const shouldRenderActionsBlock = Boolean(overflowMenu || validatedActions);
|
|
386
287
|
const renderedOverflowMenu = overflowMenu && /* @__PURE__ */ jsx4(
|
|
387
288
|
ActionMenu,
|
|
@@ -432,7 +333,11 @@ var AccordionTrigger = ({
|
|
|
432
333
|
},
|
|
433
334
|
`${action.iconName}-${index}`
|
|
434
335
|
)) });
|
|
435
|
-
|
|
336
|
+
const renderedActions = shouldRenderActionsBlock ? /* @__PURE__ */ jsxs(Box, { mr: 300, display: "flex", children: [
|
|
337
|
+
renderedOverflowMenu,
|
|
338
|
+
renderedRelatedActions
|
|
339
|
+
] }) : void 0;
|
|
340
|
+
return /* @__PURE__ */ jsx4(
|
|
436
341
|
TriggerContainer,
|
|
437
342
|
{
|
|
438
343
|
"data-styled": styled2,
|
|
@@ -440,51 +345,20 @@ var AccordionTrigger = ({
|
|
|
440
345
|
"data-qa-trigger": "HERE",
|
|
441
346
|
color,
|
|
442
347
|
...triggerProps,
|
|
443
|
-
children:
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
"data-styled": styled2,
|
|
458
|
-
...typographyProps,
|
|
459
|
-
children: title
|
|
460
|
-
}
|
|
461
|
-
),
|
|
462
|
-
rightSlot
|
|
463
|
-
] }),
|
|
464
|
-
triggerIcon
|
|
465
|
-
] }) : /* @__PURE__ */ jsxs(StyledAccordionArea, { children: [
|
|
466
|
-
/* @__PURE__ */ jsxs(FlexCenter, { children: [
|
|
467
|
-
/* @__PURE__ */ jsx4(Box, { mr: 300, children: triggerIcon }),
|
|
468
|
-
leftSlot,
|
|
469
|
-
/* @__PURE__ */ jsx4(
|
|
470
|
-
TitleStyles,
|
|
471
|
-
{
|
|
472
|
-
as: headingLevel,
|
|
473
|
-
"data-styled": styled2,
|
|
474
|
-
...typographyProps,
|
|
475
|
-
children: title
|
|
476
|
-
}
|
|
477
|
-
)
|
|
478
|
-
] }),
|
|
479
|
-
rightSlot
|
|
480
|
-
] })
|
|
481
|
-
}
|
|
482
|
-
),
|
|
483
|
-
shouldRenderActionsBlock && /* @__PURE__ */ jsxs(Box, { mr: 300, display: "flex", children: [
|
|
484
|
-
renderedOverflowMenu,
|
|
485
|
-
renderedRelatedActions
|
|
486
|
-
] })
|
|
487
|
-
]
|
|
348
|
+
children: /* @__PURE__ */ jsx4(
|
|
349
|
+
CollapsibleContentHeader,
|
|
350
|
+
{
|
|
351
|
+
title,
|
|
352
|
+
headingLevel,
|
|
353
|
+
leftSlot,
|
|
354
|
+
rightSlot,
|
|
355
|
+
headerActions: renderedActions,
|
|
356
|
+
trigger: AccordionTriggerWrapper,
|
|
357
|
+
triggerPosition,
|
|
358
|
+
triggerIcon,
|
|
359
|
+
bordered: false
|
|
360
|
+
}
|
|
361
|
+
)
|
|
488
362
|
}
|
|
489
363
|
);
|
|
490
364
|
};
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../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 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":["React","styled","React","isControlled","css","RadixAccordion","css","theme","jsx","jsx","styled","Icon","useContext","jsx","styled","useContext","fontSize","Icon","children"]}
|
|
1
|
+
{"version":3,"sources":["../../src/Accordion.tsx","../../src/AccordionTypes.ts","../../src/AccordionItem.tsx","../../src/styles.ts","../../src/AccordionContent.tsx","../../src/AccordionTrigger.tsx"],"sourcesContent":["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":["React","styled","React","isControlled","RadixAccordion","jsx","jsx","styled","Icon","useContext","RadixAccordion","jsx","styled","useContext","Icon","children"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -3,6 +3,7 @@ import * as React$1 from 'react';
|
|
|
3
3
|
import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeBorderSystemProps, TypeFlexboxSystemProps, TypeLayoutSystemProps, TypeSystemTypographyProps } from '@sproutsocial/seeds-react-system-props';
|
|
4
4
|
import { TypeIconName } from '@sproutsocial/seeds-react-icon';
|
|
5
5
|
import { TypeMenuItemProps } from '@sproutsocial/seeds-react-menu';
|
|
6
|
+
import { TypeHeadingLevel } from '@sproutsocial/seeds-react-content-header';
|
|
6
7
|
|
|
7
8
|
interface TypeAccordionSystemProps extends Omit<React$1.ComponentPropsWithoutRef<"div">, "color">, TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeBorderSystemProps, TypeFlexboxSystemProps, TypeLayoutSystemProps, TypeSystemTypographyProps {
|
|
8
9
|
}
|
|
@@ -39,10 +40,6 @@ interface TypeAccordionItemProps {
|
|
|
39
40
|
overflowMenu?: TypeOverflowMenuConfig;
|
|
40
41
|
value: string;
|
|
41
42
|
}
|
|
42
|
-
/**
|
|
43
|
-
* Type for valid heading levels
|
|
44
|
-
*/
|
|
45
|
-
type TypeHeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
46
43
|
/**
|
|
47
44
|
* Props for AccordionTrigger component
|
|
48
45
|
*
|
|
@@ -75,4 +72,4 @@ declare const AccordionContent: ({ children, ...rest }: TypeAccordionContentProp
|
|
|
75
72
|
|
|
76
73
|
declare const AccordionTrigger: ({ children, leftSlot, relatedActions, overflowMenu, rightSlot, title, headingLevel, ...rest }: TypeAccordionTriggerProps) => react_jsx_runtime.JSX.Element;
|
|
77
74
|
|
|
78
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, type TypeAccordionItemProps, type TypeAccordionProps, type TypeAccordionSystemProps, type TypeAccordionTriggerProps, type
|
|
75
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, type TypeAccordionItemProps, type TypeAccordionProps, type TypeAccordionSystemProps, type TypeAccordionTriggerProps, type TypeOverflowMenuConfig, type TypeOverflowMenuItem, type TypeRelatedAction };
|
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import * as React$1 from 'react';
|
|
|
3
3
|
import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeBorderSystemProps, TypeFlexboxSystemProps, TypeLayoutSystemProps, TypeSystemTypographyProps } from '@sproutsocial/seeds-react-system-props';
|
|
4
4
|
import { TypeIconName } from '@sproutsocial/seeds-react-icon';
|
|
5
5
|
import { TypeMenuItemProps } from '@sproutsocial/seeds-react-menu';
|
|
6
|
+
import { TypeHeadingLevel } from '@sproutsocial/seeds-react-content-header';
|
|
6
7
|
|
|
7
8
|
interface TypeAccordionSystemProps extends Omit<React$1.ComponentPropsWithoutRef<"div">, "color">, TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeBorderSystemProps, TypeFlexboxSystemProps, TypeLayoutSystemProps, TypeSystemTypographyProps {
|
|
8
9
|
}
|
|
@@ -39,10 +40,6 @@ interface TypeAccordionItemProps {
|
|
|
39
40
|
overflowMenu?: TypeOverflowMenuConfig;
|
|
40
41
|
value: string;
|
|
41
42
|
}
|
|
42
|
-
/**
|
|
43
|
-
* Type for valid heading levels
|
|
44
|
-
*/
|
|
45
|
-
type TypeHeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
46
43
|
/**
|
|
47
44
|
* Props for AccordionTrigger component
|
|
48
45
|
*
|
|
@@ -75,4 +72,4 @@ declare const AccordionContent: ({ children, ...rest }: TypeAccordionContentProp
|
|
|
75
72
|
|
|
76
73
|
declare const AccordionTrigger: ({ children, leftSlot, relatedActions, overflowMenu, rightSlot, title, headingLevel, ...rest }: TypeAccordionTriggerProps) => react_jsx_runtime.JSX.Element;
|
|
77
74
|
|
|
78
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, type TypeAccordionItemProps, type TypeAccordionProps, type TypeAccordionSystemProps, type TypeAccordionTriggerProps, type
|
|
75
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, type TypeAccordionItemProps, type TypeAccordionProps, type TypeAccordionSystemProps, type TypeAccordionTriggerProps, type TypeOverflowMenuConfig, type TypeOverflowMenuItem, type TypeRelatedAction };
|