@elliemae/ds-chat 3.3.0-rc.3 → 3.3.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/parts/chat-container-messages-list/useActionRef.js.map +1 -1
- package/dist/cjs/parts/chat-container-messages-list/useFocusAndScrollHelpers.js +1 -1
- package/dist/cjs/parts/chat-container-messages-list/useFocusAndScrollHelpers.js.map +2 -2
- package/dist/cjs/parts/chat-container-messages-list/useKeyboard.js +3 -1
- package/dist/cjs/parts/chat-container-messages-list/useKeyboard.js.map +2 -2
- package/dist/esm/parts/chat-container-messages-list/useActionRef.js.map +1 -1
- package/dist/esm/parts/chat-container-messages-list/useFocusAndScrollHelpers.js +1 -1
- package/dist/esm/parts/chat-container-messages-list/useFocusAndScrollHelpers.js.map +2 -2
- package/dist/esm/parts/chat-container-messages-list/useKeyboard.js +3 -1
- package/dist/esm/parts/chat-container-messages-list/useKeyboard.js.map +2 -2
- package/package.json +10 -10
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/chat-container-messages-list/useActionRef.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { type DebouncedFunc } from 'lodash';\nimport { useVirtual } from 'react-virtual';\nimport { DSChatT } from '../../react-desc-prop-types';\n\ntype UseActionRefArgs = {\n actionRef: DSChatT.ActionRef;\n useVirtualHelpers: ReturnType<typeof useVirtual>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n onScrollStop: DebouncedFunc<() => string[]>;\n onlyFocus: (index
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { type DebouncedFunc } from 'lodash';\nimport { useVirtual } from 'react-virtual';\nimport { DSChatT } from '../../react-desc-prop-types';\n\ntype UseActionRefArgs = {\n actionRef: DSChatT.ActionRef;\n useVirtualHelpers: ReturnType<typeof useVirtual>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n onScrollStop: DebouncedFunc<() => string[]>;\n onlyFocus: (index: number) => void;\n scrollAndFocus: (index: number, opts?: DSChatT.ScrollToIndexOptions) => void;\n};\n\nexport const useActionRef = ({\n actionRef,\n useVirtualHelpers: { scrollToIndex: vScroll },\n virtualListRef,\n onScrollStop,\n onlyFocus,\n scrollAndFocus,\n}: UseActionRefArgs) => {\n React.useEffect(() => {\n if (actionRef && actionRef.current) {\n const scrollToIndex: DSChatT.ActionRef['current']['scrollToIndex'] = (index, opts = { align: 'center' }) => {\n vScroll(index, opts);\n onScrollStop();\n };\n const focusToIndex: DSChatT.ActionRef['current']['focusToIndex'] = (index, opts = { align: 'center' }) => {\n scrollAndFocus(index, opts);\n };\n const focusToList = () => {\n virtualListRef.current?.focus();\n };\n\n actionRef.current.scrollToIndex = scrollToIndex;\n actionRef.current.getMessagesInView = onScrollStop;\n // I have no idea what the next line refeers to\n // keeping this from original code to avoid any possible breaking-change\n onScrollStop(); // init useMemo due to debounce use.\n actionRef.current.focusToIndex = focusToIndex;\n actionRef.current.focusToIndexWithoutScroll = onlyFocus;\n actionRef.current.focusToList = focusToList;\n }\n }, [actionRef, onScrollStop, onlyFocus, scrollAndFocus, vScroll, virtualListRef]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;AAcX,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,mBAAmB,EAAE,eAAe;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACsB;AACtB,uBAAM,UAAU,MAAM;AACpB,QAAI,aAAa,UAAU,SAAS;AAClC,YAAM,gBAA+D,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,MAAM;AAC1G,gBAAQ,OAAO,IAAI;AACnB,qBAAa;AAAA,MACf;AACA,YAAM,eAA6D,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,MAAM;AACxG,uBAAe,OAAO,IAAI;AAAA,MAC5B;AACA,YAAM,cAAc,MAAM;AACxB,uBAAe,SAAS,MAAM;AAAA,MAChC;AAEA,gBAAU,QAAQ,gBAAgB;AAClC,gBAAU,QAAQ,oBAAoB;AAGtC,mBAAa;AACb,gBAAU,QAAQ,eAAe;AACjC,gBAAU,QAAQ,4BAA4B;AAC9C,gBAAU,QAAQ,cAAc;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,WAAW,cAAc,WAAW,gBAAgB,SAAS,cAAc,CAAC;AAClF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -55,7 +55,7 @@ const useFocusAndScrollHelpers = ({
|
|
|
55
55
|
return indexList;
|
|
56
56
|
}, 500), [onScrollEnds, pendingOnScroll, virtualListRef]);
|
|
57
57
|
const onlyFocus = import_react.default.useCallback((index) => {
|
|
58
|
-
virtualListRef.current?.querySelector(`[data-index="${index
|
|
58
|
+
virtualListRef.current?.querySelector(`[data-index="${index}"]`)?.focus();
|
|
59
59
|
}, [virtualListRef]);
|
|
60
60
|
const scrollAndFocus = import_react.default.useCallback((index, opts = { align: "center" }) => {
|
|
61
61
|
vScroll(index, opts);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/chat-container-messages-list/useFocusAndScrollHelpers.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { debounce } from 'lodash';\nimport { DSChatT } from '../../react-desc-prop-types';\n\ntype UseFocusAndScrollHelpersArgs = {\n propsWithDefault: DSChatT.MessagesListProps;\n useVirtualHelpers: ReturnType<typeof useVirtual>;\n pendingOnScroll: React.MutableRefObject<boolean>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n};\n\nexport const useFocusAndScrollHelpers = ({\n propsWithDefault: { onScrollEnds },\n useVirtualHelpers: { scrollToIndex: vScroll },\n pendingOnScroll,\n virtualListRef,\n}: UseFocusAndScrollHelpersArgs) => {\n const onScrollStop = React.useMemo(\n () =>\n debounce((): string[] => {\n if (document.visibilityState === 'hidden') {\n pendingOnScroll.current = true;\n return [];\n }\n if (!virtualListRef.current) return [];\n pendingOnScroll.current = false;\n const { bottom, top } = virtualListRef.current?.getBoundingClientRect() || {};\n\n const list = virtualListRef.current.querySelectorAll<HTMLElement>('[data-element=\"chat-element-list-item\"]');\n const indexList: Array<string> = [];\n list.forEach((item: HTMLElement) => {\n const { top: itemTop } = item.getBoundingClientRect();\n\n const itemPadding = 10;\n if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index || '');\n });\n if (onScrollEnds) onScrollEnds(indexList);\n return indexList;\n }, 500),\n [onScrollEnds, pendingOnScroll, virtualListRef],\n );\n\n const onlyFocus = React.useCallback(\n (index
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;AAElB,oBAAyB;AAUlB,MAAM,2BAA2B,CAAC;AAAA,EACvC,kBAAkB,EAAE;AAAA,EACpB,mBAAmB,EAAE,eAAe;AAAA,EACpC;AAAA,EACA;AAAA,MACkC;AAClC,QAAM,eAAe,qBAAM,QACzB,MACE,4BAAS,MAAgB;AACvB,QAAI,SAAS,oBAAoB,UAAU;AACzC,sBAAgB,UAAU;AAC1B,aAAO,CAAC;AAAA,IACV;AACA,QAAI,CAAC,eAAe;AAAS,aAAO,CAAC;AACrC,oBAAgB,UAAU;AAC1B,UAAM,EAAE,QAAQ,QAAQ,eAAe,SAAS,sBAAsB,KAAK,CAAC;AAE5E,UAAM,OAAO,eAAe,QAAQ,iBAA8B,yCAAyC;AAC3G,UAAM,YAA2B,CAAC;AAClC,SAAK,QAAQ,CAAC,SAAsB;AAClC,YAAM,EAAE,KAAK,YAAY,KAAK,sBAAsB;AAEpD,YAAM,cAAc;AACpB,UAAI,UAAU,cAAc,UAAU,UAAU,cAAc;AAAK,kBAAU,KAAK,KAAK,QAAQ,SAAS,EAAE;AAAA,IAC5G,CAAC;AACD,QAAI;AAAc,mBAAa,SAAS;AACxC,WAAO;AAAA,EACT,GAAG,GAAG,GACR,CAAC,cAAc,iBAAiB,cAAc,CAChD;AAEA,QAAM,YAAY,qBAAM,YACtB,CAAC,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { debounce } from 'lodash';\nimport { DSChatT } from '../../react-desc-prop-types';\n\ntype UseFocusAndScrollHelpersArgs = {\n propsWithDefault: DSChatT.MessagesListProps;\n useVirtualHelpers: ReturnType<typeof useVirtual>;\n pendingOnScroll: React.MutableRefObject<boolean>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n};\n\nexport const useFocusAndScrollHelpers = ({\n propsWithDefault: { onScrollEnds },\n useVirtualHelpers: { scrollToIndex: vScroll },\n pendingOnScroll,\n virtualListRef,\n}: UseFocusAndScrollHelpersArgs) => {\n const onScrollStop = React.useMemo(\n () =>\n debounce((): string[] => {\n if (document.visibilityState === 'hidden') {\n pendingOnScroll.current = true;\n return [];\n }\n if (!virtualListRef.current) return [];\n pendingOnScroll.current = false;\n const { bottom, top } = virtualListRef.current?.getBoundingClientRect() || {};\n\n const list = virtualListRef.current.querySelectorAll<HTMLElement>('[data-element=\"chat-element-list-item\"]');\n const indexList: Array<string> = [];\n list.forEach((item: HTMLElement) => {\n const { top: itemTop } = item.getBoundingClientRect();\n\n const itemPadding = 10;\n if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index || '');\n });\n if (onScrollEnds) onScrollEnds(indexList);\n return indexList;\n }, 500),\n [onScrollEnds, pendingOnScroll, virtualListRef],\n );\n\n const onlyFocus = React.useCallback(\n (index: number | string) => {\n (virtualListRef.current?.querySelector(`[data-index=\"${index}\"]`) as HTMLDivElement)?.focus();\n },\n [virtualListRef],\n );\n\n const scrollAndFocus = React.useCallback(\n (index: number, opts = { align: 'center' } as DSChatT.ScrollToIndexOptions) => {\n vScroll(index, opts);\n setTimeout(() => {\n onlyFocus(index);\n }, 300);\n onScrollStop();\n },\n [onScrollStop, onlyFocus, vScroll],\n );\n\n const checkPendingOnScroll = React.useCallback(() => {\n if (pendingOnScroll.current === true) onScrollStop();\n }, [onScrollStop, pendingOnScroll]);\n\n return React.useMemo(\n () => ({\n onScrollStop,\n onlyFocus,\n scrollAndFocus,\n checkPendingOnScroll,\n }),\n [onScrollStop, onlyFocus, scrollAndFocus, checkPendingOnScroll],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;AAElB,oBAAyB;AAUlB,MAAM,2BAA2B,CAAC;AAAA,EACvC,kBAAkB,EAAE;AAAA,EACpB,mBAAmB,EAAE,eAAe;AAAA,EACpC;AAAA,EACA;AAAA,MACkC;AAClC,QAAM,eAAe,qBAAM,QACzB,MACE,4BAAS,MAAgB;AACvB,QAAI,SAAS,oBAAoB,UAAU;AACzC,sBAAgB,UAAU;AAC1B,aAAO,CAAC;AAAA,IACV;AACA,QAAI,CAAC,eAAe;AAAS,aAAO,CAAC;AACrC,oBAAgB,UAAU;AAC1B,UAAM,EAAE,QAAQ,QAAQ,eAAe,SAAS,sBAAsB,KAAK,CAAC;AAE5E,UAAM,OAAO,eAAe,QAAQ,iBAA8B,yCAAyC;AAC3G,UAAM,YAA2B,CAAC;AAClC,SAAK,QAAQ,CAAC,SAAsB;AAClC,YAAM,EAAE,KAAK,YAAY,KAAK,sBAAsB;AAEpD,YAAM,cAAc;AACpB,UAAI,UAAU,cAAc,UAAU,UAAU,cAAc;AAAK,kBAAU,KAAK,KAAK,QAAQ,SAAS,EAAE;AAAA,IAC5G,CAAC;AACD,QAAI;AAAc,mBAAa,SAAS;AACxC,WAAO;AAAA,EACT,GAAG,GAAG,GACR,CAAC,cAAc,iBAAiB,cAAc,CAChD;AAEA,QAAM,YAAY,qBAAM,YACtB,CAAC,UAA2B;AAC1B,IAAC,eAAe,SAAS,cAAc,gBAAgB,SAAS,GAAsB,MAAM;AAAA,EAC9F,GACA,CAAC,cAAc,CACjB;AAEA,QAAM,iBAAiB,qBAAM,YAC3B,CAAC,OAAe,OAAO,EAAE,OAAO,SAAS,MAAsC;AAC7E,YAAQ,OAAO,IAAI;AACnB,eAAW,MAAM;AACf,gBAAU,KAAK;AAAA,IACjB,GAAG,GAAG;AACN,iBAAa;AAAA,EACf,GACA,CAAC,cAAc,WAAW,OAAO,CACnC;AAEA,QAAM,uBAAuB,qBAAM,YAAY,MAAM;AACnD,QAAI,gBAAgB,YAAY;AAAM,mBAAa;AAAA,EACrD,GAAG,CAAC,cAAc,eAAe,CAAC;AAElC,SAAO,qBAAM,QACX,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA,CAAC,cAAc,WAAW,gBAAgB,oBAAoB,CAChE;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -26,6 +26,7 @@ __export(useKeyboard_exports, {
|
|
|
26
26
|
module.exports = __toCommonJS(useKeyboard_exports);
|
|
27
27
|
var React = __toESM(require("react"));
|
|
28
28
|
var import_react = __toESM(require("react"));
|
|
29
|
+
const getIsNumber = (val) => Number.isInteger(val);
|
|
29
30
|
const useKeyboard = ({
|
|
30
31
|
propsWithDefault: { hasMoreItems, messages, bannerPosition, bannerRef },
|
|
31
32
|
actionRef,
|
|
@@ -38,6 +39,7 @@ const useKeyboard = ({
|
|
|
38
39
|
const handleKey = import_react.default.useCallback((e) => {
|
|
39
40
|
const { key, currentTarget } = e;
|
|
40
41
|
const index = currentTarget.dataset?.index ? Number(currentTarget.dataset.index) : void 0;
|
|
42
|
+
const isIndexNumber = getIsNumber(index);
|
|
41
43
|
e.stopPropagation();
|
|
42
44
|
switch (key) {
|
|
43
45
|
case "ArrowUp":
|
|
@@ -50,7 +52,7 @@ const useKeyboard = ({
|
|
|
50
52
|
break;
|
|
51
53
|
case "ArrowDown":
|
|
52
54
|
e.preventDefault();
|
|
53
|
-
if (messages?.length &&
|
|
55
|
+
if (messages?.length && isIndexNumber && index < messages.length - 1) {
|
|
54
56
|
(virtualListRef.current?.querySelector(`[data-index="${index + 1}"]`)).focus();
|
|
55
57
|
}
|
|
56
58
|
break;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/chat-container-messages-list/useKeyboard.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { type DebouncedFunc } from 'lodash';\nimport { DSChatT } from '../../react-desc-prop-types';\n\ntype UseKeyboardArgs = {\n propsWithDefault: DSChatT.MessagesListProps;\n actionRef: DSChatT.ActionRef;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n loadMoreRef: React.MutableRefObject<HTMLButtonElement | undefined>;\n scrollAndFocus: (index: number, opts?: DSChatT.ScrollToIndexOptions) => void;\n onlyFocus: (index
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { type DebouncedFunc } from 'lodash';\nimport { DSChatT } from '../../react-desc-prop-types';\n\ntype UseKeyboardArgs = {\n propsWithDefault: DSChatT.MessagesListProps;\n actionRef: DSChatT.ActionRef;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n loadMoreRef: React.MutableRefObject<HTMLButtonElement | undefined>;\n scrollAndFocus: (index: number, opts?: DSChatT.ScrollToIndexOptions) => void;\n onlyFocus: (index: number | string) => void;\n onScrollStop: DebouncedFunc<() => string[]>;\n // useVirtualHelpers: ReturnType<typeof useVirtual>;\n};\n\nconst getIsNumber = (val: unknown): val is number => Number.isInteger(val);\n\nexport const useKeyboard = ({\n propsWithDefault: { hasMoreItems, messages, bannerPosition, bannerRef },\n actionRef,\n virtualListRef,\n loadMoreRef,\n scrollAndFocus,\n onlyFocus,\n onScrollStop,\n}: UseKeyboardArgs) => {\n const handleKey = React.useCallback(\n (e: React.KeyboardEvent<HTMLElement>) => {\n const { key, currentTarget } = e;\n const index = currentTarget.dataset?.index ? Number(currentTarget.dataset.index) : undefined;\n const isIndexNumber = getIsNumber(index);\n e.stopPropagation();\n switch (key) {\n case 'ArrowUp':\n e.preventDefault();\n if (index && index > 0) {\n (virtualListRef.current?.querySelector(`[data-index=\"${index - 1}\"]`) as HTMLDivElement).focus();\n } else if (hasMoreItems === 'top') {\n loadMoreRef.current?.focus();\n }\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (messages?.length && isIndexNumber && index < messages.length - 1) {\n (virtualListRef.current?.querySelector(`[data-index=\"${index + 1}\"]`) as HTMLDivElement).focus();\n }\n break;\n case 'Home':\n e.preventDefault();\n scrollAndFocus(0);\n break;\n case 'End':\n e.preventDefault();\n if (messages?.length) scrollAndFocus(messages.length - 1);\n break;\n case 'Tab':\n if (hasMoreItems === 'bottom' && !e.shiftKey) {\n e.preventDefault();\n loadMoreRef.current?.focus();\n } else if (hasMoreItems === 'top' && e.shiftKey) {\n e.preventDefault();\n loadMoreRef.current?.focus();\n } else if (!e.shiftKey) {\n if (bannerPosition) {\n e.preventDefault();\n bannerRef?.current?.focusOnWrapper();\n }\n } else {\n e.preventDefault();\n virtualListRef.current?.focus();\n }\n break;\n default:\n break;\n }\n },\n [hasMoreItems, messages.length, scrollAndFocus, virtualListRef, loadMoreRef, bannerPosition, bannerRef],\n );\n const handleListKey = React.useCallback(\n (e: React.KeyboardEvent) => {\n const { key } = e;\n switch (key) {\n case 'ArrowUp':\n e.preventDefault();\n if (document.activeElement !== loadMoreRef.current) {\n onlyFocus(onScrollStop()?.shift());\n }\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (document.activeElement === loadMoreRef.current) {\n (virtualListRef.current?.querySelector(`[data-index=\"0\"]`) as HTMLDivElement)?.focus();\n } else {\n onlyFocus(onScrollStop()?.pop());\n }\n break;\n case 'Home':\n e.preventDefault();\n scrollAndFocus(0);\n break;\n case 'End':\n e.preventDefault();\n if (messages?.length) scrollAndFocus(messages.length - 1);\n break;\n case 'Tab':\n if (document.activeElement !== loadMoreRef.current) {\n if (hasMoreItems === 'bottom' && !e.shiftKey) {\n e.preventDefault();\n loadMoreRef.current?.focus();\n } else if (!e.shiftKey) {\n e.preventDefault();\n actionRef.current?.focusToComposer?.();\n }\n } else if (!e.shiftKey) {\n e.preventDefault();\n actionRef.current?.focusToComposer?.();\n } else {\n e.preventDefault();\n virtualListRef.current?.focus();\n }\n break;\n default:\n break;\n }\n },\n [actionRef, hasMoreItems, loadMoreRef, messages.length, onScrollStop, onlyFocus, scrollAndFocus, virtualListRef],\n );\n\n return React.useMemo(() => ({ handleKey, handleListKey }), [handleKey, handleListKey]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/useActionRef.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { type DebouncedFunc } from 'lodash';\nimport { useVirtual } from 'react-virtual';\nimport { DSChatT } from '../../react-desc-prop-types';\n\ntype UseActionRefArgs = {\n actionRef: DSChatT.ActionRef;\n useVirtualHelpers: ReturnType<typeof useVirtual>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n onScrollStop: DebouncedFunc<() => string[]>;\n onlyFocus: (index
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { type DebouncedFunc } from 'lodash';\nimport { useVirtual } from 'react-virtual';\nimport { DSChatT } from '../../react-desc-prop-types';\n\ntype UseActionRefArgs = {\n actionRef: DSChatT.ActionRef;\n useVirtualHelpers: ReturnType<typeof useVirtual>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n onScrollStop: DebouncedFunc<() => string[]>;\n onlyFocus: (index: number) => void;\n scrollAndFocus: (index: number, opts?: DSChatT.ScrollToIndexOptions) => void;\n};\n\nexport const useActionRef = ({\n actionRef,\n useVirtualHelpers: { scrollToIndex: vScroll },\n virtualListRef,\n onScrollStop,\n onlyFocus,\n scrollAndFocus,\n}: UseActionRefArgs) => {\n React.useEffect(() => {\n if (actionRef && actionRef.current) {\n const scrollToIndex: DSChatT.ActionRef['current']['scrollToIndex'] = (index, opts = { align: 'center' }) => {\n vScroll(index, opts);\n onScrollStop();\n };\n const focusToIndex: DSChatT.ActionRef['current']['focusToIndex'] = (index, opts = { align: 'center' }) => {\n scrollAndFocus(index, opts);\n };\n const focusToList = () => {\n virtualListRef.current?.focus();\n };\n\n actionRef.current.scrollToIndex = scrollToIndex;\n actionRef.current.getMessagesInView = onScrollStop;\n // I have no idea what the next line refeers to\n // keeping this from original code to avoid any possible breaking-change\n onScrollStop(); // init useMemo due to debounce use.\n actionRef.current.focusToIndex = focusToIndex;\n actionRef.current.focusToIndexWithoutScroll = onlyFocus;\n actionRef.current.focusToList = focusToList;\n }\n }, [actionRef, onScrollStop, onlyFocus, scrollAndFocus, vScroll, virtualListRef]);\n};\n"],
|
|
5
5
|
"mappings": ";AAAA;ACGA;AAcO,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,mBAAmB,EAAE,eAAe;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACsB;AACtB,SAAM,UAAU,MAAM;AACpB,QAAI,aAAa,UAAU,SAAS;AAClC,YAAM,gBAA+D,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,MAAM;AAC1G,gBAAQ,OAAO,IAAI;AACnB,qBAAa;AAAA,MACf;AACA,YAAM,eAA6D,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,MAAM;AACxG,uBAAe,OAAO,IAAI;AAAA,MAC5B;AACA,YAAM,cAAc,MAAM;AACxB,uBAAe,SAAS,MAAM;AAAA,MAChC;AAEA,gBAAU,QAAQ,gBAAgB;AAClC,gBAAU,QAAQ,oBAAoB;AAGtC,mBAAa;AACb,gBAAU,QAAQ,eAAe;AACjC,gBAAU,QAAQ,4BAA4B;AAC9C,gBAAU,QAAQ,cAAc;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,WAAW,cAAc,WAAW,gBAAgB,SAAS,cAAc,CAAC;AAClF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -30,7 +30,7 @@ const useFocusAndScrollHelpers = ({
|
|
|
30
30
|
return indexList;
|
|
31
31
|
}, 500), [onScrollEnds, pendingOnScroll, virtualListRef]);
|
|
32
32
|
const onlyFocus = React2.useCallback((index) => {
|
|
33
|
-
virtualListRef.current?.querySelector(`[data-index="${index
|
|
33
|
+
virtualListRef.current?.querySelector(`[data-index="${index}"]`)?.focus();
|
|
34
34
|
}, [virtualListRef]);
|
|
35
35
|
const scrollAndFocus = React2.useCallback((index, opts = { align: "center" }) => {
|
|
36
36
|
vScroll(index, opts);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/useFocusAndScrollHelpers.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { debounce } from 'lodash';\nimport { DSChatT } from '../../react-desc-prop-types';\n\ntype UseFocusAndScrollHelpersArgs = {\n propsWithDefault: DSChatT.MessagesListProps;\n useVirtualHelpers: ReturnType<typeof useVirtual>;\n pendingOnScroll: React.MutableRefObject<boolean>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n};\n\nexport const useFocusAndScrollHelpers = ({\n propsWithDefault: { onScrollEnds },\n useVirtualHelpers: { scrollToIndex: vScroll },\n pendingOnScroll,\n virtualListRef,\n}: UseFocusAndScrollHelpersArgs) => {\n const onScrollStop = React.useMemo(\n () =>\n debounce((): string[] => {\n if (document.visibilityState === 'hidden') {\n pendingOnScroll.current = true;\n return [];\n }\n if (!virtualListRef.current) return [];\n pendingOnScroll.current = false;\n const { bottom, top } = virtualListRef.current?.getBoundingClientRect() || {};\n\n const list = virtualListRef.current.querySelectorAll<HTMLElement>('[data-element=\"chat-element-list-item\"]');\n const indexList: Array<string> = [];\n list.forEach((item: HTMLElement) => {\n const { top: itemTop } = item.getBoundingClientRect();\n\n const itemPadding = 10;\n if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index || '');\n });\n if (onScrollEnds) onScrollEnds(indexList);\n return indexList;\n }, 500),\n [onScrollEnds, pendingOnScroll, virtualListRef],\n );\n\n const onlyFocus = React.useCallback(\n (index
|
|
5
|
-
"mappings": ";AAAA;ACGA;AAEA;AAUO,MAAM,2BAA2B,CAAC;AAAA,EACvC,kBAAkB,EAAE;AAAA,EACpB,mBAAmB,EAAE,eAAe;AAAA,EACpC;AAAA,EACA;AAAA,MACkC;AAClC,QAAM,eAAe,OAAM,QACzB,MACE,SAAS,MAAgB;AACvB,QAAI,SAAS,oBAAoB,UAAU;AACzC,sBAAgB,UAAU;AAC1B,aAAO,CAAC;AAAA,IACV;AACA,QAAI,CAAC,eAAe;AAAS,aAAO,CAAC;AACrC,oBAAgB,UAAU;AAC1B,UAAM,EAAE,QAAQ,QAAQ,eAAe,SAAS,sBAAsB,KAAK,CAAC;AAE5E,UAAM,OAAO,eAAe,QAAQ,iBAA8B,yCAAyC;AAC3G,UAAM,YAA2B,CAAC;AAClC,SAAK,QAAQ,CAAC,SAAsB;AAClC,YAAM,EAAE,KAAK,YAAY,KAAK,sBAAsB;AAEpD,YAAM,cAAc;AACpB,UAAI,UAAU,cAAc,UAAU,UAAU,cAAc;AAAK,kBAAU,KAAK,KAAK,QAAQ,SAAS,EAAE;AAAA,IAC5G,CAAC;AACD,QAAI;AAAc,mBAAa,SAAS;AACxC,WAAO;AAAA,EACT,GAAG,GAAG,GACR,CAAC,cAAc,iBAAiB,cAAc,CAChD;AAEA,QAAM,YAAY,OAAM,YACtB,CAAC,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { debounce } from 'lodash';\nimport { DSChatT } from '../../react-desc-prop-types';\n\ntype UseFocusAndScrollHelpersArgs = {\n propsWithDefault: DSChatT.MessagesListProps;\n useVirtualHelpers: ReturnType<typeof useVirtual>;\n pendingOnScroll: React.MutableRefObject<boolean>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n};\n\nexport const useFocusAndScrollHelpers = ({\n propsWithDefault: { onScrollEnds },\n useVirtualHelpers: { scrollToIndex: vScroll },\n pendingOnScroll,\n virtualListRef,\n}: UseFocusAndScrollHelpersArgs) => {\n const onScrollStop = React.useMemo(\n () =>\n debounce((): string[] => {\n if (document.visibilityState === 'hidden') {\n pendingOnScroll.current = true;\n return [];\n }\n if (!virtualListRef.current) return [];\n pendingOnScroll.current = false;\n const { bottom, top } = virtualListRef.current?.getBoundingClientRect() || {};\n\n const list = virtualListRef.current.querySelectorAll<HTMLElement>('[data-element=\"chat-element-list-item\"]');\n const indexList: Array<string> = [];\n list.forEach((item: HTMLElement) => {\n const { top: itemTop } = item.getBoundingClientRect();\n\n const itemPadding = 10;\n if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index || '');\n });\n if (onScrollEnds) onScrollEnds(indexList);\n return indexList;\n }, 500),\n [onScrollEnds, pendingOnScroll, virtualListRef],\n );\n\n const onlyFocus = React.useCallback(\n (index: number | string) => {\n (virtualListRef.current?.querySelector(`[data-index=\"${index}\"]`) as HTMLDivElement)?.focus();\n },\n [virtualListRef],\n );\n\n const scrollAndFocus = React.useCallback(\n (index: number, opts = { align: 'center' } as DSChatT.ScrollToIndexOptions) => {\n vScroll(index, opts);\n setTimeout(() => {\n onlyFocus(index);\n }, 300);\n onScrollStop();\n },\n [onScrollStop, onlyFocus, vScroll],\n );\n\n const checkPendingOnScroll = React.useCallback(() => {\n if (pendingOnScroll.current === true) onScrollStop();\n }, [onScrollStop, pendingOnScroll]);\n\n return React.useMemo(\n () => ({\n onScrollStop,\n onlyFocus,\n scrollAndFocus,\n checkPendingOnScroll,\n }),\n [onScrollStop, onlyFocus, scrollAndFocus, checkPendingOnScroll],\n );\n};\n"],
|
|
5
|
+
"mappings": ";AAAA;ACGA;AAEA;AAUO,MAAM,2BAA2B,CAAC;AAAA,EACvC,kBAAkB,EAAE;AAAA,EACpB,mBAAmB,EAAE,eAAe;AAAA,EACpC;AAAA,EACA;AAAA,MACkC;AAClC,QAAM,eAAe,OAAM,QACzB,MACE,SAAS,MAAgB;AACvB,QAAI,SAAS,oBAAoB,UAAU;AACzC,sBAAgB,UAAU;AAC1B,aAAO,CAAC;AAAA,IACV;AACA,QAAI,CAAC,eAAe;AAAS,aAAO,CAAC;AACrC,oBAAgB,UAAU;AAC1B,UAAM,EAAE,QAAQ,QAAQ,eAAe,SAAS,sBAAsB,KAAK,CAAC;AAE5E,UAAM,OAAO,eAAe,QAAQ,iBAA8B,yCAAyC;AAC3G,UAAM,YAA2B,CAAC;AAClC,SAAK,QAAQ,CAAC,SAAsB;AAClC,YAAM,EAAE,KAAK,YAAY,KAAK,sBAAsB;AAEpD,YAAM,cAAc;AACpB,UAAI,UAAU,cAAc,UAAU,UAAU,cAAc;AAAK,kBAAU,KAAK,KAAK,QAAQ,SAAS,EAAE;AAAA,IAC5G,CAAC;AACD,QAAI;AAAc,mBAAa,SAAS;AACxC,WAAO;AAAA,EACT,GAAG,GAAG,GACR,CAAC,cAAc,iBAAiB,cAAc,CAChD;AAEA,QAAM,YAAY,OAAM,YACtB,CAAC,UAA2B;AAC1B,IAAC,eAAe,SAAS,cAAc,gBAAgB,SAAS,GAAsB,MAAM;AAAA,EAC9F,GACA,CAAC,cAAc,CACjB;AAEA,QAAM,iBAAiB,OAAM,YAC3B,CAAC,OAAe,OAAO,EAAE,OAAO,SAAS,MAAsC;AAC7E,YAAQ,OAAO,IAAI;AACnB,eAAW,MAAM;AACf,gBAAU,KAAK;AAAA,IACjB,GAAG,GAAG;AACN,iBAAa;AAAA,EACf,GACA,CAAC,cAAc,WAAW,OAAO,CACnC;AAEA,QAAM,uBAAuB,OAAM,YAAY,MAAM;AACnD,QAAI,gBAAgB,YAAY;AAAM,mBAAa;AAAA,EACrD,GAAG,CAAC,cAAc,eAAe,CAAC;AAElC,SAAO,OAAM,QACX,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA,CAAC,cAAc,WAAW,gBAAgB,oBAAoB,CAChE;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import React2 from "react";
|
|
4
|
+
const getIsNumber = (val) => Number.isInteger(val);
|
|
4
5
|
const useKeyboard = ({
|
|
5
6
|
propsWithDefault: { hasMoreItems, messages, bannerPosition, bannerRef },
|
|
6
7
|
actionRef,
|
|
@@ -13,6 +14,7 @@ const useKeyboard = ({
|
|
|
13
14
|
const handleKey = React2.useCallback((e) => {
|
|
14
15
|
const { key, currentTarget } = e;
|
|
15
16
|
const index = currentTarget.dataset?.index ? Number(currentTarget.dataset.index) : void 0;
|
|
17
|
+
const isIndexNumber = getIsNumber(index);
|
|
16
18
|
e.stopPropagation();
|
|
17
19
|
switch (key) {
|
|
18
20
|
case "ArrowUp":
|
|
@@ -25,7 +27,7 @@ const useKeyboard = ({
|
|
|
25
27
|
break;
|
|
26
28
|
case "ArrowDown":
|
|
27
29
|
e.preventDefault();
|
|
28
|
-
if (messages?.length &&
|
|
30
|
+
if (messages?.length && isIndexNumber && index < messages.length - 1) {
|
|
29
31
|
(virtualListRef.current?.querySelector(`[data-index="${index + 1}"]`)).focus();
|
|
30
32
|
}
|
|
31
33
|
break;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-container-messages-list/useKeyboard.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { type DebouncedFunc } from 'lodash';\nimport { DSChatT } from '../../react-desc-prop-types';\n\ntype UseKeyboardArgs = {\n propsWithDefault: DSChatT.MessagesListProps;\n actionRef: DSChatT.ActionRef;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n loadMoreRef: React.MutableRefObject<HTMLButtonElement | undefined>;\n scrollAndFocus: (index: number, opts?: DSChatT.ScrollToIndexOptions) => void;\n onlyFocus: (index
|
|
5
|
-
"mappings": ";AAAA;ACGA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { type DebouncedFunc } from 'lodash';\nimport { DSChatT } from '../../react-desc-prop-types';\n\ntype UseKeyboardArgs = {\n propsWithDefault: DSChatT.MessagesListProps;\n actionRef: DSChatT.ActionRef;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n loadMoreRef: React.MutableRefObject<HTMLButtonElement | undefined>;\n scrollAndFocus: (index: number, opts?: DSChatT.ScrollToIndexOptions) => void;\n onlyFocus: (index: number | string) => void;\n onScrollStop: DebouncedFunc<() => string[]>;\n // useVirtualHelpers: ReturnType<typeof useVirtual>;\n};\n\nconst getIsNumber = (val: unknown): val is number => Number.isInteger(val);\n\nexport const useKeyboard = ({\n propsWithDefault: { hasMoreItems, messages, bannerPosition, bannerRef },\n actionRef,\n virtualListRef,\n loadMoreRef,\n scrollAndFocus,\n onlyFocus,\n onScrollStop,\n}: UseKeyboardArgs) => {\n const handleKey = React.useCallback(\n (e: React.KeyboardEvent<HTMLElement>) => {\n const { key, currentTarget } = e;\n const index = currentTarget.dataset?.index ? Number(currentTarget.dataset.index) : undefined;\n const isIndexNumber = getIsNumber(index);\n e.stopPropagation();\n switch (key) {\n case 'ArrowUp':\n e.preventDefault();\n if (index && index > 0) {\n (virtualListRef.current?.querySelector(`[data-index=\"${index - 1}\"]`) as HTMLDivElement).focus();\n } else if (hasMoreItems === 'top') {\n loadMoreRef.current?.focus();\n }\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (messages?.length && isIndexNumber && index < messages.length - 1) {\n (virtualListRef.current?.querySelector(`[data-index=\"${index + 1}\"]`) as HTMLDivElement).focus();\n }\n break;\n case 'Home':\n e.preventDefault();\n scrollAndFocus(0);\n break;\n case 'End':\n e.preventDefault();\n if (messages?.length) scrollAndFocus(messages.length - 1);\n break;\n case 'Tab':\n if (hasMoreItems === 'bottom' && !e.shiftKey) {\n e.preventDefault();\n loadMoreRef.current?.focus();\n } else if (hasMoreItems === 'top' && e.shiftKey) {\n e.preventDefault();\n loadMoreRef.current?.focus();\n } else if (!e.shiftKey) {\n if (bannerPosition) {\n e.preventDefault();\n bannerRef?.current?.focusOnWrapper();\n }\n } else {\n e.preventDefault();\n virtualListRef.current?.focus();\n }\n break;\n default:\n break;\n }\n },\n [hasMoreItems, messages.length, scrollAndFocus, virtualListRef, loadMoreRef, bannerPosition, bannerRef],\n );\n const handleListKey = React.useCallback(\n (e: React.KeyboardEvent) => {\n const { key } = e;\n switch (key) {\n case 'ArrowUp':\n e.preventDefault();\n if (document.activeElement !== loadMoreRef.current) {\n onlyFocus(onScrollStop()?.shift());\n }\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (document.activeElement === loadMoreRef.current) {\n (virtualListRef.current?.querySelector(`[data-index=\"0\"]`) as HTMLDivElement)?.focus();\n } else {\n onlyFocus(onScrollStop()?.pop());\n }\n break;\n case 'Home':\n e.preventDefault();\n scrollAndFocus(0);\n break;\n case 'End':\n e.preventDefault();\n if (messages?.length) scrollAndFocus(messages.length - 1);\n break;\n case 'Tab':\n if (document.activeElement !== loadMoreRef.current) {\n if (hasMoreItems === 'bottom' && !e.shiftKey) {\n e.preventDefault();\n loadMoreRef.current?.focus();\n } else if (!e.shiftKey) {\n e.preventDefault();\n actionRef.current?.focusToComposer?.();\n }\n } else if (!e.shiftKey) {\n e.preventDefault();\n actionRef.current?.focusToComposer?.();\n } else {\n e.preventDefault();\n virtualListRef.current?.focus();\n }\n break;\n default:\n break;\n }\n },\n [actionRef, hasMoreItems, loadMoreRef, messages.length, onScrollStop, onlyFocus, scrollAndFocus, virtualListRef],\n );\n\n return React.useMemo(() => ({ handleKey, handleListKey }), [handleKey, handleListKey]);\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-chat",
|
|
3
|
-
"version": "3.3.0
|
|
3
|
+
"version": "3.3.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Chat",
|
|
6
6
|
"files": [
|
|
@@ -307,15 +307,15 @@
|
|
|
307
307
|
"typeSafety": false
|
|
308
308
|
},
|
|
309
309
|
"dependencies": {
|
|
310
|
-
"@elliemae/ds-banner": "3.3.0
|
|
311
|
-
"@elliemae/ds-button": "3.3.0
|
|
312
|
-
"@elliemae/ds-grid": "3.3.0
|
|
313
|
-
"@elliemae/ds-icons": "3.3.0
|
|
314
|
-
"@elliemae/ds-indeterminate-progress-indicator": "3.3.0
|
|
315
|
-
"@elliemae/ds-system": "3.3.0
|
|
316
|
-
"@elliemae/ds-tooltip": "3.3.0
|
|
317
|
-
"@elliemae/ds-truncated-tooltip-text": "3.3.0
|
|
318
|
-
"@elliemae/ds-utilities": "3.3.0
|
|
310
|
+
"@elliemae/ds-banner": "3.3.0",
|
|
311
|
+
"@elliemae/ds-button": "3.3.0",
|
|
312
|
+
"@elliemae/ds-grid": "3.3.0",
|
|
313
|
+
"@elliemae/ds-icons": "3.3.0",
|
|
314
|
+
"@elliemae/ds-indeterminate-progress-indicator": "3.3.0",
|
|
315
|
+
"@elliemae/ds-system": "3.3.0",
|
|
316
|
+
"@elliemae/ds-tooltip": "3.3.0",
|
|
317
|
+
"@elliemae/ds-truncated-tooltip-text": "3.3.0",
|
|
318
|
+
"@elliemae/ds-utilities": "3.3.0",
|
|
319
319
|
"react-virtual": "~2.10.4"
|
|
320
320
|
},
|
|
321
321
|
"devDependencies": {
|