@elliemae/ds-virtual-list 3.27.0-next.2 → 3.27.0-next.3

package/dist/cjs/DSVirtualListDefinitions.js

@@ -28,9 +28,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var DSVirtualListDefinitions_exports = {};
 __export(DSVirtualListDefinitions_exports, {
-  DSVirtualListName: () => DSVirtualListName
+  DSVirtualListName: () => DSVirtualListName,
+  DSVirtualListSlots: () => DSVirtualListSlots
 });
 module.exports = __toCommonJS(DSVirtualListDefinitions_exports);
 var React = __toESM(require("react"));
 const DSVirtualListName = "DSVirtualList";
+const DSVirtualListSlots = {
+  ROOT: "root",
+  LIST_WRAPPER: "list-wrapper",
+  ITEM_WRAPPER: "item-wrapper"
+};
 //# sourceMappingURL=DSVirtualListDefinitions.js.map

package/dist/cjs/DSVirtualListDefinitions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSVirtualListDefinitions.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const DSVirtualListName = 'DSVirtualList';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,oBAAoB;",
+  "sourcesContent": ["export const DSVirtualListName = 'DSVirtualList';\n\nexport const DSVirtualListSlots = {\n  ROOT: 'root',\n  LIST_WRAPPER: 'list-wrapper',\n  ITEM_WRAPPER: 'item-wrapper',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,oBAAoB;AAE1B,MAAM,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,cAAc;AAAA,EACd,cAAc;AAChB;",
   "names": []
 }

package/dist/cjs/hooks/useVirtualList.js

@@ -68,9 +68,17 @@ const useVirtualListV3 = (propsFromUser) => {
       filteredChildren,
       totalSize,
       instanceUid,
-      measureElement: useVirtualHelpers.measureElement
+      measureElement: useVirtualHelpers.measureElement,
+      propsWithDefault
     }),
-    [useVirtualHelpers.getVirtualItems, useVirtualHelpers.measureElement, filteredChildren, totalSize, instanceUid]
+    [
+      useVirtualHelpers.getVirtualItems,
+      useVirtualHelpers.measureElement,
+      filteredChildren,
+      totalSize,
+      instanceUid,
+      propsWithDefault
+    ]
   );
 };
 //# 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 { uid } from 'uid';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { type DSVirtualListT, DSVirtualListPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\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,8BAA6C;AAC7C,mCAA0E;AAC1E,8BAAiC;AAEjC,MAAM,eAAe,MAAM;AAoBpB,MAAM,mBAAmB,CAAC,kBAAwD;AAIvF,QAAM,uBAAmB,sDAA2D,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;",
+  "sourcesContent": ["import React from 'react';\nimport { uid } from 'uid';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { type DSVirtualListT, DSVirtualListPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\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  propsWithDefault: DSVirtualListT.InternalProps;\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      propsWithDefault,\n    }),\n    [\n      useVirtualHelpers.getVirtualItems,\n      useVirtualHelpers.measureElement,\n      filteredChildren,\n      totalSize,\n      instanceUid,\n      propsWithDefault,\n    ],\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,8BAA6C;AAC7C,mCAA0E;AAC1E,8BAAiC;AAEjC,MAAM,eAAe,MAAM;AAqBpB,MAAM,mBAAmB,CAAC,kBAAwD;AAIvF,QAAM,uBAAmB,sDAA2D,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,MAClC;AAAA,IACF;AAAA,IACA;AAAA,MACE,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": ["React"]
 }

package/dist/cjs/index.js

@@ -29,10 +29,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   DSVirtualList: () => import_VirtualList.DSVirtualList,
+  DSVirtualListName: () => import_DSVirtualListDefinitions.DSVirtualListName,
+  DSVirtualListSlots: () => import_DSVirtualListDefinitions.DSVirtualListSlots,
   DSVirtualListWithSchema: () => import_VirtualList.DSVirtualListWithSchema
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_VirtualList = require("./VirtualList.js");
+var import_DSVirtualListDefinitions = require("./DSVirtualListDefinitions.js");
 //# 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": ["// 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.js';\nexport { DSVirtualList, DSVirtualListWithSchema } from './VirtualList.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mCAAoC;AACpC,yBAAuD;",
