@sproutsocial/seeds-react-list 0.3.41 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  yarn run v1.22.22
2
- $ tsup --dts
2
+ $ tsup --dts && cp src/list.css dist/list.css
3
3
  CLI Building entry: src/index.ts
4
4
  CLI Using tsconfig: tsconfig.json
5
5
  CLI tsup v8.5.0
@@ -8,14 +8,14 @@ $ tsup --dts
8
8
  CLI Cleaning output folder
9
9
  CJS Build start
10
10
  ESM Build start
11
- CJS dist/index.js 14.70 KB
12
- CJS dist/index.js.map 22.28 KB
13
- CJS ⚡️ Build success in 53ms
14
- ESM dist/esm/index.js 10.82 KB
15
- ESM dist/esm/index.js.map 21.45 KB
16
- ESM ⚡️ Build success in 53ms
11
+ CJS dist/index.js 20.84 KB
12
+ CJS dist/index.js.map 36.94 KB
13
+ CJS ⚡️ Build success in 72ms
14
+ ESM dist/esm/index.js 16.17 KB
15
+ ESM dist/esm/index.js.map 36.28 KB
16
+ ESM ⚡️ Build success in 72ms
17
17
  DTS Build start
18
- DTS ⚡️ Build success in 1800ms
19
- DTS dist/index.d.ts 5.28 KB
20
- DTS dist/index.d.mts 5.28 KB
21
- Done in 2.56s.
18
+ DTS ⚡️ Build success in 1983ms
19
+ DTS dist/index.d.ts 6.80 KB
20
+ DTS dist/index.d.mts 6.80 KB
21
+ Done in 2.77s.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @sproutsocial/seeds-react-list
2
2
 
3
+ ## 0.4.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [57372fe]
8
+ - @sproutsocial/seeds-react-theme@4.6.0
9
+ - @sproutsocial/seeds-react-box@1.1.33
10
+ - @sproutsocial/seeds-react-icon@2.5.3
11
+ - @sproutsocial/seeds-react-loader@1.0.35
12
+ - @sproutsocial/seeds-react-pagination@0.1.34
13
+ - @sproutsocial/seeds-react-skeleton@1.1.33
14
+ - @sproutsocial/seeds-react-button@2.3.10
15
+
16
+ ## 0.4.0
17
+
18
+ ### Minor Changes
19
+
20
+ - e39bbd7: Add a Tailwind hybrid rendering path to `List`, `ListItem`, `ListItemContent`,
21
+ and `ListItemButton`. Ordinary usage now renders semantic static CSS classes
22
+ (`seeds-list`, `seeds-list-item`, `seeds-list-item-bordered`,
23
+ `seeds-list-item-content*`, `seeds-list-item-button*`) from `list.css` with no
24
+ runtime CSS-in-JS. Consumers passing styled-system props or a `styled()`
25
+ extension continue to render through the unchanged styled-components path. Public
26
+ exports, types, and behavior are preserved.
27
+
3
28
  ## 0.3.41
4
29
 
5
30
  ### Patch Changes
package/dist/esm/index.js CHANGED
@@ -1,3 +1,9 @@
1
+ // src/ListHybrid.tsx
2
+ import {
3
+ hasStyledProps,
4
+ isStyledExtension
5
+ } from "@sproutsocial/seeds-react-system-props";
6
+
1
7
  // src/styles.tsx
2
8
  import styled from "styled-components";
