@elliemae/ds-fast-list 3.31.4 → 3.32.0-rc.2

package/dist/cjs/DSFastListDefinitions.js

@@ -28,9 +28,18 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var DSFastListDefinitions_exports = {};
 __export(DSFastListDefinitions_exports, {
-  DSFastListName: () => DSFastListName
+  DSCardV3DataTestIds: () => DSCardV3DataTestIds,
+  DSFastListName: () => DSFastListName,
+  DSFastListSlots: () => DSFastListSlots
 });
 module.exports = __toCommonJS(DSFastListDefinitions_exports);
 var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
 const DSFastListName = "DSFastList";
+const DSFastListSlots = {
+  CONTAINER: "container",
+  WRAPPER_LIST: "wrapper-list",
+  ITEM: "item"
+};
+const DSCardV3DataTestIds = (0, import_ds_system.slotObjectToDataTestIds)(DSFastListName, DSFastListSlots);
 //# sourceMappingURL=DSFastListDefinitions.js.map

package/dist/cjs/DSFastListDefinitions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSFastListDefinitions.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const DSFastListName = 'DSFastList';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,iBAAiB;",
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFastListName = 'DSFastList';\nexport const DSFastListSlots = {\n  CONTAINER: 'container',\n  WRAPPER_LIST: 'wrapper-list',\n  ITEM: 'item',\n};\n\nexport const DSCardV3DataTestIds = slotObjectToDataTestIds(DSFastListName, DSFastListSlots);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,cAAc;AAAA,EACd,MAAM;AACR;AAEO,MAAM,0BAAsB,0CAAwB,gBAAgB,eAAe;",
   "names": []
 }

package/dist/cjs/FastList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/FastList.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { List } from './parts/List.js';\nimport { DSFastListPropTypes, type DSFastListT } from './react-desc-prop-types.js';\nimport { DSFastListName } from './DSFastListDefinitions.js';\n\n// we create ds-fast-list to solve the issue with the children prop in ds-virtual-list\n// this packages use render props instead of children prop.\n// we are not using a context nor zustand so all the logic is handled in List...\nconst DSFastList = (props: DSFastListT.Props) => <List {...props} />;\n\nDSFastList.propTypes = DSFastListPropTypes;\nDSFastList.displayName = DSFastListName;\nconst DSFastListWithSchema = describe(DSFastList).description('DSFastList');\nDSFastListWithSchema.propTypes = DSFastListPropTypes;\n\nexport { DSFastList, DSFastListWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADS0B;AARjD,8BAAyB;AACzB,kBAAqB;AACrB,mCAAsD;AACtD,mCAA+B;AAK/B,MAAM,aAAa,CAAC,UAA6B,4CAAC,oBAAM,GAAG,OAAO;AAElE,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU,EAAE,YAAY,YAAY;AAC1E,qBAAqB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { List } from './parts/List.js';\nimport { DSFastListPropTypes, type DSFastListT } from './react-desc-prop-types.js';\nimport { DSFastListName } from './DSFastListDefinitions.js';\n\n// we create ds-fast-list to solve the issue with the children prop in ds-virtual-list\n// this packages use render props instead of children prop.\n// we are not using a context nor zustand so all the logic is handled in List...\nconst DSFastList = <T extends object>(props: DSFastListT.Props<T>) => <List {...props} />;\n\nDSFastList.propTypes = DSFastListPropTypes;\nDSFastList.displayName = DSFastListName;\nconst DSFastListWithSchema = describe(DSFastList).description('DSFastList');\nDSFastListWithSchema.propTypes = DSFastListPropTypes;\n\nexport { DSFastList, DSFastListWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADS+C;AARtE,8BAAyB;AACzB,kBAAqB;AACrB,mCAAsD;AACtD,mCAA+B;AAK/B,MAAM,aAAa,CAAmB,UAAgC,4CAAC,oBAAM,GAAG,OAAO;AAEvF,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU,EAAE,YAAY,YAAY;AAC1E,qBAAqB,YAAY;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useFastList.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 DSFastListT, DSFastListPropTypes, 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 FastListCTX = {\n  parentRef: React.MutableRefObject<HTMLDivElement | null>;\n  getVirtualItems: () => VirtualItem[];\n  totalSize: number;\n  instanceUid: string;\n  measureElement: MeasureElement;\n};\nexport const useFastList = (propsFromUser: DSFastListT.Props): FastListCTX => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSFastListT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSFastListPropTypes);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const { actionRef, count } = propsWithDefault;\n  const parentRef = React.useRef<HTMLDivElement>(null);\n  const useVirtualHelpers = useVirtualizer({\n    count,\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-fast-list-${uid(6)}`, []);\n  return React.useMemo(\n    () => ({\n      parentRef,\n      getVirtualItems: useVirtualHelpers.getVirtualItems,\n      totalSize,\n      instanceUid,\n      measureElement: useVirtualHelpers.measureElement,\n    }),\n    [useVirtualHelpers.getVirtualItems, useVirtualHelpers.measureElement, 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,mCAAoE;AACpE,8BAAiC;AAEjC,MAAM,eAAe,MAAM;AAmBpB,MAAM,cAAc,CAAC,kBAAkD;AAI5E,QAAM,uBAAmB,sDAAwD,eAAe,yCAAY;AAC5G,gDAAiB,kBAAkB,gDAAmB;AAItD,QAAM,EAAE,WAAW,MAAM,IAAI;AAC7B,QAAM,YAAY,aAAAA,QAAM,OAAuB,IAAI;AACnD,QAAM,wBAAoB,qCAAe;AAAA,IACvC;AAAA,IACA,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,oBAAgB,gBAAI,CAAC,KAAK,CAAC,CAAC;AACpE,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA,iBAAiB,kBAAkB;AAAA,MACnC;AAAA,MACA;AAAA,MACA,gBAAgB,kBAAkB;AAAA,IACpC;AAAA,IACA,CAAC,kBAAkB,iBAAiB,kBAAkB,gBAAgB,WAAW,WAAW;AAAA,EAC9F;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 DSFastListT, DSFastListPropTypes, 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 FastListCTX = {\n  parentRef: React.MutableRefObject<HTMLDivElement | null>;\n  getVirtualItems: () => VirtualItem[];\n  totalSize: number;\n  instanceUid: string;\n  measureElement: MeasureElement;\n};\nexport const useFastList = <T,>(propsFromUser: DSFastListT.Props<T>): FastListCTX => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSFastListT.InternalProps<T>>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSFastListPropTypes);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const { actionRef, count } = propsWithDefault;\n  const parentRef = React.useRef<HTMLDivElement>(null);\n  const useVirtualHelpers = useVirtualizer({\n    count,\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-fast-list-${uid(6)}`, []);\n  return React.useMemo(\n    () => ({\n      parentRef,\n      getVirtualItems: useVirtualHelpers.getVirtualItems,\n      totalSize,\n      instanceUid,\n      measureElement: useVirtualHelpers.measureElement,\n    }),\n    [useVirtualHelpers.getVirtualItems, useVirtualHelpers.measureElement, 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,mCAAoE;AACpE,8BAAiC;AAEjC,MAAM,eAAe,MAAM;AAmBpB,MAAM,cAAc,CAAK,kBAAqD;AAInF,QAAM,uBAAmB,sDAA2D,eAAe,yCAAY;AAC/G,gDAAiB,kBAAkB,gDAAmB;AAItD,QAAM,EAAE,WAAW,MAAM,IAAI;AAC7B,QAAM,YAAY,aAAAA,QAAM,OAAuB,IAAI;AACnD,QAAM,wBAAoB,qCAAe;AAAA,IACvC;AAAA,IACA,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,oBAAgB,gBAAI,CAAC,KAAK,CAAC,CAAC;AACpE,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA,iBAAiB,kBAAkB;AAAA,MACnC;AAAA,MACA;AAAA,MACA,gBAAgB,kBAAkB;AAAA,IACpC;AAAA,IACA,CAAC,kBAAkB,iBAAiB,kBAAkB,gBAAgB,WAAW,WAAW;AAAA,EAC9F;AACF;",
   "names": ["React"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useValidateProps.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport { type DSFastListT } from '../react-desc-prop-types.js';\nimport { DSFastListName } from '../DSFastListDefinitions.js';\n\nexport const useValidateProps = (props: DSFastListT.InternalProps, propTypes: WeakValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSFastListName);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA+C;AAG/C,mCAA+B;AAExB,MAAM,mBAAmB,CAAC,OAAkC,cAAgD;AAEjH,8DAA+B,OAAO,WAAW,2CAAc;AACjE;",
+  "sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport { type DSFastListT } from '../react-desc-prop-types.js';\nimport { DSFastListName } from '../DSFastListDefinitions.js';\n\nexport const useValidateProps = <T>(\n  props: DSFastListT.InternalProps<T>,\n  propTypes: WeakValidationMap<unknown>,\n): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSFastListName);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA+C;AAG/C,mCAA+B;AAExB,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,8DAA+B,OAAO,WAAW,2CAAc;AACjE;",
   "names": []
 }

