@elliemae/ds-virtual-list 3.14.0-next.1 → 3.14.0-next.3

package/dist/cjs/VirtualList.js

@@ -32,15 +32,11 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_List = require("./parts/List");
-var import_props = require("./props");
+var import_react_desc_prop_types = require("./react-desc-prop-types");
 var import_DSVirtualListDefinitions = require("./DSVirtualListDefinitions");
-const DSVirtualList = (props) => {
-  const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_props.defaultProps);
-  (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_props.DSVirtualListSchema, import_DSVirtualListDefinitions.DSVirtualListName);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_List.List, { ...propsWithDefault });
-};
-DSVirtualList.propTypes = import_props.DSVirtualListSchema;
+const DSVirtualList = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_List.List, { ...props });
+DSVirtualList.propTypes = import_react_desc_prop_types.DSVirtualListPropTypes;
 DSVirtualList.displayName = import_DSVirtualListDefinitions.DSVirtualListName;
 const DSVirtualListWithSchema = (0, import_ds_utilities.describe)(DSVirtualList).description("DSVirtualList");
-DSVirtualListWithSchema.propTypes = import_props.DSVirtualListSchema;
+DSVirtualListWithSchema.propTypes = import_react_desc_prop_types.DSVirtualListPropTypes;
 //# sourceMappingURL=VirtualList.js.map

package/dist/cjs/VirtualList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/VirtualList.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from '@elliemae/ds-utilities';\nimport { List } from './parts/List';\nimport { DSVirtualListSchema, defaultProps } from './props';\nimport type { DSVirtualListProps } from './index.d';\nimport { DSVirtualListName } from './DSVirtualListDefinitions';\n\nconst DSVirtualList: React.ComponentType<DSVirtualListProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSVirtualListSchema, DSVirtualListName);\n\n  return <List {...propsWithDefault} />;\n};\n\nDSVirtualList.propTypes = DSVirtualListSchema;\nDSVirtualList.displayName = DSVirtualListName;\nconst DSVirtualListWithSchema = describe(DSVirtualList).description('DSVirtualList');\nDSVirtualListWithSchema.propTypes = DSVirtualListSchema;\n\nexport { DSVirtualList, DSVirtualListWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWd;AAVT,0BAAuF;AACvF,kBAAqB;AACrB,mBAAkD;AAElD,sCAAkC;AAElC,MAAM,gBAAyD,CAAC,UAAU;AACxE,QAAM,uBAAmB,kDAA6B,OAAO,yBAAY;AACzE,0DAA+B,kBAAkB,kCAAqB,iDAAiB;AAEvF,SAAO,4CAAC,oBAAM,GAAG,kBAAkB;AACrC;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,8BAA0B,8BAAS,aAAa,EAAE,YAAY,eAAe;AACnF,wBAAwB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { List } from './parts/List';\nimport { DSVirtualListPropTypes, type DSVirtualListT } from './react-desc-prop-types';\nimport { DSVirtualListName } from './DSVirtualListDefinitions';\n\n// we are not using a context nor zustand so all the logic is handled in List...\nconst DSVirtualList = (props: DSVirtualListT.Props) => <List {...props} />;\n\nDSVirtualList.propTypes = DSVirtualListPropTypes;\nDSVirtualList.displayName = DSVirtualListName;\nconst DSVirtualListWithSchema = describe(DSVirtualList).description('DSVirtualList');\nDSVirtualListWithSchema.propTypes = DSVirtualListPropTypes;\n\nexport { DSVirtualList, DSVirtualListWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADOgC;AANvD,0BAAyB;AACzB,kBAAqB;AACrB,mCAA4D;AAC5D,sCAAkC;AAGlC,MAAM,gBAAgB,CAAC,UAAgC,4CAAC,oBAAM,GAAG,OAAO;AAExE,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,8BAA0B,8BAAS,aAAa,EAAE,YAAY,eAAe;AACnF,wBAAwB,YAAY;",
   "names": []
 }

package/dist/cjs/{styled.js → hooks/useValidateProps.js}