3
9
  var Container = styled.ul`
@@ -7,21 +13,88 @@ var Container = styled.ul`
7
13
  `;
8
14
  var styles_default = Container;
9
15
 
10
- // src/List.tsx
16
+ // src/ListStyled.tsx
11
17
  import { jsx } from "react/jsx-runtime";
12
- var List = ({ as = "ul", children, ...rest }) => {
18
+ var ListStyled = ({ as = "ul", children, ...rest }) => {
13
19
  return /* @__PURE__ */ jsx(styles_default, { as, ...rest, children });
14
20
  };
21
+ ListStyled.displayName = "List";
22
+ var ListStyled_default = ListStyled;
23
+
24
+ // src/ListTailwind.tsx
25
+ import "react";
26
+
27
+ // src/cn.ts
28
+ function cn(...inputs) {
29
+ const classes = [];
30
+ for (const input of inputs) {
31
+ if (!input) continue;
32
+ if (typeof input === "string") {
33
+ classes.push(input);
34
+ } else if (typeof input === "object") {
35
+ for (const [key, value] of Object.entries(input)) {
36
+ if (value) {
37
+ classes.push(key);
38
+ }
39
+ }
40
+ }
41
+ }
42
+ return classes.join(" ");
43
+ }
44
+
45
+ // src/ListTailwind.tsx
46
+ import { jsx as jsx2 } from "react/jsx-runtime";
47
+ var ListTailwind = ({
48
+ as: Element = "ul",
49
+ children,
50
+ className,
51
+ ...rest
52
+ }) => {
53
+ return /* @__PURE__ */ jsx2(
54
+ Element,
55
+ {
56
+ className: cn("seeds-list", className),
57
+ ...rest,
58
+ children
59
+ }
60
+ );
61
+ };
62
+ ListTailwind.displayName = "List";
63
+ var ListTailwind_default = ListTailwind;
64
+
65
+ // src/ListHybrid.tsx
66
+ import { jsx as jsx3 } from "react/jsx-runtime";
67
+ var ListHybrid = (props) => {
68
+ if (hasStyledProps(props) || isStyledExtension(props)) {
69
+ return /* @__PURE__ */ jsx3(ListStyled_default, { ...props });
70
+ }
71
+ return /* @__PURE__ */ jsx3(ListTailwind_default, { ...props });
72
+ };
73
+ ListHybrid.displayName = "List";
74
+ var ListHybrid_default = ListHybrid;
75
+
76
+ // src/List.tsx
77
+ var List = ListHybrid_default;
15
78
  List.displayName = "List";
16
79
  var List_default = List;
17
80
 
18
81
  // src/ListItem.tsx
19
- import * as React from "react";
82
+ import * as React5 from "react";
83
+
84
+ // src/ListItemHybrid.tsx
85
+ import * as React4 from "react";
86
+ import {
87
+ hasStyledProps as hasStyledProps2,
88
+ isStyledExtension as isStyledExtension2
89
+ } from "@sproutsocial/seeds-react-system-props";
90
+
91
+ // src/ListItemStyled.tsx
92
+ import * as React2 from "react";
20
93
  import Box from "@sproutsocial/seeds-react-box";
21
- import { jsx as jsx2 } from "react/jsx-runtime";
22
- var ListItem = React.forwardRef(
94
+ import { jsx as jsx4 } from "react/jsx-runtime";
95
+ var ListItemStyled = React2.forwardRef(
23
96
  ({ isBordered, children, ...rest }, ref) => {
24
- return /* @__PURE__ */ jsx2(
97
+ return /* @__PURE__ */ jsx4(
25
98
  Box,
26
99
  {
27
100
  as: "li",
@@ -39,16 +112,67 @@ var ListItem = React.forwardRef(
39
112
  );
40
113
  }
41
114
  );
115
+ ListItemStyled.displayName = "ListItem";
116
+ var ListItemStyled_default = ListItemStyled;
117
+
118
+ // src/ListItemTailwind.tsx
119
+ import * as React3 from "react";
120
+ import { jsx as jsx5 } from "react/jsx-runtime";
121
+ var ListItemTailwind = React3.forwardRef(
122
+ ({ isBordered, children, className, ...rest }, ref) => {
123
+ const classes = cn(
124
+ "seeds-list-item",
125
+ { "seeds-list-item-bordered": !!isBordered },
126
+ className
127
+ );
128
+ return /* @__PURE__ */ jsx5(
129
+ "li",
130
+ {
131
+ ref,
132
+ className: classes,
133
+ ...rest,
134
+ children
135
+ }
136
+ );
137
+ }
138
+ );
139
+ ListItemTailwind.displayName = "ListItem";
140
+ var ListItemTailwind_default = ListItemTailwind;
141
+
142
+ // src/ListItemHybrid.tsx
143
+ import { jsx as jsx6 } from "react/jsx-runtime";
144
+ var ListItemHybrid = React4.forwardRef(
145
+ (props, ref) => {
146
+ if (hasStyledProps2(props) || isStyledExtension2(props)) {
147
+ return /* @__PURE__ */ jsx6(ListItemStyled_default, { ...props, ref });
148
+ }
149
+ return /* @__PURE__ */ jsx6(ListItemTailwind_default, { ...props, ref });
150
+ }
151
+ );
152
+ ListItemHybrid.displayName = "ListItem";
153
+ var ListItemHybrid_default = ListItemHybrid;
154
+
155
+ // src/ListItem.tsx
156
+ import { jsx as jsx7 } from "react/jsx-runtime";
157
+ var ListItem = React5.forwardRef(
158
+ (props, ref) => /* @__PURE__ */ jsx7(ListItemHybrid_default, { ...props, ref })
159
+ );
42
160
  ListItem.displayName = "ListItem";
43
161
  var ListItem_default = ListItem;
44
162
 
45
- // src/ListItemContent.tsx
163
+ // src/ListItemContentHybrid.tsx
164
+ import {
165
+ hasStyledProps as hasStyledProps3,
166
+ isStyledExtension as isStyledExtension3
167
+ } from "@sproutsocial/seeds-react-system-props";
168
+
169
+ // src/ListItemContentStyled.tsx
46
170
  import "react";
47
171
  import Box2 from "@sproutsocial/seeds-react-box";
48
172
  import Text from "@sproutsocial/seeds-react-text";
49
173
  import { Icon } from "@sproutsocial/seeds-react-icon";
50
- import { jsx as jsx3, jsxs } from "react/jsx-runtime";
51
- var ListItemContent = ({
174
+ import { jsx as jsx8, jsxs } from "react/jsx-runtime";
175
+ var ListItemContentStyled = ({
52
176
  text,
53
177
  details,
54
178
  aside,
@@ -67,38 +191,93 @@ var ListItemContent = ({
67
191
  ...rest,
68
192
  children: [
69
193
  /* @__PURE__ */ jsxs(Box2, { display: "flex", flex: "1", children: [
70
- iconName && /* @__PURE__ */ jsx3("span", { children: /* @__PURE__ */ jsx3(Icon, { mr: 300, name: iconName, size: "small", ariaLabel: iconLabel }) }),
194
+ iconName && /* @__PURE__ */ jsx8("span", { children: /* @__PURE__ */ jsx8(Icon, { mr: 300, name: iconName, size: "small", ariaLabel: iconLabel }) }),
71
195
  /* @__PURE__ */ jsxs(Box2, { flex: "1", children: [
72
- /* @__PURE__ */ jsx3(Text.SmallSubHeadline, { as: "div", children: text }),
73
- details && /* @__PURE__ */ jsx3(Text.Byline, { as: "div", mt: 200, children: details })
196
+ /* @__PURE__ */ jsx8(Text.SmallSubHeadline, { as: "div", children: text }),
197
+ details && /* @__PURE__ */ jsx8(Text.Byline, { as: "div", mt: 200, children: details })
74
198
  ] })
75
199
  ] }),
76
200
  /* @__PURE__ */ jsxs(Box2, { display: "flex", alignItems: "center", gap: 300, flexShrink: 0, children: [
77
- aside && /* @__PURE__ */ jsx3(Text.Byline, { as: "div", children: aside }),
78
- actions && /* @__PURE__ */ jsx3(Box2, { display: "flex", alignItems: "center", children: actions })
201
+ aside && /* @__PURE__ */ jsx8(Text.Byline, { as: "div", children: aside }),
202
+ actions && /* @__PURE__ */ jsx8(Box2, { display: "flex", alignItems: "center", children: actions })
203
+ ] })
204
+ ]
205
+ }
206
+ );
207
+ };
208
+ ListItemContentStyled.displayName = "ListItemContent";
209
+ var ListItemContentStyled_default = ListItemContentStyled;
210
+
211
+ // src/ListItemContentTailwind.tsx
212
+ import "react";
213
+ import Text2 from "@sproutsocial/seeds-react-text";
214
+ import { Icon as Icon2 } from "@sproutsocial/seeds-react-icon";
215
+ import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
216
+ var ListItemContentTailwind = ({
217
+ text,
218
+ details,
219
+ aside,
220
+ iconName,
221
+ iconLabel,
222
+ actions,
223
+ className,
224
+ ...rest
225
+ }) => {
226
+ return /* @__PURE__ */ jsxs2(
227
+ "div",
228
+ {
229
+ className: cn("seeds-list-item-content", className),
230
+ ...rest,
231
+ children: [
232
+ /* @__PURE__ */ jsxs2("div", { className: "seeds-list-item-content-main", children: [
233
+ iconName && /* @__PURE__ */ jsx9("span", { className: "seeds-list-item-content-icon", children: /* @__PURE__ */ jsx9(Icon2, { name: iconName, size: "small", ariaLabel: iconLabel }) }),
234
+ /* @__PURE__ */ jsxs2("div", { className: "seeds-list-item-content-text", children: [
235
+ /* @__PURE__ */ jsx9(Text2.SmallSubHeadline, { as: "div", children: text }),
236
+ details && /* @__PURE__ */ jsx9(Text2.Byline, { as: "div", className: "seeds-list-item-content-details", children: details })
237
+ ] })
238
+ ] }),
239
+ /* @__PURE__ */ jsxs2("div", { className: "seeds-list-item-content-aside", children: [
240
+ aside && /* @__PURE__ */ jsx9(Text2.Byline, { as: "div", children: aside }),
241
+ actions && /* @__PURE__ */ jsx9("div", { className: "seeds-list-item-content-actions", children: actions })
79
242
  ] })
80
243
  ]
81
244
  }
82
245
  );
83
246
  };
247
+ ListItemContentTailwind.displayName = "ListItemContent";
248
+ var ListItemContentTailwind_default = ListItemContentTailwind;
249
+
250
+ // src/ListItemContentHybrid.tsx
251
+ import { jsx as jsx10 } from "react/jsx-runtime";
252
+ var ListItemContentHybrid = (props) => {
253
+ if (hasStyledProps3(props) || isStyledExtension3(props)) {
254
+ return /* @__PURE__ */ jsx10(ListItemContentStyled_default, { ...props });
255
+ }
256
+ return /* @__PURE__ */ jsx10(ListItemContentTailwind_default, { ...props });
257
+ };
258
+ ListItemContentHybrid.displayName = "ListItemContent";
259
+ var ListItemContentHybrid_default = ListItemContentHybrid;
260
+
261
+ // src/ListItemContent.tsx
262
+ var ListItemContent = ListItemContentHybrid_default;
84
263
  ListItemContent.displayName = "ListItemContent";
85
264
  var ListItemContent_default = ListItemContent;
86
265
 
87
266
  // src/DataList.tsx
88
- import * as React4 from "react";
267
+ import * as React9 from "react";
89
268
  import { useRef, useState } from "react";
90
269
 
91
270
  // src/DataItemSkeleton.tsx
92
271
  import "react";
93
272
  import Box3 from "@sproutsocial/seeds-react-box";
94
273
  import Skeleton from "@sproutsocial/seeds-react-skeleton";
95
- import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
274
+ import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
96
275
  var DataItemSkeleton = ({
97
276
  hasIcon = false,
98
277
  hasAside = false,
99
278
  hasSubtext = false
100
279
  }) => {
101
- return /* @__PURE__ */ jsxs2(
280
+ return /* @__PURE__ */ jsxs3(
102
281
  Box3,
103
282
  {
104
283
  display: "flex",
@@ -107,14 +286,14 @@ var DataItemSkeleton = ({
107
286
  alignItems: "flex-start",
108
287
  mb: 100,
109
288
  children: [
110
- /* @__PURE__ */ jsxs2(Box3, { display: "flex", flex: "1", children: [
111
- hasIcon && /* @__PURE__ */ jsx4(Box3, { mr: 300, flexShrink: 0, children: /* @__PURE__ */ jsx4(Skeleton, { width: 21, height: 21, borderRadius: "pill" }) }),
112
- /* @__PURE__ */ jsxs2(Box3, { flex: "1", children: [
113
- /* @__PURE__ */ jsx4(Skeleton, { width: "80%", height: 21, borderRadius: "inner" }),
114
- hasSubtext && /* @__PURE__ */ jsx4(Skeleton, { width: "60%", height: 16, mt: 300, borderRadius: "inner" })
289
+ /* @__PURE__ */ jsxs3(Box3, { display: "flex", flex: "1", children: [
290
+ hasIcon && /* @__PURE__ */ jsx11(Box3, { mr: 300, flexShrink: 0, children: /* @__PURE__ */ jsx11(Skeleton, { width: 21, height: 21, borderRadius: "pill" }) }),
291
+ /* @__PURE__ */ jsxs3(Box3, { flex: "1", children: [
292
+ /* @__PURE__ */ jsx11(Skeleton, { width: "80%", height: 21, borderRadius: "inner" }),
293
+ hasSubtext && /* @__PURE__ */ jsx11(Skeleton, { width: "60%", height: 16, mt: 300, borderRadius: "inner" })
115
294
  ] })
116
295
  ] }),
117
- hasAside && /* @__PURE__ */ jsx4(Box3, { display: "flex", alignItems: "center", gap: 300, flexShrink: 0, children: /* @__PURE__ */ jsx4(Skeleton, { width: 60, height: 21, borderRadius: "inner" }) })
296
+ hasAside && /* @__PURE__ */ jsx11(Box3, { display: "flex", alignItems: "center", gap: 300, flexShrink: 0, children: /* @__PURE__ */ jsx11(Skeleton, { width: 60, height: 21, borderRadius: "inner" }) })
118
297
  ]
119
298
  }
120
299
  );
@@ -126,7 +305,7 @@ var DataItemSkeleton_default = DataItemSkeleton;
126
305
  import Box4 from "@sproutsocial/seeds-react-box";
127
306
  import styled2 from "styled-components";
128
307
  import { Pagination } from "@sproutsocial/seeds-react-pagination";
129
- import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
308
+ import { Fragment, jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
130
309
  var HeaderContent = styled2(Box4)`
