eli-video-interview 1.2.42-alpha.41 → 1.2.42-alpha.42

package/esm/modules/ai-ability-select/Root.js

@@ -21,7 +21,8 @@ import { Stack } from 'fbm-ui/lib/mui';
 import { forwardRef, memo, useEffect } from 'react';
 var ScrollDialogContent = styled(Box)({
     maxHeight: 'calc(100vh - 192px)',
-    overflow: 'scroll',
+    height: 'calc(100vh - 192px)',
+    overflow: 'hidden',
 });
 var AiAbilitySelectRoot = forwardRef(function (_a, ref) {
     var jobToken = _a.jobToken, thirdToken = _a.thirdToken, token = _a.token, hiddenTips = _a.hiddenTips;
@@ -41,7 +42,7 @@ var AiAbilitySelectRoot = forwardRef(function (_a, ref) {
         setEnterprise({ jobToken: jobToken, thirdToken: thirdToken });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [jobToken, thirdToken]);
-    return (_jsx(ScrollDialogContent, __assign({ ref: ref }, { children: _jsxs(Box, __assign({ display: "flex", flexDirection: "column", width: 760 }, { children: [_jsxs(Stack, __assign({ spacing: 2, mb: 2 }, { children: [_jsx(Typography, __assign({ variant: "body1", fontWeight: 500 }, { children: !hiddenTips ? '请选择要优先使用的考察能力，也可以点击「下一步」直接出题' : '已选择的考察能力会优先在面试题目中展示' })), (aiAbilityList === null || aiAbilityList === void 0 ? void 0 : aiAbilityList.some(function (v) { return v.isNew; })) && (_jsxs(Stack, __assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx("img", { src: "//webcdn.fbmms.cn/assets/XXRf/bdUI9qZoTx-l2k_OHTotn", alt: "", width: 38, height: 16 }), _jsx(Typography, __assign({ variant: "caption", color: "textSecondary" }, { children: "AI\u6839\u636E\u5C97\u4F4D\u4FE1\u606F\u751F\u6210\u7684\u80FD\u529B\uFF0C\u521B\u5EFA\u5B8C\u6B65\u9AA4\u540E\uFF0C\u4F1A\u81EA\u52A8\u5C06\u9009\u62E9\u7684\u65B0\u589E\u80FD\u529B\u52A0\u5165\u5230\u8BBE\u7F6E\u9875\u7684\u8003\u5BDF\u80FD\u529B\u5217\u8868\u4E2D\u3002" }))] })))] })), _jsx(AiAbilityList, { items: aiAbilityList })] })) })));
+    return (_jsx(ScrollDialogContent, __assign({ ref: ref }, { children: _jsxs(Box, __assign({ display: "flex", flexDirection: "column", width: 760, height: 1 }, { children: [_jsxs(Stack, __assign({ spacing: 2, mb: 2 }, { children: [_jsx(Typography, __assign({ variant: "body1", fontWeight: 500 }, { children: !hiddenTips ? '请选择要优先使用的考察能力，也可以点击「下一步」直接出题' : '已选择的考察能力会优先在面试题目中展示' })), (aiAbilityList === null || aiAbilityList === void 0 ? void 0 : aiAbilityList.some(function (v) { return v.isNew; })) && (_jsxs(Stack, __assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsx("img", { src: "//webcdn.fbmms.cn/assets/XXRf/bdUI9qZoTx-l2k_OHTotn", alt: "", width: 38, height: 16 }), _jsx(Typography, __assign({ variant: "caption", color: "textSecondary" }, { children: "AI\u6839\u636E\u5C97\u4F4D\u4FE1\u606F\u751F\u6210\u7684\u80FD\u529B\uFF0C\u521B\u5EFA\u5B8C\u6B65\u9AA4\u540E\uFF0C\u4F1A\u81EA\u52A8\u5C06\u9009\u62E9\u7684\u65B0\u589E\u80FD\u529B\u52A0\u5165\u5230\u8BBE\u7F6E\u9875\u7684\u8003\u5BDF\u80FD\u529B\u5217\u8868\u4E2D\u3002" }))] })))] })), _jsx(AiAbilityList, { items: aiAbilityList })] })) })));
 });
 AiAbilitySelectRoot.displayName = 'AiAbilitySelectRoot';
 export default memo(AiAbilitySelectRoot);