@@ -22,31 +22,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var styled_exports = {};
-__export(styled_exports, {
-  StyledContainerContentList: () => StyledContainerContentList,
-  StyledVirtualList: () => StyledVirtualList,
-  VirtualItemStyled: () => VirtualItemStyled
+var useValidateProps_exports = {};
+__export(useValidateProps_exports, {
+  useValidateProps: () => useValidateProps
 });
-module.exports = __toCommonJS(styled_exports);
+module.exports = __toCommonJS(useValidateProps_exports);
 var React = __toESM(require("react"));
-var import_ds_system = require("@elliemae/ds-system");
-const StyledContainerContentList = import_ds_system.styled.div`
-  width: 100%;
-  height: 100%;
-  padding-bottom: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-`;
-const StyledVirtualList = import_ds_system.styled.div`
-  width: 100%;
-  height: ${(props) => props.height};
-  position: relative;
-`;
-const VirtualItemStyled = import_ds_system.styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-`;
-//# sourceMappingURL=styled.js.map
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_DSVirtualListDefinitions = require("../DSVirtualListDefinitions");
+const useValidateProps = (props, propTypes) => {
+  (0, import_ds_utilities.useValidateTypescriptPropTypes)(props, propTypes, import_DSVirtualListDefinitions.DSVirtualListName);
+};
+//# sourceMappingURL=useValidateProps.js.map

package/dist/cjs/hooks/useValidateProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useValidateProps.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { WeakValidationMap } from 'react';\nimport { type DSVirtualListT } from '../react-desc-prop-types';\nimport { DSVirtualListName } from '../DSVirtualListDefinitions';\n\nexport const useValidateProps = (props: DSVirtualListT.InternalProps, propTypes: WeakValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSVirtualListName);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA+C;AAG/C,sCAAkC;AAE3B,MAAM,mBAAmB,CAAC,OAAqC,cAAgD;AAEpH,0DAA+B,OAAO,WAAW,iDAAiB;AACpE;",
+  "names": []
+}

package/dist/cjs/hooks/useVirtualList.js

@@ -24,34 +24,49 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useVirtualList_exports = {};
 __export(useVirtualList_exports, {
-  useVirtualList: () => useVirtualList
+  useVirtualListV3: () => useVirtualListV3
 });
 module.exports = __toCommonJS(useVirtualList_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_react_virtual = require("react-virtual");
-const useVirtualList = (config) => {
-  const { children, actionRef } = config;
-  const parentRef = import_react.default.useRef();
+var import_uid = require("uid");
+var import_react_virtual = require("@tanstack/react-virtual");
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_react_desc_prop_types = require("../react-desc-prop-types");
+var import_useValidateProps = require("./useValidateProps");
+const estimateSize = () => 50;
+const useVirtualListV3 = (propsFromUser) => {
+  const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(propsFromUser, import_react_desc_prop_types.defaultProps);
+  (0, import_useValidateProps.useValidateProps)(propsWithDefault, import_react_desc_prop_types.DSVirtualListPropTypes);
+  const { children, actionRef } = propsWithDefault;
+  const parentRef = import_react.default.useRef(null);
   const filteredChildren = import_react.default.useMemo(
-    () => import_react.default.Children.toArray(children).filter((child) => child),
+    () => import_react.default.Children.toArray(children).filter((child) => child !== void 0 && child !== null),
     [children]
   );
-  const useVirtualHelpers = (0, import_react_virtual.useVirtual)({
-    size: filteredChildren.length,
-    parentRef,
-    overscan: 15
+  const useVirtualHelpers = (0, import_react_virtual.useVirtualizer)({
+    count: filteredChildren.length,
+    getScrollElement: () => parentRef.current,
+    overscan: 15,
+    estimateSize
   });
+  const totalSize = useVirtualHelpers.getTotalSize();
   import_react.default.useEffect(() => {
-    if (actionRef) {
+    if (actionRef && actionRef.current) {
       actionRef.current.scrollTo = useVirtualHelpers.scrollToIndex;
     }
   }, [actionRef, useVirtualHelpers]);
-  return {
-    parentRef,
-    virtualItems: useVirtualHelpers.virtualItems,
-    filteredChildren,
-    totalSize: useVirtualHelpers.totalSize
-  };
+  const instanceUid = import_react.default.useMemo(() => `ds-virtual-list-${(0, import_uid.uid)(6)}`, []);
+  return import_react.default.useMemo(
+    () => ({
+      parentRef,
+      getVirtualItems: useVirtualHelpers.getVirtualItems,
+      filteredChildren,
+      totalSize,
+      instanceUid,
+      measureElement: useVirtualHelpers.measureElement
+    }),
+    [useVirtualHelpers.getVirtualItems, useVirtualHelpers.measureElement, filteredChildren, totalSize, instanceUid]
+  );
 };
 //# sourceMappingURL=useVirtualList.js.map

package/dist/cjs/hooks/useVirtualList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useVirtualList.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport type { VirtualItem } from 'react-virtual';\nimport { useVirtual } from 'react-virtual';\nimport type { DSVirtualListProps } from '../index.d';\n\nexport const useVirtualList = (\n  config: DSVirtualListProps,\n): {\n  parentRef: React.MutableRefObject<HTMLDivElement>;\n  virtualItems: VirtualItem[];\n  filteredChildren: React.ReactNode[];\n  totalSize: number;\n} => {\n  const { children, actionRef } = config;\n  const parentRef = React.useRef<HTMLDivElement>();\n  const filteredChildren = React.useMemo(\n    () => React.Children.toArray(children).filter((child) => child),\n    [children],\n  ) as React.ReactNode[];\n  const useVirtualHelpers = useVirtual({\n    size: filteredChildren.length,\n    parentRef,\n    overscan: 15,\n  });\n  React.useEffect(() => {\n    if (actionRef) {\n      actionRef.current.scrollTo = useVirtualHelpers.scrollToIndex;\n    }\n  }, [actionRef, useVirtualHelpers]);\n\n  return {\n    parentRef,\n    virtualItems: useVirtualHelpers.virtualItems,\n    filteredChildren,\n    totalSize: useVirtualHelpers.totalSize,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,2BAA2B;AAGpB,MAAM,iBAAiB,CAC5B,WAMG;AACH,QAAM,EAAE,UAAU,UAAU,IAAI;AAChC,QAAM,YAAY,aAAAA,QAAM,OAAuB;AAC/C,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,MAAM,aAAAA,QAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAC,UAAU,KAAK;AAAA,IAC9D,CAAC,QAAQ;AAAA,EACX;AACA,QAAM,wBAAoB,iCAAW;AAAA,IACnC,MAAM,iBAAiB;AAAA,IACvB;AAAA,IACA,UAAU;AAAA,EACZ,CAAC;AACD,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,WAAW;AACb,gBAAU,QAAQ,WAAW,kBAAkB;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,WAAW,iBAAiB,CAAC;AAEjC,SAAO;AAAA,IACL;AAAA,IACA,cAAc,kBAAkB;AAAA,IAChC;AAAA,IACA,WAAW,kBAAkB;AAAA,EAC/B;AACF;",
+  "sourcesContent": ["import React from 'react';\nimport { uid } from 'uid';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { type DSVirtualListT, DSVirtualListPropTypes, defaultProps } from '../react-desc-prop-types';\nimport { useValidateProps } from './useValidateProps';\n\nconst estimateSize = () => 50;\n// we \"own\" the interfaces/type instead of importing from react-virtual\n//  to abstract our implementation from their\ninterface VirtualItem {\n  key: string | number;\n  index: number;\n  start: number;\n  end: number;\n  size: number;\n}\ntype MeasureElement = ((element: HTMLElement) => number) | ((node: Element | null) => void);\n\nexport type VirtualListCTX = {\n  parentRef: React.MutableRefObject<HTMLDivElement | null>;\n  getVirtualItems: () => VirtualItem[];\n  filteredChildren: React.ReactNode[];\n  totalSize: number;\n  instanceUid: string;\n  measureElement: MeasureElement;\n};\nexport const useVirtualListV3 = (propsFromUser: DSVirtualListT.Props): VirtualListCTX => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSVirtualListT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSVirtualListPropTypes);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const { children, actionRef } = propsWithDefault;\n  const parentRef = React.useRef<HTMLDivElement>(null);\n  const filteredChildren = React.useMemo(\n    () => React.Children.toArray(children).filter((child) => child !== undefined && child !== null),\n    [children],\n  ) as React.ReactNode[];\n  const useVirtualHelpers = useVirtualizer({\n    count: filteredChildren.length,\n    getScrollElement: () => parentRef.current,\n    overscan: 15,\n    estimateSize,\n  });\n  const totalSize = useVirtualHelpers.getTotalSize();\n  React.useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.scrollTo = useVirtualHelpers.scrollToIndex;\n    }\n  }, [actionRef, useVirtualHelpers]);\n\n  const instanceUid = React.useMemo(() => `ds-virtual-list-${uid(6)}`, []);\n  return React.useMemo(\n    () => ({\n      parentRef,\n      getVirtualItems: useVirtualHelpers.getVirtualItems,\n      filteredChildren,\n      totalSize,\n      instanceUid,\n      measureElement: useVirtualHelpers.measureElement,\n    }),\n    [useVirtualHelpers.getVirtualItems, useVirtualHelpers.measureElement, filteredChildren, totalSize, instanceUid],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,iBAAoB;AACpB,2BAA+B;AAC/B,0BAA6C;AAC7C,mCAA0E;AAC1E,8BAAiC;AAEjC,MAAM,eAAe,MAAM;AAoBpB,MAAM,mBAAmB,CAAC,kBAAwD;AAIvF,QAAM,uBAAmB,kDAA2D,eAAe,yCAAY;AAC/G,gDAAiB,kBAAkB,mDAAsB;AAIzD,QAAM,EAAE,UAAU,UAAU,IAAI;AAChC,QAAM,YAAY,aAAAA,QAAM,OAAuB,IAAI;AACnD,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,MAAM,aAAAA,QAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAC,UAAU,UAAU,UAAa,UAAU,IAAI;AAAA,IAC9F,CAAC,QAAQ;AAAA,EACX;AACA,QAAM,wBAAoB,qCAAe;AAAA,IACvC,OAAO,iBAAiB;AAAA,IACxB,kBAAkB,MAAM,UAAU;AAAA,IAClC,UAAU;AAAA,IACV;AAAA,EACF,CAAC;AACD,QAAM,YAAY,kBAAkB,aAAa;AACjD,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,aAAa,UAAU,SAAS;AAClC,gBAAU,QAAQ,WAAW,kBAAkB;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,WAAW,iBAAiB,CAAC;AAEjC,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,uBAAmB,gBAAI,CAAC,KAAK,CAAC,CAAC;AACvE,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA,iBAAiB,kBAAkB;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,kBAAkB;AAAA,IACpC;AAAA,IACA,CAAC,kBAAkB,iBAAiB,kBAAkB,gBAAgB,kBAAkB,WAAW,WAAW;AAAA,EAChH;AACF;",
   "names": ["React"]
 }

package/dist/cjs/index.js

@@ -5,6 +5,10 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -13,14 +17,18 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
+__export(src_exports, {
+  DSVirtualList: () => import_VirtualList.DSVirtualList,
+  DSVirtualListWithSchema: () => import_VirtualList.DSVirtualListWithSchema
+});
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
-__reExport(src_exports, require("./VirtualList"), module.exports);
+var import_react_desc_prop_types = require("./react-desc-prop-types");
+var import_VirtualList = require("./VirtualList");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './VirtualList';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,0BAAd;",
+  "sourcesContent": ["// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\n\nexport { type DSVirtualListT } from './react-desc-prop-types';\nexport { DSVirtualList, DSVirtualListWithSchema } from './VirtualList';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mCAAoC;AACpC,yBAAuD;",
   "names": []
 }

package/dist/cjs/parts/List.js

@@ -30,35 +30,59 @@ module.exports = __toCommonJS(List_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
-var import_uid = require("uid");
-var import_styled = require("../styled");
 var import_VirtualListDataTestID = require("../VirtualListDataTestID");
 var import_useVirtualList = require("../hooks/useVirtualList");
 const List = (props) => {
-  const { parentRef, virtualItems, filteredChildren, totalSize } = (0, import_useVirtualList.useVirtualList)(props);
-  const [dynamicRerenderWorkaround, setDynamicRerenderWorkaround] = import_react.default.useState((0, import_uid.uid)(6));
-  const virtualChildren = import_react.default.useMemo(
-    () => virtualItems.map((virtualItem) => {
-      const { index, measureRef, start } = virtualItem;
-      const style = {
-        transform: `translateY(${start}px)`
-      };
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.VirtualItemStyled, { ref: measureRef, style, role: "listitem", children: filteredChildren[index] }, `ds-virtual-list-item-${(0, import_uid.uid)(6)}`);
-    }),
-    [filteredChildren, virtualItems]
+  const { parentRef, getVirtualItems, filteredChildren, totalSize, instanceUid, measureElement } = (0, import_useVirtualList.useVirtualListV3)(props);
+  const virtualItems = getVirtualItems();
+  const measureRef = import_react.default.useCallback(
+    (node) => measureElement(node),
+    [measureElement]
   );
-  import_react.default.useEffect(() => {
-    setDynamicRerenderWorkaround((0, import_uid.uid)(6));
-  }, [filteredChildren]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_styled.StyledContainerContentList,
+    "div",
     {
       ref: parentRef,
       "data-testid": import_VirtualListDataTestID.LIST_DATA_TESTID.CONTAINER,
       role: "list",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledVirtualList, { height: `${totalSize}px`, children: virtualChildren })
+      style: {
+        width: "100%",
+        height: "100%",
+        paddingBottom: 0,
+        overflow: "auto"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          style: {
+            width: "100%",
+            height: `${totalSize}px`,
+            position: "relative"
+          },
+          children: virtualItems.map((virtualItem) => {
+            const { index, start, key } = virtualItem;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                ref: measureRef,
+                "data-index": index,
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  transform: `translateY(${start}px)`
+                },
+                role: "listitem",
+                children: filteredChildren[index]
+              },
+              `${instanceUid}-item-${key}`
+            );
+          })
+        }
+      )
     },
-    `ds-virtual-list-${dynamicRerenderWorkaround}`
+    instanceUid
   );
 };
 //# sourceMappingURL=List.js.map

package/dist/cjs/parts/List.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/List.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { uid } from 'uid';\nimport { VirtualItemStyled, StyledContainerContentList, StyledVirtualList } from '../styled';\n\nimport { LIST_DATA_TESTID } from '../VirtualListDataTestID';\n\nimport type { DSVirtualListProps } from '../index.d';\nimport { useVirtualList } from '../hooks/useVirtualList';\n\n/**\n *  List component: renders a list of items\n *  Accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/List_role\n *\n *  @param {DSVirtualListProps} props\n * @returns JSX\n */\nexport const List: React.FC<DSVirtualListProps> = (props: DSVirtualListProps) => {\n  const { parentRef, virtualItems, filteredChildren, totalSize } = useVirtualList(props);\n  const [dynamicRerenderWorkaround, setDynamicRerenderWorkaround] = React.useState(uid(6));\n  const virtualChildren = React.useMemo(\n    () =>\n      virtualItems.map((virtualItem) => {\n        const { index, measureRef, start } = virtualItem;\n        const style = {\n          transform: `translateY(${start}px)`,\n        };\n        return (\n          <VirtualItemStyled ref={measureRef} style={style} role=\"listitem\" key={`ds-virtual-list-item-${uid(6)}`}>\n            {filteredChildren[index]}\n          </VirtualItemStyled>\n        );\n      }),\n    [filteredChildren, virtualItems],\n  );\n  React.useEffect(() => {\n    setDynamicRerenderWorkaround(uid(6));\n  }, [filteredChildren]);\n  return (\n    <StyledContainerContentList\n      key={`ds-virtual-list-${dynamicRerenderWorkaround}`}\n      ref={parentRef}\n      data-testid={LIST_DATA_TESTID.CONTAINER}\n      role=\"list\"\n    >\n      <StyledVirtualList height={`${totalSize}px`}>{virtualChildren}</StyledVirtualList>\n    </StyledContainerContentList>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2Bb;AA3BV,mBAAkB;AAClB,iBAAoB;AACpB,oBAAiF;AAEjF,mCAAiC;AAGjC,4BAA+B;AASxB,MAAM,OAAqC,CAAC,UAA8B;AAC/E,QAAM,EAAE,WAAW,cAAc,kBAAkB,UAAU,QAAI,sCAAe,KAAK;AACrF,QAAM,CAAC,2BAA2B,4BAA4B,IAAI,aAAAA,QAAM,aAAS,gBAAI,CAAC,CAAC;AACvF,QAAM,kBAAkB,aAAAA,QAAM;AAAA,IAC5B,MACE,aAAa,IAAI,CAAC,gBAAgB;AAChC,YAAM,EAAE,OAAO,YAAY,MAAM,IAAI;AACrC,YAAM,QAAQ;AAAA,QACZ,WAAW,cAAc;AAAA,MAC3B;AACA,aACE,4CAAC,mCAAkB,KAAK,YAAY,OAAc,MAAK,YACpD,2BAAiB,UADmD,4BAAwB,gBAAI,CAAC,GAEpG;AAAA,IAEJ,CAAC;AAAA,IACH,CAAC,kBAAkB,YAAY;AAAA,EACjC;AACA,eAAAA,QAAM,UAAU,MAAM;AACpB,qCAA6B,gBAAI,CAAC,CAAC;AAAA,EACrC,GAAG,CAAC,gBAAgB,CAAC;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,KAAK;AAAA,MACL,eAAa,8CAAiB;AAAA,MAC9B,MAAK;AAAA,MAEL,sDAAC,mCAAkB,QAAQ,GAAG,eAAgB,2BAAgB;AAAA;AAAA,IALzD,mBAAmB;AAAA,EAM1B;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport { LIST_DATA_TESTID } from '../VirtualListDataTestID';\nimport { useVirtualListV3 } from '../hooks/useVirtualList';\nimport type { DSVirtualListT } from '../react-desc-prop-types';\n\nexport const List = (props: DSVirtualListT.Props) => {\n  const { parentRef, getVirtualItems, filteredChildren, totalSize, instanceUid, measureElement } =\n    useVirtualListV3(props);\n  const virtualItems = getVirtualItems();\n  const measureRef: React.LegacyRef<HTMLDivElement> = React.useCallback(\n    (node: HTMLDivElement) => measureElement(node),\n    [measureElement],\n  );\n\n  return (\n    <div\n      key={instanceUid}\n      ref={parentRef}\n      data-testid={LIST_DATA_TESTID.CONTAINER}\n      role=\"list\"\n      style={{\n        width: '100%',\n        height: '100%',\n        paddingBottom: 0,\n        overflow: 'auto',\n      }}\n    >\n      <div\n        style={{\n          width: '100%',\n          height: `${totalSize}px`,\n          position: 'relative',\n        }}\n      >\n        {virtualItems.map((virtualItem) => {\n          const { index, start, key } = virtualItem;\n          return (\n            <div\n              ref={measureRef}\n              data-index={index}\n              style={{\n                position: 'absolute',\n                top: 0,\n                left: 0,\n                width: '100%',\n                transform: `translateY(${start}px)`,\n              }}\n              role=\"listitem\"\n              key={`${instanceUid}-item-${key}`}\n            >\n              {filteredChildren[index]}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCX;AArCZ,mBAAkB;AAClB,mCAAiC;AACjC,4BAAiC;AAG1B,MAAM,OAAO,CAAC,UAAgC;AACnD,QAAM,EAAE,WAAW,iBAAiB,kBAAkB,WAAW,aAAa,eAAe,QAC3F,wCAAiB,KAAK;AACxB,QAAM,eAAe,gBAAgB;AACrC,QAAM,aAA8C,aAAAA,QAAM;AAAA,IACxD,CAAC,SAAyB,eAAe,IAAI;AAAA,IAC7C,CAAC,cAAc;AAAA,EACjB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,KAAK;AAAA,MACL,eAAa,8CAAiB;AAAA,MAC9B,MAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,eAAe;AAAA,QACf,UAAU;AAAA,MACZ;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,OAAO;AAAA,YACP,QAAQ,GAAG;AAAA,YACX,UAAU;AAAA,UACZ;AAAA,UAEC,uBAAa,IAAI,CAAC,gBAAgB;AACjC,kBAAM,EAAE,OAAO,OAAO,IAAI,IAAI;AAC9B,mBACE;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK;AAAA,gBACL,cAAY;AAAA,gBACZ,OAAO;AAAA,kBACL,UAAU;AAAA,kBACV,KAAK;AAAA,kBACL,MAAM;AAAA,kBACN,OAAO;AAAA,kBACP,WAAW,cAAc;AAAA,gBAC3B;AAAA,gBACA,MAAK;AAAA,gBAGJ,2BAAiB;AAAA;AAAA,cAFb,GAAG,oBAAoB;AAAA,YAG9B;AAAA,UAEJ,CAAC;AAAA;AAAA,MACH;AAAA;AAAA,IAtCK;AAAA,EAuCP;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/react-desc-prop-types.js

@@ -0,0 +1,45 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
+  DSVirtualListPropTypes: () => DSVirtualListPropTypes,
+  defaultProps: () => defaultProps
+});
+module.exports = __toCommonJS(react_desc_prop_types_exports);
+var React = __toESM(require("react"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+const defaultProps = {};
+const DSVirtualListPropTypes = {
+  children: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.node).description("Children list").isRequired,
+  actionRef: import_ds_utilities.PropTypes.shape({
+    current: import_ds_utilities.PropTypes.oneOfType([
+      import_ds_utilities.PropTypes.oneOf([null]),
+      import_ds_utilities.PropTypes.shape({
+        scrollTo: import_ds_utilities.PropTypes.func.description("Scroll to a index inside the list").signature(`((index: number, { align: 'start' | 'center' | 'end' | 'auto' }) => void)`)
+      })
+    ])
+  }).description(`mutable reference where methods will be stored`)
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport React from 'react';\nimport { PropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSVirtualListT {\n  type ScrollAlignment = 'start' | 'center' | 'end' | 'auto';\n  type ScrollToOptions = {\n    align: ScrollAlignment;\n  };\n\n  export type ActionRef = {\n    scrollTo?: (index: number, options?: ScrollToOptions | undefined) => void;\n  };\n  export interface RequiredProps {\n    children: React.ReactNode;\n  }\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps {\n    actionRef: React.MutableRefObject<ActionRef>;\n  }\n\n  export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps, RequiredProps {}\n}\n\nexport const defaultProps: DSVirtualListT.DefaultProps = {};\n\nexport const DSVirtualListPropTypes = {\n  children: PropTypes.arrayOf(PropTypes.node).description('Children list').isRequired,\n  actionRef: PropTypes.shape({\n    current: PropTypes.oneOfType([\n      PropTypes.oneOf([null]),\n      PropTypes.shape({\n        scrollTo: PropTypes.func\n          .description('Scroll to a index inside the list')\n          .signature(`((index: number, { align: 'start' | 'center' | 'end' | 'auto' }) => void)`),\n      }),\n    ]),\n  }).description(`mutable reference where methods will be stored`),\n} as React.WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,0BAA0B;AA0BnB,MAAM,eAA4C,CAAC;AAEnD,MAAM,yBAAyB;AAAA,EACpC,UAAU,8BAAU,QAAQ,8BAAU,IAAI,EAAE,YAAY,eAAe,EAAE;AAAA,EACzE,WAAW,8BAAU,MAAM;AAAA,IACzB,SAAS,8BAAU,UAAU;AAAA,MAC3B,8BAAU,MAAM,CAAC,IAAI,CAAC;AAAA,MACtB,8BAAU,MAAM;AAAA,QACd,UAAU,8BAAU,KACjB,YAAY,mCAAmC,EAC/C,UAAU,2EAA2E;AAAA,MAC1F,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC,EAAE,YAAY,gDAAgD;AACjE;",
+  "names": []
+}

package/dist/esm/VirtualList.js

@@ -1,18 +1,14 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from "@elliemae/ds-utilities";
+import { describe } from "@elliemae/ds-utilities";
 import { List } from "./parts/List";
-import { DSVirtualListSchema, defaultProps } from "./props";
+import { DSVirtualListPropTypes } from "./react-desc-prop-types";
 import { DSVirtualListName } from "./DSVirtualListDefinitions";
-const DSVirtualList = (props) => {
-  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  useValidateTypescriptPropTypes(propsWithDefault, DSVirtualListSchema, DSVirtualListName);
-  return /* @__PURE__ */ jsx(List, { ...propsWithDefault });
-};
-DSVirtualList.propTypes = DSVirtualListSchema;
+const DSVirtualList = (props) => /* @__PURE__ */ jsx(List, { ...props });
+DSVirtualList.propTypes = DSVirtualListPropTypes;
 DSVirtualList.displayName = DSVirtualListName;
 const DSVirtualListWithSchema = describe(DSVirtualList).description("DSVirtualList");
-DSVirtualListWithSchema.propTypes = DSVirtualListSchema;
+DSVirtualListWithSchema.propTypes = DSVirtualListPropTypes;
 export {
   DSVirtualList,
   DSVirtualListWithSchema

package/dist/esm/VirtualList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/VirtualList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from '@elliemae/ds-utilities';\nimport { List } from './parts/List';\nimport { DSVirtualListSchema, defaultProps } from './props';\nimport type { DSVirtualListProps } from './index.d';\nimport { DSVirtualListName } from './DSVirtualListDefinitions';\n\nconst DSVirtualList: React.ComponentType<DSVirtualListProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSVirtualListSchema, DSVirtualListName);\n\n  return <List {...propsWithDefault} />;\n};\n\nDSVirtualList.propTypes = DSVirtualListSchema;\nDSVirtualList.displayName = DSVirtualListName;\nconst DSVirtualListWithSchema = describe(DSVirtualList).description('DSVirtualList');\nDSVirtualListWithSchema.propTypes = DSVirtualListSchema;\n\nexport { DSVirtualList, DSVirtualListWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACWd;AAVT,SAAS,8BAA8B,gCAAgC,gBAAgB;AACvF,SAAS,YAAY;AACrB,SAAS,qBAAqB,oBAAoB;AAElD,SAAS,yBAAyB;AAElC,MAAM,gBAAyD,CAAC,UAAU;AACxE,QAAM,mBAAmB,6BAA6B,OAAO,YAAY;AACzE,iCAA+B,kBAAkB,qBAAqB,iBAAiB;AAEvF,SAAO,oBAAC,QAAM,GAAG,kBAAkB;AACrC;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa,EAAE,YAAY,eAAe;AACnF,wBAAwB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { List } from './parts/List';\nimport { DSVirtualListPropTypes, type DSVirtualListT } from './react-desc-prop-types';\nimport { DSVirtualListName } from './DSVirtualListDefinitions';\n\n// we are not using a context nor zustand so all the logic is handled in List...\nconst DSVirtualList = (props: DSVirtualListT.Props) => <List {...props} />;\n\nDSVirtualList.propTypes = DSVirtualListPropTypes;\nDSVirtualList.displayName = DSVirtualListName;\nconst DSVirtualListWithSchema = describe(DSVirtualList).description('DSVirtualList');\nDSVirtualListWithSchema.propTypes = DSVirtualListPropTypes;\n\nexport { DSVirtualList, DSVirtualListWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACOgC;AANvD,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,8BAAmD;AAC5D,SAAS,yBAAyB;AAGlC,MAAM,gBAAgB,CAAC,UAAgC,oBAAC,QAAM,GAAG,OAAO;AAExE,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa,EAAE,YAAY,eAAe;AACnF,wBAAwB,YAAY;",
   "names": []
 }

package/dist/esm/hooks/useValidateProps.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { useValidateTypescriptPropTypes } from "@elliemae/ds-utilities";
+import { DSVirtualListName } from "../DSVirtualListDefinitions";
+const useValidateProps = (props, propTypes) => {
+  useValidateTypescriptPropTypes(props, propTypes, DSVirtualListName);
+};
+export {
+  useValidateProps
+};
+//# sourceMappingURL=useValidateProps.js.map

package/dist/esm/hooks/useValidateProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useValidateProps.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { WeakValidationMap } from 'react';\nimport { type DSVirtualListT } from '../react-desc-prop-types';\nimport { DSVirtualListName } from '../DSVirtualListDefinitions';\n\nexport const useValidateProps = (props: DSVirtualListT.InternalProps, propTypes: WeakValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSVirtualListName);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,yBAAyB;AAE3B,MAAM,mBAAmB,CAAC,OAAqC,cAAgD;AAEpH,iCAA+B,OAAO,WAAW,iBAAiB;AACpE;",
+  "names": []
+}

package/dist/esm/hooks/useVirtualList.js

@@ -1,31 +1,46 @@
 import * as React from "react";
 import React2 from "react";
-import { useVirtual } from "react-virtual";
-const useVirtualList = (config) => {
-  const { children, actionRef } = config;
-  const parentRef = React2.useRef();
+import { uid } from "uid";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useMemoMergePropsWithDefault } from "@elliemae/ds-utilities";
+import { DSVirtualListPropTypes, defaultProps } from "../react-desc-prop-types";
+import { useValidateProps } from "./useValidateProps";
+const estimateSize = () => 50;
+const useVirtualListV3 = (propsFromUser) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
+  useValidateProps(propsWithDefault, DSVirtualListPropTypes);
+  const { children, actionRef } = propsWithDefault;
+  const parentRef = React2.useRef(null);
   const filteredChildren = React2.useMemo(
-    () => React2.Children.toArray(children).filter((child) => child),
+    () => React2.Children.toArray(children).filter((child) => child !== void 0 && child !== null),
     [children]
   );
-  const useVirtualHelpers = useVirtual({
-    size: filteredChildren.length,
-    parentRef,
-    overscan: 15
+  const useVirtualHelpers = useVirtualizer({
+    count: filteredChildren.length,
+    getScrollElement: () => parentRef.current,
+    overscan: 15,
+    estimateSize
   });
+  const totalSize = useVirtualHelpers.getTotalSize();
   React2.useEffect(() => {
-    if (actionRef) {
+    if (actionRef && actionRef.current) {
       actionRef.current.scrollTo = useVirtualHelpers.scrollToIndex;
     }
   }, [actionRef, useVirtualHelpers]);
-  return {
-    parentRef,
-    virtualItems: useVirtualHelpers.virtualItems,
-    filteredChildren,
-    totalSize: useVirtualHelpers.totalSize
-  };
+  const instanceUid = React2.useMemo(() => `ds-virtual-list-${uid(6)}`, []);
+  return React2.useMemo(
+    () => ({
+      parentRef,
+      getVirtualItems: useVirtualHelpers.getVirtualItems,
+      filteredChildren,
+      totalSize,
+      instanceUid,
+      measureElement: useVirtualHelpers.measureElement
+    }),
+    [useVirtualHelpers.getVirtualItems, useVirtualHelpers.measureElement, filteredChildren, totalSize, instanceUid]
+  );
 };
 export {
-  useVirtualList
+  useVirtualListV3
 };
 //# sourceMappingURL=useVirtualList.js.map

package/dist/esm/hooks/useVirtualList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useVirtualList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { VirtualItem } from 'react-virtual';\nimport { useVirtual } from 'react-virtual';\nimport type { DSVirtualListProps } from '../index.d';\n\nexport const useVirtualList = (\n  config: DSVirtualListProps,\n): {\n  parentRef: React.MutableRefObject<HTMLDivElement>;\n  virtualItems: VirtualItem[];\n  filteredChildren: React.ReactNode[];\n  totalSize: number;\n} => {\n  const { children, actionRef } = config;\n  const parentRef = React.useRef<HTMLDivElement>();\n  const filteredChildren = React.useMemo(\n    () => React.Children.toArray(children).filter((child) => child),\n    [children],\n  ) as React.ReactNode[];\n  const useVirtualHelpers = useVirtual({\n    size: filteredChildren.length,\n    parentRef,\n    overscan: 15,\n  });\n  React.useEffect(() => {\n    if (actionRef) {\n      actionRef.current.scrollTo = useVirtualHelpers.scrollToIndex;\n    }\n  }, [actionRef, useVirtualHelpers]);\n\n  return {\n    parentRef,\n    virtualItems: useVirtualHelpers.virtualItems,\n    filteredChildren,\n    totalSize: useVirtualHelpers.totalSize,\n  };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAElB,SAAS,kBAAkB;AAGpB,MAAM,iBAAiB,CAC5B,WAMG;AACH,QAAM,EAAE,UAAU,UAAU,IAAI;AAChC,QAAM,YAAYA,OAAM,OAAuB;AAC/C,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,MAAMA,OAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAC,UAAU,KAAK;AAAA,IAC9D,CAAC,QAAQ;AAAA,EACX;AACA,QAAM,oBAAoB,WAAW;AAAA,IACnC,MAAM,iBAAiB;AAAA,IACvB;AAAA,IACA,UAAU;AAAA,EACZ,CAAC;AACD,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,WAAW;AACb,gBAAU,QAAQ,WAAW,kBAAkB;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,WAAW,iBAAiB,CAAC;AAEjC,SAAO;AAAA,IACL;AAAA,IACA,cAAc,kBAAkB;AAAA,IAChC;AAAA,IACA,WAAW,kBAAkB;AAAA,EAC/B;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { uid } from 'uid';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { type DSVirtualListT, DSVirtualListPropTypes, defaultProps } from '../react-desc-prop-types';\nimport { useValidateProps } from './useValidateProps';\n\nconst estimateSize = () => 50;\n// we \"own\" the interfaces/type instead of importing from react-virtual\n//  to abstract our implementation from their\ninterface VirtualItem {\n  key: string | number;\n  index: number;\n  start: number;\n  end: number;\n  size: number;\n}\ntype MeasureElement = ((element: HTMLElement) => number) | ((node: Element | null) => void);\n\nexport type VirtualListCTX = {\n  parentRef: React.MutableRefObject<HTMLDivElement | null>;\n  getVirtualItems: () => VirtualItem[];\n  filteredChildren: React.ReactNode[];\n  totalSize: number;\n  instanceUid: string;\n  measureElement: MeasureElement;\n};\nexport const useVirtualListV3 = (propsFromUser: DSVirtualListT.Props): VirtualListCTX => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSVirtualListT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSVirtualListPropTypes);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const { children, actionRef } = propsWithDefault;\n  const parentRef = React.useRef<HTMLDivElement>(null);\n  const filteredChildren = React.useMemo(\n    () => React.Children.toArray(children).filter((child) => child !== undefined && child !== null),\n    [children],\n  ) as React.ReactNode[];\n  const useVirtualHelpers = useVirtualizer({\n    count: filteredChildren.length,\n    getScrollElement: () => parentRef.current,\n    overscan: 15,\n    estimateSize,\n  });\n  const totalSize = useVirtualHelpers.getTotalSize();\n  React.useEffect(() => {\n    if (actionRef && actionRef.current) {\n      actionRef.current.scrollTo = useVirtualHelpers.scrollToIndex;\n    }\n  }, [actionRef, useVirtualHelpers]);\n\n  const instanceUid = React.useMemo(() => `ds-virtual-list-${uid(6)}`, []);\n  return React.useMemo(\n    () => ({\n      parentRef,\n      getVirtualItems: useVirtualHelpers.getVirtualItems,\n      filteredChildren,\n      totalSize,\n      instanceUid,\n      measureElement: useVirtualHelpers.measureElement,\n    }),\n    [useVirtualHelpers.getVirtualItems, useVirtualHelpers.measureElement, filteredChildren, totalSize, instanceUid],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,WAAW;AACpB,SAAS,sBAAsB;AAC/B,SAAS,oCAAoC;AAC7C,SAA8B,wBAAwB,oBAAoB;AAC1E,SAAS,wBAAwB;AAEjC,MAAM,eAAe,MAAM;AAoBpB,MAAM,mBAAmB,CAAC,kBAAwD;AAIvF,QAAM,mBAAmB,6BAA2D,eAAe,YAAY;AAC/G,mBAAiB,kBAAkB,sBAAsB;AAIzD,QAAM,EAAE,UAAU,UAAU,IAAI;AAChC,QAAM,YAAYA,OAAM,OAAuB,IAAI;AACnD,QAAM,mBAAmBA,OAAM;AAAA,IAC7B,MAAMA,OAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAC,UAAU,UAAU,UAAa,UAAU,IAAI;AAAA,IAC9F,CAAC,QAAQ;AAAA,EACX;AACA,QAAM,oBAAoB,eAAe;AAAA,IACvC,OAAO,iBAAiB;AAAA,IACxB,kBAAkB,MAAM,UAAU;AAAA,IAClC,UAAU;AAAA,IACV;AAAA,EACF,CAAC;AACD,QAAM,YAAY,kBAAkB,aAAa;AACjD,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,aAAa,UAAU,SAAS;AAClC,gBAAU,QAAQ,WAAW,kBAAkB;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,WAAW,iBAAiB,CAAC;AAEjC,QAAM,cAAcA,OAAM,QAAQ,MAAM,mBAAmB,IAAI,CAAC,KAAK,CAAC,CAAC;AACvE,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA,iBAAiB,kBAAkB;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,kBAAkB;AAAA,IACpC;AAAA,IACA,CAAC,kBAAkB,iBAAiB,kBAAkB,gBAAgB,kBAAkB,WAAW,WAAW;AAAA,EAChH;AACF;",
   "names": ["React"]
 }

package/dist/esm/index.js

@@ -1,3 +1,8 @@
 import * as React from "react";
-export * from "./VirtualList";
+import {} from "./react-desc-prop-types";
+import { DSVirtualList, DSVirtualListWithSchema } from "./VirtualList";
+export {
+  DSVirtualList,
+  DSVirtualListWithSchema
+};
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './VirtualList';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\n\nexport { type DSVirtualListT } from './react-desc-prop-types';\nexport { DSVirtualList, DSVirtualListWithSchema } from './VirtualList';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,eAAoC;AACpC,SAAS,eAAe,+BAA+B;",
   "names": []
 }

package/dist/esm/parts/List.js

@@ -1,35 +1,59 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import React2 from "react";
-import { uid } from "uid";
-import { VirtualItemStyled, StyledContainerContentList, StyledVirtualList } from "../styled";
 import { LIST_DATA_TESTID } from "../VirtualListDataTestID";
-import { useVirtualList } from "../hooks/useVirtualList";
+import { useVirtualListV3 } from "../hooks/useVirtualList";
 const List = (props) => {
-  const { parentRef, virtualItems, filteredChildren, totalSize } = useVirtualList(props);
-  const [dynamicRerenderWorkaround, setDynamicRerenderWorkaround] = React2.useState(uid(6));
-  const virtualChildren = React2.useMemo(
-    () => virtualItems.map((virtualItem) => {
-      const { index, measureRef, start } = virtualItem;
-      const style = {
-        transform: `translateY(${start}px)`
-      };
-      return /* @__PURE__ */ jsx(VirtualItemStyled, { ref: measureRef, style, role: "listitem", children: filteredChildren[index] }, `ds-virtual-list-item-${uid(6)}`);
-    }),
-    [filteredChildren, virtualItems]
+  const { parentRef, getVirtualItems, filteredChildren, totalSize, instanceUid, measureElement } = useVirtualListV3(props);
+  const virtualItems = getVirtualItems();
+  const measureRef = React2.useCallback(
+    (node) => measureElement(node),
+    [measureElement]
   );
-  React2.useEffect(() => {
-    setDynamicRerenderWorkaround(uid(6));
-  }, [filteredChildren]);
   return /* @__PURE__ */ jsx(
-    StyledContainerContentList,
+    "div",
     {
       ref: parentRef,
       "data-testid": LIST_DATA_TESTID.CONTAINER,
       role: "list",
-      children: /* @__PURE__ */ jsx(StyledVirtualList, { height: `${totalSize}px`, children: virtualChildren })
+      style: {
+        width: "100%",
+        height: "100%",
+        paddingBottom: 0,
+        overflow: "auto"
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: "100%",
+            height: `${totalSize}px`,
+            position: "relative"
+          },
+          children: virtualItems.map((virtualItem) => {
+            const { index, start, key } = virtualItem;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: measureRef,
+                "data-index": index,
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  transform: `translateY(${start}px)`
+                },
+                role: "listitem",
+                children: filteredChildren[index]
+              },
+              `${instanceUid}-item-${key}`
+            );
+          })
+        }
+      )
     },
-    `ds-virtual-list-${dynamicRerenderWorkaround}`
+    instanceUid
   );
 };
 export {

package/dist/esm/parts/List.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/List.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { uid } from 'uid';\nimport { VirtualItemStyled, StyledContainerContentList, StyledVirtualList } from '../styled';\n\nimport { LIST_DATA_TESTID } from '../VirtualListDataTestID';\n\nimport type { DSVirtualListProps } from '../index.d';\nimport { useVirtualList } from '../hooks/useVirtualList';\n\n/**\n *  List component: renders a list of items\n *  Accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/List_role\n *\n *  @param {DSVirtualListProps} props\n * @returns JSX\n */\nexport const List: React.FC<DSVirtualListProps> = (props: DSVirtualListProps) => {\n  const { parentRef, virtualItems, filteredChildren, totalSize } = useVirtualList(props);\n  const [dynamicRerenderWorkaround, setDynamicRerenderWorkaround] = React.useState(uid(6));\n  const virtualChildren = React.useMemo(\n    () =>\n      virtualItems.map((virtualItem) => {\n        const { index, measureRef, start } = virtualItem;\n        const style = {\n          transform: `translateY(${start}px)`,\n        };\n        return (\n          <VirtualItemStyled ref={measureRef} style={style} role=\"listitem\" key={`ds-virtual-list-item-${uid(6)}`}>\n            {filteredChildren[index]}\n          </VirtualItemStyled>\n        );\n      }),\n    [filteredChildren, virtualItems],\n  );\n  React.useEffect(() => {\n    setDynamicRerenderWorkaround(uid(6));\n  }, [filteredChildren]);\n  return (\n    <StyledContainerContentList\n      key={`ds-virtual-list-${dynamicRerenderWorkaround}`}\n      ref={parentRef}\n      data-testid={LIST_DATA_TESTID.CONTAINER}\n      role=\"list\"\n    >\n      <StyledVirtualList height={`${totalSize}px`}>{virtualChildren}</StyledVirtualList>\n    </StyledContainerContentList>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC2Bb;AA3BV,OAAOA,YAAW;AAClB,SAAS,WAAW;AACpB,SAAS,mBAAmB,4BAA4B,yBAAyB;AAEjF,SAAS,wBAAwB;AAGjC,SAAS,sBAAsB;AASxB,MAAM,OAAqC,CAAC,UAA8B;AAC/E,QAAM,EAAE,WAAW,cAAc,kBAAkB,UAAU,IAAI,eAAe,KAAK;AACrF,QAAM,CAAC,2BAA2B,4BAA4B,IAAIA,OAAM,SAAS,IAAI,CAAC,CAAC;AACvF,QAAM,kBAAkBA,OAAM;AAAA,IAC5B,MACE,aAAa,IAAI,CAAC,gBAAgB;AAChC,YAAM,EAAE,OAAO,YAAY,MAAM,IAAI;AACrC,YAAM,QAAQ;AAAA,QACZ,WAAW,cAAc;AAAA,MAC3B;AACA,aACE,oBAAC,qBAAkB,KAAK,YAAY,OAAc,MAAK,YACpD,2BAAiB,UADmD,wBAAwB,IAAI,CAAC,GAEpG;AAAA,IAEJ,CAAC;AAAA,IACH,CAAC,kBAAkB,YAAY;AAAA,EACjC;AACA,EAAAA,OAAM,UAAU,MAAM;AACpB,iCAA6B,IAAI,CAAC,CAAC;AAAA,EACrC,GAAG,CAAC,gBAAgB,CAAC;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,KAAK;AAAA,MACL,eAAa,iBAAiB;AAAA,MAC9B,MAAK;AAAA,MAEL,8BAAC,qBAAkB,QAAQ,GAAG,eAAgB,2BAAgB;AAAA;AAAA,IALzD,mBAAmB;AAAA,EAM1B;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { LIST_DATA_TESTID } from '../VirtualListDataTestID';\nimport { useVirtualListV3 } from '../hooks/useVirtualList';\nimport type { DSVirtualListT } from '../react-desc-prop-types';\n\nexport const List = (props: DSVirtualListT.Props) => {\n  const { parentRef, getVirtualItems, filteredChildren, totalSize, instanceUid, measureElement } =\n    useVirtualListV3(props);\n  const virtualItems = getVirtualItems();\n  const measureRef: React.LegacyRef<HTMLDivElement> = React.useCallback(\n    (node: HTMLDivElement) => measureElement(node),\n    [measureElement],\n  );\n\n  return (\n    <div\n      key={instanceUid}\n      ref={parentRef}\n      data-testid={LIST_DATA_TESTID.CONTAINER}\n      role=\"list\"\n      style={{\n        width: '100%',\n        height: '100%',\n        paddingBottom: 0,\n        overflow: 'auto',\n      }}\n    >\n      <div\n        style={{\n          width: '100%',\n          height: `${totalSize}px`,\n          position: 'relative',\n        }}\n      >\n        {virtualItems.map((virtualItem) => {\n          const { index, start, key } = virtualItem;\n          return (\n            <div\n              ref={measureRef}\n              data-index={index}\n              style={{\n                position: 'absolute',\n                top: 0,\n                left: 0,\n                width: '100%',\n                transform: `translateY(${start}px)`,\n              }}\n              role=\"listitem\"\n              key={`${instanceUid}-item-${key}`}\n            >\n              {filteredChildren[index]}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqCX;AArCZ,OAAOA,YAAW;AAClB,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAG1B,MAAM,OAAO,CAAC,UAAgC;AACnD,QAAM,EAAE,WAAW,iBAAiB,kBAAkB,WAAW,aAAa,eAAe,IAC3F,iBAAiB,KAAK;AACxB,QAAM,eAAe,gBAAgB;AACrC,QAAM,aAA8CA,OAAM;AAAA,IACxD,CAAC,SAAyB,eAAe,IAAI;AAAA,IAC7C,CAAC,cAAc;AAAA,EACjB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,KAAK;AAAA,MACL,eAAa,iBAAiB;AAAA,MAC9B,MAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,eAAe;AAAA,QACf,UAAU;AAAA,MACZ;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,OAAO;AAAA,YACP,QAAQ,GAAG;AAAA,YACX,UAAU;AAAA,UACZ;AAAA,UAEC,uBAAa,IAAI,CAAC,gBAAgB;AACjC,kBAAM,EAAE,OAAO,OAAO,IAAI,IAAI;AAC9B,mBACE;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK;AAAA,gBACL,cAAY;AAAA,gBACZ,OAAO;AAAA,kBACL,UAAU;AAAA,kBACV,KAAK;AAAA,kBACL,MAAM;AAAA,kBACN,OAAO;AAAA,kBACP,WAAW,cAAc;AAAA,gBAC3B;AAAA,gBACA,MAAK;AAAA,gBAGJ,2BAAiB;AAAA;AAAA,cAFb,GAAG,oBAAoB;AAAA,YAG9B;AAAA,UAEJ,CAAC;AAAA;AAAA,MACH;AAAA;AAAA,IAtCK;AAAA,EAuCP;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/react-desc-prop-types.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { PropTypes } from "@elliemae/ds-utilities";
+const defaultProps = {};
+const DSVirtualListPropTypes = {
+  children: PropTypes.arrayOf(PropTypes.node).description("Children list").isRequired,
+  actionRef: PropTypes.shape({
+    current: PropTypes.oneOfType([
+      PropTypes.oneOf([null]),
+      PropTypes.shape({
+        scrollTo: PropTypes.func.description("Scroll to a index inside the list").signature(`((index: number, { align: 'start' | 'center' | 'end' | 'auto' }) => void)`)
+      })
+    ])
+  }).description(`mutable reference where methods will be stored`)
+};
+export {
+  DSVirtualListPropTypes,
+  defaultProps
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport React from 'react';\nimport { PropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSVirtualListT {\n  type ScrollAlignment = 'start' | 'center' | 'end' | 'auto';\n  type ScrollToOptions = {\n    align: ScrollAlignment;\n  };\n\n  export type ActionRef = {\n    scrollTo?: (index: number, options?: ScrollToOptions | undefined) => void;\n  };\n  export interface RequiredProps {\n    children: React.ReactNode;\n  }\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps {\n    actionRef: React.MutableRefObject<ActionRef>;\n  }\n\n  export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps, RequiredProps {}\n}\n\nexport const defaultProps: DSVirtualListT.DefaultProps = {};\n\nexport const DSVirtualListPropTypes = {\n  children: PropTypes.arrayOf(PropTypes.node).description('Children list').isRequired,\n  actionRef: PropTypes.shape({\n    current: PropTypes.oneOfType([\n      PropTypes.oneOf([null]),\n      PropTypes.shape({\n        scrollTo: PropTypes.func\n          .description('Scroll to a index inside the list')\n          .signature(`((index: number, { align: 'start' | 'center' | 'end' | 'auto' }) => void)`),\n      }),\n    ]),\n  }).description(`mutable reference where methods will be stored`),\n} as React.WeakValidationMap<unknown>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,iBAAiB;AA0BnB,MAAM,eAA4C,CAAC;AAEnD,MAAM,yBAAyB;AAAA,EACpC,UAAU,UAAU,QAAQ,UAAU,IAAI,EAAE,YAAY,eAAe,EAAE;AAAA,EACzE,WAAW,UAAU,MAAM;AAAA,IACzB,SAAS,UAAU,UAAU;AAAA,MAC3B,UAAU,MAAM,CAAC,IAAI,CAAC;AAAA,MACtB,UAAU,MAAM;AAAA,QACd,UAAU,UAAU,KACjB,YAAY,mCAAmC,EAC/C,UAAU,2EAA2E;AAAA,MAC1F,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC,EAAE,YAAY,gDAAgD;AACjE;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-virtual-list",
-  "version": "3.14.0-next.1",
+  "version": "3.14.0-next.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Virtual List",
   "files": [
@@ -59,13 +59,17 @@
     "indent": 4
   },
   "dependencies": {
-    "react-virtual": "~2.10.4",
+    "@tanstack/react-virtual": "3.0.0-beta.36",
     "uid": "^2.0.0",
-    "@elliemae/ds-system": "3.14.0-next.1",
-    "@elliemae/ds-utilities": "3.14.0-next.1"
+    "@elliemae/ds-system": "3.14.0-next.3",
+    "@elliemae/ds-utilities": "3.14.0-next.3"
   },
   "devDependencies": {
-    "styled-components": "~5.3.6"
+    "@testing-library/react": "^11.2.6",
+    "@testing-library/user-event": "~13.5.0",
+    "styled-components": "~5.3.6",
+    "styled-system": "~5.1.5",
+    "@elliemae/ds-test-utils": "3.14.0-next.3"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",

package/dist/cjs/index.d.js

@@ -1,24 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var index_d_exports = {};
-module.exports = __toCommonJS(index_d_exports);
-var React = __toESM(require("react"));
-//# sourceMappingURL=index.d.js.map

package/dist/cjs/index.d.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/index.d.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\n\nexport interface DSVirtualListProps {\n  children: React.ReactNode[];\n  actionRef: React.MutableRefObject<any>;\n}\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
-  "names": []
-}

package/dist/cjs/styled.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const StyledContainerContentList = styled.div`\n  width: 100%;\n  height: 100%;\n  padding-bottom: 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n`;\nexport const StyledVirtualList = styled.div<{ height: string }>`\n  width: 100%;\n  height: ${(props) => props.height};\n  position: relative;\n`;\nexport const VirtualItemStyled = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,6BAA6B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1C,MAAM,oBAAoB,wBAAO;AAAA;AAAA,YAE5B,CAAC,UAAU,MAAM;AAAA;AAAA;AAGtB,MAAM,oBAAoB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;",
-  "names": []
-}

package/dist/esm/index.d.js

@@ -1,2 +0,0 @@
-import * as React from "react";
-//# sourceMappingURL=index.d.js.map

package/dist/esm/index.d.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
-  "mappings": "AAAA,YAAY,WAAW;",
-  "names": []
-}

package/dist/esm/styled.js

@@ -1,26 +0,0 @@
-import * as React from "react";
-import { styled } from "@elliemae/ds-system";
-const StyledContainerContentList = styled.div`
-  width: 100%;
-  height: 100%;
-  padding-bottom: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-`;
-const StyledVirtualList = styled.div`
-  width: 100%;
-  height: ${(props) => props.height};
-  position: relative;
-`;
-const VirtualItemStyled = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-`;
-export {
-  StyledContainerContentList,
-  StyledVirtualList,
-  VirtualItemStyled
-};
-//# sourceMappingURL=styled.js.map

package/dist/esm/styled.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\nexport const StyledContainerContentList = styled.div`\n  width: 100%;\n  height: 100%;\n  padding-bottom: 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n`;\nexport const StyledVirtualList = styled.div<{ height: string }>`\n  width: 100%;\n  height: ${(props) => props.height};\n  position: relative;\n`;\nexport const VirtualItemStyled = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEhB,MAAM,6BAA6B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1C,MAAM,oBAAoB,OAAO;AAAA;AAAA,YAE5B,CAAC,UAAU,MAAM;AAAA;AAAA;AAGtB,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;",
-  "names": []
-}