131
310
  width: 100%;
132
311
  transition: transform 0.4s ease-in-out;
@@ -158,7 +337,7 @@ var DataList = ({
158
337
  const pageSize = controlledPageSize ?? internalPageSize;
159
338
  const handlePageChange = onPageChange ?? setInternalPageIndex;
160
339
  const handlePageSizeChange = onPageSizeChange ?? setInternalPageSize;
161
- const displayData = React4.useMemo(() => {
340
+ const displayData = React9.useMemo(() => {
162
341
  if (!paginationConfig) {
163
342
  return data;
164
343
  }
@@ -168,8 +347,8 @@ var DataList = ({
168
347
  }, [data, paginationConfig, currentPageIndex, pageSize]);
169
348
  const totalRows = totalItems !== void 0 ? totalItems : data.length;
170
349
  if (isLoading) {
171
- return /* @__PURE__ */ jsxs3(Fragment, { children: [
172
- Header && /* @__PURE__ */ jsx5(
350
+ return /* @__PURE__ */ jsxs4(Fragment, { children: [
351
+ Header && /* @__PURE__ */ jsx12(
173
352
  HeaderContent,
174
353
  {
175
354
  style: {
@@ -183,11 +362,11 @@ var DataList = ({
183
362
  children: Header
184
363
  }
185
364
  ),
186
- /* @__PURE__ */ jsx5(List_default, { as, ...rest, children: loadingItems.map((index) => /* @__PURE__ */ jsx5(ListItem_default, { ...listItemProps, children: /* @__PURE__ */ jsx5(LoadingComponent, {}) }, index)) })
365
+ /* @__PURE__ */ jsx12(List_default, { as, ...rest, children: loadingItems.map((index) => /* @__PURE__ */ jsx12(ListItem_default, { ...listItemProps, children: /* @__PURE__ */ jsx12(LoadingComponent, {}) }, index)) })
187
366
  ] });
188
367
  }
189
- return /* @__PURE__ */ jsxs3(Fragment, { children: [
190
- Header && /* @__PURE__ */ jsx5(
368
+ return /* @__PURE__ */ jsxs4(Fragment, { children: [
369
+ Header && /* @__PURE__ */ jsx12(
191
370
  HeaderContent,
192
371
  {
193
372
  style: {
@@ -201,8 +380,8 @@ var DataList = ({
201
380
  children: Header
202
381
  }
203
382
  ),
204
- /* @__PURE__ */ jsx5(List_default, { as, ...rest, children: displayData.map((item, index) => /* @__PURE__ */ jsx5(ListItem_default, { ...listItemProps, children: renderItem(item, index) }, index)) }),
205
- paginationConfig && /* @__PURE__ */ jsx5(
383
+ /* @__PURE__ */ jsx12(List_default, { as, ...rest, children: displayData.map((item, index) => /* @__PURE__ */ jsx12(ListItem_default, { ...listItemProps, children: renderItem(item, index) }, index)) }),
384
+ paginationConfig && /* @__PURE__ */ jsx12(
206
385
  Pagination,
207
386
  {
208
387
  paginationConfig,
@@ -219,13 +398,13 @@ DataList.displayName = "DataList";
219
398
  var DataList_default = DataList;
220
399
 
221
400
  // src/VirtualizedDataList.tsx
222
- import * as React5 from "react";
401
+ import * as React10 from "react";
223
402
  import Box5 from "@sproutsocial/seeds-react-box";
224
403
  import Loader from "@sproutsocial/seeds-react-loader";
225
404
  import { useVirtualizer } from "@tanstack/react-virtual";
226
405
  import { useInView } from "react-intersection-observer";
227
406
  import styled3 from "styled-components";
228
- import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
407
+ import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
229
408
  var HeaderContent2 = styled3(Box5)`
230
409
  width: 100%;
231
410
  transition: transform 0.4s ease-in-out;
@@ -245,7 +424,7 @@ var Experimental_VirtualizedDataList = ({
245
424
  ...rest
246
425
  }) => {
247
426
  const afterInView = useInView();
248
- const parentRef = React5.useRef(null);
427
+ const parentRef = React10.useRef(null);
249
428
  const count = data.length;
250
429
  const virtualizer = useVirtualizer({
251
430
  count,
@@ -255,9 +434,9 @@ var Experimental_VirtualizedDataList = ({
255
434
  });
256
435
  const items = virtualizer.getVirtualItems();
257
436
  const offset = virtualizer.scrollOffset ?? 0;
258
- const prevOffsetRef = React5.useRef(offset);
259
- const [headerVisible, setHeaderVisible] = React5.useState(true);
260
- React5.useEffect(() => {
437
+ const prevOffsetRef = React10.useRef(offset);
438
+ const [headerVisible, setHeaderVisible] = React10.useState(true);
439
+ React10.useEffect(() => {
261
440
  const prev = prevOffsetRef.current;
262
441
  const scrollingUp = offset < prev;
263
442
  prevOffsetRef.current = offset;
@@ -268,12 +447,12 @@ var Experimental_VirtualizedDataList = ({
268
447
  }
269
448
  }, [offset, removeHeaderDepth]);
270
449
  const transform = headerVisible ? "translateY(0px)" : `translateY(-${headerHeight}px)`;
271
- React5.useEffect(() => {
450
+ React10.useEffect(() => {
272
451
  if (afterInView.inView) {
273
452
  onEndReached?.();
274
453
  }
275
454
  }, [onEndReached, afterInView.inView]);
276
- return /* @__PURE__ */ jsxs4(
455
+ return /* @__PURE__ */ jsxs5(
277
456
  "div",
278
457
  {
279
458
  ref: parentRef,
@@ -285,7 +464,7 @@ var Experimental_VirtualizedDataList = ({
285
464
  contain: "strict"
286
465
  },
287
466
  children: [
288
- Header && /* @__PURE__ */ jsx6(
467
+ Header && /* @__PURE__ */ jsx13(
289
468
  HeaderContent2,
290
469
  {
291
470
  style: {
@@ -300,7 +479,7 @@ var Experimental_VirtualizedDataList = ({
300
479
  children: Header
301
480
  }
302
481
  ),
303
- /* @__PURE__ */ jsx6(
482
+ /* @__PURE__ */ jsx13(
304
483
  List_default,
305
484
  {
306
485
  as,
@@ -310,7 +489,7 @@ var Experimental_VirtualizedDataList = ({
310
489
  position: "relative"
311
490
  },
312
491
  children: items.map((virtualRow) => {
313
- return /* @__PURE__ */ jsx6(
492
+ return /* @__PURE__ */ jsx13(
314
493
  ListItem_default,
315
494
  {
316
495
  "data-index": virtualRow.index,
@@ -329,7 +508,7 @@ var Experimental_VirtualizedDataList = ({
329
508
  })
330
509
  }
331
510
  ),
332
- hasNextPage && !isFetchingNextPage && /* @__PURE__ */ jsx6("div", { ref: afterInView.ref, children: /* @__PURE__ */ jsx6(Loader, { delay: false }) })
511
+ hasNextPage && !isFetchingNextPage && /* @__PURE__ */ jsx13("div", { ref: afterInView.ref, children: /* @__PURE__ */ jsx13(Loader, { delay: false }) })
333
512
  ]
334
513
  }
335
514
  );
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/styles.tsx","../../src/List.tsx","../../src/ListItem.tsx","../../src/ListItemContent.tsx","../../src/DataList.tsx","../../src/DataItemSkeleton.tsx","../../src/VirtualizedDataList.tsx","../../src/ListTypes.ts","../../src/ListItemTypes.ts","../../src/DataListTypes.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport type { TypeListProps } from \"./ListTypes\";\n\nconst Container = styled.ul<TypeListProps>`\n margin: 0;\n padding: 0;\n list-style: none;\n`;\n\nexport default Container;\n","import Container from \"./styles\";\nimport type { TypeListProps } from \"./ListTypes\";\n\nconst List = ({ as = \"ul\", children, ...rest }: TypeListProps) => {\n return (\n <Container as={as} {...rest}>\n {children}\n </Container>\n );\n};\n\nList.displayName = \"List\";\n\nexport default List;\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeListItemProps } from \"./ListItemTypes\";\n\nconst ListItem = React.forwardRef<HTMLLIElement, TypeListItemProps>(\n ({ isBordered, children, ...rest }, ref) => {\n return (\n <Box\n as=\"li\"\n ref={ref}\n borderRadius=\"outer\"\n {...(isBordered\n ? {\n border: 500,\n borderColor: \"container.border.base\",\n p: 300,\n }\n : {})}\n mt={300}\n {...rest}\n >\n {children}\n </Box>\n );\n }\n);\n\nListItem.displayName = \"ListItem\";\n\nexport default ListItem;\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeListItemContentProps } from \"./ListItemTypes\";\n\nconst ListItemContent = ({\n text,\n details,\n aside,\n iconName,\n iconLabel,\n actions,\n ...rest\n}: TypeListItemContentProps) => {\n return (\n <Box\n display=\"flex\"\n justifyContent=\"space-between\"\n borderRadius=\"outer\"\n alignItems=\"baseline\"\n {...rest}\n >\n <Box display=\"flex\" flex=\"1\">\n {iconName && (\n <span>\n <Icon mr={300} name={iconName} size=\"small\" ariaLabel={iconLabel} />\n </span>\n )}\n <Box flex=\"1\">\n <Text.SmallSubHeadline as=\"div\">{text}</Text.SmallSubHeadline>\n {details && (\n <Text.Byline as=\"div\" mt={200}>\n {details}\n </Text.Byline>\n )}\n </Box>\n </Box>\n <Box display=\"flex\" alignItems=\"center\" gap={300} flexShrink={0}>\n {aside && <Text.Byline as=\"div\">{aside}</Text.Byline>}\n {actions && (\n <Box display=\"flex\" alignItems=\"center\">\n {actions}\n </Box>\n )}\n </Box>\n </Box>\n );\n};\n\nListItemContent.displayName = \"ListItemContent\";\n\nexport default ListItemContent;\n","import * as React from \"react\";\nimport { useRef, useState } from \"react\";\nimport List from \"./List\";\nimport DataItemSkeleton from \"./DataItemSkeleton\";\nimport ListItem from \"./ListItem\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Container from \"./styles\";\nimport type { TypeDataListProps } from \"./DataListTypes\";\nimport styled from \"styled-components\";\nimport { Pagination } from \"@sproutsocial/seeds-react-pagination\";\n\nconst HeaderContent = styled(Box)`\n width: 100%;\n transition: transform 0.4s ease-in-out;\n`;\n\nconst DataList = <T,>({\n as = \"ul\",\n data,\n renderItem,\n isLoading,\n LoadingComponent = DataItemSkeleton,\n listItemProps = {},\n estimateItemSize = 50,\n Header,\n paginationConfig,\n currentPageIndex: controlledPageIndex,\n pageSize: controlledPageSize,\n totalItems,\n onPageChange,\n onPageSizeChange,\n ...rest\n}: TypeDataListProps<T>) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const loadingItems = [0, 1, 2, 3, 4];\n\n // Internal state for uncontrolled pagination\n const [internalPageIndex, setInternalPageIndex] = useState(0);\n const [internalPageSize, setInternalPageSize] = useState(\n paginationConfig?.initialPageSize ?? 10\n );\n\n // Use controlled props if provided, otherwise use internal state\n const currentPageIndex = controlledPageIndex ?? internalPageIndex;\n const pageSize = controlledPageSize ?? internalPageSize;\n\n // Use provided callbacks or internal state setters\n const handlePageChange = onPageChange ?? setInternalPageIndex;\n const handlePageSizeChange = onPageSizeChange ?? setInternalPageSize;\n\n // Calculate paginated data if pagination is enabled\n const displayData = React.useMemo(() => {\n if (!paginationConfig) {\n return data;\n }\n const startIndex = currentPageIndex * pageSize;\n const endIndex = startIndex + pageSize;\n return data.slice(startIndex, endIndex);\n }, [data, paginationConfig, currentPageIndex, pageSize]);\n\n const totalRows = totalItems !== undefined ? totalItems : data.length;\n\n // Early return for loading state\n if (isLoading) {\n return (\n <>\n {Header && (\n <HeaderContent\n style={{\n position: \"sticky\",\n top: 0,\n left: 0,\n width: \"100%\",\n zIndex: 1,\n }}\n id=\"header\"\n >\n {Header}\n </HeaderContent>\n )}\n <List as={as} {...rest}>\n {loadingItems.map((index) => (\n <ListItem key={index} {...listItemProps}>\n <LoadingComponent />\n </ListItem>\n ))}\n </List>\n </>\n );\n }\n\n return (\n <>\n {Header && (\n <HeaderContent\n style={{\n position: \"sticky\",\n top: 0,\n left: 0,\n width: \"100%\",\n zIndex: 1,\n }}\n id=\"header\"\n >\n {Header}\n </HeaderContent>\n )}\n <List as={as} {...rest}>\n {displayData.map((item, index) => (\n <ListItem key={index} {...listItemProps}>\n {renderItem(item, index)}\n </ListItem>\n ))}\n </List>\n {paginationConfig && (\n <Pagination\n paginationConfig={paginationConfig}\n currentPageIndex={currentPageIndex}\n pageSize={pageSize}\n totalRows={totalRows}\n onPageChange={handlePageChange}\n onPageSizeChange={handlePageSizeChange}\n />\n )}\n </>\n );\n};\n\nDataList.displayName = \"DataList\";\n\nexport default DataList;\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Skeleton from \"@sproutsocial/seeds-react-skeleton\";\nimport type { TypeDataItemSkeletonProps } from \"./DataItemSkeletonTypes\";\n\nconst DataItemSkeleton = ({\n hasIcon = false,\n hasAside = false,\n hasSubtext = false,\n}: TypeDataItemSkeletonProps) => {\n return (\n <Box\n display=\"flex\"\n justifyContent=\"space-between\"\n borderRadius=\"outer\"\n alignItems=\"flex-start\"\n mb={100}\n >\n <Box display=\"flex\" flex=\"1\">\n {hasIcon && (\n <Box mr={300} flexShrink={0}>\n <Skeleton width={21} height={21} borderRadius=\"pill\" />\n </Box>\n )}\n <Box flex=\"1\">\n <Skeleton width=\"80%\" height={21} borderRadius=\"inner\" />\n {hasSubtext && (\n <Skeleton width=\"60%\" height={16} mt={300} borderRadius=\"inner\" />\n )}\n </Box>\n </Box>\n {hasAside && (\n <Box display=\"flex\" alignItems=\"center\" gap={300} flexShrink={0}>\n <Skeleton width={60} height={21} borderRadius=\"inner\" />\n </Box>\n )}\n </Box>\n );\n};\n\nDataItemSkeleton.displayName = \"DataItemSkeleton\";\n\nexport default DataItemSkeleton;\n","import * as React from \"react\";\nimport List from \"./List\";\nimport ListItem from \"./ListItem\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Loader from \"@sproutsocial/seeds-react-loader\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport type { TypeDataListProps } from \"./DataListTypes\";\nimport { useInView } from \"react-intersection-observer\";\nimport styled from \"styled-components\";\n\nconst HeaderContent = styled(Box)`\n width: 100%;\n transition: transform 0.4s ease-in-out;\n background-color: red;\n`;\n\nconst Experimental_VirtualizedDataList = <T,>({\n as = \"ul\",\n data,\n renderItem,\n estimateItemSize = 50,\n onEndReached,\n hasNextPage,\n isFetchingNextPage,\n Header,\n removeHeaderDepth = Infinity,\n headerHeight = 60,\n ...rest\n}: TypeDataListProps<T>) => {\n const afterInView = useInView();\n\n const parentRef = React.useRef<HTMLDivElement>(null);\n\n const count = data.length;\n\n const virtualizer = useVirtualizer({\n count,\n getScrollElement: () => parentRef.current,\n estimateSize: () => estimateItemSize,\n overscan: 5,\n });\n\n const items = virtualizer.getVirtualItems();\n const offset = virtualizer.scrollOffset ?? 0;\n\n const prevOffsetRef = React.useRef(offset);\n const [headerVisible, setHeaderVisible] = React.useState(true);\n\n React.useEffect(() => {\n const prev = prevOffsetRef.current;\n const scrollingUp = offset < prev;\n prevOffsetRef.current = offset;\n\n if (offset > removeHeaderDepth) {\n setHeaderVisible(scrollingUp);\n } else {\n setHeaderVisible(true);\n }\n }, [offset, removeHeaderDepth]);\n\n const transform = headerVisible\n ? \"translateY(0px)\"\n : `translateY(-${headerHeight}px)`;\n\n React.useEffect(() => {\n if (afterInView.inView) {\n onEndReached?.();\n }\n }, [onEndReached, afterInView.inView]);\n\n return (\n <div\n ref={parentRef}\n className=\"List\"\n style={{\n width: \"100%\",\n height: \"100%\",\n overflowY: \"auto\",\n contain: \"strict\",\n }}\n >\n {Header && (\n <HeaderContent\n style={{\n position: \"sticky\",\n transform,\n top: 0,\n left: 0,\n width: \"100%\",\n zIndex: 1,\n }}\n id=\"header\"\n >\n {Header}\n </HeaderContent>\n )}\n <List\n as={as}\n style={{\n height: `${virtualizer.getTotalSize()}px`,\n width: \"100%\",\n position: \"relative\",\n }}\n >\n {items.map((virtualRow) => {\n return (\n <ListItem\n key={virtualRow.key}\n data-index={virtualRow.index}\n ref={virtualizer.measureElement}\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n width: \"100%\",\n transform: `translateY(${\n virtualRow.start - virtualizer.options.scrollMargin\n }px)`,\n }}\n >\n {renderItem(data[virtualRow.index] as T)}\n </ListItem>\n );\n })}\n </List>\n {hasNextPage && !isFetchingNextPage && (\n <div ref={afterInView.ref}>\n <Loader delay={false} />\n </div>\n )}\n </div>\n );\n};\n\nExperimental_VirtualizedDataList.displayName =\n \"Experimental_VirtualizedDataList\";\n\nexport default Experimental_VirtualizedDataList;\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\n\nexport type TypeListElement = \"ul\" | \"ol\";\n\nexport interface TypeListProps extends TypeStyledComponentsCommonProps {\n /** The HTML element to render as - either \"ul\" or \"ol\" */\n as?: TypeListElement;\n /** Array of elements to render as list items */\n children: React.ReactNode;\n /** Inline styles to apply to the list element */\n style?: React.CSSProperties;\n}\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconName } from \"@sproutsocial/seeds-react-icon\";\n\nexport interface TypeListItemProps extends TypeStyledComponentsCommonProps {\n /** If true, adds a border and padding around the list item which looks like a card or button */\n isBordered?: boolean;\n /** Children to display inside the list item */\n children: React.ReactNode;\n /** Inline styles to apply to the list item element */\n style?: React.CSSProperties;\n}\n\nexport interface TypeListItemContentProps\n extends TypeStyledComponentsCommonProps {\n /** Main text displayed as SmallSubheadline */\n text: React.ReactNode;\n /** Details text displayed as Byline below the main text */\n details?: React.ReactNode;\n /** Aside text displayed as Byline on the right side */\n aside?: React.ReactNode;\n /** Optional icon name to display on the left */\n iconName?: TypeIconName;\n /** Label used to describe the icon if not used with an accompanying visual label */\n iconLabel?: string;\n /** Actions to display on the right side (e.g., buttons, menus) */\n actions?: React.ReactNode;\n}\n","import * as React from \"react\";\nimport type { TypeListProps } from \"./ListTypes\";\nimport type { TypeDataItemSkeletonProps } from \"./DataItemSkeletonTypes\";\nimport type { TypeListItemProps } from \"./ListItemTypes\";\nimport type { TypePaginationConfig } from \"@sproutsocial/seeds-react-pagination\";\n\nexport interface TypeDataListProps<T> extends Omit<TypeListProps, \"children\"> {\n /** Array of data items to render */\n data: T[];\n /** Function to render each item in the data array */\n renderItem: (item: T, index?: number) => React.ReactNode;\n /** If true, shows loading skeletons instead of data */\n isLoading?: boolean;\n /** Component to render when loading. Receives props for customizing skeleton appearance */\n LoadingComponent?: React.ComponentType<TypeDataItemSkeletonProps>;\n /** Estimated height of each item in pixels for virtualization. Defaults to 60 */\n estimateItemSize?: number;\n /** Props to pass to the list item component */\n listItemProps?: Omit<TypeListItemProps, \"children\">;\n /** Callback function called when the end of the list is reached (for infinite scrolling) */\n onEndReached?: () => void;\n /** Whether there is a next page available (for infinite scrolling) */\n hasNextPage?: boolean;\n /** Whether the next page is currently being fetched */\n isFetchingNextPage?: boolean;\n /** Header component to display at the top of the list */\n Header?: React.ReactNode;\n /** Scroll offset in pixels at which the header should be hidden. Defaults to Infinity (header never hides unless a value is set) */\n removeHeaderDepth?: number;\n /** Height of the header in pixels. Defaults to 60 */\n headerHeight?: number;\n /** Configuration for pagination controls with page navigation and size selection */\n paginationConfig?: TypePaginationConfig;\n /** Current page index (0-based) for pagination */\n currentPageIndex?: number;\n /** Number of items per page */\n pageSize?: number;\n /** Total number of items (for pagination) */\n totalItems?: number;\n /** Callback fired when the page changes */\n onPageChange?: (pageIndex: number) => void;\n /** Callback fired when the page size changes */\n onPageSizeChange?: (pageSize: number) => void;\n}\n"],"mappings":"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","names":["jsx","Box","jsx","React","Box","jsx","jsxs","Box","styled","jsx","jsxs","Box","React","Box","styled","jsx","jsxs","HeaderContent"]}
1
+ {"version":3,"sources":["../../src/ListHybrid.tsx","../../src/styles.tsx","../../src/ListStyled.tsx","../../src/ListTailwind.tsx","../../src/cn.ts","../../src/List.tsx","../../src/ListItem.tsx","../../src/ListItemHybrid.tsx","../../src/ListItemStyled.tsx","../../src/ListItemTailwind.tsx","../../src/ListItemContentHybrid.tsx","../../src/ListItemContentStyled.tsx","../../src/ListItemContentTailwind.tsx","../../src/ListItemContent.tsx","../../src/DataList.tsx","../../src/DataItemSkeleton.tsx","../../src/VirtualizedDataList.tsx","../../src/ListTypes.ts","../../src/ListItemTypes.ts","../../src/DataListTypes.ts"],"sourcesContent":["/**\n * Hybrid List Component\n * Automatically chooses between Tailwind and styled-components based on props.\n *\n * Routes to the styled-components path when a styled-system prop is present\n * (hasStyledProps) or the component was extended with styled()\n * (isStyledExtension). Otherwise renders the Tailwind path (preferred — no\n * runtime CSS-in-JS).\n */\nimport {\n hasStyledProps,\n isStyledExtension,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeListProps } from \"./ListTypes\";\nimport ListStyled from \"./ListStyled\";\nimport ListTailwind from \"./ListTailwind\";\n\nconst ListHybrid = (props: TypeListProps) => {\n if (hasStyledProps(props) || isStyledExtension(props)) {\n return <ListStyled {...props} />;\n }\n\n return <ListTailwind {...props} />;\n};\n\nListHybrid.displayName = \"List\";\n\nexport default ListHybrid;\n","import styled from \"styled-components\";\nimport type { TypeListProps } from \"./ListTypes\";\n\nconst Container = styled.ul<TypeListProps>`\n margin: 0;\n padding: 0;\n list-style: none;\n`;\n\nexport default Container;\n","import Container from \"./styles\";\nimport type { TypeListProps } from \"./ListTypes\";\n\n/**\n * Styled-components implementation of List. Used by ListHybrid whenever a\n * consumer passes a styled-system prop or a styled() extension. This is the\n * unchanged legacy rendering path.\n */\nconst ListStyled = ({ as = \"ul\", children, ...rest }: TypeListProps) => {\n return (\n <Container as={as} {...rest}>\n {children}\n </Container>\n );\n};\n\nListStyled.displayName = \"List\";\n\nexport default ListStyled;\n","import * as React from \"react\";\nimport { cn } from \"./cn\";\nimport type { TypeListProps } from \"./ListTypes\";\n\n/**\n * Tailwind CSS implementation of List. Renders the `as` element (ul/ol) with\n * the semantic `seeds-list` class from list.css — no runtime CSS-in-JS.\n *\n * The semantic class is placed before the consumer `className` so consumer\n * utilities can override the layered base styles.\n */\nconst ListTailwind = ({\n as: Element = \"ul\",\n children,\n className,\n ...rest\n}: TypeListProps) => {\n return (\n <Element\n className={cn(\"seeds-list\", className)}\n // On the Tailwind path system props are absent at runtime (they route to\n // the styled path), so the remaining rest is native attributes only.\n {...(rest as React.HTMLAttributes<HTMLUListElement | HTMLOListElement>)}\n >\n {children}\n </Element>\n );\n};\n\nListTailwind.displayName = \"List\";\n\nexport default ListTailwind;\n","/**\n * Minimal className combiner. Mirrored inline from Card/Avatar —\n * @sproutsocial/seeds-react-utilities does NOT export a `cn` helper.\n *\n * Falsy inputs are dropped; object inputs contribute each truthy key.\n */\nexport function cn(\n ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n const classes: string[] = [];\n\n for (const input of inputs) {\n if (!input) continue;\n\n if (typeof input === \"string\") {\n classes.push(input);\n } else if (typeof input === \"object\") {\n for (const [key, value] of Object.entries(input)) {\n if (value) {\n classes.push(key);\n }\n }\n }\n }\n\n return classes.join(\" \");\n}\n","import ListHybrid from \"./ListHybrid\";\n\n/**\n * List automatically routes between the Tailwind implementation (preferred)\n * and the styled-components implementation (for consumers using system props\n * or a styled() extension).\n *\n * @example\n * <List as=\"ul\">\n * <ListItem>First</ListItem>\n * <ListItem>Second</ListItem>\n * </List>\n */\nconst List = ListHybrid;\n\nList.displayName = \"List\";\n\nexport default List;\n","import * as React from \"react\";\nimport ListItemHybrid from \"./ListItemHybrid\";\nimport type { TypeListItemProps } from \"./ListItemTypes\";\n\n/**\n * ListItem automatically routes between the Tailwind implementation (preferred)\n * and the styled-components implementation (for consumers using system props\n * or a styled() extension).\n */\nconst ListItem = React.forwardRef<HTMLLIElement, TypeListItemProps>(\n (props, ref) => <ListItemHybrid {...props} ref={ref} />\n);\n\nListItem.displayName = \"ListItem\";\n\nexport default ListItem;\n","/**\n * Hybrid ListItem Component\n * Automatically chooses between Tailwind and styled-components based on props.\n *\n * Routes to the styled-components path when a styled-system prop is present\n * (hasStyledProps) or the component was extended with styled()\n * (isStyledExtension). Otherwise renders the Tailwind path (preferred — no\n * runtime CSS-in-JS).\n *\n * `isBordered` is a semantic public prop, not a styled-system prop, so it maps\n * to a class on the Tailwind path and does not force styled-components.\n */\nimport * as React from \"react\";\nimport {\n hasStyledProps,\n isStyledExtension,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeListItemProps } from \"./ListItemTypes\";\nimport ListItemStyled from \"./ListItemStyled\";\nimport ListItemTailwind from \"./ListItemTailwind\";\n\nconst ListItemHybrid = React.forwardRef<HTMLLIElement, TypeListItemProps>(\n (props, ref) => {\n if (hasStyledProps(props) || isStyledExtension(props)) {\n return <ListItemStyled {...props} ref={ref} />;\n }\n\n return <ListItemTailwind {...props} ref={ref} />;\n }\n);\n\nListItemHybrid.displayName = \"ListItem\";\n\nexport default ListItemHybrid;\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeListItemProps } from \"./ListItemTypes\";\n\n/**\n * Styled-components implementation of ListItem. Used by ListItemHybrid whenever\n * a consumer passes a styled-system prop or a styled() extension. This is the\n * unchanged legacy rendering path (a Box rendered as <li>).\n */\nconst ListItemStyled = React.forwardRef<HTMLLIElement, TypeListItemProps>(\n ({ isBordered, children, ...rest }, ref) => {\n return (\n <Box\n as=\"li\"\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore legacy ref type mismatch: Box types its ref as a div, but\n // it renders an <li> here and forwards the ref to that element.\n ref={ref}\n borderRadius=\"outer\"\n {...(isBordered\n ? {\n border: 500,\n borderColor: \"container.border.base\",\n p: 300,\n }\n : {})}\n mt={300}\n // rest carries system props + native <li> attributes. Box is typed to a\n // div, so the li-specific event-handler element types are widened away;\n // the ref (on its own line above) is unaffected by this spread cast.\n {...(rest as Record<string, unknown>)}\n >\n {children}\n </Box>\n );\n }\n);\n\nListItemStyled.displayName = \"ListItem\";\n\nexport default ListItemStyled;\n","import * as React from \"react\";\nimport { cn } from \"./cn\";\nimport type { TypeListItemProps } from \"./ListItemTypes\";\n\n/**\n * Tailwind CSS implementation of ListItem. Renders an <li> with the semantic\n * `seeds-list-item` class (plus `seeds-list-item-bordered` when isBordered)\n * from list.css — no runtime CSS-in-JS.\n *\n * The semantic class is placed before the consumer `className` so consumer\n * utilities can override the layered base styles.\n */\nconst ListItemTailwind = React.forwardRef<HTMLLIElement, TypeListItemProps>(\n ({ isBordered, children, className, ...rest }, ref) => {\n const classes = cn(\n \"seeds-list-item\",\n { \"seeds-list-item-bordered\": !!isBordered },\n className\n );\n\n return (\n <li\n ref={ref}\n className={classes}\n {...(rest as React.LiHTMLAttributes<HTMLLIElement>)}\n >\n {children}\n </li>\n );\n }\n);\n\nListItemTailwind.displayName = \"ListItem\";\n\nexport default ListItemTailwind;\n","/**\n * Hybrid ListItemContent Component\n * Automatically chooses between Tailwind and styled-components based on props.\n *\n * Routes to the styled-components path when a styled-system prop is present\n * (hasStyledProps) or the component was extended with styled()\n * (isStyledExtension). Otherwise renders the Tailwind path (preferred — no\n * runtime CSS-in-JS).\n */\nimport {\n hasStyledProps,\n isStyledExtension,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeListItemContentProps } from \"./ListItemTypes\";\nimport ListItemContentStyled from \"./ListItemContentStyled\";\nimport ListItemContentTailwind from \"./ListItemContentTailwind\";\n\nconst ListItemContentHybrid = (props: TypeListItemContentProps) => {\n if (hasStyledProps(props) || isStyledExtension(props)) {\n return <ListItemContentStyled {...props} />;\n }\n\n return <ListItemContentTailwind {...props} />;\n};\n\nListItemContentHybrid.displayName = \"ListItemContent\";\n\nexport default ListItemContentHybrid;\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeListItemContentProps } from \"./ListItemTypes\";\n\n/**\n * Styled-components implementation of ListItemContent. Used by\n * ListItemContentHybrid whenever a consumer passes a styled-system prop or a\n * styled() extension. This is the unchanged legacy rendering path (Box/Text/Icon\n * composition).\n */\nconst ListItemContentStyled = ({\n text,\n details,\n aside,\n iconName,\n iconLabel,\n actions,\n ...rest\n}: TypeListItemContentProps) => {\n return (\n <Box\n display=\"flex\"\n justifyContent=\"space-between\"\n borderRadius=\"outer\"\n alignItems=\"baseline\"\n {...rest}\n >\n <Box display=\"flex\" flex=\"1\">\n {iconName && (\n <span>\n <Icon mr={300} name={iconName} size=\"small\" ariaLabel={iconLabel} />\n </span>\n )}\n <Box flex=\"1\">\n <Text.SmallSubHeadline as=\"div\">{text}</Text.SmallSubHeadline>\n {details && (\n <Text.Byline as=\"div\" mt={200}>\n {details}\n </Text.Byline>\n )}\n </Box>\n </Box>\n <Box display=\"flex\" alignItems=\"center\" gap={300} flexShrink={0}>\n {aside && <Text.Byline as=\"div\">{aside}</Text.Byline>}\n {actions && (\n <Box display=\"flex\" alignItems=\"center\">\n {actions}\n </Box>\n )}\n </Box>\n </Box>\n );\n};\n\nListItemContentStyled.displayName = \"ListItemContent\";\n\nexport default ListItemContentStyled;\n","import * as React from \"react\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { cn } from \"./cn\";\nimport type { TypeListItemContentProps } from \"./ListItemTypes\";\n\n/**\n * Tailwind CSS implementation of ListItemContent. The Box layout scaffolding is\n * expressed through semantic `seeds-list-item-content*` classes from list.css\n * (no runtime CSS-in-JS). Text and Icon remain as primitives — the spacing they\n * previously received via system props (Icon mr, Byline mt) is now applied by\n * the parent classes so those primitives stay on their own static paths.\n */\nconst ListItemContentTailwind = ({\n text,\n details,\n aside,\n iconName,\n iconLabel,\n actions,\n className,\n ...rest\n}: TypeListItemContentProps) => {\n return (\n <div\n className={cn(\"seeds-list-item-content\", className)}\n {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n >\n <div className=\"seeds-list-item-content-main\">\n {iconName && (\n <span className=\"seeds-list-item-content-icon\">\n <Icon name={iconName} size=\"small\" ariaLabel={iconLabel} />\n </span>\n )}\n <div className=\"seeds-list-item-content-text\">\n <Text.SmallSubHeadline as=\"div\">{text}</Text.SmallSubHeadline>\n {details && (\n <Text.Byline as=\"div\" className=\"seeds-list-item-content-details\">\n {details}\n </Text.Byline>\n )}\n </div>\n </div>\n <div className=\"seeds-list-item-content-aside\">\n {aside && <Text.Byline as=\"div\">{aside}</Text.Byline>}\n {actions && (\n <div className=\"seeds-list-item-content-actions\">{actions}</div>\n )}\n </div>\n </div>\n );\n};\n\nListItemContentTailwind.displayName = \"ListItemContent\";\n\nexport default ListItemContentTailwind;\n","import ListItemContentHybrid from \"./ListItemContentHybrid\";\n\n/**\n * ListItemContent automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or a styled() extension).\n */\nconst ListItemContent = ListItemContentHybrid;\n\nListItemContent.displayName = \"ListItemContent\";\n\nexport default ListItemContent;\n","import * as React from \"react\";\nimport { useRef, useState } from \"react\";\nimport List from \"./List\";\nimport DataItemSkeleton from \"./DataItemSkeleton\";\nimport ListItem from \"./ListItem\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Container from \"./styles\";\nimport type { TypeDataListProps } from \"./DataListTypes\";\nimport styled from \"styled-components\";\nimport { Pagination } from \"@sproutsocial/seeds-react-pagination\";\n\nconst HeaderContent = styled(Box)`\n width: 100%;\n transition: transform 0.4s ease-in-out;\n`;\n\nconst DataList = <T,>({\n as = \"ul\",\n data,\n renderItem,\n isLoading,\n LoadingComponent = DataItemSkeleton,\n listItemProps = {},\n estimateItemSize = 50,\n Header,\n paginationConfig,\n currentPageIndex: controlledPageIndex,\n pageSize: controlledPageSize,\n totalItems,\n onPageChange,\n onPageSizeChange,\n ...rest\n}: TypeDataListProps<T>) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const loadingItems = [0, 1, 2, 3, 4];\n\n // Internal state for uncontrolled pagination\n const [internalPageIndex, setInternalPageIndex] = useState(0);\n const [internalPageSize, setInternalPageSize] = useState(\n paginationConfig?.initialPageSize ?? 10\n );\n\n // Use controlled props if provided, otherwise use internal state\n const currentPageIndex = controlledPageIndex ?? internalPageIndex;\n const pageSize = controlledPageSize ?? internalPageSize;\n\n // Use provided callbacks or internal state setters\n const handlePageChange = onPageChange ?? setInternalPageIndex;\n const handlePageSizeChange = onPageSizeChange ?? setInternalPageSize;\n\n // Calculate paginated data if pagination is enabled\n const displayData = React.useMemo(() => {\n if (!paginationConfig) {\n return data;\n }\n const startIndex = currentPageIndex * pageSize;\n const endIndex = startIndex + pageSize;\n return data.slice(startIndex, endIndex);\n }, [data, paginationConfig, currentPageIndex, pageSize]);\n\n const totalRows = totalItems !== undefined ? totalItems : data.length;\n\n // Early return for loading state\n if (isLoading) {\n return (\n <>\n {Header && (\n <HeaderContent\n style={{\n position: \"sticky\",\n top: 0,\n left: 0,\n width: \"100%\",\n zIndex: 1,\n }}\n id=\"header\"\n >\n {Header}\n </HeaderContent>\n )}\n <List as={as} {...rest}>\n {loadingItems.map((index) => (\n <ListItem key={index} {...listItemProps}>\n <LoadingComponent />\n </ListItem>\n ))}\n </List>\n </>\n );\n }\n\n return (\n <>\n {Header && (\n <HeaderContent\n style={{\n position: \"sticky\",\n top: 0,\n left: 0,\n width: \"100%\",\n zIndex: 1,\n }}\n id=\"header\"\n >\n {Header}\n </HeaderContent>\n )}\n <List as={as} {...rest}>\n {displayData.map((item, index) => (\n <ListItem key={index} {...listItemProps}>\n {renderItem(item, index)}\n </ListItem>\n ))}\n </List>\n {paginationConfig && (\n <Pagination\n paginationConfig={paginationConfig}\n currentPageIndex={currentPageIndex}\n pageSize={pageSize}\n totalRows={totalRows}\n onPageChange={handlePageChange}\n onPageSizeChange={handlePageSizeChange}\n />\n )}\n </>\n );\n};\n\nDataList.displayName = \"DataList\";\n\nexport default DataList;\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Skeleton from \"@sproutsocial/seeds-react-skeleton\";\nimport type { TypeDataItemSkeletonProps } from \"./DataItemSkeletonTypes\";\n\nconst DataItemSkeleton = ({\n hasIcon = false,\n hasAside = false,\n hasSubtext = false,\n}: TypeDataItemSkeletonProps) => {\n return (\n <Box\n display=\"flex\"\n justifyContent=\"space-between\"\n borderRadius=\"outer\"\n alignItems=\"flex-start\"\n mb={100}\n >\n <Box display=\"flex\" flex=\"1\">\n {hasIcon && (\n <Box mr={300} flexShrink={0}>\n <Skeleton width={21} height={21} borderRadius=\"pill\" />\n </Box>\n )}\n <Box flex=\"1\">\n <Skeleton width=\"80%\" height={21} borderRadius=\"inner\" />\n {hasSubtext && (\n <Skeleton width=\"60%\" height={16} mt={300} borderRadius=\"inner\" />\n )}\n </Box>\n </Box>\n {hasAside && (\n <Box display=\"flex\" alignItems=\"center\" gap={300} flexShrink={0}>\n <Skeleton width={60} height={21} borderRadius=\"inner\" />\n </Box>\n )}\n </Box>\n );\n};\n\nDataItemSkeleton.displayName = \"DataItemSkeleton\";\n\nexport default DataItemSkeleton;\n","import * as React from \"react\";\nimport List from \"./List\";\nimport ListItem from \"./ListItem\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Loader from \"@sproutsocial/seeds-react-loader\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport type { TypeDataListProps } from \"./DataListTypes\";\nimport { useInView } from \"react-intersection-observer\";\nimport styled from \"styled-components\";\n\nconst HeaderContent = styled(Box)`\n width: 100%;\n transition: transform 0.4s ease-in-out;\n background-color: red;\n`;\n\nconst Experimental_VirtualizedDataList = <T,>({\n as = \"ul\",\n data,\n renderItem,\n estimateItemSize = 50,\n onEndReached,\n hasNextPage,\n isFetchingNextPage,\n Header,\n removeHeaderDepth = Infinity,\n headerHeight = 60,\n ...rest\n}: TypeDataListProps<T>) => {\n const afterInView = useInView();\n\n const parentRef = React.useRef<HTMLDivElement>(null);\n\n const count = data.length;\n\n const virtualizer = useVirtualizer({\n count,\n getScrollElement: () => parentRef.current,\n estimateSize: () => estimateItemSize,\n overscan: 5,\n });\n\n const items = virtualizer.getVirtualItems();\n const offset = virtualizer.scrollOffset ?? 0;\n\n const prevOffsetRef = React.useRef(offset);\n const [headerVisible, setHeaderVisible] = React.useState(true);\n\n React.useEffect(() => {\n const prev = prevOffsetRef.current;\n const scrollingUp = offset < prev;\n prevOffsetRef.current = offset;\n\n if (offset > removeHeaderDepth) {\n setHeaderVisible(scrollingUp);\n } else {\n setHeaderVisible(true);\n }\n }, [offset, removeHeaderDepth]);\n\n const transform = headerVisible\n ? \"translateY(0px)\"\n : `translateY(-${headerHeight}px)`;\n\n React.useEffect(() => {\n if (afterInView.inView) {\n onEndReached?.();\n }\n }, [onEndReached, afterInView.inView]);\n\n return (\n <div\n ref={parentRef}\n className=\"List\"\n style={{\n width: \"100%\",\n height: \"100%\",\n overflowY: \"auto\",\n contain: \"strict\",\n }}\n >\n {Header && (\n <HeaderContent\n style={{\n position: \"sticky\",\n transform,\n top: 0,\n left: 0,\n width: \"100%\",\n zIndex: 1,\n }}\n id=\"header\"\n >\n {Header}\n </HeaderContent>\n )}\n <List\n as={as}\n style={{\n height: `${virtualizer.getTotalSize()}px`,\n width: \"100%\",\n position: \"relative\",\n }}\n >\n {items.map((virtualRow) => {\n return (\n <ListItem\n key={virtualRow.key}\n data-index={virtualRow.index}\n ref={virtualizer.measureElement}\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n width: \"100%\",\n transform: `translateY(${\n virtualRow.start - virtualizer.options.scrollMargin\n }px)`,\n }}\n >\n {renderItem(data[virtualRow.index] as T)}\n </ListItem>\n );\n })}\n </List>\n {hasNextPage && !isFetchingNextPage && (\n <div ref={afterInView.ref}>\n <Loader delay={false} />\n </div>\n )}\n </div>\n );\n};\n\nExperimental_VirtualizedDataList.displayName =\n \"Experimental_VirtualizedDataList\";\n\nexport default Experimental_VirtualizedDataList;\n","import * as React from \"react\";\nimport type {\n TypeStyledComponentsCommonProps,\n TypeBorderSystemProps,\n TypeColorSystemProps,\n TypeFlexboxSystemProps,\n TypeGridSystemProps,\n TypeLayoutSystemProps,\n TypePositionSystemProps,\n TypeSpaceSystemProps,\n TypeTypographySystemProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport type TypeListElement = \"ul\" | \"ol\";\n\nexport interface TypeListProps\n extends Omit<\n React.HTMLAttributes<HTMLUListElement | HTMLOListElement>,\n \"color\"\n >,\n TypeStyledComponentsCommonProps,\n TypeBorderSystemProps,\n TypeColorSystemProps,\n TypeFlexboxSystemProps,\n TypeGridSystemProps,\n TypeLayoutSystemProps,\n TypePositionSystemProps,\n TypeSpaceSystemProps,\n TypeTypographySystemProps {\n /** The HTML element to render as - either \"ul\" or \"ol\" */\n as?: TypeListElement;\n /** Array of elements to render as list items */\n children: React.ReactNode;\n /** Inline styles to apply to the list element */\n style?: React.CSSProperties;\n}\n","import * as React from \"react\";\nimport type {\n TypeStyledComponentsCommonProps,\n TypeBorderSystemProps,\n TypeColorSystemProps,\n TypeFlexboxSystemProps,\n TypeGridSystemProps,\n TypeLayoutSystemProps,\n TypePositionSystemProps,\n TypeSpaceSystemProps,\n TypeTypographySystemProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconName } from \"@sproutsocial/seeds-react-icon\";\n\nexport interface TypeListItemProps\n extends Omit<React.LiHTMLAttributes<HTMLLIElement>, \"color\">,\n TypeStyledComponentsCommonProps,\n TypeBorderSystemProps,\n TypeColorSystemProps,\n TypeFlexboxSystemProps,\n TypeGridSystemProps,\n TypeLayoutSystemProps,\n TypePositionSystemProps,\n TypeSpaceSystemProps,\n TypeTypographySystemProps {\n /** If true, adds a border and padding around the list item which looks like a card or button */\n isBordered?: boolean;\n /** Children to display inside the list item */\n children: React.ReactNode;\n /** Inline styles to apply to the list item element */\n style?: React.CSSProperties;\n}\n\nexport interface TypeListItemContentProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, \"color\">,\n TypeStyledComponentsCommonProps,\n TypeBorderSystemProps,\n TypeColorSystemProps,\n TypeFlexboxSystemProps,\n TypeGridSystemProps,\n TypeLayoutSystemProps,\n TypePositionSystemProps,\n TypeSpaceSystemProps,\n TypeTypographySystemProps {\n /** Main text displayed as SmallSubheadline */\n text: React.ReactNode;\n /** Details text displayed as Byline below the main text */\n details?: React.ReactNode;\n /** Aside text displayed as Byline on the right side */\n aside?: React.ReactNode;\n /** Optional icon name to display on the left */\n iconName?: TypeIconName;\n /** Label used to describe the icon if not used with an accompanying visual label */\n iconLabel?: string;\n /** Actions to display on the right side (e.g., buttons, menus) */\n actions?: React.ReactNode;\n}\n","import * as React from \"react\";\nimport type { TypeListProps } from \"./ListTypes\";\nimport type { TypeDataItemSkeletonProps } from \"./DataItemSkeletonTypes\";\nimport type { TypeListItemProps } from \"./ListItemTypes\";\nimport type { TypePaginationConfig } from \"@sproutsocial/seeds-react-pagination\";\n\nexport interface TypeDataListProps<T> extends Omit<TypeListProps, \"children\"> {\n /** Array of data items to render */\n data: T[];\n /** Function to render each item in the data array */\n renderItem: (item: T, index?: number) => React.ReactNode;\n /** If true, shows loading skeletons instead of data */\n isLoading?: boolean;\n /** Component to render when loading. Receives props for customizing skeleton appearance */\n LoadingComponent?: React.ComponentType<TypeDataItemSkeletonProps>;\n /** Estimated height of each item in pixels for virtualization. Defaults to 60 */\n estimateItemSize?: number;\n /** Props to pass to the list item component */\n listItemProps?: Omit<TypeListItemProps, \"children\">;\n /** Callback function called when the end of the list is reached (for infinite scrolling) */\n onEndReached?: () => void;\n /** Whether there is a next page available (for infinite scrolling) */\n hasNextPage?: boolean;\n /** Whether the next page is currently being fetched */\n isFetchingNextPage?: boolean;\n /** Header component to display at the top of the list */\n Header?: React.ReactNode;\n /** Scroll offset in pixels at which the header should be hidden. Defaults to Infinity (header never hides unless a value is set) */\n removeHeaderDepth?: number;\n /** Height of the header in pixels. Defaults to 60 */\n headerHeight?: number;\n /** Configuration for pagination controls with page navigation and size selection */\n paginationConfig?: TypePaginationConfig;\n /** Current page index (0-based) for pagination */\n currentPageIndex?: number;\n /** Number of items per page */\n pageSize?: number;\n /** Total number of items (for pagination) */\n totalItems?: number;\n /** Callback fired when the page changes */\n onPageChange?: (pageIndex: number) => void;\n /** Callback fired when the page size changes */\n onPageSizeChange?: (pageSize: number) => void;\n}\n"],"mappings":"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","names":["jsx","jsx","React","React","hasStyledProps","isStyledExtension","React","jsx","React","jsx","jsx","hasStyledProps","isStyledExtension","jsx","hasStyledProps","isStyledExtension","Box","jsx","Text","Icon","jsx","jsxs","Icon","Text","jsx","hasStyledProps","isStyledExtension","React","Box","jsx","jsxs","Box","styled","jsx","jsxs","Box","React","Box","styled","jsx","jsxs","HeaderContent"]}