@elliemae/ds-fast-list 3.36.0-rc.0 → 3.37.0-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/FastList.js +0 -1
- package/dist/cjs/FastList.js.map +2 -2
- package/dist/cjs/hooks/useFastList.js.map +1 -1
- package/dist/cjs/index.js +0 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/parts/List.js.map +1 -1
- package/dist/esm/FastList.js +0 -1
- package/dist/esm/FastList.js.map +2 -2
- package/dist/esm/hooks/useFastList.js.map +1 -1
- package/dist/esm/index.js +0 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/parts/List.js.map +1 -1
- package/dist/types/FastList.d.ts +0 -2
- package/package.json +6 -6
package/dist/cjs/FastList.js
CHANGED
|
@@ -39,7 +39,6 @@ var import_List = require("./parts/List.js");
|
|
|
39
39
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
40
40
|
var import_DSFastListDefinitions = require("./DSFastListDefinitions.js");
|
|
41
41
|
const DSFastList = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_List.List, { ...props });
|
|
42
|
-
DSFastList.propTypes = import_react_desc_prop_types.DSFastListPropTypes;
|
|
43
42
|
DSFastList.displayName = import_DSFastListDefinitions.DSFastListName;
|
|
44
43
|
const DSFastListWithSchema = (0, import_ds_props_helpers.describe)(DSFastList).description("DSFastList");
|
|
45
44
|
DSFastListWithSchema.propTypes = import_react_desc_prop_types.DSFastListPropTypes;
|
package/dist/cjs/FastList.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/FastList.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"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.
|
|
5
|
-
"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,
|
|
4
|
+
"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.displayName = DSFastListName;\nconst DSFastListWithSchema = describe(DSFastList).description('DSFastList');\nDSFastListWithSchema.propTypes = DSFastListPropTypes;\n\nexport { DSFastList, DSFastListWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"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,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU,EAAE,YAAY,YAAY;AAC1E,qBAAqB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useFastList.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"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"],
|
|
5
|
-
"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,
|
|
5
|
+
"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,CAAC,IAAI,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;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -33,6 +33,5 @@ __export(src_exports, {
|
|
|
33
33
|
});
|
|
34
34
|
module.exports = __toCommonJS(src_exports);
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
|
-
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
37
36
|
var import_FastList = require("./FastList.js");
|
|
38
37
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"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 DSFastListT } from './react-desc-prop-types.js';\nexport { DSFastList, DSFastListWithSchema } from './FastList.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKvB,sBAAiD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/List.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"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"],
|
|
5
|
-
"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,
|
|
5
|
+
"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,SAAS;AAAA,UACtB;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,KAAK;AAAA,gBAChC;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;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/esm/FastList.js
CHANGED
|
@@ -5,7 +5,6 @@ import { List } from "./parts/List.js";
|
|
|
5
5
|
import { DSFastListPropTypes } from "./react-desc-prop-types.js";
|
|
6
6
|
import { DSFastListName } from "./DSFastListDefinitions.js";
|
|
7
7
|
const DSFastList = (props) => /* @__PURE__ */ jsx(List, { ...props });
|
|
8
|
-
DSFastList.propTypes = DSFastListPropTypes;
|
|
9
8
|
DSFastList.displayName = DSFastListName;
|
|
10
9
|
const DSFastListWithSchema = describe(DSFastList).description("DSFastList");
|
|
11
10
|
DSFastListWithSchema.propTypes = DSFastListPropTypes;
|
package/dist/esm/FastList.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/FastList.tsx"],
|
|
4
|
-
"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.
|
|
5
|
-
"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,
|
|
4
|
+
"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.displayName = DSFastListName;\nconst DSFastListWithSchema = describe(DSFastList).description('DSFastList');\nDSFastListWithSchema.propTypes = DSFastListPropTypes;\n\nexport { DSFastList, DSFastListWithSchema };\n"],
|
|
5
|
+
"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,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU,EAAE,YAAY,YAAY;AAC1E,qBAAqB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useFastList.tsx"],
|
|
4
4
|
"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"],
|
|
5
|
-
"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,
|
|
5
|
+
"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,CAAC,IAAI,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;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
package/dist/esm/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
4
|
"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 DSFastListT } from './react-desc-prop-types.js';\nexport { DSFastList, DSFastListWithSchema } from './FastList.js';\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACKvB,SAAS,YAAY,4BAA4B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/List.tsx"],
|
|
4
4
|
"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"],
|
|
5
|
-
"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,
|
|
5
|
+
"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,SAAS;AAAA,UACtB;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,KAAK;AAAA,gBAChC;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;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/types/FastList.d.ts
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import { type DSFastListT } from './react-desc-prop-types.js';
|
|
3
2
|
declare const DSFastList: {
|
|
4
3
|
<T extends object>(props: DSFastListT.Props<T>): import("react/jsx-runtime.js").JSX.Element;
|
|
5
|
-
propTypes: React.WeakValidationMap<unknown>;
|
|
6
4
|
displayName: string;
|
|
7
5
|
};
|
|
8
6
|
declare const DSFastListWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSFastListT.Props<object>>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-fast-list",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.37.0-next.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Virtual List",
|
|
6
6
|
"files": [
|
|
@@ -63,15 +63,15 @@
|
|
|
63
63
|
"@tanstack/react-virtual": "3.0.0-beta.54",
|
|
64
64
|
"@xstyled/system": "3.7.0",
|
|
65
65
|
"uid": "^2.0.1",
|
|
66
|
-
"@elliemae/ds-props-helpers": "3.
|
|
67
|
-
"@elliemae/ds-system": "3.
|
|
68
|
-
"@elliemae/ds-typescript-helpers": "3.
|
|
66
|
+
"@elliemae/ds-props-helpers": "3.37.0-next.0",
|
|
67
|
+
"@elliemae/ds-system": "3.37.0-next.0",
|
|
68
|
+
"@elliemae/ds-typescript-helpers": "3.37.0-next.0"
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
71
71
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
72
72
|
"styled-components": "~5.3.9",
|
|
73
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
74
|
-
"@elliemae/ds-test-utils": "3.
|
|
73
|
+
"@elliemae/ds-monorepo-devops": "3.37.0-next.0",
|
|
74
|
+
"@elliemae/ds-test-utils": "3.37.0-next.0"
|
|
75
75
|
},
|
|
76
76
|
"peerDependencies": {
|
|
77
77
|
"lodash": "^4.17.21",
|