package/esm/modules/ai-ability-select/components/AiAbilityItem/AiAbilityDetail.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { AiAbilityDetailProps } from './interface';
-declare const AiAbilityDetail: React.FC<AiAbilityDetailProps>;
-export default AiAbilityDetail;
+declare const _default: import("react").NamedExoticComponent<AiAbilityDetailProps>;
+export default _default;

package/esm/modules/ai-ability-select/components/AiAbilityItem/AiAbilityDetail.js

@@ -12,6 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Typography } from 'fbm-ui';
 import { Stack } from 'fbm-ui/lib/mui';
+import { memo } from 'react';
 var AiAbilityDetail = function (_a) {
     var detail = _a.detail;
     return (_jsx(Box, __assign({ p: 2, maxHeight: 582, overflow: "scroll" }, { children: detail === null || detail === void 0 ? void 0 : detail.map(function (v) {
@@ -19,4 +20,4 @@ var AiAbilityDetail = function (_a) {
             return (_jsxs(Stack, __assign({ mb: 2, spacing: 1, width: 300 }, { children: [_jsx(Typography, __assign({ variant: "body2", fontWeight: 500 }, { children: v.name })), _jsx(Typography, __assign({ variant: "body2", color: "textSecondary" }, { children: (_a = v.items) === null || _a === void 0 ? void 0 : _a.join('\n') }))] }), v.name));
         }) })));
 };
-export default AiAbilityDetail;
+export default memo(AiAbilityDetail);

package/esm/modules/ai-ability-select/components/AiAbilityItem/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { AiAbilityItemProps } from './interface';
-declare const AiAbilityItem: React.FC<AiAbilityItemProps>;
-export default AiAbilityItem;
+declare const _default: import("react").NamedExoticComponent<AiAbilityItemProps>;
+export default _default;

package/esm/modules/ai-ability-select/components/AiAbilityItem/index.js

@@ -39,15 +39,14 @@ import AiAbilityDetail from './AiAbilityDetail';
 import { NewBadge } from './styled';
 import { useAiAbilityListStore } from "../../../../store/ai-ability-select/question-ability-store";
 import { Box, Checkbox, Paper, Popover, Typography } from 'fbm-ui';
+import { memo } from 'react';
 var AiAbilityItem = function (_a) {
     var name = _a.name, isNew = _a.isNew, token = _a.token, detail = _a.detail;
     var _b = useAiAbilityListStore(), selctedAbilitys = _b.selctedAbilitys, setSelctedAbilitys = _b.setSelctedAbilitys;
     var handleChange = function (_, checked) {
         return setSelctedAbilitys(__spreadArray(__spreadArray([], __read(selctedAbilitys.filter(function (v) { return v !== token; })), false), __read((checked ? [token] : [])), false));
     };
-    return (_jsx(Paper, __assign({ variant: "outlined" }, { children: _jsxs(Box, __assign({ sx: { pl: 2, width: 240, height: 54, display: 'flex', alignItems: 'center', position: 'relative' } }, { children: [_jsx(Checkbox, { onChange: handleChange, label: _jsx(AiAbilityLable, { name: name, detail: detail }), checked: selctedAbilitys.includes(token), 
-                    // @ts-ignore
-                    sx: { width: 1, height: 1 } }), isNew && _jsx(NewBadge, { src: "//webcdn.fbmms.cn/assets/XXRf/bdUI9qZoTx-l2k_OHTotn" })] })) })));
+    return (_jsx(Paper, __assign({ variant: "outlined" }, { children: _jsxs(Box, __assign({ sx: { pl: 2, width: 240, height: 54, display: 'flex', alignItems: 'center', position: 'relative' } }, { children: [_jsx(Checkbox, { onChange: handleChange, label: _jsx(MemoAiAbilityLable, { name: name, detail: detail }), checked: selctedAbilitys.includes(token), sx: { width: 1, height: 1 } }), isNew && _jsx(NewBadge, { src: "//webcdn.fbmms.cn/assets/XXRf/bdUI9qZoTx-l2k_OHTotn" })] })) })));
 };
 var AiAbilityLable = function (_a) {
     var name = _a.name, detail = _a.detail;
@@ -55,4 +54,5 @@ var AiAbilityLable = function (_a) {
         return (_jsx(Popover, __assign({ content: _jsx(AiAbilityDetail, { detail: detail }), trigger: "hover", placement: "right" }, { children: _jsx(Typography, __assign({ noWrap: true, maxWidth: 180, variant: "body2", sx: { mt: 0.5 } }, { children: name })) })));
     return (_jsx(Typography, __assign({ noWrap: true, maxWidth: 180, variant: "body2" }, { children: name })));
 };
-export default AiAbilityItem;
+var MemoAiAbilityLable = memo(AiAbilityLable);
+export default memo(AiAbilityItem);

package/esm/modules/ai-ability-select/components/AiAbilityList/index.js

@@ -11,9 +11,21 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import AiAbilityItem from '../AiAbilityItem';
-import { Grid } from 'fbm-ui';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { FixedSizeGrid as Grid } from 'react-window';
+var Cell = function (_a) {
+    var data = _a.data, columnIndex = _a.columnIndex, rowIndex = _a.rowIndex, style = _a.style;
+    var item = data[rowIndex * 3 + columnIndex];
+    if (!item) {
+        return null;
+    }
+    return (_jsx("div", __assign({ style: __assign(__assign({}, style), { width: style.width - 8, height: style.height - 8 }) }, { children: _jsx(AiAbilityItem, __assign({}, item)) })));
+};
 var AiAbilityList = function (_a) {
     var items = _a.items;
-    return (_jsx(Grid, __assign({ container: true, spacing: 1, rowSpacing: 1, columnSpacing: 1 }, { children: items === null || items === void 0 ? void 0 : items.map(function (item) { return (_jsx(Grid, __assign({ item: true }, { children: _jsx(AiAbilityItem, __assign({}, item)) }), item.token)); }) })));
+    return (_jsx(AutoSizer, { children: function (_a) {
+            var height = _a.height, width = _a.width;
+            return (_jsx(Grid, __assign({ columnCount: 3, columnWidth: 240, overscanRowCount: 10, height: height, rowCount: Math.ceil(items.length / 3), rowHeight: 62, width: width, itemData: items }, { children: Cell })));
+        } }));
 };
 export default AiAbilityList;

package/lib/modules/ai-ability-select/Root.js

@@ -26,7 +26,8 @@ var mui_1 = require("fbm-ui/lib/mui");
 var react_1 = require("react");
 var ScrollDialogContent = (0, fbm_ui_2.styled)(fbm_ui_1.Box)({
     maxHeight: 'calc(100vh - 192px)',
-    overflow: 'scroll',
+    height: 'calc(100vh - 192px)',
+    overflow: 'hidden',
 });
 var AiAbilitySelectRoot = (0, react_1.forwardRef)(function (_a, ref) {
     var jobToken = _a.jobToken, thirdToken = _a.thirdToken, token = _a.token, hiddenTips = _a.hiddenTips;
@@ -46,7 +47,7 @@ var AiAbilitySelectRoot = (0, react_1.forwardRef)(function (_a, ref) {
         setEnterprise({ jobToken: jobToken, thirdToken: thirdToken });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [jobToken, thirdToken]);
-    return ((0, jsx_runtime_1.jsx)(ScrollDialogContent, __assign({ ref: ref }, { children: (0, jsx_runtime_1.jsxs)(fbm_ui_1.Box, __assign({ display: "flex", flexDirection: "column", width: 760 }, { children: [(0, jsx_runtime_1.jsxs)(mui_1.Stack, __assign({ spacing: 2, mb: 2 }, { children: [(0, jsx_runtime_1.jsx)(fbm_ui_1.Typography, __assign({ variant: "body1", fontWeight: 500 }, { children: !hiddenTips ? '请选择要优先使用的考察能力，也可以点击「下一步」直接出题' : '已选择的考察能力会优先在面试题目中展示' })), (aiAbilityList === null || aiAbilityList === void 0 ? void 0 : aiAbilityList.some(function (v) { return v.isNew; })) && ((0, jsx_runtime_1.jsxs)(mui_1.Stack, __assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: "//webcdn.fbmms.cn/assets/XXRf/bdUI9qZoTx-l2k_OHTotn", alt: "", width: 38, height: 16 }), (0, jsx_runtime_1.jsx)(fbm_ui_1.Typography, __assign({ variant: "caption", color: "textSecondary" }, { children: "AI\u6839\u636E\u5C97\u4F4D\u4FE1\u606F\u751F\u6210\u7684\u80FD\u529B\uFF0C\u521B\u5EFA\u5B8C\u6B65\u9AA4\u540E\uFF0C\u4F1A\u81EA\u52A8\u5C06\u9009\u62E9\u7684\u65B0\u589E\u80FD\u529B\u52A0\u5165\u5230\u8BBE\u7F6E\u9875\u7684\u8003\u5BDF\u80FD\u529B\u5217\u8868\u4E2D\u3002" }))] })))] })), (0, jsx_runtime_1.jsx)(AiAbilityList_1.default, { items: aiAbilityList })] })) })));
+    return ((0, jsx_runtime_1.jsx)(ScrollDialogContent, __assign({ ref: ref }, { children: (0, jsx_runtime_1.jsxs)(fbm_ui_1.Box, __assign({ display: "flex", flexDirection: "column", width: 760, height: 1 }, { children: [(0, jsx_runtime_1.jsxs)(mui_1.Stack, __assign({ spacing: 2, mb: 2 }, { children: [(0, jsx_runtime_1.jsx)(fbm_ui_1.Typography, __assign({ variant: "body1", fontWeight: 500 }, { children: !hiddenTips ? '请选择要优先使用的考察能力，也可以点击「下一步」直接出题' : '已选择的考察能力会优先在面试题目中展示' })), (aiAbilityList === null || aiAbilityList === void 0 ? void 0 : aiAbilityList.some(function (v) { return v.isNew; })) && ((0, jsx_runtime_1.jsxs)(mui_1.Stack, __assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: "//webcdn.fbmms.cn/assets/XXRf/bdUI9qZoTx-l2k_OHTotn", alt: "", width: 38, height: 16 }), (0, jsx_runtime_1.jsx)(fbm_ui_1.Typography, __assign({ variant: "caption", color: "textSecondary" }, { children: "AI\u6839\u636E\u5C97\u4F4D\u4FE1\u606F\u751F\u6210\u7684\u80FD\u529B\uFF0C\u521B\u5EFA\u5B8C\u6B65\u9AA4\u540E\uFF0C\u4F1A\u81EA\u52A8\u5C06\u9009\u62E9\u7684\u65B0\u589E\u80FD\u529B\u52A0\u5165\u5230\u8BBE\u7F6E\u9875\u7684\u8003\u5BDF\u80FD\u529B\u5217\u8868\u4E2D\u3002" }))] })))] })), (0, jsx_runtime_1.jsx)(AiAbilityList_1.default, { items: aiAbilityList })] })) })));
 });
 AiAbilitySelectRoot.displayName = 'AiAbilitySelectRoot';
 exports.default = (0, react_1.memo)(AiAbilitySelectRoot);

