@elliemae/ds-fast-list 3.52.0-rc.0 → 3.52.0-rc.2
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/hooks/useFastList.js +3 -0
- package/dist/cjs/hooks/useFastList.js.map +2 -2
- package/dist/cjs/parts/List.js +2 -2
- package/dist/cjs/parts/List.js.map +2 -2
- package/dist/esm/hooks/useFastList.js +3 -0
- package/dist/esm/hooks/useFastList.js.map +2 -2
- package/dist/esm/parts/List.js +2 -2
- package/dist/esm/parts/List.js.map +2 -2
- package/package.json +6 -6
|
@@ -58,6 +58,9 @@ const useFastList = (propsFromUser) => {
|
|
|
58
58
|
actionRef.current.scrollTo = useVirtualHelpers.scrollToIndex;
|
|
59
59
|
}
|
|
60
60
|
}, [actionRef, useVirtualHelpers]);
|
|
61
|
+
import_react.default.useEffect(() => {
|
|
62
|
+
useVirtualHelpers.measure();
|
|
63
|
+
}, [count]);
|
|
61
64
|
const instanceUid = import_react.default.useMemo(() => `ds-fast-list-${(0, import_uid.uid)(6)}`, []);
|
|
62
65
|
return import_react.default.useMemo(
|
|
63
66
|
() => ({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useFastList.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
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\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 | bigint;\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>>(\n propsFromUser,\n defaultProps as Partial<DSFastListT.InternalProps<T>>,\n );\n useValidateProps(propsWithDefault, DSFastListPropTypes);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const { actionRef, count, estimateSize } = 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;AAoB1B,MAAM,cAAc,CAAK,kBAAqD;AAInF,QAAM,uBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,gDAAiB,kBAAkB,gDAAmB;AAItD,QAAM,EAAE,WAAW,OAAO,aAAa,IAAI;AAC3C,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;
|
|
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\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 | bigint;\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>>(\n propsFromUser,\n defaultProps as Partial<DSFastListT.InternalProps<T>>,\n );\n useValidateProps(propsWithDefault, DSFastListPropTypes);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const { actionRef, count, estimateSize } = 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 // this is a workaround to force the virtualizer to measure\n // the items when the count changes\n // this is needed because the virtualizer does not re-measure in some cases\n React.useEffect(() => {\n useVirtualHelpers.measure();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [count]);\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;AAoB1B,MAAM,cAAc,CAAK,kBAAqD;AAInF,QAAM,uBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,gDAAiB,kBAAkB,gDAAmB;AAItD,QAAM,EAAE,WAAW,OAAO,aAAa,IAAI;AAC3C,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;AAKjC,eAAAA,QAAM,UAAU,MAAM;AACpB,sBAAkB,QAAQ;AAAA,EAE5B,GAAG,CAAC,KAAK,CAAC;AAEV,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/parts/List.js
CHANGED
|
@@ -63,7 +63,7 @@ const StyledListContainer = (0, import_ds_system.styled)("div", {
|
|
|
63
63
|
padding-bottom: 0;
|
|
64
64
|
`;
|
|
65
65
|
const List = (props) => {
|
|
66
|
-
const { parentRef, getVirtualItems, totalSize, measureElement } = (0, import_useFastList.useFastList)(props);
|
|
66
|
+
const { parentRef, getVirtualItems, totalSize, instanceUid, measureElement } = (0, import_useFastList.useFastList)(props);
|
|
67
67
|
const { ItemRenderer, extraItemProps, getId } = props;
|
|
68
68
|
const virtualItems = getVirtualItems();
|
|
69
69
|
const measureRef = import_react.default.useCallback(
|
|
@@ -105,7 +105,7 @@ const List = (props) => {
|
|
|
105
105
|
}
|
|
106
106
|
)
|
|
107
107
|
},
|
|
108
|
-
|
|
108
|
+
instanceUid
|
|
109
109
|
);
|
|
110
110
|
};
|
|
111
111
|
//# sourceMappingURL=List.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/List.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
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, 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 innerRef={parentRef}\n // firefox needs this tabIndex to prevent scrolling\n tabIndex={-1}\n key={
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyET;AAzEd,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,eAAe,QAAI,gCAAY,KAAK;
|
|
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 innerRef={parentRef}\n // firefox needs this tabIndex to prevent scrolling\n tabIndex={-1}\n key={instanceUid}\n >\n <StyledList\n style={{\n // we add up 0.5 to prevent the scrollbar from appearing in some cases\n height: `${totalSize + 0.5}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;ADyET;AAzEd,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,MACC,UAAU;AAAA,MAEV,UAAU;AAAA,MAGV;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA;AAAA,YAEL,QAAQ,GAAG,YAAY,GAAG;AAAA,UAC5B;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,IA3BK;AAAA,EA4BP;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -25,6 +25,9 @@ const useFastList = (propsFromUser) => {
|
|
|
25
25
|
actionRef.current.scrollTo = useVirtualHelpers.scrollToIndex;
|
|
26
26
|
}
|
|
27
27
|
}, [actionRef, useVirtualHelpers]);
|
|
28
|
+
React2.useEffect(() => {
|
|
29
|
+
useVirtualHelpers.measure();
|
|
30
|
+
}, [count]);
|
|
28
31
|
const instanceUid = React2.useMemo(() => `ds-fast-list-${uid(6)}`, []);
|
|
29
32
|
return React2.useMemo(
|
|
30
33
|
() => ({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useFastList.tsx"],
|
|
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\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 | bigint;\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>>(\n propsFromUser,\n defaultProps as Partial<DSFastListT.InternalProps<T>>,\n );\n useValidateProps(propsWithDefault, DSFastListPropTypes);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const { actionRef, count, estimateSize } = 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;AAoB1B,MAAM,cAAc,CAAK,kBAAqD;AAInF,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,mBAAiB,kBAAkB,mBAAmB;AAItD,QAAM,EAAE,WAAW,OAAO,aAAa,IAAI;AAC3C,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;
|
|
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\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 | bigint;\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>>(\n propsFromUser,\n defaultProps as Partial<DSFastListT.InternalProps<T>>,\n );\n useValidateProps(propsWithDefault, DSFastListPropTypes);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const { actionRef, count, estimateSize } = 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 // this is a workaround to force the virtualizer to measure\n // the items when the count changes\n // this is needed because the virtualizer does not re-measure in some cases\n React.useEffect(() => {\n useVirtualHelpers.measure();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [count]);\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;AAoB1B,MAAM,cAAc,CAAK,kBAAqD;AAInF,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,mBAAiB,kBAAkB,mBAAmB;AAItD,QAAM,EAAE,WAAW,OAAO,aAAa,IAAI;AAC3C,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;AAKjC,EAAAA,OAAM,UAAU,MAAM;AACpB,sBAAkB,QAAQ;AAAA,EAE5B,GAAG,CAAC,KAAK,CAAC;AAEV,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/parts/List.js
CHANGED
|
@@ -30,7 +30,7 @@ const StyledListContainer = styled("div", {
|
|
|
30
30
|
padding-bottom: 0;
|
|
31
31
|
`;
|
|
32
32
|
const List = (props) => {
|
|
33
|
-
const { parentRef, getVirtualItems, totalSize, measureElement } = useFastList(props);
|
|
33
|
+
const { parentRef, getVirtualItems, totalSize, instanceUid, measureElement } = useFastList(props);
|
|
34
34
|
const { ItemRenderer, extraItemProps, getId } = props;
|
|
35
35
|
const virtualItems = getVirtualItems();
|
|
36
36
|
const measureRef = React2.useCallback(
|
|
@@ -72,7 +72,7 @@ const List = (props) => {
|
|
|
72
72
|
}
|
|
73
73
|
)
|
|
74
74
|
},
|
|
75
|
-
|
|
75
|
+
instanceUid
|
|
76
76
|
);
|
|
77
77
|
};
|
|
78
78
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/List.tsx"],
|
|
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, 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 innerRef={parentRef}\n // firefox needs this tabIndex to prevent scrolling\n tabIndex={-1}\n key={
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACyET;AAzEd,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,eAAe,IAAI,YAAY,KAAK;
|
|
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 innerRef={parentRef}\n // firefox needs this tabIndex to prevent scrolling\n tabIndex={-1}\n key={instanceUid}\n >\n <StyledList\n style={{\n // we add up 0.5 to prevent the scrollbar from appearing in some cases\n height: `${totalSize + 0.5}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;ACyET;AAzEd,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,MACC,UAAU;AAAA,MAEV,UAAU;AAAA,MAGV;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA;AAAA,YAEL,QAAQ,GAAG,YAAY,GAAG;AAAA,UAC5B;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,IA3BK;AAAA,EA4BP;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-fast-list",
|
|
3
|
-
"version": "3.52.0-rc.
|
|
3
|
+
"version": "3.52.0-rc.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Virtual List",
|
|
6
6
|
"files": [
|
|
@@ -39,16 +39,16 @@
|
|
|
39
39
|
"@tanstack/react-virtual": "3.0.0-beta.54",
|
|
40
40
|
"@xstyled/system": "~3.7.3",
|
|
41
41
|
"uid": "^2.0.1",
|
|
42
|
-
"@elliemae/ds-props-helpers": "3.52.0-rc.
|
|
43
|
-
"@elliemae/ds-system": "3.52.0-rc.
|
|
44
|
-
"@elliemae/ds-typescript-helpers": "3.52.0-rc.
|
|
42
|
+
"@elliemae/ds-props-helpers": "3.52.0-rc.2",
|
|
43
|
+
"@elliemae/ds-system": "3.52.0-rc.2",
|
|
44
|
+
"@elliemae/ds-typescript-helpers": "3.52.0-rc.2"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@elliemae/pui-cli": "9.0.0-next.55",
|
|
48
48
|
"jest": "~29.7.0",
|
|
49
49
|
"styled-components": "~5.3.9",
|
|
50
|
-
"@elliemae/ds-monorepo-devops": "3.52.0-rc.
|
|
51
|
-
"@elliemae/ds-test-utils": "3.52.0-rc.
|
|
50
|
+
"@elliemae/ds-monorepo-devops": "3.52.0-rc.2",
|
|
51
|
+
"@elliemae/ds-test-utils": "3.52.0-rc.2"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
54
|
"lodash": "^4.17.21",
|