@sproutsocial/seeds-react-list 0.1.10 → 0.2.0
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 +7 -7
- package/CHANGELOG.md +21 -0
- package/dist/esm/index.js +1 -5
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +1 -5
- package/dist/index.js.map +1 -1
- package/package.json +5 -5
- package/src/VirtualizedDataList.tsx +5 -3
- package/src/styles.tsx +0 -4
package/.turbo/turbo-build.log
CHANGED
|
@@ -8,14 +8,14 @@ $ tsup --dts
|
|
|
8
8
|
[34mCLI[39m Cleaning output folder
|
|
9
9
|
[34mCJS[39m Build start
|
|
10
10
|
[34mESM[39m Build start
|
|
11
|
-
[32mESM[39m [1mdist/esm/index.js [22m[32m15.32 KB[39m
|
|
12
|
-
[32mESM[39m [1mdist/esm/index.js.map [22m[32m28.34 KB[39m
|
|
13
|
-
[32mESM[39m ⚡️ Build success in 120ms
|
|
14
11
|
[32mCJS[39m [1mdist/index.js [22m[32m19.63 KB[39m
|
|
15
|
-
[32mCJS[39m [1mdist/index.js.map [22m[32m29.
|
|
16
|
-
[32mCJS[39m ⚡️ Build success in
|
|
12
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m29.24 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 165ms
|
|
14
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m15.32 KB[39m
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m28.35 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 171ms
|
|
17
17
|
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 9445ms
|
|
19
19
|
[32mDTS[39m [1mdist/index.d.ts [22m[32m4.50 KB[39m
|
|
20
20
|
[32mDTS[39m [1mdist/index.d.mts [22m[32m4.50 KB[39m
|
|
21
|
-
Done in
|
|
21
|
+
Done in 12.04s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @sproutsocial/seeds-react-list
|
|
2
2
|
|
|
3
|
+
## 0.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 26bde4c: Fix loader bug in virtual datalist when hasNextPage is false. Fix bad margin on top list item
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [118e300]
|
|
12
|
+
- @sproutsocial/seeds-react-theme@3.5.1
|
|
13
|
+
- @sproutsocial/seeds-react-box@1.1.13
|
|
14
|
+
- @sproutsocial/seeds-react-icon@2.2.4
|
|
15
|
+
- @sproutsocial/seeds-react-button@1.3.18
|
|
16
|
+
|
|
17
|
+
## 0.1.11
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- @sproutsocial/seeds-react-icon@2.2.3
|
|
22
|
+
- @sproutsocial/seeds-react-button@1.3.17
|
|
23
|
+
|
|
3
24
|
## 0.1.10
|
|
4
25
|
|
|
5
26
|
### Patch Changes
|
package/dist/esm/index.js
CHANGED
|
@@ -4,10 +4,6 @@ var Container = styled.ul`
|
|
|
4
4
|
margin: 0;
|
|
5
5
|
padding: 0;
|
|
6
6
|
list-style: none;
|
|
7
|
-
|
|
8
|
-
> li:first-child {
|
|
9
|
-
margin-top: 0;
|
|
10
|
-
}
|
|
11
7
|
`;
|
|
12
8
|
var styles_default = Container;
|
|
13
9
|
|
|
@@ -549,7 +545,7 @@ var Experimental_VirtualizedDataList = ({
|
|
|
549
545
|
})
|
|
550
546
|
}
|
|
551
547
|
),
|
|
552
|
-
/* @__PURE__ */ jsx8("div", { ref: afterInView.ref, children: /* @__PURE__ */ jsx8(index_default2, { delay: false }) })
|
|
548
|
+
hasNextPage && !isFetchingNextPage && /* @__PURE__ */ jsx8("div", { ref: afterInView.ref, children: /* @__PURE__ */ jsx8(index_default2, { delay: false }) })
|
|
553
549
|
]
|
|
554
550
|
}
|
|
555
551
|
);
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/styles.tsx","../../src/List.tsx","../../src/ListItem.tsx","../../src/ListItemContent.tsx","../../src/DataList.tsx","../../src/DataItemSkeleton.tsx","../../../seeds-react-skeleton/src/Skeleton.tsx","../../../seeds-react-skeleton/src/index.ts","../../src/VirtualizedDataList.tsx","../../../seeds-react-loader/src/Loader.tsx","../../../seeds-react-loader/src/styles.ts","../../../seeds-react-loader/src/index.ts","../../../seeds-react-mixins/src/index.ts","../../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 > li:first-child {\n margin-top: 0;\n }\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 <Icon mr={300} name={iconName} size=\"small\" ariaLabel={iconLabel} />\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 } 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\";\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 ...rest\n}: TypeDataListProps<T>) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const loadingItems = [0, 1, 2, 3, 4];\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 {data.map((item, index) => (\n <ListItem key={index} {...listItemProps}>\n {renderItem(item, index)}\n </ListItem>\n ))}\n </List>\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 styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { SkeletonProps } from \"./SkeletonTypes\";\n\n/**\n *\n * @param borderRadius\n * @returns classname string for handling appropriate loader style depending on passed in properties\n */\n// @ts-ignore TODO: fix noImplicitAny error here. IDK why there are no types for this component\nconst SkeletonAttrs = ({ borderRadius, height, width }) => ({\n className:\n borderRadius === \"pill\" && height === width ? \"circular\" : \"linear\",\n});\n\nconst Skeleton = styled(Box).attrs(SkeletonAttrs)`\n position: relative;\n background: ${(props) =>\n props.theme.colors.container.background.decorative.neutral};\n overflow: hidden;\n &.circular {\n &:before {\n position: absolute;\n top: -25%;\n left: -25%;\n content: '';\n background-image: ${(props) => `conic-gradient(\n ${props.theme.colors.container.background.decorative.neutral} 270deg,\n ${props.theme.colors.container.border.decorative.neutral} 300deg\n );`};\n height: 150%;\n width: 150%;\n animation: SkeletonRotate 2s infinite linear;\n }\n &:after {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n content: '';\n height: calc(100% - 8px);\n width: calc(100% - 8px);\n background: ${(p) => p.theme.colors.app.background.base};\n border-radius: 50%;\n }\n }\n &.linear {\n position: relative;\n background-image: ${(props) => `linear-gradient(\n 288deg,\n ${props.theme.colors.container.background.decorative.neutral} 32%,\n ${props.theme.colors.container.border.decorative.neutral},\n ${props.theme.colors.container.background.decorative.neutral} 68%\n );`}\n background-size: 400%;\n background-repeat: no-repeat;\n animation: SkeletonShimmer 2s linear infinite reverse;\n overflow: hidden;\n &:after {\n position: absolute;\n bottom: 0;\n content: \"\";\n height: calc(100% - 4px);\n width: 100%;\n background: ${(props) =>\n props.theme.colors.container.background.decorative.neutral};\n \n }\n }\n\n @media (prefers-reduced-motion) {\n &.linear,\n &.circular::before {\n animation: none;\n }\n &:before,\n &:after {\n display: none;\n }\n &.linear,\n &.circular {\n border: 1px solid ${(props) =>\n props.theme.colors.container.border.decorative.neutral};\n animation: SkeletonPulse 2s linear infinite alternate; \n }\n }\n\n @keyframes SkeletonRotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n @keyframes SkeletonRotateFade {\n 50% {\n transform: rotate(360deg);\n }\n 90% {\n opacity: 1;\n }\n 100% {\n transform: rotate(720deg);\n opacity: 0;\n }\n }\n\n @keyframes SkeletonShimmer {\n 0% {\n background-position: 0% 0;\n }\n 100% {\n background-position: 100% 0;\n }\n }\n @keyframes SkeletonPulse {\n 0% {\n border-color: ${(props) =>\n props.theme.colors.container.border.decorative.neutral}FF;\n }\n 100% {\n border-color: ${(props) =>\n props.theme.colors.container.border.decorative.neutral}1A;\n }\n }\n`;\n\n// @TODO: Refine types that are passed to SkeletonComponent\nexport const SkeletonComponent = ({\n borderRadius,\n height,\n width,\n ...props\n}: SkeletonProps) => {\n return (\n <Skeleton\n borderRadius={borderRadius}\n height={height}\n width={width}\n {...props}\n />\n );\n};\n\nexport default Skeleton;\n","import Skeleton from \"./Skeleton\";\n\nexport default Skeleton;\nexport * from \"./SkeletonTypes\";\nexport { Skeleton };\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 = 500,\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;\n\n const transform =\n offset && offset > removeHeaderDepth\n ? `translateY(-${headerHeight}px)`\n : \"translateY(0px)\";\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 <div ref={afterInView.ref}>\n <Loader delay={false} />\n </div>\n </div>\n );\n};\n\nExperimental_VirtualizedDataList.displayName =\n \"Experimental_VirtualizedDataList\";\n\nexport default Experimental_VirtualizedDataList;\n","import * as React from \"react\";\nimport Container, { Text } from \"./styles\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\n\nconst Loader = ({\n size = \"large\",\n text = \"\",\n delay = true,\n color = \"dark\",\n qa,\n ...rest\n}: TypeLoaderProps) => {\n return (\n <Container\n small={size === \"small\"}\n dark={color === \"dark\"}\n delay={delay}\n data-qa-loader=\"\"\n {...qa}\n {...rest}\n >\n <Text>{text || \"Loading\"}</Text>\n </Container>\n );\n};\n\nexport default Loader;\n","import styled, { css, keyframes } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\n\nconst getSize = (size: number) => {\n const spinnerSize = Math.round(size * 1);\n const borderWidth = Math.round(size * 0.1);\n\n return css`\n width: ${size}px;\n height: ${size}px;\n box-shadow: ${({ theme }) =>\n `0 0 0 2px ${theme.colors.neutral[600]}, \n inset 0 0 0 ${borderWidth + 2}px ${theme.colors.neutral[600]}`};\n\n &:after {\n width: ${spinnerSize}px;\n height: ${spinnerSize}px;\n box-sizing: border-box;\n border-width: ${borderWidth}px;\n }\n\n .no-cssanimations &::after {\n background-size: ${spinnerSize}px;\n }\n `;\n};\n\nconst spin = keyframes`\n from {\n transform: translate(-50%,-50%) rotate(0deg);\n }\n to {\n transform: translate(-50%,-50%) rotate(360deg);\n }\n`;\n\nconst delayAnimation = keyframes`\n 0% {\n opacity: 0;\n }\n 80% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n`;\n\ninterface TypeLoaderContainer extends Pick<TypeLoaderProps, \"delay\"> {\n small?: boolean;\n dark?: boolean;\n}\n\nconst Container = styled.div.attrs<{ className: string }>({\n className: \"Loader\",\n})<TypeLoaderContainer>`\n position: relative;\n margin: 0 auto;\n padding: 0;\n overflow: hidden;\n border-radius: 100%;\n\n animation: ${(props) =>\n props.delay\n ? css`\n ${delayAnimation} 2s 1;\n `\n : \"none\"};\n\n &:after {\n position: absolute;\n top: 50%;\n left: 50%;\n background: transparent;\n border-style: solid;\n border-radius: 100%;\n content: \"\";\n transition: opacity 250ms;\n border-color: ${({ theme }) =>\n `${theme.colors.neutral[0]} ${theme.colors.neutral[0]} ${theme.colors.neutral[600]} ${theme.colors.neutral[600]}`};\n\n animation: ${(props) =>\n props.delay\n ? css`\n ${spin} 2.25s infinite linear, ${delayAnimation} 2s 1\n `\n : css`\n ${spin} 2.25s infinite linear\n `};\n }\n\n ${(props) => (props.small ? getSize(20) : getSize(40))}\n ${COMMON}\n`;\n\nexport const Text = styled.div<Pick<TypeLoaderProps, \"text\">>`\n ${visuallyHidden}\n`;\n\nexport default Container;\n","import Loader from \"./Loader\";\n\nexport default Loader;\nexport { Loader };\nexport * from \"./LoaderTypes\";\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 * 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\";\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 removed/hidden. Defaults to 500 */\n removeHeaderDepth?: number;\n /** Height of the header in pixels. Defaults to 60 */\n headerHeight?: number;\n}\n"],"mappings":"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","names":["jsx","Box","jsx","Box","styled","Box","jsx","jsx","jsxs","Box","Box","styled","jsx","jsxs","Box","React","Box","styled","css","jsx","css","theme","Container","styled","Text","styles_default","index_default","styled","jsx","jsxs","HeaderContent","Box","index_default"]}
|
|
1
|
+
{"version":3,"sources":["../../src/styles.tsx","../../src/List.tsx","../../src/ListItem.tsx","../../src/ListItemContent.tsx","../../src/DataList.tsx","../../src/DataItemSkeleton.tsx","../../../seeds-react-skeleton/src/Skeleton.tsx","../../../seeds-react-skeleton/src/index.ts","../../src/VirtualizedDataList.tsx","../../../seeds-react-loader/src/Loader.tsx","../../../seeds-react-loader/src/styles.ts","../../../seeds-react-loader/src/index.ts","../../../seeds-react-mixins/src/index.ts","../../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 <Icon mr={300} name={iconName} size=\"small\" ariaLabel={iconLabel} />\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 } 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\";\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 ...rest\n}: TypeDataListProps<T>) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const loadingItems = [0, 1, 2, 3, 4];\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 {data.map((item, index) => (\n <ListItem key={index} {...listItemProps}>\n {renderItem(item, index)}\n </ListItem>\n ))}\n </List>\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 styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { SkeletonProps } from \"./SkeletonTypes\";\n\n/**\n *\n * @param borderRadius\n * @returns classname string for handling appropriate loader style depending on passed in properties\n */\n// @ts-ignore TODO: fix noImplicitAny error here. IDK why there are no types for this component\nconst SkeletonAttrs = ({ borderRadius, height, width }) => ({\n className:\n borderRadius === \"pill\" && height === width ? \"circular\" : \"linear\",\n});\n\nconst Skeleton = styled(Box).attrs(SkeletonAttrs)`\n position: relative;\n background: ${(props) =>\n props.theme.colors.container.background.decorative.neutral};\n overflow: hidden;\n &.circular {\n &:before {\n position: absolute;\n top: -25%;\n left: -25%;\n content: '';\n background-image: ${(props) => `conic-gradient(\n ${props.theme.colors.container.background.decorative.neutral} 270deg,\n ${props.theme.colors.container.border.decorative.neutral} 300deg\n );`};\n height: 150%;\n width: 150%;\n animation: SkeletonRotate 2s infinite linear;\n }\n &:after {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n content: '';\n height: calc(100% - 8px);\n width: calc(100% - 8px);\n background: ${(p) => p.theme.colors.app.background.base};\n border-radius: 50%;\n }\n }\n &.linear {\n position: relative;\n background-image: ${(props) => `linear-gradient(\n 288deg,\n ${props.theme.colors.container.background.decorative.neutral} 32%,\n ${props.theme.colors.container.border.decorative.neutral},\n ${props.theme.colors.container.background.decorative.neutral} 68%\n );`}\n background-size: 400%;\n background-repeat: no-repeat;\n animation: SkeletonShimmer 2s linear infinite reverse;\n overflow: hidden;\n &:after {\n position: absolute;\n bottom: 0;\n content: \"\";\n height: calc(100% - 4px);\n width: 100%;\n background: ${(props) =>\n props.theme.colors.container.background.decorative.neutral};\n \n }\n }\n\n @media (prefers-reduced-motion) {\n &.linear,\n &.circular::before {\n animation: none;\n }\n &:before,\n &:after {\n display: none;\n }\n &.linear,\n &.circular {\n border: 1px solid ${(props) =>\n props.theme.colors.container.border.decorative.neutral};\n animation: SkeletonPulse 2s linear infinite alternate; \n }\n }\n\n @keyframes SkeletonRotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n @keyframes SkeletonRotateFade {\n 50% {\n transform: rotate(360deg);\n }\n 90% {\n opacity: 1;\n }\n 100% {\n transform: rotate(720deg);\n opacity: 0;\n }\n }\n\n @keyframes SkeletonShimmer {\n 0% {\n background-position: 0% 0;\n }\n 100% {\n background-position: 100% 0;\n }\n }\n @keyframes SkeletonPulse {\n 0% {\n border-color: ${(props) =>\n props.theme.colors.container.border.decorative.neutral}FF;\n }\n 100% {\n border-color: ${(props) =>\n props.theme.colors.container.border.decorative.neutral}1A;\n }\n }\n`;\n\n// @TODO: Refine types that are passed to SkeletonComponent\nexport const SkeletonComponent = ({\n borderRadius,\n height,\n width,\n ...props\n}: SkeletonProps) => {\n return (\n <Skeleton\n borderRadius={borderRadius}\n height={height}\n width={width}\n {...props}\n />\n );\n};\n\nexport default Skeleton;\n","import Skeleton from \"./Skeleton\";\n\nexport default Skeleton;\nexport * from \"./SkeletonTypes\";\nexport { Skeleton };\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 = 500,\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;\n\n const transform =\n offset && offset > removeHeaderDepth\n ? `translateY(-${headerHeight}px)`\n : \"translateY(0px)\";\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 Container, { Text } from \"./styles\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\n\nconst Loader = ({\n size = \"large\",\n text = \"\",\n delay = true,\n color = \"dark\",\n qa,\n ...rest\n}: TypeLoaderProps) => {\n return (\n <Container\n small={size === \"small\"}\n dark={color === \"dark\"}\n delay={delay}\n data-qa-loader=\"\"\n {...qa}\n {...rest}\n >\n <Text>{text || \"Loading\"}</Text>\n </Container>\n );\n};\n\nexport default Loader;\n","import styled, { css, keyframes } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\n\nconst getSize = (size: number) => {\n const spinnerSize = Math.round(size * 1);\n const borderWidth = Math.round(size * 0.1);\n\n return css`\n width: ${size}px;\n height: ${size}px;\n box-shadow: ${({ theme }) =>\n `0 0 0 2px ${theme.colors.neutral[600]}, \n inset 0 0 0 ${borderWidth + 2}px ${theme.colors.neutral[600]}`};\n\n &:after {\n width: ${spinnerSize}px;\n height: ${spinnerSize}px;\n box-sizing: border-box;\n border-width: ${borderWidth}px;\n }\n\n .no-cssanimations &::after {\n background-size: ${spinnerSize}px;\n }\n `;\n};\n\nconst spin = keyframes`\n from {\n transform: translate(-50%,-50%) rotate(0deg);\n }\n to {\n transform: translate(-50%,-50%) rotate(360deg);\n }\n`;\n\nconst delayAnimation = keyframes`\n 0% {\n opacity: 0;\n }\n 80% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n`;\n\ninterface TypeLoaderContainer extends Pick<TypeLoaderProps, \"delay\"> {\n small?: boolean;\n dark?: boolean;\n}\n\nconst Container = styled.div.attrs<{ className: string }>({\n className: \"Loader\",\n})<TypeLoaderContainer>`\n position: relative;\n margin: 0 auto;\n padding: 0;\n overflow: hidden;\n border-radius: 100%;\n\n animation: ${(props) =>\n props.delay\n ? css`\n ${delayAnimation} 2s 1;\n `\n : \"none\"};\n\n &:after {\n position: absolute;\n top: 50%;\n left: 50%;\n background: transparent;\n border-style: solid;\n border-radius: 100%;\n content: \"\";\n transition: opacity 250ms;\n border-color: ${({ theme }) =>\n `${theme.colors.neutral[0]} ${theme.colors.neutral[0]} ${theme.colors.neutral[600]} ${theme.colors.neutral[600]}`};\n\n animation: ${(props) =>\n props.delay\n ? css`\n ${spin} 2.25s infinite linear, ${delayAnimation} 2s 1\n `\n : css`\n ${spin} 2.25s infinite linear\n `};\n }\n\n ${(props) => (props.small ? getSize(20) : getSize(40))}\n ${COMMON}\n`;\n\nexport const Text = styled.div<Pick<TypeLoaderProps, \"text\">>`\n ${visuallyHidden}\n`;\n\nexport default Container;\n","import Loader from \"./Loader\";\n\nexport default Loader;\nexport { Loader };\nexport * from \"./LoaderTypes\";\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 * 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\";\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 removed/hidden. Defaults to 500 */\n removeHeaderDepth?: number;\n /** Height of the header in pixels. Defaults to 60 */\n headerHeight?: number;\n}\n"],"mappings":";AAAA,OAAO,YAAY;AAGnB,IAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAMzB,IAAO,iBAAQ;;;ACJX;AAFJ,IAAM,OAAO,CAAC,EAAE,KAAK,MAAM,UAAU,GAAG,KAAK,MAAqB;AAChE,SACE,oBAAC,kBAAU,IAAS,GAAG,MACpB,UACH;AAEJ;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ;;;ACbf,YAAY,WAAW;AACvB,OAAO,SAAS;AAMV,gBAAAA,YAAA;AAHN,IAAM,WAAiB;AAAA,EACrB,CAAC,EAAE,YAAY,UAAU,GAAG,KAAK,GAAG,QAAQ;AAC1C,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH;AAAA,QACA,cAAa;AAAA,QACZ,GAAI,aACD;AAAA,UACE,QAAQ;AAAA,UACR,aAAa;AAAA,UACb,GAAG;AAAA,QACL,IACA,CAAC;AAAA,QACL,IAAI;AAAA,QACH,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;AAEvB,IAAO,mBAAQ;;;AC7Bf,OAAuB;AACvB,OAAOC,UAAS;AAChB,OAAO,UAAU;AACjB,SAAS,YAAY;AAsBX,gBAAAC,MAEF,YAFE;AAnBV,IAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AAC9B,SACE;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,gBAAe;AAAA,MACf,cAAa;AAAA,MACb,YAAW;AAAA,MACV,GAAG;AAAA,MAEJ;AAAA,6BAACA,MAAA,EAAI,SAAQ,QAAO,MAAK,KACtB;AAAA,sBACC,gBAAAC,KAAC,QAAK,IAAI,KAAK,MAAM,UAAU,MAAK,SAAQ,WAAW,WAAW;AAAA,UAEpE,qBAACD,MAAA,EAAI,MAAK,KACR;AAAA,4BAAAC,KAAC,KAAK,kBAAL,EAAsB,IAAG,OAAO,gBAAK;AAAA,YACrC,WACC,gBAAAA,KAAC,KAAK,QAAL,EAAY,IAAG,OAAM,IAAI,KACvB,mBACH;AAAA,aAEJ;AAAA,WACF;AAAA,QACA,qBAACD,MAAA,EAAI,SAAQ,QAAO,YAAW,UAAS,KAAK,KAAK,YAAY,GAC3D;AAAA,mBAAS,gBAAAC,KAAC,KAAK,QAAL,EAAY,IAAG,OAAO,iBAAM;AAAA,UACtC,WACC,gBAAAA,KAACD,MAAA,EAAI,SAAQ,QAAO,YAAW,UAC5B,mBACH;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,gBAAgB,cAAc;AAE9B,IAAO,0BAAQ;;;AClDf,OAAuB;AACvB,SAAS,cAAc;;;ACDvB,OAAuB;AACvB,OAAOE,UAAS;;;ACDhB,OAAOC,aAAY;AACnB,OAAOC,UAAS;AAoIZ,SAAA,OAAAC,YAAA;AA3HJ,IAAM,gBAAgB,CAAC,EAAE,cAAc,QAAQ,MAAM,OAAO;EAC1D,WACE,iBAAiB,UAAU,WAAW,QAAQ,aAAa;AAC/D;AAEA,IAAM,WAAWF,QAAOC,IAAG,EAAE,MAAM,aAAa;;gBAEhC,CAAC,UACb,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;;;;;;;;0BAQpC,CAAC,UAAU;QAC7B,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;QAC1D,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;OACvD;;;;;;;;;;;;;oBAaa,CAAC,MAAM,EAAE,MAAM,OAAO,IAAI,WAAW,IAAI;;;;;;wBAMrC,CAAC,UAAU;;QAE3B,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;QAC1D,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;QACtD,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;OAC3D;;;;;;;;;;;oBAWa,CAAC,UACb,MAAM,MAAM,OAAO,UAAU,WAAW,WAAW,OAAO;;;;;;;;;;;;;;;;0BAgBxC,CAAC,UACnB,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAiCxC,CAAC,UACf,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;;;sBAGxC,CAAC,UACf,MAAM,MAAM,OAAO,UAAU,OAAO,WAAW,OAAO;;;;AAsB9D,IAAO,mBAAQ;AC5If,IAAO,gBAAQ;;;AFmBH,gBAAAE,MAGJ,QAAAC,aAHI;AAhBZ,IAAM,mBAAmB,CAAC;AAAA,EACxB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,aAAa;AACf,MAAiC;AAC/B,SACE,gBAAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,gBAAe;AAAA,MACf,cAAa;AAAA,MACb,YAAW;AAAA,MACX,IAAI;AAAA,MAEJ;AAAA,wBAAAD,MAACC,MAAA,EAAI,SAAQ,QAAO,MAAK,KACtB;AAAA,qBACC,gBAAAF,KAACE,MAAA,EAAI,IAAI,KAAK,YAAY,GACxB,0BAAAF,KAAC,iBAAS,OAAO,IAAI,QAAQ,IAAI,cAAa,QAAO,GACvD;AAAA,UAEF,gBAAAC,MAACC,MAAA,EAAI,MAAK,KACR;AAAA,4BAAAF,KAAC,iBAAS,OAAM,OAAM,QAAQ,IAAI,cAAa,SAAQ;AAAA,YACtD,cACC,gBAAAA,KAAC,iBAAS,OAAM,OAAM,QAAQ,IAAI,IAAI,KAAK,cAAa,SAAQ;AAAA,aAEpE;AAAA,WACF;AAAA,QACC,YACC,gBAAAA,KAACE,MAAA,EAAI,SAAQ,QAAO,YAAW,UAAS,KAAK,KAAK,YAAY,GAC5D,0BAAAF,KAAC,iBAAS,OAAO,IAAI,QAAQ,IAAI,cAAa,SAAQ,GACxD;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,iBAAiB,cAAc;AAE/B,IAAO,2BAAQ;;;ADrCf,OAAOG,UAAS;AAGhB,OAAOC,aAAY;AAwBb,mBAEI,OAAAC,MAFJ,QAAAC,aAAA;AAtBN,IAAM,gBAAgBF,QAAOG,IAAG;AAAA;AAAA;AAAA;AAKhC,IAAM,WAAW,CAAK;AAAA,EACpB,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,gBAAgB,CAAC;AAAA,EACjB,mBAAmB;AAAA,EACnB;AAAA,EACA,GAAG;AACL,MAA4B;AAC1B,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,eAAe,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC;AAGnC,MAAI,WAAW;AACb,WACE,gBAAAD,MAAA,YACG;AAAA,gBACC,gBAAAD;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,UAAU;AAAA,YACV,KAAK;AAAA,YACL,MAAM;AAAA,YACN,OAAO;AAAA,YACP,QAAQ;AAAA,UACV;AAAA,UACA,IAAG;AAAA,UAEF;AAAA;AAAA,MACH;AAAA,MAEF,gBAAAA,KAAC,gBAAK,IAAS,GAAG,MACf,uBAAa,IAAI,CAAC,UACjB,gBAAAA,KAAC,oBAAsB,GAAG,eACxB,0BAAAA,KAAC,oBAAiB,KADL,KAEf,CACD,GACH;AAAA,OACF;AAAA,EAEJ;AAEA,SACE,gBAAAC,MAAA,YACG;AAAA,cACC,gBAAAD;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,QACA,IAAG;AAAA,QAEF;AAAA;AAAA,IACH;AAAA,IAEF,gBAAAA,KAAC,gBAAK,IAAS,GAAG,MACf,eAAK,IAAI,CAAC,MAAM,UACf,gBAAAA,KAAC,oBAAsB,GAAG,eACvB,qBAAW,MAAM,KAAK,KADV,KAEf,CACD,GACH;AAAA,KACF;AAEJ;AAEA,SAAS,cAAc;AAEvB,IAAO,mBAAQ;;;AIvFf,YAAYG,YAAW;AAGvB,OAAOC,UAAS;;;ACHhB,OAAuB;ACAvB,OAAOC,WAAU,OAAAC,MAAK,iBAAiB;AACvC,SAAS,cAAc;;;AEDvB,SAAS,WAAW;AACpB,SAAS,aAAa;AAaf,IAAM,iBAAiB;;;;;;;;;;AAWvB,IAAM,YAAY;0BACC,MAAM,OAAO,OAAO,QAAQ,WAAW,IAAI;;;;UAI3D,MAAM,OAAO,OAAO,QAAQ,WAAW,IAAI;;;;;;;;;AAU9C,IAAM,OAAO;eACL,MAAM,MAAM,GAAG,CAAC;gBACf,MAAM,MAAM,GAAG,CAAC;aACnB,MAAM,MAAM,GAAG,CAAC;mBACV,MAAM,MAAM,IAAI;;AAG5B,IAAM,WAAW;;;;;;AH1BlB,SAAA,OAAAC,YAAA;AChBN,IAAM,UAAU,CAAC,SAAiB;AAChC,QAAM,cAAc,KAAK,MAAM,OAAO,CAAC;AACvC,QAAM,cAAc,KAAK,MAAM,OAAO,GAAG;AAEzC,SAAOC;aACI,IAAI;cACH,IAAI;kBACA,CAAC,EAAE,OAAAC,OAAM,MACrB,aAAaA,OAAM,OAAO,QAAQ,GAAG,CAAC;oBACxB,cAAc,CAAC,MAAMA,OAAM,OAAO,QAAQ,GAAG,CAAC,EAAE;;;eAGrD,WAAW;gBACV,WAAW;;sBAEL,WAAW;;;;yBAIR,WAAW;;;AAGpC;AAEA,IAAM,OAAO;;;;;;;;AASb,IAAM,iBAAiB;;;;;;;;;;;AAiBvB,IAAMC,aAAYC,QAAO,IAAI,MAA6B;EACxD,WAAW;AACb,CAAC;;;;;;;eAOc,CAAC,UACZ,MAAM,QACFH;YACI,cAAc;YAElB,MAAM;;;;;;;;;;;oBAWM,CAAC,EAAE,OAAAC,OAAM,MACvB,GAAGA,OAAM,OAAO,QAAQ,CAAC,CAAC,IAAIA,OAAM,OAAO,QAAQ,CAAC,CAAC,IAAIA,OAAM,OAAO,QAAQ,GAAG,CAAC,IAAIA,OAAM,OAAO,QAAQ,GAAG,CAAC,EAAE;;iBAEtG,CAAC,UACZ,MAAM,QACFD;cACI,IAAI,2BAA2B,cAAc;cAEjDA;cACI,IAAI;WACP;;;IAGP,CAAC,UAAW,MAAM,QAAQ,QAAQ,EAAE,IAAI,QAAQ,EAAE,CAAE;IACpD,MAAM;;AAGH,IAAMI,QAAOD,QAAO;IACvB,cAAc;;AAGlB,IAAOE,kBAAQH;ADjGf,IAAM,SAAS,CAAC;EACd,OAAO;EACP,OAAO;EACP,QAAQ;EACR,QAAQ;EACR;EACA,GAAG;AACL,MAAuB;AACrB,SACE,gBAAAH;IAACM;IAAA;MACC,OAAO,SAAS;MAChB,MAAM,UAAU;MAChB;MACA,kBAAe;MACd,GAAG;MACH,GAAG;MAEJ,UAAA,gBAAAN,KAACK,OAAA,EAAM,UAAA,QAAQ,UAAA,CAAU;IAAA;EAC3B;AAEJ;AAEA,IAAO,iBAAQ;AExBf,IAAOE,iBAAQ;;;AHGf,SAAS,sBAAsB;AAE/B,SAAS,iBAAiB;AAC1B,OAAOC,aAAY;AAiDf,SAWI,OAAAC,MAXJ,QAAAC,aAAA;AA/CJ,IAAMC,iBAAgBH,QAAOI,IAAG;AAAA;AAAA;AAAA;AAAA;AAMhC,IAAM,mCAAmC,CAAK;AAAA,EAC5C,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,GAAG;AACL,MAA4B;AAC1B,QAAM,cAAc,UAAU;AAE9B,QAAM,YAAkB,cAAuB,IAAI;AAEnD,QAAM,QAAQ,KAAK;AAEnB,QAAM,cAAc,eAAe;AAAA,IACjC;AAAA,IACA,kBAAkB,MAAM,UAAU;AAAA,IAClC,cAAc,MAAM;AAAA,IACpB,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,QAAQ,YAAY,gBAAgB;AAC1C,QAAM,SAAS,YAAY;AAE3B,QAAM,YACJ,UAAU,SAAS,oBACf,eAAe,YAAY,QAC3B;AAEN,EAAM,iBAAU,MAAM;AACpB,QAAI,YAAY,QAAQ;AACtB,qBAAe;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,MAAM,CAAC;AAErC,SACE,gBAAAF;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA,MACV,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,SAAS;AAAA,MACX;AAAA,MAEC;AAAA,kBACC,gBAAAD;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV;AAAA,cACA,KAAK;AAAA,cACL,MAAM;AAAA,cACN,OAAO;AAAA,cACP,QAAQ;AAAA,YACV;AAAA,YACA,IAAG;AAAA,YAEF;AAAA;AAAA,QACH;AAAA,QAEF,gBAAAF;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAO;AAAA,cACL,QAAQ,GAAG,YAAY,aAAa,CAAC;AAAA,cACrC,OAAO;AAAA,cACP,UAAU;AAAA,YACZ;AAAA,YAEC,gBAAM,IAAI,CAAC,eAAe;AACzB,qBACE,gBAAAA;AAAA,gBAAC;AAAA;AAAA,kBAEC,cAAY,WAAW;AAAA,kBACvB,KAAK,YAAY;AAAA,kBACjB,OAAO;AAAA,oBACL,UAAU;AAAA,oBACV,KAAK;AAAA,oBACL,MAAM;AAAA,oBACN,OAAO;AAAA,oBACP,WAAW,cACT,WAAW,QAAQ,YAAY,QAAQ,YACzC;AAAA,kBACF;AAAA,kBAEC,qBAAW,KAAK,WAAW,KAAK,CAAM;AAAA;AAAA,gBAblC,WAAW;AAAA,cAclB;AAAA,YAEJ,CAAC;AAAA;AAAA,QACH;AAAA,QACC,eAAe,CAAC,sBACf,gBAAAA,KAAC,SAAI,KAAK,YAAY,KACpB,0BAAAA,KAACI,gBAAA,EAAO,OAAO,OAAO,GACxB;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,iCAAiC,cAC/B;AAEF,IAAO,8BAAQ;;;AK3Hf,OAAuB;;;ACAvB,OAAuB;;;ACAvB,OAAuB;","names":["jsx","Box","jsx","Box","styled","Box","jsx","jsx","jsxs","Box","Box","styled","jsx","jsxs","Box","React","Box","styled","css","jsx","css","theme","Container","styled","Text","styles_default","index_default","styled","jsx","jsxs","HeaderContent","Box","index_default"]}
|
package/dist/index.js
CHANGED
|
@@ -45,10 +45,6 @@ var Container = import_styled_components.default.ul`
|
|
|
45
45
|
margin: 0;
|
|
46
46
|
padding: 0;
|
|
47
47
|
list-style: none;
|
|
48
|
-
|
|
49
|
-
> li:first-child {
|
|
50
|
-
margin-top: 0;
|
|
51
|
-
}
|
|
52
48
|
`;
|
|
53
49
|
var styles_default = Container;
|
|
54
50
|
|
|
@@ -590,7 +586,7 @@ var Experimental_VirtualizedDataList = ({
|
|
|
590
586
|
})
|
|
591
587
|
}
|
|
592
588
|
),
|
|
593
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: afterInView.ref, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(index_default2, { delay: false }) })
|
|
589
|
+
hasNextPage && !isFetchingNextPage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: afterInView.ref, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(index_default2, { delay: false }) })
|
|
594
590
|
]
|
|
595
591
|
}
|
|
596
592
|
);
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/styles.tsx","../src/List.tsx","../src/ListItem.tsx","../src/ListItemContent.tsx","../src/DataList.tsx","../src/DataItemSkeleton.tsx","../../seeds-react-skeleton/src/Skeleton.tsx","../../seeds-react-skeleton/src/index.ts","../src/VirtualizedDataList.tsx","../../seeds-react-loader/src/Loader.tsx","../../seeds-react-loader/src/styles.ts","../../seeds-react-loader/src/index.ts","../../seeds-react-mixins/src/index.ts","../src/ListTypes.ts","../src/ListItemTypes.ts","../src/DataListTypes.ts"],"sourcesContent":["import List from \"./List\";\nimport ListItem from \"./ListItem\";\nimport ListItemContent from \"./ListItemContent\";\nimport DataList from \"./DataList\";\nimport DataItemSkeleton from \"./DataItemSkeleton\";\nimport Experimental_VirtualizedDataList from \"./VirtualizedDataList\";\n\nexport {\n List,\n ListItem,\n ListItemContent,\n DataList,\n DataItemSkeleton,\n Experimental_VirtualizedDataList,\n};\nexport * from \"./ListTypes\";\nexport * from \"./ListItemTypes\";\nexport * from \"./DataListTypes\";\nexport * from \"./DataItemSkeletonTypes\";\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 > li:first-child {\n margin-top: 0;\n }\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 <Icon mr={300} name={iconName} size=\"small\" ariaLabel={iconLabel} />\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 } 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\";\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 ...rest\n}: TypeDataListProps<T>) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const loadingItems = [0, 1, 2, 3, 4];\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 {data.map((item, index) => (\n <ListItem key={index} {...listItemProps}>\n {renderItem(item, index)}\n </ListItem>\n ))}\n </List>\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 styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { SkeletonProps } from \"./SkeletonTypes\";\n\n/**\n *\n * @param borderRadius\n * @returns classname string for handling appropriate loader style depending on passed in properties\n */\n// @ts-ignore TODO: fix noImplicitAny error here. IDK why there are no types for this component\nconst SkeletonAttrs = ({ borderRadius, height, width }) => ({\n className:\n borderRadius === \"pill\" && height === width ? \"circular\" : \"linear\",\n});\n\nconst Skeleton = styled(Box).attrs(SkeletonAttrs)`\n position: relative;\n background: ${(props) =>\n props.theme.colors.container.background.decorative.neutral};\n overflow: hidden;\n &.circular {\n &:before {\n position: absolute;\n top: -25%;\n left: -25%;\n content: '';\n background-image: ${(props) => `conic-gradient(\n ${props.theme.colors.container.background.decorative.neutral} 270deg,\n ${props.theme.colors.container.border.decorative.neutral} 300deg\n );`};\n height: 150%;\n width: 150%;\n animation: SkeletonRotate 2s infinite linear;\n }\n &:after {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n content: '';\n height: calc(100% - 8px);\n width: calc(100% - 8px);\n background: ${(p) => p.theme.colors.app.background.base};\n border-radius: 50%;\n }\n }\n &.linear {\n position: relative;\n background-image: ${(props) => `linear-gradient(\n 288deg,\n ${props.theme.colors.container.background.decorative.neutral} 32%,\n ${props.theme.colors.container.border.decorative.neutral},\n ${props.theme.colors.container.background.decorative.neutral} 68%\n );`}\n background-size: 400%;\n background-repeat: no-repeat;\n animation: SkeletonShimmer 2s linear infinite reverse;\n overflow: hidden;\n &:after {\n position: absolute;\n bottom: 0;\n content: \"\";\n height: calc(100% - 4px);\n width: 100%;\n background: ${(props) =>\n props.theme.colors.container.background.decorative.neutral};\n \n }\n }\n\n @media (prefers-reduced-motion) {\n &.linear,\n &.circular::before {\n animation: none;\n }\n &:before,\n &:after {\n display: none;\n }\n &.linear,\n &.circular {\n border: 1px solid ${(props) =>\n props.theme.colors.container.border.decorative.neutral};\n animation: SkeletonPulse 2s linear infinite alternate; \n }\n }\n\n @keyframes SkeletonRotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n @keyframes SkeletonRotateFade {\n 50% {\n transform: rotate(360deg);\n }\n 90% {\n opacity: 1;\n }\n 100% {\n transform: rotate(720deg);\n opacity: 0;\n }\n }\n\n @keyframes SkeletonShimmer {\n 0% {\n background-position: 0% 0;\n }\n 100% {\n background-position: 100% 0;\n }\n }\n @keyframes SkeletonPulse {\n 0% {\n border-color: ${(props) =>\n props.theme.colors.container.border.decorative.neutral}FF;\n }\n 100% {\n border-color: ${(props) =>\n props.theme.colors.container.border.decorative.neutral}1A;\n }\n }\n`;\n\n// @TODO: Refine types that are passed to SkeletonComponent\nexport const SkeletonComponent = ({\n borderRadius,\n height,\n width,\n ...props\n}: SkeletonProps) => {\n return (\n <Skeleton\n borderRadius={borderRadius}\n height={height}\n width={width}\n {...props}\n />\n );\n};\n\nexport default Skeleton;\n","import Skeleton from \"./Skeleton\";\n\nexport default Skeleton;\nexport * from \"./SkeletonTypes\";\nexport { Skeleton };\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 = 500,\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;\n\n const transform =\n offset && offset > removeHeaderDepth\n ? `translateY(-${headerHeight}px)`\n : \"translateY(0px)\";\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 <div ref={afterInView.ref}>\n <Loader delay={false} />\n </div>\n </div>\n );\n};\n\nExperimental_VirtualizedDataList.displayName =\n \"Experimental_VirtualizedDataList\";\n\nexport default Experimental_VirtualizedDataList;\n","import * as React from \"react\";\nimport Container, { Text } from \"./styles\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\n\nconst Loader = ({\n size = \"large\",\n text = \"\",\n delay = true,\n color = \"dark\",\n qa,\n ...rest\n}: TypeLoaderProps) => {\n return (\n <Container\n small={size === \"small\"}\n dark={color === \"dark\"}\n delay={delay}\n data-qa-loader=\"\"\n {...qa}\n {...rest}\n >\n <Text>{text || \"Loading\"}</Text>\n </Container>\n );\n};\n\nexport default Loader;\n","import styled, { css, keyframes } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\n\nconst getSize = (size: number) => {\n const spinnerSize = Math.round(size * 1);\n const borderWidth = Math.round(size * 0.1);\n\n return css`\n width: ${size}px;\n height: ${size}px;\n box-shadow: ${({ theme }) =>\n `0 0 0 2px ${theme.colors.neutral[600]}, \n inset 0 0 0 ${borderWidth + 2}px ${theme.colors.neutral[600]}`};\n\n &:after {\n width: ${spinnerSize}px;\n height: ${spinnerSize}px;\n box-sizing: border-box;\n border-width: ${borderWidth}px;\n }\n\n .no-cssanimations &::after {\n background-size: ${spinnerSize}px;\n }\n `;\n};\n\nconst spin = keyframes`\n from {\n transform: translate(-50%,-50%) rotate(0deg);\n }\n to {\n transform: translate(-50%,-50%) rotate(360deg);\n }\n`;\n\nconst delayAnimation = keyframes`\n 0% {\n opacity: 0;\n }\n 80% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n`;\n\ninterface TypeLoaderContainer extends Pick<TypeLoaderProps, \"delay\"> {\n small?: boolean;\n dark?: boolean;\n}\n\nconst Container = styled.div.attrs<{ className: string }>({\n className: \"Loader\",\n})<TypeLoaderContainer>`\n position: relative;\n margin: 0 auto;\n padding: 0;\n overflow: hidden;\n border-radius: 100%;\n\n animation: ${(props) =>\n props.delay\n ? css`\n ${delayAnimation} 2s 1;\n `\n : \"none\"};\n\n &:after {\n position: absolute;\n top: 50%;\n left: 50%;\n background: transparent;\n border-style: solid;\n border-radius: 100%;\n content: \"\";\n transition: opacity 250ms;\n border-color: ${({ theme }) =>\n `${theme.colors.neutral[0]} ${theme.colors.neutral[0]} ${theme.colors.neutral[600]} ${theme.colors.neutral[600]}`};\n\n animation: ${(props) =>\n props.delay\n ? css`\n ${spin} 2.25s infinite linear, ${delayAnimation} 2s 1\n `\n : css`\n ${spin} 2.25s infinite linear\n `};\n }\n\n ${(props) => (props.small ? getSize(20) : getSize(40))}\n ${COMMON}\n`;\n\nexport const Text = styled.div<Pick<TypeLoaderProps, \"text\">>`\n ${visuallyHidden}\n`;\n\nexport default Container;\n","import Loader from \"./Loader\";\n\nexport default Loader;\nexport { Loader };\nexport * from \"./LoaderTypes\";\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 * 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\";\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 removed/hidden. Defaults to 500 */\n removeHeaderDepth?: number;\n /** Height of the header in pixels. Defaults to 60 */\n headerHeight?: number;\n}\n"],"mappings":"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","names":["styled","import_jsx_runtime","Box","React","import_seeds_react_box","import_jsx_runtime","Box","Text","React","React","import_seeds_react_box","import_styled_components","import_seeds_react_box","import_jsx_runtime","styled","Box","import_jsx_runtime","Box","import_seeds_react_box","import_styled_components","import_jsx_runtime","styled","Box","React","import_seeds_react_box","import_react","import_styled_components","import_styled_components","import_jsx_runtime","theme","Container","styled","Text","styles_default","index_default","import_styled_components","import_jsx_runtime","HeaderContent","styled","Box","index_default","React","React","React"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/styles.tsx","../src/List.tsx","../src/ListItem.tsx","../src/ListItemContent.tsx","../src/DataList.tsx","../src/DataItemSkeleton.tsx","../../seeds-react-skeleton/src/Skeleton.tsx","../../seeds-react-skeleton/src/index.ts","../src/VirtualizedDataList.tsx","../../seeds-react-loader/src/Loader.tsx","../../seeds-react-loader/src/styles.ts","../../seeds-react-loader/src/index.ts","../../seeds-react-mixins/src/index.ts","../src/ListTypes.ts","../src/ListItemTypes.ts","../src/DataListTypes.ts"],"sourcesContent":["import List from \"./List\";\nimport ListItem from \"./ListItem\";\nimport ListItemContent from \"./ListItemContent\";\nimport DataList from \"./DataList\";\nimport DataItemSkeleton from \"./DataItemSkeleton\";\nimport Experimental_VirtualizedDataList from \"./VirtualizedDataList\";\n\nexport {\n List,\n ListItem,\n ListItemContent,\n DataList,\n DataItemSkeleton,\n Experimental_VirtualizedDataList,\n};\nexport * from \"./ListTypes\";\nexport * from \"./ListItemTypes\";\nexport * from \"./DataListTypes\";\nexport * from \"./DataItemSkeletonTypes\";\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\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 <Icon mr={300} name={iconName} size=\"small\" ariaLabel={iconLabel} />\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 } 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\";\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 ...rest\n}: TypeDataListProps<T>) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const loadingItems = [0, 1, 2, 3, 4];\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 {data.map((item, index) => (\n <ListItem key={index} {...listItemProps}>\n {renderItem(item, index)}\n </ListItem>\n ))}\n </List>\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 styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { SkeletonProps } from \"./SkeletonTypes\";\n\n/**\n *\n * @param borderRadius\n * @returns classname string for handling appropriate loader style depending on passed in properties\n */\n// @ts-ignore TODO: fix noImplicitAny error here. IDK why there are no types for this component\nconst SkeletonAttrs = ({ borderRadius, height, width }) => ({\n className:\n borderRadius === \"pill\" && height === width ? \"circular\" : \"linear\",\n});\n\nconst Skeleton = styled(Box).attrs(SkeletonAttrs)`\n position: relative;\n background: ${(props) =>\n props.theme.colors.container.background.decorative.neutral};\n overflow: hidden;\n &.circular {\n &:before {\n position: absolute;\n top: -25%;\n left: -25%;\n content: '';\n background-image: ${(props) => `conic-gradient(\n ${props.theme.colors.container.background.decorative.neutral} 270deg,\n ${props.theme.colors.container.border.decorative.neutral} 300deg\n );`};\n height: 150%;\n width: 150%;\n animation: SkeletonRotate 2s infinite linear;\n }\n &:after {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n content: '';\n height: calc(100% - 8px);\n width: calc(100% - 8px);\n background: ${(p) => p.theme.colors.app.background.base};\n border-radius: 50%;\n }\n }\n &.linear {\n position: relative;\n background-image: ${(props) => `linear-gradient(\n 288deg,\n ${props.theme.colors.container.background.decorative.neutral} 32%,\n ${props.theme.colors.container.border.decorative.neutral},\n ${props.theme.colors.container.background.decorative.neutral} 68%\n );`}\n background-size: 400%;\n background-repeat: no-repeat;\n animation: SkeletonShimmer 2s linear infinite reverse;\n overflow: hidden;\n &:after {\n position: absolute;\n bottom: 0;\n content: \"\";\n height: calc(100% - 4px);\n width: 100%;\n background: ${(props) =>\n props.theme.colors.container.background.decorative.neutral};\n \n }\n }\n\n @media (prefers-reduced-motion) {\n &.linear,\n &.circular::before {\n animation: none;\n }\n &:before,\n &:after {\n display: none;\n }\n &.linear,\n &.circular {\n border: 1px solid ${(props) =>\n props.theme.colors.container.border.decorative.neutral};\n animation: SkeletonPulse 2s linear infinite alternate; \n }\n }\n\n @keyframes SkeletonRotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n @keyframes SkeletonRotateFade {\n 50% {\n transform: rotate(360deg);\n }\n 90% {\n opacity: 1;\n }\n 100% {\n transform: rotate(720deg);\n opacity: 0;\n }\n }\n\n @keyframes SkeletonShimmer {\n 0% {\n background-position: 0% 0;\n }\n 100% {\n background-position: 100% 0;\n }\n }\n @keyframes SkeletonPulse {\n 0% {\n border-color: ${(props) =>\n props.theme.colors.container.border.decorative.neutral}FF;\n }\n 100% {\n border-color: ${(props) =>\n props.theme.colors.container.border.decorative.neutral}1A;\n }\n }\n`;\n\n// @TODO: Refine types that are passed to SkeletonComponent\nexport const SkeletonComponent = ({\n borderRadius,\n height,\n width,\n ...props\n}: SkeletonProps) => {\n return (\n <Skeleton\n borderRadius={borderRadius}\n height={height}\n width={width}\n {...props}\n />\n );\n};\n\nexport default Skeleton;\n","import Skeleton from \"./Skeleton\";\n\nexport default Skeleton;\nexport * from \"./SkeletonTypes\";\nexport { Skeleton };\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 = 500,\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;\n\n const transform =\n offset && offset > removeHeaderDepth\n ? `translateY(-${headerHeight}px)`\n : \"translateY(0px)\";\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 Container, { Text } from \"./styles\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\n\nconst Loader = ({\n size = \"large\",\n text = \"\",\n delay = true,\n color = \"dark\",\n qa,\n ...rest\n}: TypeLoaderProps) => {\n return (\n <Container\n small={size === \"small\"}\n dark={color === \"dark\"}\n delay={delay}\n data-qa-loader=\"\"\n {...qa}\n {...rest}\n >\n <Text>{text || \"Loading\"}</Text>\n </Container>\n );\n};\n\nexport default Loader;\n","import styled, { css, keyframes } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { visuallyHidden } from \"@sproutsocial/seeds-react-mixins\";\nimport type { TypeLoaderProps } from \"./LoaderTypes\";\n\nconst getSize = (size: number) => {\n const spinnerSize = Math.round(size * 1);\n const borderWidth = Math.round(size * 0.1);\n\n return css`\n width: ${size}px;\n height: ${size}px;\n box-shadow: ${({ theme }) =>\n `0 0 0 2px ${theme.colors.neutral[600]}, \n inset 0 0 0 ${borderWidth + 2}px ${theme.colors.neutral[600]}`};\n\n &:after {\n width: ${spinnerSize}px;\n height: ${spinnerSize}px;\n box-sizing: border-box;\n border-width: ${borderWidth}px;\n }\n\n .no-cssanimations &::after {\n background-size: ${spinnerSize}px;\n }\n `;\n};\n\nconst spin = keyframes`\n from {\n transform: translate(-50%,-50%) rotate(0deg);\n }\n to {\n transform: translate(-50%,-50%) rotate(360deg);\n }\n`;\n\nconst delayAnimation = keyframes`\n 0% {\n opacity: 0;\n }\n 80% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n`;\n\ninterface TypeLoaderContainer extends Pick<TypeLoaderProps, \"delay\"> {\n small?: boolean;\n dark?: boolean;\n}\n\nconst Container = styled.div.attrs<{ className: string }>({\n className: \"Loader\",\n})<TypeLoaderContainer>`\n position: relative;\n margin: 0 auto;\n padding: 0;\n overflow: hidden;\n border-radius: 100%;\n\n animation: ${(props) =>\n props.delay\n ? css`\n ${delayAnimation} 2s 1;\n `\n : \"none\"};\n\n &:after {\n position: absolute;\n top: 50%;\n left: 50%;\n background: transparent;\n border-style: solid;\n border-radius: 100%;\n content: \"\";\n transition: opacity 250ms;\n border-color: ${({ theme }) =>\n `${theme.colors.neutral[0]} ${theme.colors.neutral[0]} ${theme.colors.neutral[600]} ${theme.colors.neutral[600]}`};\n\n animation: ${(props) =>\n props.delay\n ? css`\n ${spin} 2.25s infinite linear, ${delayAnimation} 2s 1\n `\n : css`\n ${spin} 2.25s infinite linear\n `};\n }\n\n ${(props) => (props.small ? getSize(20) : getSize(40))}\n ${COMMON}\n`;\n\nexport const Text = styled.div<Pick<TypeLoaderProps, \"text\">>`\n ${visuallyHidden}\n`;\n\nexport default Container;\n","import Loader from \"./Loader\";\n\nexport default Loader;\nexport { Loader };\nexport * from \"./LoaderTypes\";\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 * 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\";\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 removed/hidden. Defaults to 500 */\n removeHeaderDepth?: number;\n /** Height of the header in pixels. Defaults to 60 */\n headerHeight?: number;\n}\n"],"mappings":"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","names":["styled","import_jsx_runtime","Box","React","import_seeds_react_box","import_jsx_runtime","Box","Text","React","React","import_seeds_react_box","import_styled_components","import_seeds_react_box","import_jsx_runtime","styled","Box","import_jsx_runtime","Box","import_seeds_react_box","import_styled_components","import_jsx_runtime","styled","Box","React","import_seeds_react_box","import_react","import_styled_components","import_styled_components","import_jsx_runtime","theme","Container","styled","Text","styles_default","index_default","import_styled_components","import_jsx_runtime","HeaderContent","styled","Box","index_default","React","React","React"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-list",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Seeds React List",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -18,12 +18,12 @@
|
|
|
18
18
|
"test:watch": "jest --watch --coverage=false"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@sproutsocial/seeds-react-theme": "^3.5.
|
|
21
|
+
"@sproutsocial/seeds-react-theme": "^3.5.1",
|
|
22
22
|
"@sproutsocial/seeds-react-system-props": "^3.0.2",
|
|
23
|
-
"@sproutsocial/seeds-react-box": "^1.1.
|
|
23
|
+
"@sproutsocial/seeds-react-box": "^1.1.13",
|
|
24
24
|
"@sproutsocial/seeds-react-text": "^1.4.0",
|
|
25
|
-
"@sproutsocial/seeds-react-icon": "^2.2.
|
|
26
|
-
"@sproutsocial/seeds-react-button": "^1.3.
|
|
25
|
+
"@sproutsocial/seeds-react-icon": "^2.2.4",
|
|
26
|
+
"@sproutsocial/seeds-react-button": "^1.3.18",
|
|
27
27
|
"@tanstack/react-virtual": "^3.13.12",
|
|
28
28
|
"react-intersection-observer": "^9.16.0"
|
|
29
29
|
},
|
|
@@ -109,9 +109,11 @@ const Experimental_VirtualizedDataList = <T,>({
|
|
|
109
109
|
);
|
|
110
110
|
})}
|
|
111
111
|
</List>
|
|
112
|
-
|
|
113
|
-
<
|
|
114
|
-
|
|
112
|
+
{hasNextPage && !isFetchingNextPage && (
|
|
113
|
+
<div ref={afterInView.ref}>
|
|
114
|
+
<Loader delay={false} />
|
|
115
|
+
</div>
|
|
116
|
+
)}
|
|
115
117
|
</div>
|
|
116
118
|
);
|
|
117
119
|
};
|