package/lib/modules/ai-ability-select/components/AiAbilityItem/AiAbilityDetail.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { AiAbilityDetailProps } from './interface';
-declare const AiAbilityDetail: React.FC<AiAbilityDetailProps>;
-export default AiAbilityDetail;
+declare const _default: import("react").NamedExoticComponent<AiAbilityDetailProps>;
+export default _default;

package/lib/modules/ai-ability-select/components/AiAbilityItem/AiAbilityDetail.js

@@ -14,6 +14,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var fbm_ui_1 = require("fbm-ui");
 var mui_1 = require("fbm-ui/lib/mui");
+var react_1 = require("react");
 var AiAbilityDetail = function (_a) {
     var detail = _a.detail;
     return ((0, jsx_runtime_1.jsx)(fbm_ui_1.Box, __assign({ p: 2, maxHeight: 582, overflow: "scroll" }, { children: detail === null || detail === void 0 ? void 0 : detail.map(function (v) {
@@ -21,4 +22,4 @@ var AiAbilityDetail = function (_a) {
             return ((0, jsx_runtime_1.jsxs)(mui_1.Stack, __assign({ mb: 2, spacing: 1, width: 300 }, { children: [(0, jsx_runtime_1.jsx)(fbm_ui_1.Typography, __assign({ variant: "body2", fontWeight: 500 }, { children: v.name })), (0, jsx_runtime_1.jsx)(fbm_ui_1.Typography, __assign({ variant: "body2", color: "textSecondary" }, { children: (_a = v.items) === null || _a === void 0 ? void 0 : _a.join('\n') }))] }), v.name));
         }) })));
 };
-exports.default = AiAbilityDetail;
+exports.default = (0, react_1.memo)(AiAbilityDetail);

package/lib/modules/ai-ability-select/components/AiAbilityItem/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { AiAbilityItemProps } from './interface';
-declare const AiAbilityItem: React.FC<AiAbilityItemProps>;
-export default AiAbilityItem;
+declare const _default: import("react").NamedExoticComponent<AiAbilityItemProps>;
+export default _default;

package/lib/modules/ai-ability-select/components/AiAbilityItem/index.js

@@ -44,15 +44,14 @@ var AiAbilityDetail_1 = __importDefault(require("./AiAbilityDetail"));
 var styled_1 = require("./styled");
 var question_ability_store_1 = require("../../../../store/ai-ability-select/question-ability-store");
 var fbm_ui_1 = require("fbm-ui");
+var react_1 = require("react");
 var AiAbilityItem = function (_a) {
     var name = _a.name, isNew = _a.isNew, token = _a.token, detail = _a.detail;
     var _b = (0, question_ability_store_1.useAiAbilityListStore)(), selctedAbilitys = _b.selctedAbilitys, setSelctedAbilitys = _b.setSelctedAbilitys;
     var handleChange = function (_, checked) {
         return setSelctedAbilitys(__spreadArray(__spreadArray([], __read(selctedAbilitys.filter(function (v) { return v !== token; })), false), __read((checked ? [token] : [])), false));
     };
-    return ((0, jsx_runtime_1.jsx)(fbm_ui_1.Paper, __assign({ variant: "outlined" }, { children: (0, jsx_runtime_1.jsxs)(fbm_ui_1.Box, __assign({ sx: { pl: 2, width: 240, height: 54, display: 'flex', alignItems: 'center', position: 'relative' } }, { children: [(0, jsx_runtime_1.jsx)(fbm_ui_1.Checkbox, { onChange: handleChange, label: (0, jsx_runtime_1.jsx)(AiAbilityLable, { name: name, detail: detail }), checked: selctedAbilitys.includes(token), 
-                    // @ts-ignore
-                    sx: { width: 1, height: 1 } }), isNew && (0, jsx_runtime_1.jsx)(styled_1.NewBadge, { src: "//webcdn.fbmms.cn/assets/XXRf/bdUI9qZoTx-l2k_OHTotn" })] })) })));
+    return ((0, jsx_runtime_1.jsx)(fbm_ui_1.Paper, __assign({ variant: "outlined" }, { children: (0, jsx_runtime_1.jsxs)(fbm_ui_1.Box, __assign({ sx: { pl: 2, width: 240, height: 54, display: 'flex', alignItems: 'center', position: 'relative' } }, { children: [(0, jsx_runtime_1.jsx)(fbm_ui_1.Checkbox, { onChange: handleChange, label: (0, jsx_runtime_1.jsx)(MemoAiAbilityLable, { name: name, detail: detail }), checked: selctedAbilitys.includes(token), sx: { width: 1, height: 1 } }), isNew && (0, jsx_runtime_1.jsx)(styled_1.NewBadge, { src: "//webcdn.fbmms.cn/assets/XXRf/bdUI9qZoTx-l2k_OHTotn" })] })) })));
 };
 var AiAbilityLable = function (_a) {
     var name = _a.name, detail = _a.detail;
@@ -60,4 +59,5 @@ var AiAbilityLable = function (_a) {
         return ((0, jsx_runtime_1.jsx)(fbm_ui_1.Popover, __assign({ content: (0, jsx_runtime_1.jsx)(AiAbilityDetail_1.default, { detail: detail }), trigger: "hover", placement: "right" }, { children: (0, jsx_runtime_1.jsx)(fbm_ui_1.Typography, __assign({ noWrap: true, maxWidth: 180, variant: "body2", sx: { mt: 0.5 } }, { children: name })) })));
     return ((0, jsx_runtime_1.jsx)(fbm_ui_1.Typography, __assign({ noWrap: true, maxWidth: 180, variant: "body2" }, { children: name })));
 };
-exports.default = AiAbilityItem;
+var MemoAiAbilityLable = (0, react_1.memo)(AiAbilityLable);
+exports.default = (0, react_1.memo)(AiAbilityItem);

package/lib/modules/ai-ability-select/components/AiAbilityList/index.js

@@ -16,9 +16,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var AiAbilityItem_1 = __importDefault(require("../AiAbilityItem"));
-var fbm_ui_1 = require("fbm-ui");
+var react_virtualized_auto_sizer_1 = __importDefault(require("react-virtualized-auto-sizer"));
+var react_window_1 = require("react-window");
+var Cell = function (_a) {
+    var data = _a.data, columnIndex = _a.columnIndex, rowIndex = _a.rowIndex, style = _a.style;
+    var item = data[rowIndex * 3 + columnIndex];
+    if (!item) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ style: __assign(__assign({}, style), { width: style.width - 8, height: style.height - 8 }) }, { children: (0, jsx_runtime_1.jsx)(AiAbilityItem_1.default, __assign({}, item)) })));
+};
 var AiAbilityList = function (_a) {
     var items = _a.items;
-    return ((0, jsx_runtime_1.jsx)(fbm_ui_1.Grid, __assign({ container: true, spacing: 1, rowSpacing: 1, columnSpacing: 1 }, { children: items === null || items === void 0 ? void 0 : items.map(function (item) { return ((0, jsx_runtime_1.jsx)(fbm_ui_1.Grid, __assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(AiAbilityItem_1.default, __assign({}, item)) }), item.token)); }) })));
+    return ((0, jsx_runtime_1.jsx)(react_virtualized_auto_sizer_1.default, { children: function (_a) {
+            var height = _a.height, width = _a.width;
+            return ((0, jsx_runtime_1.jsx)(react_window_1.FixedSizeGrid, __assign({ columnCount: 3, columnWidth: 240, overscanRowCount: 10, height: height, rowCount: Math.ceil(items.length / 3), rowHeight: 62, width: width, itemData: items }, { children: Cell })));
+        } }));
 };
 exports.default = AiAbilityList;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eli-video-interview",
-  "version": "1.2.42-alpha.41",
+  "version": "1.2.42-alpha.42",
   "description": "鳄梨科技 AI视频面试 React SDK",
   "author": "鳄梨科技",
   "license": "MIT",
@@ -30,7 +30,9 @@
     "sortablejs": "^1.15.0",
     "typescript": "^4.7.2",
     "use-immer": "^0.7.0",
-    "yup": "^1.3.3"
+    "yup": "^1.3.3",
+    "react-window":"1.8.10",
+    "react-virtualized-auto-sizer":"1.0.5"
   },
   "devDependencies": {
     "@types/jest": "^27.5.1",