@rango-dev/ui 0.27.1-next.2 → 0.27.1-next.3

package/dist/widget/ui/src/components/TokenList/TokenList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TokenList/TokenList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAG9C,OAAO,KAA0C,MAAM,OAAO,CAAC;AAM/D,MAAM,WAAW,eAAgB,SAAQ,KAAK;IAC5C,OAAO,CAAC,EAAE;QACR,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAGD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAClC,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC;CACxB;AACD;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,qBAyEzC"}
+{"version":3,"file":"TokenList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TokenList/TokenList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAE9C,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,MAAM,WAAW,eAAgB,SAAQ,KAAK;IAC5C,OAAO,CAAC,EAAE;QACR,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAGD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAClC,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC;CACxB;AACD;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,qBAkDzC"}

package/dist/widget/ui/src/components/VirtualizedList/VirtualizedList.d.ts

@@ -1,5 +1,3 @@
-import type { PropTypes } from './VirtualizedList.types';
-import type { PropsWithChildren } from 'react';
-import React from 'react';
-export declare function VirtualizedList(props: PropsWithChildren<PropTypes>): React.JSX.Element;
+import { GroupedVirtuoso as GroupedVirtualizedList, Virtuoso as VirtualizedList } from 'react-virtuoso';
+export { VirtualizedList, GroupedVirtualizedList };
 //# sourceMappingURL=VirtualizedList.d.ts.map

package/dist/widget/ui/src/components/VirtualizedList/VirtualizedList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/VirtualizedList/VirtualizedList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,wBAAgB,eAAe,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAsClE"}
+{"version":3,"file":"VirtualizedList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/VirtualizedList/VirtualizedList.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,IAAI,sBAAsB,EACzC,QAAQ,IAAI,eAAe,EAC5B,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,CAAC"}

package/dist/widget/ui/src/components/VirtualizedList/index.d.ts

@@ -1,2 +1,2 @@
-export { VirtualizedList } from './VirtualizedList';
+export { VirtualizedList, GroupedVirtualizedList } from './VirtualizedList';
 //# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/components/VirtualizedList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/VirtualizedList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/VirtualizedList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.27.1-next.2",
+  "version": "0.27.1-next.3",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -45,9 +45,6 @@
     "@svgr/cli": "^8.0.1",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
-    "@types/react-virtualized-auto-sizer": "^1.0.1",
-    "@types/react-window": "^1.8.5",
-    "@types/react-window-infinite-loader": "^1.0.6",
     "babel-loader": "^9.1.0",
     "husky": "^8.0.2",
     "react": "^18.2.0",
@@ -69,9 +66,7 @@
     "@stitches/react": "^1.2.8",
     "rango-sdk": "^0.1.44",
     "rango-types": "^0.1.57",
-    "react-virtualized-auto-sizer": "^1.0.7",
-    "react-window": "^1.8.8",
-    "react-window-infinite-loader": "^1.0.8",
+    "react-virtuoso": "^4.6.2",
     "rgb-hex": "^4.0.1"
   },
   "publishConfig": {

package/src/components/TokenList/TokenList.tsx

@@ -1,10 +1,9 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { Asset, Token } from 'rango-sdk';
-import type { CommonProps } from 'react-window';
 
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
-import { VirtualizedList } from '../VirtualizedList/VirtualizedList';
+import { VirtualizedList } from '../VirtualizedList';
 
 import { TokenItem } from './TokenItem';
 
@@ -64,40 +63,17 @@ export function TokenList(props: PropTypes) {
     setHasNextPage(list.length > tokens.length);
   }, [tokens.length]);
 
