@elliemae/ds-chat-container 3.70.0-next.7 → 3.70.0-next.70

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.
Files changed (28) hide show
  1. package/dist/cjs/package.json +1 -4
  2. package/dist/cjs/parts/chat-container-messages-list/useActionRef.js +6 -5
  3. package/dist/cjs/parts/chat-container-messages-list/useActionRef.js.map +2 -2
  4. package/dist/cjs/parts/chat-container-messages-list/useChatContainerMessageList.js +4 -3
  5. package/dist/cjs/parts/chat-container-messages-list/useChatContainerMessageList.js.map +2 -2
  6. package/dist/cjs/parts/chat-container-messages-list/useFocusAndScrollHelpers.js +41 -20
  7. package/dist/cjs/parts/chat-container-messages-list/useFocusAndScrollHelpers.js.map +2 -2
  8. package/dist/cjs/parts/chat-container-messages-list/useKeyboard.js +13 -4
  9. package/dist/cjs/parts/chat-container-messages-list/useKeyboard.js.map +2 -2
  10. package/dist/cjs/react-desc-prop-types.js.map +1 -1
  11. package/dist/esm/package.json +1 -4
  12. package/dist/esm/parts/chat-container-messages-list/useActionRef.js +6 -5
  13. package/dist/esm/parts/chat-container-messages-list/useActionRef.js.map +2 -2
  14. package/dist/esm/parts/chat-container-messages-list/useChatContainerMessageList.js +4 -3
  15. package/dist/esm/parts/chat-container-messages-list/useChatContainerMessageList.js.map +2 -2
  16. package/dist/esm/parts/chat-container-messages-list/useFocusAndScrollHelpers.js +42 -21
  17. package/dist/esm/parts/chat-container-messages-list/useFocusAndScrollHelpers.js.map +2 -2
  18. package/dist/esm/parts/chat-container-messages-list/useKeyboard.js +13 -4
  19. package/dist/esm/parts/chat-container-messages-list/useKeyboard.js.map +2 -2
  20. package/dist/esm/react-desc-prop-types.js.map +1 -1
  21. package/dist/types/parts/chat-container-messages-list/useActionRef.d.ts +3 -2
  22. package/dist/types/parts/chat-container-messages-list/useFocusAndScrollHelpers.d.ts +2 -0
  23. package/dist/types/parts/chat-container-messages-list/useKeyboard.d.ts +2 -2
  24. package/dist/types/react-desc-prop-types.d.ts +2 -2
  25. package/package.json +22 -21
  26. package/dist/types/parts/chat-composer/tests/ChatContainerComposer.test.d.ts +0 -1
  27. package/dist/types/tests/ChatContainer.test.d.ts +0 -1
  28. package/dist/types/typescript-testing/typescript-chat-container-valid.d.ts +0 -1
package/dist/cjs/package.json CHANGED
@@ -1,7 +1,4 @@
1
1
  {
2
2
  "type": "commonjs",
3
- "sideEffects": false,
4
- "publishConfig": {
5
- "access": "public"
6
- }
3
+ "sideEffects": false
7
4
  }
package/dist/cjs/parts/chat-container-messages-list/useActionRef.js CHANGED
@@ -37,7 +37,8 @@ const useActionRef = ({
37
37
  actionRef,
38
38
  useVirtualHelpers: { scrollToIndex: vScroll },
39
39
  virtualListRef,
40
- onScrollStop,
40
+ updateCache,
41
+ getMessagesInView,
41
42
  onlyFocus,
42
43
  scrollAndFocus
43
44
  }) => {
@@ -48,7 +49,7 @@ const useActionRef = ({
48
49
  vScroll(index, opts);
49
50
  requestAnimationFrame(() => {
50
51
  vScroll(index, opts);
51
- onScrollStop();
52
+ updateCache();
52
53
  });
53
54
  }, 0);
54
55
  };
@@ -59,12 +60,12 @@ const useActionRef = ({
59
60
  virtualListRef.current?.focus();
60
61
  };
61
62
  actionRef.current.scrollToIndex = scrollToIndex;
62
- actionRef.current.getMessagesInView = onScrollStop;
63
- onScrollStop();
63
+ actionRef.current.getMessagesInView = getMessagesInView;
64
+ updateCache();
64
65
  actionRef.current.focusToIndex = focusToIndex;
65
66
  actionRef.current.focusToIndexWithoutScroll = onlyFocus;
66
67
  actionRef.current.focusToList = focusToList;
67
68
  }
68
- }, [actionRef, onScrollStop, onlyFocus, scrollAndFocus, vScroll, virtualListRef]);
69
+ }, [actionRef, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, vScroll, virtualListRef]);
69
70
  };
70
71
  //# sourceMappingURL=useActionRef.js.map
package/dist/cjs/parts/chat-container-messages-list/useActionRef.js.map CHANGED
@@ -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 { useVirtual } from 'react-virtual';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\n\ntype UseActionRefArgs = {\n actionRef: DSChatT.ActionRef;\n useVirtualHelpers: ReturnType<typeof useVirtual>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n onScrollStop: () => string[];\n onlyFocus: (index: string) => 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 setTimeout(() => {\n vScroll(index, opts);\n /* [PUI-15629](https://jira.elliemae.io/browse/PUI-15629)\n * requestAnimationFrame is needed because the first scroll might not calculate positions\n * correctly if the DOM hasn't been fully updated yet. By waiting for the next animation\n * frame, we ensure that:\n * 1. The DOM has been updated with new positions after the first scroll\n * 2. Element height and position measurements are accurate\n * 3. The second scroll can center the element with correct measurements\n *\n * TODO: It might be worth consider upgrading to react-virtual v3(@tanstack/react-virtual), which handles DOM measurements and scroll\n * synchronization better. This RAF workaround might not be necessary with v3.\n */\n requestAnimationFrame(() => {\n vScroll(index, opts);\n onScrollStop();\n });\n }, 0);\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
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;AAaX,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,mBAAmB,EAAE,eAAe,QAAQ;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AACtB,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,aAAa,UAAU,SAAS;AAClC,YAAM,gBAA+D,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,MAAM;AAC1G,mBAAW,MAAM;AACf,kBAAQ,OAAO,IAAI;AAYnB,gCAAsB,MAAM;AAC1B,oBAAQ,OAAO,IAAI;AACnB,yBAAa;AAAA,UACf,CAAC;AAAA,QACH,GAAG,CAAC;AAAA,MACN;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;",
4
+ "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\n\ntype UseActionRefArgs = {\n actionRef: DSChatT.ActionRef;\n useVirtualHelpers: ReturnType<typeof useVirtual>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n updateCache: () => void;\n getMessagesInView: () => string[];\n onlyFocus: (index: string) => void;\n scrollAndFocus: (index: number, opts?: DSChatT.ScrollToIndexOptions) => void;\n};\n\nexport const useActionRef = ({\n actionRef,\n useVirtualHelpers: { scrollToIndex: vScroll },\n virtualListRef,\n updateCache,\n getMessagesInView,\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 setTimeout(() => {\n vScroll(index, opts);\n /* [PUI-15629](https://jira.elliemae.io/browse/PUI-15629)\n * requestAnimationFrame is needed because the first scroll might not calculate positions\n * correctly if the DOM hasn't been fully updated yet. By waiting for the next animation\n * frame, we ensure that:\n * 1. The DOM has been updated with new positions after the first scroll\n * 2. Element height and position measurements are accurate\n * 3. The second scroll can center the element with correct measurements\n *\n * TODO: It might be worth consider upgrading to react-virtual v3(@tanstack/react-virtual), which handles DOM measurements and scroll\n * synchronization better. This RAF workaround might not be necessary with v3.\n */\n requestAnimationFrame(() => {\n vScroll(index, opts);\n updateCache();\n });\n }, 0);\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 = getMessagesInView;\n updateCache(); // populate cache immediately on mount \u2014 leading throttle fires synchronously\n actionRef.current.focusToIndex = focusToIndex;\n actionRef.current.focusToIndexWithoutScroll = onlyFocus;\n actionRef.current.focusToList = focusToList;\n }\n }, [actionRef, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, vScroll, virtualListRef]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;AAcX,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,mBAAmB,EAAE,eAAe,QAAQ;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AACtB,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,aAAa,UAAU,SAAS;AAClC,YAAM,gBAA+D,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,MAAM;AAC1G,mBAAW,MAAM;AACf,kBAAQ,OAAO,IAAI;AAYnB,gCAAsB,MAAM;AAC1B,oBAAQ,OAAO,IAAI;AACnB,wBAAY;AAAA,UACd,CAAC;AAAA,QACH,GAAG,CAAC;AAAA,MACN;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;AACtC,kBAAY;AACZ,gBAAU,QAAQ,eAAe;AACjC,gBAAU,QAAQ,4BAA4B;AAC9C,gBAAU,QAAQ,cAAc;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,WAAW,aAAa,mBAAmB,WAAW,gBAAgB,SAAS,cAAc,CAAC;AACpG;",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/parts/chat-container-messages-list/useChatContainerMessageList.js CHANGED
@@ -71,7 +71,7 @@ const useChatContainerMessageList = (props) => {
71
71
  // https://github.com/tannerlinsley/react-virtual/issues/23
72
72
  estimateSize: import_react.default.useCallback(() => 80, [])
73
73
  });
