@ledgerhq/react-ui 0.29.0-nightly.2 → 0.29.0-nightly.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/lib/cjs/components/asorted/Icon/Icons.stories.js +1 -1
  2. package/lib/cjs/components/asorted/Icon/Icons.stories.js.map +2 -2
  3. package/lib/cjs/pre-ldls/components/AccountList/AccountList.js +11 -2
  4. package/lib/cjs/pre-ldls/components/AccountList/AccountList.js.map +2 -2
  5. package/lib/cjs/pre-ldls/components/NetworkItem/NetworkItem.js +17 -2
  6. package/lib/cjs/pre-ldls/components/NetworkItem/NetworkItem.js.map +2 -2
  7. package/lib/cjs/pre-ldls/components/NetworkItem/NetworkItem.stories.js +24 -1
  8. package/lib/cjs/pre-ldls/components/NetworkItem/NetworkItem.stories.js.map +2 -2
  9. package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.js +15 -2
  10. package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.js.map +2 -2
  11. package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.stories.js +15 -0
  12. package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.stories.js.map +2 -2
  13. package/lib/pre-ldls/components/AccountList/AccountList.d.ts +2 -1
  14. package/lib/pre-ldls/components/AccountList/AccountList.d.ts.map +1 -1
  15. package/lib/pre-ldls/components/AccountList/AccountList.js +2 -2
  16. package/lib/pre-ldls/components/AccountList/AccountList.js.map +1 -1
  17. package/lib/pre-ldls/components/NetworkItem/NetworkItem.d.ts +3 -1
  18. package/lib/pre-ldls/components/NetworkItem/NetworkItem.d.ts.map +1 -1
  19. package/lib/pre-ldls/components/NetworkItem/NetworkItem.js +12 -3
  20. package/lib/pre-ldls/components/NetworkItem/NetworkItem.js.map +1 -1
  21. package/lib/pre-ldls/components/VirtualList/VirtualList.d.ts +5 -1
  22. package/lib/pre-ldls/components/VirtualList/VirtualList.d.ts.map +1 -1
  23. package/lib/pre-ldls/components/VirtualList/VirtualList.js +16 -9
  24. package/lib/pre-ldls/components/VirtualList/VirtualList.js.map +1 -1
  25. package/package.json +1 -1
package/lib/cjs/components/asorted/Icon/Icons.stories.js CHANGED
@@ -69,7 +69,7 @@ IconGrid.args = {
69
69
  };