-  // eslint-disable-next-line react/display-name
-  const innerElementType: React.FC<CommonProps> = forwardRef(
-    // eslint-disable-next-line destructuring/in-params, react/prop-types
-    ({ style, ...rest }, ref) => {
-      return (
-        <div
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          ref={ref as any}
-          style={{
-            ...style,
-            // eslint-disable-next-line react/prop-types
-            height: `${parseFloat(style?.height as string) + 8 * 2}px`,
-          }}
-          {...rest}
-        />
-      );
-    }
-  );
-
   return (
     <VirtualizedList
-      Item={({ index, style }) => (
+      itemContent={(index) => (
         <TokenItem
           token={tokens[index]}
-          style={style}
           onClick={changeSelected}
           selected={isSelected(tokens[index])}
         />
       )}
-      hasNextPage={hasNextPage}
-      itemCount={tokens.length}
-      loadNextPage={loadNextPage}
-      innerElementType={innerElementType}
-      size={56}
+      totalCount={tokens.length}
+      endReached={hasNextPage ? loadNextPage : undefined}
     />
   );
 }

package/src/components/VirtualizedList/VirtualizedList.tsx

@@ -1,48 +1,6 @@
-import type { PropTypes } from './VirtualizedList.types';
-import type { CSSProperties } from '@stitches/react';
-import type { PropsWithChildren } from 'react';
+import {
+  GroupedVirtuoso as GroupedVirtualizedList,
+  Virtuoso as VirtualizedList,
+} from 'react-virtuoso';
 
-import React from 'react';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import { VariableSizeList as List } from 'react-window';
-import InfiniteLoader from 'react-window-infinite-loader';
-
-export function VirtualizedList(props: PropsWithChildren<PropTypes>) {
-  // TODO:  react/prop-types problem
-  // eslint-disable-next-line react/prop-types
-  const { itemCount, hasNextPage, loadNextPage, Item, innerElementType, size } =
-    props;
-
-  const isItemLoaded = (index: number) => !hasNextPage || index < itemCount;
-
-  return (
-    <AutoSizer>
-      {({ width, height }: { width: number; height: number }) => (
-        <InfiniteLoader
-          isItemLoaded={isItemLoaded}
-          itemCount={hasNextPage ? itemCount + 1 : itemCount}
-          loadMoreItems={loadNextPage}
-          threshold={1}>
-          {({ onItemsRendered, ref }) => {
-            return (
-              <List
-                innerElementType={innerElementType}
-                ref={ref}
-                itemSize={() => size}
-                itemCount={itemCount}
-                height={height || 0}
-                width={width || 0}
-                onItemsRendered={onItemsRendered}>
-                {({ index, style }) =>
-                  isItemLoaded(index) ? (
-                    <Item index={index} style={style as CSSProperties} />
-                  ) : null
-                }
-              </List>
-            );
-          }}
-        </InfiniteLoader>
-      )}
-    </AutoSizer>
-  );
-}
+export { VirtualizedList, GroupedVirtualizedList };

package/src/components/VirtualizedList/index.ts

@@ -1 +1 @@
-export { VirtualizedList } from './VirtualizedList';
+export { VirtualizedList, GroupedVirtualizedList } from './VirtualizedList';

package/dist/widget/ui/src/components/VirtualizedList/VirtualizedList.types.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import type { CSSProperties } from '@stitches/react';
-import type { ReactElementType } from 'react-window';
-export type VirtualizedListItem = ({ index, style, }: {
-    index: number;
-    style: CSSProperties | undefined;
-}) => JSX.Element | null;
-export type PropTypes = {
-    itemCount: number;
-    hasNextPage: boolean;
-    loadNextPage: () => void;
-    Item: VirtualizedListItem;
-    innerElementType: ReactElementType | undefined;
-    size: number;
-};
-//# sourceMappingURL=VirtualizedList.types.d.ts.map

package/dist/widget/ui/src/components/VirtualizedList/VirtualizedList.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"VirtualizedList.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/VirtualizedList/VirtualizedList.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAErD,MAAM,MAAM,mBAAmB,GAAG,CAAC,EACjC,KAAK,EACL,KAAK,GACN,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,GAAG,SAAS,CAAC;CAClC,KAAK,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;AAEzB,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,gBAAgB,EAAE,gBAAgB,GAAG,SAAS,CAAC;IAC/C,IAAI,EAAE,MAAM,CAAC;CACd,CAAC"}

package/src/components/VirtualizedList/VirtualizedList.types.ts

@@ -1,19 +0,0 @@
-import type { CSSProperties } from '@stitches/react';
-import type { ReactElementType } from 'react-window';
-
-export type VirtualizedListItem = ({
-  index,
-  style,
-}: {
-  index: number;
-  style: CSSProperties | undefined;
-}) => JSX.Element | null;
-
-export type PropTypes = {
-  itemCount: number;
-  hasNextPage: boolean;
-  loadNextPage: () => void;
-  Item: VirtualizedListItem;
-  innerElementType: ReactElementType | undefined;
-  size: number;
-};