package/dist/cjs/parts/List.js

@@ -34,9 +34,35 @@ 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_FastListDataTestID = require("../FastListDataTestID.js");
+var import_ds_system = require("@elliemae/ds-system");
 var import_useFastList = require("../hooks/useFastList.js");
-const List = import_react.default.memo((props) => {
+var import_DSFastListDefinitions = require("../DSFastListDefinitions.js");
+const StyledList = (0, import_ds_system.styled)("div", {
+  name: import_DSFastListDefinitions.DSFastListName,
+  slot: import_DSFastListDefinitions.DSFastListSlots.WRAPPER_LIST
+})`
+  width: 100%;
+  position: relative;
+`;
+const StyledListItem = (0, import_ds_system.styled)("div", {
+  name: import_DSFastListDefinitions.DSFastListName,
+  slot: import_DSFastListDefinitions.DSFastListSlots.ITEM
+})`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+`;
+const StyledListContainer = (0, import_ds_system.styled)("div", {
+  name: import_DSFastListDefinitions.DSFastListName,
+  slot: import_DSFastListDefinitions.DSFastListSlots.CONTAINER
+})`
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+  padding-bottom: 0;
+`;
+const List = (props) => {
   const { parentRef, getVirtualItems, totalSize, instanceUid, measureElement } = (0, import_useFastList.useFastList)(props);
   const { ItemRenderer, extraItemProps, getId } = props;
   const virtualItems = getVirtualItems();
@@ -44,43 +70,33 @@ const List = import_react.default.memo((props) => {
     (node) => measureElement(node),
     [measureElement]
   );
+  const getOwnerProps = (0, import_react.useCallback)(() => props, [props]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
+    StyledListContainer,
     {
-      ref: parentRef,
-      "data-testid": import_FastListDataTestID.LIST_DATA_TESTID.CONTAINER,
-      style: {
-        width: "100%",
-        height: "100%",
-        paddingBottom: 0,
-        overflow: "auto"
-      },
+      innerRef: parentRef,
       tabIndex: -1,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
+        StyledList,
         {
           style: {
-            width: "100%",
-            height: `${totalSize}px`,
-            position: "relative"
+            height: `${totalSize}px`
           },
           role: "list",
+          getOwnerProps,
           children: virtualItems.map((virtualItem) => {
             const { index, start } = virtualItem;
             return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "div",
+              StyledListItem,
               {
-                ref: measureRef,
+                innerRef: measureRef,
                 "data-index": index,
                 style: {
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  width: "100%",
                   transform: `translateY(${start}px)`
                 },
                 role: "listitem",
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemRenderer, { index, ...extraItemProps })
+                getOwnerProps,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemRenderer, { extraItemProps, index })
               },
               getId(index)
             );
@@ -90,5 +106,5 @@ const List = import_react.default.memo((props) => {
     },
     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 { LIST_DATA_TESTID } from '../FastListDataTestID.js';\nimport { useFastList } from '../hooks/useFastList.js';\nimport type { DSFastListT } from '../react-desc-prop-types.js';\n\nexport const List = React.memo((props: DSFastListT.Props) => {\n  const { parentRef, getVirtualItems, totalSize, instanceUid, measureElement } = useFastList(props);\n  const { ItemRenderer, extraItemProps, getId } = props;\n\n  const virtualItems = getVirtualItems();\n  const measureRef: React.LegacyRef<HTMLDivElement> = React.useCallback(\n    (node: HTMLDivElement) => measureElement(node),\n    [measureElement],\n  );\n  return (\n    <div\n      key={instanceUid}\n      ref={parentRef}\n      data-testid={LIST_DATA_TESTID.CONTAINER}\n      style={{\n        width: '100%',\n        height: '100%',\n        paddingBottom: 0,\n        overflow: 'auto',\n      }}\n      // firefox needs this tabIndex to prevent scrolling\n      tabIndex={-1}\n    >\n      <div\n        style={{\n          width: '100%',\n          height: `${totalSize}px`,\n          position: 'relative',\n        }}\n        role=\"list\"\n      >\n        {virtualItems.map((virtualItem) => {\n          const { index, start } = 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={getId(index)}\n            >\n              <ItemRenderer index={index} {...extraItemProps} />\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;ADoDT;AApDd,mBAAkB;AAClB,gCAAiC;AACjC,yBAA4B;AAGrB,MAAM,OAAO,aAAAA,QAAM,KAAK,CAAC,UAA6B;AAC3D,QAAM,EAAE,WAAW,iBAAiB,WAAW,aAAa,eAAe,QAAI,gCAAY,KAAK;AAChG,QAAM,EAAE,cAAc,gBAAgB,MAAM,IAAI;AAEhD,QAAM,eAAe,gBAAgB;AACrC,QAAM,aAA8C,aAAAA,QAAM;AAAA,IACxD,CAAC,SAAyB,eAAe,IAAI;AAAA,IAC7C,CAAC,cAAc;AAAA,EACjB;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,KAAK;AAAA,MACL,eAAa,2CAAiB;AAAA,MAC9B,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,eAAe;AAAA,QACf,UAAU;AAAA,MACZ;AAAA,MAEA,UAAU;AAAA,MAEV;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,OAAO;AAAA,YACP,QAAQ,GAAG;AAAA,YACX,UAAU;AAAA,UACZ;AAAA,UACA,MAAK;AAAA,UAEJ,uBAAa,IAAI,CAAC,gBAAgB;AACjC,kBAAM,EAAE,OAAO,MAAM,IAAI;AACzB,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,gBAGL,sDAAC,gBAAa,OAAe,GAAG,gBAAgB;AAAA;AAAA,cAF3C,MAAM,KAAK;AAAA,YAGlB;AAAA,UAEJ,CAAC;AAAA;AAAA,MACH;AAAA;AAAA,IAxCK;AAAA,EAyCP;AAEJ,CAAC;",
+  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { useFastList } from '../hooks/useFastList.js';\nimport type { DSFastListT } from '../react-desc-prop-types.js';\nimport { DSFastListName, DSFastListSlots } from '../DSFastListDefinitions.js';\nconst StyledList = styled('div', {\n  name: DSFastListName,\n  slot: DSFastListSlots.WRAPPER_LIST,\n})`\n  width: 100%;\n  position: relative;\n`;\n\nconst StyledListItem = styled('div', {\n  name: DSFastListName,\n  slot: DSFastListSlots.ITEM,\n})`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n`;\n\nconst StyledListContainer = styled('div', {\n  name: DSFastListName,\n  slot: DSFastListSlots.CONTAINER,\n})`\n  overflow: auto;\n  width: 100%;\n  height: 100%;\n  padding-bottom: 0;\n`;\n\nexport const List = <T extends object>(props: DSFastListT.Props<T>) => {\n  const { parentRef, getVirtualItems, totalSize, instanceUid, measureElement } = useFastList(props);\n  const { ItemRenderer, extraItemProps, getId } = props;\n\n  const virtualItems = getVirtualItems();\n  const measureRef: React.LegacyRef<HTMLDivElement> = React.useCallback(\n    (node: HTMLDivElement) => measureElement(node),\n    [measureElement],\n  );\n\n  const getOwnerProps = useCallback(() => props, [props]);\n\n  return (\n    <StyledListContainer\n      key={instanceUid}\n      innerRef={parentRef}\n      // firefox needs this tabIndex to prevent scrolling\n      tabIndex={-1}\n    >\n      <StyledList\n        style={{\n          height: `${totalSize}px`,\n        }}\n        role=\"list\"\n        getOwnerProps={getOwnerProps}\n      >\n        {virtualItems.map((virtualItem) => {\n          const { index, start } = virtualItem;\n          return (\n            <StyledListItem\n              innerRef={measureRef}\n              data-index={index}\n              style={{\n                transform: `translateY(${start}px)`,\n              }}\n              role=\"listitem\"\n              key={getId(index)}\n              getOwnerProps={getOwnerProps}\n            >\n              <ItemRenderer extraItemProps={extraItemProps} index={index} />\n            </StyledListItem>\n          );\n        })}\n      </StyledList>\n    </StyledListContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwET;AAxEd,mBAAmC;AACnC,uBAAuB;AACvB,yBAA4B;AAE5B,mCAAgD;AAChD,MAAM,iBAAa,yBAAO,OAAO;AAAA,EAC/B,MAAM;AAAA,EACN,MAAM,6CAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAKD,MAAM,qBAAiB,yBAAO,OAAO;AAAA,EACnC,MAAM;AAAA,EACN,MAAM,6CAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOD,MAAM,0BAAsB,yBAAO,OAAO;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,6CAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,OAAO,CAAmB,UAAgC;AACrE,QAAM,EAAE,WAAW,iBAAiB,WAAW,aAAa,eAAe,QAAI,gCAAY,KAAK;AAChG,QAAM,EAAE,cAAc,gBAAgB,MAAM,IAAI;AAEhD,QAAM,eAAe,gBAAgB;AACrC,QAAM,aAA8C,aAAAA,QAAM;AAAA,IACxD,CAAC,SAAyB,eAAe,IAAI;AAAA,IAC7C,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,oBAAgB,0BAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AAEtD,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,UAAU;AAAA,MAEV,UAAU;AAAA,MAEV;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,QAAQ,GAAG;AAAA,UACb;AAAA,UACA,MAAK;AAAA,UACL;AAAA,UAEC,uBAAa,IAAI,CAAC,gBAAgB;AACjC,kBAAM,EAAE,OAAO,MAAM,IAAI;AACzB,mBACE;AAAA,cAAC;AAAA;AAAA,gBACC,UAAU;AAAA,gBACV,cAAY;AAAA,gBACZ,OAAO;AAAA,kBACL,WAAW,cAAc;AAAA,gBAC3B;AAAA,gBACA,MAAK;AAAA,gBAEL;AAAA,gBAEA,sDAAC,gBAAa,gBAAgC,OAAc;AAAA;AAAA,cAHvD,MAAM,KAAK;AAAA,YAIlB;AAAA,UAEJ,CAAC;AAAA;AAAA,MACH;AAAA;AAAA,IA7BK;AAAA,EA8BP;AAEJ;",
   "names": ["React"]
 }

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

@@ -48,6 +48,7 @@ const DSFastListPropTypes = {
     "Render function for each item"
   ),
   count: import_ds_props_helpers.PropTypes.number.isRequired.description("Number of items to render"),
-  extraItemProps: import_ds_props_helpers.PropTypes.object.description("Extra props to pass to each item")
+  extraItemProps: import_ds_props_helpers.PropTypes.object.description("Extra props to pass to each item"),
+  getId: import_ds_props_helpers.PropTypes.func.isRequired.description("Function to get the key for each item")
 };
 //# sourceMappingURL=react-desc-prop-types.js.map

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 DSFastListT {\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    ItemRenderer: React.ComponentType<{ index: number }>;\n    count: number;\n    getId: (index: number) => string | number;\n  }\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps {\n    actionRef?: React.MutableRefObject<ActionRef>;\n    extraItemProps?: Record<string, unknown>;\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: DSFastListT.DefaultProps = {};\n\nexport const DSFastListPropTypes = {\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  ItemRenderer: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired.description(\n    'Render function for each item',\n  ),\n  count: PropTypes.number.isRequired.description('Number of items to render'),\n  extraItemProps: PropTypes.object.description('Extra props to pass to each item'),\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;AA6BnB,MAAM,eAAyC,CAAC;AAEhD,MAAM,sBAAsB;AAAA,EACjC,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;AAAA,EAC/D,cAAc,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,WAAW;AAAA,IAC/E;AAAA,EACF;AAAA,EACA,OAAO,kCAAU,OAAO,WAAW,YAAY,2BAA2B;AAAA,EAC1E,gBAAgB,kCAAU,OAAO,YAAY,kCAAkC;AACjF;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type React from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSFastListSlots, DSFastListName } from './DSFastListDefinitions.js';\nexport declare namespace DSFastListT {\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\n  export interface OptionalProps<T>\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFastListName, typeof DSFastListSlots> {\n    actionRef?: React.MutableRefObject<ActionRef>;\n    extraItemProps?: T;\n  }\n\n  export interface RequiredProps<T> {\n    ItemRenderer: React.ComponentType<{ index: number; extraItemProps?: T }>;\n    count: number;\n    getId: (index: number) => string | number;\n  }\n\n  export interface DefaultProps {}\n\n  type PropsT<D, R, O> = Partial<D> & R & O;\n  type InternalPropsT<D, R, O> = D & R & O;\n\n  export type Props<T> = PropsT<DefaultProps, RequiredProps<T>, OptionalProps<T>>;\n  export type InternalProps<T> = InternalPropsT<DefaultProps, RequiredProps<T>, OptionalProps<T>>;\n}\n\nexport const defaultProps: DSFastListT.DefaultProps = {};\n\nexport const DSFastListPropTypes = {\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  ItemRenderer: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired.description(\n    'Render function for each item',\n  ),\n  count: PropTypes.number.isRequired.description('Number of items to render'),\n  extraItemProps: PropTypes.object.description('Extra props to pass to each item'),\n  getId: PropTypes.func.isRequired.description('Function to get the key for each item'),\n} as React.WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAA0B;AAiCnB,MAAM,eAAyC,CAAC;AAEhD,MAAM,sBAAsB;AAAA,EACjC,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;AAAA,EAC/D,cAAc,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,WAAW;AAAA,IAC/E;AAAA,EACF;AAAA,EACA,OAAO,kCAAU,OAAO,WAAW,YAAY,2BAA2B;AAAA,EAC1E,gBAAgB,kCAAU,OAAO,YAAY,kCAAkC;AAAA,EAC/E,OAAO,kCAAU,KAAK,WAAW,YAAY,uCAAuC;AACtF;",
   "names": []
 }

package/dist/cjs/typescript-testing/typescript-fast-list-valid.js

@@ -25,6 +25,8 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import__ = require("../index.js");
+const data = [1, 2, 3];
+const extraProps = { data };
 const MockItemRenderer = ({ index }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {});
 const actionRef = (0, import_react.createRef)();
 const testRequiredProps = {
@@ -34,7 +36,7 @@ const testRequiredProps = {
 };
 const testOptionalProps = {
   actionRef,
-  extraItemProps: { foo: "bar" }
+  extraItemProps: { data }
 };
 const testPartialDefaults = {};
 const testProps = {
@@ -63,14 +65,14 @@ const testExplicitDefinition = {
   count: 0,
   getId: (index) => "",
   actionRef,
-  extraItemProps: { foo: "bar" }
+  extraItemProps: { data }
 };
 const testInferedTypeCompatibility = {
   ItemRenderer: MockItemRenderer,
   count: 0,
   getId: (index) => "",
   actionRef,
-  extraItemProps: { foo: "bar" }
+  extraItemProps: { data }
 };
 const testDefinitionAsConst = {
   ItemRenderer: MockItemRenderer,

package/dist/cjs/typescript-testing/typescript-fast-list-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-fast-list-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { type MutableRefObject, createRef } from 'react';\nimport { DSFastList } from '../index.js';\nimport type { DSFastListT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSFastListT.Props;\ntype ComponentPropsInternals = DSFastListT.InternalProps;\ntype ComponentPropsDefaultProps = DSFastListT.DefaultProps;\ntype ComponentPropsOptionalProps = DSFastListT.OptionalProps;\ntype ComponentPropsRequiredProps = DSFastListT.RequiredProps;\n\nconst MockItemRenderer = ({ index }: { index: number }) => <div></div>;\n\nconst actionRef = createRef() as MutableRefObject<{ scrollTo: (index: number) => void }>;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  ItemRenderer: MockItemRenderer,\n  count: 0,\n  getId: (index: number) => '',\n};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  actionRef: actionRef,\n  extraItemProps: { foo: 'bar' },\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  ItemRenderer: MockItemRenderer,\n  count: 0,\n  getId: (index: number) => '',\n  actionRef: actionRef,\n  extraItemProps: { foo: 'bar' },\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  ItemRenderer: MockItemRenderer,\n  count: 0,\n  getId: (index: number) => '',\n  actionRef: actionRef,\n  extraItemProps: { foo: 'bar' },\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  ItemRenderer: MockItemRenderer,\n  count: 0,\n  getId: (index: number) => '',\n  actionRef: actionRef,\n  extraItemProps: { foo: 'bar' },\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSFastList {...testExplicitDefinition} />\n    <DSFastList {...testInferedTypeCompatibility} />\n    <DSFastList {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSFastList\n      ItemRenderer={MockItemRenderer}\n      count={0}\n      getId={(index: number) => ''}\n      actionRef={actionRef}\n      extraItemProps={{ foo: 'bar' }}\n    />\n  </>\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACYoC;AAX3D,mBAAiD;AACjD,eAA2B;AAU3B,MAAM,mBAAmB,CAAC,EAAE,MAAM,MAAyB,4CAAC,SAAI;AAEhE,MAAM,gBAAY,wBAAU;AAE5B,MAAM,oBAAiD;AAAA,EACrD,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO,CAAC,UAAkB;AAC5B;AAEA,MAAM,oBAAiD;AAAA,EACrD;AAAA,EACA,gBAAgB,EAAE,KAAK,MAAM;AAC/B;AAIA,MAAM,sBAA2D,CAAC;AAElE,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D,CAAC;AAEpE,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO,CAAC,UAAkB;AAAA,EAC1B;AAAA,EACA,gBAAgB,EAAE,KAAK,MAAM;AAC/B;AAGA,MAAM,+BAA+B;AAAA,EACnC,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO,CAAC,UAAkB;AAAA,EAC1B;AAAA,EACA,gBAAgB,EAAE,KAAK,MAAM;AAC/B;AAEA,MAAM,wBAAwB;AAAA,EAC5B,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO,CAAC,UAAkB;AAAA,EAC1B;AAAA,EACA,gBAAgB,EAAE,KAAK,MAAM;AAC/B;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,uBAAY,GAAG,wBAAwB;AAAA,EACxC,4CAAC,uBAAY,GAAG,8BAA8B;AAAA,EAC9C,4CAAC,uBAAY,GAAG,uBAAuB;AAAA,EAEvC;AAAA,IAAC;AAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP,OAAO,CAAC,UAAkB;AAAA,MAC1B;AAAA,MACA,gBAAgB,EAAE,KAAK,MAAM;AAAA;AAAA,EAC/B;AAAA,GACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { type MutableRefObject, createRef } from 'react';\nimport { DSFastList } from '../index.js';\nimport type { DSFastListT } from '../index.js';\n\nconst data = [1, 2, 3];\nconst extraProps = { data };\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSFastListT.Props<typeof extraProps>;\ntype ComponentPropsInternals = DSFastListT.InternalProps<typeof extraProps>;\ntype ComponentPropsDefaultProps = DSFastListT.DefaultProps;\ntype ComponentPropsOptionalProps = DSFastListT.OptionalProps<typeof extraProps>;\ntype ComponentPropsRequiredProps = DSFastListT.RequiredProps<typeof extraProps>;\n\nconst MockItemRenderer = ({ index }: { index: number }) => <div></div>;\n\nconst actionRef = createRef() as MutableRefObject<{ scrollTo: (index: number) => void }>;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  ItemRenderer: MockItemRenderer,\n  count: 0,\n  getId: (index: number) => '',\n};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  actionRef: actionRef,\n  extraItemProps: { data },\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  ItemRenderer: MockItemRenderer,\n  count: 0,\n  getId: (index: number) => '',\n  actionRef: actionRef,\n  extraItemProps: { data },\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  ItemRenderer: MockItemRenderer,\n  count: 0,\n  getId: (index: number) => '',\n  actionRef: actionRef,\n  extraItemProps: { data },\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  ItemRenderer: MockItemRenderer,\n  count: 0,\n  getId: (index: number) => '',\n  actionRef: actionRef,\n  extraItemProps: { foo: 'bar' },\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSFastList {...testExplicitDefinition} />\n    <DSFastList {...testInferedTypeCompatibility} />\n    <DSFastList {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSFastList\n      ItemRenderer={MockItemRenderer}\n      count={0}\n      getId={(index: number) => ''}\n      actionRef={actionRef}\n      extraItemProps={{ foo: 'bar' }}\n    />\n  </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACcoC;AAb3D,mBAAiD;AACjD,eAA2B;AAG3B,MAAM,OAAO,CAAC,GAAG,GAAG,CAAC;AACrB,MAAM,aAAa,EAAE,KAAK;AAQ1B,MAAM,mBAAmB,CAAC,EAAE,MAAM,MAAyB,4CAAC,SAAI;AAEhE,MAAM,gBAAY,wBAAU;AAE5B,MAAM,oBAAiD;AAAA,EACrD,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO,CAAC,UAAkB;AAC5B;AAEA,MAAM,oBAAiD;AAAA,EACrD;AAAA,EACA,gBAAgB,EAAE,KAAK;AACzB;AAIA,MAAM,sBAA2D,CAAC;AAElE,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D,CAAC;AAEpE,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO,CAAC,UAAkB;AAAA,EAC1B;AAAA,EACA,gBAAgB,EAAE,KAAK;AACzB;AAGA,MAAM,+BAA+B;AAAA,EACnC,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO,CAAC,UAAkB;AAAA,EAC1B;AAAA,EACA,gBAAgB,EAAE,KAAK;AACzB;AAEA,MAAM,wBAAwB;AAAA,EAC5B,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO,CAAC,UAAkB;AAAA,EAC1B;AAAA,EACA,gBAAgB,EAAE,KAAK,MAAM;AAC/B;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,uBAAY,GAAG,wBAAwB;AAAA,EACxC,4CAAC,uBAAY,GAAG,8BAA8B;AAAA,EAC9C,4CAAC,uBAAY,GAAG,uBAAuB;AAAA,EAEvC;AAAA,IAAC;AAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP,OAAO,CAAC,UAAkB;AAAA,MAC1B;AAAA,MACA,gBAAgB,EAAE,KAAK,MAAM;AAAA;AAAA,EAC/B;AAAA,GACF;",
   "names": []
 }

package/dist/esm/DSFastListDefinitions.js

@@ -1,6 +1,15 @@
 import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
 const DSFastListName = "DSFastList";
+const DSFastListSlots = {
+  CONTAINER: "container",
+  WRAPPER_LIST: "wrapper-list",
+  ITEM: "item"
+};
+const DSCardV3DataTestIds = slotObjectToDataTestIds(DSFastListName, DSFastListSlots);
 export {
-  DSFastListName
+  DSCardV3DataTestIds,
+  DSFastListName,
+  DSFastListSlots
 };
 //# sourceMappingURL=DSFastListDefinitions.js.map

package/dist/esm/DSFastListDefinitions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSFastListDefinitions.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSFastListName = 'DSFastList';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,iBAAiB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFastListName = 'DSFastList';\nexport const DSFastListSlots = {\n  CONTAINER: 'container',\n  WRAPPER_LIST: 'wrapper-list',\n  ITEM: 'item',\n};\n\nexport const DSCardV3DataTestIds = slotObjectToDataTestIds(DSFastListName, DSFastListSlots);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,cAAc;AAAA,EACd,MAAM;AACR;AAEO,MAAM,sBAAsB,wBAAwB,gBAAgB,eAAe;",
   "names": []
 }

package/dist/esm/FastList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/FastList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { List } from './parts/List.js';\nimport { DSFastListPropTypes, type DSFastListT } from './react-desc-prop-types.js';\nimport { DSFastListName } from './DSFastListDefinitions.js';\n\n// we create ds-fast-list to solve the issue with the children prop in ds-virtual-list\n// this packages use render props instead of children prop.\n// we are not using a context nor zustand so all the logic is handled in List...\nconst DSFastList = (props: DSFastListT.Props) => <List {...props} />;\n\nDSFastList.propTypes = DSFastListPropTypes;\nDSFastList.displayName = DSFastListName;\nconst DSFastListWithSchema = describe(DSFastList).description('DSFastList');\nDSFastListWithSchema.propTypes = DSFastListPropTypes;\n\nexport { DSFastList, DSFastListWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACS0B;AARjD,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,2BAA6C;AACtD,SAAS,sBAAsB;AAK/B,MAAM,aAAa,CAAC,UAA6B,oBAAC,QAAM,GAAG,OAAO;AAElE,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU,EAAE,YAAY,YAAY;AAC1E,qBAAqB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { List } from './parts/List.js';\nimport { DSFastListPropTypes, type DSFastListT } from './react-desc-prop-types.js';\nimport { DSFastListName } from './DSFastListDefinitions.js';\n\n// we create ds-fast-list to solve the issue with the children prop in ds-virtual-list\n// this packages use render props instead of children prop.\n// we are not using a context nor zustand so all the logic is handled in List...\nconst DSFastList = <T extends object>(props: DSFastListT.Props<T>) => <List {...props} />;\n\nDSFastList.propTypes = DSFastListPropTypes;\nDSFastList.displayName = DSFastListName;\nconst DSFastListWithSchema = describe(DSFastList).description('DSFastList');\nDSFastListWithSchema.propTypes = DSFastListPropTypes;\n\nexport { DSFastList, DSFastListWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACS+C;AARtE,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,2BAA6C;AACtD,SAAS,sBAAsB;AAK/B,MAAM,aAAa,CAAmB,UAAgC,oBAAC,QAAM,GAAG,OAAO;AAEvF,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU,EAAE,YAAY,YAAY;AAC1E,qBAAqB,YAAY;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useFastList.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 DSFastListT, DSFastListPropTypes, 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 FastListCTX = {\n  parentRef: React.MutableRefObject<HTMLDivElement | null>;\n  getVirtualItems: () => VirtualItem[];\n  totalSize: number;\n  instanceUid: string;\n  measureElement: MeasureElement;\n};\nexport const useFastList = (propsFromUser: DSFastListT.Props): FastListCTX => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSFastListT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSFastListPropTypes);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const { actionRef, count } = propsWithDefault;\n  const parentRef = React.useRef<HTMLDivElement>(null);\n  const useVirtualHelpers = useVirtualizer({\n    count,\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-fast-list-${uid(6)}`, []);\n  return React.useMemo(\n    () => ({\n      parentRef,\n      getVirtualItems: useVirtualHelpers.getVirtualItems,\n      totalSize,\n      instanceUid,\n      measureElement: useVirtualHelpers.measureElement,\n    }),\n    [useVirtualHelpers.getVirtualItems, useVirtualHelpers.measureElement, totalSize, instanceUid],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,WAAW;AACpB,SAAS,sBAAsB;AAC/B,SAAS,oCAAoC;AAC7C,SAA2B,qBAAqB,oBAAoB;AACpE,SAAS,wBAAwB;AAEjC,MAAM,eAAe,MAAM;AAmBpB,MAAM,cAAc,CAAC,kBAAkD;AAI5E,QAAM,mBAAmB,6BAAwD,eAAe,YAAY;AAC5G,mBAAiB,kBAAkB,mBAAmB;AAItD,QAAM,EAAE,WAAW,MAAM,IAAI;AAC7B,QAAM,YAAYA,OAAM,OAAuB,IAAI;AACnD,QAAM,oBAAoB,eAAe;AAAA,IACvC;AAAA,IACA,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,gBAAgB,IAAI,CAAC,KAAK,CAAC,CAAC;AACpE,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA,iBAAiB,kBAAkB;AAAA,MACnC;AAAA,MACA;AAAA,MACA,gBAAgB,kBAAkB;AAAA,IACpC;AAAA,IACA,CAAC,kBAAkB,iBAAiB,kBAAkB,gBAAgB,WAAW,WAAW;AAAA,EAC9F;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 DSFastListT, DSFastListPropTypes, 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 FastListCTX = {\n  parentRef: React.MutableRefObject<HTMLDivElement | null>;\n  getVirtualItems: () => VirtualItem[];\n  totalSize: number;\n  instanceUid: string;\n  measureElement: MeasureElement;\n};\nexport const useFastList = <T,>(propsFromUser: DSFastListT.Props<T>): FastListCTX => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSFastListT.InternalProps<T>>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSFastListPropTypes);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  const { actionRef, count } = propsWithDefault;\n  const parentRef = React.useRef<HTMLDivElement>(null);\n  const useVirtualHelpers = useVirtualizer({\n    count,\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-fast-list-${uid(6)}`, []);\n  return React.useMemo(\n    () => ({\n      parentRef,\n      getVirtualItems: useVirtualHelpers.getVirtualItems,\n      totalSize,\n      instanceUid,\n      measureElement: useVirtualHelpers.measureElement,\n    }),\n    [useVirtualHelpers.getVirtualItems, useVirtualHelpers.measureElement, totalSize, instanceUid],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,WAAW;AACpB,SAAS,sBAAsB;AAC/B,SAAS,oCAAoC;AAC7C,SAA2B,qBAAqB,oBAAoB;AACpE,SAAS,wBAAwB;AAEjC,MAAM,eAAe,MAAM;AAmBpB,MAAM,cAAc,CAAK,kBAAqD;AAInF,QAAM,mBAAmB,6BAA2D,eAAe,YAAY;AAC/G,mBAAiB,kBAAkB,mBAAmB;AAItD,QAAM,EAAE,WAAW,MAAM,IAAI;AAC7B,QAAM,YAAYA,OAAM,OAAuB,IAAI;AACnD,QAAM,oBAAoB,eAAe;AAAA,IACvC;AAAA,IACA,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,gBAAgB,IAAI,CAAC,KAAK,CAAC,CAAC;AACpE,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA,iBAAiB,kBAAkB;AAAA,MACnC;AAAA,MACA;AAAA,MACA,gBAAgB,kBAAkB;AAAA,IACpC;AAAA,IACA,CAAC,kBAAkB,iBAAiB,kBAAkB,gBAAgB,WAAW,WAAW;AAAA,EAC9F;AACF;",
   "names": ["React"]
 }

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

@@ -1,7 +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-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport { type DSFastListT } from '../react-desc-prop-types.js';\nimport { DSFastListName } from '../DSFastListDefinitions.js';\n\nexport const useValidateProps = (props: DSFastListT.InternalProps, propTypes: WeakValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSFastListName);\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,sBAAsB;AAExB,MAAM,mBAAmB,CAAC,OAAkC,cAAgD;AAEjH,iCAA+B,OAAO,WAAW,cAAc;AACjE;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport { type DSFastListT } from '../react-desc-prop-types.js';\nimport { DSFastListName } from '../DSFastListDefinitions.js';\n\nexport const useValidateProps = <T>(\n  props: DSFastListT.InternalProps<T>,\n  propTypes: WeakValidationMap<unknown>,\n): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSFastListName);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,sBAAsB;AAExB,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,iCAA+B,OAAO,WAAW,cAAc;AACjE;",
   "names": []
 }

package/dist/esm/parts/List.js

@@ -1,9 +1,35 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import React2 from "react";
-import { LIST_DATA_TESTID } from "../FastListDataTestID.js";
+import React2, { useCallback } from "react";
+import { styled } from "@elliemae/ds-system";
 import { useFastList } from "../hooks/useFastList.js";
-const List = React2.memo((props) => {
+import { DSFastListName, DSFastListSlots } from "../DSFastListDefinitions.js";
+const StyledList = styled("div", {
+  name: DSFastListName,
+  slot: DSFastListSlots.WRAPPER_LIST
+})`
+  width: 100%;
+  position: relative;
+`;
+const StyledListItem = styled("div", {
+  name: DSFastListName,
+  slot: DSFastListSlots.ITEM
+})`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+`;
+const StyledListContainer = styled("div", {
+  name: DSFastListName,
+  slot: DSFastListSlots.CONTAINER
+})`
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+  padding-bottom: 0;
+`;
+const List = (props) => {
   const { parentRef, getVirtualItems, totalSize, instanceUid, measureElement } = useFastList(props);
   const { ItemRenderer, extraItemProps, getId } = props;
   const virtualItems = getVirtualItems();
@@ -11,43 +37,33 @@ const List = React2.memo((props) => {
     (node) => measureElement(node),
     [measureElement]
   );
+  const getOwnerProps = useCallback(() => props, [props]);
   return /* @__PURE__ */ jsx(
-    "div",
+    StyledListContainer,
     {
-      ref: parentRef,
-      "data-testid": LIST_DATA_TESTID.CONTAINER,
-      style: {
-        width: "100%",
-        height: "100%",
-        paddingBottom: 0,
-        overflow: "auto"
-      },
+      innerRef: parentRef,
       tabIndex: -1,
       children: /* @__PURE__ */ jsx(
-        "div",
+        StyledList,
         {
           style: {
-            width: "100%",
-            height: `${totalSize}px`,
-            position: "relative"
+            height: `${totalSize}px`
           },
           role: "list",
+          getOwnerProps,
           children: virtualItems.map((virtualItem) => {
             const { index, start } = virtualItem;
             return /* @__PURE__ */ jsx(
-              "div",
+              StyledListItem,
               {
-                ref: measureRef,
+                innerRef: measureRef,
                 "data-index": index,
                 style: {
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  width: "100%",
                   transform: `translateY(${start}px)`
                 },
                 role: "listitem",
-                children: /* @__PURE__ */ jsx(ItemRenderer, { index, ...extraItemProps })
+                getOwnerProps,
+                children: /* @__PURE__ */ jsx(ItemRenderer, { extraItemProps, index })
               },
               getId(index)
             );
@@ -57,7 +73,7 @@ const List = React2.memo((props) => {
     },
     instanceUid
   );
-});
+};
 export {
   List
 };

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 '../FastListDataTestID.js';\nimport { useFastList } from '../hooks/useFastList.js';\nimport type { DSFastListT } from '../react-desc-prop-types.js';\n\nexport const List = React.memo((props: DSFastListT.Props) => {\n  const { parentRef, getVirtualItems, totalSize, instanceUid, measureElement } = useFastList(props);\n  const { ItemRenderer, extraItemProps, getId } = props;\n\n  const virtualItems = getVirtualItems();\n  const measureRef: React.LegacyRef<HTMLDivElement> = React.useCallback(\n    (node: HTMLDivElement) => measureElement(node),\n    [measureElement],\n  );\n  return (\n    <div\n      key={instanceUid}\n      ref={parentRef}\n      data-testid={LIST_DATA_TESTID.CONTAINER}\n      style={{\n        width: '100%',\n        height: '100%',\n        paddingBottom: 0,\n        overflow: 'auto',\n      }}\n      // firefox needs this tabIndex to prevent scrolling\n      tabIndex={-1}\n    >\n      <div\n        style={{\n          width: '100%',\n          height: `${totalSize}px`,\n          position: 'relative',\n        }}\n        role=\"list\"\n      >\n        {virtualItems.map((virtualItem) => {\n          const { index, start } = 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={getId(index)}\n            >\n              <ItemRenderer index={index} {...extraItemProps} />\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoDT;AApDd,OAAOA,YAAW;AAClB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAGrB,MAAM,OAAOA,OAAM,KAAK,CAAC,UAA6B;AAC3D,QAAM,EAAE,WAAW,iBAAiB,WAAW,aAAa,eAAe,IAAI,YAAY,KAAK;AAChG,QAAM,EAAE,cAAc,gBAAgB,MAAM,IAAI;AAEhD,QAAM,eAAe,gBAAgB;AACrC,QAAM,aAA8CA,OAAM;AAAA,IACxD,CAAC,SAAyB,eAAe,IAAI;AAAA,IAC7C,CAAC,cAAc;AAAA,EACjB;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,KAAK;AAAA,MACL,eAAa,iBAAiB;AAAA,MAC9B,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,eAAe;AAAA,QACf,UAAU;AAAA,MACZ;AAAA,MAEA,UAAU;AAAA,MAEV;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,OAAO;AAAA,YACP,QAAQ,GAAG;AAAA,YACX,UAAU;AAAA,UACZ;AAAA,UACA,MAAK;AAAA,UAEJ,uBAAa,IAAI,CAAC,gBAAgB;AACjC,kBAAM,EAAE,OAAO,MAAM,IAAI;AACzB,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,gBAGL,8BAAC,gBAAa,OAAe,GAAG,gBAAgB;AAAA;AAAA,cAF3C,MAAM,KAAK;AAAA,YAGlB;AAAA,UAEJ,CAAC;AAAA;AAAA,MACH;AAAA;AAAA,IAxCK;AAAA,EAyCP;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { useFastList } from '../hooks/useFastList.js';\nimport type { DSFastListT } from '../react-desc-prop-types.js';\nimport { DSFastListName, DSFastListSlots } from '../DSFastListDefinitions.js';\nconst StyledList = styled('div', {\n  name: DSFastListName,\n  slot: DSFastListSlots.WRAPPER_LIST,\n})`\n  width: 100%;\n  position: relative;\n`;\n\nconst StyledListItem = styled('div', {\n  name: DSFastListName,\n  slot: DSFastListSlots.ITEM,\n})`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n`;\n\nconst StyledListContainer = styled('div', {\n  name: DSFastListName,\n  slot: DSFastListSlots.CONTAINER,\n})`\n  overflow: auto;\n  width: 100%;\n  height: 100%;\n  padding-bottom: 0;\n`;\n\nexport const List = <T extends object>(props: DSFastListT.Props<T>) => {\n  const { parentRef, getVirtualItems, totalSize, instanceUid, measureElement } = useFastList(props);\n  const { ItemRenderer, extraItemProps, getId } = props;\n\n  const virtualItems = getVirtualItems();\n  const measureRef: React.LegacyRef<HTMLDivElement> = React.useCallback(\n    (node: HTMLDivElement) => measureElement(node),\n    [measureElement],\n  );\n\n  const getOwnerProps = useCallback(() => props, [props]);\n\n  return (\n    <StyledListContainer\n      key={instanceUid}\n      innerRef={parentRef}\n      // firefox needs this tabIndex to prevent scrolling\n      tabIndex={-1}\n    >\n      <StyledList\n        style={{\n          height: `${totalSize}px`,\n        }}\n        role=\"list\"\n        getOwnerProps={getOwnerProps}\n      >\n        {virtualItems.map((virtualItem) => {\n          const { index, start } = virtualItem;\n          return (\n            <StyledListItem\n              innerRef={measureRef}\n              data-index={index}\n              style={{\n                transform: `translateY(${start}px)`,\n              }}\n              role=\"listitem\"\n              key={getId(index)}\n              getOwnerProps={getOwnerProps}\n            >\n              <ItemRenderer extraItemProps={extraItemProps} index={index} />\n            </StyledListItem>\n          );\n        })}\n      </StyledList>\n    </StyledListContainer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACwET;AAxEd,OAAOA,UAAS,mBAAmB;AACnC,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAE5B,SAAS,gBAAgB,uBAAuB;AAChD,MAAM,aAAa,OAAO,OAAO;AAAA,EAC/B,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAKD,MAAM,iBAAiB,OAAO,OAAO;AAAA,EACnC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOD,MAAM,sBAAsB,OAAO,OAAO;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,OAAO,CAAmB,UAAgC;AACrE,QAAM,EAAE,WAAW,iBAAiB,WAAW,aAAa,eAAe,IAAI,YAAY,KAAK;AAChG,QAAM,EAAE,cAAc,gBAAgB,MAAM,IAAI;AAEhD,QAAM,eAAe,gBAAgB;AACrC,QAAM,aAA8CA,OAAM;AAAA,IACxD,CAAC,SAAyB,eAAe,IAAI;AAAA,IAC7C,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,gBAAgB,YAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AAEtD,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,UAAU;AAAA,MAEV,UAAU;AAAA,MAEV;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,QAAQ,GAAG;AAAA,UACb;AAAA,UACA,MAAK;AAAA,UACL;AAAA,UAEC,uBAAa,IAAI,CAAC,gBAAgB;AACjC,kBAAM,EAAE,OAAO,MAAM,IAAI;AACzB,mBACE;AAAA,cAAC;AAAA;AAAA,gBACC,UAAU;AAAA,gBACV,cAAY;AAAA,gBACZ,OAAO;AAAA,kBACL,WAAW,cAAc;AAAA,gBAC3B;AAAA,gBACA,MAAK;AAAA,gBAEL;AAAA,gBAEA,8BAAC,gBAAa,gBAAgC,OAAc;AAAA;AAAA,cAHvD,MAAM,KAAK;AAAA,YAIlB;AAAA,UAEJ,CAAC;AAAA;AAAA,MACH;AAAA;AAAA,IA7BK;AAAA,EA8BP;AAEJ;",
   "names": ["React"]
 }

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

@@ -14,7 +14,8 @@ const DSFastListPropTypes = {
     "Render function for each item"
   ),
   count: PropTypes.number.isRequired.description("Number of items to render"),
-  extraItemProps: PropTypes.object.description("Extra props to pass to each item")
+  extraItemProps: PropTypes.object.description("Extra props to pass to each item"),
+  getId: PropTypes.func.isRequired.description("Function to get the key for each item")
 };
 export {
   DSFastListPropTypes,

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 DSFastListT {\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    ItemRenderer: React.ComponentType<{ index: number }>;\n    count: number;\n    getId: (index: number) => string | number;\n  }\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps {\n    actionRef?: React.MutableRefObject<ActionRef>;\n    extraItemProps?: Record<string, unknown>;\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: DSFastListT.DefaultProps = {};\n\nexport const DSFastListPropTypes = {\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  ItemRenderer: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired.description(\n    'Render function for each item',\n  ),\n  count: PropTypes.number.isRequired.description('Number of items to render'),\n  extraItemProps: PropTypes.object.description('Extra props to pass to each item'),\n} as React.WeakValidationMap<unknown>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,iBAAiB;AA6BnB,MAAM,eAAyC,CAAC;AAEhD,MAAM,sBAAsB;AAAA,EACjC,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;AAAA,EAC/D,cAAc,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,WAAW;AAAA,IAC/E;AAAA,EACF;AAAA,EACA,OAAO,UAAU,OAAO,WAAW,YAAY,2BAA2B;AAAA,EAC1E,gBAAgB,UAAU,OAAO,YAAY,kCAAkC;AACjF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type React from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSFastListSlots, DSFastListName } from './DSFastListDefinitions.js';\nexport declare namespace DSFastListT {\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\n  export interface OptionalProps<T>\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFastListName, typeof DSFastListSlots> {\n    actionRef?: React.MutableRefObject<ActionRef>;\n    extraItemProps?: T;\n  }\n\n  export interface RequiredProps<T> {\n    ItemRenderer: React.ComponentType<{ index: number; extraItemProps?: T }>;\n    count: number;\n    getId: (index: number) => string | number;\n  }\n\n  export interface DefaultProps {}\n\n  type PropsT<D, R, O> = Partial<D> & R & O;\n  type InternalPropsT<D, R, O> = D & R & O;\n\n  export type Props<T> = PropsT<DefaultProps, RequiredProps<T>, OptionalProps<T>>;\n  export type InternalProps<T> = InternalPropsT<DefaultProps, RequiredProps<T>, OptionalProps<T>>;\n}\n\nexport const defaultProps: DSFastListT.DefaultProps = {};\n\nexport const DSFastListPropTypes = {\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  ItemRenderer: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired.description(\n    'Render function for each item',\n  ),\n  count: PropTypes.number.isRequired.description('Number of items to render'),\n  extraItemProps: PropTypes.object.description('Extra props to pass to each item'),\n  getId: PropTypes.func.isRequired.description('Function to get the key for each item'),\n} as React.WeakValidationMap<unknown>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,iBAAiB;AAiCnB,MAAM,eAAyC,CAAC;AAEhD,MAAM,sBAAsB;AAAA,EACjC,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;AAAA,EAC/D,cAAc,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,WAAW;AAAA,IAC/E;AAAA,EACF;AAAA,EACA,OAAO,UAAU,OAAO,WAAW,YAAY,2BAA2B;AAAA,EAC1E,gBAAgB,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAC/E,OAAO,UAAU,KAAK,WAAW,YAAY,uCAAuC;AACtF;",
   "names": []
 }

package/dist/esm/typescript-testing/typescript-fast-list-valid.js

@@ -2,6 +2,8 @@ import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createRef } from "react";
 import { DSFastList } from "../index.js";
+const data = [1, 2, 3];
+const extraProps = { data };
 const MockItemRenderer = ({ index }) => /* @__PURE__ */ jsx("div", {});
 const actionRef = createRef();
 const testRequiredProps = {
@@ -11,7 +13,7 @@ const testRequiredProps = {
 };
 const testOptionalProps = {
   actionRef,
-  extraItemProps: { foo: "bar" }
+  extraItemProps: { data }
 };
 const testPartialDefaults = {};
 const testProps = {
@@ -40,14 +42,14 @@ const testExplicitDefinition = {
   count: 0,
   getId: (index) => "",
   actionRef,
-  extraItemProps: { foo: "bar" }
+  extraItemProps: { data }
 };
 const testInferedTypeCompatibility = {
   ItemRenderer: MockItemRenderer,
   count: 0,
   getId: (index) => "",
   actionRef,
-  extraItemProps: { foo: "bar" }
+  extraItemProps: { data }
 };
 const testDefinitionAsConst = {
   ItemRenderer: MockItemRenderer,

package/dist/esm/typescript-testing/typescript-fast-list-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-fast-list-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { type MutableRefObject, createRef } from 'react';\nimport { DSFastList } from '../index.js';\nimport type { DSFastListT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSFastListT.Props;\ntype ComponentPropsInternals = DSFastListT.InternalProps;\ntype ComponentPropsDefaultProps = DSFastListT.DefaultProps;\ntype ComponentPropsOptionalProps = DSFastListT.OptionalProps;\ntype ComponentPropsRequiredProps = DSFastListT.RequiredProps;\n\nconst MockItemRenderer = ({ index }: { index: number }) => <div></div>;\n\nconst actionRef = createRef() as MutableRefObject<{ scrollTo: (index: number) => void }>;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  ItemRenderer: MockItemRenderer,\n  count: 0,\n  getId: (index: number) => '',\n};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  actionRef: actionRef,\n  extraItemProps: { foo: 'bar' },\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  ItemRenderer: MockItemRenderer,\n  count: 0,\n  getId: (index: number) => '',\n  actionRef: actionRef,\n  extraItemProps: { foo: 'bar' },\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  ItemRenderer: MockItemRenderer,\n  count: 0,\n  getId: (index: number) => '',\n  actionRef: actionRef,\n  extraItemProps: { foo: 'bar' },\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  ItemRenderer: MockItemRenderer,\n  count: 0,\n  getId: (index: number) => '',\n  actionRef: actionRef,\n  extraItemProps: { foo: 'bar' },\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSFastList {...testExplicitDefinition} />\n    <DSFastList {...testInferedTypeCompatibility} />\n    <DSFastList {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSFastList\n      ItemRenderer={MockItemRenderer}\n      count={0}\n      getId={(index: number) => ''}\n      actionRef={actionRef}\n      extraItemProps={{ foo: 'bar' }}\n    />\n  </>\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACYoC,SAyEzD,UAzEyD,KAyEzD,YAzEyD;AAX3D,SAAgC,iBAAiB;AACjD,SAAS,kBAAkB;AAU3B,MAAM,mBAAmB,CAAC,EAAE,MAAM,MAAyB,oBAAC,SAAI;AAEhE,MAAM,YAAY,UAAU;AAE5B,MAAM,oBAAiD;AAAA,EACrD,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO,CAAC,UAAkB;AAC5B;AAEA,MAAM,oBAAiD;AAAA,EACrD;AAAA,EACA,gBAAgB,EAAE,KAAK,MAAM;AAC/B;AAIA,MAAM,sBAA2D,CAAC;AAElE,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D,CAAC;AAEpE,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO,CAAC,UAAkB;AAAA,EAC1B;AAAA,EACA,gBAAgB,EAAE,KAAK,MAAM;AAC/B;AAGA,MAAM,+BAA+B;AAAA,EACnC,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO,CAAC,UAAkB;AAAA,EAC1B;AAAA,EACA,gBAAgB,EAAE,KAAK,MAAM;AAC/B;AAEA,MAAM,wBAAwB;AAAA,EAC5B,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO,CAAC,UAAkB;AAAA,EAC1B;AAAA,EACA,gBAAgB,EAAE,KAAK,MAAM;AAC/B;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,cAAY,GAAG,wBAAwB;AAAA,EACxC,oBAAC,cAAY,GAAG,8BAA8B;AAAA,EAC9C,oBAAC,cAAY,GAAG,uBAAuB;AAAA,EAEvC;AAAA,IAAC;AAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP,OAAO,CAAC,UAAkB;AAAA,MAC1B;AAAA,MACA,gBAAgB,EAAE,KAAK,MAAM;AAAA;AAAA,EAC/B;AAAA,GACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { type MutableRefObject, createRef } from 'react';\nimport { DSFastList } from '../index.js';\nimport type { DSFastListT } from '../index.js';\n\nconst data = [1, 2, 3];\nconst extraProps = { data };\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSFastListT.Props<typeof extraProps>;\ntype ComponentPropsInternals = DSFastListT.InternalProps<typeof extraProps>;\ntype ComponentPropsDefaultProps = DSFastListT.DefaultProps;\ntype ComponentPropsOptionalProps = DSFastListT.OptionalProps<typeof extraProps>;\ntype ComponentPropsRequiredProps = DSFastListT.RequiredProps<typeof extraProps>;\n\nconst MockItemRenderer = ({ index }: { index: number }) => <div></div>;\n\nconst actionRef = createRef() as MutableRefObject<{ scrollTo: (index: number) => void }>;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  ItemRenderer: MockItemRenderer,\n  count: 0,\n  getId: (index: number) => '',\n};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  actionRef: actionRef,\n  extraItemProps: { data },\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  ItemRenderer: MockItemRenderer,\n  count: 0,\n  getId: (index: number) => '',\n  actionRef: actionRef,\n  extraItemProps: { data },\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  ItemRenderer: MockItemRenderer,\n  count: 0,\n  getId: (index: number) => '',\n  actionRef: actionRef,\n  extraItemProps: { data },\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  ItemRenderer: MockItemRenderer,\n  count: 0,\n  getId: (index: number) => '',\n  actionRef: actionRef,\n  extraItemProps: { foo: 'bar' },\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSFastList {...testExplicitDefinition} />\n    <DSFastList {...testInferedTypeCompatibility} />\n    <DSFastList {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSFastList\n      ItemRenderer={MockItemRenderer}\n      count={0}\n      getId={(index: number) => ''}\n      actionRef={actionRef}\n      extraItemProps={{ foo: 'bar' }}\n    />\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACcoC,SAyEzD,UAzEyD,KAyEzD,YAzEyD;AAb3D,SAAgC,iBAAiB;AACjD,SAAS,kBAAkB;AAG3B,MAAM,OAAO,CAAC,GAAG,GAAG,CAAC;AACrB,MAAM,aAAa,EAAE,KAAK;AAQ1B,MAAM,mBAAmB,CAAC,EAAE,MAAM,MAAyB,oBAAC,SAAI;AAEhE,MAAM,YAAY,UAAU;AAE5B,MAAM,oBAAiD;AAAA,EACrD,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO,CAAC,UAAkB;AAC5B;AAEA,MAAM,oBAAiD;AAAA,EACrD;AAAA,EACA,gBAAgB,EAAE,KAAK;AACzB;AAIA,MAAM,sBAA2D,CAAC;AAElE,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D,CAAC;AAEpE,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO,CAAC,UAAkB;AAAA,EAC1B;AAAA,EACA,gBAAgB,EAAE,KAAK;AACzB;AAGA,MAAM,+BAA+B;AAAA,EACnC,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO,CAAC,UAAkB;AAAA,EAC1B;AAAA,EACA,gBAAgB,EAAE,KAAK;AACzB;AAEA,MAAM,wBAAwB;AAAA,EAC5B,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO,CAAC,UAAkB;AAAA,EAC1B;AAAA,EACA,gBAAgB,EAAE,KAAK,MAAM;AAC/B;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,cAAY,GAAG,wBAAwB;AAAA,EACxC,oBAAC,cAAY,GAAG,8BAA8B;AAAA,EAC9C,oBAAC,cAAY,GAAG,uBAAuB;AAAA,EAEvC;AAAA,IAAC;AAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP,OAAO,CAAC,UAAkB;AAAA,MAC1B;AAAA,MACA,gBAAgB,EAAE,KAAK,MAAM;AAAA;AAAA,EAC/B;AAAA,GACF;",
   "names": []
 }

package/dist/types/DSFastListDefinitions.d.ts

@@ -1 +1,7 @@
 export declare const DSFastListName = "DSFastList";
+export declare const DSFastListSlots: {
+    CONTAINER: string;
+    WRAPPER_LIST: string;
+    ITEM: string;
+};
+export declare const DSCardV3DataTestIds: Record<string, string>;

package/dist/types/FastList.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { type DSFastListT } from './react-desc-prop-types.js';
 declare const DSFastList: {
-    (props: DSFastListT.Props): import("react/jsx-runtime.js").JSX.Element;
+    <T extends object>(props: DSFastListT.Props<T>): import("react/jsx-runtime.js").JSX.Element;
     propTypes: React.WeakValidationMap<unknown>;
     displayName: string;
 };
-declare const DSFastListWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSFastListT.Props>;
+declare const DSFastListWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSFastListT.Props<object>>;
 export { DSFastList, DSFastListWithSchema };

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

@@ -15,5 +15,5 @@ export type FastListCTX = {
     instanceUid: string;
     measureElement: MeasureElement;
 };
-export declare const useFastList: (propsFromUser: DSFastListT.Props) => FastListCTX;
+export declare const useFastList: <T>(propsFromUser: DSFastListT.Props<T>) => FastListCTX;
 export {};

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

@@ -1,3 +1,3 @@
 import type { WeakValidationMap } from 'react';
 import { type DSFastListT } from '../react-desc-prop-types.js';
-export declare const useValidateProps: (props: DSFastListT.InternalProps, propTypes: WeakValidationMap<unknown>) => void;
+export declare const useValidateProps: <T>(props: DSFastListT.InternalProps<T>, propTypes: WeakValidationMap<unknown>) => void;

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

@@ -1,3 +1,2 @@
-import React from 'react';
 import type { DSFastListT } from '../react-desc-prop-types.js';
-export declare const List: React.MemoExoticComponent<(props: DSFastListT.Props) => import("react/jsx-runtime.js").JSX.Element>;
+export declare const List: <T extends object>(props: DSFastListT.Props<T>) => import("react/jsx-runtime.js").JSX.Element;

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

@@ -1,4 +1,6 @@
 import type React from 'react';
+import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
+import type { DSFastListSlots, DSFastListName } from './DSFastListDefinitions.js';
 export declare namespace DSFastListT {
     type ScrollAlignment = 'start' | 'center' | 'end' | 'auto';
     type ScrollToOptions = {
@@ -7,23 +9,24 @@ export declare namespace DSFastListT {
     type ActionRef = {
         scrollTo?: (index: number, options?: ScrollToOptions | undefined) => void;
     };
-    interface RequiredProps {
+    interface OptionalProps<T> extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFastListName, typeof DSFastListSlots> {
+        actionRef?: React.MutableRefObject<ActionRef>;
+        extraItemProps?: T;
+    }
+    interface RequiredProps<T> {
         ItemRenderer: React.ComponentType<{
             index: number;
+            extraItemProps?: T;
         }>;
         count: number;
         getId: (index: number) => string | number;
     }
     interface DefaultProps {
     }
-    interface OptionalProps {
-        actionRef?: React.MutableRefObject<ActionRef>;
-        extraItemProps?: Record<string, unknown>;
-    }
-    interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {
-    }
-    interface InternalProps extends DefaultProps, OptionalProps, RequiredProps {
-    }
+    type PropsT<D, R, O> = Partial<D> & R & O;
+    type InternalPropsT<D, R, O> = D & R & O;
+    type Props<T> = PropsT<DefaultProps, RequiredProps<T>, OptionalProps<T>>;
+    type InternalProps<T> = InternalPropsT<DefaultProps, RequiredProps<T>, OptionalProps<T>>;
 }
 export declare const defaultProps: DSFastListT.DefaultProps;
 export declare const DSFastListPropTypes: React.WeakValidationMap<unknown>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-fast-list",
-  "version": "3.31.4",
+  "version": "3.32.0-rc.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Virtual List",
   "files": [
@@ -61,16 +61,16 @@
   "dependencies": {
     "@tanstack/react-virtual": "3.0.0-beta.54",
     "@xstyled/system": "3.7.0",
-    "axe-core": "^4.6.3",
     "uid": "^2.0.1",
-    "@elliemae/ds-props-helpers": "3.31.4",
-    "@elliemae/ds-system": "3.31.4"
+    "@elliemae/ds-props-helpers": "3.32.0-rc.2",
+    "@elliemae/ds-system": "3.32.0-rc.2",
+    "@elliemae/ds-typescript-helpers": "3.32.0-rc.2"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "~9.0.0-next.31",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.31.4",
-    "@elliemae/ds-test-utils": "3.31.4"
+    "@elliemae/ds-monorepo-devops": "3.32.0-rc.2",
+    "@elliemae/ds-test-utils": "3.32.0-rc.2"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",