74
- const { onScrollStop, onlyFocus, scrollAndFocus, checkPendingOnScroll } = (0, import_useFocusAndScrollHelpers.useFocusAndScrollHelpers)({
74
+ const { onScrollStop, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, checkPendingOnScroll } = (0, import_useFocusAndScrollHelpers.useFocusAndScrollHelpers)({
75
75
  propsWithDefault,
76
76
  useVirtualHelpers,
77
77
  pendingOnScroll,
@@ -81,7 +81,8 @@ const useChatContainerMessageList = (props) => {
81
81
  actionRef,
82
82
  useVirtualHelpers,
83
83
  virtualListRef,
84
- onScrollStop,
84
+ updateCache,
85
+ getMessagesInView,
85
86
  onlyFocus,
86
87
  scrollAndFocus
87
88
  });
@@ -98,7 +99,7 @@ const useChatContainerMessageList = (props) => {
98
99
  loadMoreRef,
99
100
  scrollAndFocus,
100
101
  onlyFocus,
101
- onScrollStop
102
+ getMessagesInView
102
103
  });
103
104
  return import_react.default.useMemo(
104
105
  () => ({
package/dist/cjs/parts/chat-container-messages-list/useChatContainerMessageList.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/chat-container-messages-list/useChatContainerMessageList.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 {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { useVirtual } from 'react-virtual';\nimport { useActionRef } from './useActionRef.js';\nimport { useGlobalEventListener } from './useGlobalEventListener.js';\nimport { useKeyboard } from './useKeyboard.js';\nimport { useFocusAndScrollHelpers } from './useFocusAndScrollHelpers.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatContainerMessagesListPropTypes, defaultPropsMessagesList } from '../../react-desc-prop-types.js';\nimport { DSChatContainerMessagesList } from '../../DSChatContainerDefinitions.js';\n\nconst getPadding = ({ hasMoreItems, bannerPosition, isLoading }: DSChatT.GetPaddingT) => {\n const padding = {\n paddingStart: 0,\n paddingEnd: -5,\n };\n if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === 'top')) padding.paddingStart = 42;\n else if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === 'bottom')) padding.paddingEnd = 42;\n return padding;\n};\n\ntype UseChatContainerMessageList = (props: DSChatT.MessagesListProps) => {\n propsWithDefault: DSChatT.MessagesListProps;\n globalAttributes: ReturnType<typeof useGetGlobalAttributes>;\n useVirtualHelpers: ReturnType<typeof useVirtual>;\n loadMoreRef: React.MutableRefObject<HTMLButtonElement | undefined>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n} & ReturnType<typeof useKeyboard>;\n\nexport const useChatContainerMessageList: UseChatContainerMessageList = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.MessagesListProps>(props, defaultPropsMessagesList);\n useValidateTypescriptPropTypes<DSChatT.MessagesListProps>(\n propsWithDefault,\n ChatContainerMessagesListPropTypes,\n DSChatContainerMessagesList,\n );\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n const loadMoreRef = React.useRef<HTMLButtonElement>();\n const virtualListRef = React.useRef<HTMLDivElement>();\n\n const pendingOnScroll = React.useRef(false);\n const { bannerPosition, messages, actionRef, hasMoreItems, isLoading } = propsWithDefault;\n const useVirtualHelpers = useVirtual({\n size: messages?.length,\n parentRef: virtualListRef,\n overscan: 15,\n ...getPadding({ hasMoreItems, bannerPosition, isLoading }),\n // estimateSize should not be really required given what was stated on\n // https://github.com/tannerlinsley/react-virtual/issues/23\n estimateSize: React.useCallback(() => 80, []),\n });\n\n const { onScrollStop, onlyFocus, scrollAndFocus, checkPendingOnScroll } = useFocusAndScrollHelpers({\n propsWithDefault,\n useVirtualHelpers,\n pendingOnScroll,\n virtualListRef,\n });\n\n useActionRef({\n actionRef,\n useVirtualHelpers,\n virtualListRef,\n onScrollStop,\n onlyFocus,\n scrollAndFocus,\n });\n\n useGlobalEventListener({\n propsWithDefault,\n virtualListRef,\n onScrollStop,\n checkPendingOnScroll,\n });\n\n const keyboardMethods = useKeyboard({\n propsWithDefault,\n actionRef,\n virtualListRef,\n loadMoreRef,\n scrollAndFocus,\n onlyFocus,\n onScrollStop,\n });\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalAttributes,\n useVirtualHelpers,\n loadMoreRef,\n virtualListRef,\n ...keyboardMethods,\n }),\n [globalAttributes, keyboardMethods, propsWithDefault, useVirtualHelpers, loadMoreRef, virtualListRef],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;AAClB,8BAIO;AACP,2BAA2B;AAC3B,0BAA6B;AAC7B,oCAAuC;AACvC,yBAA4B;AAC5B,sCAAyC;AAEzC,mCAA6E;AAC7E,wCAA4C;AAE5C,MAAM,aAAa,CAAC,EAAE,cAAc,gBAAgB,UAAU,MAA2B;AACvF,QAAM,UAAU;AAAA,IACd,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AACA,MAAI,CAAC,cAAc,gBAAgB,SAAS,EAAE,KAAK,CAAC,SAAS,SAAS,KAAK,EAAG,SAAQ,eAAe;AAAA,WAC5F,CAAC,cAAc,gBAAgB,SAAS,EAAE,KAAK,CAAC,SAAS,SAAS,QAAQ,EAAG,SAAQ,aAAa;AAC3G,SAAO;AACT;AAUO,MAAM,8BAA2D,CAAC,UAAU;AACjF,QAAM,uBAAmB,sDAAwD,OAAO,qDAAwB;AAChH;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,uBAAmB,gDAAuB,gBAAgB;AAChE,QAAM,cAAc,aAAAA,QAAM,OAA0B;AACpD,QAAM,iBAAiB,aAAAA,QAAM,OAAuB;AAEpD,QAAM,kBAAkB,aAAAA,QAAM,OAAO,KAAK;AAC1C,QAAM,EAAE,gBAAgB,UAAU,WAAW,cAAc,UAAU,IAAI;AACzE,QAAM,wBAAoB,iCAAW;AAAA,IACnC,MAAM,UAAU;AAAA,IAChB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,GAAG,WAAW,EAAE,cAAc,gBAAgB,UAAU,CAAC;AAAA;AAAA;AAAA,IAGzD,cAAc,aAAAA,QAAM,YAAY,MAAM,IAAI,CAAC,CAAC;AAAA,EAC9C,CAAC;AAED,QAAM,EAAE,cAAc,WAAW,gBAAgB,qBAAqB,QAAI,0DAAyB;AAAA,IACjG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,wCAAa;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,4DAAuB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,sBAAkB,gCAAY;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,kBAAkB,iBAAiB,kBAAkB,mBAAmB,aAAa,cAAc;AAAA,EACtG;AACF;",
4
+ "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { useVirtual } from 'react-virtual';\nimport { useActionRef } from './useActionRef.js';\nimport { useGlobalEventListener } from './useGlobalEventListener.js';\nimport { useKeyboard } from './useKeyboard.js';\nimport { useFocusAndScrollHelpers } from './useFocusAndScrollHelpers.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatContainerMessagesListPropTypes, defaultPropsMessagesList } from '../../react-desc-prop-types.js';\nimport { DSChatContainerMessagesList } from '../../DSChatContainerDefinitions.js';\n\nconst getPadding = ({ hasMoreItems, bannerPosition, isLoading }: DSChatT.GetPaddingT) => {\n const padding = {\n paddingStart: 0,\n paddingEnd: -5,\n };\n if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === 'top')) padding.paddingStart = 42;\n else if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === 'bottom')) padding.paddingEnd = 42;\n return padding;\n};\n\ntype UseChatContainerMessageList = (props: DSChatT.MessagesListProps) => {\n propsWithDefault: DSChatT.MessagesListProps;\n globalAttributes: ReturnType<typeof useGetGlobalAttributes>;\n useVirtualHelpers: ReturnType<typeof useVirtual>;\n loadMoreRef: React.MutableRefObject<HTMLButtonElement | undefined>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n} & ReturnType<typeof useKeyboard>;\n\nexport const useChatContainerMessageList: UseChatContainerMessageList = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.MessagesListProps>(props, defaultPropsMessagesList);\n useValidateTypescriptPropTypes<DSChatT.MessagesListProps>(\n propsWithDefault,\n ChatContainerMessagesListPropTypes,\n DSChatContainerMessagesList,\n );\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n const loadMoreRef = React.useRef<HTMLButtonElement>();\n const virtualListRef = React.useRef<HTMLDivElement>();\n\n const pendingOnScroll = React.useRef(false);\n const { bannerPosition, messages, actionRef, hasMoreItems, isLoading } = propsWithDefault;\n const useVirtualHelpers = useVirtual({\n size: messages?.length,\n parentRef: virtualListRef,\n overscan: 15,\n ...getPadding({ hasMoreItems, bannerPosition, isLoading }),\n // estimateSize should not be really required given what was stated on\n // https://github.com/tannerlinsley/react-virtual/issues/23\n estimateSize: React.useCallback(() => 80, []),\n });\n\n const { onScrollStop, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, checkPendingOnScroll } =\n useFocusAndScrollHelpers({\n propsWithDefault,\n useVirtualHelpers,\n pendingOnScroll,\n virtualListRef,\n });\n\n useActionRef({\n actionRef,\n useVirtualHelpers,\n virtualListRef,\n updateCache,\n getMessagesInView,\n onlyFocus,\n scrollAndFocus,\n });\n\n useGlobalEventListener({\n propsWithDefault,\n virtualListRef,\n onScrollStop,\n checkPendingOnScroll,\n });\n\n const keyboardMethods = useKeyboard({\n propsWithDefault,\n actionRef,\n virtualListRef,\n loadMoreRef,\n scrollAndFocus,\n onlyFocus,\n getMessagesInView,\n });\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalAttributes,\n useVirtualHelpers,\n loadMoreRef,\n virtualListRef,\n ...keyboardMethods,\n }),\n [globalAttributes, keyboardMethods, propsWithDefault, useVirtualHelpers, loadMoreRef, virtualListRef],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAkB;AAClB,8BAIO;AACP,2BAA2B;AAC3B,0BAA6B;AAC7B,oCAAuC;AACvC,yBAA4B;AAC5B,sCAAyC;AAEzC,mCAA6E;AAC7E,wCAA4C;AAE5C,MAAM,aAAa,CAAC,EAAE,cAAc,gBAAgB,UAAU,MAA2B;AACvF,QAAM,UAAU;AAAA,IACd,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AACA,MAAI,CAAC,cAAc,gBAAgB,SAAS,EAAE,KAAK,CAAC,SAAS,SAAS,KAAK,EAAG,SAAQ,eAAe;AAAA,WAC5F,CAAC,cAAc,gBAAgB,SAAS,EAAE,KAAK,CAAC,SAAS,SAAS,QAAQ,EAAG,SAAQ,aAAa;AAC3G,SAAO;AACT;AAUO,MAAM,8BAA2D,CAAC,UAAU;AACjF,QAAM,uBAAmB,sDAAwD,OAAO,qDAAwB;AAChH;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,uBAAmB,gDAAuB,gBAAgB;AAChE,QAAM,cAAc,aAAAA,QAAM,OAA0B;AACpD,QAAM,iBAAiB,aAAAA,QAAM,OAAuB;AAEpD,QAAM,kBAAkB,aAAAA,QAAM,OAAO,KAAK;AAC1C,QAAM,EAAE,gBAAgB,UAAU,WAAW,cAAc,UAAU,IAAI;AACzE,QAAM,wBAAoB,iCAAW;AAAA,IACnC,MAAM,UAAU;AAAA,IAChB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,GAAG,WAAW,EAAE,cAAc,gBAAgB,UAAU,CAAC;AAAA;AAAA;AAAA,IAGzD,cAAc,aAAAA,QAAM,YAAY,MAAM,IAAI,CAAC,CAAC;AAAA,EAC9C,CAAC;AAED,QAAM,EAAE,cAAc,aAAa,mBAAmB,WAAW,gBAAgB,qBAAqB,QACpG,0DAAyB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAEH,wCAAa;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,4DAAuB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,sBAAkB,gCAAY;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,kBAAkB,iBAAiB,kBAAkB,mBAAmB,aAAa,cAAc;AAAA,EACtG;AACF;",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/parts/chat-container-messages-list/useFocusAndScrollHelpers.js CHANGED
@@ -40,26 +40,42 @@ const useFocusAndScrollHelpers = ({
40
40
  pendingOnScroll,
41
41
  virtualListRef
42
42
  }) => {
43
+ const computeVisibleItems = import_react.default.useCallback(() => {
44
+ if (document.visibilityState === "hidden") {
45
+ pendingOnScroll.current = true;
46
+ return [];
47
+ }
48
+ if (!virtualListRef.current) return [];
49
+ pendingOnScroll.current = false;
50
+ const { bottom, top } = virtualListRef.current.getBoundingClientRect();
51
+ const list = virtualListRef.current.querySelectorAll('[data-element="chat-element-list-item"]');
52
+ const indexList = [];
53
+ list.forEach((item) => {
54
+ const { top: itemTop } = item.getBoundingClientRect();
55
+ const itemPadding = 10;
56
+ if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index || "");
57
+ });
58
+ return indexList;
59
+ }, [pendingOnScroll, virtualListRef]);
60
+ const visibleItemsCache = import_react.default.useRef([]);
61
+ const updateCache = import_react.default.useMemo(
62
+ () => (0, import_lodash_es.throttle)(
63
+ () => {
64
+ visibleItemsCache.current = computeVisibleItems();
65
+ },
66
+ 500,
67
+ { leading: true }
68
+ ),
69
+ [computeVisibleItems]
70
+ );
71
+ const getMessagesInView = import_react.default.useCallback(() => [...visibleItemsCache.current], []);
43
72
  const onScrollStop = import_react.default.useMemo(
44
73
  () => (0, import_lodash_es.debounce)(() => {
45
- if (document.visibilityState === "hidden") {
46
- pendingOnScroll.current = true;
47
- return [];
48
- }
49
- if (!virtualListRef.current) return [];
50
- pendingOnScroll.current = false;
51
- const { bottom, top } = virtualListRef.current?.getBoundingClientRect() || {};
52
- const list = virtualListRef.current.querySelectorAll('[data-element="chat-element-list-item"]');
53
- const indexList = [];
54
- list.forEach((item) => {
55
- const { top: itemTop } = item.getBoundingClientRect();
56
- const itemPadding = 10;
57
- if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index || "");
58
- });
74
+ const indexList = computeVisibleItems();
59
75
  if (onScrollEnds) onScrollEnds(indexList);
60
76
  return indexList;
61
77
  }, 500),
62
- [onScrollEnds, pendingOnScroll, virtualListRef]
78
+ [computeVisibleItems, onScrollEnds]
63
79
  );
64
80
  const onlyFocus = import_react.default.useCallback(
65
81
  (index) => {
@@ -76,21 +92,26 @@ const useFocusAndScrollHelpers = ({
76
92
  setTimeout(() => {
77
93
  onlyFocus(index.toString());
78
94
  }, 300);
79
- onScrollStop();
95
+ updateCache();
80
96
  },
81
- [onScrollStop, onlyFocus, vScroll]
97
+ [updateCache, onlyFocus, vScroll]
82
98
  );
83
99
  const checkPendingOnScroll = import_react.default.useCallback(() => {
84
- if (pendingOnScroll.current === true) onScrollStop();
85
- }, [onScrollStop, pendingOnScroll]);
100
+ if (pendingOnScroll.current === true) {
101
+ updateCache();
102
+ onScrollStop();
103
+ }
104
+ }, [updateCache, onScrollStop, pendingOnScroll]);
86
105
  return import_react.default.useMemo(
87
106
  () => ({
88
107
  onScrollStop,
108
+ updateCache,
109
+ getMessagesInView,
89
110
  onlyFocus,
90
111
  scrollAndFocus,
91
112
  checkPendingOnScroll
92
113
  }),
93
- [onScrollStop, onlyFocus, scrollAndFocus, checkPendingOnScroll]
114
+ [onScrollStop, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, checkPendingOnScroll]
94
115
  );
95
116
  };
96
117
  //# sourceMappingURL=useFocusAndScrollHelpers.js.map
package/dist/cjs/parts/chat-container-messages-list/useFocusAndScrollHelpers.js.map CHANGED
@@ -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 type { useVirtual } from 'react-virtual';\nimport { debounce } from 'lodash-es';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\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 ) as () => string[];\n\n const onlyFocus = React.useCallback(\n (index: string) => {\n (virtualListRef.current?.querySelector(`[data-index=\"${index}\"]`) as HTMLDivElement)?.focus();\n },\n [virtualListRef],\n );\n\n const scrollAndFocus = React.useCallback(\n (index: number) => {\n vScroll(index, { align: 'center' });\n /* [PUI-15629](https://jira.elliemae.io/browse/PUI-15629)\n * requestAnimationFrame is needed because the first scroll might not calculate positions\n * correctly if the DOM hasn't been fully updated yet. By waiting for the next animation\n * frame, we ensure that:\n * 1. The DOM has been updated with new positions after the first scroll\n * 2. Element height and position measurements are accurate\n * 3. The second scroll can center the element with correct measurements\n *\n * TODO: It might be worth consider upgrading to react-virtual v3(@tanstack/react-virtual), which handles DOM measurements and scroll\n * synchronization better. This RAF workaround might not be necessary with v3.\n */\n requestAnimationFrame(() => {\n vScroll(index, { align: 'center' });\n });\n\n setTimeout(() => {\n onlyFocus(index.toString());\n }, 300);\n\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,uBAAyB;AAUlB,MAAM,2BAA2B,CAAC;AAAA,EACvC,kBAAkB,EAAE,aAAa;AAAA,EACjC,mBAAmB,EAAE,eAAe,QAAQ;AAAA,EAC5C;AAAA,EACA;AACF,MAAoC;AAClC,QAAM,eAAe,aAAAA,QAAM;AAAA,IACzB,UACE,2BAAS,MAAgB;AACvB,UAAI,SAAS,oBAAoB,UAAU;AACzC,wBAAgB,UAAU;AAC1B,eAAO,CAAC;AAAA,MACV;AACA,UAAI,CAAC,eAAe,QAAS,QAAO,CAAC;AACrC,sBAAgB,UAAU;AAC1B,YAAM,EAAE,QAAQ,IAAI,IAAI,eAAe,SAAS,sBAAsB,KAAK,CAAC;AAE5E,YAAM,OAAO,eAAe,QAAQ,iBAA8B,yCAAyC;AAC3G,YAAM,YAA2B,CAAC;AAClC,WAAK,QAAQ,CAAC,SAAsB;AAClC,cAAM,EAAE,KAAK,QAAQ,IAAI,KAAK,sBAAsB;AAEpD,cAAM,cAAc;AACpB,YAAI,UAAU,cAAc,UAAU,UAAU,cAAc,IAAK,WAAU,KAAK,KAAK,QAAQ,SAAS,EAAE;AAAA,MAC5G,CAAC;AACD,UAAI,aAAc,cAAa,SAAS;AACxC,aAAO;AAAA,IACT,GAAG,GAAG;AAAA,IACR,CAAC,cAAc,iBAAiB,cAAc;AAAA,EAChD;AAEA,QAAM,YAAY,aAAAA,QAAM;AAAA,IACtB,CAAC,UAAkB;AACjB,MAAC,eAAe,SAAS,cAAc,gBAAgB,KAAK,IAAI,GAAsB,MAAM;AAAA,IAC9F;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,iBAAiB,aAAAA,QAAM;AAAA,IAC3B,CAAC,UAAkB;AACjB,cAAQ,OAAO,EAAE,OAAO,SAAS,CAAC;AAYlC,4BAAsB,MAAM;AAC1B,gBAAQ,OAAO,EAAE,OAAO,SAAS,CAAC;AAAA,MACpC,CAAC;AAED,iBAAW,MAAM;AACf,kBAAU,MAAM,SAAS,CAAC;AAAA,MAC5B,GAAG,GAAG;AAEN,mBAAa;AAAA,IACf;AAAA,IACA,CAAC,cAAc,WAAW,OAAO;AAAA,EACnC;AAEA,QAAM,uBAAuB,aAAAA,QAAM,YAAY,MAAM;AACnD,QAAI,gBAAgB,YAAY,KAAM,cAAa;AAAA,EACrD,GAAG,CAAC,cAAc,eAAe,CAAC;AAElC,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,WAAW,gBAAgB,oBAAoB;AAAA,EAChE;AACF;",
4
+ "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport { debounce, throttle } from 'lodash-es';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\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 // Pure DOM read \u2014 no side effects beyond pendingOnScroll flag and getBoundingClientRect queries.\n const computeVisibleItems = React.useCallback((): 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 const list = virtualListRef.current.querySelectorAll<HTMLElement>('[data-element=\"chat-element-list-item\"]');\n const indexList: string[] = [];\n list.forEach((item: HTMLElement) => {\n const { top: itemTop } = item.getBoundingClientRect();\n const itemPadding = 10;\n if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index || '');\n });\n return indexList;\n }, [pendingOnScroll, virtualListRef]);\n\n // Throttled with leading: populates the cache immediately on first call and keeps it\n // fresh. No side effects beyond DOM reads \u2014 onScrollEnds is not involved.\n const visibleItemsCache = React.useRef<string[]>([]);\n const updateCache = React.useMemo(\n () =>\n throttle(\n () => {\n visibleItemsCache.current = computeVisibleItems();\n },\n 500,\n { leading: true },\n ),\n [computeVisibleItems],\n );\n\n // Synchronous getter \u2014 returns a copy so callers using .pop()/.shift() don't mutate the cache.\n const getMessagesInView = React.useCallback((): string[] => [...visibleItemsCache.current], []);\n\n // Debounced trailing: notifies onScrollEnds consumers after scrolling settles.\n // Semantics and timing unchanged \u2014 this path is isolated from the cache.\n const onScrollStop = React.useMemo(\n () =>\n debounce((): string[] => {\n const indexList = computeVisibleItems();\n if (onScrollEnds) onScrollEnds(indexList);\n return indexList;\n }, 500),\n [computeVisibleItems, onScrollEnds],\n ) as () => string[];\n\n const onlyFocus = React.useCallback(\n (index: string) => {\n (virtualListRef.current?.querySelector(`[data-index=\"${index}\"]`) as HTMLDivElement)?.focus();\n },\n [virtualListRef],\n );\n\n const scrollAndFocus = React.useCallback(\n (index: number) => {\n vScroll(index, { align: 'center' });\n /* [PUI-15629](https://jira.elliemae.io/browse/PUI-15629)\n * requestAnimationFrame is needed because the first scroll might not calculate positions\n * correctly if the DOM hasn't been fully updated yet. By waiting for the next animation\n * frame, we ensure that:\n * 1. The DOM has been updated with new positions after the first scroll\n * 2. Element height and position measurements are accurate\n * 3. The second scroll can center the element with correct measurements\n *\n * TODO: It might be worth consider upgrading to react-virtual v3(@tanstack/react-virtual), which handles DOM measurements and scroll\n * synchronization better. This RAF workaround might not be necessary with v3.\n */\n requestAnimationFrame(() => {\n vScroll(index, { align: 'center' });\n });\n\n setTimeout(() => {\n onlyFocus(index.toString());\n }, 300);\n\n updateCache();\n },\n [updateCache, onlyFocus, vScroll],\n );\n\n const checkPendingOnScroll = React.useCallback(() => {\n if (pendingOnScroll.current === true) {\n updateCache();\n onScrollStop();\n }\n }, [updateCache, onScrollStop, pendingOnScroll]);\n\n return React.useMemo(\n () => ({\n onScrollStop,\n updateCache,\n getMessagesInView,\n onlyFocus,\n scrollAndFocus,\n checkPendingOnScroll,\n }),\n [onScrollStop, updateCache, getMessagesInView, 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,uBAAmC;AAU5B,MAAM,2BAA2B,CAAC;AAAA,EACvC,kBAAkB,EAAE,aAAa;AAAA,EACjC,mBAAmB,EAAE,eAAe,QAAQ;AAAA,EAC5C;AAAA,EACA;AACF,MAAoC;AAElC,QAAM,sBAAsB,aAAAA,QAAM,YAAY,MAAgB;AAC5D,QAAI,SAAS,oBAAoB,UAAU;AACzC,sBAAgB,UAAU;AAC1B,aAAO,CAAC;AAAA,IACV;AACA,QAAI,CAAC,eAAe,QAAS,QAAO,CAAC;AACrC,oBAAgB,UAAU;AAC1B,UAAM,EAAE,QAAQ,IAAI,IAAI,eAAe,QAAQ,sBAAsB;AACrE,UAAM,OAAO,eAAe,QAAQ,iBAA8B,yCAAyC;AAC3G,UAAM,YAAsB,CAAC;AAC7B,SAAK,QAAQ,CAAC,SAAsB;AAClC,YAAM,EAAE,KAAK,QAAQ,IAAI,KAAK,sBAAsB;AACpD,YAAM,cAAc;AACpB,UAAI,UAAU,cAAc,UAAU,UAAU,cAAc,IAAK,WAAU,KAAK,KAAK,QAAQ,SAAS,EAAE;AAAA,IAC5G,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,cAAc,CAAC;AAIpC,QAAM,oBAAoB,aAAAA,QAAM,OAAiB,CAAC,CAAC;AACnD,QAAM,cAAc,aAAAA,QAAM;AAAA,IACxB,UACE;AAAA,MACE,MAAM;AACJ,0BAAkB,UAAU,oBAAoB;AAAA,MAClD;AAAA,MACA;AAAA,MACA,EAAE,SAAS,KAAK;AAAA,IAClB;AAAA,IACF,CAAC,mBAAmB;AAAA,EACtB;AAGA,QAAM,oBAAoB,aAAAA,QAAM,YAAY,MAAgB,CAAC,GAAG,kBAAkB,OAAO,GAAG,CAAC,CAAC;AAI9F,QAAM,eAAe,aAAAA,QAAM;AAAA,IACzB,UACE,2BAAS,MAAgB;AACvB,YAAM,YAAY,oBAAoB;AACtC,UAAI,aAAc,cAAa,SAAS;AACxC,aAAO;AAAA,IACT,GAAG,GAAG;AAAA,IACR,CAAC,qBAAqB,YAAY;AAAA,EACpC;AAEA,QAAM,YAAY,aAAAA,QAAM;AAAA,IACtB,CAAC,UAAkB;AACjB,MAAC,eAAe,SAAS,cAAc,gBAAgB,KAAK,IAAI,GAAsB,MAAM;AAAA,IAC9F;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,iBAAiB,aAAAA,QAAM;AAAA,IAC3B,CAAC,UAAkB;AACjB,cAAQ,OAAO,EAAE,OAAO,SAAS,CAAC;AAYlC,4BAAsB,MAAM;AAC1B,gBAAQ,OAAO,EAAE,OAAO,SAAS,CAAC;AAAA,MACpC,CAAC;AAED,iBAAW,MAAM;AACf,kBAAU,MAAM,SAAS,CAAC;AAAA,MAC5B,GAAG,GAAG;AAEN,kBAAY;AAAA,IACd;AAAA,IACA,CAAC,aAAa,WAAW,OAAO;AAAA,EAClC;AAEA,QAAM,uBAAuB,aAAAA,QAAM,YAAY,MAAM;AACnD,QAAI,gBAAgB,YAAY,MAAM;AACpC,kBAAY;AACZ,mBAAa;AAAA,IACf;AAAA,EACF,GAAG,CAAC,aAAa,cAAc,eAAe,CAAC;AAE/C,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,aAAa,mBAAmB,WAAW,gBAAgB,oBAAoB;AAAA,EAChG;AACF;",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/parts/chat-container-messages-list/useKeyboard.js CHANGED
@@ -41,7 +41,7 @@ const useKeyboard = ({
41
41
  loadMoreRef,
42
42
  scrollAndFocus,
43
43
  onlyFocus,
44
- onScrollStop
44
+ getMessagesInView
45
45
  }) => {
46
46
  const handleKey = import_react.default.useCallback(
47
47
  (e) => {
@@ -102,7 +102,7 @@ const useKeyboard = ({
102
102
  case "ArrowUp":
103
103
  e.preventDefault();
104
104
  if (document.activeElement !== loadMoreRef.current) {
105
- const id = onScrollStop()?.shift();
105
+ const id = getMessagesInView()?.shift();
106
106
  if (id) onlyFocus(id);
107
107
  }
108
108
  break;
@@ -111,7 +111,7 @@ const useKeyboard = ({
111
111
  if (document.activeElement === loadMoreRef.current) {
112
112
  virtualListRef.current?.querySelector(`[data-index="0"]`)?.focus();
113
113
  } else {
114
- const id = onScrollStop()?.pop();
114
+ const id = getMessagesInView()?.pop();
115
115
  if (id) onlyFocus(id);
116
116
  }
117
117
  break;
@@ -144,7 +144,16 @@ const useKeyboard = ({
144
144
  break;
145
145
  }
146
146
  },
147
- [actionRef, hasMoreItems, loadMoreRef, messages.length, onScrollStop, onlyFocus, scrollAndFocus, virtualListRef]
147
+ [
148
+ actionRef,
149
+ hasMoreItems,
150
+ loadMoreRef,
151
+ messages.length,
152
+ getMessagesInView,
153
+ onlyFocus,
154
+ scrollAndFocus,
155
+ virtualListRef
156
+ ]
148
157
  );
149
158
  return import_react.default.useMemo(() => ({ handleKey, handleListKey }), [handleKey, handleListKey]);
150
159
  };
package/dist/cjs/parts/chat-container-messages-list/useKeyboard.js.map CHANGED
@@ -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 { DSChatT } from '../../react-desc-prop-types.js';\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: string) => void;\n onScrollStop: () => 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 const id = onScrollStop()?.shift();\n if (id) onlyFocus(id);\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 const id = onScrollStop()?.pop();\n if (id) onlyFocus(id);\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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",
4
+ "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\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: string) => void;\n getMessagesInView: () => string[];\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 getMessagesInView,\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 const id = getMessagesInView()?.shift();\n if (id) onlyFocus(id);\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 const id = getMessagesInView()?.pop();\n if (id) onlyFocus(id);\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 [\n actionRef,\n hasMoreItems,\n loadMoreRef,\n messages.length,\n getMessagesInView,\n onlyFocus,\n scrollAndFocus,\n virtualListRef,\n ],\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": ["React"]
7
7
  }
package/dist/cjs/react-desc-prop-types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-lines */\nimport type { useVirtual } from 'react-virtual';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { type DSChatBubbleT } from '@elliemae/ds-chat-bubble';\nimport { type DSButtonT } from '@elliemae/ds-button-v2';\n\n// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\nexport declare namespace DSChatT {\n interface ChatBannerProps {\n label: string;\n viewLabel: string;\n type?: 'info' | 'success' | 'danger' | 'warning';\n onView: () => void;\n onClose: () => void;\n }\n export type ScrollToIndexOptions = Parameters<ReturnType<typeof useVirtual>['scrollToIndex']>[1];\n export type ActionRef = React.MutableRefObject<{\n scrollToIndex?: (index: number, opts: ScrollToIndexOptions) => void;\n focusToIndex?: (index: number, opts: ScrollToIndexOptions) => void;\n getMessagesInView?: () => string[];\n focusToIndexWithoutScroll?: (index: string) => void;\n focusToList?: () => void;\n focusToComposer?: () => void;\n focusToSend?: () => void;\n focusOnBanner?: () => void;\n focusOnBannerLink?: () => void;\n }>;\n\n export interface ComposerProps extends Record<string, unknown> {\n placeholder?: string;\n inputValue?: string;\n ariaMaxLengthMessage?: string;\n maxLengthMessage?: string;\n onChange: (value: string) => void;\n onResize?: (value: number) => void;\n onSend: (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => void;\n onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n maxHeight?: number;\n inputMaxLength?: number;\n buttonDisabled: boolean;\n dataTestid?: string;\n actionRef?: ActionRef;\n }\n\n export interface MessagesListProps extends Record<string, unknown> {\n messages: DSChatBubbleT.Props[];\n actionRef: ActionRef;\n onScrollEnds?: (indexList: string[]) => void;\n isLoading?: 'top' | 'bottom';\n hasMoreItems?: 'top' | 'bottom';\n getMoreMessages: () => void;\n sendingMessages?: Array<string | number>;\n sendingText: string;\n bannerPosition?: 'top' | 'bottom';\n bannerRef?: React.MutableRefObject<{\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n focusOnWrapper: (...args: any[]) => void;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n focusOnLink: (...args: any[]) => void;\n }>;\n }\n\n export interface ContainerProps extends Record<string, unknown> {\n messagesListProps: Pick<MessagesListProps, 'messages' | 'onScrollEnds'>;\n composerProps: ComposerProps;\n actionRef?: ActionRef;\n autoScroll: boolean;\n device: 'desktop' | 'mobile';\n isLoading?: 'top' | 'bottom';\n hasMoreItems?: 'top' | 'bottom';\n getMoreMessages: () => void;\n bannerPosition?: 'top' | 'bottom';\n bannerProps?: ChatBannerProps;\n sendingMessages?: string[] | number[];\n sendingText: string;\n }\n\n export interface GetPaddingT {\n hasMoreItems: string | undefined;\n bannerPosition: string | undefined;\n isLoading: string | undefined;\n }\n}\n\nexport interface TextAreaProps {\n height: string | number;\n style: React.CSSProperties;\n}\n\nexport const defaultPropsComposer: DSChatT.ComposerProps = {\n placeholder: 'Type your message',\n inputValue: '',\n ariaMaxLengthMessage: '',\n onChange: noop,\n onResize: noop,\n onSend: noop,\n onFocus: noop,\n onBlur: noop,\n onKeyDown: noop,\n maxHeight: 0,\n inputMaxLength: undefined,\n maxLengthMessage: undefined,\n buttonDisabled: false,\n dataTestid: 'ds-chat-composer',\n actionRef: undefined,\n};\n\nexport const ChatComposerPropTypes = {\n placeholder: PropTypes.string.description('Input Placeholder').defaultValue(defaultPropsComposer.placeholder),\n inputValue: PropTypes.string.description('Input value').defaultValue(defaultPropsComposer.inputValue),\n ariaMaxLengthMessage: PropTypes.string\n .description('Aria message for Max length message when exceeded')\n .defaultValue(defaultPropsComposer.maxLengthMessage),\n maxLengthMessage: PropTypes.string\n .description('Max length message')\n .defaultValue(defaultPropsComposer.maxLengthMessage),\n onChange: PropTypes.func.description('Called when the user types').defaultValue(defaultPropsComposer.onChange),\n onResize: PropTypes.func\n .description('Called the input changes his height')\n .defaultValue(defaultPropsComposer.onResize),\n onSend: PropTypes.func.description('Called when the click send').defaultValue(defaultPropsComposer.onSend),\n onFocus: PropTypes.func.description('Input focus').defaultValue(defaultPropsComposer.onFocus),\n onBlur: PropTypes.func.description('Input blur').defaultValue(defaultPropsComposer.onBlur),\n onKeyDown: PropTypes.func.description('Input on key down').defaultValue(defaultPropsComposer.onKeyDown),\n maxHeight: PropTypes.number\n .description('Max height of the composer. Use 0 for no limit')\n .defaultValue(defaultPropsComposer.onBlur),\n inputMaxLength: PropTypes.number\n .description('Max length of the composer. `undefined` for no limit')\n .defaultValue(defaultPropsComposer.inputMaxLength),\n buttonDisabled: PropTypes.bool\n .description('Control the disabled for the send button')\n .defaultValue(defaultPropsComposer.buttonDisabled),\n dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultPropsComposer.placeholder),\n actionRef: PropTypes.object\n .description(\n `Reference: \n { \n scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n getMessagesInView?: () => number[],\n focusToIndex?: (n: number) => void,\n focusToList?: () => void,\n focusToComposer?: () => void,\n focusToSend?: () => void,\n }\n \n `,\n )\n .defaultValue(defaultPropsComposer.actionRef),\n};\n\nexport const defaultPropsMessagesList: DSChatT.MessagesListProps = {\n messages: [],\n actionRef: { current: {} },\n // we don't want this to exist \"by default\" since this loads document.addEventListener\n // the code is already checking for this callback existence everytime it's invoked anyway\n // onScrollEnds: () => [],\n getMoreMessages: noop,\n sendingMessages: undefined,\n sendingText: 'Sending',\n bannerPosition: undefined,\n bannerRef: undefined,\n};\n\nexport const ChatContainerMessagesListPropTypes = {\n ...globalAttributesPropTypes,\n\n messages: PropTypes.arrayOf(PropTypes.object)\n .description('The array of out-of-the-box items you want to render inside the ChatMessageList')\n .defaultValue(defaultPropsMessagesList.messages),\n actionRef: PropTypes.object\n .description(\n `Reference: \n { \n scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n getMessagesInView: () => number[],\n focusToIndex: (n: number) => void,\n focusToIndexWithoutScroll: (n: number) => void,\n focusToList: () => void,\n focusToComposer: () => void,\n focusToSend: () => void,\n }\n \n `,\n )\n .defaultValue(defaultPropsMessagesList.actionRef),\n onScrollEnds: PropTypes.func.description(`Called when the scroll stops.`),\n isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Keeps the load more space while the loading is in progress',\n ),\n hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Load More button at the `top` or `bottom` of the container',\n ),\n getMoreMessages: PropTypes.func\n .description('Called when the user clicks on load more')\n .defaultValue(defaultPropsMessagesList.getMoreMessages),\n sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])\n .description('Array of ids of sending messages')\n .defaultValue(defaultPropsMessagesList.sendingMessages),\n sendingText: PropTypes.string\n .description('Label description for messages in sending status')\n .defaultValue(defaultPropsMessagesList.sendingText),\n};\n\nexport const defaultProps: DSChatT.ContainerProps = {\n messagesListProps: defaultPropsMessagesList,\n composerProps: defaultPropsComposer,\n actionRef: undefined,\n autoScroll: false,\n device: 'desktop',\n isLoading: undefined,\n hasMoreItems: undefined,\n getMoreMessages: noop,\n bannerPosition: undefined,\n bannerProps: {\n type: BANNER_TYPES.INFO,\n label: 'Unread Messages',\n viewLabel: 'View',\n onView: noop,\n onClose: noop,\n },\n sendingMessages: undefined,\n sendingText: 'Sending',\n};\n\nexport const ChatContainerPropTypes = {\n ...globalAttributesPropTypes,\n messagesListProps: PropTypes.object\n .description('ChatMessageList props \"messages\" / \"onScrollEnds\"')\n .defaultValue(defaultProps.messagesListProps),\n composerProps: PropTypes.object.description('Composer configuration').defaultValue(defaultProps.composerProps),\n autoScroll: PropTypes.bool.description('Auto scroll to bottom on resize').defaultValue(defaultProps.autoScroll),\n device: PropTypes.string\n .description('Option to render mobile or desktop style composer')\n .defaultValue(defaultProps.device),\n isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Loading messages indicator at the `top` or `bottom` of the container',\n ),\n hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Load More button at the `top` or `bottom` of the container',\n ),\n getMoreMessages: PropTypes.func\n .description('Called when the user clicks on load more')\n .defaultValue(defaultProps.getMoreMessages),\n bannerPosition: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Loading messages indicator at the `top` or `bottom` of the container',\n ),\n bannerProps: PropTypes.object\n .description(\n `Banner configuration:\n label: string;\n viewLabel: string;\n type: BANNER_TYPES;\n onView: () => void;\n onClose: () => void;\n `,\n )\n .defaultValue(defaultProps.bannerProps),\n sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])\n .description('Array of ids of sending messages')\n .defaultValue(defaultProps.sendingMessages),\n sendingText: PropTypes.string\n .description('Label description for messages in sending status')\n .defaultValue(defaultProps.sendingText),\n actionRef: PropTypes.object\n .description(\n `Reference: \n { \n scrollToIndex: (n: number) => void,\n getMessagesInView: () => number[],\n focusToIndex: (n: number) => void,\n focusToList: () => void,\n focusToComposer: () => void,\n focusToSend: () => void,\n }\n \n `,\n )\n .defaultValue(defaultProps.actionRef),\n};\n", "import * as React from 'react';\nexport { React };\n"],
4
+ "sourcesContent": ["/* eslint-disable max-lines */\nimport type { useVirtual } from 'react-virtual';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { type DSChatBubbleT } from '@elliemae/ds-chat-bubble';\nimport { type DSButtonT } from '@elliemae/ds-button-v2';\n\n// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\nexport declare namespace DSChatT {\n interface ChatBannerProps {\n label: string;\n viewLabel: string;\n type?: 'info' | 'success' | 'danger' | 'warning';\n onView: () => void;\n onClose: () => void;\n }\n export type ScrollToIndexOptions = Parameters<ReturnType<typeof useVirtual>['scrollToIndex']>[1];\n export type ActionRef = React.MutableRefObject<{\n scrollToIndex?: (index: number, opts?: ScrollToIndexOptions) => void;\n focusToIndex?: (index: number, opts?: ScrollToIndexOptions) => void;\n getMessagesInView?: () => string[];\n focusToIndexWithoutScroll?: (index: string) => void;\n focusToList?: () => void;\n focusToComposer?: () => void;\n focusToSend?: () => void;\n focusOnBanner?: () => void;\n focusOnBannerLink?: () => void;\n }>;\n\n export interface ComposerProps extends Record<string, unknown> {\n placeholder?: string;\n inputValue?: string;\n ariaMaxLengthMessage?: string;\n maxLengthMessage?: string;\n onChange: (value: string) => void;\n onResize?: (value: number) => void;\n onSend: (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => void;\n onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n maxHeight?: number;\n inputMaxLength?: number;\n buttonDisabled: boolean;\n dataTestid?: string;\n actionRef?: ActionRef;\n }\n\n export interface MessagesListProps extends Record<string, unknown> {\n messages: DSChatBubbleT.Props[];\n actionRef: ActionRef;\n onScrollEnds?: (indexList: string[]) => void;\n isLoading?: 'top' | 'bottom';\n hasMoreItems?: 'top' | 'bottom';\n getMoreMessages: () => void;\n sendingMessages?: Array<string | number>;\n sendingText: string;\n bannerPosition?: 'top' | 'bottom';\n bannerRef?: React.MutableRefObject<{\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n focusOnWrapper: (...args: any[]) => void;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n focusOnLink: (...args: any[]) => void;\n }>;\n }\n\n export interface ContainerProps extends Record<string, unknown> {\n messagesListProps: Pick<MessagesListProps, 'messages' | 'onScrollEnds'>;\n composerProps: ComposerProps;\n actionRef?: ActionRef;\n autoScroll: boolean;\n device: 'desktop' | 'mobile';\n isLoading?: 'top' | 'bottom';\n hasMoreItems?: 'top' | 'bottom';\n getMoreMessages: () => void;\n bannerPosition?: 'top' | 'bottom';\n bannerProps?: ChatBannerProps;\n sendingMessages?: string[] | number[];\n sendingText: string;\n }\n\n export interface GetPaddingT {\n hasMoreItems: string | undefined;\n bannerPosition: string | undefined;\n isLoading: string | undefined;\n }\n}\n\nexport interface TextAreaProps {\n height: string | number;\n style: React.CSSProperties;\n}\n\nexport const defaultPropsComposer: DSChatT.ComposerProps = {\n placeholder: 'Type your message',\n inputValue: '',\n ariaMaxLengthMessage: '',\n onChange: noop,\n onResize: noop,\n onSend: noop,\n onFocus: noop,\n onBlur: noop,\n onKeyDown: noop,\n maxHeight: 0,\n inputMaxLength: undefined,\n maxLengthMessage: undefined,\n buttonDisabled: false,\n dataTestid: 'ds-chat-composer',\n actionRef: undefined,\n};\n\nexport const ChatComposerPropTypes = {\n placeholder: PropTypes.string.description('Input Placeholder').defaultValue(defaultPropsComposer.placeholder),\n inputValue: PropTypes.string.description('Input value').defaultValue(defaultPropsComposer.inputValue),\n ariaMaxLengthMessage: PropTypes.string\n .description('Aria message for Max length message when exceeded')\n .defaultValue(defaultPropsComposer.maxLengthMessage),\n maxLengthMessage: PropTypes.string\n .description('Max length message')\n .defaultValue(defaultPropsComposer.maxLengthMessage),\n onChange: PropTypes.func.description('Called when the user types').defaultValue(defaultPropsComposer.onChange),\n onResize: PropTypes.func\n .description('Called the input changes his height')\n .defaultValue(defaultPropsComposer.onResize),\n onSend: PropTypes.func.description('Called when the click send').defaultValue(defaultPropsComposer.onSend),\n onFocus: PropTypes.func.description('Input focus').defaultValue(defaultPropsComposer.onFocus),\n onBlur: PropTypes.func.description('Input blur').defaultValue(defaultPropsComposer.onBlur),\n onKeyDown: PropTypes.func.description('Input on key down').defaultValue(defaultPropsComposer.onKeyDown),\n maxHeight: PropTypes.number\n .description('Max height of the composer. Use 0 for no limit')\n .defaultValue(defaultPropsComposer.onBlur),\n inputMaxLength: PropTypes.number\n .description('Max length of the composer. `undefined` for no limit')\n .defaultValue(defaultPropsComposer.inputMaxLength),\n buttonDisabled: PropTypes.bool\n .description('Control the disabled for the send button')\n .defaultValue(defaultPropsComposer.buttonDisabled),\n dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultPropsComposer.placeholder),\n actionRef: PropTypes.object\n .description(\n `Reference: \n { \n scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n getMessagesInView?: () => number[],\n focusToIndex?: (n: number) => void,\n focusToList?: () => void,\n focusToComposer?: () => void,\n focusToSend?: () => void,\n }\n \n `,\n )\n .defaultValue(defaultPropsComposer.actionRef),\n};\n\nexport const defaultPropsMessagesList: DSChatT.MessagesListProps = {\n messages: [],\n actionRef: { current: {} },\n // we don't want this to exist \"by default\" since this loads document.addEventListener\n // the code is already checking for this callback existence everytime it's invoked anyway\n // onScrollEnds: () => [],\n getMoreMessages: noop,\n sendingMessages: undefined,\n sendingText: 'Sending',\n bannerPosition: undefined,\n bannerRef: undefined,\n};\n\nexport const ChatContainerMessagesListPropTypes = {\n ...globalAttributesPropTypes,\n\n messages: PropTypes.arrayOf(PropTypes.object)\n .description('The array of out-of-the-box items you want to render inside the ChatMessageList')\n .defaultValue(defaultPropsMessagesList.messages),\n actionRef: PropTypes.object\n .description(\n `Reference: \n { \n scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n getMessagesInView: () => number[],\n focusToIndex: (n: number) => void,\n focusToIndexWithoutScroll: (n: number) => void,\n focusToList: () => void,\n focusToComposer: () => void,\n focusToSend: () => void,\n }\n \n `,\n )\n .defaultValue(defaultPropsMessagesList.actionRef),\n onScrollEnds: PropTypes.func.description(`Called when the scroll stops.`),\n isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Keeps the load more space while the loading is in progress',\n ),\n hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Load More button at the `top` or `bottom` of the container',\n ),\n getMoreMessages: PropTypes.func\n .description('Called when the user clicks on load more')\n .defaultValue(defaultPropsMessagesList.getMoreMessages),\n sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])\n .description('Array of ids of sending messages')\n .defaultValue(defaultPropsMessagesList.sendingMessages),\n sendingText: PropTypes.string\n .description('Label description for messages in sending status')\n .defaultValue(defaultPropsMessagesList.sendingText),\n};\n\nexport const defaultProps: DSChatT.ContainerProps = {\n messagesListProps: defaultPropsMessagesList,\n composerProps: defaultPropsComposer,\n actionRef: undefined,\n autoScroll: false,\n device: 'desktop',\n isLoading: undefined,\n hasMoreItems: undefined,\n getMoreMessages: noop,\n bannerPosition: undefined,\n bannerProps: {\n type: BANNER_TYPES.INFO,\n label: 'Unread Messages',\n viewLabel: 'View',\n onView: noop,\n onClose: noop,\n },\n sendingMessages: undefined,\n sendingText: 'Sending',\n};\n\nexport const ChatContainerPropTypes = {\n ...globalAttributesPropTypes,\n messagesListProps: PropTypes.object\n .description('ChatMessageList props \"messages\" / \"onScrollEnds\"')\n .defaultValue(defaultProps.messagesListProps),\n composerProps: PropTypes.object.description('Composer configuration').defaultValue(defaultProps.composerProps),\n autoScroll: PropTypes.bool.description('Auto scroll to bottom on resize').defaultValue(defaultProps.autoScroll),\n device: PropTypes.string\n .description('Option to render mobile or desktop style composer')\n .defaultValue(defaultProps.device),\n isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Loading messages indicator at the `top` or `bottom` of the container',\n ),\n hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Load More button at the `top` or `bottom` of the container',\n ),\n getMoreMessages: PropTypes.func\n .description('Called when the user clicks on load more')\n .defaultValue(defaultProps.getMoreMessages),\n bannerPosition: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Loading messages indicator at the `top` or `bottom` of the container',\n ),\n bannerProps: PropTypes.object\n .description(\n `Banner configuration:\n label: string;\n viewLabel: string;\n type: BANNER_TYPES;\n onView: () => void;\n onClose: () => void;\n `,\n )\n .defaultValue(defaultProps.bannerProps),\n sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])\n .description('Array of ids of sending messages')\n .defaultValue(defaultProps.sendingMessages),\n sendingText: PropTypes.string\n .description('Label description for messages in sending status')\n .defaultValue(defaultProps.sendingText),\n actionRef: PropTypes.object\n .description(\n `Reference: \n { \n scrollToIndex: (n: number) => void,\n getMessagesInView: () => number[],\n focusToIndex: (n: number) => void,\n focusToList: () => void,\n focusToComposer: () => void,\n focusToSend: () => void,\n }\n \n `,\n )\n .defaultValue(defaultProps.actionRef),\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/package.json CHANGED
@@ -1,7 +1,4 @@
1
1
  {
2
2
  "type": "module",
3
- "sideEffects": false,
4
- "publishConfig": {
5
- "access": "public"
6
- }
3
+ "sideEffects": false
7
4
  }
package/dist/esm/parts/chat-container-messages-list/useActionRef.js CHANGED
@@ -4,7 +4,8 @@ const useActionRef = ({
4
4
  actionRef,
5
5
  useVirtualHelpers: { scrollToIndex: vScroll },
6
6
  virtualListRef,
7
- onScrollStop,
7
+ updateCache,
8
+ getMessagesInView,
8
9
  onlyFocus,
9
10
  scrollAndFocus
10
11
  }) => {
@@ -15,7 +16,7 @@ const useActionRef = ({
15
16
  vScroll(index, opts);
16
17
  requestAnimationFrame(() => {
17
18
  vScroll(index, opts);
18
- onScrollStop();
19
+ updateCache();
19
20
  });
20
21
  }, 0);
21
22
  };
@@ -26,13 +27,13 @@ const useActionRef = ({
26
27
  virtualListRef.current?.focus();
27
28
  };
28
29
  actionRef.current.scrollToIndex = scrollToIndex;
29
- actionRef.current.getMessagesInView = onScrollStop;
30
- onScrollStop();
30
+ actionRef.current.getMessagesInView = getMessagesInView;
31
+ updateCache();
31
32
  actionRef.current.focusToIndex = focusToIndex;
32
33
  actionRef.current.focusToIndexWithoutScroll = onlyFocus;
33
34
  actionRef.current.focusToList = focusToList;
34
35
  }
35
- }, [actionRef, onScrollStop, onlyFocus, scrollAndFocus, vScroll, virtualListRef]);
36
+ }, [actionRef, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, vScroll, virtualListRef]);
36
37
  };
37
38
  export {
38
39
  useActionRef
package/dist/esm/parts/chat-container-messages-list/useActionRef.js.map CHANGED
@@ -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 { useVirtual } from 'react-virtual';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\n\ntype UseActionRefArgs = {\n actionRef: DSChatT.ActionRef;\n useVirtualHelpers: ReturnType<typeof useVirtual>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n onScrollStop: () => string[];\n onlyFocus: (index: string) => 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 setTimeout(() => {\n vScroll(index, opts);\n /* [PUI-15629](https://jira.elliemae.io/browse/PUI-15629)\n * requestAnimationFrame is needed because the first scroll might not calculate positions\n * correctly if the DOM hasn't been fully updated yet. By waiting for the next animation\n * frame, we ensure that:\n * 1. The DOM has been updated with new positions after the first scroll\n * 2. Element height and position measurements are accurate\n * 3. The second scroll can center the element with correct measurements\n *\n * TODO: It might be worth consider upgrading to react-virtual v3(@tanstack/react-virtual), which handles DOM measurements and scroll\n * synchronization better. This RAF workaround might not be necessary with v3.\n */\n requestAnimationFrame(() => {\n vScroll(index, opts);\n onScrollStop();\n });\n }, 0);\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
- "mappings": "AAAA,YAAY,WAAW;ACGvB,OAAOA,YAAW;AAaX,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,mBAAmB,EAAE,eAAe,QAAQ;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AACtB,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,aAAa,UAAU,SAAS;AAClC,YAAM,gBAA+D,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,MAAM;AAC1G,mBAAW,MAAM;AACf,kBAAQ,OAAO,IAAI;AAYnB,gCAAsB,MAAM;AAC1B,oBAAQ,OAAO,IAAI;AACnB,yBAAa;AAAA,UACf,CAAC;AAAA,QACH,GAAG,CAAC;AAAA,MACN;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;",
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 { useVirtual } from 'react-virtual';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\n\ntype UseActionRefArgs = {\n actionRef: DSChatT.ActionRef;\n useVirtualHelpers: ReturnType<typeof useVirtual>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n updateCache: () => void;\n getMessagesInView: () => string[];\n onlyFocus: (index: string) => void;\n scrollAndFocus: (index: number, opts?: DSChatT.ScrollToIndexOptions) => void;\n};\n\nexport const useActionRef = ({\n actionRef,\n useVirtualHelpers: { scrollToIndex: vScroll },\n virtualListRef,\n updateCache,\n getMessagesInView,\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 setTimeout(() => {\n vScroll(index, opts);\n /* [PUI-15629](https://jira.elliemae.io/browse/PUI-15629)\n * requestAnimationFrame is needed because the first scroll might not calculate positions\n * correctly if the DOM hasn't been fully updated yet. By waiting for the next animation\n * frame, we ensure that:\n * 1. The DOM has been updated with new positions after the first scroll\n * 2. Element height and position measurements are accurate\n * 3. The second scroll can center the element with correct measurements\n *\n * TODO: It might be worth consider upgrading to react-virtual v3(@tanstack/react-virtual), which handles DOM measurements and scroll\n * synchronization better. This RAF workaround might not be necessary with v3.\n */\n requestAnimationFrame(() => {\n vScroll(index, opts);\n updateCache();\n });\n }, 0);\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 = getMessagesInView;\n updateCache(); // populate cache immediately on mount \u2014 leading throttle fires synchronously\n actionRef.current.focusToIndex = focusToIndex;\n actionRef.current.focusToIndexWithoutScroll = onlyFocus;\n actionRef.current.focusToList = focusToList;\n }\n }, [actionRef, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, vScroll, virtualListRef]);\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACGvB,OAAOA,YAAW;AAcX,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,mBAAmB,EAAE,eAAe,QAAQ;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AACtB,EAAAA,OAAM,UAAU,MAAM;AACpB,QAAI,aAAa,UAAU,SAAS;AAClC,YAAM,gBAA+D,CAAC,OAAO,OAAO,EAAE,OAAO,SAAS,MAAM;AAC1G,mBAAW,MAAM;AACf,kBAAQ,OAAO,IAAI;AAYnB,gCAAsB,MAAM;AAC1B,oBAAQ,OAAO,IAAI;AACnB,wBAAY;AAAA,UACd,CAAC;AAAA,QACH,GAAG,CAAC;AAAA,MACN;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;AACtC,kBAAY;AACZ,gBAAU,QAAQ,eAAe;AACjC,gBAAU,QAAQ,4BAA4B;AAC9C,gBAAU,QAAQ,cAAc;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,WAAW,aAAa,mBAAmB,WAAW,gBAAgB,SAAS,cAAc,CAAC;AACpG;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/parts/chat-container-messages-list/useChatContainerMessageList.js CHANGED
@@ -42,7 +42,7 @@ const useChatContainerMessageList = (props) => {
42
42
  // https://github.com/tannerlinsley/react-virtual/issues/23
43
43
  estimateSize: React2.useCallback(() => 80, [])
44
44
  });
45
- const { onScrollStop, onlyFocus, scrollAndFocus, checkPendingOnScroll } = useFocusAndScrollHelpers({
45
+ const { onScrollStop, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, checkPendingOnScroll } = useFocusAndScrollHelpers({
46
46
  propsWithDefault,
47
47
  useVirtualHelpers,
48
48
  pendingOnScroll,
@@ -52,7 +52,8 @@ const useChatContainerMessageList = (props) => {
52
52
  actionRef,
53
53
  useVirtualHelpers,
54
54
  virtualListRef,
55
- onScrollStop,
55
+ updateCache,
56
+ getMessagesInView,
56
57
  onlyFocus,
57
58
  scrollAndFocus
58
59
  });
@@ -69,7 +70,7 @@ const useChatContainerMessageList = (props) => {
69
70
  loadMoreRef,
70
71
  scrollAndFocus,
71
72
  onlyFocus,
72
- onScrollStop
73
+ getMessagesInView
73
74
  });
74
75
  return React2.useMemo(
75
76
  () => ({
package/dist/esm/parts/chat-container-messages-list/useChatContainerMessageList.js.map CHANGED
@@ -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/useChatContainerMessageList.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 {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { useVirtual } from 'react-virtual';\nimport { useActionRef } from './useActionRef.js';\nimport { useGlobalEventListener } from './useGlobalEventListener.js';\nimport { useKeyboard } from './useKeyboard.js';\nimport { useFocusAndScrollHelpers } from './useFocusAndScrollHelpers.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatContainerMessagesListPropTypes, defaultPropsMessagesList } from '../../react-desc-prop-types.js';\nimport { DSChatContainerMessagesList } from '../../DSChatContainerDefinitions.js';\n\nconst getPadding = ({ hasMoreItems, bannerPosition, isLoading }: DSChatT.GetPaddingT) => {\n const padding = {\n paddingStart: 0,\n paddingEnd: -5,\n };\n if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === 'top')) padding.paddingStart = 42;\n else if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === 'bottom')) padding.paddingEnd = 42;\n return padding;\n};\n\ntype UseChatContainerMessageList = (props: DSChatT.MessagesListProps) => {\n propsWithDefault: DSChatT.MessagesListProps;\n globalAttributes: ReturnType<typeof useGetGlobalAttributes>;\n useVirtualHelpers: ReturnType<typeof useVirtual>;\n loadMoreRef: React.MutableRefObject<HTMLButtonElement | undefined>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n} & ReturnType<typeof useKeyboard>;\n\nexport const useChatContainerMessageList: UseChatContainerMessageList = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.MessagesListProps>(props, defaultPropsMessagesList);\n useValidateTypescriptPropTypes<DSChatT.MessagesListProps>(\n propsWithDefault,\n ChatContainerMessagesListPropTypes,\n DSChatContainerMessagesList,\n );\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n const loadMoreRef = React.useRef<HTMLButtonElement>();\n const virtualListRef = React.useRef<HTMLDivElement>();\n\n const pendingOnScroll = React.useRef(false);\n const { bannerPosition, messages, actionRef, hasMoreItems, isLoading } = propsWithDefault;\n const useVirtualHelpers = useVirtual({\n size: messages?.length,\n parentRef: virtualListRef,\n overscan: 15,\n ...getPadding({ hasMoreItems, bannerPosition, isLoading }),\n // estimateSize should not be really required given what was stated on\n // https://github.com/tannerlinsley/react-virtual/issues/23\n estimateSize: React.useCallback(() => 80, []),\n });\n\n const { onScrollStop, onlyFocus, scrollAndFocus, checkPendingOnScroll } = useFocusAndScrollHelpers({\n propsWithDefault,\n useVirtualHelpers,\n pendingOnScroll,\n virtualListRef,\n });\n\n useActionRef({\n actionRef,\n useVirtualHelpers,\n virtualListRef,\n onScrollStop,\n onlyFocus,\n scrollAndFocus,\n });\n\n useGlobalEventListener({\n propsWithDefault,\n virtualListRef,\n onScrollStop,\n checkPendingOnScroll,\n });\n\n const keyboardMethods = useKeyboard({\n propsWithDefault,\n actionRef,\n virtualListRef,\n loadMoreRef,\n scrollAndFocus,\n onlyFocus,\n onScrollStop,\n });\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalAttributes,\n useVirtualHelpers,\n loadMoreRef,\n virtualListRef,\n ...keyboardMethods,\n }),\n [globalAttributes, keyboardMethods, propsWithDefault, useVirtualHelpers, loadMoreRef, virtualListRef],\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACGvB,OAAOA,YAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AAEzC,SAAS,oCAAoC,gCAAgC;AAC7E,SAAS,mCAAmC;AAE5C,MAAM,aAAa,CAAC,EAAE,cAAc,gBAAgB,UAAU,MAA2B;AACvF,QAAM,UAAU;AAAA,IACd,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AACA,MAAI,CAAC,cAAc,gBAAgB,SAAS,EAAE,KAAK,CAAC,SAAS,SAAS,KAAK,EAAG,SAAQ,eAAe;AAAA,WAC5F,CAAC,cAAc,gBAAgB,SAAS,EAAE,KAAK,CAAC,SAAS,SAAS,QAAQ,EAAG,SAAQ,aAAa;AAC3G,SAAO;AACT;AAUO,MAAM,8BAA2D,CAAC,UAAU;AACjF,QAAM,mBAAmB,6BAAwD,OAAO,wBAAwB;AAChH;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,mBAAmB,uBAAuB,gBAAgB;AAChE,QAAM,cAAcA,OAAM,OAA0B;AACpD,QAAM,iBAAiBA,OAAM,OAAuB;AAEpD,QAAM,kBAAkBA,OAAM,OAAO,KAAK;AAC1C,QAAM,EAAE,gBAAgB,UAAU,WAAW,cAAc,UAAU,IAAI;AACzE,QAAM,oBAAoB,WAAW;AAAA,IACnC,MAAM,UAAU;AAAA,IAChB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,GAAG,WAAW,EAAE,cAAc,gBAAgB,UAAU,CAAC;AAAA;AAAA;AAAA,IAGzD,cAAcA,OAAM,YAAY,MAAM,IAAI,CAAC,CAAC;AAAA,EAC9C,CAAC;AAED,QAAM,EAAE,cAAc,WAAW,gBAAgB,qBAAqB,IAAI,yBAAyB;AAAA,IACjG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,eAAa;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,yBAAuB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,kBAAkB,YAAY;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,kBAAkB,iBAAiB,kBAAkB,mBAAmB,aAAa,cAAc;AAAA,EACtG;AACF;",
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 {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { useVirtual } from 'react-virtual';\nimport { useActionRef } from './useActionRef.js';\nimport { useGlobalEventListener } from './useGlobalEventListener.js';\nimport { useKeyboard } from './useKeyboard.js';\nimport { useFocusAndScrollHelpers } from './useFocusAndScrollHelpers.js';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\nimport { ChatContainerMessagesListPropTypes, defaultPropsMessagesList } from '../../react-desc-prop-types.js';\nimport { DSChatContainerMessagesList } from '../../DSChatContainerDefinitions.js';\n\nconst getPadding = ({ hasMoreItems, bannerPosition, isLoading }: DSChatT.GetPaddingT) => {\n const padding = {\n paddingStart: 0,\n paddingEnd: -5,\n };\n if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === 'top')) padding.paddingStart = 42;\n else if ([hasMoreItems, bannerPosition, isLoading].some((item) => item === 'bottom')) padding.paddingEnd = 42;\n return padding;\n};\n\ntype UseChatContainerMessageList = (props: DSChatT.MessagesListProps) => {\n propsWithDefault: DSChatT.MessagesListProps;\n globalAttributes: ReturnType<typeof useGetGlobalAttributes>;\n useVirtualHelpers: ReturnType<typeof useVirtual>;\n loadMoreRef: React.MutableRefObject<HTMLButtonElement | undefined>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;\n} & ReturnType<typeof useKeyboard>;\n\nexport const useChatContainerMessageList: UseChatContainerMessageList = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.MessagesListProps>(props, defaultPropsMessagesList);\n useValidateTypescriptPropTypes<DSChatT.MessagesListProps>(\n propsWithDefault,\n ChatContainerMessagesListPropTypes,\n DSChatContainerMessagesList,\n );\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n const loadMoreRef = React.useRef<HTMLButtonElement>();\n const virtualListRef = React.useRef<HTMLDivElement>();\n\n const pendingOnScroll = React.useRef(false);\n const { bannerPosition, messages, actionRef, hasMoreItems, isLoading } = propsWithDefault;\n const useVirtualHelpers = useVirtual({\n size: messages?.length,\n parentRef: virtualListRef,\n overscan: 15,\n ...getPadding({ hasMoreItems, bannerPosition, isLoading }),\n // estimateSize should not be really required given what was stated on\n // https://github.com/tannerlinsley/react-virtual/issues/23\n estimateSize: React.useCallback(() => 80, []),\n });\n\n const { onScrollStop, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, checkPendingOnScroll } =\n useFocusAndScrollHelpers({\n propsWithDefault,\n useVirtualHelpers,\n pendingOnScroll,\n virtualListRef,\n });\n\n useActionRef({\n actionRef,\n useVirtualHelpers,\n virtualListRef,\n updateCache,\n getMessagesInView,\n onlyFocus,\n scrollAndFocus,\n });\n\n useGlobalEventListener({\n propsWithDefault,\n virtualListRef,\n onScrollStop,\n checkPendingOnScroll,\n });\n\n const keyboardMethods = useKeyboard({\n propsWithDefault,\n actionRef,\n virtualListRef,\n loadMoreRef,\n scrollAndFocus,\n onlyFocus,\n getMessagesInView,\n });\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalAttributes,\n useVirtualHelpers,\n loadMoreRef,\n virtualListRef,\n ...keyboardMethods,\n }),\n [globalAttributes, keyboardMethods, propsWithDefault, useVirtualHelpers, loadMoreRef, virtualListRef],\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACGvB,OAAOA,YAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AAEzC,SAAS,oCAAoC,gCAAgC;AAC7E,SAAS,mCAAmC;AAE5C,MAAM,aAAa,CAAC,EAAE,cAAc,gBAAgB,UAAU,MAA2B;AACvF,QAAM,UAAU;AAAA,IACd,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AACA,MAAI,CAAC,cAAc,gBAAgB,SAAS,EAAE,KAAK,CAAC,SAAS,SAAS,KAAK,EAAG,SAAQ,eAAe;AAAA,WAC5F,CAAC,cAAc,gBAAgB,SAAS,EAAE,KAAK,CAAC,SAAS,SAAS,QAAQ,EAAG,SAAQ,aAAa;AAC3G,SAAO;AACT;AAUO,MAAM,8BAA2D,CAAC,UAAU;AACjF,QAAM,mBAAmB,6BAAwD,OAAO,wBAAwB;AAChH;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,mBAAmB,uBAAuB,gBAAgB;AAChE,QAAM,cAAcA,OAAM,OAA0B;AACpD,QAAM,iBAAiBA,OAAM,OAAuB;AAEpD,QAAM,kBAAkBA,OAAM,OAAO,KAAK;AAC1C,QAAM,EAAE,gBAAgB,UAAU,WAAW,cAAc,UAAU,IAAI;AACzE,QAAM,oBAAoB,WAAW;AAAA,IACnC,MAAM,UAAU;AAAA,IAChB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,GAAG,WAAW,EAAE,cAAc,gBAAgB,UAAU,CAAC;AAAA;AAAA;AAAA,IAGzD,cAAcA,OAAM,YAAY,MAAM,IAAI,CAAC,CAAC;AAAA,EAC9C,CAAC;AAED,QAAM,EAAE,cAAc,aAAa,mBAAmB,WAAW,gBAAgB,qBAAqB,IACpG,yBAAyB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAEH,eAAa;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,yBAAuB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,kBAAkB,YAAY;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,kBAAkB,iBAAiB,kBAAkB,mBAAmB,aAAa,cAAc;AAAA,EACtG;AACF;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/parts/chat-container-messages-list/useFocusAndScrollHelpers.js CHANGED
@@ -1,32 +1,48 @@
1
1
  import * as React from "react";
2
2
  import React2 from "react";
3
- import { debounce } from "lodash-es";
3
+ import { debounce, throttle } from "lodash-es";
4
4
  const useFocusAndScrollHelpers = ({
5
5
  propsWithDefault: { onScrollEnds },
6
6
  useVirtualHelpers: { scrollToIndex: vScroll },
7
7
  pendingOnScroll,
8
8
  virtualListRef
9
9
  }) => {
10
+ const computeVisibleItems = React2.useCallback(() => {
11
+ if (document.visibilityState === "hidden") {
12
+ pendingOnScroll.current = true;
13
+ return [];
14
+ }
15
+ if (!virtualListRef.current) return [];
16
+ pendingOnScroll.current = false;
17
+ const { bottom, top } = virtualListRef.current.getBoundingClientRect();
18
+ const list = virtualListRef.current.querySelectorAll('[data-element="chat-element-list-item"]');
19
+ const indexList = [];
20
+ list.forEach((item) => {
21
+ const { top: itemTop } = item.getBoundingClientRect();
22
+ const itemPadding = 10;
23
+ if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index || "");
24
+ });
25
+ return indexList;
26
+ }, [pendingOnScroll, virtualListRef]);
27
+ const visibleItemsCache = React2.useRef([]);
28
+ const updateCache = React2.useMemo(
29
+ () => throttle(
30
+ () => {
31
+ visibleItemsCache.current = computeVisibleItems();
32
+ },
33
+ 500,
34
+ { leading: true }
35
+ ),
36
+ [computeVisibleItems]
37
+ );
38
+ const getMessagesInView = React2.useCallback(() => [...visibleItemsCache.current], []);
10
39
  const onScrollStop = React2.useMemo(
11
40
  () => debounce(() => {
12
- if (document.visibilityState === "hidden") {
13
- pendingOnScroll.current = true;
14
- return [];
15
- }
16
- if (!virtualListRef.current) return [];
17
- pendingOnScroll.current = false;
18
- const { bottom, top } = virtualListRef.current?.getBoundingClientRect() || {};
19
- const list = virtualListRef.current.querySelectorAll('[data-element="chat-element-list-item"]');
20
- const indexList = [];
21
- list.forEach((item) => {
22
- const { top: itemTop } = item.getBoundingClientRect();
23
- const itemPadding = 10;
24
- if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index || "");
25
- });
41
+ const indexList = computeVisibleItems();
26
42
  if (onScrollEnds) onScrollEnds(indexList);
27
43
  return indexList;
28
44
  }, 500),
29
- [onScrollEnds, pendingOnScroll, virtualListRef]
45
+ [computeVisibleItems, onScrollEnds]
30
46
  );
31
47
  const onlyFocus = React2.useCallback(
32
48
  (index) => {
@@ -43,21 +59,26 @@ const useFocusAndScrollHelpers = ({
43
59
  setTimeout(() => {
44
60
  onlyFocus(index.toString());
45
61
  }, 300);
46
- onScrollStop();
62
+ updateCache();
47
63
  },
48
- [onScrollStop, onlyFocus, vScroll]
64
+ [updateCache, onlyFocus, vScroll]
49
65
  );
50
66
  const checkPendingOnScroll = React2.useCallback(() => {
51
- if (pendingOnScroll.current === true) onScrollStop();
52
- }, [onScrollStop, pendingOnScroll]);
67
+ if (pendingOnScroll.current === true) {
68
+ updateCache();
69
+ onScrollStop();
70
+ }
71
+ }, [updateCache, onScrollStop, pendingOnScroll]);
53
72
  return React2.useMemo(
54
73
  () => ({
55
74
  onScrollStop,
75
+ updateCache,
76
+ getMessagesInView,
56
77
  onlyFocus,
57
78
  scrollAndFocus,
58
79
  checkPendingOnScroll
59
80
  }),
60
- [onScrollStop, onlyFocus, scrollAndFocus, checkPendingOnScroll]
81
+ [onScrollStop, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, checkPendingOnScroll]
61
82
  );
62
83
  };
63
84
  export {
package/dist/esm/parts/chat-container-messages-list/useFocusAndScrollHelpers.js.map CHANGED
@@ -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 type { useVirtual } from 'react-virtual';\nimport { debounce } from 'lodash-es';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\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 ) as () => string[];\n\n const onlyFocus = React.useCallback(\n (index: string) => {\n (virtualListRef.current?.querySelector(`[data-index=\"${index}\"]`) as HTMLDivElement)?.focus();\n },\n [virtualListRef],\n );\n\n const scrollAndFocus = React.useCallback(\n (index: number) => {\n vScroll(index, { align: 'center' });\n /* [PUI-15629](https://jira.elliemae.io/browse/PUI-15629)\n * requestAnimationFrame is needed because the first scroll might not calculate positions\n * correctly if the DOM hasn't been fully updated yet. By waiting for the next animation\n * frame, we ensure that:\n * 1. The DOM has been updated with new positions after the first scroll\n * 2. Element height and position measurements are accurate\n * 3. The second scroll can center the element with correct measurements\n *\n * TODO: It might be worth consider upgrading to react-virtual v3(@tanstack/react-virtual), which handles DOM measurements and scroll\n * synchronization better. This RAF workaround might not be necessary with v3.\n */\n requestAnimationFrame(() => {\n vScroll(index, { align: 'center' });\n });\n\n setTimeout(() => {\n onlyFocus(index.toString());\n }, 300);\n\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,YAAY,WAAW;ACGvB,OAAOA,YAAW;AAElB,SAAS,gBAAgB;AAUlB,MAAM,2BAA2B,CAAC;AAAA,EACvC,kBAAkB,EAAE,aAAa;AAAA,EACjC,mBAAmB,EAAE,eAAe,QAAQ;AAAA,EAC5C;AAAA,EACA;AACF,MAAoC;AAClC,QAAM,eAAeA,OAAM;AAAA,IACzB,MACE,SAAS,MAAgB;AACvB,UAAI,SAAS,oBAAoB,UAAU;AACzC,wBAAgB,UAAU;AAC1B,eAAO,CAAC;AAAA,MACV;AACA,UAAI,CAAC,eAAe,QAAS,QAAO,CAAC;AACrC,sBAAgB,UAAU;AAC1B,YAAM,EAAE,QAAQ,IAAI,IAAI,eAAe,SAAS,sBAAsB,KAAK,CAAC;AAE5E,YAAM,OAAO,eAAe,QAAQ,iBAA8B,yCAAyC;AAC3G,YAAM,YAA2B,CAAC;AAClC,WAAK,QAAQ,CAAC,SAAsB;AAClC,cAAM,EAAE,KAAK,QAAQ,IAAI,KAAK,sBAAsB;AAEpD,cAAM,cAAc;AACpB,YAAI,UAAU,cAAc,UAAU,UAAU,cAAc,IAAK,WAAU,KAAK,KAAK,QAAQ,SAAS,EAAE;AAAA,MAC5G,CAAC;AACD,UAAI,aAAc,cAAa,SAAS;AACxC,aAAO;AAAA,IACT,GAAG,GAAG;AAAA,IACR,CAAC,cAAc,iBAAiB,cAAc;AAAA,EAChD;AAEA,QAAM,YAAYA,OAAM;AAAA,IACtB,CAAC,UAAkB;AACjB,MAAC,eAAe,SAAS,cAAc,gBAAgB,KAAK,IAAI,GAAsB,MAAM;AAAA,IAC9F;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,iBAAiBA,OAAM;AAAA,IAC3B,CAAC,UAAkB;AACjB,cAAQ,OAAO,EAAE,OAAO,SAAS,CAAC;AAYlC,4BAAsB,MAAM;AAC1B,gBAAQ,OAAO,EAAE,OAAO,SAAS,CAAC;AAAA,MACpC,CAAC;AAED,iBAAW,MAAM;AACf,kBAAU,MAAM,SAAS,CAAC;AAAA,MAC5B,GAAG,GAAG;AAEN,mBAAa;AAAA,IACf;AAAA,IACA,CAAC,cAAc,WAAW,OAAO;AAAA,EACnC;AAEA,QAAM,uBAAuBA,OAAM,YAAY,MAAM;AACnD,QAAI,gBAAgB,YAAY,KAAM,cAAa;AAAA,EACrD,GAAG,CAAC,cAAc,eAAe,CAAC;AAElC,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,WAAW,gBAAgB,oBAAoB;AAAA,EAChE;AACF;",
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 { useVirtual } from 'react-virtual';\nimport { debounce, throttle } from 'lodash-es';\nimport type { DSChatT } from '../../react-desc-prop-types.js';\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 // Pure DOM read \u2014 no side effects beyond pendingOnScroll flag and getBoundingClientRect queries.\n const computeVisibleItems = React.useCallback((): 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 const list = virtualListRef.current.querySelectorAll<HTMLElement>('[data-element=\"chat-element-list-item\"]');\n const indexList: string[] = [];\n list.forEach((item: HTMLElement) => {\n const { top: itemTop } = item.getBoundingClientRect();\n const itemPadding = 10;\n if (itemTop + itemPadding < bottom && itemTop + itemPadding > top) indexList.push(item.dataset.index || '');\n });\n return indexList;\n }, [pendingOnScroll, virtualListRef]);\n\n // Throttled with leading: populates the cache immediately on first call and keeps it\n // fresh. No side effects beyond DOM reads \u2014 onScrollEnds is not involved.\n const visibleItemsCache = React.useRef<string[]>([]);\n const updateCache = React.useMemo(\n () =>\n throttle(\n () => {\n visibleItemsCache.current = computeVisibleItems();\n },\n 500,\n { leading: true },\n ),\n [computeVisibleItems],\n );\n\n // Synchronous getter \u2014 returns a copy so callers using .pop()/.shift() don't mutate the cache.\n const getMessagesInView = React.useCallback((): string[] => [...visibleItemsCache.current], []);\n\n // Debounced trailing: notifies onScrollEnds consumers after scrolling settles.\n // Semantics and timing unchanged \u2014 this path is isolated from the cache.\n const onScrollStop = React.useMemo(\n () =>\n debounce((): string[] => {\n const indexList = computeVisibleItems();\n if (onScrollEnds) onScrollEnds(indexList);\n return indexList;\n }, 500),\n [computeVisibleItems, onScrollEnds],\n ) as () => string[];\n\n const onlyFocus = React.useCallback(\n (index: string) => {\n (virtualListRef.current?.querySelector(`[data-index=\"${index}\"]`) as HTMLDivElement)?.focus();\n },\n [virtualListRef],\n );\n\n const scrollAndFocus = React.useCallback(\n (index: number) => {\n vScroll(index, { align: 'center' });\n /* [PUI-15629](https://jira.elliemae.io/browse/PUI-15629)\n * requestAnimationFrame is needed because the first scroll might not calculate positions\n * correctly if the DOM hasn't been fully updated yet. By waiting for the next animation\n * frame, we ensure that:\n * 1. The DOM has been updated with new positions after the first scroll\n * 2. Element height and position measurements are accurate\n * 3. The second scroll can center the element with correct measurements\n *\n * TODO: It might be worth consider upgrading to react-virtual v3(@tanstack/react-virtual), which handles DOM measurements and scroll\n * synchronization better. This RAF workaround might not be necessary with v3.\n */\n requestAnimationFrame(() => {\n vScroll(index, { align: 'center' });\n });\n\n setTimeout(() => {\n onlyFocus(index.toString());\n }, 300);\n\n updateCache();\n },\n [updateCache, onlyFocus, vScroll],\n );\n\n const checkPendingOnScroll = React.useCallback(() => {\n if (pendingOnScroll.current === true) {\n updateCache();\n onScrollStop();\n }\n }, [updateCache, onScrollStop, pendingOnScroll]);\n\n return React.useMemo(\n () => ({\n onScrollStop,\n updateCache,\n getMessagesInView,\n onlyFocus,\n scrollAndFocus,\n checkPendingOnScroll,\n }),\n [onScrollStop, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, checkPendingOnScroll],\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACGvB,OAAOA,YAAW;AAElB,SAAS,UAAU,gBAAgB;AAU5B,MAAM,2BAA2B,CAAC;AAAA,EACvC,kBAAkB,EAAE,aAAa;AAAA,EACjC,mBAAmB,EAAE,eAAe,QAAQ;AAAA,EAC5C;AAAA,EACA;AACF,MAAoC;AAElC,QAAM,sBAAsBA,OAAM,YAAY,MAAgB;AAC5D,QAAI,SAAS,oBAAoB,UAAU;AACzC,sBAAgB,UAAU;AAC1B,aAAO,CAAC;AAAA,IACV;AACA,QAAI,CAAC,eAAe,QAAS,QAAO,CAAC;AACrC,oBAAgB,UAAU;AAC1B,UAAM,EAAE,QAAQ,IAAI,IAAI,eAAe,QAAQ,sBAAsB;AACrE,UAAM,OAAO,eAAe,QAAQ,iBAA8B,yCAAyC;AAC3G,UAAM,YAAsB,CAAC;AAC7B,SAAK,QAAQ,CAAC,SAAsB;AAClC,YAAM,EAAE,KAAK,QAAQ,IAAI,KAAK,sBAAsB;AACpD,YAAM,cAAc;AACpB,UAAI,UAAU,cAAc,UAAU,UAAU,cAAc,IAAK,WAAU,KAAK,KAAK,QAAQ,SAAS,EAAE;AAAA,IAC5G,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,cAAc,CAAC;AAIpC,QAAM,oBAAoBA,OAAM,OAAiB,CAAC,CAAC;AACnD,QAAM,cAAcA,OAAM;AAAA,IACxB,MACE;AAAA,MACE,MAAM;AACJ,0BAAkB,UAAU,oBAAoB;AAAA,MAClD;AAAA,MACA;AAAA,MACA,EAAE,SAAS,KAAK;AAAA,IAClB;AAAA,IACF,CAAC,mBAAmB;AAAA,EACtB;AAGA,QAAM,oBAAoBA,OAAM,YAAY,MAAgB,CAAC,GAAG,kBAAkB,OAAO,GAAG,CAAC,CAAC;AAI9F,QAAM,eAAeA,OAAM;AAAA,IACzB,MACE,SAAS,MAAgB;AACvB,YAAM,YAAY,oBAAoB;AACtC,UAAI,aAAc,cAAa,SAAS;AACxC,aAAO;AAAA,IACT,GAAG,GAAG;AAAA,IACR,CAAC,qBAAqB,YAAY;AAAA,EACpC;AAEA,QAAM,YAAYA,OAAM;AAAA,IACtB,CAAC,UAAkB;AACjB,MAAC,eAAe,SAAS,cAAc,gBAAgB,KAAK,IAAI,GAAsB,MAAM;AAAA,IAC9F;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,iBAAiBA,OAAM;AAAA,IAC3B,CAAC,UAAkB;AACjB,cAAQ,OAAO,EAAE,OAAO,SAAS,CAAC;AAYlC,4BAAsB,MAAM;AAC1B,gBAAQ,OAAO,EAAE,OAAO,SAAS,CAAC;AAAA,MACpC,CAAC;AAED,iBAAW,MAAM;AACf,kBAAU,MAAM,SAAS,CAAC;AAAA,MAC5B,GAAG,GAAG;AAEN,kBAAY;AAAA,IACd;AAAA,IACA,CAAC,aAAa,WAAW,OAAO;AAAA,EAClC;AAEA,QAAM,uBAAuBA,OAAM,YAAY,MAAM;AACnD,QAAI,gBAAgB,YAAY,MAAM;AACpC,kBAAY;AACZ,mBAAa;AAAA,IACf;AAAA,EACF,GAAG,CAAC,aAAa,cAAc,eAAe,CAAC;AAE/C,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,aAAa,mBAAmB,WAAW,gBAAgB,oBAAoB;AAAA,EAChG;AACF;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/parts/chat-container-messages-list/useKeyboard.js CHANGED
@@ -8,7 +8,7 @@ const useKeyboard = ({
8
8
  loadMoreRef,
9
9
  scrollAndFocus,
10
10
  onlyFocus,
11
- onScrollStop
11
+ getMessagesInView
12
12
  }) => {
13
13
  const handleKey = React2.useCallback(
14
14
  (e) => {
@@ -69,7 +69,7 @@ const useKeyboard = ({
69
69
  case "ArrowUp":
70
70
  e.preventDefault();
71
71
  if (document.activeElement !== loadMoreRef.current) {
72
- const id = onScrollStop()?.shift();
72
+ const id = getMessagesInView()?.shift();
73
73
  if (id) onlyFocus(id);
74
74
  }
75
75
  break;
@@ -78,7 +78,7 @@ const useKeyboard = ({
78
78
  if (document.activeElement === loadMoreRef.current) {
79
79
  virtualListRef.current?.querySelector(`[data-index="0"]`)?.focus();
80
80
  } else {
81
- const id = onScrollStop()?.pop();
81
+ const id = getMessagesInView()?.pop();
82
82
  if (id) onlyFocus(id);
83
83
  }
84
84
  break;
@@ -111,7 +111,16 @@ const useKeyboard = ({
111
111
  break;
112
112
  }
113
113
  },
114
- [actionRef, hasMoreItems, loadMoreRef, messages.length, onScrollStop, onlyFocus, scrollAndFocus, virtualListRef]
114
+ [
115
+ actionRef,
116
+ hasMoreItems,
117
+ loadMoreRef,
118
+ messages.length,
119
+ getMessagesInView,
120
+ onlyFocus,
121
+ scrollAndFocus,
122
+ virtualListRef
123
+ ]
115
124
  );
116
125
  return React2.useMemo(() => ({ handleKey, handleListKey }), [handleKey, handleListKey]);
117
126
  };
package/dist/esm/parts/chat-container-messages-list/useKeyboard.js.map CHANGED
@@ -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 { DSChatT } from '../../react-desc-prop-types.js';\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: string) => void;\n onScrollStop: () => 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 const id = onScrollStop()?.shift();\n if (id) onlyFocus(id);\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 const id = onScrollStop()?.pop();\n if (id) onlyFocus(id);\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": "AAAA,YAAY,WAAW;ACGvB,OAAOA,YAAW;AAclB,MAAM,cAAc,CAAC,QAAgC,OAAO,UAAU,GAAG;AAElE,MAAM,cAAc,CAAC;AAAA,EAC1B,kBAAkB,EAAE,cAAc,UAAU,gBAAgB,UAAU;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACrB,QAAM,YAAYA,OAAM;AAAA,IACtB,CAAC,MAAwC;AACvC,YAAM,EAAE,KAAK,cAAc,IAAI;AAC/B,YAAM,QAAQ,cAAc,SAAS,QAAQ,OAAO,cAAc,QAAQ,KAAK,IAAI;AACnF,YAAM,gBAAgB,YAAY,KAAK;AACvC,QAAE,gBAAgB;AAClB,cAAQ,KAAK;AAAA,QACX,KAAK;AACH,YAAE,eAAe;AACjB,cAAI,SAAS,QAAQ,GAAG;AACtB,aAAC,eAAe,SAAS,cAAc,gBAAgB,QAAQ,CAAC,IAAI,GAAqB,MAAM;AAAA,UACjG,WAAW,iBAAiB,OAAO;AACjC,wBAAY,SAAS,MAAM;AAAA,UAC7B;AACA;AAAA,QACF,KAAK;AACH,YAAE,eAAe;AACjB,cAAI,UAAU,UAAU,iBAAiB,QAAQ,SAAS,SAAS,GAAG;AACpE,aAAC,eAAe,SAAS,cAAc,gBAAgB,QAAQ,CAAC,IAAI,GAAqB,MAAM;AAAA,UACjG;AACA;AAAA,QACF,KAAK;AACH,YAAE,eAAe;AACjB,yBAAe,CAAC;AAChB;AAAA,QACF,KAAK;AACH,YAAE,eAAe;AACjB,cAAI,UAAU,OAAQ,gBAAe,SAAS,SAAS,CAAC;AACxD;AAAA,QACF,KAAK;AACH,cAAI,iBAAiB,YAAY,CAAC,EAAE,UAAU;AAC5C,cAAE,eAAe;AACjB,wBAAY,SAAS,MAAM;AAAA,UAC7B,WAAW,iBAAiB,SAAS,EAAE,UAAU;AAC/C,cAAE,eAAe;AACjB,wBAAY,SAAS,MAAM;AAAA,UAC7B,WAAW,CAAC,EAAE,UAAU;AACtB,gBAAI,gBAAgB;AAClB,gBAAE,eAAe;AACjB,yBAAW,SAAS,eAAe;AAAA,YACrC;AAAA,UACF,OAAO;AACL,cAAE,eAAe;AACjB,2BAAe,SAAS,MAAM;AAAA,UAChC;AACA;AAAA,QACF;AACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,CAAC,cAAc,SAAS,QAAQ,gBAAgB,gBAAgB,aAAa,gBAAgB,SAAS;AAAA,EACxG;AACA,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAA2B;AAC1B,YAAM,EAAE,IAAI,IAAI;AAChB,cAAQ,KAAK;AAAA,QACX,KAAK;AACH,YAAE,eAAe;AACjB,cAAI,SAAS,kBAAkB,YAAY,SAAS;AAClD,kBAAM,KAAK,aAAa,GAAG,MAAM;AACjC,gBAAI,GAAI,WAAU,EAAE;AAAA,UACtB;AACA;AAAA,QACF,KAAK;AACH,YAAE,eAAe;AACjB,cAAI,SAAS,kBAAkB,YAAY,SAAS;AAClD,YAAC,eAAe,SAAS,cAAc,kBAAkB,GAAsB,MAAM;AAAA,UACvF,OAAO;AACL,kBAAM,KAAK,aAAa,GAAG,IAAI;AAC/B,gBAAI,GAAI,WAAU,EAAE;AAAA,UACtB;AACA;AAAA,QACF,KAAK;AACH,YAAE,eAAe;AACjB,yBAAe,CAAC;AAChB;AAAA,QACF,KAAK;AACH,YAAE,eAAe;AACjB,cAAI,UAAU,OAAQ,gBAAe,SAAS,SAAS,CAAC;AACxD;AAAA,QACF,KAAK;AACH,cAAI,SAAS,kBAAkB,YAAY,SAAS;AAClD,gBAAI,iBAAiB,YAAY,CAAC,EAAE,UAAU;AAC5C,gBAAE,eAAe;AACjB,0BAAY,SAAS,MAAM;AAAA,YAC7B,WAAW,CAAC,EAAE,UAAU;AACtB,gBAAE,eAAe;AACjB,wBAAU,SAAS,kBAAkB;AAAA,YACvC;AAAA,UACF,WAAW,CAAC,EAAE,UAAU;AACtB,cAAE,eAAe;AACjB,sBAAU,SAAS,kBAAkB;AAAA,UACvC,OAAO;AACL,cAAE,eAAe;AACjB,2BAAe,SAAS,MAAM;AAAA,UAChC;AACA;AAAA,QACF;AACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,CAAC,WAAW,cAAc,aAAa,SAAS,QAAQ,cAAc,WAAW,gBAAgB,cAAc;AAAA,EACjH;AAEA,SAAOA,OAAM,QAAQ,OAAO,EAAE,WAAW,cAAc,IAAI,CAAC,WAAW,aAAa,CAAC;AACvF;",
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 { DSChatT } from '../../react-desc-prop-types.js';\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: string) => void;\n getMessagesInView: () => string[];\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 getMessagesInView,\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 const id = getMessagesInView()?.shift();\n if (id) onlyFocus(id);\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 const id = getMessagesInView()?.pop();\n if (id) onlyFocus(id);\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 [\n actionRef,\n hasMoreItems,\n loadMoreRef,\n messages.length,\n getMessagesInView,\n onlyFocus,\n scrollAndFocus,\n virtualListRef,\n ],\n );\n\n return React.useMemo(() => ({ handleKey, handleListKey }), [handleKey, handleListKey]);\n};\n"],
5
+ "mappings": "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",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/react-desc-prop-types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { useVirtual } from 'react-virtual';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { type DSChatBubbleT } from '@elliemae/ds-chat-bubble';\nimport { type DSButtonT } from '@elliemae/ds-button-v2';\n\n// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\nexport declare namespace DSChatT {\n interface ChatBannerProps {\n label: string;\n viewLabel: string;\n type?: 'info' | 'success' | 'danger' | 'warning';\n onView: () => void;\n onClose: () => void;\n }\n export type ScrollToIndexOptions = Parameters<ReturnType<typeof useVirtual>['scrollToIndex']>[1];\n export type ActionRef = React.MutableRefObject<{\n scrollToIndex?: (index: number, opts: ScrollToIndexOptions) => void;\n focusToIndex?: (index: number, opts: ScrollToIndexOptions) => void;\n getMessagesInView?: () => string[];\n focusToIndexWithoutScroll?: (index: string) => void;\n focusToList?: () => void;\n focusToComposer?: () => void;\n focusToSend?: () => void;\n focusOnBanner?: () => void;\n focusOnBannerLink?: () => void;\n }>;\n\n export interface ComposerProps extends Record<string, unknown> {\n placeholder?: string;\n inputValue?: string;\n ariaMaxLengthMessage?: string;\n maxLengthMessage?: string;\n onChange: (value: string) => void;\n onResize?: (value: number) => void;\n onSend: (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => void;\n onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n maxHeight?: number;\n inputMaxLength?: number;\n buttonDisabled: boolean;\n dataTestid?: string;\n actionRef?: ActionRef;\n }\n\n export interface MessagesListProps extends Record<string, unknown> {\n messages: DSChatBubbleT.Props[];\n actionRef: ActionRef;\n onScrollEnds?: (indexList: string[]) => void;\n isLoading?: 'top' | 'bottom';\n hasMoreItems?: 'top' | 'bottom';\n getMoreMessages: () => void;\n sendingMessages?: Array<string | number>;\n sendingText: string;\n bannerPosition?: 'top' | 'bottom';\n bannerRef?: React.MutableRefObject<{\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n focusOnWrapper: (...args: any[]) => void;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n focusOnLink: (...args: any[]) => void;\n }>;\n }\n\n export interface ContainerProps extends Record<string, unknown> {\n messagesListProps: Pick<MessagesListProps, 'messages' | 'onScrollEnds'>;\n composerProps: ComposerProps;\n actionRef?: ActionRef;\n autoScroll: boolean;\n device: 'desktop' | 'mobile';\n isLoading?: 'top' | 'bottom';\n hasMoreItems?: 'top' | 'bottom';\n getMoreMessages: () => void;\n bannerPosition?: 'top' | 'bottom';\n bannerProps?: ChatBannerProps;\n sendingMessages?: string[] | number[];\n sendingText: string;\n }\n\n export interface GetPaddingT {\n hasMoreItems: string | undefined;\n bannerPosition: string | undefined;\n isLoading: string | undefined;\n }\n}\n\nexport interface TextAreaProps {\n height: string | number;\n style: React.CSSProperties;\n}\n\nexport const defaultPropsComposer: DSChatT.ComposerProps = {\n placeholder: 'Type your message',\n inputValue: '',\n ariaMaxLengthMessage: '',\n onChange: noop,\n onResize: noop,\n onSend: noop,\n onFocus: noop,\n onBlur: noop,\n onKeyDown: noop,\n maxHeight: 0,\n inputMaxLength: undefined,\n maxLengthMessage: undefined,\n buttonDisabled: false,\n dataTestid: 'ds-chat-composer',\n actionRef: undefined,\n};\n\nexport const ChatComposerPropTypes = {\n placeholder: PropTypes.string.description('Input Placeholder').defaultValue(defaultPropsComposer.placeholder),\n inputValue: PropTypes.string.description('Input value').defaultValue(defaultPropsComposer.inputValue),\n ariaMaxLengthMessage: PropTypes.string\n .description('Aria message for Max length message when exceeded')\n .defaultValue(defaultPropsComposer.maxLengthMessage),\n maxLengthMessage: PropTypes.string\n .description('Max length message')\n .defaultValue(defaultPropsComposer.maxLengthMessage),\n onChange: PropTypes.func.description('Called when the user types').defaultValue(defaultPropsComposer.onChange),\n onResize: PropTypes.func\n .description('Called the input changes his height')\n .defaultValue(defaultPropsComposer.onResize),\n onSend: PropTypes.func.description('Called when the click send').defaultValue(defaultPropsComposer.onSend),\n onFocus: PropTypes.func.description('Input focus').defaultValue(defaultPropsComposer.onFocus),\n onBlur: PropTypes.func.description('Input blur').defaultValue(defaultPropsComposer.onBlur),\n onKeyDown: PropTypes.func.description('Input on key down').defaultValue(defaultPropsComposer.onKeyDown),\n maxHeight: PropTypes.number\n .description('Max height of the composer. Use 0 for no limit')\n .defaultValue(defaultPropsComposer.onBlur),\n inputMaxLength: PropTypes.number\n .description('Max length of the composer. `undefined` for no limit')\n .defaultValue(defaultPropsComposer.inputMaxLength),\n buttonDisabled: PropTypes.bool\n .description('Control the disabled for the send button')\n .defaultValue(defaultPropsComposer.buttonDisabled),\n dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultPropsComposer.placeholder),\n actionRef: PropTypes.object\n .description(\n `Reference: \n { \n scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n getMessagesInView?: () => number[],\n focusToIndex?: (n: number) => void,\n focusToList?: () => void,\n focusToComposer?: () => void,\n focusToSend?: () => void,\n }\n \n `,\n )\n .defaultValue(defaultPropsComposer.actionRef),\n};\n\nexport const defaultPropsMessagesList: DSChatT.MessagesListProps = {\n messages: [],\n actionRef: { current: {} },\n // we don't want this to exist \"by default\" since this loads document.addEventListener\n // the code is already checking for this callback existence everytime it's invoked anyway\n // onScrollEnds: () => [],\n getMoreMessages: noop,\n sendingMessages: undefined,\n sendingText: 'Sending',\n bannerPosition: undefined,\n bannerRef: undefined,\n};\n\nexport const ChatContainerMessagesListPropTypes = {\n ...globalAttributesPropTypes,\n\n messages: PropTypes.arrayOf(PropTypes.object)\n .description('The array of out-of-the-box items you want to render inside the ChatMessageList')\n .defaultValue(defaultPropsMessagesList.messages),\n actionRef: PropTypes.object\n .description(\n `Reference: \n { \n scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n getMessagesInView: () => number[],\n focusToIndex: (n: number) => void,\n focusToIndexWithoutScroll: (n: number) => void,\n focusToList: () => void,\n focusToComposer: () => void,\n focusToSend: () => void,\n }\n \n `,\n )\n .defaultValue(defaultPropsMessagesList.actionRef),\n onScrollEnds: PropTypes.func.description(`Called when the scroll stops.`),\n isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Keeps the load more space while the loading is in progress',\n ),\n hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Load More button at the `top` or `bottom` of the container',\n ),\n getMoreMessages: PropTypes.func\n .description('Called when the user clicks on load more')\n .defaultValue(defaultPropsMessagesList.getMoreMessages),\n sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])\n .description('Array of ids of sending messages')\n .defaultValue(defaultPropsMessagesList.sendingMessages),\n sendingText: PropTypes.string\n .description('Label description for messages in sending status')\n .defaultValue(defaultPropsMessagesList.sendingText),\n};\n\nexport const defaultProps: DSChatT.ContainerProps = {\n messagesListProps: defaultPropsMessagesList,\n composerProps: defaultPropsComposer,\n actionRef: undefined,\n autoScroll: false,\n device: 'desktop',\n isLoading: undefined,\n hasMoreItems: undefined,\n getMoreMessages: noop,\n bannerPosition: undefined,\n bannerProps: {\n type: BANNER_TYPES.INFO,\n label: 'Unread Messages',\n viewLabel: 'View',\n onView: noop,\n onClose: noop,\n },\n sendingMessages: undefined,\n sendingText: 'Sending',\n};\n\nexport const ChatContainerPropTypes = {\n ...globalAttributesPropTypes,\n messagesListProps: PropTypes.object\n .description('ChatMessageList props \"messages\" / \"onScrollEnds\"')\n .defaultValue(defaultProps.messagesListProps),\n composerProps: PropTypes.object.description('Composer configuration').defaultValue(defaultProps.composerProps),\n autoScroll: PropTypes.bool.description('Auto scroll to bottom on resize').defaultValue(defaultProps.autoScroll),\n device: PropTypes.string\n .description('Option to render mobile or desktop style composer')\n .defaultValue(defaultProps.device),\n isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Loading messages indicator at the `top` or `bottom` of the container',\n ),\n hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Load More button at the `top` or `bottom` of the container',\n ),\n getMoreMessages: PropTypes.func\n .description('Called when the user clicks on load more')\n .defaultValue(defaultProps.getMoreMessages),\n bannerPosition: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Loading messages indicator at the `top` or `bottom` of the container',\n ),\n bannerProps: PropTypes.object\n .description(\n `Banner configuration:\n label: string;\n viewLabel: string;\n type: BANNER_TYPES;\n onView: () => void;\n onClose: () => void;\n `,\n )\n .defaultValue(defaultProps.bannerProps),\n sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])\n .description('Array of ids of sending messages')\n .defaultValue(defaultProps.sendingMessages),\n sendingText: PropTypes.string\n .description('Label description for messages in sending status')\n .defaultValue(defaultProps.sendingText),\n actionRef: PropTypes.object\n .description(\n `Reference: \n { \n scrollToIndex: (n: number) => void,\n getMessagesInView: () => number[],\n focusToIndex: (n: number) => void,\n focusToList: () => void,\n focusToComposer: () => void,\n focusToSend: () => void,\n }\n \n `,\n )\n .defaultValue(defaultProps.actionRef),\n};\n"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { useVirtual } from 'react-virtual';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { type DSChatBubbleT } from '@elliemae/ds-chat-bubble';\nimport { type DSButtonT } from '@elliemae/ds-button-v2';\n\n// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\nexport declare namespace DSChatT {\n interface ChatBannerProps {\n label: string;\n viewLabel: string;\n type?: 'info' | 'success' | 'danger' | 'warning';\n onView: () => void;\n onClose: () => void;\n }\n export type ScrollToIndexOptions = Parameters<ReturnType<typeof useVirtual>['scrollToIndex']>[1];\n export type ActionRef = React.MutableRefObject<{\n scrollToIndex?: (index: number, opts?: ScrollToIndexOptions) => void;\n focusToIndex?: (index: number, opts?: ScrollToIndexOptions) => void;\n getMessagesInView?: () => string[];\n focusToIndexWithoutScroll?: (index: string) => void;\n focusToList?: () => void;\n focusToComposer?: () => void;\n focusToSend?: () => void;\n focusOnBanner?: () => void;\n focusOnBannerLink?: () => void;\n }>;\n\n export interface ComposerProps extends Record<string, unknown> {\n placeholder?: string;\n inputValue?: string;\n ariaMaxLengthMessage?: string;\n maxLengthMessage?: string;\n onChange: (value: string) => void;\n onResize?: (value: number) => void;\n onSend: (e: Parameters<Required<DSButtonT.Props>['onClick']>[0]) => void;\n onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n maxHeight?: number;\n inputMaxLength?: number;\n buttonDisabled: boolean;\n dataTestid?: string;\n actionRef?: ActionRef;\n }\n\n export interface MessagesListProps extends Record<string, unknown> {\n messages: DSChatBubbleT.Props[];\n actionRef: ActionRef;\n onScrollEnds?: (indexList: string[]) => void;\n isLoading?: 'top' | 'bottom';\n hasMoreItems?: 'top' | 'bottom';\n getMoreMessages: () => void;\n sendingMessages?: Array<string | number>;\n sendingText: string;\n bannerPosition?: 'top' | 'bottom';\n bannerRef?: React.MutableRefObject<{\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n focusOnWrapper: (...args: any[]) => void;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n focusOnLink: (...args: any[]) => void;\n }>;\n }\n\n export interface ContainerProps extends Record<string, unknown> {\n messagesListProps: Pick<MessagesListProps, 'messages' | 'onScrollEnds'>;\n composerProps: ComposerProps;\n actionRef?: ActionRef;\n autoScroll: boolean;\n device: 'desktop' | 'mobile';\n isLoading?: 'top' | 'bottom';\n hasMoreItems?: 'top' | 'bottom';\n getMoreMessages: () => void;\n bannerPosition?: 'top' | 'bottom';\n bannerProps?: ChatBannerProps;\n sendingMessages?: string[] | number[];\n sendingText: string;\n }\n\n export interface GetPaddingT {\n hasMoreItems: string | undefined;\n bannerPosition: string | undefined;\n isLoading: string | undefined;\n }\n}\n\nexport interface TextAreaProps {\n height: string | number;\n style: React.CSSProperties;\n}\n\nexport const defaultPropsComposer: DSChatT.ComposerProps = {\n placeholder: 'Type your message',\n inputValue: '',\n ariaMaxLengthMessage: '',\n onChange: noop,\n onResize: noop,\n onSend: noop,\n onFocus: noop,\n onBlur: noop,\n onKeyDown: noop,\n maxHeight: 0,\n inputMaxLength: undefined,\n maxLengthMessage: undefined,\n buttonDisabled: false,\n dataTestid: 'ds-chat-composer',\n actionRef: undefined,\n};\n\nexport const ChatComposerPropTypes = {\n placeholder: PropTypes.string.description('Input Placeholder').defaultValue(defaultPropsComposer.placeholder),\n inputValue: PropTypes.string.description('Input value').defaultValue(defaultPropsComposer.inputValue),\n ariaMaxLengthMessage: PropTypes.string\n .description('Aria message for Max length message when exceeded')\n .defaultValue(defaultPropsComposer.maxLengthMessage),\n maxLengthMessage: PropTypes.string\n .description('Max length message')\n .defaultValue(defaultPropsComposer.maxLengthMessage),\n onChange: PropTypes.func.description('Called when the user types').defaultValue(defaultPropsComposer.onChange),\n onResize: PropTypes.func\n .description('Called the input changes his height')\n .defaultValue(defaultPropsComposer.onResize),\n onSend: PropTypes.func.description('Called when the click send').defaultValue(defaultPropsComposer.onSend),\n onFocus: PropTypes.func.description('Input focus').defaultValue(defaultPropsComposer.onFocus),\n onBlur: PropTypes.func.description('Input blur').defaultValue(defaultPropsComposer.onBlur),\n onKeyDown: PropTypes.func.description('Input on key down').defaultValue(defaultPropsComposer.onKeyDown),\n maxHeight: PropTypes.number\n .description('Max height of the composer. Use 0 for no limit')\n .defaultValue(defaultPropsComposer.onBlur),\n inputMaxLength: PropTypes.number\n .description('Max length of the composer. `undefined` for no limit')\n .defaultValue(defaultPropsComposer.inputMaxLength),\n buttonDisabled: PropTypes.bool\n .description('Control the disabled for the send button')\n .defaultValue(defaultPropsComposer.buttonDisabled),\n dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultPropsComposer.placeholder),\n actionRef: PropTypes.object\n .description(\n `Reference: \n { \n scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n getMessagesInView?: () => number[],\n focusToIndex?: (n: number) => void,\n focusToList?: () => void,\n focusToComposer?: () => void,\n focusToSend?: () => void,\n }\n \n `,\n )\n .defaultValue(defaultPropsComposer.actionRef),\n};\n\nexport const defaultPropsMessagesList: DSChatT.MessagesListProps = {\n messages: [],\n actionRef: { current: {} },\n // we don't want this to exist \"by default\" since this loads document.addEventListener\n // the code is already checking for this callback existence everytime it's invoked anyway\n // onScrollEnds: () => [],\n getMoreMessages: noop,\n sendingMessages: undefined,\n sendingText: 'Sending',\n bannerPosition: undefined,\n bannerRef: undefined,\n};\n\nexport const ChatContainerMessagesListPropTypes = {\n ...globalAttributesPropTypes,\n\n messages: PropTypes.arrayOf(PropTypes.object)\n .description('The array of out-of-the-box items you want to render inside the ChatMessageList')\n .defaultValue(defaultPropsMessagesList.messages),\n actionRef: PropTypes.object\n .description(\n `Reference: \n { \n scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n getMessagesInView: () => number[],\n focusToIndex: (n: number) => void,\n focusToIndexWithoutScroll: (n: number) => void,\n focusToList: () => void,\n focusToComposer: () => void,\n focusToSend: () => void,\n }\n \n `,\n )\n .defaultValue(defaultPropsMessagesList.actionRef),\n onScrollEnds: PropTypes.func.description(`Called when the scroll stops.`),\n isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Keeps the load more space while the loading is in progress',\n ),\n hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Load More button at the `top` or `bottom` of the container',\n ),\n getMoreMessages: PropTypes.func\n .description('Called when the user clicks on load more')\n .defaultValue(defaultPropsMessagesList.getMoreMessages),\n sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])\n .description('Array of ids of sending messages')\n .defaultValue(defaultPropsMessagesList.sendingMessages),\n sendingText: PropTypes.string\n .description('Label description for messages in sending status')\n .defaultValue(defaultPropsMessagesList.sendingText),\n};\n\nexport const defaultProps: DSChatT.ContainerProps = {\n messagesListProps: defaultPropsMessagesList,\n composerProps: defaultPropsComposer,\n actionRef: undefined,\n autoScroll: false,\n device: 'desktop',\n isLoading: undefined,\n hasMoreItems: undefined,\n getMoreMessages: noop,\n bannerPosition: undefined,\n bannerProps: {\n type: BANNER_TYPES.INFO,\n label: 'Unread Messages',\n viewLabel: 'View',\n onView: noop,\n onClose: noop,\n },\n sendingMessages: undefined,\n sendingText: 'Sending',\n};\n\nexport const ChatContainerPropTypes = {\n ...globalAttributesPropTypes,\n messagesListProps: PropTypes.object\n .description('ChatMessageList props \"messages\" / \"onScrollEnds\"')\n .defaultValue(defaultProps.messagesListProps),\n composerProps: PropTypes.object.description('Composer configuration').defaultValue(defaultProps.composerProps),\n autoScroll: PropTypes.bool.description('Auto scroll to bottom on resize').defaultValue(defaultProps.autoScroll),\n device: PropTypes.string\n .description('Option to render mobile or desktop style composer')\n .defaultValue(defaultProps.device),\n isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Loading messages indicator at the `top` or `bottom` of the container',\n ),\n hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Load More button at the `top` or `bottom` of the container',\n ),\n getMoreMessages: PropTypes.func\n .description('Called when the user clicks on load more')\n .defaultValue(defaultProps.getMoreMessages),\n bannerPosition: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Loading messages indicator at the `top` or `bottom` of the container',\n ),\n bannerProps: PropTypes.object\n .description(\n `Banner configuration:\n label: string;\n viewLabel: string;\n type: BANNER_TYPES;\n onView: () => void;\n onClose: () => void;\n `,\n )\n .defaultValue(defaultProps.bannerProps),\n sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])\n .description('Array of ids of sending messages')\n .defaultValue(defaultProps.sendingMessages),\n sendingText: PropTypes.string\n .description('Label description for messages in sending status')\n .defaultValue(defaultProps.sendingText),\n actionRef: PropTypes.object\n .description(\n `Reference: \n { \n scrollToIndex: (n: number) => void,\n getMessagesInView: () => number[],\n focusToIndex: (n: number) => void,\n focusToList: () => void,\n focusToComposer: () => void,\n focusToSend: () => void,\n }\n \n `,\n )\n .defaultValue(defaultProps.actionRef),\n};\n"],
5
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/types/parts/chat-container-messages-list/useActionRef.d.ts CHANGED
@@ -5,9 +5,10 @@ type UseActionRefArgs = {
5
5
  actionRef: DSChatT.ActionRef;
6
6
  useVirtualHelpers: ReturnType<typeof useVirtual>;
7
7
  virtualListRef: React.MutableRefObject<HTMLDivElement | undefined>;
8
- onScrollStop: () => string[];
8
+ updateCache: () => void;
9
+ getMessagesInView: () => string[];
9
10
  onlyFocus: (index: string) => void;
10
11
  scrollAndFocus: (index: number, opts?: DSChatT.ScrollToIndexOptions) => void;
11
12
  };
12
- export declare const useActionRef: ({ actionRef, useVirtualHelpers: { scrollToIndex: vScroll }, virtualListRef, onScrollStop, onlyFocus, scrollAndFocus, }: UseActionRefArgs) => void;
13
+ export declare const useActionRef: ({ actionRef, useVirtualHelpers: { scrollToIndex: vScroll }, virtualListRef, updateCache, getMessagesInView, onlyFocus, scrollAndFocus, }: UseActionRefArgs) => void;
13
14
  export {};
package/dist/types/parts/chat-container-messages-list/useFocusAndScrollHelpers.d.ts CHANGED
@@ -9,6 +9,8 @@ type UseFocusAndScrollHelpersArgs = {
9
9
  };
10
10
  export declare const useFocusAndScrollHelpers: ({ propsWithDefault: { onScrollEnds }, useVirtualHelpers: { scrollToIndex: vScroll }, pendingOnScroll, virtualListRef, }: UseFocusAndScrollHelpersArgs) => {
11
11
  onScrollStop: () => string[];
12
+ updateCache: import("lodash").DebouncedFuncLeading<() => void>;
13
+ getMessagesInView: () => string[];
12
14
  onlyFocus: (index: string) => void;
13
15
  scrollAndFocus: (index: number) => void;
14
16
  checkPendingOnScroll: () => void;
package/dist/types/parts/chat-container-messages-list/useKeyboard.d.ts CHANGED
@@ -7,9 +7,9 @@ type UseKeyboardArgs = {
7
7
  loadMoreRef: React.MutableRefObject<HTMLButtonElement | undefined>;
8
8
  scrollAndFocus: (index: number, opts?: DSChatT.ScrollToIndexOptions) => void;
9
9
  onlyFocus: (index: string) => void;
10
- onScrollStop: () => string[];
10
+ getMessagesInView: () => string[];
11
11
  };
12
- export declare const useKeyboard: ({ propsWithDefault: { hasMoreItems, messages, bannerPosition, bannerRef }, actionRef, virtualListRef, loadMoreRef, scrollAndFocus, onlyFocus, onScrollStop, }: UseKeyboardArgs) => {
12
+ export declare const useKeyboard: ({ propsWithDefault: { hasMoreItems, messages, bannerPosition, bannerRef }, actionRef, virtualListRef, loadMoreRef, scrollAndFocus, onlyFocus, getMessagesInView, }: UseKeyboardArgs) => {
13
13
  handleKey: (e: React.KeyboardEvent<HTMLElement>) => void;
14
14
  handleListKey: (e: React.KeyboardEvent) => void;
15
15
  };
package/dist/types/react-desc-prop-types.d.ts CHANGED
@@ -11,8 +11,8 @@ export declare namespace DSChatT {
11
11
  }
12
12
  type ScrollToIndexOptions = Parameters<ReturnType<typeof useVirtual>['scrollToIndex']>[1];
13
13
  type ActionRef = React.MutableRefObject<{
14
- scrollToIndex?: (index: number, opts: ScrollToIndexOptions) => void;
15
- focusToIndex?: (index: number, opts: ScrollToIndexOptions) => void;
14
+ scrollToIndex?: (index: number, opts?: ScrollToIndexOptions) => void;
15
+ focusToIndex?: (index: number, opts?: ScrollToIndexOptions) => void;
16
16
  getMessagesInView?: () => string[];
17
17
  focusToIndexWithoutScroll?: (index: string) => void;
18
18
  focusToList?: () => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-chat-container",
3
- "version": "3.70.0-next.7",
3
+ "version": "3.70.0-next.70",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Chat Container",
6
6
  "files": [
@@ -18,7 +18,7 @@
18
18
  },
19
19
  "repository": {
20
20
  "type": "git",
21
- "url": "https://git.elliemae.io/platform-ui/dimsum.git"
21
+ "url": "https://github.com/intcx/PLATFORM-UI.dimsum.git"
22
22
  },
23
23
  "engines": {
24
24
  "pnpm": ">=9",
@@ -37,34 +37,35 @@
37
37
  },
38
38
  "dependencies": {
39
39
  "react-virtual": "~2.10.4",
40
- "@elliemae/ds-button-v2": "3.70.0-next.7",
41
- "@elliemae/ds-banner": "3.70.0-next.7",
42
- "@elliemae/ds-chat-bubble": "3.70.0-next.7",
43
- "@elliemae/ds-chat-container-header": "3.70.0-next.7",
44
- "@elliemae/ds-chat-message-delimeter": "3.70.0-next.7",
45
- "@elliemae/ds-grid": "3.70.0-next.7",
46
- "@elliemae/ds-props-helpers": "3.70.0-next.7",
47
- "@elliemae/ds-chat-system-message": "3.70.0-next.7",
48
- "@elliemae/ds-system": "3.70.0-next.7",
49
- "@elliemae/ds-typescript-helpers": "3.70.0-next.7",
50
- "@elliemae/ds-indeterminate-progress-indicator": "3.70.0-next.7",
51
- "@elliemae/ds-icons": "3.70.0-next.7"
40
+ "@elliemae/ds-banner": "3.70.0-next.70",
41
+ "@elliemae/ds-button-v2": "3.70.0-next.70",
42
+ "@elliemae/ds-chat-bubble": "3.70.0-next.70",
43
+ "@elliemae/ds-chat-message-delimeter": "3.70.0-next.70",
44
+ "@elliemae/ds-chat-container-header": "3.70.0-next.70",
45
+ "@elliemae/ds-chat-system-message": "3.70.0-next.70",
46
+ "@elliemae/ds-grid": "3.70.0-next.70",
47
+ "@elliemae/ds-props-helpers": "3.70.0-next.70",
48
+ "@elliemae/ds-indeterminate-progress-indicator": "3.70.0-next.70",
49
+ "@elliemae/ds-icons": "3.70.0-next.70",
50
+ "@elliemae/ds-typescript-helpers": "3.70.0-next.70",
51
+ "@elliemae/ds-system": "3.70.0-next.70"
52
52
  },
53
53
  "devDependencies": {
54
+ "@playwright/experimental-ct-react": "1.61.1",
54
55
  "@types/react": "^18.0.0",
55
56
  "jest": "^30.0.0",
56
- "styled-components": "~5.3.9",
57
- "@elliemae/ds-test-utils": "3.70.0-next.7",
58
- "@elliemae/ds-monorepo-devops": "3.70.0-next.7"
57
+ "styled-components": "~5.3.11",
58
+ "@elliemae/ds-monorepo-devops": "3.70.0-next.70",
59
+ "@elliemae/ds-test-utils": "3.70.0-next.70"
59
60
  },
60
61
  "peerDependencies": {
61
- "lodash-es": "^4.17.21",
62
+ "lodash-es": "^4.18.1",
62
63
  "react": "^18.3.1",
63
64
  "react-dom": "^18.3.1",
64
- "styled-components": "~5.3.9"
65
+ "styled-components": "~5.3.11"
65
66
  },
66
67
  "scripts": {
67
- "test": "ds-monorepo-devops test --passWithNoTests --coverage=\"false\"",
68
+ "test": "playwright test -c ./playwright.config.mjs && ds-monorepo-devops test --passWithNoTests --coverage=\"false\"",
68
69
  "lint": "node ../../../scripts/lint.mjs --fix",
69
70
  "lint:strict": "node ../../../scripts/lint-strict.mjs",
70
71
  "dts": "node ../../../scripts/dts.mjs",
@@ -72,4 +73,4 @@
72
73
  "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
73
74
  "checkDeps": "npx -yes ../../util/ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
74
75
  }
75
- }
76
+ }
package/dist/types/tests/ChatContainer.test.d.ts DELETED
@@ -1 +0,0 @@
1
- export {};