+  "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.js';\nexport { DSVirtualList, DSVirtualListWithSchema } from './VirtualList.js';\nexport { DSVirtualListName, DSVirtualListSlots } from './DSVirtualListDefinitions.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mCAAoC;AACpC,yBAAuD;AACvD,sCAAsD;",
   "names": []
 }

package/dist/cjs/parts/List.js

@@ -34,57 +34,40 @@ 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_ds_utilities = require("@elliemae/ds-utilities");
 var import_VirtualListDataTestID = require("../VirtualListDataTestID.js");
 var import_useVirtualList = require("../hooks/useVirtualList.js");
+var import_styled = require("./styled.js");
 const List = (props) => {
-  const { parentRef, getVirtualItems, filteredChildren, totalSize, instanceUid, measureElement } = (0, import_useVirtualList.useVirtualListV3)(props);
+  const { parentRef, getVirtualItems, filteredChildren, totalSize, instanceUid, measureElement, propsWithDefault } = (0, import_useVirtualList.useVirtualListV3)(props);
   const virtualItems = getVirtualItems();
   const measureRef = import_react.default.useCallback(
     (node) => measureElement(node),
     [measureElement]
   );
+  const ownerPropsConfig = (0, import_ds_utilities.useOwnerProps)(propsWithDefault);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
+    import_styled.StyledWrapper,
     {
-      ref: parentRef,
+      innerRef: parentRef,
       "data-testid": import_VirtualListDataTestID.LIST_DATA_TESTID.CONTAINER,
       role: "list",
-      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"
+      ...ownerPropsConfig,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledListWrapper, { height: totalSize, ...ownerPropsConfig, children: virtualItems.map((virtualItem) => {
+        const { index, start, key } = virtualItem;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.StyledItemWrapper,
+          {
+            innerRef: measureRef,
+            "data-index": index,
+            start,
+            role: "listitem",
+            ...ownerPropsConfig,
+            children: filteredChildren[index]
           },
-          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}`
-            );
-          })
-        }
-      )
+          `${instanceUid}-item-${key}`
+        );
+      }) })
     },
     instanceUid
   );

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 { LIST_DATA_TESTID } from '../VirtualListDataTestID.js';\nimport { useVirtualListV3 } from '../hooks/useVirtualList.js';\nimport type { DSVirtualListT } from '../react-desc-prop-types.js';\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,KAAK;AAAA;AAAA,cAFlB,GAAG,oBAAoB;AAAA,YAG9B;AAAA,UAEJ,CAAC;AAAA;AAAA,MACH;AAAA;AAAA,IAtCK;AAAA,EAuCP;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport { useOwnerProps } from '@elliemae/ds-utilities';\nimport { LIST_DATA_TESTID } from '../VirtualListDataTestID.js';\nimport { useVirtualListV3 } from '../hooks/useVirtualList.js';\nimport type { DSVirtualListT } from '../react-desc-prop-types.js';\nimport { StyledWrapper, StyledListWrapper, StyledItemWrapper } from './styled.js';\n\nexport const List = (props: DSVirtualListT.Props) => {\n  const { parentRef, getVirtualItems, filteredChildren, totalSize, instanceUid, measureElement, propsWithDefault } =\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  const ownerPropsConfig = useOwnerProps(propsWithDefault);\n\n  return (\n    <StyledWrapper\n      key={instanceUid}\n      innerRef={parentRef}\n      data-testid={LIST_DATA_TESTID.CONTAINER}\n      role=\"list\"\n      {...ownerPropsConfig}\n    >\n      <StyledListWrapper height={totalSize} {...ownerPropsConfig}>\n        {virtualItems.map((virtualItem) => {\n          const { index, start, key } = virtualItem;\n          return (\n            <StyledItemWrapper\n              innerRef={measureRef}\n              data-index={index}\n              start={start}\n              role=\"listitem\"\n              key={`${instanceUid}-item-${key}`}\n              {...ownerPropsConfig}\n            >\n              {filteredChildren[index]}\n            </StyledItemWrapper>\n          );\n        })}\n      </StyledListWrapper>\n    </StyledWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BX;AA9BZ,mBAAkB;AAClB,0BAA8B;AAC9B,mCAAiC;AACjC,4BAAiC;AAEjC,oBAAoE;AAE7D,MAAM,OAAO,CAAC,UAAgC;AACnD,QAAM,EAAE,WAAW,iBAAiB,kBAAkB,WAAW,aAAa,gBAAgB,iBAAiB,QAC7G,wCAAiB,KAAK;AACxB,QAAM,eAAe,gBAAgB;AACrC,QAAM,aAA8C,aAAAA,QAAM;AAAA,IACxD,CAAC,SAAyB,eAAe,IAAI;AAAA,IAC7C,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,uBAAmB,mCAAc,gBAAgB;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,UAAU;AAAA,MACV,eAAa,8CAAiB;AAAA,MAC9B,MAAK;AAAA,MACJ,GAAG;AAAA,MAEJ,sDAAC,mCAAkB,QAAQ,WAAY,GAAG,kBACvC,uBAAa,IAAI,CAAC,gBAAgB;AACjC,cAAM,EAAE,OAAO,OAAO,IAAI,IAAI;AAC9B,eACE;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,cAAY;AAAA,YACZ;AAAA,YACA,MAAK;AAAA,YAEJ,GAAG;AAAA,YAEH,2BAAiB,KAAK;AAAA;AAAA,UAHlB,GAAG,oBAAoB;AAAA,QAI9B;AAAA,MAEJ,CAAC,GACH;AAAA;AAAA,IAtBK;AAAA,EAuBP;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/parts/styled.js

@@ -0,0 +1,57 @@
+"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(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styled_exports = {};
+__export(styled_exports, {
+  StyledItemWrapper: () => StyledItemWrapper,
+  StyledListWrapper: () => StyledListWrapper,
+  StyledWrapper: () => StyledWrapper
+});
+module.exports = __toCommonJS(styled_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_DSVirtualListDefinitions = require("../DSVirtualListDefinitions.js");
+const StyledWrapper = (0, import_ds_system.styled)("div", { name: import_DSVirtualListDefinitions.DSVirtualListName, slot: import_DSVirtualListDefinitions.DSVirtualListSlots.ROOT })`
+  width: 100%;
+  height: 100%;
+  padding-bottom: 0;
+  overflow: auto;
+`;
+const StyledListWrapper = (0, import_ds_system.styled)("div", { name: import_DSVirtualListDefinitions.DSVirtualListName, slot: import_DSVirtualListDefinitions.DSVirtualListSlots.LIST_WRAPPER })`
+  width: 100%;
+  height: ${({ height }) => `${height}px`};
+  position: relative;
+`;
+const StyledItemWrapper = (0, import_ds_system.styled)("div", { name: import_DSVirtualListDefinitions.DSVirtualListName, slot: import_DSVirtualListDefinitions.DSVirtualListSlots.ITEM_WRAPPER })`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  transform: ${({ start }) => `translateY(${start}px)`};
+`;
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSVirtualListName, DSVirtualListSlots } from '../DSVirtualListDefinitions.js';\n\nexport const StyledWrapper = styled('div', { name: DSVirtualListName, slot: DSVirtualListSlots.ROOT })`\n  width: 100%;\n  height: 100%;\n  padding-bottom: 0;\n  overflow: auto;\n`;\n\nexport const StyledListWrapper = styled('div', { name: DSVirtualListName, slot: DSVirtualListSlots.LIST_WRAPPER })<{\n  height: number;\n}>`\n  width: 100%;\n  height: ${({ height }) => `${height}px`};\n  position: relative;\n`;\n\nexport const StyledItemWrapper = styled('div', { name: DSVirtualListName, slot: DSVirtualListSlots.ITEM_WRAPPER })<{\n  start: number;\n}>`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  transform: ${({ start }) => `translateY(${start}px)`};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,sCAAsD;AAE/C,MAAM,oBAAgB,yBAAO,OAAO,EAAE,MAAM,mDAAmB,MAAM,mDAAmB,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9F,MAAM,wBAAoB,yBAAO,OAAO,EAAE,MAAM,mDAAmB,MAAM,mDAAmB,aAAa,CAAC;AAAA;AAAA,YAIrG,CAAC,EAAE,OAAO,MAAM,GAAG;AAAA;AAAA;AAIxB,MAAM,wBAAoB,yBAAO,OAAO,EAAE,MAAM,mDAAmB,MAAM,mDAAmB,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,eAOlG,CAAC,EAAE,MAAM,MAAM,cAAc;AAAA;",
+  "names": []
+}

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

@@ -34,8 +34,10 @@ __export(react_desc_prop_types_exports, {
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_DSVirtualListDefinitions = require("./DSVirtualListDefinitions.js");
 const defaultProps = {};
 const DSVirtualListPropTypes = {
+  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_DSVirtualListDefinitions.DSVirtualListName, import_DSVirtualListDefinitions.DSVirtualListSlots),
   children: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.node).description("Children list").isRequired,
   actionRef: import_ds_props_helpers.PropTypes.shape({
     current: import_ds_props_helpers.PropTypes.oneOfType([

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

@@ -1,7 +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 type React from 'react';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\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,8BAA0B;AA0BnB,MAAM,eAA4C,CAAC;AAEnD,MAAM,yBAAyB;AAAA,EACpC,UAAU,kCAAU,QAAQ,kCAAU,IAAI,EAAE,YAAY,eAAe,EAAE;AAAA,EACzE,WAAW,kCAAU,MAAM;AAAA,IACzB,SAAS,kCAAU,UAAU;AAAA,MAC3B,kCAAU,MAAM,CAAC,IAAI,CAAC;AAAA,MACtB,kCAAU,MAAM;AAAA,QACd,UAAU,kCAAU,KACjB,YAAY,mCAAmC,EAC/C,UAAU,2EAA2E;AAAA,MAC1F,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC,EAAE,YAAY,gDAAgD;AACjE;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type React from 'react';\nimport { PropTypes, getPropsPerSlotPropTypes } from '@elliemae/ds-props-helpers';\nimport { DSVirtualListName, DSVirtualListSlots } from './DSVirtualListDefinitions.js';\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 extends PropsForGlobalOnSlots<typeof DSVirtualListName, typeof DSVirtualListSlots> {\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  ...getPropsPerSlotPropTypes(DSVirtualListName, DSVirtualListSlots),\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,8BAAoD;AACpD,sCAAsD;AA0B/C,MAAM,eAA4C,CAAC;AAEnD,MAAM,yBAAyB;AAAA,EACpC,OAAG,kDAAyB,mDAAmB,kDAAkB;AAAA,EACjE,UAAU,kCAAU,QAAQ,kCAAU,IAAI,EAAE,YAAY,eAAe,EAAE;AAAA,EACzE,WAAW,kCAAU,MAAM;AAAA,IACzB,SAAS,kCAAU,UAAU;AAAA,MAC3B,kCAAU,MAAM,CAAC,IAAI,CAAC;AAAA,MACtB,kCAAU,MAAM;AAAA,QACd,UAAU,kCAAU,KACjB,YAAY,mCAAmC,EAC/C,UAAU,2EAA2E;AAAA,MAC1F,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC,EAAE,YAAY,gDAAgD;AACjE;",
   "names": []
 }

package/dist/esm/DSVirtualListDefinitions.js

@@ -1,6 +1,12 @@
 import * as React from "react";
 const DSVirtualListName = "DSVirtualList";
+const DSVirtualListSlots = {
+  ROOT: "root",
+  LIST_WRAPPER: "list-wrapper",
+  ITEM_WRAPPER: "item-wrapper"
+};
 export {
-  DSVirtualListName
+  DSVirtualListName,
+  DSVirtualListSlots
 };
 //# sourceMappingURL=DSVirtualListDefinitions.js.map

package/dist/esm/DSVirtualListDefinitions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSVirtualListDefinitions.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSVirtualListName = 'DSVirtualList';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,oBAAoB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSVirtualListName = 'DSVirtualList';\n\nexport const DSVirtualListSlots = {\n  ROOT: 'root',\n  LIST_WRAPPER: 'list-wrapper',\n  ITEM_WRAPPER: 'item-wrapper',\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,oBAAoB;AAE1B,MAAM,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,cAAc;AAAA,EACd,cAAc;AAChB;",
   "names": []
 }

package/dist/esm/hooks/useVirtualList.js

@@ -35,9 +35,17 @@ const useVirtualListV3 = (propsFromUser) => {
       filteredChildren,
       totalSize,
       instanceUid,
-      measureElement: useVirtualHelpers.measureElement
+      measureElement: useVirtualHelpers.measureElement,
+      propsWithDefault
     }),
-    [useVirtualHelpers.getVirtualItems, useVirtualHelpers.measureElement, filteredChildren, totalSize, instanceUid]
+    [
+      useVirtualHelpers.getVirtualItems,
+      useVirtualHelpers.measureElement,
+      filteredChildren,
+      totalSize,
+      instanceUid,
+      propsWithDefault
+    ]
   );
 };
 export {

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 { uid } from 'uid';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { type DSVirtualListT, DSVirtualListPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\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;",
+  "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-props-helpers';\nimport { type DSVirtualListT, DSVirtualListPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\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  propsWithDefault: DSVirtualListT.InternalProps;\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      propsWithDefault,\n    }),\n    [\n      useVirtualHelpers.getVirtualItems,\n      useVirtualHelpers.measureElement,\n      filteredChildren,\n      totalSize,\n      instanceUid,\n      propsWithDefault,\n    ],\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;AAqBpB,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,MAClC;AAAA,IACF;AAAA,IACA;AAAA,MACE,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": ["React"]
 }

package/dist/esm/index.js

@@ -1,8 +1,11 @@
 import * as React from "react";
 import {} from "./react-desc-prop-types.js";
 import { DSVirtualList, DSVirtualListWithSchema } from "./VirtualList.js";
+import { DSVirtualListName, DSVirtualListSlots } from "./DSVirtualListDefinitions.js";
 export {
   DSVirtualList,
+  DSVirtualListName,
+  DSVirtualListSlots,
   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", "// 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.js';\nexport { DSVirtualList, DSVirtualListWithSchema } from './VirtualList.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACIvB,eAAoC;AACpC,SAAS,eAAe,+BAA+B;",
+  "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.js';\nexport { DSVirtualList, DSVirtualListWithSchema } from './VirtualList.js';\nexport { DSVirtualListName, DSVirtualListSlots } from './DSVirtualListDefinitions.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,eAAoC;AACpC,SAAS,eAAe,+BAA+B;AACvD,SAAS,mBAAmB,0BAA0B;",
   "names": []
 }

package/dist/esm/parts/List.js

@@ -1,57 +1,40 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import React2 from "react";
+import { useOwnerProps } from "@elliemae/ds-utilities";
 import { LIST_DATA_TESTID } from "../VirtualListDataTestID.js";
 import { useVirtualListV3 } from "../hooks/useVirtualList.js";
+import { StyledWrapper, StyledListWrapper, StyledItemWrapper } from "./styled.js";
 const List = (props) => {
-  const { parentRef, getVirtualItems, filteredChildren, totalSize, instanceUid, measureElement } = useVirtualListV3(props);
+  const { parentRef, getVirtualItems, filteredChildren, totalSize, instanceUid, measureElement, propsWithDefault } = useVirtualListV3(props);
   const virtualItems = getVirtualItems();
   const measureRef = React2.useCallback(
     (node) => measureElement(node),
     [measureElement]
   );
+  const ownerPropsConfig = useOwnerProps(propsWithDefault);
   return /* @__PURE__ */ jsx(
-    "div",
+    StyledWrapper,
     {
-      ref: parentRef,
+      innerRef: parentRef,
       "data-testid": LIST_DATA_TESTID.CONTAINER,
       role: "list",
-      style: {
-        width: "100%",
-        height: "100%",
-        paddingBottom: 0,
-        overflow: "auto"
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            width: "100%",
-            height: `${totalSize}px`,
-            position: "relative"
+      ...ownerPropsConfig,
+      children: /* @__PURE__ */ jsx(StyledListWrapper, { height: totalSize, ...ownerPropsConfig, children: virtualItems.map((virtualItem) => {
+        const { index, start, key } = virtualItem;
+        return /* @__PURE__ */ jsx(
+          StyledItemWrapper,
+          {
+            innerRef: measureRef,
+            "data-index": index,
+            start,
+            role: "listitem",
+            ...ownerPropsConfig,
+            children: filteredChildren[index]
           },
-          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}`
-            );
-          })
-        }
-      )
+          `${instanceUid}-item-${key}`
+        );
+      }) })
     },
     instanceUid
   );

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 { LIST_DATA_TESTID } from '../VirtualListDataTestID.js';\nimport { useVirtualListV3 } from '../hooks/useVirtualList.js';\nimport type { DSVirtualListT } from '../react-desc-prop-types.js';\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,KAAK;AAAA;AAAA,cAFlB,GAAG,oBAAoB;AAAA,YAG9B;AAAA,UAEJ,CAAC;AAAA;AAAA,MACH;AAAA;AAAA,IAtCK;AAAA,EAuCP;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useOwnerProps } from '@elliemae/ds-utilities';\nimport { LIST_DATA_TESTID } from '../VirtualListDataTestID.js';\nimport { useVirtualListV3 } from '../hooks/useVirtualList.js';\nimport type { DSVirtualListT } from '../react-desc-prop-types.js';\nimport { StyledWrapper, StyledListWrapper, StyledItemWrapper } from './styled.js';\n\nexport const List = (props: DSVirtualListT.Props) => {\n  const { parentRef, getVirtualItems, filteredChildren, totalSize, instanceUid, measureElement, propsWithDefault } =\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  const ownerPropsConfig = useOwnerProps(propsWithDefault);\n\n  return (\n    <StyledWrapper\n      key={instanceUid}\n      innerRef={parentRef}\n      data-testid={LIST_DATA_TESTID.CONTAINER}\n      role=\"list\"\n      {...ownerPropsConfig}\n    >\n      <StyledListWrapper height={totalSize} {...ownerPropsConfig}>\n        {virtualItems.map((virtualItem) => {\n          const { index, start, key } = virtualItem;\n          return (\n            <StyledItemWrapper\n              innerRef={measureRef}\n              data-index={index}\n              start={start}\n              role=\"listitem\"\n              key={`${instanceUid}-item-${key}`}\n              {...ownerPropsConfig}\n            >\n              {filteredChildren[index]}\n            </StyledItemWrapper>\n          );\n        })}\n      </StyledListWrapper>\n    </StyledWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC8BX;AA9BZ,OAAOA,YAAW;AAClB,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAEjC,SAAS,eAAe,mBAAmB,yBAAyB;AAE7D,MAAM,OAAO,CAAC,UAAgC;AACnD,QAAM,EAAE,WAAW,iBAAiB,kBAAkB,WAAW,aAAa,gBAAgB,iBAAiB,IAC7G,iBAAiB,KAAK;AACxB,QAAM,eAAe,gBAAgB;AACrC,QAAM,aAA8CA,OAAM;AAAA,IACxD,CAAC,SAAyB,eAAe,IAAI;AAAA,IAC7C,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,mBAAmB,cAAc,gBAAgB;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,UAAU;AAAA,MACV,eAAa,iBAAiB;AAAA,MAC9B,MAAK;AAAA,MACJ,GAAG;AAAA,MAEJ,8BAAC,qBAAkB,QAAQ,WAAY,GAAG,kBACvC,uBAAa,IAAI,CAAC,gBAAgB;AACjC,cAAM,EAAE,OAAO,OAAO,IAAI,IAAI;AAC9B,eACE;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,cAAY;AAAA,YACZ;AAAA,YACA,MAAK;AAAA,YAEJ,GAAG;AAAA,YAEH,2BAAiB,KAAK;AAAA;AAAA,UAHlB,GAAG,oBAAoB;AAAA,QAI9B;AAAA,MAEJ,CAAC,GACH;AAAA;AAAA,IAtBK;AAAA,EAuBP;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/styled.js

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { styled } from "@elliemae/ds-system";
+import { DSVirtualListName, DSVirtualListSlots } from "../DSVirtualListDefinitions.js";
+const StyledWrapper = styled("div", { name: DSVirtualListName, slot: DSVirtualListSlots.ROOT })`
+  width: 100%;
+  height: 100%;
+  padding-bottom: 0;
+  overflow: auto;
+`;
+const StyledListWrapper = styled("div", { name: DSVirtualListName, slot: DSVirtualListSlots.LIST_WRAPPER })`
+  width: 100%;
+  height: ${({ height }) => `${height}px`};
+  position: relative;
+`;
+const StyledItemWrapper = styled("div", { name: DSVirtualListName, slot: DSVirtualListSlots.ITEM_WRAPPER })`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  transform: ${({ start }) => `translateY(${start}px)`};
+`;
+export {
+  StyledItemWrapper,
+  StyledListWrapper,
+  StyledWrapper
+};
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/styled.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSVirtualListName, DSVirtualListSlots } from '../DSVirtualListDefinitions.js';\n\nexport const StyledWrapper = styled('div', { name: DSVirtualListName, slot: DSVirtualListSlots.ROOT })`\n  width: 100%;\n  height: 100%;\n  padding-bottom: 0;\n  overflow: auto;\n`;\n\nexport const StyledListWrapper = styled('div', { name: DSVirtualListName, slot: DSVirtualListSlots.LIST_WRAPPER })<{\n  height: number;\n}>`\n  width: 100%;\n  height: ${({ height }) => `${height}px`};\n  position: relative;\n`;\n\nexport const StyledItemWrapper = styled('div', { name: DSVirtualListName, slot: DSVirtualListSlots.ITEM_WRAPPER })<{\n  start: number;\n}>`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  transform: ${({ start }) => `translateY(${start}px)`};\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,mBAAmB,0BAA0B;AAE/C,MAAM,gBAAgB,OAAO,OAAO,EAAE,MAAM,mBAAmB,MAAM,mBAAmB,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9F,MAAM,oBAAoB,OAAO,OAAO,EAAE,MAAM,mBAAmB,MAAM,mBAAmB,aAAa,CAAC;AAAA;AAAA,YAIrG,CAAC,EAAE,OAAO,MAAM,GAAG;AAAA;AAAA;AAIxB,MAAM,oBAAoB,OAAO,OAAO,EAAE,MAAM,mBAAmB,MAAM,mBAAmB,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,eAOlG,CAAC,EAAE,MAAM,MAAM,cAAc;AAAA;",
+  "names": []
+}

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

@@ -1,7 +1,9 @@
 import * as React from "react";
-import { PropTypes } from "@elliemae/ds-props-helpers";
+import { PropTypes, getPropsPerSlotPropTypes } from "@elliemae/ds-props-helpers";
+import { DSVirtualListName, DSVirtualListSlots } from "./DSVirtualListDefinitions.js";
 const defaultProps = {};
 const DSVirtualListPropTypes = {
+  ...getPropsPerSlotPropTypes(DSVirtualListName, DSVirtualListSlots),
   children: PropTypes.arrayOf(PropTypes.node).description("Children list").isRequired,
   actionRef: PropTypes.shape({
     current: PropTypes.oneOfType([

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

@@ -1,7 +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 type React from 'react';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type React from 'react';\nimport { PropTypes, getPropsPerSlotPropTypes } from '@elliemae/ds-props-helpers';\nimport { DSVirtualListName, DSVirtualListSlots } from './DSVirtualListDefinitions.js';\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 extends PropsForGlobalOnSlots<typeof DSVirtualListName, typeof DSVirtualListSlots> {\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  ...getPropsPerSlotPropTypes(DSVirtualListName, DSVirtualListSlots),\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,WAAW,gCAAgC;AACpD,SAAS,mBAAmB,0BAA0B;AA0B/C,MAAM,eAA4C,CAAC;AAEnD,MAAM,yBAAyB;AAAA,EACpC,GAAG,yBAAyB,mBAAmB,kBAAkB;AAAA,EACjE,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/dist/types/DSVirtualListDefinitions.d.ts

@@ -1 +1,6 @@
 export declare const DSVirtualListName = "DSVirtualList";
+export declare const DSVirtualListSlots: {
+    ROOT: string;
+    LIST_WRAPPER: string;
+    ITEM_WRAPPER: string;
+};

package/dist/types/hooks/useVirtualList.d.ts

@@ -15,6 +15,7 @@ export type VirtualListCTX = {
     totalSize: number;
     instanceUid: string;
     measureElement: MeasureElement;
+    propsWithDefault: DSVirtualListT.InternalProps;
 };
 export declare const useVirtualListV3: (propsFromUser: DSVirtualListT.Props) => VirtualListCTX;
 export {};

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 export { type DSVirtualListT } from './react-desc-prop-types.js';
 export { DSVirtualList, DSVirtualListWithSchema } from './VirtualList.js';
+export { DSVirtualListName, DSVirtualListSlots } from './DSVirtualListDefinitions.js';

package/dist/types/parts/styled.d.ts

@@ -0,0 +1,7 @@
+export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledListWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
+    height: number;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledItemWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
+    start: number;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;

package/dist/types/react-desc-prop-types.d.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+import { DSVirtualListName, DSVirtualListSlots } from './DSVirtualListDefinitions.js';
 export declare namespace DSVirtualListT {
     type ScrollAlignment = 'start' | 'center' | 'end' | 'auto';
     type ScrollToOptions = {
@@ -12,7 +13,7 @@ export declare namespace DSVirtualListT {
     }
     interface DefaultProps {
     }
-    interface OptionalProps {
+    interface OptionalProps extends PropsForGlobalOnSlots<typeof DSVirtualListName, typeof DSVirtualListSlots> {
         actionRef: React.MutableRefObject<ActionRef>;
     }
     interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-virtual-list",
-  "version": "3.27.0-next.2",
+  "version": "3.27.0-next.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Virtual List",
   "files": [
@@ -63,14 +63,15 @@
     "@xstyled/system": "3.7.0",
     "axe-core": "^4.6.3",
     "uid": "^2.0.1",
-    "@elliemae/ds-props-helpers": "3.27.0-next.2",
-    "@elliemae/ds-system": "3.27.0-next.2"
+    "@elliemae/ds-props-helpers": "3.27.0-next.3",
+    "@elliemae/ds-utilities": "3.27.0-next.3",
+    "@elliemae/ds-system": "3.27.0-next.3"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "~9.0.0-next.31",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.27.0-next.2",
-    "@elliemae/ds-test-utils": "3.27.0-next.2"
+    "@elliemae/ds-monorepo-devops": "3.27.0-next.3",
+    "@elliemae/ds-test-utils": "3.27.0-next.3"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",