70
70
  IconGrid.argTypes = {
71
71
  size: {
72
- options: ["XS", "S", "M", "L", "XL"],
72
+ options: ["XS", "S", "M", "L", "XL", "XXL"],
73
73
  control: {
74
74
  type: "select"
75
75
  }
package/lib/cjs/components/asorted/Icon/Icons.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/components/asorted/Icon/Icons.stories.tsx"],
4
- "sourcesContent": ["import React from \"react\";\nimport { StoryFn, Meta } from \"@storybook/react\";\nimport * as Icons from \"@ledgerhq/icons-ui/react\";\nimport styled from \"styled-components\";\nimport { Flex, Text } from \"../../..\";\nimport { useTheme } from \"styled-components\";\n\ninterface SizeData {\n size: number;\n stroke: number;\n}\n\ninterface AvailableSizes {\n XS: SizeData;\n S: SizeData;\n M: SizeData;\n L: SizeData;\n XL: SizeData;\n}\n\nexport default {\n title: \"asorted/Icons\",\n components: Icons,\n} as Meta;\n\ninterface IconProps {\n size?: keyof AvailableSizes;\n color?: string;\n style?: React.CSSProperties;\n}\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n flexDirection: \"column\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n p: 4,\n fill: \"black\",\n})<{ active?: boolean }>`\n ${p => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n border-radius: 4px;\n height: 100px;\n`;\n\nconst IconGridTemplate: React.FC<IconProps> = ({ size, color, style }) => {\n const iconNames = Object.keys(Icons) as (keyof typeof Icons)[];\n\n const theme = useTheme();\n const selectedColor = color || theme.colors.neutral.c100;\n\n return (\n <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(4, 1fr)\", gap: \"10px\" }}>\n {iconNames.map(iconName => {\n const IconComponent = Icons[iconName];\n return (\n <IconContainer key={iconName}>\n <IconComponent size={size} color={selectedColor} style={style} />\n <Text pt={6}>{iconName}</Text>\n </IconContainer>\n );\n })}\n </div>\n );\n};\n\nexport const IconGrid: StoryFn<IconProps> = (args: IconProps) => <IconGridTemplate {...args} />;\n\nIconGrid.args = {\n size: \"M\",\n color: \"\",\n style: {},\n};\n\nIconGrid.argTypes = {\n size: {\n options: [\"XS\", \"S\", \"M\", \"L\", \"XL\"],\n control: {\n type: \"select\",\n },\n },\n color: { control: \"color\" },\n style: { control: \"object\" },\n};\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,YAAuB;AACvB,+BAAmB;AACnB,eAA2B;AAC3B,IAAAA,4BAAyB;AAezB,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,YAAY;AACd;AAQA,MAAM,oBAAgB,yBAAAC,SAAO,aAAI,EAAE,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA,EACH,MAAM;AACR,CAAC;AAAA,IACG,OAAM,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,GAAG,MAAM,EAAG;AAAA;AAAA;AAAA;AAK7E,MAAM,mBAAwC,CAAC,EAAE,MAAM,OAAO,MAAM,MAAM;AACxE,QAAM,YAAY,OAAO,KAAK,KAAK;AAEnC,QAAM,YAAQ,oCAAS;AACvB,QAAM,gBAAgB,SAAS,MAAM,OAAO,QAAQ;AAEpD,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,qBAAqB,kBAAkB,KAAK,OAAO,KAC/E,UAAU,IAAI,cAAY;AACzB,UAAM,gBAAgB,MAAM,QAAQ;AACpC,WACE,6BAAAA,QAAA,cAAC,iBAAc,KAAK,YAClB,6BAAAA,QAAA,cAAC,iBAAc,MAAY,OAAO,eAAe,OAAc,GAC/D,6BAAAA,QAAA,cAAC,iBAAK,IAAI,KAAI,QAAS,CACzB;AAAA,EAEJ,CAAC,CACH;AAEJ;AAEO,MAAM,WAA+B,CAAC,SAAoB,6BAAAA,QAAA,cAAC,oBAAkB,GAAG,MAAM;AAE7F,SAAS,OAAO;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO,CAAC;AACV;AAEA,SAAS,WAAW;AAAA,EAClB,MAAM;AAAA,IACJ,SAAS,CAAC,MAAM,KAAK,KAAK,KAAK,IAAI;AAAA,IACnC,SAAS;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO,EAAE,SAAS,QAAQ;AAAA,EAC1B,OAAO,EAAE,SAAS,SAAS;AAC7B;",
4
+ "sourcesContent": ["import React from \"react\";\nimport { StoryFn, Meta } from \"@storybook/react\";\nimport * as Icons from \"@ledgerhq/icons-ui/react\";\nimport styled from \"styled-components\";\nimport { Flex, Text } from \"../../..\";\nimport { useTheme } from \"styled-components\";\n\ninterface SizeData {\n size: number;\n stroke: number;\n}\n\ninterface AvailableSizes {\n XS: SizeData;\n S: SizeData;\n M: SizeData;\n L: SizeData;\n XL: SizeData;\n XXL: SizeData;\n}\n\nexport default {\n title: \"asorted/Icons\",\n components: Icons,\n} as Meta;\n\ninterface IconProps {\n size?: keyof AvailableSizes;\n color?: string;\n style?: React.CSSProperties;\n}\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n flexDirection: \"column\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n p: 4,\n fill: \"black\",\n})<{ active?: boolean }>`\n ${p => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n border-radius: 4px;\n height: 100px;\n`;\n\nconst IconGridTemplate: React.FC<IconProps> = ({ size, color, style }) => {\n const iconNames = Object.keys(Icons) as (keyof typeof Icons)[];\n\n const theme = useTheme();\n const selectedColor = color || theme.colors.neutral.c100;\n\n return (\n <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(4, 1fr)\", gap: \"10px\" }}>\n {iconNames.map(iconName => {\n const IconComponent = Icons[iconName];\n return (\n <IconContainer key={iconName}>\n <IconComponent size={size} color={selectedColor} style={style} />\n <Text pt={6}>{iconName}</Text>\n </IconContainer>\n );\n })}\n </div>\n );\n};\n\nexport const IconGrid: StoryFn<IconProps> = (args: IconProps) => <IconGridTemplate {...args} />;\n\nIconGrid.args = {\n size: \"M\",\n color: \"\",\n style: {},\n};\n\nIconGrid.argTypes = {\n size: {\n options: [\"XS\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"],\n control: {\n type: \"select\",\n },\n },\n color: { control: \"color\" },\n style: { control: \"object\" },\n};\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,YAAuB;AACvB,+BAAmB;AACnB,eAA2B;AAC3B,IAAAA,4BAAyB;AAgBzB,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,YAAY;AACd;AAQA,MAAM,oBAAgB,yBAAAC,SAAO,aAAI,EAAE,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA,EACH,MAAM;AACR,CAAC;AAAA,IACG,OAAM,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,GAAG,MAAM,EAAG;AAAA;AAAA;AAAA;AAK7E,MAAM,mBAAwC,CAAC,EAAE,MAAM,OAAO,MAAM,MAAM;AACxE,QAAM,YAAY,OAAO,KAAK,KAAK;AAEnC,QAAM,YAAQ,oCAAS;AACvB,QAAM,gBAAgB,SAAS,MAAM,OAAO,QAAQ;AAEpD,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,qBAAqB,kBAAkB,KAAK,OAAO,KAC/E,UAAU,IAAI,cAAY;AACzB,UAAM,gBAAgB,MAAM,QAAQ;AACpC,WACE,6BAAAA,QAAA,cAAC,iBAAc,KAAK,YAClB,6BAAAA,QAAA,cAAC,iBAAc,MAAY,OAAO,eAAe,OAAc,GAC/D,6BAAAA,QAAA,cAAC,iBAAK,IAAI,KAAI,QAAS,CACzB;AAAA,EAEJ,CAAC,CACH;AAEJ;AAEO,MAAM,WAA+B,CAAC,SAAoB,6BAAAA,QAAA,cAAC,oBAAkB,GAAG,MAAM;AAE7F,SAAS,OAAO;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO,CAAC;AACV;AAEA,SAAS,WAAW;AAAA,EAClB,MAAM;AAAA,IACJ,SAAS,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,KAAK;AAAA,IAC1C,SAAS;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO,EAAE,SAAS,QAAQ;AAAA,EAC1B,OAAO,EAAE,SAAS,SAAS;AAC7B;",
6
6
  "names": ["import_styled_components", "styled", "React"]
7
7
  }
package/lib/cjs/pre-ldls/components/AccountList/AccountList.js CHANGED
@@ -36,12 +36,21 @@ var import_AccountItem = require("../AccountItem/AccountItem");
36
36
  var import_VirtualList = require("../VirtualList/VirtualList");
37
37
  const AccountList = ({
38
38
  accounts,
39
- onClick
39
+ onClick,
40
+ bottomComponent
40
41
  }) => {
41
42
  const renderAccountItem = (0, import_react.useCallback)(
42
43
  (account) => /* @__PURE__ */ import_react.default.createElement(import_AccountItem.AccountItem, { onClick: () => onClick(account.id), account }),
43
44
  [onClick]
44
45
  );
45
- return /* @__PURE__ */ import_react.default.createElement(import_VirtualList.VirtualList, { items: accounts, itemHeight: 70, renderItem: renderAccountItem });
46
+ return /* @__PURE__ */ import_react.default.createElement(
47
+ import_VirtualList.VirtualList,
48
+ {
49
+ items: accounts,
50
+ itemHeight: 70,
51
+ bottomComponent,
52
+ renderItem: renderAccountItem
53
+ }
54
+ );
46
55
  };
47
56
  //# sourceMappingURL=AccountList.js.map
package/lib/cjs/pre-ldls/components/AccountList/AccountList.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/pre-ldls/components/AccountList/AccountList.tsx"],
4
- "sourcesContent": ["import React, { useCallback } from \"react\";\nimport { Account, AccountItem } from \"../AccountItem/AccountItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\nexport const AccountList = ({\n accounts,\n onClick,\n}: {\n accounts: Account[];\n onClick: (networkId: string) => void;\n}) => {\n const renderAccountItem = useCallback(\n (account: Account) => <AccountItem onClick={() => onClick(account.id)} account={account} />,\n [onClick],\n );\n\n return <VirtualList items={accounts} itemHeight={70} renderItem={renderAccountItem} />;\n};\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,yBAAqC;AACrC,yBAA4B;AAErB,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AACF,MAGM;AACJ,QAAM,wBAAoB;AAAA,IACxB,CAAC,YAAqB,6BAAAA,QAAA,cAAC,kCAAY,SAAS,MAAM,QAAQ,QAAQ,EAAE,GAAG,SAAkB;AAAA,IACzF,CAAC,OAAO;AAAA,EACV;AAEA,SAAO,6BAAAA,QAAA,cAAC,kCAAY,OAAO,UAAU,YAAY,IAAI,YAAY,mBAAmB;AACtF;",
4
+ "sourcesContent": ["import React, { useCallback } from \"react\";\nimport { Account, AccountItem } from \"../AccountItem/AccountItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\nexport const AccountList = ({\n accounts,\n onClick,\n bottomComponent,\n}: {\n accounts: Account[];\n onClick: (networkId: string) => void;\n bottomComponent?: React.ReactNode;\n}) => {\n const renderAccountItem = useCallback(\n (account: Account) => <AccountItem onClick={() => onClick(account.id)} account={account} />,\n [onClick],\n );\n\n return (\n <VirtualList\n items={accounts}\n itemHeight={70}\n bottomComponent={bottomComponent}\n renderItem={renderAccountItem}\n />\n );\n};\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,yBAAqC;AACrC,yBAA4B;AAErB,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,QAAM,wBAAoB;AAAA,IACxB,CAAC,YAAqB,6BAAAA,QAAA,cAAC,kCAAY,SAAS,MAAM,QAAQ,QAAQ,EAAE,GAAG,SAAkB;AAAA,IACzF,CAAC,OAAO;AAAA,EACV;AAEA,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,YAAY;AAAA,MACZ;AAAA,MACA,YAAY;AAAA;AAAA,EACd;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
package/lib/cjs/pre-ldls/components/NetworkItem/NetworkItem.js CHANGED
@@ -42,6 +42,8 @@ const Wrapper = import_styled_components.default.div`
42
42
  "margin-s",
43
43
  "radius-s",
44
44
  "colors-content-default-default",
45
+ "colors-content-subdued-default-default",
46
+ // used by leftElement child
45
47
  "colors-surface-transparent-hover",
46
48
  "colors-surface-transparent-pressed"
47
49
  )}
@@ -64,8 +66,21 @@ const InfoWrapper = import_styled_components.default.div`
64
66
  flex-direction: column;
65
67
  justify-content: center;
66
68
  margin-left: var(--margin-s);
69
+ flex: 1;
67
70
  `;
68
- const NetworkItem = ({ name, onClick, id, ticker }) => {
71
+ const LeftElementWrapper = import_styled_components.default.div`
72
+ display: flex;
73
+ align-items: center;
74
+ gap: 4px;
75
+ `;
76
+ const NetworkItem = ({
77
+ name,
78
+ onClick,
79
+ id,
80
+ ticker,
81
+ leftElement,
82
+ rightElement
83
+ }) => {
69
84
  return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick }, /* @__PURE__ */ import_react.default.createElement(import_CryptoIcon.CryptoIcon, { size: "48px", ledgerId: id, ticker }), /* @__PURE__ */ import_react.default.createElement(InfoWrapper, null, /* @__PURE__ */ import_react.default.createElement(
70
85
  import_components.Text,
71
86
  {
@@ -74,6 +89,6 @@ const NetworkItem = ({ name, onClick, id, ticker }) => {
74
89
  color: "var(--colors-content-default-default)"
75
90
  },
76
91
  name
77
- )));
92
+ ), /* @__PURE__ */ import_react.default.createElement(LeftElementWrapper, null, leftElement)), rightElement);
78
93
  };
79
94
  //# sourceMappingURL=NetworkItem.js.map
package/lib/cjs/pre-ldls/components/NetworkItem/NetworkItem.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/pre-ldls/components/NetworkItem/NetworkItem.tsx"],
4
- "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\nimport { CryptoIcon } from \"../CryptoIcon/CryptoIcon\";\n\nexport type Network = { name: string; id: string; ticker: string };\n\ntype NetworkItemProps = Network & {\n onClick: () => void;\n};\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"spacing-xxs\",\n \"margin-s\",\n \"radius-s\",\n \"colors-content-default-default\",\n \"colors-surface-transparent-hover\",\n \"colors-surface-transparent-pressed\",\n )}\n display: flex;\n padding: var(--spacing-xxs);\n cursor: pointer;\n border-radius: var(--radius-s, 8px);\n align-items: center;\n\n :hover {\n background-color: var(--colors-surface-transparent-hover);\n }\n\n :active {\n background-color: var(--colors-surface-transparent-pressed);\n }\n`;\n\nconst InfoWrapper = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-left: var(--margin-s);\n`;\n\nexport const NetworkItem = ({ name, onClick, id, ticker }: NetworkItemProps) => {\n return (\n <Wrapper onClick={onClick}>\n <CryptoIcon size=\"48px\" ledgerId={id} ticker={ticker} />\n <InfoWrapper>\n <Text\n variant=\"largeLineHeight\"\n fontWeight=\"semiBold\"\n color=\"var(--colors-content-default-default)\"\n >\n {name}\n </Text>\n </InfoWrapper>\n </Wrapper>\n );\n};\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AACrB,wBAA2B;AAQ3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOpB,MAAM,cAAc,CAAC,EAAE,MAAM,SAAS,IAAI,OAAO,MAAwB;AAC9E,SACE,6BAAAC,QAAA,cAAC,WAAQ,WACP,6BAAAA,QAAA,cAAC,gCAAW,MAAK,QAAO,UAAU,IAAI,QAAgB,GACtD,6BAAAA,QAAA,cAAC,mBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,CACF,CACF;AAEJ;",
4
+ "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\nimport { CryptoIcon } from \"../CryptoIcon/CryptoIcon\";\n\nexport type Network = {\n name: string;\n id: string;\n ticker: string;\n leftElement?: React.ReactNode;\n rightElement?: React.ReactNode;\n};\n\ntype NetworkItemProps = Network & {\n onClick: () => void;\n};\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"spacing-xxs\",\n \"margin-s\",\n \"radius-s\",\n \"colors-content-default-default\",\n \"colors-content-subdued-default-default\", // used by leftElement child\n \"colors-surface-transparent-hover\",\n \"colors-surface-transparent-pressed\",\n )}\n display: flex;\n padding: var(--spacing-xxs);\n cursor: pointer;\n border-radius: var(--radius-s, 8px);\n align-items: center;\n\n :hover {\n background-color: var(--colors-surface-transparent-hover);\n }\n\n :active {\n background-color: var(--colors-surface-transparent-pressed);\n }\n`;\n\nconst InfoWrapper = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-left: var(--margin-s);\n flex: 1;\n`;\n\nconst LeftElementWrapper = styled.div`\n display: flex;\n align-items: center;\n gap: 4px;\n`;\n\nexport const NetworkItem = ({\n name,\n onClick,\n id,\n ticker,\n leftElement,\n rightElement,\n}: NetworkItemProps) => {\n return (\n <Wrapper onClick={onClick}>\n <CryptoIcon size=\"48px\" ledgerId={id} ticker={ticker} />\n <InfoWrapper>\n <Text\n variant=\"largeLineHeight\"\n fontWeight=\"semiBold\"\n color=\"var(--colors-content-default-default)\"\n >\n {name}\n </Text>\n <LeftElementWrapper>{leftElement}</LeftElementWrapper>\n </InfoWrapper>\n {rightElement}\n </Wrapper>\n );\n};\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AACrB,wBAA2B;AAc3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3B,MAAM,qBAAqB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AACtB,SACE,6BAAAC,QAAA,cAAC,WAAQ,WACP,6BAAAA,QAAA,cAAC,gCAAW,MAAK,QAAO,UAAU,IAAI,QAAgB,GACtD,6BAAAA,QAAA,cAAC,mBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,GACA,6BAAAA,QAAA,cAAC,0BAAoB,WAAY,CACnC,GACC,YACH;AAEJ;",
6
6
  "names": ["styled", "React"]
7
7
  }
package/lib/cjs/pre-ldls/components/NetworkItem/NetworkItem.stories.js CHANGED
@@ -19,17 +19,24 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
19
19
  var NetworkItem_stories_exports = {};
20
20
  __export(NetworkItem_stories_exports, {
21
21
  Default: () => Default,
22
+ NetworkItemWithLeftElement: () => NetworkItemWithLeftElement,
23
+ NetworkItemWithRightElement: () => NetworkItemWithRightElement,
22
24
  TestNetworkItem: () => TestNetworkItem,
23
25
  default: () => NetworkItem_stories_default
24
26
  });
25
27
  module.exports = __toCommonJS(NetworkItem_stories_exports);
26
28
  var import_NetworkItem = require("./NetworkItem");
27
29
  var import_test = require("@storybook/test");
30
+ var import_sharedStoryBook = require("../sharedStoryBook");
28
31
  const meta = {
29
32
  component: import_NetworkItem.NetworkItem,
30
33
  title: "PreLdls/Components/NetworkItem",
31
34
  tags: ["autodocs"],
32
- args: { name: "Bitcoin", id: "bitcoin", ticker: "btc" }
35
+ args: {
36
+ name: "Bitcoin",
37
+ id: "bitcoin",
38
+ ticker: "btc"
39
+ }
33
40
  };
34
41
  var NetworkItem_stories_default = meta;
35
42
  const Default = {};
@@ -40,4 +47,20 @@ const TestNetworkItem = {
40
47
  await (0, import_test.expect)(name).toBeInTheDocument();
41
48
  }
42
49
  };
50
+ const NetworkItemWithLeftElement = {
51
+ args: {
52
+ name: "Bitcoin",
53
+ id: "bitcoin",
54
+ ticker: "btc",
55
+ leftElement: import_sharedStoryBook.leftElement
56
+ }
57
+ };
58
+ const NetworkItemWithRightElement = {
59
+ args: {
60
+ name: "Bitcoin",
61
+ id: "bitcoin",
62
+ ticker: "btc",
63
+ rightElement: (0, import_sharedStoryBook.createRightElement)(true)
64
+ }
65
+ };
43
66
  //# sourceMappingURL=NetworkItem.stories.js.map
package/lib/cjs/pre-ldls/components/NetworkItem/NetworkItem.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/pre-ldls/components/NetworkItem/NetworkItem.stories.tsx"],
4
- "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { NetworkItem } from \"./NetworkItem\";\nimport { expect, within } from \"@storybook/test\";\n\nconst meta: Meta<typeof NetworkItem> = {\n component: NetworkItem,\n title: \"PreLdls/Components/NetworkItem\",\n tags: [\"autodocs\"],\n args: { name: \"Bitcoin\", id: \"bitcoin\", ticker: \"btc\" },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof NetworkItem>;\n\nexport const Default: Story = {};\n\nexport const TestNetworkItem: Story = {\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const name = canvas.getByText(\"Bitcoin\");\n\n await expect(name).toBeInTheDocument();\n },\n};\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,yBAA4B;AAC5B,kBAA+B;AAE/B,MAAM,OAAiC;AAAA,EACrC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM,EAAE,MAAM,WAAW,IAAI,WAAW,QAAQ,MAAM;AACxD;AACA,IAAO,8BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,kBAAyB;AAAA,EACpC,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,OAAO,OAAO,UAAU,SAAS;AAEvC,cAAM,oBAAO,IAAI,EAAE,kBAAkB;AAAA,EACvC;AACF;",
4
+ "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { NetworkItem } from \"./NetworkItem\";\nimport { expect, within } from \"@storybook/test\";\nimport { createRightElement, leftElement } from \"../sharedStoryBook\";\n\nconst meta: Meta<typeof NetworkItem> = {\n component: NetworkItem,\n title: \"PreLdls/Components/NetworkItem\",\n tags: [\"autodocs\"],\n args: {\n name: \"Bitcoin\",\n id: \"bitcoin\",\n ticker: \"btc\",\n },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof NetworkItem>;\n\nexport const Default: Story = {};\n\nexport const TestNetworkItem: Story = {\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const name = canvas.getByText(\"Bitcoin\");\n\n await expect(name).toBeInTheDocument();\n },\n};\n\nexport const NetworkItemWithLeftElement: Story = {\n args: {\n name: \"Bitcoin\",\n id: \"bitcoin\",\n ticker: \"btc\",\n leftElement,\n },\n};\n\nexport const NetworkItemWithRightElement: Story = {\n args: {\n name: \"Bitcoin\",\n id: \"bitcoin\",\n ticker: \"btc\",\n rightElement: createRightElement(true),\n },\n};\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,yBAA4B;AAC5B,kBAA+B;AAC/B,6BAAgD;AAEhD,MAAM,OAAiC;AAAA,EACrC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,QAAQ;AAAA,EACV;AACF;AACA,IAAO,8BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,kBAAyB;AAAA,EACpC,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,OAAO,OAAO,UAAU,SAAS;AAEvC,cAAM,oBAAO,IAAI,EAAE,kBAAkB;AAAA,EACvC;AACF;AAEO,MAAM,6BAAoC;AAAA,EAC/C,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR;AAAA,EACF;AACF;AAEO,MAAM,8BAAqC;AAAA,EAChD,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,kBAAc,2CAAmB,IAAI;AAAA,EACvC;AACF;",
6
6
  "names": []
7
7
  }
package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.js CHANGED
@@ -48,7 +48,8 @@ const VirtualList = ({
48
48
  items,
49
49
  onVisibleItemsScrollEnd,
50
50
  renderItem,
51
- scrollToTop = false
51
+ scrollToTop = false,
52
+ bottomComponent
52
53
  }) => {
53
54
  const parentRef = (0, import_react.useRef)(null);
54
55
  const scrollToFn = (0, import_react.useCallback)(
@@ -130,7 +131,19 @@ const VirtualList = ({
130
131
  }
131
132
  },
132
133
  renderItem(items[virtualRow.index])
133
- ))
134
+ )),
135
+ bottomComponent && /* @__PURE__ */ import_react.default.createElement(
136
+ "div",
137
+ {
138
+ style: {
139
+ position: "absolute",
140
+ top: `${rowVirtualizer.getTotalSize()}px`,
141
+ left: 0,
142
+ width: "100%"
143
+ }
144
+ },
145
+ bottomComponent
146
+ )
134
147
  ),
135
148
  isLoading && (showCustomLoadingComponent ? LoadingComponent : /* @__PURE__ */ import_react.default.createElement(DefaultLoadingComponent, null))
136
149
  );
package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],
4
- "sourcesContent": ["import React, { useEffect, useRef, useCallback } from \"react\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport { Flex, InfiniteLoader } from \"../../../components\";\n\ninterface VirtualItem {\n key: string | number | bigint;\n index: number;\n start: number;\n end: number;\n size: number;\n}\n\n/**\n * Props for the VirtualList component, which efficiently renders large lists\n * by virtualizing DOM nodes to improve performance.\n */\ntype VirtualListProps<T> = {\n /**\n * Height of each item in the list.\n * This is used to calculate the total height of the list and the position of each item.\n */\n itemHeight: number;\n /**\n * Number of extra items to render outside the visible viewport for smoother scrolling.\n * Defaults to 5.\n */\n overscan?: number;\n /**\n * React component or node to display when the list is loading additional items.\n * If not provided, a default loading spinner will be used.\n */\n LoadingComponent?: React.ReactNode;\n /**\n * Indicates whether new items are currently being loaded.\n */\n isLoading?: boolean;\n /**\n * Indicates if there are more items to load.\n */\n hasNextPage?: boolean;\n /**\n * Number of items to check before the end of the list to trigger loading more items.\n * Defaults to 5.\n */\n threshold?: number;\n /**\n * Callback function to be called when the user scrolls to the end of the visible items.\n * This can be used to load more items when the user reaches the end of the list.\n */\n onVisibleItemsScrollEnd?: () => void;\n /**\n * Function to render each item in the list.\n * Receives a single value from the items array as an argument and should return a React node.\n */\n renderItem: (item: T) => React.ReactNode;\n /**\n * The array of items which will be rendered\n */\n items: T[];\n /**\n * When set to true, the list will scroll to the top\n */\n scrollToTop?: boolean;\n};\n\nconst DefaultLoadingComponent = () => (\n <Flex justifyContent=\"center\" alignItems=\"center\" height=\"76px\">\n <InfiniteLoader />\n </Flex>\n);\n\nfunction easeInOutCubic(t: number) {\n return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;\n}\n\nexport const VirtualList = <T,>({\n itemHeight,\n overscan = 5,\n LoadingComponent,\n isLoading,\n hasNextPage = false,\n threshold = 5,\n items,\n onVisibleItemsScrollEnd,\n renderItem,\n scrollToTop = false,\n}: VirtualListProps<T>) => {\n const parentRef = useRef<HTMLDivElement>(null);\n\n const scrollToFn = useCallback(\n (\n offset: number,\n options: { adjustments?: number; behavior?: \"auto\" | \"smooth\" },\n instance: { scrollElement: HTMLElement | null },\n ) => {\n const element = instance.scrollElement;\n if (!element) return;\n\n const duration = options.behavior === \"smooth\" ? 100 : 0;\n\n if (duration === 0) {\n element.scrollTop = offset;\n return;\n }\n\n const startTime = performance.now();\n const startTop = element.scrollTop;\n const distanceToScroll = offset - startTop;\n\n const scrollStep = (currentTime: number) => {\n const elapsed = currentTime - startTime;\n const progress = Math.min(elapsed / duration, 1);\n\n const easedProgress = easeInOutCubic(progress);\n\n element.scrollTop = startTop + distanceToScroll * easedProgress;\n\n if (progress < 1) {\n requestAnimationFrame(scrollStep);\n }\n };\n\n requestAnimationFrame(scrollStep);\n },\n [],\n );\n\n const rowVirtualizer = useVirtualizer({\n count: hasNextPage ? items.length + 1 : items.length,\n overscan,\n getScrollElement: () => parentRef.current,\n estimateSize: () => itemHeight,\n scrollToFn,\n });\n\n const virtualItems = rowVirtualizer.getVirtualItems();\n\n useEffect(() => {\n if (scrollToTop && parentRef.current) {\n scrollToFn(0, { behavior: \"smooth\" }, { scrollElement: parentRef.current });\n }\n }, [scrollToTop, scrollToFn]);\n\n useEffect(() => {\n if (!virtualItems.length) return;\n const lastItem = virtualItems[virtualItems.length - 1];\n\n if (\n lastItem.index >= virtualItems.length - 1 - threshold &&\n hasNextPage &&\n !isLoading &&\n onVisibleItemsScrollEnd\n ) {\n onVisibleItemsScrollEnd();\n }\n }, [hasNextPage, onVisibleItemsScrollEnd, isLoading, threshold, virtualItems]);\n\n const showCustomLoadingComponent = !!LoadingComponent;\n\n return (\n <div\n ref={parentRef}\n style={{ width: \"100%\", height: \"100%\", overflow: \"auto\", scrollbarWidth: \"none\" }}\n >\n <div\n style={{\n height: `${rowVirtualizer.getTotalSize()}px`,\n width: \"100%\",\n position: \"relative\",\n }}\n >\n {rowVirtualizer.getVirtualItems().map((virtualRow: VirtualItem) => (\n <div\n key={virtualRow.index}\n data-index={virtualRow.index}\n ref={rowVirtualizer.measureElement}\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n transform: `translateY(${virtualRow.start}px)`,\n height: `${itemHeight}px`,\n width: \"100%\",\n }}\n >\n {renderItem(items[virtualRow.index])}\n </div>\n ))}\n </div>\n {isLoading && (showCustomLoadingComponent ? LoadingComponent : <DefaultLoadingComponent />)}\n </div>\n );\n};\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import React, { useEffect, useRef, useCallback } from \"react\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport { Flex, InfiniteLoader } from \"../../../components\";\n\ninterface VirtualItem {\n key: string | number | bigint;\n index: number;\n start: number;\n end: number;\n size: number;\n}\n\n/**\n * Props for the VirtualList component, which efficiently renders large lists\n * by virtualizing DOM nodes to improve performance.\n */\ntype VirtualListProps<T> = {\n /**\n * Height of each item in the list.\n * This is used to calculate the total height of the list and the position of each item.\n */\n itemHeight: number;\n /**\n * Number of extra items to render outside the visible viewport for smoother scrolling.\n * Defaults to 5.\n */\n overscan?: number;\n /**\n * React component or node to display when the list is loading additional items.\n * If not provided, a default loading spinner will be used.\n */\n LoadingComponent?: React.ReactNode;\n /**\n * Indicates whether new items are currently being loaded.\n */\n isLoading?: boolean;\n /**\n * Indicates if there are more items to load.\n */\n hasNextPage?: boolean;\n /**\n * Number of items to check before the end of the list to trigger loading more items.\n * Defaults to 5.\n */\n threshold?: number;\n /**\n * Callback function to be called when the user scrolls to the end of the visible items.\n * This can be used to load more items when the user reaches the end of the list.\n */\n onVisibleItemsScrollEnd?: () => void;\n /**\n * Function to render each item in the list.\n * Receives a single value from the items array as an argument and should return a React node.\n */\n renderItem: (item: T) => React.ReactNode;\n /**\n * The array of items which will be rendered\n */\n items: T[];\n /**\n * When set to true, the list will scroll to the top\n */\n scrollToTop?: boolean;\n /**\n * React component or node to display at the bottom of the list, after all items.\n */\n bottomComponent?: React.ReactNode;\n};\n\nconst DefaultLoadingComponent = () => (\n <Flex justifyContent=\"center\" alignItems=\"center\" height=\"76px\">\n <InfiniteLoader />\n </Flex>\n);\n\nfunction easeInOutCubic(t: number) {\n return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;\n}\n\nexport const VirtualList = <T,>({\n itemHeight,\n overscan = 5,\n LoadingComponent,\n isLoading,\n hasNextPage = false,\n threshold = 5,\n items,\n onVisibleItemsScrollEnd,\n renderItem,\n scrollToTop = false,\n bottomComponent,\n}: VirtualListProps<T>) => {\n const parentRef = useRef<HTMLDivElement>(null);\n\n const scrollToFn = useCallback(\n (\n offset: number,\n options: { adjustments?: number; behavior?: \"auto\" | \"smooth\" },\n instance: { scrollElement: HTMLElement | null },\n ) => {\n const element = instance.scrollElement;\n if (!element) return;\n\n const duration = options.behavior === \"smooth\" ? 100 : 0;\n\n if (duration === 0) {\n element.scrollTop = offset;\n return;\n }\n\n const startTime = performance.now();\n const startTop = element.scrollTop;\n const distanceToScroll = offset - startTop;\n\n const scrollStep = (currentTime: number) => {\n const elapsed = currentTime - startTime;\n const progress = Math.min(elapsed / duration, 1);\n\n const easedProgress = easeInOutCubic(progress);\n\n element.scrollTop = startTop + distanceToScroll * easedProgress;\n\n if (progress < 1) {\n requestAnimationFrame(scrollStep);\n }\n };\n\n requestAnimationFrame(scrollStep);\n },\n [],\n );\n\n const rowVirtualizer = useVirtualizer({\n count: hasNextPage ? items.length + 1 : items.length,\n overscan,\n getScrollElement: () => parentRef.current,\n estimateSize: () => itemHeight,\n scrollToFn,\n });\n\n const virtualItems = rowVirtualizer.getVirtualItems();\n\n useEffect(() => {\n if (scrollToTop && parentRef.current) {\n scrollToFn(0, { behavior: \"smooth\" }, { scrollElement: parentRef.current });\n }\n }, [scrollToTop, scrollToFn]);\n\n useEffect(() => {\n if (!virtualItems.length) return;\n const lastItem = virtualItems[virtualItems.length - 1];\n\n if (\n lastItem.index >= virtualItems.length - 1 - threshold &&\n hasNextPage &&\n !isLoading &&\n onVisibleItemsScrollEnd\n ) {\n onVisibleItemsScrollEnd();\n }\n }, [hasNextPage, onVisibleItemsScrollEnd, isLoading, threshold, virtualItems]);\n\n const showCustomLoadingComponent = !!LoadingComponent;\n\n return (\n <div\n ref={parentRef}\n style={{ width: \"100%\", height: \"100%\", overflow: \"auto\", scrollbarWidth: \"none\" }}\n >\n <div\n style={{\n height: `${rowVirtualizer.getTotalSize()}px`,\n width: \"100%\",\n position: \"relative\",\n }}\n >\n {rowVirtualizer.getVirtualItems().map((virtualRow: VirtualItem) => (\n <div\n key={virtualRow.index}\n data-index={virtualRow.index}\n ref={rowVirtualizer.measureElement}\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n transform: `translateY(${virtualRow.start}px)`,\n height: `${itemHeight}px`,\n width: \"100%\",\n }}\n >\n {renderItem(items[virtualRow.index])}\n </div>\n ))}\n {bottomComponent && (\n <div\n style={{\n position: \"absolute\",\n top: `${rowVirtualizer.getTotalSize()}px`,\n left: 0,\n width: \"100%\",\n }}\n >\n {bottomComponent}\n </div>\n )}\n </div>\n {isLoading && (showCustomLoadingComponent ? LoadingComponent : <DefaultLoadingComponent />)}\n </div>\n );\n};\n"],
5
+ "mappings": "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",
6
6
  "names": ["React"]
7
7
  }
package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.stories.js CHANGED
@@ -30,6 +30,7 @@ var VirtualList_stories_exports = {};
30
30
  __export(VirtualList_stories_exports, {
31
31
  Default: () => Default,
32
32
  TestVirtualList: () => TestVirtualList,
33
+ WithCustomLastRow: () => WithCustomLastRow,
33
34
  WithPagination: () => WithPagination,
34
35
  default: () => VirtualList_stories_default
35
36
  });
@@ -117,6 +118,20 @@ const Default = {
117
118
  renderItem: ({ i }) => /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 50, backgroundColor: "lightblue", border: "1px solid black" } }, "Item ", i)
118
119
  }
119
120
  };
121
+ const WithCustomLastRow = {
122
+ render: (args) => {
123
+ const items2 = Array.from({ length: 5 }, (_, i) => i + 1);
124
+ return /* @__PURE__ */ import_react.default.createElement(
125
+ import_VirtualList.VirtualList,
126
+ {
127
+ ...args,
128
+ items: items2,
129
+ renderItem: (item) => /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 50, backgroundColor: "lightgreen", border: "1px solid black" } }, "Item ", item),
130
+ bottomComponent: /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 50, backgroundColor: "lightcoral" } }, "End of List")
131
+ }
132
+ );
133
+ }
134
+ };
120
135
  const WithPagination = {
121
136
  render: (args) => {
122
137
  const [items2, setItems] = (0, import_react.useState)(Array.from({ length: 50 }, (_, i) => i));
package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/pre-ldls/components/VirtualList/VirtualList.stories.tsx"],
4
- "sourcesContent": ["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { VirtualList } from \"./VirtualList\";\nimport { action } from \"@storybook/addon-actions\";\nimport { expect, userEvent, waitFor, within } from \"@storybook/test\";\n\nconst items = Array.from({ length: 50 }, (_, i) => ({ i }));\n\nconst meta: Meta<typeof VirtualList<{ i: number }>> = {\n component: VirtualList,\n decorators: [\n Story => (\n <div style={{ height: \"400px\" }}>\n <Story />\n </div>\n ),\n ],\n title: \"PreLdls/Components/VirtualList\",\n tags: [\"autodocs\"],\n parameters: {\n layout: \"fullscreen\",\n docs: {\n description: {\n component:\n \"A virtualized list component that renders only the visible items in a scrollable container using the `useVirtualizer` hook from `@tanstack/react-virtual`. It supports pagination and custom item rendering.\",\n },\n },\n },\n argTypes: {\n itemHeight: {\n description: \"Height of each item in the list.\",\n },\n overscan: {\n description:\n \"Number of extra items to render outside the visible viewport for smoother scrolling.\",\n table: {\n defaultValue: {\n summary: \"5\",\n },\n },\n },\n LoadingComponent: {\n description:\n \"React component or node to display when the list is loading additional items. If not provided, a default loading spinner will be used.\",\n },\n isLoading: {\n description: \"Indicates whether new items are currently being loaded.\",\n },\n hasNextPage: {\n description:\n \"Indicates if there are more items to load. If true, the list will trigger loading more items when scrolled to the end.\",\n defaultValue: {\n summary: \"false\",\n },\n },\n threshold: {\n description:\n \"Number of items to check before the end of the list to trigger loading more items.\",\n defaultValue: {\n summary: \"5\",\n },\n },\n onVisibleItemsScrollEnd: {\n description:\n \"Callback function to be called when the user scrolls to the end of the visible items. This can be used to load more items when the user reaches the end of the list.\",\n },\n renderItem: {\n description:\n \"Function to render each item in the list. Receives the index of the item as an argument and should return a React node.\",\n },\n scrollToTop: {\n description:\n \"When set to true, the list will scroll to the top. This is useful when the items change and you want to reset the scroll position.\",\n },\n },\n args: {\n itemHeight: 64,\n LoadingComponent: undefined,\n isLoading: false,\n overscan: 5,\n hasNextPage: false,\n threshold: 5,\n onVisibleItemsScrollEnd: () => {},\n items,\n renderItem: ({ i }: { i: number }) => <h1 tabIndex={i}>Item #{i}</h1>,\n scrollToTop: false,\n },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof VirtualList<{ i: number }>>;\n\nexport const Default: Story = {\n args: {\n itemHeight: 50,\n overscan: 5,\n items,\n renderItem: ({ i }: { i: number }) => (\n <div style={{ height: 50, backgroundColor: \"lightblue\", border: \"1px solid black\" }}>\n Item {i}\n </div>\n ),\n },\n};\n\nexport const WithPagination: Story = {\n render: args => {\n const [items, setItems] = useState(Array.from({ length: 50 }, (_, i) => i));\n const [isFetching, setIsFetching] = useState(false);\n\n const handleFetchNextPage = async () => {\n action(\"fetchNextPage\")();\n if (isFetching) return;\n setIsFetching(true);\n await new Promise(resolve => setTimeout(resolve, 1000));\n setItems(prev => [...prev, ...Array.from({ length: 50 }, (_, i) => prev.length + i)]);\n setIsFetching(false);\n };\n\n return (\n <VirtualList\n {...args}\n isLoading={isFetching}\n onVisibleItemsScrollEnd={handleFetchNextPage}\n hasNextPage={true}\n items={items}\n renderItem={item => (\n <div style={{ height: 50, backgroundColor: \"lightgreen\", border: \"1px solid black\" }}>\n Item {item}\n </div>\n )}\n />\n );\n },\n args: {\n itemHeight: 50,\n overscan: 5,\n hasNextPage: true,\n isLoading: false,\n },\n};\n\nexport const TestVirtualList: Story = {\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const visibleItems = canvas.getAllByText(/Item #/i);\n const firstVisibleItem = visibleItems[0];\n const lastVisibleItem = visibleItems[visibleItems.length - 1];\n\n // need to add 5 due to the overscan set to 5 (it renders 5 items before and after the visible items)\n await expect(visibleItems.length).toBeLessThanOrEqual(12);\n\n await expect(firstVisibleItem).toBeInTheDocument();\n\n await userEvent.pointer([\n { keys: \"[TouchA>]\", target: lastVisibleItem },\n { target: firstVisibleItem },\n { keys: \"[/TouchA]\" },\n ]);\n\n await waitFor(() => expect(firstVisibleItem).not.toBeInTheDocument());\n },\n};\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { VirtualList } from \"./VirtualList\";\nimport { action } from \"@storybook/addon-actions\";\nimport { expect, userEvent, waitFor, within } from \"@storybook/test\";\n\nconst items = Array.from({ length: 50 }, (_, i) => ({ i }));\n\nconst meta: Meta<typeof VirtualList<{ i: number }>> = {\n component: VirtualList,\n decorators: [\n Story => (\n <div style={{ height: \"400px\" }}>\n <Story />\n </div>\n ),\n ],\n title: \"PreLdls/Components/VirtualList\",\n tags: [\"autodocs\"],\n parameters: {\n layout: \"fullscreen\",\n docs: {\n description: {\n component:\n \"A virtualized list component that renders only the visible items in a scrollable container using the `useVirtualizer` hook from `@tanstack/react-virtual`. It supports pagination and custom item rendering.\",\n },\n },\n },\n argTypes: {\n itemHeight: {\n description: \"Height of each item in the list.\",\n },\n overscan: {\n description:\n \"Number of extra items to render outside the visible viewport for smoother scrolling.\",\n table: {\n defaultValue: {\n summary: \"5\",\n },\n },\n },\n LoadingComponent: {\n description:\n \"React component or node to display when the list is loading additional items. If not provided, a default loading spinner will be used.\",\n },\n isLoading: {\n description: \"Indicates whether new items are currently being loaded.\",\n },\n hasNextPage: {\n description:\n \"Indicates if there are more items to load. If true, the list will trigger loading more items when scrolled to the end.\",\n defaultValue: {\n summary: \"false\",\n },\n },\n threshold: {\n description:\n \"Number of items to check before the end of the list to trigger loading more items.\",\n defaultValue: {\n summary: \"5\",\n },\n },\n onVisibleItemsScrollEnd: {\n description:\n \"Callback function to be called when the user scrolls to the end of the visible items. This can be used to load more items when the user reaches the end of the list.\",\n },\n renderItem: {\n description:\n \"Function to render each item in the list. Receives the index of the item as an argument and should return a React node.\",\n },\n scrollToTop: {\n description:\n \"When set to true, the list will scroll to the top. This is useful when the items change and you want to reset the scroll position.\",\n },\n },\n args: {\n itemHeight: 64,\n LoadingComponent: undefined,\n isLoading: false,\n overscan: 5,\n hasNextPage: false,\n threshold: 5,\n onVisibleItemsScrollEnd: () => {},\n items,\n renderItem: ({ i }: { i: number }) => <h1 tabIndex={i}>Item #{i}</h1>,\n scrollToTop: false,\n },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof VirtualList<{ i: number }>>;\n\nexport const Default: Story = {\n args: {\n itemHeight: 50,\n overscan: 5,\n items,\n renderItem: ({ i }: { i: number }) => (\n <div style={{ height: 50, backgroundColor: \"lightblue\", border: \"1px solid black\" }}>\n Item {i}\n </div>\n ),\n },\n};\n\nexport const WithCustomLastRow: Story = {\n render: args => {\n const items = Array.from({ length: 5 }, (_, i) => i + 1);\n\n return (\n <VirtualList\n {...args}\n items={items}\n renderItem={item => (\n <div style={{ height: 50, backgroundColor: \"lightgreen\", border: \"1px solid black\" }}>\n Item {item}\n </div>\n )}\n bottomComponent={\n <div style={{ height: 50, backgroundColor: \"lightcoral\" }}>End of List</div>\n }\n />\n );\n },\n};\nexport const WithPagination: Story = {\n render: args => {\n const [items, setItems] = useState(Array.from({ length: 50 }, (_, i) => i));\n const [isFetching, setIsFetching] = useState(false);\n\n const handleFetchNextPage = async () => {\n action(\"fetchNextPage\")();\n if (isFetching) return;\n setIsFetching(true);\n await new Promise(resolve => setTimeout(resolve, 1000));\n setItems(prev => [...prev, ...Array.from({ length: 50 }, (_, i) => prev.length + i)]);\n setIsFetching(false);\n };\n\n return (\n <VirtualList\n {...args}\n isLoading={isFetching}\n onVisibleItemsScrollEnd={handleFetchNextPage}\n hasNextPage={true}\n items={items}\n renderItem={item => (\n <div style={{ height: 50, backgroundColor: \"lightgreen\", border: \"1px solid black\" }}>\n Item {item}\n </div>\n )}\n />\n );\n },\n args: {\n itemHeight: 50,\n overscan: 5,\n hasNextPage: true,\n isLoading: false,\n },\n};\n\nexport const TestVirtualList: Story = {\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const visibleItems = canvas.getAllByText(/Item #/i);\n const firstVisibleItem = visibleItems[0];\n const lastVisibleItem = visibleItems[visibleItems.length - 1];\n\n // need to add 5 due to the overscan set to 5 (it renders 5 items before and after the visible items)\n await expect(visibleItems.length).toBeLessThanOrEqual(12);\n\n await expect(firstVisibleItem).toBeInTheDocument();\n\n await userEvent.pointer([\n { keys: \"[TouchA>]\", target: lastVisibleItem },\n { target: firstVisibleItem },\n { keys: \"[/TouchA]\" },\n ]);\n\n await waitFor(() => expect(firstVisibleItem).not.toBeInTheDocument());\n },\n};\n"],
5
+ "mappings": "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",
6
6
  "names": ["React", "items"]
7
7
  }
package/lib/pre-ldls/components/AccountList/AccountList.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from "react";
2
2
  import { Account } from "../AccountItem/AccountItem";
3
- export declare const AccountList: ({ accounts, onClick, }: {
3
+ export declare const AccountList: ({ accounts, onClick, bottomComponent, }: {
4
4
  accounts: Account[];
5
5
  onClick: (networkId: string) => void;
6
+ bottomComponent?: React.ReactNode;
6
7
  }) => React.JSX.Element;
7
8
  //# sourceMappingURL=AccountList.d.ts.map
package/lib/pre-ldls/components/AccountList/AccountList.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AccountList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountList/AccountList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAe,MAAM,4BAA4B,CAAC;AAGlE,eAAO,MAAM,WAAW;cAIZ,OAAO,EAAE;yBACE,MAAM,KAAK,IAAI;uBAQrC,CAAC"}
1
+ {"version":3,"file":"AccountList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountList/AccountList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAe,MAAM,4BAA4B,CAAC;AAGlE,eAAO,MAAM,WAAW;cAKZ,OAAO,EAAE;yBACE,MAAM,KAAK,IAAI;sBAClB,MAAM,SAAS;uBAelC,CAAC"}
package/lib/pre-ldls/components/AccountList/AccountList.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import React, { useCallback } from "react";
2
2
  import { AccountItem } from "../AccountItem/AccountItem";
3
3
  import { VirtualList } from "../VirtualList/VirtualList";
4
- export const AccountList = ({ accounts, onClick, }) => {
4
+ export const AccountList = ({ accounts, onClick, bottomComponent, }) => {
5
5
  const renderAccountItem = useCallback((account) => React.createElement(AccountItem, { onClick: () => onClick(account.id), account: account }), [onClick]);
6
- return React.createElement(VirtualList, { items: accounts, itemHeight: 70, renderItem: renderAccountItem });
6
+ return (React.createElement(VirtualList, { items: accounts, itemHeight: 70, bottomComponent: bottomComponent, renderItem: renderAccountItem }));
7
7
  };
8
8
  //# sourceMappingURL=AccountList.js.map
package/lib/pre-ldls/components/AccountList/AccountList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AccountList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountList/AccountList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAW,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,OAAO,GAIR,EAAE,EAAE;IACH,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,OAAgB,EAAE,EAAE,CAAC,oBAAC,WAAW,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,GAAI,EAC3F,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,OAAO,oBAAC,WAAW,IAAC,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,iBAAiB,GAAI,CAAC;AACzF,CAAC,CAAC"}
1
+ {"version":3,"file":"AccountList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountList/AccountList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAW,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,OAAO,EACP,eAAe,GAKhB,EAAE,EAAE;IACH,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,OAAgB,EAAE,EAAE,CAAC,oBAAC,WAAW,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,GAAI,EAC3F,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,IACV,KAAK,EAAE,QAAQ,EACf,UAAU,EAAE,EAAE,EACd,eAAe,EAAE,eAAe,EAChC,UAAU,EAAE,iBAAiB,GAC7B,CACH,CAAC;AACJ,CAAC,CAAC"}
package/lib/pre-ldls/components/NetworkItem/NetworkItem.d.ts CHANGED
@@ -3,10 +3,12 @@ export type Network = {
3
3
  name: string;
4
4
  id: string;
5
5
  ticker: string;
6
+ leftElement?: React.ReactNode;
7
+ rightElement?: React.ReactNode;
6
8
  };
7
9
  type NetworkItemProps = Network & {
8
10
  onClick: () => void;
9
11
  };
10
- export declare const NetworkItem: ({ name, onClick, id, ticker }: NetworkItemProps) => React.JSX.Element;
12
+ export declare const NetworkItem: ({ name, onClick, id, ticker, leftElement, rightElement, }: NetworkItemProps) => React.JSX.Element;
11
13
  export {};
12
14
  //# sourceMappingURL=NetworkItem.d.ts.map
package/lib/pre-ldls/components/NetworkItem/NetworkItem.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NetworkItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkItem/NetworkItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,OAAO,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnE,KAAK,gBAAgB,GAAG,OAAO,GAAG;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAiCF,eAAO,MAAM,WAAW,kCAAmC,gBAAgB,sBAe1E,CAAC"}
1
+ {"version":3,"file":"NetworkItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkItem/NetworkItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,KAAK,gBAAgB,GAAG,OAAO,GAAG;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAyCF,eAAO,MAAM,WAAW,8DAOrB,gBAAgB,sBAiBlB,CAAC"}
package/lib/pre-ldls/components/NetworkItem/NetworkItem.js CHANGED
@@ -4,7 +4,8 @@ import { withTokens } from "../../libs";
4
4
  import { Text } from "../../../components";
5
5
  import { CryptoIcon } from "../CryptoIcon/CryptoIcon";
6
6
  const Wrapper = styled.div `
7
- ${withTokens("spacing-xxs", "margin-s", "radius-s", "colors-content-default-default", "colors-surface-transparent-hover", "colors-surface-transparent-pressed")}
7
+ ${withTokens("spacing-xxs", "margin-s", "radius-s", "colors-content-default-default", "colors-content-subdued-default-default", // used by leftElement child
8
+ "colors-surface-transparent-hover", "colors-surface-transparent-pressed")}
8
9
  display: flex;
9
10
  padding: var(--spacing-xxs);
10
11
  cursor: pointer;
@@ -24,11 +25,19 @@ const InfoWrapper = styled.div `
24
25
  flex-direction: column;
25
26
  justify-content: center;
26
27
  margin-left: var(--margin-s);
28
+ flex: 1;
27
29
  `;
28
- export const NetworkItem = ({ name, onClick, id, ticker }) => {
30
+ const LeftElementWrapper = styled.div `
31
+ display: flex;
32
+ align-items: center;
33
+ gap: 4px;
34
+ `;
35
+ export const NetworkItem = ({ name, onClick, id, ticker, leftElement, rightElement, }) => {
29
36
  return (React.createElement(Wrapper, { onClick: onClick },
30
37
  React.createElement(CryptoIcon, { size: "48px", ledgerId: id, ticker: ticker }),
31
38
  React.createElement(InfoWrapper, null,
32
- React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)" }, name))));
39
+ React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)" }, name),
40
+ React.createElement(LeftElementWrapper, null, leftElement)),
41
+ rightElement));
33
42
  };
34
43
  //# sourceMappingURL=NetworkItem.js.map
package/lib/pre-ldls/components/NetworkItem/NetworkItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NetworkItem.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkItem/NetworkItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAQtD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,aAAa,EACb,UAAU,EACV,UAAU,EACV,gCAAgC,EAChC,kCAAkC,EAClC,oCAAoC,CACrC;;;;;;;;;;;;;;CAcF,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK7B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,EAAoB,EAAE,EAAE;IAC7E,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO;QACvB,oBAAC,UAAU,IAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI;QACxD,oBAAC,WAAW;YACV,oBAAC,IAAI,IACH,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,uCAAuC,IAE5C,IAAI,CACA,CACK,CACN,CACX,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"NetworkItem.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkItem/NetworkItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AActD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,aAAa,EACb,UAAU,EACV,UAAU,EACV,gCAAgC,EAChC,wCAAwC,EAAE,4BAA4B;AACtE,kCAAkC,EAClC,oCAAoC,CACrC;;;;;;;;;;;;;;CAcF,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM7B,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIpC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,IAAI,EACJ,OAAO,EACP,EAAE,EACF,MAAM,EACN,WAAW,EACX,YAAY,GACK,EAAE,EAAE;IACrB,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO;QACvB,oBAAC,UAAU,IAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI;QACxD,oBAAC,WAAW;YACV,oBAAC,IAAI,IACH,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,uCAAuC,IAE5C,IAAI,CACA;YACP,oBAAC,kBAAkB,QAAE,WAAW,CAAsB,CAC1C;QACb,YAAY,CACL,CACX,CAAC;AACJ,CAAC,CAAC"}
package/lib/pre-ldls/components/VirtualList/VirtualList.d.ts CHANGED
@@ -50,7 +50,11 @@ type VirtualListProps<T> = {
50
50
  * When set to true, the list will scroll to the top
51
51
  */
52
52
  scrollToTop?: boolean;
53
+ /**
54
+ * React component or node to display at the bottom of the list, after all items.
55
+ */
56
+ bottomComponent?: React.ReactNode;
53
57
  };
54
- export declare const VirtualList: <T>({ itemHeight, overscan, LoadingComponent, isLoading, hasNextPage, threshold, items, onVisibleItemsScrollEnd, renderItem, scrollToTop, }: VirtualListProps<T>) => React.JSX.Element;
58
+ export declare const VirtualList: <T>({ itemHeight, overscan, LoadingComponent, isLoading, hasNextPage, threshold, items, onVisibleItemsScrollEnd, renderItem, scrollToTop, bottomComponent, }: VirtualListProps<T>) => React.JSX.Element;
55
59
  export {};
56
60
  //# sourceMappingURL=VirtualList.d.ts.map
package/lib/pre-ldls/components/VirtualList/VirtualList.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"VirtualList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAY9D;;;GAGG;AACH,KAAK,gBAAgB,CAAC,CAAC,IAAI;IACzB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;IACrC;;;OAGG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACzC;;OAEG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAYF,eAAO,MAAM,WAAW,+IAWrB,iBAAiB,CAAC,CAAC,sBA0GrB,CAAC"}
1
+ {"version":3,"file":"VirtualList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAY9D;;;GAGG;AACH,KAAK,gBAAgB,CAAC,CAAC,IAAI;IACzB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;IACrC;;;OAGG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACzC;;OAEG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC,CAAC;AAYF,eAAO,MAAM,WAAW,gKAYrB,iBAAiB,CAAC,CAAC,sBAsHrB,CAAC"}
package/lib/pre-ldls/components/VirtualList/VirtualList.js CHANGED
@@ -6,7 +6,7 @@ const DefaultLoadingComponent = () => (React.createElement(Flex, { justifyConten
6
6
  function easeInOutCubic(t) {
7
7
  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
8
8
  }
9
- export const VirtualList = ({ itemHeight, overscan = 5, LoadingComponent, isLoading, hasNextPage = false, threshold = 5, items, onVisibleItemsScrollEnd, renderItem, scrollToTop = false, }) => {
9
+ export const VirtualList = ({ itemHeight, overscan = 5, LoadingComponent, isLoading, hasNextPage = false, threshold = 5, items, onVisibleItemsScrollEnd, renderItem, scrollToTop = false, bottomComponent, }) => {
10
10
  const parentRef = useRef(null);
11
11
  const scrollToFn = useCallback((offset, options, instance) => {
12
12
  const element = instance.scrollElement;
@@ -61,14 +61,21 @@ export const VirtualList = ({ itemHeight, overscan = 5, LoadingComponent, isLoad
61
61
  height: `${rowVirtualizer.getTotalSize()}px`,
62
62
  width: "100%",
63
63
  position: "relative",
64
- } }, rowVirtualizer.getVirtualItems().map((virtualRow) => (React.createElement("div", { key: virtualRow.index, "data-index": virtualRow.index, ref: rowVirtualizer.measureElement, style: {
65
- position: "absolute",
66
- top: 0,
67
- left: 0,
68
- transform: `translateY(${virtualRow.start}px)`,
69
- height: `${itemHeight}px`,
70
- width: "100%",
71
- } }, renderItem(items[virtualRow.index]))))),
64
+ } },
65
+ rowVirtualizer.getVirtualItems().map((virtualRow) => (React.createElement("div", { key: virtualRow.index, "data-index": virtualRow.index, ref: rowVirtualizer.measureElement, style: {
66
+ position: "absolute",
67
+ top: 0,
68
+ left: 0,
69
+ transform: `translateY(${virtualRow.start}px)`,
70
+ height: `${itemHeight}px`,
71
+ width: "100%",
72
+ } }, renderItem(items[virtualRow.index])))),
73
+ bottomComponent && (React.createElement("div", { style: {
74
+ position: "absolute",
75
+ top: `${rowVirtualizer.getTotalSize()}px`,
76
+ left: 0,
77
+ width: "100%",
78
+ } }, bottomComponent))),
72
79
  isLoading && (showCustomLoadingComponent ? LoadingComponent : React.createElement(DefaultLoadingComponent, null))));
73
80
  };
74
81
  //# sourceMappingURL=VirtualList.js.map
package/lib/pre-ldls/components/VirtualList/VirtualList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"VirtualList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"VirtualList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ledgerhq/react-ui",
3
- "version": "0.29.0-nightly.2",
3
+ "version": "0.29.0-nightly.3",
4
4
  "description": "Ledger Live - Desktop UI",
5
5
  "author": "Ledger Live Team <team-live@ledger.fr>",
6
6
  "repository": {